fix(select): Create a generic Id type for Option interface

src/select/typeahead/util/typeaheadSelectUtils.ts

@@ -9,7 +9,8 @@ function filterOptionsByKeyword<T extends TypeaheadSelectOption = TypeaheadSelec
   if (keyword) {
     filteredOptions = options.filter(
       (option) =>
-        !option.title || option.title.toLowerCase().includes(keyword.toLowerCase())
+        typeof option.title === "string" &&
+        option.title.toLowerCase().includes(keyword.toLowerCase())
     );
   }
 

src/select/util/selectTypes.ts

@@ -1,13 +1,19 @@
 import React from "react";
 
-interface Option {
-  id: string;
+interface Option<Id = string> {
+  id: Id;
+  title: React.ReactNode;
   isDisabled?: boolean;
 }
 
-interface TypeaheadSelectOption extends Option {
-  title: string;
-}
+// TypeaheadSelectOption is intentionally empty. It happens not
+// to have more properties than Option, but this may
+// change in the future, and it helps to have a TypeaheadSelectOption
+// interface that people can use. Therefore the no-empty-interface is disabled
+// rule for this declaration:
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface TypeaheadSelectOption extends Option {}
 
 type SelectItemElement = HTMLLIElement | HTMLDivElement;
 

stories/11-Typeahead.stories.tsx

@@ -7,6 +7,7 @@ import StoryFragment from "./utils/StoryFragment";
 import FormField from "../src/form/field/FormField";
 import TypeaheadSelect from "../src/select/typeahead/TypeaheadSelect";
 import {TypeaheadSelectOption} from "../src/select/util/selectTypes";
+import {Language} from "./utils/constants/select/selectStoryConstants";
 
 const simulateAPICall = (timeout = 1000) =>
   new Promise((resolve) => setTimeout(resolve, timeout));
@@ -26,11 +27,11 @@ storiesOf("Typeahead", module).add("Typeahead", () => {
         id: "spanish",
         title: "Spanish"
       }
-    ],
+    ] as TypeaheadSelectOption<Language>[],
     thirdOptions: [],
-    selectedOptions: [] as TypeaheadSelectOption[],
-    secondSelectedOptions: [] as TypeaheadSelectOption[],
-    thirdSelectedOptions: [] as TypeaheadSelectOption[],
+    selectedOptions: [] as TypeaheadSelectOption<Language>[],
+    secondSelectedOptions: [] as TypeaheadSelectOption<Language>[],
+    thirdSelectedOptions: [] as TypeaheadSelectOption<Language>[],
     areOptionsFetching: false,
     keyword: ""
   };

stories/utils/constants/select/selectStoryConstants.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import {Option} from "../../../../src/select/util/selectTypes";
 
 function CoinDropdownOptionCustomContent({
   id,
@@ -21,6 +22,13 @@ function CoinDropdownOptionCustomContent({
   );
 }
 
+export enum Language {
+  TURKISH = "turkish",
+  ENGLISH = "english",
+  SPANISH = "spanish",
+  FRENCH = "french"
+}
+
 const initialState = {
   basic: {
     options: [
@@ -42,7 +50,7 @@ const initialState = {
         isDisabled: true
       }
     ],
-    selectedOption: null as {id: string; isDisabled?: boolean; title: string} | null
+    selectedOption: null as Option<Language> | null
   },
   multiSelect: {
     options: [
@@ -63,8 +71,8 @@ const initialState = {
         title: "French - Disabled",
         isDisabled: true
       }
-    ] as {id: string; isDisabled?: boolean; title: string}[],
-    value: [] as {id: string; isDisabled?: boolean; title: string}[]
+    ] as Option<Language>[],
+    value: [] as Option<Language>[]
   },
   withSubtitle: {
     options: [
@@ -84,7 +92,7 @@ const initialState = {
         subtitle: "JavaScript"
       }
     ],
-    selectedOption: null as {id: string; isDisabled?: boolean; subtitle: string} | null
+    selectedOption: null as Option | null
   },
   withCustomContent: {
     options: [
@@ -127,11 +135,7 @@ const initialState = {
         )
       }
     ],
-    selectedOption: null as {
-      id: string;
-      title?: string;
-      CustomContent: JSX.Element;
-    } | null
+    selectedOption: null as Option | null
   }
 };
 

stories/utils/selectStoryUtils.ts

@@ -1,9 +1,10 @@
-import {initialState} from "./constants/select/selectStoryConstants";
+import {Option} from "../../src/select/util/selectTypes";
+import {initialState, Language} from "./constants/select/selectStoryConstants";
 
 function handleMultiSelect(
   state: typeof initialState.multiSelect,
   setState: React.Dispatch<React.SetStateAction<typeof initialState.multiSelect>>,
-  option: {id: string; isDisabled?: boolean; title: string}
+  option: Option<Language>
 ) {
   const isSelected = state.value.findIndex((opt) => opt.id === option.id) > -1;