From cd1a0a7fdd982fc6a3b4b3120759c48af9e4f7b3 Mon Sep 17 00:00:00 2001
From: Hans Aarne Liblik <Hans.Liblik@gmail.com>
Date: Mon, 27 Feb 2023 08:42:05 +0200
Subject: [PATCH 1/6] Add generic option type

---
 src/behaviors/async.tsx                       |  8 +--
 src/behaviors/item.tsx                        |  4 +-
 src/behaviors/token.tsx                       | 10 +--
 src/components/MenuItem/MenuItem.stories.tsx  |  3 +-
 src/components/Token/Token.stories.tsx        |  3 +-
 src/components/Token/Token.tsx                |  7 +-
 .../Typeahead/Typeahead.stories.tsx           | 11 ++--
 src/components/Typeahead/Typeahead.test.tsx   | 12 ++--
 src/components/Typeahead/Typeahead.tsx        | 64 +++++++++++--------
 .../TypeaheadInputMulti.stories.tsx           |  3 +-
 .../TypeaheadInputMulti.tsx                   |  8 +--
 .../TypeaheadMenu/TypeaheadMenu.stories.tsx   |  4 +-
 .../TypeaheadMenu/TypeaheadMenu.tsx           | 16 ++---
 src/core/Context.tsx                          | 10 +--
 src/core/Typeahead.tsx                        | 17 +++--
 src/core/TypeaheadManager.tsx                 | 12 ++--
 src/tests/data.ts                             |  4 +-
 src/types.ts                                  | 58 ++++++++---------
 src/utils/addCustomOption.ts                  |  6 +-
 src/utils/defaultFilterBy.ts                  |  6 +-
 src/utils/getHintText.ts                      |  6 +-
 src/utils/getInputText.ts                     |  6 +-
 src/utils/getIsOnlyResult.ts                  |  4 +-
 src/utils/getOptionLabel.ts                   |  4 +-
 src/utils/getOptionProperty.ts                |  4 +-
 src/utils/getStringLabelKey.ts                |  3 +-
 src/utils/getTruncatedOptions.ts              |  4 +-
 src/utils/getUpdatedActiveIndex.ts            |  8 +--
 src/utils/validateSelectedPropChange.ts       |  6 +-
 29 files changed, 166 insertions(+), 145 deletions(-)

diff --git a/src/behaviors/async.tsx b/src/behaviors/async.tsx
index cb061621..e5dfb240 100644
--- a/src/behaviors/async.tsx
+++ b/src/behaviors/async.tsx
@@ -18,7 +18,7 @@ import { optionType } from '../propTypes';
 import { getDisplayName, isFunction, warn } from '../utils';
 
 import { TypeaheadComponentProps } from '../components/Typeahead';
-import type { Option } from '../types';
+import type { OptionType } from '../types';
 
 const propTypes = {
   /**
@@ -57,7 +57,7 @@ const propTypes = {
   useCache: PropTypes.bool,
 };
 
-export interface UseAsyncProps extends TypeaheadComponentProps {
+export interface UseAsyncProps<Option extends OptionType> extends TypeaheadComponentProps<Option> {
   delay?: number;
   isLoading: boolean;
   onSearch: (query: string) => void;
@@ -66,7 +66,7 @@ export interface UseAsyncProps extends TypeaheadComponentProps {
   useCache?: boolean;
 }
 
-type Cache = Record<string, Option[]>;
+type Cache = Record<string, OptionType[]>;
 
 interface DebouncedFunction extends Function {
   cancel(): void;
@@ -80,7 +80,7 @@ interface DebouncedFunction extends Function {
  *  - Optional query caching
  *  - Search prompt and empty results behaviors
  */
-export function useAsync(props: UseAsyncProps) {
+export function useAsync<Option extends OptionType>(props: UseAsyncProps<Option>) {
   const {
     allowNew,
     delay = 200,
diff --git a/src/behaviors/item.tsx b/src/behaviors/item.tsx
index 3d8788f7..e846bf72 100644
--- a/src/behaviors/item.tsx
+++ b/src/behaviors/item.tsx
@@ -19,7 +19,7 @@ import {
 } from '../utils';
 
 import { optionType } from '../propTypes';
-import { Option } from '../types';
+import { OptionType } from '../types';
 
 const propTypes = {
   option: optionType.isRequired,
@@ -28,7 +28,7 @@ const propTypes = {
 
 export interface UseItemProps<T> extends HTMLProps<T> {
   onClick?: MouseEventHandler<T>;
-  option: Option;
+  option: OptionType;
   position: number;
 }
 
diff --git a/src/behaviors/token.tsx b/src/behaviors/token.tsx
index e93438ba..e84a5e1c 100644
--- a/src/behaviors/token.tsx
+++ b/src/behaviors/token.tsx
@@ -14,15 +14,15 @@ import { useRootClose } from 'react-overlays';
 import { getDisplayName, isFunction, warn } from '../utils';
 
 import { optionType } from '../propTypes';
-import { Option, OptionHandler } from '../types';
+import { OptionType, OptionHandler } from '../types';
 
-export interface UseTokenProps<T> extends Omit<HTMLProps<T>, 'onBlur'> {
+export interface UseTokenProps<T, Option extends OptionType> extends Omit<HTMLProps<T>, 'onBlur'> {
   // `onBlur` is typed more generically because it's passed to `useRootClose`,
   // which passes a generic event to the callback.
   onBlur?: (event: Event) => void;
   onClick?: MouseEventHandler<T>;
   onFocus?: FocusEventHandler<T>;
-  onRemove?: OptionHandler;
+  onRemove?: OptionHandler<Option>;
   option: Option;
 }
 
@@ -34,14 +34,14 @@ const propTypes = {
   option: optionType.isRequired,
 };
 
-export function useToken<T extends HTMLElement>({
+export function useToken<T extends HTMLElement, Option extends OptionType>({
   onBlur,
   onClick,
   onFocus,
   onRemove,
   option,
   ...props
-}: UseTokenProps<T>) {
+}: UseTokenProps<T, Option>) {
   const [active, setActive] = useState<boolean>(false);
   const [rootElement, attachRef] = useState<T | null>(null);
 
diff --git a/src/components/MenuItem/MenuItem.stories.tsx b/src/components/MenuItem/MenuItem.stories.tsx
index e3e4bc85..70bfa315 100644
--- a/src/components/MenuItem/MenuItem.stories.tsx
+++ b/src/components/MenuItem/MenuItem.stories.tsx
@@ -9,6 +9,7 @@ import {
   TypeaheadContext,
   TypeaheadContextType,
 } from '../../core/Context';
+import {OptionType} from "../../types";
 
 export default {
   title: 'Components/MenuItem/MenuItem',
@@ -16,7 +17,7 @@ export default {
 } as Meta;
 
 interface Args {
-  context: Partial<TypeaheadContextType>;
+  context: Partial<TypeaheadContextType<OptionType>>;
   props: MenuItemProps;
 }
 
diff --git a/src/components/Token/Token.stories.tsx b/src/components/Token/Token.stories.tsx
index aea6c469..dc49f6d3 100644
--- a/src/components/Token/Token.stories.tsx
+++ b/src/components/Token/Token.stories.tsx
@@ -5,13 +5,14 @@ import { Story, Meta } from '@storybook/react';
 
 import Token, { TokenProps } from './Token';
 import { noop } from '../../utils';
+import {OptionType} from "../../types";
 
 export default {
   title: 'Components/Token',
   component: Token,
 } as Meta;
 
-const Template: Story<TokenProps<HTMLElement>> = (args) => <Token {...args} />;
+const Template: Story<TokenProps<HTMLElement, OptionType>> = (args) => <Token {...args} />;
 
 export const Interactive = Template.bind({});
 Interactive.args = {
diff --git a/src/components/Token/Token.tsx b/src/components/Token/Token.tsx
index 36b03194..240a3c0a 100644
--- a/src/components/Token/Token.tsx
+++ b/src/components/Token/Token.tsx
@@ -5,6 +5,7 @@ import ClearButton from '../ClearButton';
 
 import { useToken, UseTokenProps } from '../../behaviors/token';
 import { isFunction } from '../../utils';
+import {OptionType} from "../../types";
 
 type HTMLElementProps = Omit<HTMLProps<HTMLDivElement>, 'onBlur' | 'ref'>;
 
@@ -68,7 +69,7 @@ const StaticToken = ({
   return <div className={classnames}>{children}</div>;
 };
 
-export interface TokenProps<T> extends UseTokenProps<T> {
+export interface TokenProps<T, Option extends OptionType> extends UseTokenProps<T, Option> {
   disabled?: boolean;
   readOnly?: boolean;
 }
@@ -77,12 +78,12 @@ export interface TokenProps<T> extends UseTokenProps<T> {
  * Individual token component, generally displayed within the
  * `TypeaheadInputMulti` component, but can also be rendered on its own.
  */
-const Token = ({
+const Token = <Option extends OptionType>({
   children,
   option,
   readOnly,
   ...props
-}: TokenProps<HTMLElement>) => {
+}: TokenProps<HTMLElement, Option>) => {
   const { ref, ...tokenProps } = useToken({ ...props, option });
   const child = <div className="rbt-token-label">{children}</div>;
 
diff --git a/src/components/Typeahead/Typeahead.stories.tsx b/src/components/Typeahead/Typeahead.stories.tsx
index 614142b5..ccf0221b 100644
--- a/src/components/Typeahead/Typeahead.stories.tsx
+++ b/src/components/Typeahead/Typeahead.stories.tsx
@@ -9,8 +9,9 @@ import Hint from '../Hint';
 import Menu from '../Menu';
 import MenuItem from '../MenuItem';
 
-import options, { Option } from '../../tests/data';
+import options, { TestOption } from '../../tests/data';
 import { noop } from '../../tests/helpers';
+import {OptionType} from "../../types";
 
 export default {
   title: 'Components/Typeahead',
@@ -53,7 +54,7 @@ const defaultProps = {
   positionFixed: true,
 };
 
-const Template: Story<TypeaheadComponentProps> = (args) => (
+const Template: Story<TypeaheadComponentProps<TestOption>> = (args) => (
   <Typeahead {...args} />
 );
 
@@ -122,7 +123,7 @@ CustomMenu.args = {
   renderMenu: (results, menuProps) => (
     <Menu {...menuProps}>
       {/* Use `slice` to avoid mutating the original array */}
-      {(results as Option[])
+      {(results as TestOption[])
         .slice()
         .reverse()
         .map((r, index) => (
@@ -134,7 +135,7 @@ CustomMenu.args = {
   ),
 };
 
-export const InputGrouping = (args: TypeaheadComponentProps) => (
+export const InputGrouping = <Option extends OptionType>(args: TypeaheadComponentProps<Option>) => (
   <div
     className={cx('input-group', {
       'input-group-sm': args.size === 'sm',
@@ -149,7 +150,7 @@ InputGrouping.args = {
   ...defaultProps,
 };
 
-export const Controlled = (args: TypeaheadComponentProps) => {
+export const Controlled = <Option extends OptionType>(args: TypeaheadComponentProps<Option>) => {
   const [selected, setSelected] = useState(args.selected || []);
 
   return <Typeahead {...args} onChange={setSelected} selected={selected} />;
diff --git a/src/components/Typeahead/Typeahead.test.tsx b/src/components/Typeahead/Typeahead.test.tsx
index 2d969684..e5b95419 100644
--- a/src/components/Typeahead/Typeahead.test.tsx
+++ b/src/components/Typeahead/Typeahead.test.tsx
@@ -23,7 +23,7 @@ import {
   waitFor,
 } from '../../tests/helpers';
 
-import states, { Option } from '../../tests/data';
+import states, {TestOption} from '../../tests/data';
 
 const ID = 'rbt-id';
 
@@ -37,7 +37,7 @@ const inputProps = {
   type: 'number',
 };
 
-const TestComponent = forwardRef<Typeahead, Partial<TypeaheadComponentProps>>(
+const TestComponent = forwardRef<Typeahead<TestOption>, Partial<TypeaheadComponentProps<TestOption>>>(
   (props, ref) => (
     <TypeaheadComponent
       id={ID}
@@ -116,7 +116,7 @@ describe('<Typeahead>', () => {
   });
 
   it('truncates selections when using `defaultSelected`', () => {
-    let selected: Option[] = states.slice(0, 4);
+    let selected: TestOption[] = states.slice(0, 4);
     render(
       <Default defaultSelected={selected}>
         {(state) => {
@@ -411,7 +411,7 @@ describe('<Typeahead>', () => {
 
   describe('updates when re-rendering with new props', () => {
     it('acts as a controlled input in single-select mode', () => {
-      let selected: Option[] = [];
+      let selected: TestOption[] = [];
 
       const children = (state) => {
         selected = state.selected;
@@ -459,7 +459,7 @@ describe('<Typeahead>', () => {
     });
 
     it('updates the selections and input value in single-select mode', async () => {
-      let selected: Option[] = [];
+      let selected: TestOption[] = [];
       const user = userEvent.setup();
 
       render(
@@ -1145,7 +1145,7 @@ describe('<Typeahead>', () => {
     });
 
     it('adds the custom option when `allowNew` is set to `true`', async () => {
-      let selected: Option[] = [];
+      let selected: TestOption[] = [];
       const user = userEvent.setup();
 
       render(
diff --git a/src/components/Typeahead/Typeahead.tsx b/src/components/Typeahead/Typeahead.tsx
index b7cd2317..56817f62 100644
--- a/src/components/Typeahead/Typeahead.tsx
+++ b/src/components/Typeahead/Typeahead.tsx
@@ -27,7 +27,7 @@ import { checkPropType, inputPropsType, sizeType } from '../../propTypes';
 
 import {
   Align,
-  Option,
+  OptionType,
   RenderToken,
   RenderTokenProps,
   Size,
@@ -36,15 +36,15 @@ import {
   TypeaheadManagerChildProps,
 } from '../../types';
 
-export interface RenderMenuProps
+export interface RenderMenuProps<Option extends OptionType>
   extends Omit<
-    TypeaheadMenuProps,
+    TypeaheadMenuProps<Option>,
     'labelKey' | 'options' | 'renderMenuItemChildren' | 'text'
   > {
-  renderMenuItemChildren?: RenderMenuItemChildren;
+  renderMenuItemChildren?: RenderMenuItemChildren<Option>;
 }
 
-export interface TypeaheadComponentProps extends Partial<TypeaheadProps> {
+export interface TypeaheadComponentProps<Option extends OptionType> extends Partial<TypeaheadProps<Option>> {
   align?: Align;
   className?: string;
   clearButton?: boolean;
@@ -52,7 +52,7 @@ export interface TypeaheadComponentProps extends Partial<TypeaheadProps> {
   dropup?: boolean;
   emptyLabel?: ReactNode;
   flip?: boolean;
-  instanceRef?: Ref<Typeahead>;
+  instanceRef?: Ref<Typeahead<Option>>;
   isInvalid?: boolean;
   isLoading?: boolean;
   isValid?: boolean;
@@ -64,15 +64,15 @@ export interface TypeaheadComponentProps extends Partial<TypeaheadProps> {
   positionFixed?: boolean;
   renderInput?: (
     inputProps: TypeaheadInputProps,
-    props: TypeaheadManagerChildProps
+    props: TypeaheadManagerChildProps<Option>
   ) => JSX.Element;
   renderMenu?: (
     results: Option[],
-    menuProps: RenderMenuProps,
-    state: TypeaheadManagerChildProps
+    menuProps: RenderMenuProps<Option>,
+    state: TypeaheadManagerChildProps<Option>
   ) => JSX.Element;
-  renderMenuItemChildren?: RenderMenuItemChildren;
-  renderToken?: RenderToken;
+  renderMenuItemChildren?: RenderMenuItemChildren<Option>;
+  renderToken?: RenderToken<Option>;
   size?: Size;
   style?: CSSProperties;
 }
@@ -121,10 +121,10 @@ const defaultProps = {
   isLoading: false,
 };
 
-const defaultRenderMenu = (
+const defaultRenderMenu = <Option extends OptionType>(
   results: Option[],
-  menuProps: RenderMenuProps,
-  props: TypeaheadManagerChildProps
+  menuProps: RenderMenuProps<Option>,
+  props: TypeaheadManagerChildProps<Option>
 ) => (
   <TypeaheadMenu
     {...menuProps}
@@ -134,9 +134,9 @@ const defaultRenderMenu = (
   />
 );
 
-const defaultRenderToken = (
+const defaultRenderToken = <Option extends OptionType>(
   option: Option,
-  props: RenderTokenProps,
+  props: RenderTokenProps<Option>,
   idx: number
 ) => (
   <Token
@@ -154,13 +154,13 @@ const overlayPropKeys = [
   'dropup',
   'flip',
   'positionFixed',
-] as (keyof TypeaheadComponentProps)[];
+] as (keyof TypeaheadComponentProps<OptionType>)[];
 
-function getOverlayProps(props: TypeaheadComponentProps) {
+function getOverlayProps<Option extends OptionType>(props: TypeaheadComponentProps<Option>) {
   return pick(props, overlayPropKeys);
 }
 
-class TypeaheadComponent extends React.Component<TypeaheadComponentProps> {
+class TypeaheadComponent<Option extends OptionType> extends React.Component<TypeaheadComponentProps<Option>> {
   static propTypes = propTypes;
   static defaultProps = defaultProps;
 
@@ -172,7 +172,7 @@ class TypeaheadComponent extends React.Component<TypeaheadComponentProps> {
 
     return (
       <Typeahead {...this.props} options={options} ref={instanceRef}>
-        {(props: TypeaheadManagerChildProps) => {
+        {(props: TypeaheadManagerChildProps<Option>) => {
           const { hideMenu, isMenuShown, results } = props;
           const auxContent = this._renderAux(props);
 
@@ -228,7 +228,7 @@ class TypeaheadComponent extends React.Component<TypeaheadComponentProps> {
 
   _renderInput = (
     inputProps: TypeaheadInputProps,
-    props: TypeaheadManagerChildProps
+    props: TypeaheadManagerChildProps<Option>
   ) => {
     const { isInvalid, isValid, multiple, renderInput, renderToken, size } =
       this.props;
@@ -269,7 +269,7 @@ class TypeaheadComponent extends React.Component<TypeaheadComponentProps> {
   _renderMenu = (
     results: Option[],
     menuProps: OverlayRenderProps,
-    props: TypeaheadManagerChildProps
+    props: TypeaheadManagerChildProps<Option>
   ) => {
     const {
       emptyLabel,
@@ -296,7 +296,7 @@ class TypeaheadComponent extends React.Component<TypeaheadComponentProps> {
     );
   };
 
-  _renderAux = ({ onClear, selected }: TypeaheadManagerChildProps) => {
+  _renderAux = ({ onClear, selected }: TypeaheadManagerChildProps<Option>) => {
     const { clearButton, disabled, isLoading, size } = this.props;
 
     let content;
@@ -321,6 +321,18 @@ class TypeaheadComponent extends React.Component<TypeaheadComponentProps> {
   };
 }
 
-export default forwardRef<Typeahead, TypeaheadComponentProps>((props, ref) => (
-  <TypeaheadComponent {...props} instanceRef={ref} />
-));
+const TypeaheadComponentInner = <Option extends OptionType>(props: TypeaheadComponentProps<Option>, ref:  React.ForwardedRef<Typeahead<Option>>) => <TypeaheadComponent {...props} instanceRef={ref} />
+
+const TypeaheadComponentWithRef = forwardRef(TypeaheadComponentInner);
+
+type TypeaheadComponentWithRefProps<Option extends OptionType> = TypeaheadComponentProps<Option> & {
+  ref?: React.Ref<Typeahead<Option>>;
+};
+
+export default function TypeaheadComp<Option extends OptionType>({
+                                   ref,
+                                   ...props
+                                 }: TypeaheadComponentWithRefProps<Option>) {
+  // @ts-ignore
+  return <TypeaheadComponentWithRef ref={ref} {...props} />;
+}
diff --git a/src/components/TypeaheadInputMulti/TypeaheadInputMulti.stories.tsx b/src/components/TypeaheadInputMulti/TypeaheadInputMulti.stories.tsx
index f4db75a3..b32c6c6d 100644
--- a/src/components/TypeaheadInputMulti/TypeaheadInputMulti.stories.tsx
+++ b/src/components/TypeaheadInputMulti/TypeaheadInputMulti.stories.tsx
@@ -11,6 +11,7 @@ import TypeaheadInputMulti, {
 import options from '../../tests/data';
 import { HintProvider, noop } from '../../tests/helpers';
 import type { Size } from '../../types';
+import {OptionType} from "../../types";
 
 export default {
   title: 'Components/TypeaheadInputMulti',
@@ -28,7 +29,7 @@ const defaultProps = {
   selected,
 };
 
-interface Args extends TypeaheadInputMultiProps {
+interface Args<Option extends OptionType> extends TypeaheadInputMultiProps<Option> {
   hintText?: string;
   isValid?: boolean;
   isInvalid?: boolean;
diff --git a/src/components/TypeaheadInputMulti/TypeaheadInputMulti.tsx b/src/components/TypeaheadInputMulti/TypeaheadInputMulti.tsx
index 59270c2e..5c1acf8f 100644
--- a/src/components/TypeaheadInputMulti/TypeaheadInputMulti.tsx
+++ b/src/components/TypeaheadInputMulti/TypeaheadInputMulti.tsx
@@ -9,14 +9,14 @@ import Input from '../Input';
 
 import { isSelectable, propsWithBsClassName } from '../../utils';
 
-import { Option, TypeaheadInputProps } from '../../types';
+import { OptionType, TypeaheadInputProps } from '../../types';
 
-export interface TypeaheadInputMultiProps extends TypeaheadInputProps {
+export interface TypeaheadInputMultiProps<Option extends OptionType> extends TypeaheadInputProps {
   children: ReactNode;
   selected: Option[];
 }
 
-function TypeaheadInputMulti(props: TypeaheadInputMultiProps) {
+function TypeaheadInputMulti<Option extends OptionType>(props: TypeaheadInputMultiProps<Option>) {
   const wrapperRef = React.useRef<HTMLDivElement>(null);
   const inputElem = React.useRef<HTMLInputElement | null>(null);
 
@@ -28,7 +28,7 @@ function TypeaheadInputMulti(props: TypeaheadInputMultiProps) {
     referenceElementRef,
     selected,
     ...rest
-  } = propsWithBsClassName<TypeaheadInputMultiProps>(props);
+  } = propsWithBsClassName<TypeaheadInputMultiProps<Option>>(props);
 
   function getInputRef(input: HTMLInputElement | null) {
     inputElem.current = input;
diff --git a/src/components/TypeaheadMenu/TypeaheadMenu.stories.tsx b/src/components/TypeaheadMenu/TypeaheadMenu.stories.tsx
index 2b6afec7..8dca1047 100644
--- a/src/components/TypeaheadMenu/TypeaheadMenu.stories.tsx
+++ b/src/components/TypeaheadMenu/TypeaheadMenu.stories.tsx
@@ -5,7 +5,7 @@ import { Story, Meta } from '@storybook/react';
 
 import TypeaheadMenu, { TypeaheadMenuProps } from './TypeaheadMenu';
 
-import options from '../../tests/data';
+import options, {TestOption} from '../../tests/data';
 import { getOptionProperty } from '../../utils';
 
 export default {
@@ -20,7 +20,7 @@ const defaultProps = {
   text: '',
 };
 
-const Template: Story<TypeaheadMenuProps> = (args) => (
+const Template: Story<TypeaheadMenuProps<TestOption>> = (args) => (
   <div style={{ minHeight: '300px' }}>
     <div style={{ position: 'relative' }}>
       <TypeaheadMenu {...args} />
diff --git a/src/components/TypeaheadMenu/TypeaheadMenu.tsx b/src/components/TypeaheadMenu/TypeaheadMenu.tsx
index ef04c60f..834616d9 100644
--- a/src/components/TypeaheadMenu/TypeaheadMenu.tsx
+++ b/src/components/TypeaheadMenu/TypeaheadMenu.tsx
@@ -6,20 +6,20 @@ import Menu, { MenuProps } from '../Menu';
 import MenuItem from '../MenuItem';
 
 import { getOptionLabel, getOptionProperty, isString } from '../../utils';
-import { LabelKey, Option } from '../../types';
+import { LabelKey, OptionType } from '../../types';
 
-export type RenderMenuItemChildren = (
+export type RenderMenuItemChildren<Option extends OptionType> = (
   option: Option,
-  menuProps: TypeaheadMenuProps,
+  menuProps: TypeaheadMenuProps<Option>,
   idx: number
 ) => JSX.Element;
 
-export interface TypeaheadMenuProps extends MenuProps {
-  labelKey: LabelKey;
+export interface TypeaheadMenuProps<Option extends OptionType> extends MenuProps {
+  labelKey: LabelKey<Option>;
   newSelectionPrefix?: ReactNode;
   options: Option[];
   paginationText?: ReactNode;
-  renderMenuItemChildren: RenderMenuItemChildren;
+  renderMenuItemChildren: RenderMenuItemChildren<Option>;
   text: string;
 }
 
@@ -42,14 +42,14 @@ const propTypes = {
 const defaultProps = {
   newSelectionPrefix: 'New selection: ',
   paginationText: 'Display additional results...',
-  renderMenuItemChildren: (option: Option, props: TypeaheadMenuProps) => (
+  renderMenuItemChildren: (option: OptionType, props: TypeaheadMenuProps<OptionType>) => (
     <Highlighter search={props.text}>
       {getOptionLabel(option, props.labelKey)}
     </Highlighter>
   ),
 };
 
-const TypeaheadMenu = (props: TypeaheadMenuProps) => {
+const TypeaheadMenu = <Option extends OptionType>(props: TypeaheadMenuProps<Option>) => {
   const {
     labelKey,
     newSelectionPrefix,
diff --git a/src/core/Context.tsx b/src/core/Context.tsx
index b975e652..4e8e2d21 100644
--- a/src/core/Context.tsx
+++ b/src/core/Context.tsx
@@ -1,17 +1,17 @@
 import { createContext, useContext } from 'react';
 
 import { noop } from '../utils';
-import { Id, Option, OptionHandler, SelectEvent } from '../types';
+import { Id, OptionType, OptionHandler, SelectEvent } from '../types';
 
-export interface TypeaheadContextType {
+export interface TypeaheadContextType<Option extends OptionType> {
   activeIndex: number;
   hintText: string;
   id: Id;
   initialItem: Option | null;
   inputNode: HTMLInputElement | null;
   isOnlyResult: boolean;
-  onActiveItemChange: OptionHandler;
-  onAdd: OptionHandler;
+  onActiveItemChange: OptionHandler<Option>;
+  onAdd: OptionHandler<Option>;
   onInitialItemChange: (option?: Option) => void;
   onMenuItemClick: (option: Option, event: SelectEvent<HTMLElement>) => void;
   setItem: (option: Option, position: number) => void;
@@ -32,6 +32,6 @@ export const defaultContext = {
 };
 
 export const TypeaheadContext =
-  createContext<TypeaheadContextType>(defaultContext);
+  createContext<TypeaheadContextType<OptionType>>(defaultContext);
 
 export const useTypeaheadContext = () => useContext(TypeaheadContext);
diff --git a/src/core/Typeahead.tsx b/src/core/Typeahead.tsx
index 899e0a79..9f3a7363 100644
--- a/src/core/Typeahead.tsx
+++ b/src/core/Typeahead.tsx
@@ -50,7 +50,7 @@ import { DEFAULT_LABELKEY } from '../constants';
 
 import type {
   FilterByCallback,
-  Option,
+  OptionType,
   SelectEvent,
   TypeaheadProps,
   TypeaheadState,
@@ -213,7 +213,7 @@ const defaultProps = {
   paginate: true,
 };
 
-type Props = TypeaheadProps;
+type Props<Option extends OptionType> = TypeaheadProps<Option>;
 
 /**
  * Manually trigger the input's change event.
@@ -230,7 +230,7 @@ function triggerInputChange(input: HTMLInputElement, value: string) {
   input.dispatchEvent(e);
 }
 
-class Typeahead extends React.Component<Props, TypeaheadState> {
+class Typeahead<Option extends OptionType> extends React.Component<Props<Option>, TypeaheadState<Option>> {
   static propTypes = propTypes;
   static defaultProps = defaultProps;
 
@@ -246,7 +246,7 @@ class Typeahead extends React.Component<Props, TypeaheadState> {
     this.props.autoFocus && this.focus();
   }
 
-  componentDidUpdate(prevProps: Props, prevState: TypeaheadState) {
+  componentDidUpdate(prevProps: Props<Option>, prevState: TypeaheadState<Option>) {
     const { labelKey, multiple, selected } = this.props;
 
     validateSelectedPropChange(selected, prevProps.selected);
@@ -278,7 +278,7 @@ class Typeahead extends React.Component<Props, TypeaheadState> {
     if (this.isMenuShown) {
       const cb = (
         isFunction(filterBy) ? filterBy : defaultFilterBy
-      ) as FilterByCallback;
+      ) as FilterByCallback<Option>;
 
       results = options.filter((option: Option) =>
         cb(option, mergedPropsAndState)
@@ -292,6 +292,7 @@ class Typeahead extends React.Component<Props, TypeaheadState> {
 
       // Add the custom option if necessary.
       if (addCustomOption(results, mergedPropsAndState)) {
+        // @ts-ignore
         results.push({
           customOption: true,
           [getStringLabelKey(labelKey)]: text,
@@ -300,6 +301,7 @@ class Typeahead extends React.Component<Props, TypeaheadState> {
 
       // Add the pagination item if necessary.
       if (shouldPaginate) {
+        // @ts-ignore
         results.push({
           [getStringLabelKey(labelKey)]: '',
           paginationOption: true,
@@ -367,7 +369,7 @@ class Typeahead extends React.Component<Props, TypeaheadState> {
   };
 
   _handleActiveIndexChange = (activeIndex: number) => {
-    this.setState((state: TypeaheadState) => ({
+    this.setState((state: TypeaheadState<Option>) => ({
       activeIndex,
       activeItem: activeIndex >= 0 ? state.activeItem : undefined,
     }));
@@ -517,7 +519,8 @@ class Typeahead extends React.Component<Props, TypeaheadState> {
     // Add a unique id to the custom selection. Avoid doing this in `render` so
     // the id doesn't increment every time.
     if (!isString(selection) && selection.customOption) {
-      selection = { ...selection, id: uniqueId('new-id-') };
+      // @ts-ignore selection is an object
+      selection = { ...selection , id: uniqueId('new-id-') };
     }
 
     if (multiple) {
diff --git a/src/core/TypeaheadManager.tsx b/src/core/TypeaheadManager.tsx
index f6544363..c07f393e 100644
--- a/src/core/TypeaheadManager.tsx
+++ b/src/core/TypeaheadManager.tsx
@@ -10,7 +10,7 @@ import {
   isFunction,
   pick,
 } from '../utils';
-import { TypeaheadManagerProps } from '../types';
+import {OptionType, TypeaheadManagerProps} from '../types';
 
 const inputPropKeys = [
   'activeIndex',
@@ -26,7 +26,7 @@ const inputPropKeys = [
   'onFocus',
   'onKeyDown',
   'placeholder',
-] as (keyof TypeaheadManagerProps)[];
+] as (keyof TypeaheadManagerProps<OptionType>)[];
 
 const propKeys = [
   'activeIndex',
@@ -40,7 +40,7 @@ const propKeys = [
   'selected',
   'text',
   'toggleMenu',
-] as (keyof TypeaheadManagerProps)[];
+] as (keyof TypeaheadManagerProps<OptionType>)[];
 
 const contextKeys = [
   'activeIndex',
@@ -52,9 +52,9 @@ const contextKeys = [
   'onInitialItemChange',
   'onMenuItemClick',
   'setItem',
-] as (keyof TypeaheadManagerProps)[];
+] as (keyof TypeaheadManagerProps<OptionType>)[];
 
-const TypeaheadManager = (props: TypeaheadManagerProps) => {
+const TypeaheadManager = <Option extends OptionType>(props: TypeaheadManagerProps<Option>) => {
   const {
     allowNew,
     children,
@@ -110,7 +110,7 @@ const TypeaheadManager = (props: TypeaheadManagerProps) => {
     }),
   };
 
-  const contextValue: TypeaheadContextType = {
+  const contextValue: TypeaheadContextType<Option> = {
     ...pick(props, contextKeys),
     hintText,
     isOnlyResult: getIsOnlyResult(props),
diff --git a/src/tests/data.ts b/src/tests/data.ts
index e136389c..3898ca80 100644
--- a/src/tests/data.ts
+++ b/src/tests/data.ts
@@ -39,7 +39,7 @@ export const defaultState = {
   text: '',
 };
 
-export interface Option {
+export interface TestOption {
   name: string;
   population: number;
   capital: string;
@@ -98,4 +98,4 @@ export default [
   { name: 'West Virginia', population: 1853011, capital: 'Charleston', region: 'South' },
   { name: 'Wisconsin', population: 5687289, capital: 'Madison', region: 'West' },
   { name: 'Wyoming', population: 563767, capital: 'Cheyenne', region: 'West' },
-];
+] as TestOption[];
diff --git a/src/types.ts b/src/types.ts
index 99802717..adedc110 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -16,23 +16,23 @@ import { ALIGN_VALUES, SIZES } from './constants';
 
 export type Align = typeof ALIGN_VALUES[number];
 
-export type AllowNew =
+export type AllowNew<Option extends OptionType> =
   | boolean
-  | ((options: Option[], state: TypeaheadPropsAndState) => boolean);
+  | ((options: Option[], state: TypeaheadPropsAndState<Option>) => boolean);
 
-export type FilterByCallback = (
+export type FilterByCallback<Option extends OptionType> = (
   option: Option,
-  state: TypeaheadPropsAndState
+  state: TypeaheadPropsAndState<Option>
 ) => boolean;
 
 export type Id = string;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type Option = string | Record<string, any>;
+export type OptionType = string | Record<string, any>;
 
-export type OptionHandler = (option: Option) => void;
+export type OptionHandler<Option extends OptionType> = (option: Option) => void;
 
-export type LabelKey = string | ((option: Option) => string);
+export type LabelKey<Option extends OptionType> = string | ((option: Option) => string);
 
 export type SelectEvent<T> = MouseEvent<T> | KeyboardEvent<T>;
 
@@ -43,9 +43,9 @@ export type SelectHint = (
 
 export type Size = typeof SIZES[number];
 
-export type TypeaheadChildren =
+export type TypeaheadChildren<Option extends OptionType> =
   | ReactNode
-  | ((props: TypeaheadManagerChildProps) => ReactNode);
+  | ((props: TypeaheadManagerChildProps<Option>) => ReactNode);
 
 export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
 
@@ -55,34 +55,34 @@ export interface TypeaheadInputProps extends InputProps {
   referenceElementRef: RefCallback<HTMLElement>;
 }
 
-export interface RenderTokenProps {
+export interface RenderTokenProps<Option extends OptionType> {
   disabled?: boolean;
-  labelKey: LabelKey;
-  onRemove?: OptionHandler;
+  labelKey: LabelKey<Option>;
+  onRemove?: OptionHandler<Option>;
   tabIndex?: number;
 }
 
-export type RenderToken = (
+export type RenderToken<Option extends OptionType> = (
   option: Option,
-  props: RenderTokenProps,
+  props: RenderTokenProps<Option>,
   idx: number
 ) => JSX.Element;
 
-export interface TypeaheadProps {
-  allowNew: AllowNew;
+export interface TypeaheadProps<Option extends OptionType> {
+  allowNew: AllowNew<Option>;
   autoFocus: boolean;
   caseSensitive: boolean;
-  children: TypeaheadChildren;
+  children: TypeaheadChildren<Option>;
   defaultInputValue: string;
   defaultOpen: boolean;
   defaultSelected: Option[];
   emptyLabel?: ReactNode;
-  filterBy: string[] | FilterByCallback;
+  filterBy: string[] | FilterByCallback<Option>;
   highlightOnlyResult: boolean;
   id?: Id;
   ignoreDiacritics: boolean;
   inputProps?: InputProps;
-  labelKey: LabelKey;
+  labelKey: LabelKey<Option>;
   maxResults: number;
   minLength: number;
   multiple: boolean;
@@ -100,7 +100,7 @@ export interface TypeaheadProps {
   selectHint?: SelectHint;
 }
 
-export interface TypeaheadState {
+export interface TypeaheadState<Option extends OptionType> {
   activeIndex: number;
   activeItem?: Option;
   initialItem?: Option;
@@ -111,38 +111,38 @@ export interface TypeaheadState {
   text: string;
 }
 
-export type TypeaheadPropsAndState = Omit<TypeaheadProps, 'onChange'> &
-  TypeaheadState;
+export type TypeaheadPropsAndState<Option extends OptionType> = Omit<TypeaheadProps<Option>, 'onChange'> &
+  TypeaheadState<Option>;
 
-export interface TypeaheadManagerChildProps {
+export interface TypeaheadManagerChildProps<Option extends OptionType> {
   activeIndex: number;
   getInputProps: (props?: InputProps) => TypeaheadInputProps;
   hideMenu: () => void;
   isMenuShown: boolean;
-  labelKey: LabelKey;
+  labelKey: LabelKey<Option>;
   onClear: () => void;
   onHide: () => void;
-  onRemove: OptionHandler;
+  onRemove: OptionHandler<Option>;
   results: Option[];
   selected: Option[];
   text: string;
   toggleMenu: () => void;
 }
 
-export interface TypeaheadManagerProps extends TypeaheadPropsAndState {
+export interface TypeaheadManagerProps<Option extends OptionType> extends TypeaheadPropsAndState<Option> {
   hideMenu: () => void;
   inputNode: HTMLInputElement | null;
   inputRef: RefCallback<HTMLInputElement>;
   isMenuShown: boolean;
-  onActiveItemChange: OptionHandler;
-  onAdd: OptionHandler;
+  onActiveItemChange: OptionHandler<Option>;
+  onAdd: OptionHandler<Option>;
   onChange: ChangeEventHandler<HTMLInputElement>;
   onClear: () => void;
   onClick: MouseEventHandler<HTMLInputElement>;
   onHide: () => void;
   onInitialItemChange: (option?: Option) => void;
   onMenuItemClick: (option: Option, event: SelectEvent<HTMLElement>) => void;
-  onRemove: OptionHandler;
+  onRemove: OptionHandler<Option>;
   placeholder?: string;
   results: Option[];
   setItem: (item: Option, position: number) => void;
diff --git a/src/utils/addCustomOption.ts b/src/utils/addCustomOption.ts
index e2f991f1..fff7dbbd 100644
--- a/src/utils/addCustomOption.ts
+++ b/src/utils/addCustomOption.ts
@@ -1,11 +1,11 @@
 import getOptionLabel from './getOptionLabel';
 import { isFunction } from './nodash';
 
-import { Option, TypeaheadPropsAndState } from '../types';
+import { OptionType, TypeaheadPropsAndState } from '../types';
 
-function addCustomOption(
+function addCustomOption<Option extends OptionType>(
   results: Option[],
-  props: TypeaheadPropsAndState
+  props: TypeaheadPropsAndState<Option>
 ): boolean {
   const { allowNew, labelKey, text } = props;
 
diff --git a/src/utils/defaultFilterBy.ts b/src/utils/defaultFilterBy.ts
index 7326b88a..14e169a0 100644
--- a/src/utils/defaultFilterBy.ts
+++ b/src/utils/defaultFilterBy.ts
@@ -5,7 +5,7 @@ import { isFunction, isString } from './nodash';
 import stripDiacritics from './stripDiacritics';
 import warn from './warn';
 
-import type { LabelKey, Option } from '../types';
+import type { LabelKey, OptionType } from '../types';
 
 interface Props {
   caseSensitive: boolean;
@@ -13,7 +13,7 @@ interface Props {
   ignoreDiacritics: boolean;
   labelKey: LabelKey;
   multiple: boolean;
-  selected: Option[];
+  selected: OptionType[];
   text: string;
 }
 
@@ -37,7 +37,7 @@ function isMatch(input: string, string: string, props: Props): boolean {
 /**
  * Default algorithm for filtering results.
  */
-export default function defaultFilterBy(option: Option, props: Props): boolean {
+export default function defaultFilterBy(option: OptionType, props: Props): boolean {
   const { filterBy, labelKey, multiple, selected, text } = props;
 
   // Don't show selected options in the menu for the multi-select case.
diff --git a/src/utils/getHintText.ts b/src/utils/getHintText.ts
index 1648dd18..749666e3 100644
--- a/src/utils/getHintText.ts
+++ b/src/utils/getHintText.ts
@@ -3,16 +3,16 @@ import getOptionLabel from './getOptionLabel';
 import hasOwnProperty from './hasOwnProperty';
 import { isString } from './nodash';
 
-import { LabelKey, Option } from '../types';
+import { LabelKey, OptionType } from '../types';
 
 interface HintProps {
   activeIndex: number;
-  initialItem?: Option;
+  initialItem?: OptionType;
   isFocused: boolean;
   isMenuShown: boolean;
   labelKey: LabelKey;
   multiple: boolean;
-  selected: Option[];
+  selected: OptionType[];
   text: string;
 }
 
diff --git a/src/utils/getInputText.ts b/src/utils/getInputText.ts
index bec854c7..d12c3a0b 100644
--- a/src/utils/getInputText.ts
+++ b/src/utils/getInputText.ts
@@ -1,11 +1,11 @@
 import getOptionLabel from './getOptionLabel';
-import { LabelKey, Option } from '../types';
+import { LabelKey, OptionType } from '../types';
 
 interface Props {
-  activeItem?: Option;
+  activeItem?: OptionType;
   labelKey: LabelKey;
   multiple: boolean;
-  selected: Option[];
+  selected: OptionType[];
   text: string;
 }
 
diff --git a/src/utils/getIsOnlyResult.ts b/src/utils/getIsOnlyResult.ts
index 1a7edebe..6c41fa8f 100644
--- a/src/utils/getIsOnlyResult.ts
+++ b/src/utils/getIsOnlyResult.ts
@@ -1,11 +1,11 @@
 import getOptionProperty from './getOptionProperty';
 
-import { AllowNew, Option } from '../types';
+import { AllowNew, OptionType } from '../types';
 
 interface Props {
   allowNew: AllowNew;
   highlightOnlyResult: boolean;
-  results: Option[];
+  results: OptionType[];
 }
 
 function getIsOnlyResult(props: Props): boolean {
diff --git a/src/utils/getOptionLabel.ts b/src/utils/getOptionLabel.ts
index b72b3156..72a9d62e 100644
--- a/src/utils/getOptionLabel.ts
+++ b/src/utils/getOptionLabel.ts
@@ -4,14 +4,14 @@ import getStringLabelKey from './getStringLabelKey';
 import hasOwnProperty from './hasOwnProperty';
 import { isFunction, isString } from './nodash';
 
-import type { LabelKey, Option } from '../types';
+import type { LabelKey, OptionType } from '../types';
 
 /**
  * Retrieves the display string from an option. Options can be the string
  * themselves, or an object with a defined display string. Anything else throws
  * an error.
  */
-function getOptionLabel(option: Option, labelKey: LabelKey): string {
+function getOptionLabel(option: OptionType, labelKey: LabelKey): string {
   // Handle internally created options first.
   if (
     !isString(option) &&
diff --git a/src/utils/getOptionProperty.ts b/src/utils/getOptionProperty.ts
index 0ed469f7..8bc66457 100644
--- a/src/utils/getOptionProperty.ts
+++ b/src/utils/getOptionProperty.ts
@@ -1,7 +1,7 @@
 import { isString } from './nodash';
-import { Option } from '../types';
+import { OptionType } from '../types';
 
-export default function getOptionProperty(option: Option, key: string) {
+export default function getOptionProperty(option: OptionType, key: string) {
   if (isString(option)) {
     return undefined;
   }
diff --git a/src/utils/getStringLabelKey.ts b/src/utils/getStringLabelKey.ts
index 2bdb9674..56642dd1 100644
--- a/src/utils/getStringLabelKey.ts
+++ b/src/utils/getStringLabelKey.ts
@@ -1,6 +1,7 @@
 import { DEFAULT_LABELKEY } from '../constants';
 import type { LabelKey } from '../types';
+import {OptionType} from "../types";
 
-export default function getStringLabelKey(labelKey: LabelKey): string {
+export default function getStringLabelKey<Option extends OptionType>(labelKey: LabelKey<Option>): string {
   return typeof labelKey === 'string' ? labelKey : DEFAULT_LABELKEY;
 }
diff --git a/src/utils/getTruncatedOptions.ts b/src/utils/getTruncatedOptions.ts
index 31d2c2c9..c2f8212a 100644
--- a/src/utils/getTruncatedOptions.ts
+++ b/src/utils/getTruncatedOptions.ts
@@ -1,9 +1,9 @@
-import { Option } from '../types';
+import { OptionType } from '../types';
 
 /**
  * Truncates the result set based on `maxResults` and returns the new set.
  */
-function getTruncatedOptions(options: Option[], maxResults: number): Option[] {
+function getTruncatedOptions<Option extends OptionType>(options: Option[], maxResults: number): Option[] {
   if (!maxResults || maxResults >= options.length) {
     return options;
   }
diff --git a/src/utils/getUpdatedActiveIndex.ts b/src/utils/getUpdatedActiveIndex.ts
index 92d66462..eb5dd0e7 100644
--- a/src/utils/getUpdatedActiveIndex.ts
+++ b/src/utils/getUpdatedActiveIndex.ts
@@ -1,10 +1,10 @@
-import type { Option } from '../types';
+import type { OptionType } from '../types';
 import { isString } from './nodash';
 import hasOwnProperty from './hasOwnProperty';
 
 type Key = 'ArrowDown' | 'ArrowUp';
 
-export function isDisabledOption(index: number, items: Option[]): boolean {
+export function isDisabledOption(index: number, items: OptionType[]): boolean {
   const option = items[index];
   return !!option && !isString(option) && hasOwnProperty(option, 'disabled');
 }
@@ -12,7 +12,7 @@ export function isDisabledOption(index: number, items: Option[]): boolean {
 export function skipDisabledOptions(
   currentIndex: number,
   key: Key,
-  items: Option[]
+  items: OptionType[]
 ): number {
   let newIndex = currentIndex;
 
@@ -26,7 +26,7 @@ export function skipDisabledOptions(
 export default function getUpdatedActiveIndex(
   currentIndex: number,
   key: Key,
-  items: Option[]
+  items: OptionType[]
 ): number {
   let newIndex = currentIndex;
 
diff --git a/src/utils/validateSelectedPropChange.ts b/src/utils/validateSelectedPropChange.ts
index 11c54a8c..637e5466 100644
--- a/src/utils/validateSelectedPropChange.ts
+++ b/src/utils/validateSelectedPropChange.ts
@@ -1,10 +1,10 @@
 import warn from './warn';
 
-import type { Option } from '../types';
+import type { OptionType } from '../types';
 
 export default function validateSelectedPropChange(
-  prevSelected?: Option[],
-  selected?: Option[]
+  prevSelected?: OptionType[],
+  selected?: OptionType[]
 ): void {
   const uncontrolledToControlled = !prevSelected && selected;
   const controlledToUncontrolled = prevSelected && !selected;

From f63b8360fe18adc9e4a6549f351bf41a89d80ec3 Mon Sep 17 00:00:00 2001
From: Hans Aarne Liblik <Hans.Liblik@gmail.com>
Date: Thu, 16 Mar 2023 17:55:34 +0200
Subject: [PATCH 2/6] Add generic option type

---
 src/behaviors/async.tsx                         | 13 ++++++-------
 src/behaviors/item.tsx                          | 12 ++++++------
 src/behaviors/token.tsx                         |  2 +-
 src/components/MenuItem/MenuItem.stories.tsx    | 13 +++++++------
 src/components/MenuItem/MenuItem.tsx            |  5 +++--
 src/components/Token/Token.stories.tsx          |  4 ++--
 .../TypeaheadInputMulti.stories.tsx             |  4 ++--
 src/components/TypeaheadMenu/TypeaheadMenu.tsx  |  2 +-
 src/core/Context.tsx                            |  8 +++-----
 src/core/TypeaheadManager.tsx                   |  4 +++-
 src/core/TypeaheadState.ts                      | 14 +++++++-------
 src/tests/helpers.tsx                           |  8 +++++---
 src/utils/defaultFilterBy.ts                    | 10 +++++-----
 src/utils/getHintText.ts                        | 12 ++++++------
 src/utils/getInputText.ts                       | 10 +++++-----
 src/utils/getIsOnlyResult.ts                    |  8 ++++----
 src/utils/getOptionLabel.ts                     |  2 +-
 src/utils/getOptionProperty.ts                  |  2 +-
 src/utils/getUpdatedActiveIndex.ts              | 10 +++++-----
 src/utils/nodash.test.ts                        | 17 ++++++++++++++++-
 src/utils/nodash.ts                             | 14 ++++++++++++++
 src/utils/validateSelectedPropChange.ts         |  6 +++---
 22 files changed, 106 insertions(+), 74 deletions(-)

diff --git a/src/behaviors/async.tsx b/src/behaviors/async.tsx
index e5dfb240..0e0e01c3 100644
--- a/src/behaviors/async.tsx
+++ b/src/behaviors/async.tsx
@@ -66,7 +66,7 @@ export interface UseAsyncProps<Option extends OptionType> extends TypeaheadCompo
   useCache?: boolean;
 }
 
-type Cache = Record<string, OptionType[]>;
+type Cache<Option extends OptionType> = Record<string, Option[]>;
 
 interface DebouncedFunction extends Function {
   cancel(): void;
@@ -96,7 +96,7 @@ export function useAsync<Option extends OptionType>(props: UseAsyncProps<Option>
     ...otherProps
   } = props;
 
-  const cacheRef = useRef<Cache>({});
+  const cacheRef = useRef<Cache<Option>>({});
   const handleSearchDebouncedRef = useRef<DebouncedFunction | null>(null);
   const queryRef = useRef<string>(props.defaultInputValue || '');
 
@@ -179,16 +179,15 @@ export function useAsync<Option extends OptionType>(props: UseAsyncProps<Option>
 }
 
 /* istanbul ignore next */
-export function withAsync<T extends UseAsyncProps = UseAsyncProps>(
+export function withAsync<Option extends OptionType, T extends UseAsyncProps<Option> = UseAsyncProps<Option>>(
   Component: ComponentType<T>
 ) {
   warn(
-    false,
-    'Warning: `withAsync` is deprecated and will be removed in the next ' +
+      false,
+      'Warning: `withAsync` is deprecated and will be removed in the next ' +
       'major version. Use `useAsync` instead.'
   );
-
-  const AsyncTypeahead = forwardRef<Typeahead, T>((props, ref) => (
+  const AsyncTypeahead = forwardRef<Typeahead<Option>, T>((props, ref) => (
     <Component {...props} {...useAsync(props)} ref={ref} />
   ));
 
diff --git a/src/behaviors/item.tsx b/src/behaviors/item.tsx
index e846bf72..0d616e36 100644
--- a/src/behaviors/item.tsx
+++ b/src/behaviors/item.tsx
@@ -26,19 +26,19 @@ const propTypes = {
   position: PropTypes.number,
 };
 
-export interface UseItemProps<T> extends HTMLProps<T> {
+export interface UseItemProps<T, Option extends OptionType> extends HTMLProps<T> {
   onClick?: MouseEventHandler<T>;
-  option: OptionType;
+  option: Option;
   position: number;
 }
 
-export function useItem<T extends HTMLElement>({
+export function useItem<T extends HTMLElement, Option extends OptionType>({
   label,
   onClick,
   option,
   position,
   ...props
-}: UseItemProps<T>) {
+}: UseItemProps<T, Option>) {
   const {
     activeIndex,
     id,
@@ -47,7 +47,7 @@ export function useItem<T extends HTMLElement>({
     onInitialItemChange,
     onMenuItemClick,
     setItem,
-  } = useTypeaheadContext();
+  } = useTypeaheadContext<Option>();
 
   const itemRef = useRef<T>(null);
 
@@ -101,7 +101,7 @@ export function useItem<T extends HTMLElement>({
 }
 
 /* istanbul ignore next */
-export function withItem<T extends UseItemProps<HTMLElement>>(
+export function withItem<Option extends OptionType, T extends UseItemProps<HTMLElement, Option>>(
   Component: ComponentType<T>
 ) {
   warn(
diff --git a/src/behaviors/token.tsx b/src/behaviors/token.tsx
index e84a5e1c..9daf4e05 100644
--- a/src/behaviors/token.tsx
+++ b/src/behaviors/token.tsx
@@ -89,7 +89,7 @@ export function useToken<T extends HTMLElement, Option extends OptionType>({
 }
 
 /* istanbul ignore next */
-export function withToken<T extends UseTokenProps<HTMLElement>>(
+export function withToken<Option extends OptionType, T extends UseTokenProps<HTMLElement, Option>>(
   Component: ComponentType<T>
 ) {
   warn(
diff --git a/src/components/MenuItem/MenuItem.stories.tsx b/src/components/MenuItem/MenuItem.stories.tsx
index 70bfa315..4a063c3e 100644
--- a/src/components/MenuItem/MenuItem.stories.tsx
+++ b/src/components/MenuItem/MenuItem.stories.tsx
@@ -5,11 +5,11 @@ import { Story, Meta } from '@storybook/react';
 
 import MenuItem, { MenuItemProps } from './MenuItem';
 import {
+  createTypeaheadContext,
   defaultContext,
-  TypeaheadContext,
   TypeaheadContextType,
 } from '../../core/Context';
-import {OptionType} from "../../types";
+import {TestOption} from "../../tests/data";
 
 export default {
   title: 'Components/MenuItem/MenuItem',
@@ -17,7 +17,7 @@ export default {
 } as Meta;
 
 interface Args {
-  context: Partial<TypeaheadContextType<OptionType>>;
+  context: Partial<TypeaheadContextType<TestOption>>;
   props: MenuItemProps;
 }
 
@@ -26,11 +26,12 @@ const value = {
   id: 'test-id',
 };
 
-const Template: Story<Args> = ({ context, props }) => (
-  <TypeaheadContext.Provider value={{ ...value, ...context }}>
+const Template: Story<Args> = ({ context, props }) => {
+  const TypeaheadContext = createTypeaheadContext<TestOption>()
+  return <TypeaheadContext.Provider value={{...value, ...context}}>
     <MenuItem {...props} />
   </TypeaheadContext.Provider>
-);
+};
 
 export const Default = Template.bind({});
 Default.args = {
diff --git a/src/components/MenuItem/MenuItem.tsx b/src/components/MenuItem/MenuItem.tsx
index dabeee3d..5974dca9 100644
--- a/src/components/MenuItem/MenuItem.tsx
+++ b/src/components/MenuItem/MenuItem.tsx
@@ -2,6 +2,7 @@ import cx from 'classnames';
 import React, { forwardRef, HTMLAttributes, MouseEvent } from 'react';
 
 import { useItem, UseItemProps } from '../../behaviors/item';
+import {OptionType} from "../../types";
 
 export interface BaseMenuItemProps extends HTMLAttributes<HTMLAnchorElement> {
   active?: boolean;
@@ -27,8 +28,8 @@ export const BaseMenuItem = forwardRef<HTMLAnchorElement, BaseMenuItemProps>(
   }
 );
 
-export type MenuItemProps = UseItemProps<HTMLAnchorElement>;
+export type MenuItemProps<Option extends OptionType> = UseItemProps<HTMLAnchorElement, Option>;
 
-export default function MenuItem(props: MenuItemProps) {
+export default function MenuItem<Option extends OptionType>(props: MenuItemProps<Option>) {
   return <BaseMenuItem {...useItem(props)} />;
 }
diff --git a/src/components/Token/Token.stories.tsx b/src/components/Token/Token.stories.tsx
index dc49f6d3..4fcab8af 100644
--- a/src/components/Token/Token.stories.tsx
+++ b/src/components/Token/Token.stories.tsx
@@ -5,14 +5,14 @@ import { Story, Meta } from '@storybook/react';
 
 import Token, { TokenProps } from './Token';
 import { noop } from '../../utils';
-import {OptionType} from "../../types";
+import {TestOption} from "../../tests/data";
 
 export default {
   title: 'Components/Token',
   component: Token,
 } as Meta;
 
-const Template: Story<TokenProps<HTMLElement, OptionType>> = (args) => <Token {...args} />;
+const Template: Story<TokenProps<HTMLElement, TestOption>> = (args) => <Token {...args} />;
 
 export const Interactive = Template.bind({});
 Interactive.args = {
diff --git a/src/components/TypeaheadInputMulti/TypeaheadInputMulti.stories.tsx b/src/components/TypeaheadInputMulti/TypeaheadInputMulti.stories.tsx
index b32c6c6d..d017a319 100644
--- a/src/components/TypeaheadInputMulti/TypeaheadInputMulti.stories.tsx
+++ b/src/components/TypeaheadInputMulti/TypeaheadInputMulti.stories.tsx
@@ -8,7 +8,7 @@ import TypeaheadInputMulti, {
   TypeaheadInputMultiProps,
 } from './TypeaheadInputMulti';
 
-import options from '../../tests/data';
+import options, {TestOption} from '../../tests/data';
 import { HintProvider, noop } from '../../tests/helpers';
 import type { Size } from '../../types';
 import {OptionType} from "../../types";
@@ -36,7 +36,7 @@ interface Args<Option extends OptionType> extends TypeaheadInputMultiProps<Optio
   size?: Size;
 }
 
-const Template: Story<Args> = ({ hintText = '', ...args }) => {
+const Template: Story<Args<TestOption>> = ({ hintText = '', ...args }) => {
   const [value, setValue] = useState(args.value);
   const [inputNode, setInputNode] = useState<HTMLInputElement | null>(null);
 
diff --git a/src/components/TypeaheadMenu/TypeaheadMenu.tsx b/src/components/TypeaheadMenu/TypeaheadMenu.tsx
index 834616d9..292f7c35 100644
--- a/src/components/TypeaheadMenu/TypeaheadMenu.tsx
+++ b/src/components/TypeaheadMenu/TypeaheadMenu.tsx
@@ -42,7 +42,7 @@ const propTypes = {
 const defaultProps = {
   newSelectionPrefix: 'New selection: ',
   paginationText: 'Display additional results...',
-  renderMenuItemChildren: (option: OptionType, props: TypeaheadMenuProps<OptionType>) => (
+  renderMenuItemChildren: <Option extends OptionType>(option: Option, props: TypeaheadMenuProps<Option>) => (
     <Highlighter search={props.text}>
       {getOptionLabel(option, props.labelKey)}
     </Highlighter>
diff --git a/src/core/Context.tsx b/src/core/Context.tsx
index 4e8e2d21..1a1d2703 100644
--- a/src/core/Context.tsx
+++ b/src/core/Context.tsx
@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react';
 
-import { noop } from '../utils';
+import {noop, once} from '../utils';
 import { Id, OptionType, OptionHandler, SelectEvent } from '../types';
 
 export interface TypeaheadContextType<Option extends OptionType> {
@@ -31,7 +31,5 @@ export const defaultContext = {
   setItem: noop,
 };
 
-export const TypeaheadContext =
-  createContext<TypeaheadContextType<OptionType>>(defaultContext);
-
-export const useTypeaheadContext = () => useContext(TypeaheadContext);
+export const createTypeaheadContext = once(<Option extends OptionType>() => createContext<TypeaheadContextType<Option>>(defaultContext));
+export const useTypeaheadContext = <Option extends OptionType>() => useContext(createTypeaheadContext<Option>());
diff --git a/src/core/TypeaheadManager.tsx b/src/core/TypeaheadManager.tsx
index c07f393e..5974e6a6 100644
--- a/src/core/TypeaheadManager.tsx
+++ b/src/core/TypeaheadManager.tsx
@@ -1,6 +1,6 @@
 import React, { KeyboardEvent, useEffect, useRef } from 'react';
 
-import { TypeaheadContext, TypeaheadContextType } from './Context';
+import {createTypeaheadContext, TypeaheadContextType} from './Context';
 import {
   defaultSelectHint,
   getHintText,
@@ -55,6 +55,8 @@ const contextKeys = [
 ] as (keyof TypeaheadManagerProps<OptionType>)[];
 
 const TypeaheadManager = <Option extends OptionType>(props: TypeaheadManagerProps<Option>) => {
+  const TypeaheadContext = createTypeaheadContext<Option>()
+
   const {
     allowNew,
     children,
diff --git a/src/core/TypeaheadState.ts b/src/core/TypeaheadState.ts
index 3633d37c..289a6221 100644
--- a/src/core/TypeaheadState.ts
+++ b/src/core/TypeaheadState.ts
@@ -1,9 +1,9 @@
-import { TypeaheadProps, TypeaheadState } from '../types';
+import {OptionType, TypeaheadProps, TypeaheadState} from '../types';
 import { getOptionLabel } from '../utils';
 
-type Props = TypeaheadProps;
+type Props<Option extends OptionType> = TypeaheadProps<Option>;
 
-export function getInitialState(props: Props): TypeaheadState {
+export function getInitialState<Option extends OptionType>(props: Props<Option>): TypeaheadState<Option> {
   const {
     defaultInputValue,
     defaultOpen,
@@ -40,7 +40,7 @@ export function getInitialState(props: Props): TypeaheadState {
   };
 }
 
-export function clearTypeahead(state: TypeaheadState, props: Props) {
+export function clearTypeahead<Option extends OptionType>(state: TypeaheadState<Option>, props: Props<Option>) {
   return {
     ...getInitialState(props),
     isFocused: state.isFocused,
@@ -49,7 +49,7 @@ export function clearTypeahead(state: TypeaheadState, props: Props) {
   };
 }
 
-export function clickOrFocusInput(state: TypeaheadState) {
+export function clickOrFocusInput<Option extends OptionType>(state: TypeaheadState<Option>) {
   return {
     ...state,
     isFocused: true,
@@ -57,7 +57,7 @@ export function clickOrFocusInput(state: TypeaheadState) {
   };
 }
 
-export function hideMenu(state: TypeaheadState, props: Props) {
+export function hideMenu<Option extends OptionType>(state: TypeaheadState<Option>, props: Props<Option>) {
   const { activeIndex, activeItem, initialItem, shownResults } =
     getInitialState(props);
 
@@ -71,6 +71,6 @@ export function hideMenu(state: TypeaheadState, props: Props) {
   };
 }
 
-export function toggleMenu(state: TypeaheadState, props: Props) {
+export function toggleMenu<Option extends OptionType>(state: TypeaheadState<Option>, props: Props<Option>) {
   return state.showMenu ? hideMenu(state, props) : { ...state, showMenu: true };
 }
diff --git a/src/tests/helpers.tsx b/src/tests/helpers.tsx
index 95574a12..61f47125 100644
--- a/src/tests/helpers.tsx
+++ b/src/tests/helpers.tsx
@@ -8,10 +8,11 @@ import { composeStories, composeStory } from '@storybook/testing-react';
 import { render, screen, RenderResult } from '@testing-library/react';
 
 import {
+  createTypeaheadContext,
   defaultContext,
-  TypeaheadContext,
   TypeaheadContextType,
 } from '../core/Context';
+import {OptionType} from "../types";
 
 export { axe };
 export * from '@storybook/testing-react';
@@ -52,11 +53,12 @@ export function generateSnapshots(
   });
 }
 
-interface HintProviderProps extends Partial<TypeaheadContextType> {
+interface HintProviderProps<Option extends OptionType> extends Partial<TypeaheadContextType<Option>> {
   children?: ReactNode;
 }
 
-export const HintProvider = ({ children, ...context }: HintProviderProps) => {
+export const HintProvider = <Option extends OptionType>({ children, ...context }: HintProviderProps<Option>) => {
+  const TypeaheadContext = createTypeaheadContext<Option>()
   return (
     <TypeaheadContext.Provider
       value={{
diff --git a/src/utils/defaultFilterBy.ts b/src/utils/defaultFilterBy.ts
index 14e169a0..2214cd54 100644
--- a/src/utils/defaultFilterBy.ts
+++ b/src/utils/defaultFilterBy.ts
@@ -7,17 +7,17 @@ import warn from './warn';
 
 import type { LabelKey, OptionType } from '../types';
 
-interface Props {
+interface Props<Option extends OptionType> {
   caseSensitive: boolean;
   filterBy: string[];
   ignoreDiacritics: boolean;
-  labelKey: LabelKey;
+  labelKey: LabelKey<Option>;
   multiple: boolean;
-  selected: OptionType[];
+  selected: Option[];
   text: string;
 }
 
-function isMatch(input: string, string: string, props: Props): boolean {
+function isMatch<Option extends OptionType>(input: string, string: string, props: Props<Option>): boolean {
   let searchStr = input;
   let str = string;
 
@@ -37,7 +37,7 @@ function isMatch(input: string, string: string, props: Props): boolean {
 /**
  * Default algorithm for filtering results.
  */
-export default function defaultFilterBy(option: OptionType, props: Props): boolean {
+export default function defaultFilterBy<Option extends OptionType>(option: Option, props: Props<Option>): boolean {
   const { filterBy, labelKey, multiple, selected, text } = props;
 
   // Don't show selected options in the menu for the multi-select case.
diff --git a/src/utils/getHintText.ts b/src/utils/getHintText.ts
index 749666e3..d57812e5 100644
--- a/src/utils/getHintText.ts
+++ b/src/utils/getHintText.ts
@@ -5,18 +5,18 @@ import { isString } from './nodash';
 
 import { LabelKey, OptionType } from '../types';
 
-interface HintProps {
+interface HintProps<Option extends OptionType> {
   activeIndex: number;
-  initialItem?: OptionType;
+  initialItem?: Option;
   isFocused: boolean;
   isMenuShown: boolean;
-  labelKey: LabelKey;
+  labelKey: LabelKey<Option>;
   multiple: boolean;
-  selected: OptionType[];
+  selected: Option[];
   text: string;
 }
 
-function getHintText({
+function getHintText<Option extends OptionType>({
   activeIndex,
   initialItem,
   isFocused,
@@ -25,7 +25,7 @@ function getHintText({
   multiple,
   selected,
   text,
-}: HintProps) {
+}: HintProps<Option>) {
   // Don't display a hint under the following conditions:
   if (
     // No text entered.
diff --git a/src/utils/getInputText.ts b/src/utils/getInputText.ts
index d12c3a0b..34c76e02 100644
--- a/src/utils/getInputText.ts
+++ b/src/utils/getInputText.ts
@@ -1,15 +1,15 @@
 import getOptionLabel from './getOptionLabel';
 import { LabelKey, OptionType } from '../types';
 
-interface Props {
-  activeItem?: OptionType;
-  labelKey: LabelKey;
+interface Props<Option extends OptionType> {
+  activeItem?: Option;
+  labelKey: LabelKey<Option>;
   multiple: boolean;
-  selected: OptionType[];
+  selected: Option[];
   text: string;
 }
 
-function getInputText(props: Props): string {
+function getInputText<Option extends OptionType>(props: Props<Option>): string {
   const { activeItem, labelKey, multiple, selected, text } = props;
 
   if (activeItem) {
diff --git a/src/utils/getIsOnlyResult.ts b/src/utils/getIsOnlyResult.ts
index 6c41fa8f..cb1cf61d 100644
--- a/src/utils/getIsOnlyResult.ts
+++ b/src/utils/getIsOnlyResult.ts
@@ -2,13 +2,13 @@ import getOptionProperty from './getOptionProperty';
 
 import { AllowNew, OptionType } from '../types';
 
-interface Props {
-  allowNew: AllowNew;
+interface Props<Option extends OptionType> {
+  allowNew: AllowNew<Option>;
   highlightOnlyResult: boolean;
-  results: OptionType[];
+  results: Option[];
 }
 
-function getIsOnlyResult(props: Props): boolean {
+function getIsOnlyResult<Option extends OptionType>(props: Props<Option>): boolean {
   const { allowNew, highlightOnlyResult, results } = props;
 
   if (!highlightOnlyResult || allowNew) {
diff --git a/src/utils/getOptionLabel.ts b/src/utils/getOptionLabel.ts
index 72a9d62e..9185432c 100644
--- a/src/utils/getOptionLabel.ts
+++ b/src/utils/getOptionLabel.ts
@@ -11,7 +11,7 @@ import type { LabelKey, OptionType } from '../types';
  * themselves, or an object with a defined display string. Anything else throws
  * an error.
  */
-function getOptionLabel(option: OptionType, labelKey: LabelKey): string {
+function getOptionLabel<Option extends OptionType>(option: Option, labelKey: LabelKey<Option>): string {
   // Handle internally created options first.
   if (
     !isString(option) &&
diff --git a/src/utils/getOptionProperty.ts b/src/utils/getOptionProperty.ts
index 8bc66457..b4a0fa84 100644
--- a/src/utils/getOptionProperty.ts
+++ b/src/utils/getOptionProperty.ts
@@ -1,7 +1,7 @@
 import { isString } from './nodash';
 import { OptionType } from '../types';
 
-export default function getOptionProperty(option: OptionType, key: string) {
+export default function getOptionProperty<Option extends OptionType>(option: Option, key: string) {
   if (isString(option)) {
     return undefined;
   }
diff --git a/src/utils/getUpdatedActiveIndex.ts b/src/utils/getUpdatedActiveIndex.ts
index eb5dd0e7..eac282db 100644
--- a/src/utils/getUpdatedActiveIndex.ts
+++ b/src/utils/getUpdatedActiveIndex.ts
@@ -4,15 +4,15 @@ import hasOwnProperty from './hasOwnProperty';
 
 type Key = 'ArrowDown' | 'ArrowUp';
 
-export function isDisabledOption(index: number, items: OptionType[]): boolean {
+export function isDisabledOption<Option extends OptionType>(index: number, items: Option[]): boolean {
   const option = items[index];
   return !!option && !isString(option) && hasOwnProperty(option, 'disabled');
 }
 
-export function skipDisabledOptions(
+export function skipDisabledOptions<Option extends OptionType>(
   currentIndex: number,
   key: Key,
-  items: OptionType[]
+  items: Option[]
 ): number {
   let newIndex = currentIndex;
 
@@ -23,10 +23,10 @@ export function skipDisabledOptions(
   return newIndex;
 }
 
-export default function getUpdatedActiveIndex(
+export default function getUpdatedActiveIndex<Option extends OptionType>(
   currentIndex: number,
   key: Key,
-  items: OptionType[]
+  items: Option[]
 ): number {
   let newIndex = currentIndex;
 
diff --git a/src/utils/nodash.test.ts b/src/utils/nodash.test.ts
index 97bb7429..f6c51d47 100644
--- a/src/utils/nodash.test.ts
+++ b/src/utils/nodash.test.ts
@@ -1,4 +1,4 @@
-import { isFunction, isString, noop, pick, uniqueId } from './nodash';
+import {isFunction, isString, noop, once, pick, uniqueId} from './nodash';
 
 const arr: string[] = [];
 const fn = noop;
@@ -35,4 +35,19 @@ describe('nodash', () => {
     expect(uniqueId()).toBe('1');
     expect(uniqueId('foo-')).toBe('foo-2');
   });
+
+  test('once', () =>{
+    const onceFn = (a: number) => a;
+
+    const onlyOnce = once(onceFn)
+
+    let result = -100;
+    for (let i = 0; i < 100; i++) {
+      result = onlyOnce(i)
+    }
+
+    expect(fn).toBeCalledTimes(1)
+    expect(fn).toBeCalledWith(0)
+    expect(result).toBe(0)
+  })
 });
diff --git a/src/utils/nodash.ts b/src/utils/nodash.ts
index b80a52bb..9770b7ab 100644
--- a/src/utils/nodash.ts
+++ b/src/utils/nodash.ts
@@ -25,3 +25,17 @@ export function uniqueId(prefix?: string): string {
   idCounter += 1;
   return (prefix == null ? '' : String(prefix)) + idCounter;
 }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const once = <T extends (...args: any) => any>(func: T): T => {
+  let called = false;
+  let result: unknown;
+  // @ts-ignore
+  return (...args) => {
+    if (!called) {
+      result = func(...args)
+      called = true;
+    }
+    return result
+  }
+}
diff --git a/src/utils/validateSelectedPropChange.ts b/src/utils/validateSelectedPropChange.ts
index 637e5466..382a955c 100644
--- a/src/utils/validateSelectedPropChange.ts
+++ b/src/utils/validateSelectedPropChange.ts
@@ -2,9 +2,9 @@ import warn from './warn';
 
 import type { OptionType } from '../types';
 
-export default function validateSelectedPropChange(
-  prevSelected?: OptionType[],
-  selected?: OptionType[]
+export default function validateSelectedPropChange<Option extends OptionType>(
+  prevSelected?: Option[],
+  selected?: Option[]
 ): void {
   const uncontrolledToControlled = !prevSelected && selected;
   const controlledToUncontrolled = prevSelected && !selected;

From 40a7e26e8c30cf6d06b9d7293cd62ad062b89357 Mon Sep 17 00:00:00 2001
From: Hans Aarne Liblik <Hans.Liblik@gmail.com>
Date: Thu, 16 Mar 2023 18:25:51 +0200
Subject: [PATCH 3/6] Add generic option type

---
 .../Typeahead/Typeahead.stories.tsx           |  2 +-
 src/components/Typeahead/Typeahead.test.tsx   | 54 ++++++++++---------
 src/core/Context.tsx                          |  2 +-
 src/core/Typeahead.tsx                        |  2 +-
 4 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/src/components/Typeahead/Typeahead.stories.tsx b/src/components/Typeahead/Typeahead.stories.tsx
index ccf0221b..0b69d76f 100644
--- a/src/components/Typeahead/Typeahead.stories.tsx
+++ b/src/components/Typeahead/Typeahead.stories.tsx
@@ -123,7 +123,7 @@ CustomMenu.args = {
   renderMenu: (results, menuProps) => (
     <Menu {...menuProps}>
       {/* Use `slice` to avoid mutating the original array */}
-      {(results as TestOption[])
+      {results
         .slice()
         .reverse()
         .map((r, index) => (
diff --git a/src/components/Typeahead/Typeahead.test.tsx b/src/components/Typeahead/Typeahead.test.tsx
index e5b95419..cc388620 100644
--- a/src/components/Typeahead/Typeahead.test.tsx
+++ b/src/components/Typeahead/Typeahead.test.tsx
@@ -24,6 +24,7 @@ import {
 } from '../../tests/helpers';
 
 import states, {TestOption} from '../../tests/data';
+import {TypeaheadState} from "../../types";
 
 const ID = 'rbt-id';
 
@@ -116,7 +117,7 @@ describe('<Typeahead>', () => {
   });
 
   it('truncates selections when using `defaultSelected`', () => {
-    let selected: TestOption[] = states.slice(0, 4);
+    let selected = states.slice(0, 4);
     render(
       <Default defaultSelected={selected}>
         {(state) => {
@@ -129,7 +130,7 @@ describe('<Typeahead>', () => {
   });
 
   describe('behaviors when selections are passed in', () => {
-    let selected: { name: string }[];
+    let selected: TestOption[];
     let selectedText: string;
 
     beforeEach(() => {
@@ -239,7 +240,7 @@ describe('<Typeahead>', () => {
       { disabled: true, name: 'boo' },
       { name: 'baz' },
       { disabled: true, name: 'bro' },
-    ];
+    ] as TestOption[];
 
     render(<Default options={options} />);
     getInput().focus();
@@ -413,7 +414,7 @@ describe('<Typeahead>', () => {
     it('acts as a controlled input in single-select mode', () => {
       let selected: TestOption[] = [];
 
-      const children = (state) => {
+      const children = (state: TypeaheadState<TestOption>) => {
         selected = state.selected;
       };
       const selected1 = states.slice(0, 1);
@@ -465,7 +466,7 @@ describe('<Typeahead>', () => {
       render(
         <Controlled selected={states.slice(0, 1)}>
           {(state) => {
-            selected = state.selected;
+            selected = state.selected as TestOption[];
           }}
         </Controlled>
       );
@@ -486,7 +487,7 @@ describe('<Typeahead>', () => {
 
   describe('`highlightOnlyResult` behavior', () => {
     let onChange: jest.Mock;
-    let selected: Option[];
+    let selected: TestOption[];
 
     beforeEach(() => {
       onChange = jest.fn((s) => (selected = [s]));
@@ -543,16 +544,18 @@ describe('<Typeahead>', () => {
 
     it('does not highlight or select a disabled result', async () => {
       const user = userEvent.setup();
+      const options = [
+        { name: 'foo' },
+        { disabled: true, name: 'bar' },
+        { disabled: true, name: 'boo' },
+        { name: 'baz' },
+      ] as TestOption[]
+
       render(
         <Default
           highlightOnlyResult
           onChange={onChange}
-          options={[
-            { name: 'foo' },
-            { disabled: true, name: 'bar' },
-            { disabled: true, name: 'boo' },
-            { name: 'baz' },
-          ]}
+          options={options}
         />
       );
 
@@ -1012,7 +1015,7 @@ describe('<Typeahead>', () => {
       <Default
         renderMenuItemChildren={
           // Render the capital instead of the state name.
-          (o) => o.capital
+          (o) => <span>{o.capital}</span>
         }
       />
     );
@@ -1145,7 +1148,8 @@ describe('<Typeahead>', () => {
     });
 
     it('adds the custom option when `allowNew` is set to `true`', async () => {
-      let selected: TestOption[] = [];
+      type TestOptionWithId = TestOption & {id: string};
+      let selected: TestOptionWithId[] = [];
       const user = userEvent.setup();
 
       render(
@@ -1153,7 +1157,7 @@ describe('<Typeahead>', () => {
           emptyLabel={emptyLabel}
           newSelectionPrefix={newSelectionPrefix}
           onChange={(s) => {
-            selected = s;
+            selected = s as TestOptionWithId[];
           }}
         />
       );
@@ -1235,7 +1239,7 @@ describe('<Typeahead>', () => {
 
 describe('<Typeahead> Public Methods', () => {
   it('exposes the typeahead instance and public methods', () => {
-    const ref = createRef<Typeahead>();
+    const ref = createRef<Typeahead<TestOption>>();
     render(<TestComponent ref={ref} />);
 
     expect(typeof ref.current?.blur).toBe('function');
@@ -1247,7 +1251,7 @@ describe('<Typeahead> Public Methods', () => {
   });
 
   it('calls the public `focus` and `blur` methods', () => {
-    const ref = createRef<Typeahead>();
+    const ref = createRef<Typeahead<TestOption>>();
     render(<TestComponent ref={ref} />);
 
     const input = getInput();
@@ -1261,7 +1265,7 @@ describe('<Typeahead> Public Methods', () => {
 
   it('calls the public `clear` method', async () => {
     const user = userEvent.setup();
-    const ref = createRef<Typeahead>();
+    const ref = createRef<Typeahead<TestOption>>();
     const { container } = render(
       <TestComponent multiple ref={ref} defaultSelected={states.slice(0, 3)} />
     );
@@ -1280,13 +1284,13 @@ describe('<Typeahead> Public Methods', () => {
   });
 
   it('calls the public `getInput` method', () => {
-    const ref = createRef<Typeahead>();
+    const ref = createRef<Typeahead<TestOption>>();
     render(<TestComponent ref={ref} />);
     expect(ref.current?.getInput()).toEqual(getInput());
   });
 
   it('calls the public `hideMenu` method', async () => {
-    const ref = createRef<Typeahead>();
+    const ref = createRef<Typeahead<TestOption>>();
     render(<TestComponent ref={ref} />);
 
     getInput().focus();
@@ -1298,7 +1302,7 @@ describe('<Typeahead> Public Methods', () => {
   });
 
   it('calls the public `toggleMenu` method', () => {
-    const ref = createRef<Typeahead>();
+    const ref = createRef<Typeahead<TestOption>>();
     render(<TestComponent ref={ref} />);
 
     expect(getMenu()).not.toBeInTheDocument();
@@ -1312,7 +1316,7 @@ describe('<Typeahead> Public Methods', () => {
 
   it('clears the typeahead after a selection', async () => {
     const user = userEvent.setup();
-    const ref = createRef<Typeahead>();
+    const ref = createRef<Typeahead<TestOption>>();
     const onChange = jest.fn(() => {
       ref.current?.clear();
     });
@@ -1498,7 +1502,7 @@ describe('<Typeahead> `change` events', () => {
   });
 
   it('does not call either when `clear()` is called externally', () => {
-    const ref = createRef<Typeahead>();
+    const ref = createRef<Typeahead<TestOption>>();
     const selected = states.slice(0, 1);
     render(
       <TestComponent
@@ -1521,8 +1525,8 @@ describe('<Typeahead> `change` events', () => {
 
 describe('<Typeahead> input value behaviors', () => {
   let defaultInputValue: string;
-  let defaultSelected: Option[];
-  let selected: Option[];
+  let defaultSelected: TestOption[];
+  let selected: TestOption[];
 
   beforeEach(() => {
     defaultInputValue = 'This is a default value';
diff --git a/src/core/Context.tsx b/src/core/Context.tsx
index 1a1d2703..ebc98fe6 100644
--- a/src/core/Context.tsx
+++ b/src/core/Context.tsx
@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react';
 
-import {noop, once} from '../utils';
+import { noop, once } from '../utils';
 import { Id, OptionType, OptionHandler, SelectEvent } from '../types';
 
 export interface TypeaheadContextType<Option extends OptionType> {
diff --git a/src/core/Typeahead.tsx b/src/core/Typeahead.tsx
index 9f3a7363..cd10b194 100644
--- a/src/core/Typeahead.tsx
+++ b/src/core/Typeahead.tsx
@@ -519,7 +519,7 @@ class Typeahead<Option extends OptionType> extends React.Component<Props<Option>
     // Add a unique id to the custom selection. Avoid doing this in `render` so
     // the id doesn't increment every time.
     if (!isString(selection) && selection.customOption) {
-      // @ts-ignore selection is an object
+      // @ts-ignore selection is an object, since `isString` returned `false`
       selection = { ...selection , id: uniqueId('new-id-') };
     }
 

From 3cf8591232292c1024a92d4ec16de76af4999104 Mon Sep 17 00:00:00 2001
From: Hans Aarne Liblik <Hans.Liblik@gmail.com>
Date: Thu, 16 Mar 2023 18:56:21 +0200
Subject: [PATCH 4/6] Add generic option type

---
 example/package.json                          |   2 +-
 example/yarn.lock                             | 154 +++++++-----------
 src/components/MenuItem/MenuItem.stories.tsx  |  14 +-
 .../Typeahead/Typeahead.stories.tsx           |   2 +-
 src/components/Typeahead/Typeahead.tsx        |   2 +-
 .../TypeaheadMenu/TypeaheadMenu.stories.tsx   |  19 +--
 src/propTypes.ts                              |  44 ++---
 src/utils/getInputProps.ts                    |  10 +-
 8 files changed, 100 insertions(+), 147 deletions(-)

diff --git a/example/package.json b/example/package.json
index da260ee5..acc0fb97 100644
--- a/example/package.json
+++ b/example/package.json
@@ -30,6 +30,6 @@
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.3",
     "webpack": "^5.76.0",
-    "webpack-cli": "^4.9.2"
+    "webpack-cli": "^5.0.1"
   }
 }
diff --git a/example/yarn.lock b/example/yarn.lock
index 162dc7d4..b0650624 100644
--- a/example/yarn.lock
+++ b/example/yarn.lock
@@ -1393,22 +1393,20 @@
     "@webassemblyjs/ast" "1.11.1"
     "@xtuc/long" "4.2.2"
 
-"@webpack-cli/configtest@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-1.1.1.tgz#9f53b1b7946a6efc2a749095a4f450e2932e8356"
-  integrity sha512-1FBc1f9G4P/AxMqIgfZgeOTuRnwZMten8E7zap5zgpPInnCrP8D4Q81+4CWIch8i/Nf7nXjP0v6CjjbHOrXhKg==
+"@webpack-cli/configtest@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-2.0.1.tgz#a69720f6c9bad6aef54a8fa6ba9c3533e7ef4c7f"
+  integrity sha512-njsdJXJSiS2iNbQVS0eT8A/KPnmyH4pv1APj2K0d1wrZcBLw+yppxOy4CGqa0OxDJkzfL/XELDhD8rocnIwB5A==
 
-"@webpack-cli/info@^1.4.1":
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-1.4.1.tgz#2360ea1710cbbb97ff156a3f0f24556e0fc1ebea"
-  integrity sha512-PKVGmazEq3oAo46Q63tpMr4HipI3OPfP7LiNOEJg963RMgT0rqheag28NCML0o3GIzA3DmxP1ZIAv9oTX1CUIA==
-  dependencies:
-    envinfo "^7.7.3"
+"@webpack-cli/info@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-2.0.1.tgz#eed745799c910d20081e06e5177c2b2569f166c0"
+  integrity sha512-fE1UEWTwsAxRhrJNikE7v4EotYflkEhBL7EbajfkPlf6E37/2QshOy/D48Mw8G5XMFlQtS6YV42vtbG9zBpIQA==
 
-"@webpack-cli/serve@^1.6.1":
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.6.1.tgz#0de2875ac31b46b6c5bb1ae0a7d7f0ba5678dffe"
-  integrity sha512-gNGTiTrjEVQ0OcVnzsRSqTxaBSr+dmTfm+qJsCDluky8uhdLWep7Gcr62QsAKHTMxjCS/8nEITsmFAhfIx+QSw==
+"@webpack-cli/serve@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-2.0.1.tgz#34bdc31727a1889198855913db2f270ace6d7bf8"
+  integrity sha512-0G7tNyS+yW8TdgHwZKlDWYXFA6OJQnoLCQvYKkQP0Q2X205PSQ6RNUj0M+1OB/9gRQaUZ/ccYfaxd0nhaWKfjw==
 
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
@@ -1587,10 +1585,10 @@ commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
-commander@^7.0.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
-  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+commander@^9.4.1:
+  version "9.5.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
+  integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
 
 commondir@^1.0.1:
   version "1.0.1"
@@ -1758,21 +1756,6 @@ events@^3.2.0:
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
 
-execa@^5.0.0:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
-  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
-  dependencies:
-    cross-spawn "^7.0.3"
-    get-stream "^6.0.0"
-    human-signals "^2.1.0"
-    is-stream "^2.0.0"
-    merge-stream "^2.0.0"
-    npm-run-path "^4.0.1"
-    onetime "^5.1.2"
-    signal-exit "^3.0.3"
-    strip-final-newline "^2.0.0"
-
 fast-deep-equal@^3.1.1:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -1824,11 +1807,6 @@ get-intrinsic@^1.0.2:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
-get-stream@^6.0.0:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
-  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
-
 glob-to-regexp@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
@@ -1866,11 +1844,6 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-human-signals@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
-  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
-
 icss-utils@^5.0.0, icss-utils@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
@@ -1884,10 +1857,10 @@ import-local@^3.0.2:
     pkg-dir "^4.2.0"
     resolve-cwd "^3.0.0"
 
-interpret@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.2.0.tgz#1a78a0b5965c40a5416d007ad6f50ad27c417df9"
-  integrity sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==
+interpret@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-3.1.1.tgz#5be0ceed67ca79c6c4bc5cf0d7ee843dcea110c4"
+  integrity sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==
 
 invariant@^2.2.4:
   version "2.2.4"
@@ -1903,6 +1876,13 @@ is-core-module@^2.8.1:
   dependencies:
     has "^1.0.3"
 
+is-core-module@^2.9.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
+  integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==
+  dependencies:
+    has "^1.0.3"
+
 is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@@ -1910,11 +1890,6 @@ is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
-is-stream@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
-  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
-
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -2043,11 +2018,6 @@ mime-types@^2.1.27:
   dependencies:
     mime-db "1.52.0"
 
-mimic-fn@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
-  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
-
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@@ -2068,13 +2038,6 @@ node-releases@^2.0.3:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.5.tgz#280ed5bc3eba0d96ce44897d8aee478bfb3d9666"
   integrity sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q==
 
-npm-run-path@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
-  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
-  dependencies:
-    path-key "^3.0.0"
-
 object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -2095,13 +2058,6 @@ object.assign@^4.1.0:
     has-symbols "^1.0.1"
     object-keys "^1.1.1"
 
-onetime@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
-  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
-  dependencies:
-    mimic-fn "^2.1.0"
-
 p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
@@ -2126,7 +2082,7 @@ path-exists@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
   integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
 
-path-key@^3.0.0, path-key@^3.1.0:
+path-key@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
@@ -2293,12 +2249,12 @@ react-waypoint@^10.1.0:
     prop-types "^15.0.0"
     react-is "^17.0.1"
 
-rechoir@^0.7.0:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.7.1.tgz#9478a96a1ca135b5e88fc027f03ee92d6c645686"
-  integrity sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==
+rechoir@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.8.0.tgz#49f866e0d32146142da3ad8f0eff352b3215ff22"
+  integrity sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==
   dependencies:
-    resolve "^1.9.0"
+    resolve "^1.20.0"
 
 regenerate-unicode-properties@^10.0.1:
   version "10.0.1"
@@ -2360,7 +2316,7 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
-resolve@^1.14.2, resolve@^1.9.0:
+resolve@^1.14.2:
   version "1.22.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
   integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
@@ -2369,6 +2325,15 @@ resolve@^1.14.2, resolve@^1.9.0:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.20.0:
+  version "1.22.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 safe-buffer@^5.1.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
@@ -2448,11 +2413,6 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-signal-exit@^3.0.3:
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
-  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
-
 source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
@@ -2476,11 +2436,6 @@ source-map@^0.6.0:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-strip-final-newline@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
-  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
-
 style-loader@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
@@ -2596,22 +2551,23 @@ watchpack@^2.4.0:
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.1.2"
 
-webpack-cli@^4.9.2:
-  version "4.9.2"
-  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-4.9.2.tgz#77c1adaea020c3f9e2db8aad8ea78d235c83659d"
-  integrity sha512-m3/AACnBBzK/kMTcxWHcZFPrw/eQuY4Df1TxvIWfWM2x7mRqBQCqKEd96oCUa9jkapLBaFfRce33eGDb4Pr7YQ==
+webpack-cli@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-5.0.1.tgz#95fc0495ac4065e9423a722dec9175560b6f2d9a"
+  integrity sha512-S3KVAyfwUqr0Mo/ur3NzIp6jnerNpo7GUO6so51mxLi1spqsA17YcMXy0WOIJtBSnj748lthxC6XLbNKh/ZC+A==
   dependencies:
     "@discoveryjs/json-ext" "^0.5.0"
-    "@webpack-cli/configtest" "^1.1.1"
-    "@webpack-cli/info" "^1.4.1"
-    "@webpack-cli/serve" "^1.6.1"
+    "@webpack-cli/configtest" "^2.0.1"
+    "@webpack-cli/info" "^2.0.1"
+    "@webpack-cli/serve" "^2.0.1"
     colorette "^2.0.14"
-    commander "^7.0.0"
-    execa "^5.0.0"
+    commander "^9.4.1"
+    cross-spawn "^7.0.3"
+    envinfo "^7.7.3"
     fastest-levenshtein "^1.0.12"
     import-local "^3.0.2"
-    interpret "^2.2.0"
-    rechoir "^0.7.0"
+    interpret "^3.1.1"
+    rechoir "^0.8.0"
     webpack-merge "^5.7.3"
 
 webpack-merge@^5.7.3:
diff --git a/src/components/MenuItem/MenuItem.stories.tsx b/src/components/MenuItem/MenuItem.stories.tsx
index 4a063c3e..511c0f48 100644
--- a/src/components/MenuItem/MenuItem.stories.tsx
+++ b/src/components/MenuItem/MenuItem.stories.tsx
@@ -9,16 +9,16 @@ import {
   defaultContext,
   TypeaheadContextType,
 } from '../../core/Context';
-import {TestOption} from "../../tests/data";
+import {OptionType} from "../../types";
 
 export default {
   title: 'Components/MenuItem/MenuItem',
   component: MenuItem,
 } as Meta;
 
-interface Args {
-  context: Partial<TypeaheadContextType<TestOption>>;
-  props: MenuItemProps;
+interface Args<Option extends OptionType> {
+  context: Partial<TypeaheadContextType<Option>>;
+  props: MenuItemProps<Option>;
 }
 
 const value = {
@@ -26,14 +26,14 @@ const value = {
   id: 'test-id',
 };
 
-const Template: Story<Args> = ({ context, props }) => {
-  const TypeaheadContext = createTypeaheadContext<TestOption>()
+const Template = <Option extends OptionType>(): Story<Args<Option>> => ({ context, props }) => {
+  const TypeaheadContext = createTypeaheadContext<Option>()
   return <TypeaheadContext.Provider value={{...value, ...context}}>
     <MenuItem {...props} />
   </TypeaheadContext.Provider>
 };
 
-export const Default = Template.bind({});
+export const Default = Template().bind({});
 Default.args = {
   props: {
     children: 'This is a menu item',
diff --git a/src/components/Typeahead/Typeahead.stories.tsx b/src/components/Typeahead/Typeahead.stories.tsx
index 0b69d76f..e8449f97 100644
--- a/src/components/Typeahead/Typeahead.stories.tsx
+++ b/src/components/Typeahead/Typeahead.stories.tsx
@@ -150,7 +150,7 @@ InputGrouping.args = {
   ...defaultProps,
 };
 
-export const Controlled = <Option extends OptionType>(args: TypeaheadComponentProps<Option>) => {
+export const Controlled = <Option extends OptionType = TestOption>(args: TypeaheadComponentProps<Option>) => {
   const [selected, setSelected] = useState(args.selected || []);
 
   return <Typeahead {...args} onChange={setSelected} selected={selected} />;
diff --git a/src/components/Typeahead/Typeahead.tsx b/src/components/Typeahead/Typeahead.tsx
index 56817f62..6419696c 100644
--- a/src/components/Typeahead/Typeahead.tsx
+++ b/src/components/Typeahead/Typeahead.tsx
@@ -321,7 +321,7 @@ class TypeaheadComponent<Option extends OptionType> extends React.Component<Type
   };
 }
 
-const TypeaheadComponentInner = <Option extends OptionType>(props: TypeaheadComponentProps<Option>, ref:  React.ForwardedRef<Typeahead<Option>>) => <TypeaheadComponent {...props} instanceRef={ref} />
+const TypeaheadComponentInner = <Option extends OptionType>(props: TypeaheadComponentProps<Option>, ref: React.ForwardedRef<Typeahead<Option>>) => <TypeaheadComponent {...props} instanceRef={ref} />
 
 const TypeaheadComponentWithRef = forwardRef(TypeaheadComponentInner);
 
diff --git a/src/components/TypeaheadMenu/TypeaheadMenu.stories.tsx b/src/components/TypeaheadMenu/TypeaheadMenu.stories.tsx
index 8dca1047..79043f92 100644
--- a/src/components/TypeaheadMenu/TypeaheadMenu.stories.tsx
+++ b/src/components/TypeaheadMenu/TypeaheadMenu.stories.tsx
@@ -6,7 +6,7 @@ import { Story, Meta } from '@storybook/react';
 import TypeaheadMenu, { TypeaheadMenuProps } from './TypeaheadMenu';
 
 import options, {TestOption} from '../../tests/data';
-import { getOptionProperty } from '../../utils';
+import {OptionType} from "../../types";
 
 export default {
   title: 'Components/TypeaheadMenu',
@@ -20,7 +20,7 @@ const defaultProps = {
   text: '',
 };
 
-const Template: Story<TypeaheadMenuProps<TestOption>> = (args) => (
+const Template = <Option extends OptionType>(): Story<TypeaheadMenuProps<Option>> => (args) => (
   <div style={{ minHeight: '300px' }}>
     <div style={{ position: 'relative' }}>
       <TypeaheadMenu {...args} />
@@ -28,36 +28,33 @@ const Template: Story<TypeaheadMenuProps<TestOption>> = (args) => (
   </div>
 );
 
-export const Default = Template.bind({});
+export const Default = Template().bind({});
 Default.args = {
   ...defaultProps,
 };
 
-export const CustomOption = Template.bind({});
+export const CustomOption = Template().bind({});
 CustomOption.args = {
   ...defaultProps,
   options: [{ customOption: true, name: 'custom option' }],
   text: 'custom option',
 };
 
-export const Pagination = Template.bind({});
+export const Pagination = Template().bind({});
 Pagination.args = {
   ...defaultProps,
   options: [...options.slice(0, 5), { paginationOption: true }],
 };
 
-export const CustomChildren = Template.bind({});
+export const CustomChildren = Template<TestOption>().bind({});
 CustomChildren.args = {
   ...defaultProps,
   renderMenuItemChildren: (option) => {
-    const name = getOptionProperty(option, 'name');
-    const population = getOptionProperty(option, 'population');
-
     return (
       <>
-        <div>{name}</div>
+        <div>{option.name}</div>
         <div>
-          <small>Population: {population.toString()}</small>
+          <small>Population: {option.population.toString()}</small>
         </div>
       </>
     );
diff --git a/src/propTypes.ts b/src/propTypes.ts
index 7213b76d..329986cb 100644
--- a/src/propTypes.ts
+++ b/src/propTypes.ts
@@ -3,7 +3,7 @@ import { Requireable } from 'react';
 
 import { SIZES } from './constants';
 import { isFunction, warn } from './utils';
-import type { InputProps, TypeaheadProps } from './types';
+import type {InputProps, OptionType, TypeaheadProps} from './types';
 
 interface InputPropItem {
   alt: string;
@@ -19,11 +19,11 @@ const INPUT_PROPS_BLACKLIST: InputPropItem[] = [
 
 export const sizeType = PropTypes.oneOf(SIZES);
 
-type Props = TypeaheadProps;
-type PropName = keyof Props;
-type Callback = (
-  props: Props,
-  propName: PropName,
+type Props<Option extends OptionType> = TypeaheadProps<Option>;
+type PropName<Option extends OptionType> = keyof Props<Option>;
+type Callback = <Option extends OptionType>(
+  props: Props<Option>,
+  propName: PropName<Option>,
   componentName: string
 ) => void;
 type Validator = Requireable<unknown>;
@@ -31,8 +31,8 @@ type Validator = Requireable<unknown>;
 /**
  * Allows additional warnings or messaging related to prop validation.
  */
-export function checkPropType(validator: Validator, callback: Callback) {
-  return (props: Props, propName: PropName, componentName: string) => {
+export function checkPropType<Option extends OptionType>(validator: Validator, callback: Callback) {
+  return (props: Props<Option>, propName: PropName<Option>, componentName: string) => {
     PropTypes.checkPropTypes(
       { [propName]: validator },
       props,
@@ -44,7 +44,7 @@ export function checkPropType(validator: Validator, callback: Callback) {
   };
 }
 
-export function caseSensitiveType(props: Props) {
+export function caseSensitiveType<Option extends OptionType>(props: Props<Option>) {
   const { caseSensitive, filterBy } = props;
   warn(
     !caseSensitive || typeof filterBy !== 'function',
@@ -52,8 +52,8 @@ export function caseSensitiveType(props: Props) {
   );
 }
 
-export function deprecated(validator: Validator, reason: string) {
-  return (props: Props, propName: PropName, componentName: string) => {
+export function deprecated<Option extends OptionType>(validator: Validator, reason: string) {
+  return (props: Props<Option>, propName: PropName<Option>, componentName: string) => {
     if (props[propName] != null) {
       warn(false, `The \`${propName}\` prop is deprecated. ${reason}`);
     }
@@ -67,7 +67,7 @@ export function deprecated(validator: Validator, reason: string) {
   };
 }
 
-export function defaultInputValueType(props: Props) {
+export function defaultInputValueType<Option extends OptionType>(props: Props<Option>) {
   const { defaultInputValue, defaultSelected, multiple, selected } = props;
   const name = defaultSelected.length ? 'defaultSelected' : 'selected';
 
@@ -81,7 +81,7 @@ export function defaultInputValueType(props: Props) {
   );
 }
 
-export function defaultSelectedType(props: Props) {
+export function defaultSelectedType<Option extends OptionType>(props: Props<Option>) {
   const { defaultSelected, multiple } = props;
 
   warn(
@@ -92,17 +92,17 @@ export function defaultSelectedType(props: Props) {
   );
 }
 
-export function highlightOnlyResultType({
+export function highlightOnlyResultType<Option extends OptionType>({
   allowNew,
   highlightOnlyResult,
-}: Props) {
+}: Props<Option>) {
   warn(
     !(highlightOnlyResult && allowNew),
     '`highlightOnlyResult` will not work with `allowNew`.'
   );
 }
 
-export function ignoreDiacriticsType(props: Props) {
+export function ignoreDiacriticsType<Option extends OptionType>(props: Props<Option>) {
   const { filterBy, ignoreDiacritics } = props;
   warn(
     ignoreDiacritics || typeof filterBy !== 'function',
@@ -110,7 +110,7 @@ export function ignoreDiacriticsType(props: Props) {
   );
 }
 
-export function inputPropsType({ inputProps }: Props) {
+export function inputPropsType<Option extends OptionType>({ inputProps }: Props<Option>) {
   if (
     !(
       inputProps &&
@@ -130,9 +130,9 @@ export function inputPropsType({ inputProps }: Props) {
   });
 }
 
-export function isRequiredForA11y(
-  props: Props,
-  propName: PropName,
+export function isRequiredForA11y<Option extends OptionType>(
+  props: Props<Option>,
+  propName: PropName<Option>,
   componentName: string
 ) {
   warn(
@@ -142,7 +142,7 @@ export function isRequiredForA11y(
   );
 }
 
-export function labelKeyType({ allowNew, labelKey }: Props) {
+export function labelKeyType<Option extends OptionType>({ allowNew, labelKey }: Props<Option>) {
   warn(
     !(isFunction(labelKey) && allowNew),
     '`labelKey` must be a string when `allowNew={true}`.'
@@ -154,7 +154,7 @@ export const optionType = PropTypes.oneOfType([
   PropTypes.string,
 ]);
 
-export function selectedType({ multiple, onChange, selected }: Props) {
+export function selectedType<Option extends OptionType>({ multiple, onChange, selected }: Props<Option>) {
   warn(
     multiple || !selected || selected.length <= 1,
     'You are passing multiple options to the `selected` prop of a Typeahead ' +
diff --git a/src/utils/getInputProps.ts b/src/utils/getInputProps.ts
index fb8bc586..fec9b706 100644
--- a/src/utils/getInputProps.ts
+++ b/src/utils/getInputProps.ts
@@ -2,10 +2,10 @@ import cx from 'classnames';
 
 import getMenuItemId from './getMenuItemId';
 import hasOwnProperty from './hasOwnProperty';
-import { TypeaheadManagerProps } from '../types';
+import {OptionType, TypeaheadManagerProps} from '../types';
 
-type Args = Pick<
-  TypeaheadManagerProps,
+type Args<Option extends OptionType> = Pick<
+  TypeaheadManagerProps<Option>,
   | 'activeIndex'
   | 'id'
   | 'isFocused'
@@ -17,7 +17,7 @@ type Args = Pick<
 >;
 
 const getInputProps =
-  ({
+  <Option extends OptionType>({
     activeIndex,
     id,
     isFocused,
@@ -27,7 +27,7 @@ const getInputProps =
     onFocus,
     placeholder,
     ...props
-  }: Args) =>
+  }: Args<Option>) =>
   (inputProps = {}) => {
     const className = hasOwnProperty(inputProps, 'className')
       ? String(inputProps.className)

From 700abf2b4585a8f887bdd685ffb1e120024113bc Mon Sep 17 00:00:00 2001
From: Hans Aarne Liblik <Hans.Liblik@gmail.com>
Date: Thu, 16 Mar 2023 19:16:43 +0200
Subject: [PATCH 5/6] Add generic option type

---
 example/package.json |   2 +-
 example/yarn.lock    | 154 +++++++++++++++++++++++++++----------------
 2 files changed, 100 insertions(+), 56 deletions(-)

diff --git a/example/package.json b/example/package.json
index acc0fb97..da260ee5 100644
--- a/example/package.json
+++ b/example/package.json
@@ -30,6 +30,6 @@
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.3",
     "webpack": "^5.76.0",
-    "webpack-cli": "^5.0.1"
+    "webpack-cli": "^4.9.2"
   }
 }
diff --git a/example/yarn.lock b/example/yarn.lock
index b0650624..162dc7d4 100644
--- a/example/yarn.lock
+++ b/example/yarn.lock
@@ -1393,20 +1393,22 @@
     "@webassemblyjs/ast" "1.11.1"
     "@xtuc/long" "4.2.2"
 
-"@webpack-cli/configtest@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-2.0.1.tgz#a69720f6c9bad6aef54a8fa6ba9c3533e7ef4c7f"
-  integrity sha512-njsdJXJSiS2iNbQVS0eT8A/KPnmyH4pv1APj2K0d1wrZcBLw+yppxOy4CGqa0OxDJkzfL/XELDhD8rocnIwB5A==
+"@webpack-cli/configtest@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-1.1.1.tgz#9f53b1b7946a6efc2a749095a4f450e2932e8356"
+  integrity sha512-1FBc1f9G4P/AxMqIgfZgeOTuRnwZMten8E7zap5zgpPInnCrP8D4Q81+4CWIch8i/Nf7nXjP0v6CjjbHOrXhKg==
 
-"@webpack-cli/info@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-2.0.1.tgz#eed745799c910d20081e06e5177c2b2569f166c0"
-  integrity sha512-fE1UEWTwsAxRhrJNikE7v4EotYflkEhBL7EbajfkPlf6E37/2QshOy/D48Mw8G5XMFlQtS6YV42vtbG9zBpIQA==
+"@webpack-cli/info@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-1.4.1.tgz#2360ea1710cbbb97ff156a3f0f24556e0fc1ebea"
+  integrity sha512-PKVGmazEq3oAo46Q63tpMr4HipI3OPfP7LiNOEJg963RMgT0rqheag28NCML0o3GIzA3DmxP1ZIAv9oTX1CUIA==
+  dependencies:
+    envinfo "^7.7.3"
 
-"@webpack-cli/serve@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-2.0.1.tgz#34bdc31727a1889198855913db2f270ace6d7bf8"
-  integrity sha512-0G7tNyS+yW8TdgHwZKlDWYXFA6OJQnoLCQvYKkQP0Q2X205PSQ6RNUj0M+1OB/9gRQaUZ/ccYfaxd0nhaWKfjw==
+"@webpack-cli/serve@^1.6.1":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.6.1.tgz#0de2875ac31b46b6c5bb1ae0a7d7f0ba5678dffe"
+  integrity sha512-gNGTiTrjEVQ0OcVnzsRSqTxaBSr+dmTfm+qJsCDluky8uhdLWep7Gcr62QsAKHTMxjCS/8nEITsmFAhfIx+QSw==
 
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
@@ -1585,10 +1587,10 @@ commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
-commander@^9.4.1:
-  version "9.5.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
-  integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
+commander@^7.0.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
 
 commondir@^1.0.1:
   version "1.0.1"
@@ -1756,6 +1758,21 @@ events@^3.2.0:
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
 
+execa@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
+  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.0"
+    human-signals "^2.1.0"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.1"
+    onetime "^5.1.2"
+    signal-exit "^3.0.3"
+    strip-final-newline "^2.0.0"
+
 fast-deep-equal@^3.1.1:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -1807,6 +1824,11 @@ get-intrinsic@^1.0.2:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
+get-stream@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
 glob-to-regexp@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
@@ -1844,6 +1866,11 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+human-signals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
+  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
+
 icss-utils@^5.0.0, icss-utils@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
@@ -1857,10 +1884,10 @@ import-local@^3.0.2:
     pkg-dir "^4.2.0"
     resolve-cwd "^3.0.0"
 
-interpret@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-3.1.1.tgz#5be0ceed67ca79c6c4bc5cf0d7ee843dcea110c4"
-  integrity sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==
+interpret@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.2.0.tgz#1a78a0b5965c40a5416d007ad6f50ad27c417df9"
+  integrity sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==
 
 invariant@^2.2.4:
   version "2.2.4"
@@ -1876,13 +1903,6 @@ is-core-module@^2.8.1:
   dependencies:
     has "^1.0.3"
 
-is-core-module@^2.9.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144"
-  integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==
-  dependencies:
-    has "^1.0.3"
-
 is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@@ -1890,6 +1910,11 @@ is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
+is-stream@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
+  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -2018,6 +2043,11 @@ mime-types@^2.1.27:
   dependencies:
     mime-db "1.52.0"
 
+mimic-fn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
+  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@@ -2038,6 +2068,13 @@ node-releases@^2.0.3:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.5.tgz#280ed5bc3eba0d96ce44897d8aee478bfb3d9666"
   integrity sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q==
 
+npm-run-path@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
+  dependencies:
+    path-key "^3.0.0"
+
 object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -2058,6 +2095,13 @@ object.assign@^4.1.0:
     has-symbols "^1.0.1"
     object-keys "^1.1.1"
 
+onetime@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
 p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
@@ -2082,7 +2126,7 @@ path-exists@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
   integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
 
-path-key@^3.1.0:
+path-key@^3.0.0, path-key@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
@@ -2249,12 +2293,12 @@ react-waypoint@^10.1.0:
     prop-types "^15.0.0"
     react-is "^17.0.1"
 
-rechoir@^0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.8.0.tgz#49f866e0d32146142da3ad8f0eff352b3215ff22"
-  integrity sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==
+rechoir@^0.7.0:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.7.1.tgz#9478a96a1ca135b5e88fc027f03ee92d6c645686"
+  integrity sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==
   dependencies:
-    resolve "^1.20.0"
+    resolve "^1.9.0"
 
 regenerate-unicode-properties@^10.0.1:
   version "10.0.1"
@@ -2316,7 +2360,7 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
-resolve@^1.14.2:
+resolve@^1.14.2, resolve@^1.9.0:
   version "1.22.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
   integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
@@ -2325,15 +2369,6 @@ resolve@^1.14.2:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^1.20.0:
-  version "1.22.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
-  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
-  dependencies:
-    is-core-module "^2.9.0"
-    path-parse "^1.0.7"
-    supports-preserve-symlinks-flag "^1.0.0"
-
 safe-buffer@^5.1.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
@@ -2413,6 +2448,11 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
+signal-exit@^3.0.3:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
+  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
+
 source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
@@ -2436,6 +2476,11 @@ source-map@^0.6.0:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+strip-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+
 style-loader@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
@@ -2551,23 +2596,22 @@ watchpack@^2.4.0:
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.1.2"
 
-webpack-cli@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-5.0.1.tgz#95fc0495ac4065e9423a722dec9175560b6f2d9a"
-  integrity sha512-S3KVAyfwUqr0Mo/ur3NzIp6jnerNpo7GUO6so51mxLi1spqsA17YcMXy0WOIJtBSnj748lthxC6XLbNKh/ZC+A==
+webpack-cli@^4.9.2:
+  version "4.9.2"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-4.9.2.tgz#77c1adaea020c3f9e2db8aad8ea78d235c83659d"
+  integrity sha512-m3/AACnBBzK/kMTcxWHcZFPrw/eQuY4Df1TxvIWfWM2x7mRqBQCqKEd96oCUa9jkapLBaFfRce33eGDb4Pr7YQ==
   dependencies:
     "@discoveryjs/json-ext" "^0.5.0"
-    "@webpack-cli/configtest" "^2.0.1"
-    "@webpack-cli/info" "^2.0.1"
-    "@webpack-cli/serve" "^2.0.1"
+    "@webpack-cli/configtest" "^1.1.1"
+    "@webpack-cli/info" "^1.4.1"
+    "@webpack-cli/serve" "^1.6.1"
     colorette "^2.0.14"
-    commander "^9.4.1"
-    cross-spawn "^7.0.3"
-    envinfo "^7.7.3"
+    commander "^7.0.0"
+    execa "^5.0.0"
     fastest-levenshtein "^1.0.12"
     import-local "^3.0.2"
-    interpret "^3.1.1"
-    rechoir "^0.8.0"
+    interpret "^2.2.0"
+    rechoir "^0.7.0"
     webpack-merge "^5.7.3"
 
 webpack-merge@^5.7.3:

From 9c584b3f6782557314d994f633917adc64646a2b Mon Sep 17 00:00:00 2001
From: Hans Aarne Liblik <Hans.Liblik@gmail.com>
Date: Fri, 19 May 2023 15:19:31 +0300
Subject: [PATCH 6/6] Rebase fixes and forwardRef generics

---
 .../AsyncTypeahead/AsyncTypeahead.test.tsx    |  5 +++--
 .../AsyncTypeahead/AsyncTypeahead.tsx         |  8 ++++---
 .../Typeahead/Typeahead.stories.tsx           |  2 +-
 src/components/Typeahead/Typeahead.tsx        | 21 +++++--------------
 src/utils/nodash.test.ts                      |  7 +++----
 5 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/src/components/AsyncTypeahead/AsyncTypeahead.test.tsx b/src/components/AsyncTypeahead/AsyncTypeahead.test.tsx
index 256bdf9e..70b26e69 100644
--- a/src/components/AsyncTypeahead/AsyncTypeahead.test.tsx
+++ b/src/components/AsyncTypeahead/AsyncTypeahead.test.tsx
@@ -11,6 +11,7 @@ import {
   render,
   userEvent,
 } from '../../tests/helpers';
+import {TestOption} from "../../tests/data";
 
 const TestComponent = (props) => {
   const [isLoading, setIsLoading] = useState(false);
@@ -37,7 +38,7 @@ const TestComponent = (props) => {
   );
 };
 
-describe('<AsyncTypeahead>', () => {
+describe('<AsyncTyThere isnt peahead>', () => {
   it('displays a search prompt', async () => {
     const promptText = 'Prompt text';
     render(<TestComponent promptText={promptText} />);
@@ -270,7 +271,7 @@ describe('<AsyncTypeahead>', () => {
   });
 
   it('exposes the typeahead instance and public methods', () => {
-    const ref = createRef<Typeahead>();
+    const ref = createRef<Typeahead<TestOption>>();
 
     render(
       <AsyncTypeahead
diff --git a/src/components/AsyncTypeahead/AsyncTypeahead.tsx b/src/components/AsyncTypeahead/AsyncTypeahead.tsx
index bf9b1793..46c17df1 100644
--- a/src/components/AsyncTypeahead/AsyncTypeahead.tsx
+++ b/src/components/AsyncTypeahead/AsyncTypeahead.tsx
@@ -1,10 +1,12 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, ReactElement, Ref } from 'react';
 import { useAsync, UseAsyncProps } from '../../behaviors/async';
 import TypeaheadComponent from '../Typeahead';
 import Typeahead from '../../core/Typeahead';
+import { OptionType } from "../../types";
 
-const AsyncTypeahead = forwardRef<Typeahead, UseAsyncProps>((props, ref) => (
+// Generics are handled with `as` casting
+const AsyncTypeahead = forwardRef<Typeahead<OptionType>, UseAsyncProps<OptionType>>((props, ref) => (
   <TypeaheadComponent {...useAsync(props)} ref={ref} />
-));
+))  as <Option extends OptionType>(p: UseAsyncProps<Option> & { ref?: Ref<Typeahead<Option>> }) => ReactElement;
 
 export default AsyncTypeahead;
diff --git a/src/components/Typeahead/Typeahead.stories.tsx b/src/components/Typeahead/Typeahead.stories.tsx
index e8449f97..fc234678 100644
--- a/src/components/Typeahead/Typeahead.stories.tsx
+++ b/src/components/Typeahead/Typeahead.stories.tsx
@@ -159,7 +159,7 @@ Controlled.args = {
   ...defaultProps,
 };
 
-export const InputValidation = (args: TypeaheadComponentProps) => {
+export const InputValidation = <Option extends OptionType = TestOption>(args: TypeaheadComponentProps<Option>) => {
   let feedback;
   if (args.isValid) {
     feedback = 'Looks good!';
diff --git a/src/components/Typeahead/Typeahead.tsx b/src/components/Typeahead/Typeahead.tsx
index 6419696c..1af8739e 100644
--- a/src/components/Typeahead/Typeahead.tsx
+++ b/src/components/Typeahead/Typeahead.tsx
@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { CSSProperties, forwardRef, ReactNode, Ref } from 'react';
+import React, { CSSProperties, forwardRef, ReactElement, ReactNode, Ref } from 'react';
 
 import Typeahead from '../../core/Typeahead';
 
@@ -321,18 +321,7 @@ class TypeaheadComponent<Option extends OptionType> extends React.Component<Type
   };
 }
 
-const TypeaheadComponentInner = <Option extends OptionType>(props: TypeaheadComponentProps<Option>, ref: React.ForwardedRef<Typeahead<Option>>) => <TypeaheadComponent {...props} instanceRef={ref} />
-
-const TypeaheadComponentWithRef = forwardRef(TypeaheadComponentInner);
-
-type TypeaheadComponentWithRefProps<Option extends OptionType> = TypeaheadComponentProps<Option> & {
-  ref?: React.Ref<Typeahead<Option>>;
-};
-
-export default function TypeaheadComp<Option extends OptionType>({
-                                   ref,
-                                   ...props
-                                 }: TypeaheadComponentWithRefProps<Option>) {
-  // @ts-ignore
-  return <TypeaheadComponentWithRef ref={ref} {...props} />;
-}
+// Generics are handled with `as` casting
+export default forwardRef<Typeahead<OptionType>, TypeaheadComponentProps<OptionType>>((props, ref) =>
+    <TypeaheadComponent instanceRef={ref} {...props}  />
+) as <Option extends OptionType>(p: TypeaheadComponentProps<Option> & { ref?: React.Ref<Typeahead<Option>> }) => ReactElement
diff --git a/src/utils/nodash.test.ts b/src/utils/nodash.test.ts
index f6c51d47..cf2b1406 100644
--- a/src/utils/nodash.test.ts
+++ b/src/utils/nodash.test.ts
@@ -37,17 +37,16 @@ describe('nodash', () => {
   });
 
   test('once', () =>{
-    const onceFn = (a: number) => a;
+    const myFunc = jest.fn((a: number) => a);
 
-    const onlyOnce = once(onceFn)
+    const onlyOnce = once(myFunc)
 
     let result = -100;
     for (let i = 0; i < 100; i++) {
       result = onlyOnce(i)
     }
 
-    expect(fn).toBeCalledTimes(1)
-    expect(fn).toBeCalledWith(0)
+    expect(myFunc).toBeCalledTimes(1)
     expect(result).toBe(0)
   })
 });