@allxsmith/bestax-bulma 5.37.0 → 5.38.0

package/dist/esm/form/Combobox.js

@@ -0,0 +1,592 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, forwardRef, useState, useRef, useCallback, useId, useContext } from 'react';
+import { usePrefixedClassNames, classNames } from '../helpers/classNames.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { withSubComponents } from '../helpers/withSubComponents.js';
+import { Portal } from '../helpers/portal.js';
+import { useIsHydrated } from '../helpers/useIsHydrated.js';
+import { useClientLayoutEffect } from '../helpers/useClientLayoutEffect.js';
+import { flattenChildren } from '../helpers/flattenChildren.js';
+import { warnOnce } from '../helpers/devWarnings.js';
+import { useAnchoredPosition, marginGap } from '../helpers/useAnchoredPosition.js';
+import { spokenText, StatusRegion } from '../helpers/statusRegion.js';
+import { useComboboxEngine } from '../helpers/useComboboxEngine.js';
+import { Delete } from '../elements/Delete.js';
+import { Tag } from '../elements/Tag.js';
+import { Tags } from '../elements/Tags.js';
+import { Field } from './Field.js';
+import { Input } from './Input.js';
+import { useInsideField, useInsideControl, rendersOwnField } from './FormContext.js';
+import { useAutoLabelId } from './useAutoLabelId.js';
+import { useControlLoading } from './controlLoading.js';
+
+const validComboboxSizes = ['small', 'medium', 'large'];
+// What the status region announces: the `Combobox.Empty` content, as the one
+// item it's handed while that content is on screen because of the user's
+// typing.
+const typedNoMatches = [{ id: 'empty' }];
+const nothingToAnnounce = [];
+const noop = () => { };
+const registerNothing = () => noop;
+// What a part rendered outside a Combobox reads: closed, with nothing to
+// report to, so it renders its markup and does nothing.
+const standalone = {
+    engine: {
+        open: false,
+        expanded: false,
+        highlighted: null,
+        typed: false,
+        listboxId: '',
+        itemId: () => '',
+        rootRef: { current: null },
+        inputRef: { current: null },
+        listboxRef: { current: null },
+        registerPopup: registerNothing,
+        registerItem: registerNothing,
+        onKeyDown: noop,
+        onChange: noop,
+        onClick: noop,
+        onBlur: noop,
+        hover: noop,
+        pick: noop,
+        keepFocus: noop,
+        markInside: noop,
+    },
+    inputId: undefined,
+    reportInputId: noop,
+    labelId: undefined,
+    ownLabelId: undefined,
+    reportLoading: noop,
+    reportEmpty: registerNothing,
+    onFieldChange: noop,
+    reportPanel: registerNothing,
+    placement: { position: 'bottom-left' },
+    multiple: false,
+    inline: false,
+    appendToBody: false,
+};
+const ComboboxContext = createContext(null);
+const useCombobox = () => useContext(ComboboxContext) ?? standalone;
+/** Hands a node to a forwarded ref and to one of the component's own. */
+function setRefs(node, own, forwarded) {
+    own.current = node;
+    if (typeof forwarded === 'function')
+        forwarded(node);
+    else if (forwarded)
+        forwarded.current = node;
+}
+const ComboboxParts = forwardRef(({ children, below, onSettle, open, defaultOpen = false, onOpenChange, onSelect, keepFirst = false, multiple = false, inline = false, position = 'bottom-left', appendToBody = false, size, label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, className, ...props }, ref) => {
+    const insideField = useInsideField();
+    const insideControl = useInsideControl();
+    const ownField = rendersOwnField('Combobox', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
+    // The field's own `id`, when `Combobox.Input` was given one, which the
+    // label then points at.
+    const [givenInputId, setGivenInputId] = useState();
+    const { controlId, fieldLabelProps, labelId: listLabelId, } = useAutoLabelId({
+        label,
+        id: givenInputId,
+        labelProps,
+        rendersLabel: ownField,
+        needsLabelId: true,
+    });
+    const engine = useComboboxEngine({
+        open,
+        defaultOpen,
+        onOpenChange,
+        onSelect,
+        onSettle,
+        keepFirst,
+        multiple,
+        inline,
+        // A portaled panel has no server markup to point at.
+        deferred: appendToBody && !inline,
+    });
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const validSize = validComboboxSizes.includes(size)
+        ? size
+        : undefined;
+    const rootClass = usePrefixedClassNames('combobox', {
+        [`is-${validSize}`]: !!validSize,
+        'is-inline': inline,
+    });
+    const helpClass = usePrefixedClassNames('help', {
+        [`is-${messageColor}`]: !!messageColor,
+    });
+    // A polite status region, in the page from the start so it's there
+    // before anything is written into it, announces `Combobox.Empty` when
+    // the user's typing leaves it on screen: once each time that happens,
+    // not again on each keystroke while it stays. An empty field isn't a
+    // search, so it stays quiet then. While the field's `isLoading`, or a
+    // loading Control around the Combobox, says results are on their way, it
+    // waits, and it's said once loading ends with the message still there.
+    const [inputLoading, setInputLoading] = useState(false);
+    const controlLoading = useControlLoading();
+    const [hasText, setHasText] = useState(false);
+    const emptyRef = useRef(null);
+    const [emptyShown, setEmptyShown] = useState(false);
+    const announced = engine.typed && hasText && emptyShown && !inputLoading && !controlLoading
+        ? typedNoMatches
+        : nothingToAnnounce;
+    // The region reads the text on screen, whatever the message renders.
+    const describeEmpty = useCallback(() => {
+        const node = emptyRef.current;
+        /* istanbul ignore if: it's only announced while it's on screen */
+        if (!node)
+            return null;
+        return spokenText(node);
+    }, []);
+    const reportEmpty = useCallback((element) => {
+        emptyRef.current = element;
+        setEmptyShown(true);
+        return () => {
+            emptyRef.current = null;
+            setEmptyShown(false);
+        };
+    }, []);
+    // The menu is placed from here rather than from the part, since this
+    // is where the field's element is known by the time the panel mounts.
+    const panelRef = useRef(null);
+    const [panelShown, setPanelShown] = useState(false);
+    const placement = useAnchoredPosition(engine.rootRef, panelRef, {
+        active: panelShown,
+        position,
+        fixed: appendToBody,
+        // The gap comes from `--bulma-combobox-menu-offset` as a margin, so
+        // the coordinates leave it out and `auto` reads it off the panel.
+        offset: 0,
+        styledGap: marginGap,
+        matchWidth: true,
+        // The list filters as the user types, so the menu's height changes.
+        followContent: true,
+    });
+    const { registerPopup } = engine;
+    const reportPanel = useCallback((element) => {
+        const forget = registerPopup(element);
+        panelRef.current = element;
+        setPanelShown(true);
+        return () => {
+            forget();
+            panelRef.current = null;
+            setPanelShown(false);
+        };
+    }, [registerPopup]);
+    const onFieldChange = (value) => {
+        setHasText(value !== '');
+        engine.onChange();
+    };
+    // A new value each render: the engine's state and handlers are, and the
+    // parts read the highlight and the open state from it.
+    const context = {
+        engine,
+        inputId: controlId,
+        reportInputId: setGivenInputId,
+        labelId: listLabelId,
+        ownLabelId: label && ownField ? listLabelId : undefined,
+        reportLoading: setInputLoading,
+        reportEmpty,
+        onFieldChange,
+        reportPanel,
+        placement,
+        size: validSize,
+        multiple,
+        inline,
+        appendToBody,
+    };
+    const { rootRef } = engine;
+    const rootRefs = useCallback((node) => setRefs(node, rootRef, ref), [rootRef, ref]);
+    const comboboxElement = (jsxs("div", { className: classNames(rootClass, bulmaHelperClasses, className), ...rest, ref: rootRefs, children: [jsx(ComboboxContext.Provider, { value: context, children: children }), jsx(StatusRegion, { items: announced, describe: describeEmpty })] }));
+    const fieldElement = below === undefined ? (comboboxElement) : (jsxs("div", { children: [comboboxElement, jsx("div", { onPointerDownCapture: engine.markInside, onMouseDown: engine.keepFocus, children: below })] }));
+    const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
+    if (ownField) {
+        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [fieldElement, messageEl] }));
+    }
+    return (jsxs(Fragment, { children: [fieldElement, messageEl] }));
+});
+ComboboxParts.displayName = 'ComboboxParts';
+/**
+ * The text field, with the combobox role and the keys, rendered as an `Input`.
+ *
+ * @function
+ * @param {ComboboxInputProps} props - Props for the Combobox.Input component.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the `<input>`.
+ * @returns {JSX.Element} The field in its Control.
+ */
+const ComboboxInput = forwardRef(({ id, isLoading, controlSize, onKeyDown, onChange, onClick, onBlur, 'aria-autocomplete': ariaAutocomplete, ...props }, ref) => {
+    const context = useCombobox();
+    const { engine, reportInputId, reportLoading } = context;
+    // Inside a caller's Control the field renders none of its own, so the
+    // Combobox's size isn't handed to one there.
+    const insideControl = useInsideControl();
+    useClientLayoutEffect(() => {
+        reportInputId(id);
+        return () => reportInputId(undefined);
+    }, [reportInputId, id]);
+    useClientLayoutEffect(() => {
+        reportLoading(!!isLoading);
+        return () => reportLoading(false);
+    }, [reportLoading, isLoading]);
+    const { inputRef } = engine;
+    const inputRefs = useCallback((node) => setRefs(node, inputRef, ref), [inputRef, ref]);
+    const { expanded, highlighted } = engine;
+    // An `id` of the field's own reaches the label from a layout effect, so
+    // in server markup, and the first render, the label's `for` still names
+    // the generated id. Until then the field points at the label itself,
+    // unless the caller named it.
+    const callerNamed = !!props['aria-label'] || 'aria-labelledby' in props;
+    const labelledBy = callerNamed
+        ? props['aria-labelledby']
+        : id !== undefined && id !== context.inputId
+            ? context.ownLabelId
+            : undefined;
+    return (jsx(Input, { ...props, ref: inputRefs, id: id ?? context.inputId, "aria-labelledby": labelledBy, isLoading: isLoading, size: context.size, controlSize: controlSize ?? (insideControl ? undefined : context.size), role: "combobox", "aria-autocomplete": ariaAutocomplete ?? 'list', "aria-haspopup": "listbox", "aria-expanded": expanded, "aria-controls": expanded ? engine.listboxId : undefined, "aria-activedescendant": expanded && highlighted !== null
+            ? engine.itemId(highlighted)
+            : undefined, autoComplete: "off", onKeyDown: event => {
+            onKeyDown?.(event);
+            engine.onKeyDown(event);
+        }, onChange: event => {
+            onChange?.(event);
+            context.onFieldChange(event.target.value);
+        }, onClick: event => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                engine.onClick();
+        }, onBlur: event => {
+            onBlur?.(event);
+            engine.onBlur(event);
+        } }));
+});
+ComboboxInput.displayName = 'ComboboxInput';
+/**
+ * The floating panel under the field, on screen while the list is open and its children aren't all empty.
+ *
+ * @function
+ * @param {ComboboxMenuProps} props - Props for the Combobox.Menu component.
+ * @returns {JSX.Element | null} The panel, or nothing while the list is closed or its children are all empty.
+ */
+const ComboboxMenu = ({ children, className, style, onMouseDown, onPointerDownCapture, ...props }) => {
+    const { engine, inline, appendToBody, placement, reportPanel, size } = useCombobox();
+    // Children that are all `null`, `false` or `''` leave no panel, whatever
+    // `open` says. This reads the elements it's handed, not what they render.
+    const hasContent = flattenChildren(children).some(child => child !== '');
+    const shown = engine.open && !inline && hasContent;
+    // A portaled panel has no server markup, so it only exists from the
+    // commit after hydration. Everything that measures it waits for that.
+    const hydrated = useIsHydrated();
+    const mounted = shown && (hydrated || !appendToBody);
+    const panelRef = useRef(null);
+    useClientLayoutEffect(() => {
+        const panel = panelRef.current;
+        return mounted && panel ? reportPanel(panel) : undefined;
+    }, [mounted, reportPanel]);
+    const menuClass = usePrefixedClassNames('dropdown-menu', 'combobox-menu', {
+        [`is-${placement.position}`]: true,
+        'is-portal': appendToBody,
+        [`is-${size}`]: !!size,
+    });
+    const contentClass = usePrefixedClassNames('dropdown-content');
+    // Inline, the list is in the flow already.
+    if (inline)
+        return jsx(Fragment, { children: children });
+    if (!shown)
+        return null;
+    return (jsx(Portal, { disabled: !appendToBody, children: jsx("div", { ...props, ref: panelRef, className: classNames(menuClass, className), style: appendToBody
+                ? {
+                    ...style,
+                    position: 'fixed',
+                    top: placement.top,
+                    left: placement.left,
+                    minWidth: placement.minWidth,
+                }
+                : style, onMouseDown: event => {
+                onMouseDown?.(event);
+                engine.keepFocus(event);
+            }, onPointerDownCapture: event => {
+                onPointerDownCapture?.(event);
+                engine.markInside(event);
+            }, children: jsx("div", { className: contentClass, children: children }) }) }));
+};
+ComboboxMenu.displayName = 'ComboboxMenu';
+/**
+ * The list of items, a `listbox` named by the label that names the field.
+ *
+ * @function
+ * @param {ComboboxListProps} props - Props for the Combobox.List component.
+ * @returns {JSX.Element} The listbox.
+ */
+const ComboboxList = ({ children, className, onMouseDown, ...props }) => {
+    const { engine, labelId, multiple } = useCombobox();
+    const { listboxRef, listboxId, keepFocus } = engine;
+    const listClass = usePrefixedClassNames('combobox-list');
+    // A name the caller gave the list wins over the label's.
+    const callerNamed = !!props['aria-label'] || 'aria-labelledby' in props;
+    return (jsx("div", { className: classNames(listClass, className), ...props, ref: listboxRef, id: listboxId || undefined, role: "listbox", "aria-labelledby": callerNamed ? props['aria-labelledby'] : labelId, "aria-label": callerNamed ? props['aria-label'] : labelId ? undefined : 'Suggestions', "aria-multiselectable": multiple || undefined, onMouseDown: event => {
+            onMouseDown?.(event);
+            keepFocus(event);
+        }, children: children }));
+};
+ComboboxList.displayName = 'ComboboxList';
+/**
+ * One choice in the list, with a check mark while it's `checked`.
+ *
+ * @function
+ * @param {ComboboxItemProps} props - Props for the Combobox.Item component.
+ * @returns {JSX.Element} The item.
+ */
+const ComboboxItem = ({ value, disabled = false, checked = false, children, className, onClick, onPointerMove, ...props }) => {
+    const { engine, multiple } = useCombobox();
+    const itemRef = useRef(null);
+    const { registerItem } = engine;
+    useClientLayoutEffect(() => registerItem(itemRef.current, {
+        value,
+        disabled,
+        checked,
+    }), [registerItem, value, disabled, checked]);
+    const highlighted = engine.highlighted === value;
+    const itemClass = usePrefixedClassNames('dropdown-item', 'combobox-item', {
+        'is-active': highlighted,
+        'is-checked': checked,
+        'is-disabled': disabled,
+    });
+    const checkClass = usePrefixedClassNames('combobox-check');
+    // One value: the highlighted option, as the ARIA Authoring Practices'
+    // combobox has it, and no attribute on the rest. Several: each option says
+    // whether it's chosen. Never a disabled option.
+    const selected = disabled
+        ? undefined
+        : multiple
+            ? checked
+            : highlighted || undefined;
+    return (jsxs("div", { className: classNames(itemClass, className), ...props, ref: itemRef, id: engine.itemId(value) || undefined, role: "option", "aria-selected": selected, "aria-disabled": disabled || undefined, onClick: event => {
+            onClick?.(event);
+            if (!disabled && !event.defaultPrevented)
+                engine.pick(value);
+        }, onPointerMove: event => {
+            onPointerMove?.(event);
+            if (!disabled && !highlighted)
+                engine.hover(value);
+        }, children: [checked && (jsx("span", { className: checkClass, "aria-hidden": "true", children: jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "1em", height: "1em", focusable: "false", children: jsx("polyline", { points: "3 8.5 6.5 12 13 4.5" }) }) })), children] }));
+};
+ComboboxItem.displayName = 'ComboboxItem';
+/**
+ * Items under a heading, a `group` named by it.
+ *
+ * @function
+ * @param {ComboboxGroupProps} props - Props for the Combobox.Group component.
+ * @returns {JSX.Element} The group and its heading.
+ */
+const ComboboxGroup = ({ label, children, className, ...props }) => {
+    const labelId = useId();
+    const groupClass = usePrefixedClassNames('combobox-group');
+    const labelClass = usePrefixedClassNames('combobox-group-label');
+    // A name the caller gave the group wins over its heading's, as on the list.
+    const callerNamed = !!props['aria-label'] || 'aria-labelledby' in props;
+    return (jsxs("div", { className: classNames(groupClass, className), ...props, role: "group", "aria-labelledby": callerNamed ? props['aria-labelledby'] : labelId, children: [jsx("div", { className: labelClass, id: labelId, children: label }), children] }));
+};
+ComboboxGroup.displayName = 'ComboboxGroup';
+/**
+ * The message shown in place of the list when nothing matches, announced when typing brings it on screen.
+ *
+ * @function
+ * @param {ComboboxEmptyProps} props - Props for the Combobox.Empty component.
+ * @returns {JSX.Element} The message.
+ */
+const ComboboxEmpty = ({ children, className, onMouseDown, ...props }) => {
+    const { engine, reportEmpty } = useCombobox();
+    const emptyRef = useRef(null);
+    useClientLayoutEffect(() => reportEmpty(emptyRef.current), [reportEmpty]);
+    const emptyClass = usePrefixedClassNames('combobox-empty');
+    return (jsx("div", { className: classNames(emptyClass, className), ...props, ref: emptyRef, onMouseDown: event => {
+            onMouseDown?.(event);
+            engine.keepFocus(event);
+        }, children: children }));
+};
+ComboboxEmpty.displayName = 'ComboboxEmpty';
+/** An entry in `data` as an item: a string is its own label. */
+const toItem = (entry) => typeof entry === 'string' ? { value: entry, label: entry } : entry;
+const labelOf = (item) => item.label ?? item.value;
+/** One value or several, as a list: one value is a list of none or one. */
+const asList = (value) => value == null ? [] : Array.isArray(value) ? value : [value];
+/**
+ * The Combobox given `data`. It renders the parts itself, filters the items
+ * by label as the user types, and keeps the value, so a pick goes through
+ * the same parts, keys and ARIA as one built by hand.
+ */
+const ComboboxFromData = forwardRef((props, ref) => {
+    const { data, value, defaultValue, 
+    // Called below through `props`, which knows which value it takes.
+    onChange: _onChange, multiple = false, placeholder, name, empty, itemTemplate, onSelect, onOpenChange, inline = false, disabled = false, required = false, form, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ariaCloseLabel, children, ...rest } = props;
+    // A name given in place of a label is the field's and the list's, not
+    // the wrapper's. Only the ones given are passed, since an
+    // `aria-labelledby` that's there at all, even undefined, keeps the
+    // label's name off the field.
+    const named = {
+        ...(ariaLabel !== undefined && { 'aria-label': ariaLabel }),
+        ...(ariaLabelledBy !== undefined && {
+            'aria-labelledby': ariaLabelledBy,
+        }),
+    };
+    if (flattenChildren(children).length > 0) {
+        warnOnce('Combobox:data-children', '[bestax-bulma] <Combobox data> renders its own field, menu and ' +
+            'items, so its children are ignored. Give it data or build it ' +
+            'from parts, not both.');
+    }
+    const items = data.map(toItem);
+    const labelFor = (picked) => {
+        const item = items.find(entry => entry.value === picked);
+        return item ? labelOf(item) : picked;
+    };
+    const controlled = value !== undefined;
+    const [ownValue, setOwnValue] = useState(() => asList(defaultValue));
+    const picked = controlled ? asList(value) : ownValue;
+    const change = (next) => {
+        if (!controlled)
+            setOwnValue(next);
+        if (props.multiple === true)
+            props.onChange?.(next);
+        else
+            props.onChange?.(next[0] ?? null);
+    };
+    // What's typed, or `null` while the field shows the value instead. The
+    // ref holds it as it is now, since a pick sets it and the list's closing
+    // reads it in the same event, before a render.
+    const [query, setQueryState] = useState(null);
+    const queryRef = useRef(null);
+    const setQuery = (next) => {
+        queryRef.current = next;
+        setQueryState(next);
+    };
+    // Once the list closes or the field is left, the field shows the value
+    // again: typed text goes back to the pick, and with one value a field
+    // left empty clears it.
+    const settle = () => {
+        if (!multiple && queryRef.current === '' && picked.length > 0) {
+            change([]);
+        }
+        setQuery(null);
+    };
+    const term = (query ?? '').trim().toLowerCase();
+    const shown = items.filter(item => labelOf(item).toLowerCase().includes(term));
+    const inputRef = useRef(null);
+    const select = (pick) => {
+        onSelect?.(pick);
+        if (multiple) {
+            change(picked.includes(pick)
+                ? picked.filter(v => v !== pick)
+                : [...picked, pick]);
+        }
+        else {
+            if (picked[0] !== pick)
+                change([pick]);
+            setQuery(null);
+        }
+    };
+    const remove = (pick) => {
+        change(picked.filter(v => v !== pick));
+        inputRef.current?.focus();
+    };
+    // The picks, for the field's description, since its text is the search.
+    const tagsId = useId();
+    const tagIds = picked.map((_, index) => `${tagsId}-${index}`);
+    // Each group where `data` first names it, and the items with none
+    // together where the first of them is.
+    const sections = new Map();
+    for (const item of shown) {
+        const group = item.group ?? '';
+        sections.set(group, [...(sections.get(group) ?? []), item]);
+    }
+    const renderItem = (item) => (jsx(ComboboxItem, { value: item.value, disabled: disabled || item.disabled, checked: picked.includes(item.value), children: itemTemplate ? itemTemplate(item) : labelOf(item) }, item.value));
+    const list = shown.length > 0 ? (jsx(ComboboxList, { ...named, children: Array.from(sections, ([group, members]) => group ? (jsx(ComboboxGroup, { label: group, children: members.map(renderItem) }, group)) : (members.map(renderItem))) })) : empty ? (jsx(ComboboxEmpty, { children: empty })) : null;
+    return (jsxs(ComboboxParts, { ...rest, ref: ref, multiple: multiple, inline: inline, onSelect: select, onSettle: settle, onOpenChange: next => {
+            if (!next)
+                settle();
+            onOpenChange?.(next);
+        }, below: multiple
+            ? picked.length > 0 && (jsx(Tags, { mt: "2", children: picked.map((v, index) => (jsxs(Tag, { children: [jsx("span", { id: tagIds[index], children: labelFor(v) }), !disabled && (jsx(Delete, { size: "small", ariaLabel: ariaCloseLabel || `Remove ${labelFor(v)}`, "aria-describedby": ariaCloseLabel ? tagIds[index] : undefined, onClick: () => remove(v) }))] }, v))) }))
+            : undefined, children: [jsx(ComboboxInput, { ...named, ref: inputRef, id: id, disabled: disabled, 
+                // The browser's check reads the field's text, and only a pick
+                // fills it for good, so it's required until there is one.
+                required: required && picked.length === 0, "aria-required": required || undefined, form: form, "aria-describedby": multiple && picked.length > 0 ? tagIds.join(' ') : undefined, placeholder: placeholder, value: query ??
+                    (multiple || picked.length === 0 ? '' : labelFor(picked[0])), onChange: event => setQuery(event.target.value), onBlur: settle }), inline ? list : jsx(ComboboxMenu, { children: list }), name &&
+                (multiple ? picked : [picked[0] ?? '']).map(v => (jsx("input", { type: "hidden", name: name, value: v, form: form, disabled: disabled }, v)))] }));
+});
+ComboboxFromData.displayName = 'ComboboxFromData';
+/**
+ * The `Combobox` component is a text field with a list to pick from under it, for a searchable select, a multi-select with tags, grouped items or a server search: given `data` it does the rest, and built from parts it leaves the data to you.
+ *
+ * Given `data`, it's one element. It renders the field, the menu, the list,
+ * the groups and the empty message, filters the items by label as the user
+ * types, and keeps the value, which `onChange` reports. With `multiple`, the
+ * picks show as tags under the field.
+ *
+ * Built from parts, the app owns the data: what's in the list, how it's
+ * filtered, and the value. A pick calls `onSelect` with the item's `value`,
+ * and the Combobox keeps no value and never changes the text in the field,
+ * so the app sets both there. Nothing filters the items either, so a
+ * server's answer shows as it came. For a free-text field with suggestions,
+ * `Autocomplete` is the simpler choice.
+ *
+ * Either way, focus stays in the field, and the highlighted item is its
+ * `aria-activedescendant`. With one value, the highlighted item is the
+ * `aria-selected` one, as the ARIA Authoring Practices' combobox does it, and
+ * a `checked` item shows a check mark and takes the highlight when the list
+ * opens. With `multiple`, `checked` is each item's `aria-selected`. Tab and
+ * focus leaving close the menu without picking.
+ *
+ * When typing leaves the empty message on screen, its text is announced
+ * through a polite status region, once, after any loading ends. Result
+ * counts aren't announced: a screen reader reads the list's size from the
+ * markup, and a count on every keystroke talks over the typing. Show one in
+ * a `role="status"` line beside the field when it matters.
+ *
+ * @function
+ * @param {ComboboxProps} props - Props for the Combobox component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the `div.combobox`.
+ * @returns {JSX.Element} The field and its list, in a `Field` with the label unless one is around it.
+ *
+ * @example
+ * <Combobox
+ *   label="Country"
+ *   data={['Canada', 'France', 'Japan']}
+ *   placeholder="Pick a country"
+ *   empty="No countries match"
+ * />
+ *
+ * @example
+ * <Combobox label="Country" onSelect={pick}>
+ *   <Combobox.Input value={query} onChange={e => setQuery(e.target.value)} />
+ *   <Combobox.Menu>
+ *     {matches.length > 0 ? (
+ *       <Combobox.List>
+ *         {matches.map(c => (
+ *           <Combobox.Item key={c} value={c} checked={c === value}>
+ *             {c}
+ *           </Combobox.Item>
+ *         ))}
+ *       </Combobox.List>
+ *     ) : (
+ *       <Combobox.Empty>No countries match</Combobox.Empty>
+ *     )}
+ *   </Combobox.Menu>
+ * </Combobox>
+ */
+const ComboboxRoot = forwardRef((props, ref) => props.data === undefined ? (jsx(ComboboxParts, { ...props, ref: ref })) : (jsx(ComboboxFromData, { ...props, ref: ref })));
+/** Combobox with Input, Menu, List, Item, Group and Empty sub-components. */
+const Combobox = withSubComponents(ComboboxRoot, {
+    Input: ComboboxInput,
+    Menu: ComboboxMenu,
+    List: ComboboxList,
+    Item: ComboboxItem,
+    Group: ComboboxGroup,
+    Empty: ComboboxEmpty,
+}, 'Combobox');
+
+export { Combobox, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxList, ComboboxMenu };
+//# sourceMappingURL=Combobox.js.map