Add generic option type

Author: HansAarneLiblik

src/behaviors/async.tsx

@@ -18,7 +18,7 @@ import { optionType } from '../propTypes';
 import { getDisplayName, isFunction } 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,

src/behaviors/item.tsx

@@ -14,7 +14,7 @@ import { useTypeaheadContext } from '../core/Context';
 import { getDisplayName, getMenuItemId, preventInputBlur } from '../utils';
 
 import { optionType } from '../propTypes';
-import { Option } from '../types';
+import { OptionType } from '../types';
 
 const propTypes = {
   option: optionType.isRequired,
@@ -23,7 +23,7 @@ const propTypes = {
 
 export interface UseItemProps<T> extends HTMLProps<T> {
   onClick?: MouseEventHandler<T>;
-  option: Option;
+  option: OptionType;
   position: number;
 }
 

src/behaviors/token.tsx

@@ -14,15 +14,15 @@ import { useRootClose } from 'react-overlays';
 import { getDisplayName, isFunction } 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);
 

src/components/MenuItem/MenuItem.stories.tsx

@@ -9,14 +9,15 @@ import {
   TypeaheadContext,
   TypeaheadContextType,
 } from '../../core/Context';
+import {OptionType} from "../../types";
 
 export default {
   title: 'Components/MenuItem/MenuItem',
   component: MenuItem,
 } as Meta;
 
 interface Args {
-  context: Partial<TypeaheadContextType>;
+  context: Partial<TypeaheadContextType<OptionType>>;
   props: MenuItemProps;
 }
 

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 = {

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>;
 

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} />;

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}
@@ -115,7 +115,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) => {
@@ -410,7 +410,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;
@@ -458,7 +458,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(
@@ -1121,7 +1121,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(