diff --git a/.changeset/silent-jokes-camp.md b/.changeset/silent-jokes-camp.md new file mode 100644 index 0000000000..40acfb6cf9 --- /dev/null +++ b/.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. diff --git a/packages/react-select/src/Async.js b/packages/react-select/src/Async.js index fd01075eff..dfef273860 100644 --- a/packages/react-select/src/Async.js +++ b/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 = ( SelectComponent: AbstractComponent -): AbstractComponent => +): AbstractComponent> => class Async extends Component { static defaultProps = defaultProps; select: ElementRef<*>; diff --git a/packages/react-select/src/Creatable.js b/packages/react-select/src/Creatable.js index 6362481272..1ff7905695 100644 --- a/packages/react-select/src/Creatable.js +++ b/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 = ( SelectComponent: AbstractComponent -): AbstractComponent => +): AbstractComponent> => class Creatable extends Component { static defaultProps = defaultProps; select: ElementRef<*>; diff --git a/packages/react-select/src/Select.js b/packages/react-select/src/Select.js index f2d5606226..7e762e375b 100644 --- a/packages/react-select/src/Select.js +++ b/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 */ diff --git a/packages/react-select/src/components/SingleValue.js b/packages/react-select/src/components/SingleValue.js index 634f31574e..eb15be2b07 100644 --- a/packages/react-select/src/components/SingleValue.js +++ b/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. */