Flow updates (#3537)

* Flow: Fix Async's defaultProps type

makeAsyncSelect was losing the type information from the default props, so, eg,
cacheOptions would appear as a required props

* Flow: allow JSX children of SingleValue

* Flow: allow JSX in noOptionsMessage

* Flow: fix defaultProps getting lost with makeCreatableSelect

* Flow: Async's onInputChange prop isn't required

* Update silent-jokes-camp.md

.changeset/silent-jokes-camp.md

@@ -0,0 +1,5 @@
+---
+"react-select": patch
+---
+
+Fix Flow issues. Refer to the linked PR for more details on the specific issues.

packages/react-select/src/Async.js

@@ -2,6 +2,7 @@
 
 import React, {
   Component,
+  type Config,
   type ElementConfig,
   type AbstractComponent,
   type ElementRef,
@@ -11,17 +12,20 @@ import { handleInputChange } from './utils';
 import manageState from './stateManager';
 import type { OptionsType, InputActionMeta } from './types';
 
-export type AsyncProps = {
+type DefaultAsyncProps = {|
   /* The default set of options to show before the user starts searching. When
      set to `true`, the results for loadOptions('') will be autoloaded. */
   defaultOptions: OptionsType | boolean,
+  /* If cacheOptions is truthy, then the loaded data will be cached. The cache
+    will remain until `cacheOptions` changes value. */
+  cacheOptions: any,
+|};
+export type AsyncProps = {
+  ...DefaultAsyncProps,
   /* Function that returns a promise, which is the set of options to be used
      once the promise resolves. */
   loadOptions: (string, (OptionsType) => void) => Promise<*> | void,
-  /* If cacheOptions is truthy, then the loaded data will be cached. The cache
-     will remain until `cacheOptions` changes value. */
-  cacheOptions: any,
-  onInputChange: (string, InputActionMeta) => void,
+  onInputChange?: (string, InputActionMeta) => void,
   inputValue?: string,
   isLoading: boolean
 };
@@ -46,7 +50,7 @@ type State = {
 
 export const makeAsyncSelect = <C: {}>(
   SelectComponent: AbstractComponent<C>
-): AbstractComponent<C & AsyncProps> =>
+): AbstractComponent<C & Config<AsyncProps, DefaultAsyncProps>> =>
   class Async extends Component<C & AsyncProps, State> {
     static defaultProps = defaultProps;
     select: ElementRef<*>;

packages/react-select/src/Creatable.js

@@ -2,6 +2,7 @@
 
 import React, {
   Component,
+  type Config,
   type Node,
   type AbstractComponent,
   type ElementRef,
@@ -12,11 +13,13 @@ import type { OptionType, OptionsType, ValueType, ActionMeta } from './types';
 import { cleanValue } from './utils';
 import manageState from './stateManager';
 
-export type CreatableProps = {|
+export type DefaultCreatableProps = {|
   /* Allow options to be created while the `isLoading` prop is true. Useful to
      prevent the "create new ..." option being displayed while async results are
      still being loaded. */
   allowCreateWhileLoading: boolean,
+  /* Sets the position of the createOption element in your options list. Defaults to 'last' */
+  createOptionPosition: 'first' | 'last',
   /* Gets the label for the "create new ..." option in the menu. Is given the
      current input value. */
   formatCreateLabel: string => Node,
@@ -26,6 +29,9 @@ export type CreatableProps = {|
   /* Returns the data for the new option when it is created. Used to display the
      value, and is passed to `onChange`. */
   getNewOptionData: (string, Node) => OptionType,
+|};
+export type CreatableProps = {
+  ...DefaultCreatableProps,
   /* 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. */
@@ -40,7 +46,7 @@ export type CreatableProps = {|
   isLoading?: boolean,
   isMulti?: boolean,
   onChange: (ValueType, ActionMeta) => void,
-|};
+};
 
 export type Props = SelectProps & CreatableProps;
 
@@ -70,7 +76,7 @@ const builtins = {
   }),
 };
 
-export const defaultProps = {
+export const defaultProps: DefaultCreatableProps = {
   allowCreateWhileLoading: false,
   createOptionPosition: 'last',
   ...builtins,
@@ -83,7 +89,7 @@ type State = {
 
 export const makeCreatableSelect = <C: {}>(
   SelectComponent: AbstractComponent<C>
-): AbstractComponent<CreatableProps & C> =>
+): AbstractComponent<C & Config<CreatableProps, DefaultCreatableProps>> =>
   class Creatable extends Component<CreatableProps & C, State> {
     static defaultProps = defaultProps;
     select: ElementRef<*>;

packages/react-select/src/Select.js

@@ -198,7 +198,7 @@ export type Props = {
   /* Name of the HTML Input (optional - without this, no input will be rendered) */
   name?: string,
   /* Text to display when there are no options */
-  noOptionsMessage: ({ inputValue: string }) => string | null,
+  noOptionsMessage: ({ inputValue: string }) => Node | null,
   /* Handle blur events on the control */
   onBlur?: FocusEventHandler,
   /* Handle change events on the select */

packages/react-select/src/components/SingleValue.js

@@ -9,7 +9,7 @@ type State = {
 };
 type ValueProps = {
   /** The children to be rendered. */
-  children: string,
+  children: React$Node,
   /* The data of the selected option rendered in the Single Value component. */
   data: any,
   /** Props passed to the wrapping element for the group. */