Add generic option type

HansAarneLiblik · HansAarneLiblik · commit f63b8360fe18 · 2023-05-19T12:37:05.000+03:00
diff --git 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
@@ -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
@@ -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
@@ -5,19 +5,19 @@ 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',
   component: MenuItem,
 } 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,15 +49,15 @@ 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,
     showMenu: true,
   };
 }
 
-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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/src/utils/getOptionLabel.ts b/src/utils/getOptionLabel.ts
diff --git a/src/utils/getOptionProperty.ts b/src/utils/getOptionProperty.ts
diff --git a/src/utils/getUpdatedActiveIndex.ts b/src/utils/getUpdatedActiveIndex.ts
diff --git a/src/utils/nodash.test.ts b/src/utils/nodash.test.ts
diff --git a/src/utils/nodash.ts b/src/utils/nodash.ts
diff --git a/src/utils/validateSelectedPropChange.ts b/src/utils/validateSelectedPropChange.ts

Original file line number	Diff line number	Diff line change
`@@ -89,7 +89,7 @@ export function useToken<T extends HTMLElement, Option extends OptionType>({`
`89`	`89`	`}`
`90`	`90`
`91`	`91`	`/* istanbul ignore next */`
`92`		`-export function withToken<T extends UseTokenProps<HTMLElement>>(`
	`92`	`+export function withToken<Option extends OptionType, T extends UseTokenProps<HTMLElement, Option>>(`
`93`	`93`	`Component: ComponentType<T>`
`94`	`94`	`) {`
`95`	`95`	`warn(`
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@ import cx from 'classnames';`
`2`	`2`	`import React, { forwardRef, HTMLAttributes, MouseEvent } from 'react';`
`3`	`3`
`4`	`4`	`import { useItem, UseItemProps } from '../../behaviors/item';`
	`5`	`+import {OptionType} from "../../types";`
`5`	`6`
`6`	`7`	`export interface BaseMenuItemProps extends HTMLAttributes<HTMLAnchorElement> {`
`7`	`8`	`active?: boolean;`
`@@ -27,8 +28,8 @@ export const BaseMenuItem = forwardRef<HTMLAnchorElement, BaseMenuItemProps>(`
`27`	`28`	`}`
`28`	`29`	`);`
`29`	`30`
`30`		`-export type MenuItemProps = UseItemProps<HTMLAnchorElement>;`
	`31`	`+export type MenuItemProps<Option extends OptionType> = UseItemProps<HTMLAnchorElement, Option>;`
`31`	`32`
`32`		`-export default function MenuItem(props: MenuItemProps) {`
	`33`	`+export default function MenuItem<Option extends OptionType>(props: MenuItemProps<Option>) {`
`33`	`34`	`return <BaseMenuItem {...useItem(props)} />;`
`34`	`35`	`}`