Merge pull request #4702 from JedWatson/remove-option-base

Remove OptionBase type

.changeset/tame-suits-lick.md

@@ -0,0 +1,6 @@
+---
+'react-select': patch
+'@react-select/docs': patch
+---
+
+The Option generic is no longer required to extend the OptionBase type

docs/PropTypes/Select.ts

@@ -1,10 +1,10 @@
 import { Component } from 'react';
 
 import { Props, defaultProps } from 'react-select/src/Select';
-import { GroupBase, OptionBase } from 'react-select';
+import { GroupBase } from 'react-select';
 
 export default class Select extends Component<
-  Props<OptionBase, boolean, GroupBase<OptionBase>>
+  Props<unknown, boolean, GroupBase<unknown>>
 > {
   defaultProps = defaultProps;
 }

docs/PropTypes/components/ClearIndicator.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { GroupBase, ClearIndicatorProps, OptionBase } from 'react-select';
+import { GroupBase, ClearIndicatorProps } from 'react-select';
 
 export default class ClearIndicator<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > extends Component<ClearIndicatorProps<Option, IsMulti, Group>> {}

docs/PropTypes/components/Control.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { ControlProps, GroupBase, OptionBase } from 'react-select';
+import { ControlProps, GroupBase } from 'react-select';
 
 export default class Control<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > extends Component<ControlProps<Option, IsMulti, Group>> {}

docs/PropTypes/components/DropdownIndicator.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { GroupBase, DropdownIndicatorProps, OptionBase } from 'react-select';
+import { GroupBase, DropdownIndicatorProps } from 'react-select';
 
 export default class DropdownIndicator<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > extends Component<DropdownIndicatorProps<Option, IsMulti, Group>> {}

docs/PropTypes/components/Group.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { GroupBase, GroupProps, OptionBase } from 'react-select';
+import { GroupBase, GroupProps } from 'react-select';
 
 export default class Group<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > extends Component<GroupProps<Option, IsMulti, Group>> {}

docs/PropTypes/components/IndicatorsContainer.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { GroupBase, IndicatorsContainerProps, OptionBase } from 'react-select';
+import { GroupBase, IndicatorsContainerProps } from 'react-select';
 
 export default class IndicatorsContainer<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > extends Component<IndicatorsContainerProps<Option, IsMulti, Group>> {}

docs/PropTypes/components/IndicatorsSeparator.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { DropdownIndicatorProps, GroupBase, OptionBase } from 'react-select';
+import { DropdownIndicatorProps, GroupBase } from 'react-select';
 
 export default class DropdownIndicator<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > extends Component<DropdownIndicatorProps<Option, IsMulti, Group>> {}

docs/PropTypes/components/Input.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { GroupBase, InputProps, OptionBase } from 'react-select';
+import { GroupBase, InputProps } from 'react-select';
 
 export default class Input<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > extends Component<InputProps<Option, IsMulti, Group>> {}

docs/PropTypes/components/LoadingIndicator.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { GroupBase, LoadingIndicatorProps, OptionBase } from 'react-select';
+import { GroupBase, LoadingIndicatorProps } from 'react-select';
 
 export default class LoadingIndicator<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > extends Component<LoadingIndicatorProps<Option, IsMulti, Group>> {}

docs/PropTypes/components/LoadingMessage.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { GroupBase, NoticeProps, OptionBase } from 'react-select';
+import { GroupBase, NoticeProps } from 'react-select';
 
 export default class LoadingMessage<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > extends Component<NoticeProps<Option, IsMulti, Group>> {}

docs/PropTypes/components/Menu.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { GroupBase, MenuProps, OptionBase } from 'react-select';
+import { GroupBase, MenuProps } from 'react-select';
 
 export default class Menu<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > extends Component<MenuProps<Option, IsMulti, Group>> {}

docs/PropTypes/components/MenuList.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { GroupBase, MenuListProps, OptionBase } from 'react-select';
+import { GroupBase, MenuListProps } from 'react-select';
 
 export default class MenuList<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > extends Component<MenuListProps<Option, IsMulti, Group>> {}

docs/PropTypes/components/MultiValue.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { GroupBase, MultiValueProps, OptionBase } from 'react-select';
+import { GroupBase, MultiValueProps } from 'react-select';
 
 export default class MultiValue<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > extends Component<MultiValueProps<Option, IsMulti, Group>> {}

docs/PropTypes/components/MultiValueContainer.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { GroupBase, MultiValueGenericProps, OptionBase } from 'react-select';
+import { GroupBase, MultiValueGenericProps } from 'react-select';
 
 export default class MultiValueContainer<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > extends Component<MultiValueGenericProps<Option, IsMulti, Group>> {}

docs/PropTypes/components/MultiValueLabel.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { GroupBase, MultiValueGenericProps, OptionBase } from 'react-select';
+import { GroupBase, MultiValueGenericProps } from 'react-select';
 
 export default class MultiValueLabel<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > extends Component<MultiValueGenericProps<Option, IsMulti, Group>> {}

docs/PropTypes/components/MultiValueRemove.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { GroupBase, MultiValueGenericProps, OptionBase } from 'react-select';
+import { GroupBase, MultiValueGenericProps } from 'react-select';
 
 export default class MultiValueRemove<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > extends Component<MultiValueGenericProps<Option, IsMulti, Group>> {}

docs/PropTypes/components/NoOptionsMessage.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { GroupBase, NoticeProps, OptionBase } from 'react-select';
+import { GroupBase, NoticeProps } from 'react-select';
 
 export default class NoOptionsMessage<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > extends Component<NoticeProps<Option, IsMulti, Group>> {}

docs/PropTypes/components/Option.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { GroupBase, OptionBase, OptionProps } from 'react-select';
+import { GroupBase, OptionProps } from 'react-select';
 
 export default class Option<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > extends Component<OptionProps<Option, IsMulti, Group>> {}

docs/PropTypes/components/Placeholder.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { GroupBase, OptionBase, PlaceholderProps } from 'react-select';
+import { GroupBase, PlaceholderProps } from 'react-select';
 
 export default class Placeholder<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > extends Component<PlaceholderProps<Option, IsMulti, Group>> {}

docs/PropTypes/components/SelectContainer.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { ContainerProps, GroupBase, OptionBase } from 'react-select';
+import { ContainerProps, GroupBase } from 'react-select';
 
 export default class SelectContainer<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > extends Component<ContainerProps<Option, IsMulti, Group>> {}

docs/PropTypes/components/SingleValue.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { GroupBase, OptionBase, SingleValueProps } from 'react-select';
+import { GroupBase, SingleValueProps } from 'react-select';
 
 export default class SingleValue<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > extends Component<SingleValueProps<Option, IsMulti, Group>> {}

docs/PropTypes/components/ValueContainer.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { GroupBase, OptionBase, ValueContainerProps } from 'react-select';
+import { GroupBase, ValueContainerProps } from 'react-select';
 
 export default class ValueContainer<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > extends Component<ValueContainerProps<Option, IsMulti, Group>> {}

docs/pages/upgradeGuide/props.tsx

@@ -7,7 +7,7 @@ import React, {
 } from 'react';
 import { jsx } from '@emotion/react';
 
-import Select, { components, OptionBase, OptionProps } from 'react-select';
+import Select, { components, OptionProps } from 'react-select';
 import md from '../../markdown/renderer';
 
 const Code: FunctionComponent = ({ children }) => <code>{children}</code>;
@@ -242,7 +242,7 @@ interface InputOptionState {
   readonly isActive: boolean;
 }
 
-class InputOption extends Component<OptionProps<OptionBase>, InputOptionState> {
+class InputOption extends Component<OptionProps, InputOptionState> {
   state: InputOptionState = { isActive: false };
   onMouseDown = () => this.setState({ isActive: true });
   onMouseUp = () => this.setState({ isActive: false });

packages/react-select/src/Async.tsx

@@ -1,13 +1,13 @@
 import React, { MutableRefObject, ReactElement, RefAttributes } from 'react';
 import Select from './Select';
-import { OptionBase, GroupBase } from './types';
+import { GroupBase } from './types';
 import useStateManager from './useStateManager';
 import useAsync from './useAsync';
 import type { AsyncProps } from './useAsync';
 export type { AsyncProps };
 
 type AsyncSelect = <
-  Option extends OptionBase = OptionBase,
+  Option = unknown,
   IsMulti extends boolean = false,
   Group extends GroupBase<Option> = GroupBase<Option>
 >(
@@ -16,11 +16,7 @@ type AsyncSelect = <
 ) => ReactElement;
 
 const AsyncSelect = React.forwardRef(
-  <
-    Option extends OptionBase,
-    IsMulti extends boolean,
-    Group extends GroupBase<Option>
-  >(
+  <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
     props: AsyncProps<Option, IsMulti, Group>,
     ref:
       | ((instance: Select<Option, IsMulti, Group> | null) => void)

packages/react-select/src/AsyncCreatable.tsx

@@ -1,20 +1,20 @@
 import Select from './Select';
-import { GroupBase, OptionBase } from './types';
+import { GroupBase } from './types';
 import React, { MutableRefObject, ReactElement, RefAttributes } from 'react';
 import useAsync, { AsyncAdditionalProps } from './useAsync';
 import useStateManager, { StateManagerProps } from './useStateManager';
 import useCreatable, { CreatableAdditionalProps } from './useCreatable';
 
 type AsyncCreatableProps<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > = StateManagerProps<Option, IsMulti, Group> &
   CreatableAdditionalProps<Option, Group> &
   AsyncAdditionalProps<Option, Group>;
 
 type AsyncCreatableSelect = <
-  Option extends OptionBase = OptionBase,
+  Option = unknown,
   IsMulti extends boolean = false,
   Group extends GroupBase<Option> = GroupBase<Option>
 >(
@@ -23,11 +23,7 @@ type AsyncCreatableSelect = <
 ) => ReactElement;
 
 const AsyncCreatableSelect = React.forwardRef(
-  <
-    Option extends OptionBase,
-    IsMulti extends boolean,
-    Group extends GroupBase<Option>
-  >(
+  <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
     props: AsyncCreatableProps<Option, IsMulti, Group>,
     ref:
       | ((instance: Select<Option, IsMulti, Group> | null) => void)

packages/react-select/src/Creatable.tsx

@@ -1,18 +1,18 @@
 import React, { MutableRefObject, ReactElement, RefAttributes } from 'react';
 import Select from './Select';
-import { OptionBase, GroupBase } from './types';
+import { GroupBase } from './types';
 import useStateManager, { StateManagerProps } from './useStateManager';
 import useCreatable, { CreatableAdditionalProps } from './useCreatable';
 
 export type CreatableProps<
-  Option extends OptionBase,
+  Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 > = StateManagerProps<Option, IsMulti, Group> &
   CreatableAdditionalProps<Option, Group>;
 
 type CreatableSelect = <
-  Option extends OptionBase = OptionBase,
+  Option = unknown,
   IsMulti extends boolean = false,
   Group extends GroupBase<Option> = GroupBase<Option>
 >(
@@ -21,11 +21,7 @@ type CreatableSelect = <
 ) => ReactElement;
 
 const CreatableSelect = React.forwardRef(
-  <
-    Option extends OptionBase,
-    IsMulti extends boolean,
-    Group extends GroupBase<Option>
-  >(
+  <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
     props: CreatableProps<Option, IsMulti, Group>,
     ref:
       | ((instance: Select<Option, IsMulti, Group> | null) => void)