@adecore/ui 0.22.0 → 0.23.0

package/dist/Segmented.d.ts

@@ -11,7 +11,8 @@ export interface SegmentedProps<T extends string> {
     options: readonly SegmentedOption<T>[];
     label: string;
     disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
-export declare function Segmented<T extends string>({ value, onValueChange, options, label, disabled, className, ref }: SegmentedProps<T>): import("react").JSX.Element;
+export declare function Segmented<T extends string>({ value, onValueChange, options, label, disabled, orientation, className, ref }: SegmentedProps<T>): import("react").JSX.Element;

package/dist/Segmented.js

@@ -1,7 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { Icon } from './Icon.js';
-/* One of a few options side by side in one sunken track, the picked one lifted out of it. */
-export function Segmented({ value, onValueChange, options, label, disabled, className, ref }) {
-    return (_jsx("div", { ref: ref, className: clsx('flex h-8 w-fit items-center rounded-lg bg-surface-sunken p-0.5 text-xs font-medium', className), role: "radiogroup", "aria-label": label, children: options.map((option) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": value === option.id, disabled: disabled, className: clsx('flex h-7 items-center gap-1.5 rounded-md px-3 transition-colors disabled:opacity-50', value === option.id ? 'bg-surface-raised text-text shadow-raised' : 'text-text-muted hover:text-text'), onClick: () => onValueChange(option.id), children: [option.icon && _jsx(Icon, { icon: option.icon, size: 14 }), option.label] }, option.id))) }));
+const STEPS = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+/*
+ * One of a few options side by side in one sunken track, the picked one lifted out of it. A radio
+ * group: one tab stop, and the arrows pick and focus the next option, around the ends.
+ */
+export function Segmented({ value, onValueChange, options, label, disabled, orientation = 'horizontal', className, ref }) {
+    const vertical = orientation === 'vertical';
+    const picked = options.findIndex((option) => option.id === value);
+    const stop = picked === -1 ? 0 : picked;
+    function move(event, index) {
+        const next = event.key in STEPS
+            ? (index + STEPS[event.key] + options.length) % options.length
+            : event.key === 'Home'
+                ? 0
+                : event.key === 'End'
+                    ? options.length - 1
+                    : null;
+        if (next === null) {
+            return;
+        }
+        event.preventDefault();
+        onValueChange(options[next].id);
+        event.currentTarget.parentElement?.querySelectorAll('[role="radio"]')[next]?.focus();
+    }
+    return (_jsx("div", { ref: ref, className: clsx('flex rounded-lg bg-surface-sunken p-0.5 text-xs font-medium', vertical ? 'w-full flex-col items-stretch gap-0.5' : 'min-h-8 w-fit items-center', className), role: "radiogroup", "aria-label": label, "aria-orientation": vertical ? 'vertical' : undefined, children: options.map((option, index) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": value === option.id, tabIndex: index === stop ? 0 : -1, disabled: disabled, className: clsx('flex min-h-7 items-center gap-1.5 rounded-md px-3 py-1 text-left transition-colors disabled:opacity-50', value === option.id ? 'bg-surface-raised text-text shadow-raised' : 'text-text-muted hover:text-text'), onClick: () => onValueChange(option.id), onKeyDown: (event) => move(event, index), children: [option.icon && _jsx(Icon, { icon: option.icon, size: 14, className: "shrink-0" }), option.label] }, option.id))) }));
 }

package/dist/Select.d.ts

@@ -1,15 +1,6 @@
-import type { ReactNode, Ref } from 'react';
-export interface SelectItem<T extends string> {
-    value: T;
-    label: string;
-    description?: string;
-    icon?: ReactNode;
-    disabled?: boolean;
-}
-export interface SelectGroup<T extends string> {
-    label: string;
-    items: SelectItem<T>[];
-}
+import type { Ref } from 'react';
+import { type SelectGroup, type SelectItem } from './select-shared.ts';
+export type { SelectGroup, SelectItem };
 export interface SelectProps<T extends string> {
     value: T | null;
     onValueChange(value: T): void;
@@ -21,7 +12,9 @@ export interface SelectProps<T extends string> {
     disabled?: boolean;
     align?: 'start' | 'end';
     truncateValue?: boolean;
+    searchable?: boolean | number;
+    searchPlaceholder?: string;
     className?: string;
     ref?: Ref<HTMLButtonElement>;
 }
-export declare function Select<T extends string>({ value, onValueChange, items, label, placeholder, size, variant, disabled, align, truncateValue, className, ref }: SelectProps<T>): import("react").JSX.Element;
+export declare function Select<T extends string>(props: SelectProps<T>): import("react").JSX.Element;

package/dist/Select.js

@@ -4,27 +4,25 @@ import clsx from 'clsx';
 import { ChevronDown } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from './Icon.js';
-import { MENU_LABEL, MenuCheck } from './menu/parts.js';
+import { MENU_LABEL } from './menu/parts.js';
 import { renderPositioner } from './popup-layer.js';
-const isGroup = (entry) => Array.isArray(entry.items);
-const TRIGGER_SIZE = {
-    sm: 'h-7 gap-1 px-2',
-    md: 'h-8 gap-1.5 px-2'
-};
-const TRIGGER_VARIANT = {
-    outlined: 'max-w-56 rounded-lg border border-border bg-surface-raised text-text',
-    ghost: 'rounded-md text-text-muted hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text data-disabled:hover:bg-transparent data-disabled:hover:text-text-muted'
-};
-/* The dimmed look `Switch` and `Button` wear when disabled, so a select that cannot open reads as such. */
-const TRIGGER_DISABLED = 'data-disabled:cursor-default data-disabled:opacity-50';
-/* A description makes the row two lines high; the box keeps the icon on the label's line. */
+import { RowContent } from './select-row.js';
+import { isGroup, rowClassName, TRIGGER_DISABLED, TRIGGER_SIZE, TRIGGER_VARIANT } from './select-shared.js';
+import { SelectSearch } from './SelectSearch.js';
 function Row({ item, picked }) {
-    return (_jsxs(BaseSelect.Item, { className: clsx('menu-item', item.description && 'items-start'), value: item.value, label: item.label, disabled: item.disabled, children: [_jsx(MenuCheck, { kind: "radio", checked: picked }), item.icon && _jsx("span", { className: "flex h-lh shrink-0 items-center", children: item.icon }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx(BaseSelect.ItemText, { children: item.label }), item.description && _jsx("span", { className: "text-xs text-text-faint", children: item.description })] })] }));
+    return (_jsx(BaseSelect.Item, { className: rowClassName(item), value: item.value, label: item.label, disabled: item.disabled, children: _jsx(RowContent, { item: item, picked: picked, text: _jsx(BaseSelect.ItemText, { children: item.label }) }) }));
 }
 /* The one select. A Base UI `Select` in the popup style the menus use, so a settings field and a
    picker in a toolbar read the same. Base UI brings the keyboard along (arrows,
-   Home and End, typeahead, Enter, Escape), which a hand-rolled listbox would have to repeat. */
-export function Select({ value, onValueChange, items, label, placeholder, size = 'md', variant = 'outlined', disabled, align = 'start', truncateValue = true, className, ref }) {
+   Home and End, typeahead, Enter, Escape), which a hand-rolled listbox would have to repeat.
+   A long list can ask for a search field, which swaps in a combobox with the same trigger and rows. */
+export function Select(props) {
+    const { searchable, items } = props;
+    const count = items.length > 0 && isGroup(items[0]) ? items.reduce((sum, group) => sum + group.items.length, 0) : items.length;
+    const search = searchable === true || (typeof searchable === 'number' && count >= searchable);
+    return search ? _jsx(SelectSearch, { ...props }) : _jsx(PlainSelect, { ...props });
+}
+function PlainSelect({ value, onValueChange, items, label, placeholder, size = 'md', variant = 'outlined', disabled, align = 'start', truncateValue = true, className, ref }) {
     const { t } = useTranslation('ui');
     const groups = items.length > 0 && isGroup(items[0]) ? items : null;
     const flat = groups ? groups.flatMap((group) => group.items) : items;

package/dist/SelectSearch.d.ts

@@ -0,0 +1,2 @@
+import type { SelectProps } from './Select.tsx';
+export declare function SelectSearch<T extends string>({ value, onValueChange, items, label, placeholder, searchPlaceholder, size, variant, disabled, align, truncateValue, className, ref }: SelectProps<T>): import("react").JSX.Element;

package/dist/SelectSearch.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Combobox } from '@base-ui-components/react/combobox';
+import clsx from 'clsx';
+import { ChevronDown, Search } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Icon } from './Icon.js';
+import { MENU_LABEL } from './menu/parts.js';
+import { renderPositioner } from './popup-layer.js';
+import { RowContent } from './select-row.js';
+import { isGroup, rowClassName, TRIGGER_DISABLED, TRIGGER_SIZE, TRIGGER_VARIANT } from './select-shared.js';
+/* The `Select` with a search field on top of its options, for lists too long to scan. A combobox of Base UI brings the filtering and the keyboard. */
+export function SelectSearch({ value, onValueChange, items, label, placeholder, searchPlaceholder, size = 'md', variant = 'outlined', disabled, align = 'start', truncateValue = true, className, ref }) {
+    const { t } = useTranslation('ui');
+    const [query, setQuery] = useState('');
+    const groups = items.length > 0 && isGroup(items[0]) ? items : null;
+    const flat = groups ? groups.flatMap((group) => group.items) : items;
+    const byValue = new Map(flat.map((item) => [item.value, item]));
+    const selected = value === null ? null : (byValue.get(value) ?? null);
+    const comboboxItems = groups
+        ? groups.map((group) => ({ value: group.label, items: group.items.map((item) => item.value) }))
+        : flat.map((item) => item.value);
+    const searchLabel = searchPlaceholder ?? t('select.search');
+    const renderRow = (itemValue) => {
+        const item = byValue.get(itemValue);
+        return (_jsx(Combobox.Item, { className: rowClassName(item), value: item.value, disabled: item.disabled, children: _jsx(RowContent, { item: item, picked: item.value === value, text: _jsx("span", { className: "truncate", children: item.label }) }) }, item.value));
+    };
+    return (_jsxs(Combobox.Root, { items: comboboxItems, value: value, disabled: disabled, autoHighlight: true, itemToStringLabel: (itemValue) => byValue.get(itemValue)?.label ?? itemValue, onValueChange: (next) => {
+            if (next !== null) {
+                onValueChange(next);
+            }
+        }, onInputValueChange: setQuery, onOpenChange: (open) => {
+            if (!open) {
+                setQuery('');
+            }
+        }, children: [_jsxs(Combobox.Trigger, { ref: ref, "aria-label": label, className: clsx('flex shrink-0 items-center whitespace-nowrap text-xs', TRIGGER_SIZE[size], TRIGGER_VARIANT[variant], TRIGGER_DISABLED, className), children: [selected?.icon, _jsx("span", { className: clsx(truncateValue && 'truncate'), children: selected?.label ?? placeholder ?? t('action.select') }), _jsx("span", { className: "ml-auto flex shrink-0 pl-1", children: _jsx(Icon, { icon: ChevronDown, size: 14 }) })] }), _jsx(Combobox.Portal, { children: _jsx(Combobox.Positioner, { className: "popup-positioner", render: renderPositioner, side: "bottom", align: align, sideOffset: 6, children: _jsxs(Combobox.Popup, { className: "menu-popup flex max-h-96 flex-col", children: [_jsxs("label", { className: "flex shrink-0 items-center gap-2 border-b border-border px-3", children: [_jsx(Icon, { icon: Search, size: 14, className: "shrink-0 text-text-faint" }), _jsx(Combobox.Input, { "aria-label": searchLabel, placeholder: searchLabel, className: "h-9 min-w-0 flex-1 bg-transparent text-sm text-text outline-none placeholder:text-text-faint" })] }), _jsx(Combobox.Empty, { className: "px-3 py-4 text-center text-xs text-text-faint empty:hidden", children: t('select.noMatch', { query }) }), _jsx(Combobox.List, { className: "min-h-0 overflow-auto", children: groups
+                                    ? (group) => (_jsxs(Combobox.Group, { items: group.items, children: [_jsx(Combobox.GroupLabel, { className: MENU_LABEL, children: group.value }), _jsx(Combobox.Collection, { children: renderRow })] }, group.value))
+                                    : renderRow })] }) }) })] }));
+}

package/dist/locales/en.json

@@ -34,6 +34,10 @@
             "largerFor": "{{label}}: larger"
         }
     },
+    "select": {
+        "search": "Search",
+        "noMatch": "No option matches “{{query}}”"
+    },
     "iconPicker": {
         "label": "Icon",
         "none": "No icon",

package/dist/locales/nl.json

@@ -34,6 +34,10 @@
             "largerFor": "{{label}}: groter"
         }
     },
+    "select": {
+        "search": "Zoeken",
+        "noMatch": "Geen optie past bij “{{query}}”"
+    },
     "iconPicker": {
         "label": "Icoon",
         "none": "Geen icoon",

package/dist/select-row.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+import type { SelectItem } from './select-shared.ts';
+export declare function RowContent<T extends string>({ item, picked, text }: {
+    item: SelectItem<T>;
+    picked: boolean;
+    text: ReactNode;
+}): import("react").JSX.Element;

package/dist/select-row.js

@@ -0,0 +1,6 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MenuCheck } from './menu/parts.js';
+/* The check, icon and text of a row; `text` is the element that carries the label, which Base UI wants to know. */
+export function RowContent({ item, picked, text }) {
+    return (_jsxs(_Fragment, { children: [_jsx(MenuCheck, { kind: "radio", checked: picked }), item.icon && _jsx("span", { className: "flex h-lh shrink-0 items-center", children: item.icon }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [text, item.description && _jsx("span", { className: "text-xs text-text-faint", children: item.description })] })] }));
+}

package/dist/select-shared.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+export interface SelectItem<T extends string> {
+    value: T;
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface SelectGroup<T extends string> {
+    label: string;
+    items: SelectItem<T>[];
+}
+export declare const isGroup: <T extends string>(entry: SelectItem<T> | SelectGroup<T>) => entry is SelectGroup<T>;
+export declare const TRIGGER_SIZE: {
+    readonly sm: 'h-7 gap-1 px-2';
+    readonly md: 'h-8 gap-1.5 px-2';
+};
+export declare const TRIGGER_VARIANT: {
+    readonly outlined: 'max-w-56 rounded-lg border border-border bg-surface-raised text-text';
+    readonly ghost: 'rounded-md text-text-muted hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text data-disabled:hover:bg-transparent data-disabled:hover:text-text-muted';
+};
+export declare const TRIGGER_DISABLED = "data-disabled:cursor-default data-disabled:opacity-50";
+export declare const rowClassName: (item: SelectItem<string>) => string;

package/dist/select-shared.js

@@ -0,0 +1,14 @@
+import clsx from 'clsx';
+export const isGroup = (entry) => Array.isArray(entry.items);
+export const TRIGGER_SIZE = {
+    sm: 'h-7 gap-1 px-2',
+    md: 'h-8 gap-1.5 px-2'
+};
+export const TRIGGER_VARIANT = {
+    outlined: 'max-w-56 rounded-lg border border-border bg-surface-raised text-text',
+    ghost: 'rounded-md text-text-muted hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text data-disabled:hover:bg-transparent data-disabled:hover:text-text-muted'
+};
+/* The dimmed look `Switch` and `Button` wear when disabled, so a select that cannot open reads as such. */
+export const TRIGGER_DISABLED = 'data-disabled:cursor-default data-disabled:opacity-50';
+/* A description makes the row two lines high; the box keeps the icon on the label's line. */
+export const rowClassName = (item) => clsx('menu-item', item.description && 'items-start');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/Segmented.tsx

@@ -1,4 +1,4 @@
-import type { Ref } from 'react';
+import type { KeyboardEvent, Ref } from 'react';
 import clsx from 'clsx';
 import type { LucideIcon } from 'lucide-react';
 import { Icon } from './Icon.tsx';
@@ -16,33 +16,68 @@ export interface SegmentedProps<T extends string> {
     /* The accessible name of the group. */
     label: string;
     disabled?: boolean;
+    /* `vertical` stacks the options in a column as wide as its container, for labels too long to stand side by side. */
+    orientation?: 'horizontal' | 'vertical';
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
 
-/* One of a few options side by side in one sunken track, the picked one lifted out of it. */
-export function Segmented<T extends string>({ value, onValueChange, options, label, disabled, className, ref }: SegmentedProps<T>) {
+const STEPS: Readonly<Record<string, number>> = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+
+/*
+ * One of a few options side by side in one sunken track, the picked one lifted out of it. A radio
+ * group: one tab stop, and the arrows pick and focus the next option, around the ends.
+ */
+export function Segmented<T extends string>({ value, onValueChange, options, label, disabled, orientation = 'horizontal', className, ref }: SegmentedProps<T>) {
+    const vertical = orientation === 'vertical';
+    const picked = options.findIndex((option) => option.id === value);
+    const stop = picked === -1 ? 0 : picked;
+
+    function move(event: KeyboardEvent<HTMLButtonElement>, index: number) {
+        const next =
+            event.key in STEPS
+                ? (index + STEPS[event.key]! + options.length) % options.length
+                : event.key === 'Home'
+                  ? 0
+                  : event.key === 'End'
+                    ? options.length - 1
+                    : null;
+        if (next === null) {
+            return;
+        }
+        event.preventDefault();
+        onValueChange(options[next]!.id);
+        event.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>('[role="radio"]')[next]?.focus();
+    }
+
     return (
         <div
             ref={ref}
-            className={clsx('flex h-8 w-fit items-center rounded-lg bg-surface-sunken p-0.5 text-xs font-medium', className)}
+            className={clsx(
+                'flex rounded-lg bg-surface-sunken p-0.5 text-xs font-medium',
+                vertical ? 'w-full flex-col items-stretch gap-0.5' : 'min-h-8 w-fit items-center',
+                className
+            )}
             role="radiogroup"
             aria-label={label}
+            aria-orientation={vertical ? 'vertical' : undefined}
         >
-            {options.map((option) => (
+            {options.map((option, index) => (
                 <button
                     key={option.id}
                     type="button"
                     role="radio"
                     aria-checked={value === option.id}
+                    tabIndex={index === stop ? 0 : -1}
                     disabled={disabled}
                     className={clsx(
-                        'flex h-7 items-center gap-1.5 rounded-md px-3 transition-colors disabled:opacity-50',
+                        'flex min-h-7 items-center gap-1.5 rounded-md px-3 py-1 text-left transition-colors disabled:opacity-50',
                         value === option.id ? 'bg-surface-raised text-text shadow-raised' : 'text-text-muted hover:text-text'
                     )}
                     onClick={() => onValueChange(option.id)}
+                    onKeyDown={(event) => move(event, index)}
                 >
-                    {option.icon && <Icon icon={option.icon} size={14} />}
+                    {option.icon && <Icon icon={option.icon} size={14} className="shrink-0" />}
                     {option.label}
                 </button>
             ))}

package/src/Select.tsx

@@ -1,25 +1,16 @@
-import type { ReactNode, Ref } from 'react';
+import type { Ref } from 'react';
 import { Select as BaseSelect } from '@base-ui-components/react/select';
 import clsx from 'clsx';
 import { ChevronDown } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from './Icon.tsx';
-import { MENU_LABEL, MenuCheck } from './menu/parts.tsx';
+import { MENU_LABEL } from './menu/parts.tsx';
 import { renderPositioner } from './popup-layer.ts';
+import { RowContent } from './select-row.tsx';
+import { isGroup, rowClassName, TRIGGER_DISABLED, TRIGGER_SIZE, TRIGGER_VARIANT, type SelectGroup, type SelectItem } from './select-shared.ts';
+import { SelectSearch } from './SelectSearch.tsx';
 
-export interface SelectItem<T extends string> {
-    value: T;
-    label: string;
-    /* A second line under the label, for what the choice does. */
-    description?: string;
-    icon?: ReactNode;
-    disabled?: boolean;
-}
-
-export interface SelectGroup<T extends string> {
-    label: string;
-    items: SelectItem<T>[];
-}
+export type { SelectGroup, SelectItem };
 
 export interface SelectProps<T extends string> {
     value: T | null;
@@ -34,43 +25,35 @@ export interface SelectProps<T extends string> {
     disabled?: boolean;
     align?: 'start' | 'end';
     truncateValue?: boolean;
+    /* A search field above the options: `true` always, a number once the list has at least that many options. */
+    searchable?: boolean | number;
+    /* What the search field says while it is empty, and its accessible name. */
+    searchPlaceholder?: string;
     className?: string;
     ref?: Ref<HTMLButtonElement>;
 }
 
-const isGroup = <T extends string>(entry: SelectItem<T> | SelectGroup<T>): entry is SelectGroup<T> => Array.isArray((entry as SelectGroup<T>).items);
-
-const TRIGGER_SIZE = {
-    sm: 'h-7 gap-1 px-2',
-    md: 'h-8 gap-1.5 px-2'
-} as const;
-
-const TRIGGER_VARIANT = {
-    outlined: 'max-w-56 rounded-lg border border-border bg-surface-raised text-text',
-    ghost: 'rounded-md text-text-muted hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text data-disabled:hover:bg-transparent data-disabled:hover:text-text-muted'
-} as const;
-
-/* The dimmed look `Switch` and `Button` wear when disabled, so a select that cannot open reads as such. */
-const TRIGGER_DISABLED = 'data-disabled:cursor-default data-disabled:opacity-50';
-
-/* A description makes the row two lines high; the box keeps the icon on the label's line. */
 function Row<T extends string>({ item, picked }: { item: SelectItem<T>; picked: boolean }) {
     return (
-        <BaseSelect.Item className={clsx('menu-item', item.description && 'items-start')} value={item.value} label={item.label} disabled={item.disabled}>
-            <MenuCheck kind="radio" checked={picked} />
-            {item.icon && <span className="flex h-lh shrink-0 items-center">{item.icon}</span>}
-            <span className="flex min-w-0 flex-col">
-                <BaseSelect.ItemText>{item.label}</BaseSelect.ItemText>
-                {item.description && <span className="text-xs text-text-faint">{item.description}</span>}
-            </span>
+        <BaseSelect.Item className={rowClassName(item)} value={item.value} label={item.label} disabled={item.disabled}>
+            <RowContent item={item} picked={picked} text={<BaseSelect.ItemText>{item.label}</BaseSelect.ItemText>} />
         </BaseSelect.Item>
     );
 }
 
 /* The one select. A Base UI `Select` in the popup style the menus use, so a settings field and a
    picker in a toolbar read the same. Base UI brings the keyboard along (arrows,
-   Home and End, typeahead, Enter, Escape), which a hand-rolled listbox would have to repeat. */
-export function Select<T extends string>({
+   Home and End, typeahead, Enter, Escape), which a hand-rolled listbox would have to repeat.
+   A long list can ask for a search field, which swaps in a combobox with the same trigger and rows. */
+export function Select<T extends string>(props: SelectProps<T>) {
+    const { searchable, items } = props;
+    const count = items.length > 0 && isGroup(items[0]!) ? (items as SelectGroup<T>[]).reduce((sum, group) => sum + group.items.length, 0) : items.length;
+    const search = searchable === true || (typeof searchable === 'number' && count >= searchable);
+
+    return search ? <SelectSearch {...props} /> : <PlainSelect {...props} />;
+}
+
+function PlainSelect<T extends string>({
     value,
     onValueChange,
     items,

package/src/SelectSearch.tsx

@@ -0,0 +1,112 @@
+import { useState } from 'react';
+import { Combobox } from '@base-ui-components/react/combobox';
+import clsx from 'clsx';
+import { ChevronDown, Search } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Icon } from './Icon.tsx';
+import { MENU_LABEL } from './menu/parts.tsx';
+import { renderPositioner } from './popup-layer.ts';
+import type { SelectProps } from './Select.tsx';
+import { RowContent } from './select-row.tsx';
+import { isGroup, rowClassName, TRIGGER_DISABLED, TRIGGER_SIZE, TRIGGER_VARIANT, type SelectGroup, type SelectItem } from './select-shared.ts';
+
+/* The `Select` with a search field on top of its options, for lists too long to scan. A combobox of Base UI brings the filtering and the keyboard. */
+export function SelectSearch<T extends string>({
+    value,
+    onValueChange,
+    items,
+    label,
+    placeholder,
+    searchPlaceholder,
+    size = 'md',
+    variant = 'outlined',
+    disabled,
+    align = 'start',
+    truncateValue = true,
+    className,
+    ref
+}: SelectProps<T>) {
+    const { t } = useTranslation('ui');
+    const [query, setQuery] = useState('');
+    const groups = items.length > 0 && isGroup(items[0]!) ? (items as SelectGroup<T>[]) : null;
+    const flat = groups ? groups.flatMap((group) => group.items) : (items as SelectItem<T>[]);
+    const byValue = new Map(flat.map((item) => [item.value, item]));
+    const selected = value === null ? null : (byValue.get(value) ?? null);
+    const comboboxItems = groups
+        ? groups.map((group) => ({ value: group.label, items: group.items.map((item) => item.value) }))
+        : flat.map((item) => item.value);
+    const searchLabel = searchPlaceholder ?? t('select.search');
+
+    const renderRow = (itemValue: T) => {
+        const item = byValue.get(itemValue)!;
+        return (
+            <Combobox.Item key={item.value} className={rowClassName(item)} value={item.value} disabled={item.disabled}>
+                <RowContent item={item} picked={item.value === value} text={<span className="truncate">{item.label}</span>} />
+            </Combobox.Item>
+        );
+    };
+
+    return (
+        <Combobox.Root<T>
+            items={comboboxItems}
+            value={value as T}
+            disabled={disabled}
+            autoHighlight
+            itemToStringLabel={(itemValue) => byValue.get(itemValue)?.label ?? itemValue}
+            onValueChange={(next) => {
+                if (next !== null) {
+                    onValueChange(next);
+                }
+            }}
+            onInputValueChange={setQuery}
+            onOpenChange={(open) => {
+                if (!open) {
+                    setQuery('');
+                }
+            }}
+        >
+            <Combobox.Trigger
+                ref={ref}
+                aria-label={label}
+                className={clsx(
+                    'flex shrink-0 items-center whitespace-nowrap text-xs',
+                    TRIGGER_SIZE[size],
+                    TRIGGER_VARIANT[variant],
+                    TRIGGER_DISABLED,
+                    className
+                )}
+            >
+                {selected?.icon}
+                <span className={clsx(truncateValue && 'truncate')}>{selected?.label ?? placeholder ?? t('action.select')}</span>
+                <span className="ml-auto flex shrink-0 pl-1">
+                    <Icon icon={ChevronDown} size={14} />
+                </span>
+            </Combobox.Trigger>
+            <Combobox.Portal>
+                <Combobox.Positioner className="popup-positioner" render={renderPositioner} side="bottom" align={align} sideOffset={6}>
+                    <Combobox.Popup className="menu-popup flex max-h-96 flex-col">
+                        <label className="flex shrink-0 items-center gap-2 border-b border-border px-3">
+                            <Icon icon={Search} size={14} className="shrink-0 text-text-faint" />
+                            <Combobox.Input
+                                aria-label={searchLabel}
+                                placeholder={searchLabel}
+                                className="h-9 min-w-0 flex-1 bg-transparent text-sm text-text outline-none placeholder:text-text-faint"
+                            />
+                        </label>
+                        <Combobox.Empty className="px-3 py-4 text-center text-xs text-text-faint empty:hidden">{t('select.noMatch', { query })}</Combobox.Empty>
+                        <Combobox.List className="min-h-0 overflow-auto">
+                            {groups
+                                ? (group: { value: string; items: T[] }) => (
+                                      <Combobox.Group key={group.value} items={group.items}>
+                                          <Combobox.GroupLabel className={MENU_LABEL}>{group.value}</Combobox.GroupLabel>
+                                          <Combobox.Collection>{renderRow}</Combobox.Collection>
+                                      </Combobox.Group>
+                                  )
+                                : renderRow}
+                        </Combobox.List>
+                    </Combobox.Popup>
+                </Combobox.Positioner>
+            </Combobox.Portal>
+        </Combobox.Root>
+    );
+}

package/src/locales/en.json

@@ -34,6 +34,10 @@
             "largerFor": "{{label}}: larger"
         }
     },
+    "select": {
+        "search": "Search",
+        "noMatch": "No option matches “{{query}}”"
+    },
     "iconPicker": {
         "label": "Icon",
         "none": "No icon",

package/src/locales/nl.json

@@ -34,6 +34,10 @@
             "largerFor": "{{label}}: groter"
         }
     },
+    "select": {
+        "search": "Zoeken",
+        "noMatch": "Geen optie past bij “{{query}}”"
+    },
     "iconPicker": {
         "label": "Icoon",
         "none": "Geen icoon",

package/src/select-row.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import { MenuCheck } from './menu/parts.tsx';
+import type { SelectItem } from './select-shared.ts';
+
+/* The check, icon and text of a row; `text` is the element that carries the label, which Base UI wants to know. */
+export function RowContent<T extends string>({ item, picked, text }: { item: SelectItem<T>; picked: boolean; text: ReactNode }) {
+    return (
+        <>
+            <MenuCheck kind="radio" checked={picked} />
+            {item.icon && <span className="flex h-lh shrink-0 items-center">{item.icon}</span>}
+            <span className="flex min-w-0 flex-col">
+                {text}
+                {item.description && <span className="text-xs text-text-faint">{item.description}</span>}
+            </span>
+        </>
+    );
+}

package/src/select-shared.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import clsx from 'clsx';
+
+export interface SelectItem<T extends string> {
+    value: T;
+    label: string;
+    /* A second line under the label, for what the choice does. */
+    description?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+
+export interface SelectGroup<T extends string> {
+    label: string;
+    items: SelectItem<T>[];
+}
+
+export const isGroup = <T extends string>(entry: SelectItem<T> | SelectGroup<T>): entry is SelectGroup<T> => Array.isArray((entry as SelectGroup<T>).items);
+
+export const TRIGGER_SIZE = {
+    sm: 'h-7 gap-1 px-2',
+    md: 'h-8 gap-1.5 px-2'
+} as const;
+
+export const TRIGGER_VARIANT = {
+    outlined: 'max-w-56 rounded-lg border border-border bg-surface-raised text-text',
+    ghost: 'rounded-md text-text-muted hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text data-disabled:hover:bg-transparent data-disabled:hover:text-text-muted'
+} as const;
+
+/* The dimmed look `Switch` and `Button` wear when disabled, so a select that cannot open reads as such. */
+export const TRIGGER_DISABLED = 'data-disabled:cursor-default data-disabled:opacity-50';
+
+/* A description makes the row two lines high; the box keeps the icon on the label's line. */
+export const rowClassName = (item: SelectItem<string>): string => clsx('menu-item', item.description && 'items-start');