Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mofojed merged 24 commits into from
May 22, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
ecc6279
ms scaffolding for table backed sources
gzh2003 Apr 22, 2026
e297575
cleanup normalized props
gzh2003 Apr 24, 2026
2746198
some more normalization refactors
gzh2003 Apr 26, 2026
a217453
cleanup subcomponents
gzh2003 Apr 26, 2026
df5c8d4
WIP remove wrapper div
gzh2003 Apr 26, 2026
0f10d77
WIP export props
gzh2003 Apr 26, 2026
f982163
WIP finalize props
gzh2003 Apr 27, 2026
a0d36d0
WIP decouple hooks/state from single ms file
gzh2003 Apr 27, 2026
f85af59
WIP fix stale aria-activedescendant
gzh2003 Apr 27, 2026
625fce6
WIP changes
gzh2003 Apr 27, 2026
36b7886
adding tests
jnumainville May 14, 2026
72b6a40
remove prop spreading tests
jnumainville May 14, 2026
e42e0e5
remove act
jnumainville May 14, 2026
160c5b1
comments
jnumainville May 18, 2026
55d6dea
fix tests
jnumainville May 18, 2026
674e0e9
comments
jnumainville May 21, 2026
d195483
add multiselect to styleguide
jnumainville May 21, 2026
fdd1aca
fixed assertions
jnumainville May 21, 2026
b437147
styleguide e2e
jnumainville May 21, 2026
50f1290
fixed search param weirdness
jnumainville May 21, 2026
63449cb
fixes to width
jnumainville May 22, 2026
fdefb46
prettier
jnumainville May 22, 2026
602afd1
Update packages/components/src/spectrum/multiSelect/MultiSelect.scss
jnumainville May 22, 2026
2fb1c86
rework empty children
jnumainville May 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

93 changes: 92 additions & 1 deletion packages/code-studio/src/styleguide/Pickers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import {
Icon,
Item,
type ItemKey,
type ItemSelection,
MultiSelect,
PICKER_ITEM_HEIGHTS,
PICKER_TOP_OFFSET,
Picker,
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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}>
Expand All @@ -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>
Expand Down
7 changes: 7 additions & 0 deletions packages/components/package.json
View file
Open in desktop

@mofojed mofojed May 20, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We updated the package.json, you need to run npm install to update the package-lock.json as well.

@jnumainville jnumainville May 21, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/spectrum/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
6 changes: 5 additions & 1 deletion packages/components/src/spectrum/listView/ListView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
Loading
Loading