feat: DH-19683: Multi-select combobox component (#2685)

Add multi-select combobox component. Tested with (and required for)
deephaven/deephaven-plugins#1349

---------

Co-authored-by: gzh2003 <germainzhanghoule@gmail.com>
Co-authored-by: Mike Bender <mikebender@deephaven.io>

Author: 3 people

package-lock.json

@@ -7,6 +7,8 @@ import {
   Icon,
   Item,
   type ItemKey,
+  type ItemSelection,
+  MultiSelect,
   PICKER_ITEM_HEIGHTS,
   PICKER_TOP_OFFSET,
   Picker,
@@ -96,6 +98,28 @@ export function Pickers(): JSX.Element {
     setSelectedKey(key);
   }, []);
 
+  const [multiSelectedKeys, setMultiSelectedKeys] = useState<
+    'all' | Iterable<ItemKey>
+  >([String(items[0].key), String(items[1].key), String(items[2].key)]);
+
+  const onMultiSelectChange = useCallback((keys: ItemSelection): void => {
+    setMultiSelectedKeys(keys);
+  }, []);
+
+  const [filteredMultiItems, setFilteredMultiItems] = useState(itemsWithIcons);
+
+  const onMultiSearch = useCallback(
+    (searchText: string) =>
+      setFilteredMultiItems(
+        searchText === ''
+          ? itemsWithIcons
+          : itemsWithIcons.filter(
+              ({ item }) => item?.textValue?.includes(searchText)
+            )
+      ),
+    []
+  );
+
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
     <SampleSection name="pickers">
@@ -164,11 +188,63 @@ export function Pickers(): JSX.Element {
           );
         })}
 
+        <Flex direction="row" gap={14}>
+          <MultiSelect
+            label="MultiSelect (Single Child)"
+            tooltip={{ placement: 'bottom-end' }}
+          >
+            <Item textValue="Aaa">Aaa</Item>
+          </MultiSelect>
+          <MultiSelect
+            label="MultiSelect (Mixed Children Types)"
+            defaultSelectedKeys={['999']}
+            tooltip
+          >
+            {mixedItemsWithIconsNoDescriptions}
+          </MultiSelect>
+          <MultiSelect label="MultiSelect (Sections)" tooltip>
+            {'String 1'}
+            {'String 2'}
+            {'String 3'}
+            <Section title="Section">
+              <Item textValue="Item Aaa">Item Aaa</Item>
+              <Item textValue="Item Bbb">Item Bbb</Item>
+              <Item textValue="Complex Ccc">
+                <PersonIcon />
+                <Text>Complex Ccc</Text>
+              </Item>
+            </Section>
+            <Section key="Key B">
+              <Item textValue="Item Ddd">Item Ddd</Item>
+              <Item textValue="Item Eee">Item Eee</Item>
+              <Item textValue="Complex Fff">
+                <PersonIcon />
+                <Text>Complex Fff</Text>
+              </Item>
+              <Item textValue="Ggg">
+                <PersonIcon />
+                <Text>Label</Text>
+                <Text slot="description">Description</Text>
+              </Item>
+              <Item textValue="Hhh">
+                <PersonIcon />
+                <Text>Label that causes overflow</Text>
+                <Text slot="description">Description that causes overflow</Text>
+              </Item>
+            </Section>
+            <Section title="Section A">{itemElementsA}</Section>
+            <Section title="Section B">{itemElementsB}</Section>
+            <Section key="Section C">{itemElementsC}</Section>
+            <Section key="Section D">{itemElementsD}</Section>
+            <Section title="Section E">{itemElementsE}</Section>
+          </MultiSelect>
+        </Flex>
+
         <Checkbox
           checked={showIcons}
           onChange={e => setShowIcons(e.currentTarget.checked)}
         >
-          Show Ions
+          Show Icons
         </Checkbox>
 
         <Flex direction="row" gap={14}>
@@ -191,6 +267,21 @@ export function Pickers(): JSX.Element {
             errorMessage="Please select an item."
             onInputChange={onSearch}
           />
+          <MultiSelect
+            label="MultiSelect (Controlled)"
+            selectedKeys={multiSelectedKeys}
+            onChange={onMultiSelectChange}
+            onSearchTextChange={onMultiSearch}
+          >
+            {filteredMultiItems.map(({ key, item }) => (
+              <Item
+                key={String(key)}
+                textValue={item?.textValue ?? String(key)}
+              >
+                {item?.textValue ?? String(key)}
+              </Item>
+            ))}
+          </MultiSelect>
         </Flex>
       </Flex>
     </SampleSection>

packages/code-studio/src/styleguide/Pickers.tsx

@@ -35,13 +35,20 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@hello-pangea/dnd": "^18.0.1",
     "@internationalized/date": "^3.5.5",
+    "@react-aria/focus": "^3.21.0",
+    "@react-aria/i18n": "^3.12.11",
+    "@react-spectrum/label": "^3.16.17",
+    "@react-spectrum/overlays": "^5.8.0",
     "@react-spectrum/theme-default": "^3.5.1",
     "@react-spectrum/toast": "^3.0.0-beta.16",
     "@react-spectrum/utils": "^3.11.5",
+    "@react-stately/overlays": "^3.6.18",
+    "@react-stately/utils": "^3.10.8",
     "@react-types/combobox": "3.13.1",
     "@react-types/radio": "^3.8.1",
     "@react-types/shared": "^3.22.1",
     "@react-types/textfield": "^3.9.1",
+    "@spectrum-icons/ui": "^3.6.18",
     "bootstrap": "4.6.2",
     "classnames": "^2.3.1",
     "event-target-shim": "^6.0.2",

packages/components/package.json

@@ -22,6 +22,7 @@ export * from './comboBox';
 export * from './ListActionGroup';
 export * from './ListActionMenu';
 export * from './listView';
+export * from './multiSelect';
 export * from './picker';
 export * from './Heading';
 export * from './Text';

packages/components/src/spectrum/index.ts

@@ -13,7 +13,11 @@ import { ListViewWrapper, type ListViewWrapperProps } from './ListViewWrapper';
 import { type ItemElementOrPrimitive } from '../shared';
 
 export type ListViewProps = MultipleItemSelectionProps & {
-  children: ItemElementOrPrimitive | ItemElementOrPrimitive[];
+  children?:
+    | ItemElementOrPrimitive
+    | ItemElementOrPrimitive[]
+    | null
+    | undefined;
   /** Can be set to true or a TooltipOptions to enable item tooltips */
   tooltip?: boolean | TooltipOptions;