Skip to content

Commit 487a59c

Browse files
mirkaciampo
andauthored
SearchableSelectControl: Add to @wordpress/ui (#80979)
* Add SearchableSelect form primitive to @wordpress/ui * Align SearchableSelect tests and Storybook with chip select * Add changelog * Add SearchableSelectControl to @wordpress/ui * Add changelog * Fix formatting * Add SearchableSelectControl to the Storybook component manifest. * Remove leftover SelectControl:ref from Storybook allowlist. The trunk merge kept this entry from the previous allowlist, but the generated snapshot no longer includes it. * Remove obsolete Storybook identity render workaround. * Storybook: Place SearchableSelectControl under Components/@wordpress-ui * SearchableSelectControl: Name the popup from the field label * Fix SearchableSelectControl changelog release placement --------- Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>
1 parent df1a193 commit 487a59c

12 files changed

Lines changed: 671 additions & 1 deletion

File tree

‎packages/ui/CHANGELOG.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
## Unreleased
44

5+
### New Features
6+
7+
- Add `SearchableSelectControl` component ([#80979](https://github.com/WordPress/gutenberg/pull/80979)).
8+
59
## 0.23.0 (2026-09-23)
610

711
### Breaking Changes
@@ -42,7 +46,7 @@
4246
- Remove the obsolete Jest console test dependency and matcher types ([#82843](https://github.com/WordPress/gutenberg/pull/82843)).
4347
- Update `@base-ui/react` from 1.7.0 to 1.8.0 ([#82835](https://github.com/WordPress/gutenberg/pull/82835)).
4448
- Run UI interaction tests in Vitest Browser Mode ([#80995](https://github.com/WordPress/gutenberg/pull/80995)).
45-
- `VisuallyHidden`: Replace deprecated `word-wrap` with `overflow-wrap` and remove related Stylelint suppression ([#82970](https://github.com/WordPress/gutenberg/pull/82970)).
49+
- `VisuallyHidden`: Replace deprecated `word-wrap` with `overflow-wrap` and remove related Stylelint suppression ([#82970](https://github.com/WordPress/gutenberg/pull/82970)).
4650

4751
## 0.22.0 (2026-09-10)
4852

‎packages/ui/src/form/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export * from './input-control';
55
export * from './radio-group-control';
66
export * from './select-control';
77
export { SearchableChipSelectControl } from './searchable-chip-select-control';
8+
export { SearchableSelectControl } from './searchable-select-control';
89
export * from './switch-control';
910
export * from './textarea-control';
1011
export * from './with-validation';

‎packages/ui/src/form/primitives/searchable-select/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ GroupLabel.displayName = 'SearchableSelect.GroupLabel';
1212
/**
1313
* A searchable single-selection component, with support for
1414
* a creatable footer action.
15+
*
16+
* Prefer `SearchableSelectControl` when using with a standard label and description.
1517
*/
1618
export const SearchableSelect = Object.assign( _SearchableSelect, {
1719
Item,

‎packages/ui/src/form/primitives/searchable-select/searchable-select.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,8 @@ function warnSearchableSelectProps(
5959
/**
6060
* A searchable single-selection component, with support for
6161
* a creatable footer action.
62+
*
63+
* Prefer `SearchableSelectControl` when using with a standard label and description.
6264
*/
6365
export const SearchableSelect = forwardRef<
6466
HTMLButtonElement,

‎packages/ui/src/form/primitives/searchable-select/types.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@ export type ItemGroup = {
2929
};
3030

3131
export type SearchableSelectItemProps = Omit< ComboboxItemProps, 'value' > & {
32+
/**
33+
* The option item this list item represents.
34+
*/
3235
value: Item;
3336
};
3437

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { SearchableSelectControl as _SearchableSelectControl } from './searchable-select-control';
2+
import { Group } from '../primitives/combobox/group';
3+
import { GroupLabel } from '../primitives/combobox/group-label';
4+
import { Item } from '../primitives/searchable-select/item';
5+
import { Collection } from '../primitives/combobox/collection';
6+
import { useFilteredItems } from '../primitives/combobox/use-filtered-items';
7+
8+
/**
9+
* A complete searchable select field with integrated label and description.
10+
*/
11+
export const SearchableSelectControl = Object.assign(
12+
_SearchableSelectControl,
13+
{
14+
Group,
15+
GroupLabel,
16+
Item,
17+
Collection,
18+
useFilteredItems,
19+
}
20+
);
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { forwardRef } from '@wordpress/element';
2+
import { Field, SearchableSelect } from '../primitives';
3+
import type { SearchableSelectControlProps } from './types';
4+
5+
/**
6+
* A complete searchable select field with integrated label and description.
7+
*/
8+
export const SearchableSelectControl = forwardRef<
9+
HTMLButtonElement,
10+
SearchableSelectControlProps
11+
>( function SearchableSelectControl(
12+
{
13+
className,
14+
label,
15+
description,
16+
details,
17+
hideLabelFromVision,
18+
...restProps
19+
},
20+
ref
21+
) {
22+
return (
23+
<Field.Root className={ className }>
24+
<Field.Label hideFromVision={ hideLabelFromVision }>
25+
{ label }
26+
</Field.Label>
27+
<SearchableSelect
28+
ref={ ref }
29+
aria-label={ label }
30+
{ ...restProps }
31+
/>
32+
{ description && (
33+
<Field.Description>{ description }</Field.Description>
34+
) }
35+
{ details && <Field.Details>{ details }</Field.Details> }
36+
</Field.Root>
37+
);
38+
} );

0 commit comments

Comments
 (0)