Merge pull request #296 from dawsonbooth/185-dropdown-search

#185 Add searching to dropdown

package.json

@@ -95,6 +95,7 @@
   "dependencies": {
     "@mdi/js": "^5.9.55",
     "@mdi/react": "^1.4.0",
+    "fuse.js": "^6.4.6",
     "lodash.debounce": "^4.0.8",
     "nanoid": "^3.1.20",
     "polished": "^4.1.1",

src/components/Dropdown/Dropdown.stories.tsx

@@ -36,6 +36,10 @@ export const Basic: Story<BasicProps> = ({
   numCities,
   onClear,
   onSelect,
+  searchable,
+  searchFiltersOptions,
+  onSearchChange,
+  onDebouncedSearchChange,
   ...args
 }: BasicProps) => {
   const [cities, setCities] = useState<OptionProps[]>([]);
@@ -57,25 +61,31 @@ export const Basic: Story<BasicProps> = ({
         }}
         options={cities}
         values={values}
+        searchable={searchable}
+        searchFiltersOptions={searchFiltersOptions}
+        onSearchChange={onSearchChange}
+        onDebouncedSearchChange={onDebouncedSearchChange}
       />
     </Label>
   );
 };
 Basic.args = {
   color: colors.primaryDark,
   elevation: 0,
-  multi: false,
+  multi: true,
   placeholder: 'Choose a city...',
-  clearable: false,
+  clearable: true,
   rememberScrollPosition: true,
   variant: variants.fill,
   optionsVariant: variants.outline,
-  valueVariant: variants.text,
+  valueVariant: variants.outline,
   shouldStayInView: true,
   intersectionObserverPrecision: 100,
   intersectionThreshold: 1.0,
   numCities: 200,
   virtualizeOptions: true,
+  searchable: true,
+  searchFiltersOptions: true,
 };
 
 const teaOptions = [
@@ -119,7 +129,9 @@ const teaOptions = [
   },
 ];
 
-export const Icons: Story<DropdownProps> = ({ onSelect, ...args }: DropdownProps) => {
+type IconsProps = DropdownProps & { clearable: boolean };
+
+export const Icons: Story<IconsProps> = ({ onSelect, ...args }: IconsProps) => {
   const [values, setValues] = useState<(string | number)[] | undefined>();
   return (
     <Label labelText="How strong do you like your tea?" htmlFor="tea-rank">
@@ -138,9 +150,13 @@ export const Icons: Story<DropdownProps> = ({ onSelect, ...args }: DropdownProps
 };
 Icons.args = {
   ...Basic.args,
+  multi: false,
   placeholder: 'Choose a rating...',
+  clearable: false,
   color: '#0A7700',
+  valueVariant: variants.text,
   elevation: 1,
+  searchable: false,
 };
 
 export default {