Add generic option type

Author: HansAarneLiblik

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) => (

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';
 
@@ -115,7 +116,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) => {
@@ -128,7 +129,7 @@ describe('<Typeahead>', () => {
   });
 
   describe('behaviors when selections are passed in', () => {
-    let selected: { name: string }[];
+    let selected: TestOption[];
     let selectedText: string;
 
     beforeEach(() => {
@@ -238,7 +239,7 @@ describe('<Typeahead>', () => {
       { disabled: true, name: 'boo' },
       { name: 'baz' },
       { disabled: true, name: 'bro' },
-    ];
+    ] as TestOption[];
 
     render(<Default options={options} />);
     getInput().focus();
@@ -412,7 +413,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);
@@ -464,7 +465,7 @@ describe('<Typeahead>', () => {
       render(
         <Controlled selected={states.slice(0, 1)}>
           {(state) => {
-            selected = state.selected;
+            selected = state.selected as TestOption[];
           }}
         </Controlled>
       );
@@ -485,7 +486,7 @@ describe('<Typeahead>', () => {
 
   describe('`highlightOnlyResult` behavior', () => {
     let onChange: jest.Mock;
-    let selected: Option[];
+    let selected: TestOption[];
 
     beforeEach(() => {
       onChange = jest.fn((s) => (selected = [s]));
@@ -542,16 +543,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}
         />
       );
 
@@ -1011,7 +1014,7 @@ describe('<Typeahead>', () => {
       <Default
         renderMenuItemChildren={
           // Render the capital instead of the state name.
-          (o) => o.capital
+          (o) => <span>{o.capital}</span>
         }
       />
     );
@@ -1121,15 +1124,16 @@ 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(
         <AllowNew
           emptyLabel={emptyLabel}
           newSelectionPrefix={newSelectionPrefix}
           onChange={(s) => {
-            selected = s;
+            selected = s as TestOptionWithId[];
           }}
         />
       );
@@ -1211,7 +1215,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');
@@ -1223,7 +1227,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();
@@ -1237,7 +1241,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)} />
     );
@@ -1256,13 +1260,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();
@@ -1274,7 +1278,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();
@@ -1288,7 +1292,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();
     });
@@ -1474,7 +1478,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
@@ -1497,8 +1501,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';

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

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-') };
     }