Virtualize dropdown options list

package.json

@@ -99,6 +99,7 @@
     "nanoid": "^3.1.20",
     "polished": "^4.1.1",
     "react-portal": "^4.2.1",
+    "react-virtuoso": "^1.10.5",
     "src": "^1.1.2"
   },
   "peerDependencies": {

src/components/Dropdown/Dropdown.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import { Story, Meta } from '@storybook/react';
 import { address } from 'faker';
@@ -11,33 +11,49 @@ import Label from '../Label';
 import { colors } from '../../index';
 
 const generateCityList = (amount: number): OptionProps[] => {
-  const finalData = [];
+  const citySet = new Set<string>();
+  const cityOptions: OptionProps[] = [];
 
   for (let i = 0; i < amount; i += 1) {
-    const item = address.city();
-    finalData.push({
-      id: item.toLowerCase(),
-      optionValue: item,
+    let city = address.city();
+    while (citySet.has(city)) {
+      city = address.city();
+    }
+    citySet.add(city);
+    cityOptions.push({
+      id: city.toLowerCase(),
+      optionValue: city,
     });
   }
 
-  return finalData;
+  return cityOptions;
 };
-const cities = generateCityList(50);
 
-type BasicProps = DropdownProps & { clearable: boolean };
+type BasicProps = DropdownProps & { clearable: boolean; numCities: number };
 
-export const Basic: Story<BasicProps> = ({ clearable, onClear, onSelect }: BasicProps) => {
+export const Basic: Story<BasicProps> = ({
+  clearable,
+  numCities,
+  onClear,
+  onSelect,
+  ...args
+}: BasicProps) => {
+  const [cities, setCities] = useState<OptionProps[]>([]);
   const [values, setValues] = useState<(string | number)[] | undefined>();
 
+  useEffect(() => {
+    setCities(generateCityList(numCities));
+  }, [numCities]);
+
   return (
     <Label labelText="City" htmlFor="cities-list">
       <Dropdown
+        {...args}
         name="cities-list"
         onClear={clearable ? onClear : undefined}
         onSelect={(selected?: Array<string | number>) => {
           setValues(selected);
-          return onSelect();
+          return onSelect(selected);
         }}
         options={cities}
         values={values}
@@ -55,6 +71,8 @@ Basic.args = {
   variant: variants.fill,
   optionsVariant: variants.outline,
   valueVariant: variants.text,
+  numCities: 200,
+  virtualizeOptions: true,
 };
 
 const teaOptions = [
@@ -98,7 +116,7 @@ const teaOptions = [
   },
 ];
 
-export const Icons: Story = args => {
+export const Icons: Story<DropdownProps> = ({ onSelect, ...args }: DropdownProps) => {
   const [values, setValues] = useState<(string | number)[] | undefined>();
   return (
     <Label labelText="How strong do you like your tea?" htmlFor="tea-rank">
@@ -107,7 +125,7 @@ export const Icons: Story = args => {
         name="tea-rank"
         onSelect={(selected?: Array<string | number>) => {
           setValues(selected);
-          return args.onSelect();
+          return onSelect(selected);
         }}
         options={teaOptions}
         values={values}
@@ -117,6 +135,7 @@ export const Icons: Story = args => {
 };
 Icons.args = {
   ...Basic.args,
+  placeholder: 'Choose a rating...',
   color: '#0A7700',
   elevation: 1,
 };