[react-select] switch DOM Node for ReactNode as per other files (#27871)

* as elsewhere Node type should refer to ReactNode not a DOM node

* lint fix :(

* remove ReactNode -> Node alias and use ReactNode type throughout

types/react-select/lib/Creatable.d.ts

@@ -11,13 +11,13 @@ export interface CreatableProps<OptionType> {
   allowCreateWhileLoading?: boolean;
   /* Gets the label for the "create new ..." option in the menu. Is given the
      current input value. */
-  formatCreateLabel?: (inputValue: string) => Node;
+  formatCreateLabel?: (inputValue: string) => React.ReactNode;
   /* Determines whether the "create new ..." option should be displayed based on
      the current input value, select value and options array. */
   isValidNewOption?: (inputValue: string, value: ValueType<OptionType>, options: OptionsType<OptionType>) => boolean;
   /* Returns the data for the new option when it is created. Used to display the
      value, and is passed to `onChange`. */
-  getNewOptionData?: (inputValue: string, optionLabel: Node) => OptionType;
+  getNewOptionData?: (inputValue: string, optionLabel: React.ReactNode) => OptionType;
   /* If provided, this will be called with the input value when a new option is
      created, and `onChange` will **not** be called. Use this when you need more
      control over what happens when new options are created. */

types/react-select/lib/Select.d.ts

@@ -107,7 +107,7 @@ export interface Props<OptionType> {
   /* Formats group labels in the menu as React components */
   formatGroupLabel?: typeof formatGroupLabel;
   /* Formats option labels in the menu and control as React components */
-  formatOptionLabel?: (option: OptionType, labelMeta: FormatOptionLabelMeta<OptionType>) => Node;
+  formatOptionLabel?: (option: OptionType, labelMeta: FormatOptionLabelMeta<OptionType>) => React.ReactNode;
   /* Resolves option data to a string to be displayed as the label by components */
   getOptionLabel?: typeof getOptionLabel;
   /* Resolves option data to a string to compare options and specify value attributes */
@@ -311,7 +311,7 @@ export default class Select<OptionType> extends React.Component<Props<OptionType
     selectOption: (newValue: OptionType) => void;
     setValue: (newValue: ValueType<OptionType>, action: ActionTypes, option?: OptionType) => void;
     selectProps: Readonly<{
-        children?: Node;
+        children?: React.ReactNode;
     }> & Readonly<Props<OptionType>>;
 };
 
@@ -343,8 +343,8 @@ export default class Select<OptionType> extends React.Component<Props<OptionType
   isOptionDisabled(option: OptionType, selectValue: OptionsType<OptionType>): boolean;
   isOptionSelected(option: OptionType, selectValue: OptionsType<OptionType>): boolean;
   filterOption(option: {}, inputValue: string): boolean;
-  formatOptionLabel(data: OptionType, context: FormatOptionLabelContext): Node;
-  formatGroupLabel(data: GroupType<OptionType>): Node;
+  formatOptionLabel(data: OptionType, context: FormatOptionLabelContext): React.ReactNode;
+  formatGroupLabel(data: GroupType<OptionType>): React.ReactNode;
 
   // ==============================
   // Mouse Handlers
@@ -406,14 +406,14 @@ export default class Select<OptionType> extends React.Component<Props<OptionType
   // ==============================
   constructAriaLiveMessage(): string;
 
-  renderInput(): Node;
+  renderInput(): React.ReactNode;
   renderPlaceholderOrValue(): PlaceholderOrValue<OptionType> | null;
-  renderClearIndicator(): Node;
-  renderLoadingIndicator(): Node;
-  renderIndicatorSeparator(): Node;
-  renderDropdownIndicator(): Node;
-  renderMenu(): Node;
-  renderFormField(): Node;
+  renderClearIndicator(): React.ReactNode;
+  renderLoadingIndicator(): React.ReactNode;
+  renderIndicatorSeparator(): React.ReactNode;
+  renderDropdownIndicator(): React.ReactNode;
+  renderMenu(): React.ReactNode;
+  renderFormField(): React.ReactNode;
 
-  renderLiveRegion(): Node;
+  renderLiveRegion(): React.ReactNode;
 }

types/react-select/lib/builtins.d.ts

@@ -1,7 +1,7 @@
-import { ReactNode as Node } from 'react';
+import { ReactNode } from 'react';
 import { GroupType } from './types';
 
-export function formatGroupLabel(group: GroupType<any>): Node;
+export function formatGroupLabel(group: GroupType<any>): ReactNode;
 
 export function getOptionLabel(option: any): string;
 

types/react-select/lib/components/Control.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType, ReactNode as Node, Ref as ElementRef } from 'react';
+import { ComponentType, ReactNode, Ref as ElementRef } from 'react';
 
 import { borderRadius, colors, spacing } from '../theme';
 import { CommonProps, PropsWithStyles } from '../types';
@@ -14,7 +14,7 @@ export type ControlProps<OptionType> = CommonProps<OptionType> &
   PropsWithStyles &
   State & {
     /** Children to render. */
-    children: Node,
+    children: ReactNode,
     innerRef: ElementRef<any>,
     /** The mouse down event and the innerRef to pass down to the controller element. */
     innerProps: {

types/react-select/lib/components/Group.d.ts

@@ -1,15 +1,15 @@
-import { ReactNode as  Node, ComponentType } from 'react';
+import { ReactNode, ComponentType } from 'react';
 
 import { spacing } from '../theme';
 import { CommonProps } from '../types';
 
 interface ComponentProps {
   /** The children to be rendered. */
-  children: Node;
+  children: ReactNode;
   /** Component to wrap the label, recieves headingProps. */
   Heading: ComponentType<any>;
   /** Label to be displayed in the heading component. */
-  label: Node;
+  label: ReactNode;
 }
 export type GroupProps<OptionType> = CommonProps<OptionType> & ComponentProps;
 

types/react-select/lib/components/Menu.d.ts

@@ -2,7 +2,7 @@ import {
   Component,
   ReactElement,
   Ref as ElementRef,
-  ReactNode as Node,
+  ReactNode,
   ComponentType
 } from 'react';
 import { createPortal } from 'react-dom';
@@ -89,7 +89,7 @@ interface MenuListState {
 
 export interface MenuListProps {
   /** The children to be rendered. */
-  children: Node;
+  children: ReactNode;
   /** Inner ref to DOM Node */
   innerRef: InnerRef;
 }
@@ -108,7 +108,7 @@ export function loadingMessageCSS(): React.CSSProperties;
 
 export type NoticeProps<OptionType> = CommonProps<OptionType> & {
   /** The children to be rendered. */
-  children: Node,
+  children: ReactNode,
   /** Props to be passed on to the wrapper. */
   innerProps: { [key: string]: any },
 };
@@ -129,7 +129,7 @@ export const LoadingMessage: ComponentType<NoticeProps<any>>;
 
 export type MenuPortalProps<OptionType> = CommonProps<OptionType> & {
   appendTo: HTMLElement,
-  children: Node, // ideally Menu<MenuProps>
+  children: ReactNode, // ideally Menu<MenuProps>
   controlElement: HTMLElement,
   menuPlacement: MenuPlacement,
   menuPosition: MenuPosition,

types/react-select/lib/components/MultiValue.d.ts

@@ -1,10 +1,10 @@
-import { ComponentType, Component, ReactNode as Node } from 'react';
+import { ComponentType, Component, ReactNode } from 'react';
 
 import { borderRadius, colors, spacing } from '../theme';
 import { CommonProps } from '../types';
 
 export type MultiValueProps<OptionType> = CommonProps<OptionType> &{
-  children: Node,
+  children: ReactNode,
   components: any,
   cropWithEllipsis: boolean,
   data: OptionType,
@@ -23,7 +23,7 @@ export function multiValueLabelCSS(props: MultiValueProps<any>): React.CSSProper
 export function multiValueRemoveCSS(props: MultiValueProps<any>): React.CSSProperties;
 
 export interface MultiValueGenericProps<OptionType> {
-  children: Node;
+  children: ReactNode;
   data: OptionType;
   innerProps: { className?: string };
   selectProps: any;
@@ -33,7 +33,7 @@ export const MultiValueGeneric: ComponentType<MultiValueGenericProps<any>>;
 export const MultiValueContainer: typeof MultiValueGeneric;
 export const MultiValueLabel: typeof MultiValueGeneric;
 export type MultiValueRemoveProps<OptionType> = CommonProps<OptionType> & {
-  children: Node,
+  children: ReactNode,
   innerProps: {
     className: string,
     onTouchEnd: (event: any) => void,
@@ -44,7 +44,7 @@ export type MultiValueRemoveProps<OptionType> = CommonProps<OptionType> & {
 };
 export class MultiValueRemove<OptionType> extends Component<MultiValueRemoveProps<OptionType>> {
   static defaultProps: {
-    children: Node,
+    children: ReactNode,
   };
 }
 

types/react-select/lib/components/Option.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType, ReactNode as Node, MouseEventHandler } from 'react';
+import { ComponentType, ReactNode, MouseEventHandler } from 'react';
 
 import { colors, spacing } from '../theme';
 import { CommonProps, PropsWithStyles, InnerRef } from '../types';
@@ -22,7 +22,7 @@ export type OptionProps<OptionType> = PropsWithStyles &
   CommonProps<OptionType> &
   State & {
     /** The children to be rendered. */
-    children: Node,
+    children: ReactNode,
     /** Inner ref to DOM Node */
     innerRef: InnerRef,
     /** props passed to the wrapping element for the group. */

types/react-select/lib/components/Placeholder.d.ts

@@ -1,11 +1,11 @@
-import { ComponentType, ReactNode as Node } from 'react';
+import { ComponentType, ReactNode } from 'react';
 
 import { colors, spacing } from '../theme';
 import { CommonProps } from '../types';
 
 export type PlaceholderProps<OptionType> = CommonProps<OptionType> & {
   /** The children to be rendered. */
-  children: Node,
+  children: ReactNode,
   /** props passed to the wrapping element for the group. */
   innerProps: { [key: string]: any },
 };

types/react-select/lib/components/containers.d.ts

@@ -1,4 +1,4 @@
-import { Component, ReactNode as Node, ComponentType } from 'react';
+import { Component, ReactNode, ComponentType } from 'react';
 import { spacing } from '../theme';
 import { CommonProps, KeyboardEventHandler } from '../types';
 
@@ -16,7 +16,7 @@ export interface ContainerState {
 export type ContainerProps<OptionType> = CommonProps<OptionType> &
   ContainerState & {
     /** The children to be rendered. */
-    children: Node,
+    children: ReactNode,
     /** Inner props to be passed down to the container. */
     innerProps: { onKeyDown: KeyboardEventHandler },
   };
@@ -33,7 +33,7 @@ export type ValueContainerProps<OptionType> = CommonProps<OptionType> & {
   /** Whether the value container currently holds a value. */
   hasValue: boolean,
   /** The children to be rendered. */
-  children: Node,
+  children: ReactNode,
 };
 export function valueContainerCSS(): React.CSSProperties;
 export class ValueContainer extends Component<ValueContainerProps<any>> {}
@@ -50,7 +50,7 @@ export interface IndicatorsState {
 export type IndicatorContainerProps<OptionType> = CommonProps<OptionType> &
   IndicatorsState & {
     /** The children to be rendered. */
-    children: Node,
+    children: ReactNode,
   };
 
 export function indicatorsContainerCSS(): React.CSSProperties;