@neo4j-ndl/react 4.18.12 → 4.19.0

package/lib/cjs/combobox/Combobox.js

@@ -0,0 +1,1031 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Combobox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+const react_1 = require("@floating-ui/react");
+const react_virtual_1 = require("@tanstack/react-virtual");
+const classnames_1 = __importDefault(require("classnames"));
+const react_2 = require("react");
+const use_semi_controlled_state_1 = require("../_common/use-semi-controlled-state");
+const utils_1 = require("../_common/utils");
+const checkbox_1 = require("../checkbox");
+const conditional_wrap_1 = require("../conditional-wrap");
+const dismissible_tag_1 = require("../dismissible-tag");
+const divider_1 = require("../divider");
+const heroIcons_1 = require("../icons/generated/heroIcons");
+const loading_spinner_1 = require("../loading-spinner");
+const read_only_tag_1 = require("../read-only-tag");
+const theme_1 = require("../theme");
+const typography_1 = require("../typography");
+const combobox_utils_1 = require("./combobox-utils");
+const use_combobox_multi_value_overflow_1 = require("./use-combobox-multi-value-overflow");
+const use_combobox_popover_1 = require("./use-combobox-popover");
+const DEFAULT_SEARCH_PLACEHOLDER = 'Search';
+const DEFAULT_PLACEHOLDER = 'Select...';
+const DEFAULT_LOADING_MESSAGE = 'Loading...';
+const NO_ACTIVE_INDEX = -1;
+const OPENING_KEYS = ['ArrowDown', 'ArrowUp', 'Enter', ' '];
+// Above this many rendered rows - options and group headers - the listbox
+// switches to windowed rendering. Below it, the DOM, including the nested
+// group semantics, is exactly what it always was.
+const VIRTUALIZATION_ROW_THRESHOLD = 100;
+// Starting guess only: every virtual row is measured once rendered.
+const VIRTUAL_ROW_ESTIMATED_HEIGHT = 38;
+// With a row limit, at most this many candidate tags per permitted row are
+// rendered and measured; anything past them is overflowed arithmetically. Far
+// more than fit a row even with the narrowest plausible tags.
+const TAG_CANDIDATES_PER_ROW = 50;
+// The counter's title and screen reader text name at most this many overflowed
+// options before summarizing the rest as a count.
+const OVERFLOW_LABEL_LIMIT = 20;
+// The hidden form select mirrors the options so browser autofill can match
+// against them, but past this many the DOM cost outweighs an autofill list
+// nobody scrolls. Above it, only what submission, validation, and reset need
+// is mirrored: the selection and the default value. Matches the limit React
+// Aria's HiddenSelect uses for the same trade-off.
+const FORM_OPTION_MIRROR_LIMIT = 300;
+/**
+ * Flattens the grouped option items into display rows for the virtualizer,
+ * along with a lookup from an option's flat index - the one behind option ids
+ * and the active index - to its display row index. Pinned action rows sit at
+ * the end of the flat indices but get no display row, so the lookup simply
+ * misses for them.
+ */
+const buildComboboxDisplayRows = (optionItems) => {
+    const displayRows = [];
+    const flatToDisplayIndex = [];
+    const pushOption = (row) => {
+        flatToDisplayIndex.push(displayRows.length);
+        displayRows.push({ kind: 'option', row });
+    };
+    optionItems.forEach((item) => {
+        if ((0, combobox_utils_1.isOptionGroup)(item)) {
+            displayRows.push({ kind: 'group-header', label: item.label });
+            item.options.forEach(pushOption);
+            return;
+        }
+        pushOption(item);
+    });
+    return { displayRows, flatToDisplayIndex };
+};
+const Combobox = ({ label, name, formId, autoComplete, triggerRef, hasVisuallyHiddenLabel = false, helpText, errorText, isRequired = false, hasRequiredIndicator = false, options, value, defaultValue, onChange, isMulti = false, isSearchable = true, searchValue, defaultSearchValue, onSearchChange, filterOption, searchPlaceholder = DEFAULT_SEARCH_PLACEHOLDER, isLoading = false, loadingMessage = DEFAULT_LOADING_MESSAGE, isCreatable = false, onCreateOption, createOption = combobox_utils_1.buildCreateOption, formatCreateLabel = combobox_utils_1.formatCreateOptionLabel, isValidNewOption = combobox_utils_1.isValidNewComboboxOption, actions, maxRows = 1, isOpen, onOpenChange, isClearable = false, placeholder = DEFAULT_PLACEHOLDER, isDisabled = false, size = 'medium', isFluid = false, isClean = false, isPortaled, portalTarget, floatingStrategy, renderTrigger, components = {}, className, style, htmlAttributes, ref, }) => {
+    var _a;
+    const baseId = (0, react_2.useId)();
+    const listboxId = `${baseId}-listbox`;
+    const panelId = `${baseId}-panel`;
+    const triggerId = `${baseId}-trigger`;
+    const labelId = `${baseId}-label`;
+    const helpTextId = `${baseId}-help-text`;
+    const errorTextId = `${baseId}-error-text`;
+    const initialValue = (0, combobox_utils_1.getInitialValue)(value, defaultValue, isMulti);
+    const [selectedValue, setSelectedValue, resetSelectedValue] = (0, use_semi_controlled_state_1.useSemicontrolledState)({
+        isControlled: value !== undefined,
+        onChange: (nextValue) => {
+            if (isMulti) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(Array.isArray(nextValue) ? nextValue : []);
+            }
+            else if (!Array.isArray(nextValue)) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+            }
+        },
+        state: initialValue,
+    });
+    const [currentSearchValue, setCurrentSearchValue, resetSearchValue] = (0, use_semi_controlled_state_1.useSemicontrolledState)({
+        isControlled: searchValue !== undefined,
+        onChange: onSearchChange,
+        state: (_a = searchValue !== null && searchValue !== void 0 ? searchValue : defaultSearchValue) !== null && _a !== void 0 ? _a : '',
+    });
+    const [isPanelOpen, setIsPanelOpen, resetPanelOpen] = (0, use_semi_controlled_state_1.useSemicontrolledState)({
+        isControlled: isOpen !== undefined,
+        onChange: onOpenChange,
+        state: isOpen !== null && isOpen !== void 0 ? isOpen : false,
+    });
+    const { themeClassName } = (0, theme_1.useNeedleTheme)();
+    const internalTriggerRef = (0, react_2.useRef)(null);
+    const searchInputRef = (0, react_2.useRef)(null);
+    const { context, floatingStyles, getFloatingProps, getReferenceProps, isPortaled: isPanelPortaled, refs, } = (0, use_combobox_popover_1.useComboboxPopover)({
+        floatingStrategy,
+        isDisabled,
+        isOpen: isPanelOpen,
+        isPortaled,
+        onOpenChange: setIsPanelOpen,
+    });
+    const hasCustomTrigger = renderTrigger !== undefined;
+    const builtInTriggerRef = (0, react_1.useMergeRefs)([internalTriggerRef, triggerRef]);
+    const customTriggerRef = (0, react_1.useMergeRefs)([
+        refs.setReference,
+        internalTriggerRef,
+        triggerRef,
+    ]);
+    // Creating builds an option out of the search value, so there is nothing to
+    // create from without a search input.
+    const canCreate = isCreatable && isSearchable;
+    (0, react_2.useEffect)(() => {
+        if (isCreatable && !isSearchable) {
+            (0, utils_1.needleWarningMessage)('A creatable Combobox also needs isSearchable, since a new option is built from the search value.');
+        }
+    }, [isCreatable, isSearchable]);
+    const selectedOptions = getSelectedOptions(selectedValue);
+    const resetValue = (0, combobox_utils_1.getInitialValue)(undefined, defaultValue, isMulti);
+    const resetSelectedOptions = getSelectedOptions(resetValue);
+    const selectedValuesKey = selectedOptions
+        .map((option) => option.value)
+        .join('\u0000');
+    // Selection checks run once per rendered option, so with large lists they
+    // must not scan the selection array each time.
+    const selectedValuesSet = (0, react_2.useMemo)(() => new Set(getSelectedOptions(selectedValue).map(({ value }) => value)), [selectedValue]);
+    const allOptions = (0, react_2.useMemo)(() => (0, combobox_utils_1.flattenComboboxOptions)(options), [options]);
+    const [nativeValidationMessage, setNativeValidationMessage] = (0, react_2.useState)(undefined);
+    const formOptions = (0, react_2.useMemo)(() => {
+        const seenValues = new Set();
+        // The default value options are mirrored even above the limit, since the
+        // native select can only reset to options it renders.
+        const mirroredOptions = allOptions.length > FORM_OPTION_MIRROR_LIMIT
+            ? [
+                ...getSelectedOptions(selectedValue),
+                ...getSelectedOptions((0, combobox_utils_1.getInitialValue)(undefined, defaultValue, isMulti)),
+            ]
+            : [...allOptions, ...getSelectedOptions(selectedValue)];
+        return mirroredOptions.filter((option) => {
+            if (seenValues.has(option.value)) {
+                return false;
+            }
+            seenValues.add(option.value);
+            return true;
+        });
+    }, [allOptions, selectedValue, defaultValue, isMulti]);
+    (0, react_2.useEffect)(() => {
+        setNativeValidationMessage(undefined);
+    }, [selectedValuesKey]);
+    const resetFromForm = () => {
+        resetSelectedValue(resetValue);
+        resetSearchValue(defaultSearchValue !== null && defaultSearchValue !== void 0 ? defaultSearchValue : '');
+        resetPanelOpen(false);
+        setNativeValidationMessage(undefined);
+    };
+    const filteredOptions = (0, react_2.useMemo)(() => isSearchable
+        ? (0, combobox_utils_1.filterComboboxOptions)(options, currentSearchValue, filterOption)
+        : options, [isSearchable, options, currentSearchValue, filterOption]);
+    // Created options are never added to `options`, so the selection is offered
+    // for deduplication as well.
+    const createRow = canCreate &&
+        isValidNewOption(currentSearchValue, [...allOptions, ...selectedOptions])
+        ? (0, combobox_utils_1.asCreateOption)(createOption(currentSearchValue))
+        : undefined;
+    // The create row is appended after any groups rather than inside one, since it
+    // belongs to the list as a whole.
+    const optionItems = createRow === undefined ? filteredOptions : [...filteredOptions, createRow];
+    // Actions are not data, so they survive filtering and close the list off at
+    // the end, after anything that selects.
+    const actionRows = (actions !== null && actions !== void 0 ? actions : []).map(combobox_utils_1.asActionRow);
+    const flatOptions = [
+        ...(0, combobox_utils_1.flattenComboboxOptions)(optionItems),
+        ...actionRows,
+    ];
+    const optionsKey = flatOptions.map((option) => option.value).join('\u0000');
+    // Ids and hover both need a row's index; one O(n) map build per render
+    // replaces an O(n) scan per rendered row.
+    const rowIndexes = new Map(flatOptions.map((row, index) => [row, index]));
+    const getOptionId = (row) => { var _a; return `${baseId}-option-${(_a = rowIndexes.get(row)) !== null && _a !== void 0 ? _a : NO_ACTIVE_INDEX}`; };
+    const groupHeaderCount = optionItems.reduce((count, item) => ((0, combobox_utils_1.isOptionGroup)(item) ? count + 1 : count), 0);
+    // Only the options listbox is windowed; the pinned action rows below it
+    // are always rendered, so they do not count towards the threshold.
+    const displayRowCount = flatOptions.length - actionRows.length + groupHeaderCount;
+    const isListVirtualized = displayRowCount > VIRTUALIZATION_ROW_THRESHOLD;
+    const virtualRows = isListVirtualized
+        ? buildComboboxDisplayRows(optionItems)
+        : undefined;
+    // Registered by the virtualized listbox while it is mounted, since scrolling
+    // a windowed list works by index rather than by element.
+    const scrollToActiveRowRef = (0, react_2.useRef)(null);
+    // No option is active until the user navigates or hovers, so nothing is
+    // highlighted and Enter is inert before then.
+    const [activeIndex, setActiveIndex] = (0, react_2.useState)(NO_ACTIVE_INDEX);
+    const [renderedOptionsKey, setRenderedOptionsKey] = (0, react_2.useState)(optionsKey);
+    const wasActivatedByPointerRef = (0, react_2.useRef)(false);
+    // Indices change meaning when the list is filtered, so a stale one would
+    // point at the wrong option.
+    if (renderedOptionsKey !== optionsKey) {
+        setRenderedOptionsKey(optionsKey);
+        setActiveIndex(NO_ACTIVE_INDEX);
+    }
+    const activeOption = flatOptions[activeIndex];
+    const activeOptionId = activeOption === undefined ? undefined : getOptionId(activeOption);
+    // The listbox scrolls, so keep the virtually focused option visible.
+    // Pointer activation is skipped, otherwise hovering a partially visible
+    // option would nudge the list out from under the cursor. Pinned action rows
+    // sit outside the scrolling listbox and are always visible, so scrolling
+    // for them is a harmless no-op in both paths.
+    (0, react_2.useEffect)(() => {
+        var _a;
+        if (wasActivatedByPointerRef.current) {
+            wasActivatedByPointerRef.current = false;
+            return;
+        }
+        if (activeOptionId === undefined) {
+            return;
+        }
+        // A windowed listbox scrolls by index, since the active option's element
+        // may not be mounted yet. Scrolling is also what mounts it, keeping
+        // aria-activedescendant resolvable.
+        if (scrollToActiveRowRef.current !== null) {
+            scrollToActiveRowRef.current(activeIndex);
+            return;
+        }
+        (_a = document
+            .getElementById(activeOptionId)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
+    }, [activeOptionId, activeIndex]);
+    // Reopening the panel starts with nothing highlighted, the same as the first
+    // open, so a stale active option can never be one Enter away from selection.
+    (0, react_2.useEffect)(() => {
+        if (!isPanelOpen) {
+            setActiveIndex(NO_ACTIVE_INDEX);
+        }
+    }, [isPanelOpen]);
+    const isOptionSelected = (option) => selectedValuesSet.has(option.value);
+    const selectOption = (option) => {
+        if (isMulti) {
+            const currentValue = Array.isArray(selectedValue) ? selectedValue : [];
+            const isSelected = selectedValuesSet.has(option.value);
+            const nextValue = isSelected
+                ? currentValue.filter((selected) => selected.value !== option.value)
+                : [...currentValue, option];
+            setSelectedValue(nextValue);
+            // Multi select keeps the panel open so several options can be picked in
+            // one pass, matching Select.
+            return;
+        }
+        if (Array.isArray(selectedValue) || (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) !== option.value) {
+            setSelectedValue(option);
+        }
+        setIsPanelOpen(false);
+    };
+    const createFromSearch = () => {
+        const created = createOption(currentSearchValue);
+        selectOption(created);
+        onCreateOption === null || onCreateOption === void 0 ? void 0 : onCreateOption(created);
+        // Multi select stays open, so the query is reset to leave the full list
+        // usable for the next pick.
+        setCurrentSearchValue('');
+    };
+    const handleOptionChange = (row) => {
+        if (isDisabled || row.isDisabled) {
+            return;
+        }
+        // An action leaves the selection alone, so it only runs and closes.
+        if ((0, combobox_utils_1.isActionRow)(row)) {
+            (0, combobox_utils_1.getAction)(row).onSelect({ searchValue: currentSearchValue });
+            setIsPanelOpen(false);
+            return;
+        }
+        if ((0, combobox_utils_1.isCreateOption)(row)) {
+            createFromSearch();
+            return;
+        }
+        selectOption(row);
+    };
+    const clearSelection = () => {
+        if (isDisabled) {
+            return;
+        }
+        setSelectedValue(isMulti ? [] : null);
+    };
+    const removeOption = (option) => {
+        if (isDisabled) {
+            return;
+        }
+        if (!isMulti) {
+            clearSelection();
+            return;
+        }
+        setSelectedValue(selectedOptions.filter((selected) => selected.value !== option.value));
+    };
+    // Hover and the keyboard share one active option, so exactly one option is
+    // ever highlighted. Unlike the keyboard, hover skips disabled options: a
+    // pointer user sees the disabled state directly, so there is no
+    // discoverability to preserve.
+    const handleOptionHover = (row) => {
+        var _a;
+        if (row.isDisabled === true) {
+            return;
+        }
+        const index = (_a = rowIndexes.get(row)) !== null && _a !== void 0 ? _a : NO_ACTIVE_INDEX;
+        if (index === activeIndex) {
+            return;
+        }
+        wasActivatedByPointerRef.current = true;
+        setActiveIndex(index);
+    };
+    // Disabled options are included so they stay discoverable to screen reader
+    // users, per the APG guidance on disabled controls in composite widgets.
+    // Activating one is a no-op.
+    const moveActiveIndex = (direction) => {
+        if (activeIndex === NO_ACTIVE_INDEX) {
+            setActiveIndex(direction === 1
+                ? (0, combobox_utils_1.getFirstOptionIndex)(flatOptions)
+                : (0, combobox_utils_1.getLastOptionIndex)(flatOptions));
+            return;
+        }
+        setActiveIndex((0, combobox_utils_1.getNextOptionIndex)(flatOptions, activeIndex, direction));
+    };
+    /**
+     * Shared by the search input and the select-only trigger, since both drive
+     * the same virtual focus. Returns whether the key was consumed.
+     */
+    const handleNavigationKeyDown = (event) => {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                moveActiveIndex(1);
+                return true;
+            case 'ArrowUp':
+                event.preventDefault();
+                moveActiveIndex(-1);
+                return true;
+            case 'Home':
+                event.preventDefault();
+                setActiveIndex((0, combobox_utils_1.getFirstOptionIndex)(flatOptions));
+                return true;
+            case 'End':
+                event.preventDefault();
+                setActiveIndex((0, combobox_utils_1.getLastOptionIndex)(flatOptions));
+                return true;
+            case 'Enter':
+                if (activeOption === undefined) {
+                    return false;
+                }
+                event.preventDefault();
+                handleOptionChange(activeOption);
+                return true;
+            default:
+                return false;
+        }
+    };
+    const handleSearchKeyDown = (event) => {
+        // Home and End belong to the text cursor while typing.
+        if (event.key === 'Home' || event.key === 'End') {
+            return;
+        }
+        if (handleNavigationKeyDown(event)) {
+            return;
+        }
+        if (event.key === 'Escape') {
+            // Escape belongs to this combobox: close immediately and keep it from
+            // dismissing an enclosing dialog, popover, or other composite widget.
+            event.preventDefault();
+            event.stopPropagation();
+            if (currentSearchValue !== '') {
+                setCurrentSearchValue('');
+            }
+            setIsPanelOpen(false);
+        }
+    };
+    const handleTriggerKeyDown = (event) => {
+        if (isDisabled) {
+            return;
+        }
+        if (!isPanelOpen) {
+            if (!OPENING_KEYS.includes(event.key)) {
+                return;
+            }
+            // Preventing the default keeps the button from synthesizing a click,
+            // which would let useClick toggle the panel straight back shut.
+            event.preventDefault();
+            setIsPanelOpen(true);
+            if (!isSearchable && event.key === 'ArrowDown') {
+                setActiveIndex((0, combobox_utils_1.getFirstOptionIndex)(flatOptions));
+            }
+            else if (!isSearchable && event.key === 'ArrowUp') {
+                setActiveIndex((0, combobox_utils_1.getLastOptionIndex)(flatOptions));
+            }
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            setIsPanelOpen(false);
+            return;
+        }
+        // A searchable panel holds DOM focus in its search input, so the trigger
+        // only ever sees keys while the panel is closed.
+        if (isSearchable) {
+            return;
+        }
+        if (event.key === ' ' && activeOption !== undefined) {
+            event.preventDefault();
+            handleOptionChange(activeOption);
+            return;
+        }
+        if (handleNavigationKeyDown(event)) {
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            setIsPanelOpen(false);
+        }
+    };
+    // Actions are rows of the listbox but not results, so they keep the list
+    // rendered without hiding the message that nothing matched.
+    const hasRows = flatOptions.length > 0;
+    const hasOptionRows = flatOptions.length > actionRows.length;
+    // The pinned action rows live outside the scrolling listbox, so the listbox
+    // claims them through aria-owns to keep them its logical children.
+    const actionOwnsIds = actionRows.length > 0
+        ? actionRows.map((row) => getOptionId(row)).join(' ')
+        : undefined;
+    const isDialogPanel = isSearchable;
+    // An error replaces the help text, so only one message is ever rendered and
+    // only that one is described.
+    const displayedErrorText = errorText !== null && errorText !== void 0 ? errorText : nativeValidationMessage;
+    const hasError = Boolean(displayedErrorText);
+    const hasHelpText = Boolean(helpText) && !hasError;
+    const messageId = hasError ? errorTextId : helpTextId;
+    const describedById = hasError || hasHelpText ? messageId : undefined;
+    const triggerAria = {
+        'aria-activedescendant': isPanelOpen && !isSearchable ? activeOptionId : undefined,
+        'aria-controls': getTriggerControlsId({
+            hasRows,
+            isDialogPanel,
+            isPanelOpen,
+            listboxId,
+            panelId,
+        }),
+        'aria-describedby': describedById,
+        'aria-disabled': isDisabled ? true : undefined,
+        'aria-expanded': isPanelOpen,
+        'aria-haspopup': isDialogPanel ? 'dialog' : 'listbox',
+        'aria-invalid': hasError ? true : undefined,
+        'aria-required': isRequired ? true : undefined,
+        // The label points at the trigger through `htmlFor`, so clicking it moves
+        // focus to the trigger.
+        id: triggerId,
+        onKeyDown: handleTriggerKeyDown,
+        role: 'combobox',
+    };
+    // A custom trigger becomes the anchor itself, so it gets the reference props
+    // and the reference ref. The built-in trigger leaves both to its wrapper,
+    // which is what the panel should size to, and takes only the ARIA.
+    //
+    // It is also named by the label text itself rather than by a reference to it,
+    // since a custom trigger is free to leave the label unrendered.
+    const triggerProps = Object.assign(Object.assign(Object.assign({}, getReferenceProps()), triggerAria), { 'aria-label': label, ref: customTriggerRef });
+    const builtInTriggerProps = Object.assign(Object.assign({}, triggerAria), { 
+        // The label row also holds the required indicator, so only the label text
+        // is referenced, keeping "Optional" out of the accessible name.
+        'aria-labelledby': labelId, ref: builtInTriggerRef });
+    const field = {
+        errorText: displayedErrorText,
+        errorTextId,
+        hasError,
+        hasRequiredIndicator,
+        hasVisuallyHiddenLabel,
+        helpText,
+        helpTextId,
+        isRequired,
+        label,
+        labelId,
+        triggerId,
+    };
+    const triggerState = {
+        clear: clearSelection,
+        field,
+        isDisabled,
+        isMulti,
+        isOpen: isPanelOpen,
+        remove: removeOption,
+        selectedOptions,
+    };
+    // While windowed, the DOM no longer holds every option, so each one carries
+    // its position in the full list for assistive technology.
+    const getSetPositionProps = (row) => {
+        var _a;
+        return isListVirtualized
+            ? {
+                posInSet: ((_a = rowIndexes.get(row)) !== null && _a !== void 0 ? _a : 0) + 1,
+                setSize: flatOptions.length,
+            }
+            : {};
+    };
+    const renderOption = (option) => {
+        var _a;
+        const sharedProps = Object.assign({ id: getOptionId(option), isFocused: option === activeOption, onClick: () => handleOptionChange(option), onHover: () => handleOptionHover(option) }, getSetPositionProps(option));
+        // The create row is never selected and shows the create text rather than
+        // the label of the option it would produce.
+        if ((0, combobox_utils_1.isCreateOption)(option)) {
+            return ((0, jsx_runtime_1.jsx)(Option, Object.assign({}, sharedProps, { isCreate: true, isSelected: false, children: (0, jsx_runtime_1.jsx)(CreateOptionContent, { children: formatCreateLabel(currentSearchValue) }) }), "ndl-combobox-create"));
+        }
+        const { OptionLabel } = components;
+        const isSelected = isOptionSelected(option);
+        return ((0, jsx_runtime_1.jsx)(Option, Object.assign({}, sharedProps, { isSelected: isSelected, isDisabled: option.isDisabled, children: (0, jsx_runtime_1.jsx)(OptionContent, { label: option.label, customLabel: OptionLabel === undefined ? undefined : ((0, jsx_runtime_1.jsx)(OptionLabel, { option: option, isSelected: isSelected, isDisabled: (_a = option.isDisabled) !== null && _a !== void 0 ? _a : false, isFocused: option === activeOption, isMulti: isMulti, size: size })), description: option.description, leadingVisual: option.leadingVisual, isDisabled: option.isDisabled, isSelected: isSelected, isMulti: isMulti }) }), option.value));
+    };
+    // An action row shares the chrome of an option but never the selection, so it
+    // is rendered as a single select row: its own leading visual instead of a
+    // checkbox, and no selection indicator.
+    const renderAction = (row) => {
+        const action = (0, combobox_utils_1.getAction)(row);
+        return ((0, jsx_runtime_1.jsx)(Option, Object.assign({ id: getOptionId(row), isAction: true, isDisabled: action.isDisabled, isFocused: row === activeOption, onClick: () => handleOptionChange(row), onHover: () => handleOptionHover(row) }, getSetPositionProps(row), { children: (0, jsx_runtime_1.jsx)(OptionContent, { label: action.label, description: action.description, leadingVisual: action.leadingVisual, isDisabled: action.isDisabled }) }), row.value));
+    };
+    const panel = ((0, jsx_runtime_1.jsxs)(Panel, Object.assign({}, getFloatingProps(), { ref: refs.setFloating, id: panelId, ariaLabel: label, isDialog: isDialogPanel, className: themeClassName, style: floatingStyles, children: [isSearchable && ((0, jsx_runtime_1.jsx)(Input, { ref: searchInputRef, ariaLabel: searchPlaceholder, value: currentSearchValue, onValueChange: setCurrentSearchValue, placeholder: searchPlaceholder, listboxId: hasRows ? listboxId : undefined, activeOptionId: hasRows ? activeOptionId : undefined, onKeyDown: handleSearchKeyDown })), !hasOptionRows &&
+                (isLoading ? ((0, jsx_runtime_1.jsx)(LoadingState, { children: loadingMessage })) : ((0, jsx_runtime_1.jsx)(EmptyState, {}))), hasOptionRows &&
+                (virtualRows !== undefined ? ((0, jsx_runtime_1.jsx)(VirtualizedListBox, { id: listboxId, ariaLabel: label, isMulti: isMulti, ownsIds: actionOwnsIds, rows: virtualRows.displayRows, rowsKey: optionsKey, flatToDisplayIndex: virtualRows.flatToDisplayIndex, scrollToFlatIndexRef: scrollToActiveRowRef, renderRow: renderOption })) : ((0, jsx_runtime_1.jsx)(ListBox, { id: listboxId, ariaLabel: label, isMulti: isMulti, ownsIds: actionOwnsIds, children: optionItems.map((item) => (0, combobox_utils_1.isOptionGroup)(item) ? ((0, jsx_runtime_1.jsx)(Group, { label: item.label, children: item.options.map(renderOption) }, item.label)) : (renderOption(item))) }))), actionRows.length > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, (hasOptionRows
+                ? { role: 'presentation' }
+                : {
+                    'aria-label': label,
+                    'aria-multiselectable': isMulti || undefined,
+                    id: listboxId,
+                    role: 'listbox',
+                }), { className: "ndl-combobox-actions", children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "ndl-combobox-action-divider", htmlAttributes: { 'aria-hidden': true } }), actionRows.map((row, index) => ((0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [index > 0 && (0, combobox_utils_1.getAction)(row).hasDivider === true && ((0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "ndl-combobox-action-divider", htmlAttributes: { 'aria-hidden': true } })), renderAction(row)] }, row.value)))] })))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, style: style, className: (0, classnames_1.default)('ndl-combobox', {
+            'ndl-clean': isClean,
+            'ndl-combobox-custom-trigger': hasCustomTrigger,
+            'ndl-combobox-field': !hasCustomTrigger,
+            'ndl-disabled': isDisabled,
+            'ndl-fluid': isFluid,
+            'ndl-has-error': hasError,
+            'ndl-large': size === 'large',
+            'ndl-medium': size === 'medium',
+            'ndl-small': size === 'small',
+        }, className) }, htmlAttributes, { children: [name !== undefined && ((0, jsx_runtime_1.jsx)(ComboboxFormControl, { ref: internalTriggerRef, name: name, form: formId, autoComplete: autoComplete, options: formOptions, selectedOptions: selectedOptions, resetSelectedOptions: resetSelectedOptions, isMulti: isMulti, isDisabled: isDisabled, isRequired: isRequired, isSelectionControlled: value !== undefined, onValueChange: setSelectedValue, onInvalid: setNativeValidationMessage, onReset: resetFromForm })), renderTrigger === undefined ? ((0, jsx_runtime_1.jsx)(Control, { triggerProps: builtInTriggerProps, state: triggerState, field: field, placeholder: placeholder, isClearable: isClearable, isClean: isClean, size: size, maxRows: isMulti ? maxRows : undefined, components: components, referenceProps: getReferenceProps(), referenceRef: refs.setReference })) : (renderTrigger(triggerProps, triggerState)), context.open && ((0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isPanelPortaled, wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { root: portalTarget, children: wrapChildren })), children: (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, { context: context, modal: false, 
+                    // A select-only combobox keeps DOM focus on the trigger and speaks
+                    // through aria-activedescendant, so nothing inside is focused.
+                    initialFocus: isSearchable ? searchInputRef : -1, returnFocus: internalTriggerRef, children: panel }) }))] })));
+};
+exports.Combobox = Combobox;
+const getTriggerControlsId = ({ isPanelOpen, isDialogPanel, hasRows, panelId, listboxId, }) => {
+    if (!isPanelOpen) {
+        return undefined;
+    }
+    if (isDialogPanel) {
+        return panelId;
+    }
+    // An expanded combobox must always control something, so fall back to the
+    // panel when the list is empty and only the status message is rendered.
+    return hasRows ? listboxId : panelId;
+};
+const getSelectedOptions = (value) => {
+    if (Array.isArray(value)) {
+        return value;
+    }
+    return value === null ? [] : [value];
+};
+/**
+ * A native select mirrors the custom control for submission, autofill,
+ * constraint validation, and reset. It is hidden from assistive technology
+ * because the combobox trigger exposes the same field semantics.
+ *
+ * Above `FORM_OPTION_MIRROR_LIMIT` it receives only the selected and default
+ * options rather than the full list, so autofill has nothing to offer but
+ * everything else keeps working without thousands of mirrored options.
+ */
+const ComboboxFormControl = ({ ref: triggerRef, name, form, autoComplete, options, selectedOptions, resetSelectedOptions, isMulti, isDisabled, isRequired, isSelectionControlled, onValueChange, onInvalid, onReset, }) => {
+    var _a;
+    const selectRef = (0, react_2.useRef)(null);
+    const isDispatchingChangeRef = (0, react_2.useRef)(false);
+    const isResettingRef = (0, react_2.useRef)(false);
+    const skipNextChangeRef = (0, react_2.useRef)(false);
+    const selectedValues = selectedOptions.map((option) => option.value);
+    const resetSelectedValues = resetSelectedOptions.map((option) => option.value);
+    const selectedValuesKey = selectedValues.join('\u0000');
+    const previousValuesKeyRef = (0, react_2.useRef)(selectedValuesKey);
+    const valuesOnReset = isSelectionControlled
+        ? selectedValues
+        : resetSelectedValues;
+    const valuesOnResetKey = valuesOnReset.join('\u0000');
+    (0, react_2.useEffect)(() => {
+        const select = selectRef.current;
+        if (select === null) {
+            return;
+        }
+        const resetValues = new Set(valuesOnReset);
+        Array.from(select.options).forEach((option) => {
+            option.defaultSelected = resetValues.has(option.value);
+        });
+        // valuesOnReset is rebuilt every render, so the effect keys on its content.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [valuesOnResetKey]);
+    (0, react_2.useEffect)(() => {
+        if (previousValuesKeyRef.current === selectedValuesKey) {
+            return;
+        }
+        previousValuesKeyRef.current = selectedValuesKey;
+        if (isResettingRef.current || skipNextChangeRef.current) {
+            skipNextChangeRef.current = false;
+            return;
+        }
+        const select = selectRef.current;
+        if (select === null) {
+            return;
+        }
+        isDispatchingChangeRef.current = true;
+        select.dispatchEvent(new Event('change', { bubbles: true }));
+        isDispatchingChangeRef.current = false;
+    }, [selectedValuesKey]);
+    (0, react_2.useEffect)(() => {
+        const select = selectRef.current;
+        const formElement = select === null || select === void 0 ? void 0 : select.form;
+        if (select === null ||
+            select === undefined ||
+            formElement === null ||
+            formElement === undefined) {
+            return;
+        }
+        const handleReset = () => {
+            isResettingRef.current = true;
+            onReset();
+            window.setTimeout(() => {
+                isResettingRef.current = false;
+            });
+        };
+        formElement.addEventListener('reset', handleReset);
+        return () => formElement.removeEventListener('reset', handleReset);
+    }, [onReset]);
+    const handleChange = (event) => {
+        var _a;
+        if (isDispatchingChangeRef.current) {
+            return;
+        }
+        const optionsByValue = new Map(options.map((option) => [option.value, option]));
+        const nextOptions = Array.from(event.currentTarget.selectedOptions)
+            .map((selectedOption) => optionsByValue.get(selectedOption.value))
+            .filter((option) => option !== undefined);
+        skipNextChangeRef.current =
+            nextOptions.map((option) => option.value).join('\u0000') !==
+                selectedValuesKey;
+        onValueChange(isMulti ? nextOptions : ((_a = nextOptions[0]) !== null && _a !== void 0 ? _a : null));
+    };
+    return ((0, jsx_runtime_1.jsxs)("select", { ref: selectRef, className: "ndl-combobox-form-control", "aria-hidden": "true", tabIndex: -1, name: name, form: form, autoComplete: autoComplete, disabled: isDisabled, required: isRequired, multiple: isMulti, value: isMulti ? selectedValues : ((_a = selectedValues[0]) !== null && _a !== void 0 ? _a : ''), onChange: handleChange, onInvalid: (event) => {
+            var _a;
+            event.preventDefault();
+            onInvalid(event.currentTarget.validationMessage);
+            (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, children: [!isMulti && (0, jsx_runtime_1.jsx)("option", { value: "" }), options.map((option) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, children: option.label }, option.value)))] }));
+};
+const Control = ({ triggerProps, state, field, placeholder, isClearable, isClean, size, maxRows, components, referenceProps, referenceRef, }) => {
+    const { isOpen, isMulti, isDisabled, selectedOptions, clear, remove } = state;
+    const { MultiValue, SingleValue } = components;
+    const { ref: triggerRef } = triggerProps, triggerAria = __rest(triggerProps, ["ref"]);
+    const hasValue = selectedOptions.length > 0;
+    const singleValueOption = isMulti ? undefined : selectedOptions[0];
+    // Selected values are shown as tags, so the trigger renders nothing and is
+    // taken out of the wrapping flow rather than claiming a row of its own.
+    const isTriggerCollapsed = isMulti && hasValue;
+    const multiValueSize = size === 'large' ? 'small' : 'x-small';
+    // `null` opts out of the default row limit, so both it and a missing value
+    // resolve to unlimited, which the hook expresses as undefined.
+    const rowLimit = isMulti && maxRows !== null && maxRows !== undefined ? maxRows : undefined;
+    // Under a row limit only the tags that could possibly be visible are
+    // rendered and measured; the rest of a huge selection is overflowed
+    // arithmetically without ever touching the DOM. Without a limit every tag
+    // renders, so unlimited rows with a huge selection is on the consumer.
+    const tagCandidateCap = rowLimit === undefined
+        ? selectedOptions.length
+        : Math.max(1, Math.floor(rowLimit)) * TAG_CANDIDATES_PER_ROW;
+    const renderedOptions = selectedOptions.length > tagCandidateCap
+        ? selectedOptions.slice(0, tagCandidateCap)
+        : selectedOptions;
+    const { containerRef: valueContainerRef, visibleCount } = (0, use_combobox_multi_value_overflow_1.useComboboxMultiValueOverflow)({
+        maxRows: rowLimit,
+        // Disabling swaps the dismissible tags for read-only ones, which have no
+        // remove button and are narrower. The total count is included since it
+        // sets the measure tag texts.
+        measureKey: [
+            size,
+            isDisabled,
+            selectedOptions.length,
+            ...renderedOptions.map((option) => `${option.value}:${option.label}`),
+        ].join('\u0000'),
+        tagCount: renderedOptions.length,
+    });
+    const visibleTagCount = visibleCount !== null && visibleCount !== void 0 ? visibleCount : renderedOptions.length;
+    const overflowCount = selectedOptions.length - visibleTagCount;
+    const overflowedOptions = selectedOptions.slice(visibleTagCount, visibleTagCount + OVERFLOW_LABEL_LIMIT);
+    const unnamedOverflowCount = overflowCount - overflowedOptions.length;
+    const overflowedLabels = overflowedOptions.map((option) => option.label).join(', ') +
+        (unnamedOverflowCount > 0 ? `, and ${unnamedOverflowCount} more` : '');
+    // "+999" is wider than "+1K", so each text the counter could show at its
+    // widest is measured; the hook reserves room for the widest of them.
+    const counterMeasureTexts = (0, use_combobox_multi_value_overflow_1.getOverflowCounterMeasureTexts)(selectedOptions.length);
+    const internalTriggerRef = (0, react_2.useRef)(null);
+    const mergedTriggerRef = (0, react_1.useMergeRefs)([
+        triggerRef,
+        internalTriggerRef,
+    ]);
+    const handleAuxiliaryActionKeyDown = (event) => {
+        var _a, _b;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            event.stopPropagation();
+            (_a = internalTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = triggerAria.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(triggerAria, event);
+        }
+    };
+    const handleTagRemove = (event, option) => {
+        var _a;
+        // Capture the following removal targets before React removes the current
+        // tag. With `maxRows`, the removal can promote a collapsed tag into view,
+        // so which of them is focusable is only known after the update.
+        const tag = event.currentTarget.closest('[data-ndl-combobox-multi-value]');
+        const followingRemoveButtons = [];
+        let sibling = (_a = tag === null || tag === void 0 ? void 0 : tag.nextElementSibling) !== null && _a !== void 0 ? _a : null;
+        while (sibling !== null) {
+            const removeButton = sibling.querySelector('[data-ndl-dismissible-tag-remove]');
+            if (removeButton !== null) {
+                followingRemoveButtons.push(removeButton);
+            }
+            sibling = sibling.nextElementSibling;
+        }
+        // Otherwise the click bubbles to the control and opens the panel.
+        event.stopPropagation();
+        remove(option);
+        requestAnimationFrame(() => {
+            var _a;
+            // A tag collapsed into the overflow counter is invisible and cannot take
+            // focus, so it is passed over.
+            const nextRemoveButton = followingRemoveButtons.find((removeButton) => removeButton.isConnected &&
+                removeButton.closest('.ndl-overflowed') === null);
+            if (nextRemoveButton !== undefined) {
+                nextRemoveButton.focus();
+                return;
+            }
+            (_a = internalTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    };
+    const handleClear = (event) => {
+        // Otherwise the click bubbles to the control and opens the panel.
+        event.stopPropagation();
+        clear();
+        // Clearing removes the focused clear button from the DOM. Restore focus to
+        // the combobox after React has committed that update.
+        requestAnimationFrame(() => {
+            var _a;
+            (_a = internalTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    };
+    // Clicking the label moves focus to the trigger without opening the panel,
+    // as with a native select. Preventing the default cancels the click the
+    // label would otherwise forward to the trigger button, which would toggle
+    // the panel.
+    const handleLabelClick = (event) => {
+        var _a;
+        event.preventDefault();
+        (_a = internalTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    return (
+    // A fragment, so the label, the control, and the message are rows of the
+    // combobox itself. A custom trigger replaces all three.
+    (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FieldLabel, { field: field, size: size, onLabelClick: handleLabelClick }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: referenceRef, className: (0, classnames_1.default)('ndl-combobox-control', {
+                    'ndl-clean': isClean,
+                    'ndl-disabled': isDisabled,
+                    'ndl-has-error': field.hasError,
+                    'ndl-is-multi': isMulti,
+                    'ndl-large': size === 'large',
+                    'ndl-medium': size === 'medium',
+                    'ndl-small': size === 'small',
+                }) }, referenceProps, { children: [(0, jsx_runtime_1.jsxs)("div", { ref: valueContainerRef, className: (0, classnames_1.default)('ndl-combobox-value-container', {
+                            // While a counter may be needed, every tag reserves room for it,
+                            // so an extreme-width tag shrinks instead of collapsing entirely.
+                            'ndl-counter-reserved': rowLimit !== undefined && selectedOptions.length > 1,
+                        }), children: [(0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: (0, classnames_1.default)('ndl-combobox-trigger', {
+                                    'ndl-collapsed': isTriggerCollapsed,
+                                    'ndl-disabled': isDisabled,
+                                }) }, triggerAria, { ref: mergedTriggerRef, children: [singleValueOption !== undefined &&
+                                        (SingleValue === undefined ? ((0, jsx_runtime_1.jsx)("span", { className: "ndl-combobox-single-value", children: singleValueOption.label })) : ((0, jsx_runtime_1.jsx)(SingleValue, { option: singleValueOption, isDisabled: isDisabled, size: size }))), !hasValue && ((0, jsx_runtime_1.jsx)("span", { className: "ndl-combobox-placeholder", children: placeholder }))] })), isMulti &&
+                                renderedOptions.map((option, index) => {
+                                    // Tags past the overflow cutoff stay rendered so they keep their
+                                    // measurements, but the stylesheet takes them out of the layout,
+                                    // out of the accessibility tree, and out of focus reach.
+                                    const multiValueClasses = (0, classnames_1.default)('ndl-combobox-multi-value', {
+                                        'ndl-overflowed': index >= visibleTagCount,
+                                    });
+                                    // A custom value owns its own presentation, so it is only given
+                                    // the wrapper the value container lays out, and no remove button.
+                                    if (MultiValue !== undefined) {
+                                        return ((0, jsx_runtime_1.jsx)("span", { className: multiValueClasses, children: (0, jsx_runtime_1.jsx)(MultiValue, { option: option, index: index, isDisabled: isDisabled, size: size, remove: () => remove(option) }) }, option.value));
+                                    }
+                                    return isDisabled ? ((0, jsx_runtime_1.jsx)(read_only_tag_1.ReadOnlyTag, { className: multiValueClasses, size: multiValueSize, children: option.label }, option.value)) : ((0, jsx_runtime_1.jsx)(dismissible_tag_1.DismissibleTag, { className: multiValueClasses, size: multiValueSize, htmlAttributes: {
+                                            'data-ndl-combobox-multi-value': '',
+                                            onKeyDown: handleAuxiliaryActionKeyDown,
+                                        }, onRemove: (event) => handleTagRemove(event, option), children: option.label }, option.value));
+                                }), overflowCount > 0 && ((0, jsx_runtime_1.jsxs)(read_only_tag_1.ReadOnlyTag, { className: "ndl-combobox-multi-value-counter", size: multiValueSize, htmlAttributes: {
+                                    title: overflowedLabels,
+                                }, children: [(0, jsx_runtime_1.jsxs)("span", { "aria-hidden": "true", children: ["+", (0, use_combobox_multi_value_overflow_1.formatOverflowCount)(overflowCount)] }), (0, jsx_runtime_1.jsxs)("span", { className: "ndl-combobox-visually-hidden", children: [overflowCount, " more selected: ", overflowedLabels] })] })), rowLimit !== undefined &&
+                                hasValue &&
+                                // Invisible and out of the layout, purely to measure the widest
+                                // counter the current selection could need, so the fit computation
+                                // can reserve room for it in a single deterministic pass.
+                                counterMeasureTexts.map((text) => ((0, jsx_runtime_1.jsxs)(read_only_tag_1.ReadOnlyTag, { className: "ndl-combobox-multi-value-measure", size: multiValueSize, htmlAttributes: { 'aria-hidden': true }, children: ["+", text] }, text)))] }), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-combobox-indicators-container", children: [isClearable && hasValue && !isDisabled && (
+                            // The divider only separates the clear button from the chevron, so
+                            // it is tied to the button rather than always rendered, as in
+                            // Select.
+                            (0, jsx_runtime_1.jsxs)("div", { className: "ndl-combobox-clear", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "ndl-combobox-clear-button", "aria-label": "Clear selection", onKeyDown: handleAuxiliaryActionKeyDown, onClick: handleClear, children: (0, jsx_runtime_1.jsx)(heroIcons_1.XMarkIconOutline, {}) }), (0, jsx_runtime_1.jsx)("div", { className: "ndl-combobox-divider" })] })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ndl-combobox-dropdown-indicator', {
+                                    'ndl-open': isOpen,
+                                }), children: (0, jsx_runtime_1.jsx)(heroIcons_1.ChevronDownIconOutline, { "aria-hidden": "true", className: "ndl-combobox-icon" }) })] })] })), (0, jsx_runtime_1.jsx)(FieldMessage, { field: field, size: size })] }));
+};
+/**
+ * The trigger is a button with `role="combobox"`, which takes its accessible
+ * name from the author rather than from its content, so the label is referenced
+ * through `aria-labelledby` instead of wrapping the control in a `<label>`.
+ * The label is still a `<label>` associated through `htmlFor`, and clicking it
+ * moves focus to the trigger, as with a native select. It deliberately does
+ * not open the panel, which is also what a native select label leaves alone.
+ */
+const FieldLabel = ({ field, size, onLabelClick }) => {
+    const { label, labelId, triggerId, hasVisuallyHiddenLabel, hasRequiredIndicator, isRequired, } = field;
+    const variant = size === 'large' ? 'body-large' : 'body-medium';
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('ndl-combobox-label-row', {
+            'ndl-visually-hidden': hasVisuallyHiddenLabel,
+        }), children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { as: "label", variant: variant, className: "ndl-combobox-label", htmlAttributes: {
+                    htmlFor: triggerId,
+                    id: labelId,
+                    onClick: onLabelClick,
+                }, children: label }), hasRequiredIndicator && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: variant, className: "ndl-combobox-label-indicator", children: isRequired ? 'Required' : 'Optional' }))] }));
+};
+/**
+ * Rendered whether or not there is a message, so the live region is in the
+ * document before the text arrives and a validation error is announced.
+ */
+const FieldMessage = ({ field, size }) => {
+    const { errorText, hasError, helpText, helpTextId, errorTextId } = field;
+    const variant = size === 'large' ? 'body-medium' : 'body-small';
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-combobox-message", "aria-live": "polite", children: [hasError && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "ndl-error-icon", children: (0, jsx_runtime_1.jsx)(heroIcons_1.ExclamationCircleIconSolid, {}) }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: variant, className: "ndl-error-text", htmlAttributes: { id: errorTextId }, children: errorText })] })), !hasError && Boolean(helpText) && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: variant, htmlAttributes: { id: helpTextId }, children: helpText }))] }));
+};
+const Panel = (_a) => {
+    var { children, ref, id, ariaLabel, isDialog, className, style } = _a, restProps = __rest(_a, ["children", "ref", "id", "ariaLabel", "isDialog", "className", "style"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, id: id, role: isDialog === true ? 'dialog' : undefined, "aria-label": isDialog === true ? ariaLabel : undefined, className: (0, classnames_1.default)('ndl-combobox-panel', className), style: style }, restProps, { children: children })));
+};
+const Input = ({ ref, ariaLabel, value, onValueChange, placeholder, listboxId, activeOptionId, onKeyDown, }) => {
+    return ((0, jsx_runtime_1.jsxs)("label", { className: "ndl-combobox-input-wrapper", children: [(0, jsx_runtime_1.jsx)("span", { className: "ndl-combobox-input-label", children: ariaLabel }), (0, jsx_runtime_1.jsx)(heroIcons_1.MagnifyingGlassIconOutline, { className: "ndl-combobox-input-leading" }), (0, jsx_runtime_1.jsx)("input", { ref: ref, type: "text", role: "combobox", autoComplete: "off", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": listboxId !== undefined, "aria-controls": listboxId, "aria-activedescendant": activeOptionId, className: "ndl-combobox-input", placeholder: placeholder, value: value, onChange: (event) => onValueChange(event.target.value), onKeyDown: onKeyDown })] }));
+};
+const ListBox = ({ ariaLabel, children, isMulti, id, ownsIds, }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { id: id, role: "listbox", "aria-label": ariaLabel, "aria-owns": ownsIds, "aria-multiselectable": isMulti || undefined, className: "ndl-combobox-listbox", children: children }));
+};
+/**
+ * The windowed listbox used above the row threshold: only the visible slice of
+ * rows is in the DOM, absolutely positioned inside one full-height spacer.
+ * Group nesting cannot survive windowing, so headers render as presentational
+ * rows of their own and options carry `aria-setsize`/`aria-posinset` instead.
+ * Pinned action rows render outside, below the listbox, so they are never
+ * windowed.
+ */
+const VirtualizedListBox = ({ id, ariaLabel, isMulti, ownsIds, rows, rowsKey, flatToDisplayIndex, scrollToFlatIndexRef, renderRow, }) => {
+    const scrollRef = (0, react_2.useRef)(null);
+    const virtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: rows.length,
+        estimateSize: () => VIRTUAL_ROW_ESTIMATED_HEIGHT,
+        getScrollElement: () => scrollRef.current,
+        overscan: 10,
+    });
+    const pendingScrollIndexRef = (0, react_2.useRef)(null);
+    (0, react_2.useEffect)(() => {
+        scrollToFlatIndexRef.current = (flatIndex) => {
+            const displayIndex = flatToDisplayIndex[flatIndex];
+            if (displayIndex !== undefined) {
+                pendingScrollIndexRef.current = displayIndex;
+                virtualizer.scrollToIndex(displayIndex);
+            }
+        };
+        return () => {
+            scrollToFlatIndexRef.current = null;
+        };
+    });
+    // A long jump scrolls to an offset built from estimated sizes, and the
+    // estimates only get corrected once the rows near the target render, so one
+    // scroll can land short. Each render after a scroll re-issues it until the
+    // target row is actually mounted, which is also what lets
+    // aria-activedescendant resolve.
+    (0, react_2.useEffect)(() => {
+        const target = pendingScrollIndexRef.current;
+        if (target === null) {
+            return;
+        }
+        const isRendered = virtualizer
+            .getVirtualItems()
+            .some((item) => item.index === target);
+        if (isRendered) {
+            pendingScrollIndexRef.current = null;
+            return;
+        }
+        virtualizer.scrollToIndex(target);
+    });
+    // A filtered list is a different list, so it starts at the top.
+    (0, react_2.useEffect)(() => {
+        virtualizer.scrollToOffset(0);
+        // The virtualizer is stable and scrolling must not rerun on its rerenders.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [rowsKey]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: scrollRef, id: id, role: "listbox", "aria-label": ariaLabel, "aria-owns": ownsIds, "aria-multiselectable": isMulti === true || undefined, className: "ndl-combobox-listbox", children: (0, jsx_runtime_1.jsx)("div", { role: "presentation", className: "ndl-combobox-virtual-space", style: { height: virtualizer.getTotalSize() }, children: virtualizer.getVirtualItems().map((item) => {
+                const row = rows[item.index];
+                return ((0, jsx_runtime_1.jsx)("div", { ref: virtualizer.measureElement, "data-index": item.index, role: "presentation", className: "ndl-combobox-virtual-row", style: { transform: `translateY(${item.start}px)` }, children: row.kind === 'group-header' ? ((0, jsx_runtime_1.jsx)(GroupHeader, { isPresentational: true, label: row.label })) : (renderRow(row.row)) }, item.key));
+            }) }) }));
+};
+const Option = ({ children, id, isSelected, isDisabled, isFocused, isCreate, isAction, onClick, onHover, posInSet, setSize, }) => {
+    const classes = (0, classnames_1.default)('ndl-combobox-option', {
+        'ndl-combobox-option-action': isAction,
+        'ndl-combobox-option-create': isCreate,
+        'ndl-disabled': isDisabled,
+        'ndl-focused': isFocused,
+    });
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus -- options are never DOM focused; keyboard is handled on the search input or the listbox and exposed through aria-activedescendant
+    (0, jsx_runtime_1.jsx)("div", { id: id, role: "option", "aria-selected": isSelected, "aria-disabled": isDisabled, "aria-posinset": posInSet, "aria-setsize": setSize, className: classes, onClick: onClick, 
+        // Options are not focusable, so a plain mousedown would blur whatever
+        // holds DOM focus - the search input or the trigger - and drop the panel.
+        onMouseDown: (event) => event.preventDefault(), 
+        // mouseover fires when the element under a stationary cursor changes
+        // because the list scrolled, which would let a rested mouse steal virtual
+        // focus back during keyboard navigation. mousemove needs real movement.
+        onMouseMove: onHover, children: children }));
+};
+const OptionContent = ({ label, customLabel, description, leadingVisual, isDisabled, isSelected, isMulti, }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-combobox-option-content", children: [isMulti ? ((0, jsx_runtime_1.jsx)(MultiSelectIndicator, { isDisabled: isDisabled, isSelected: isSelected })) : (leadingVisual && ((0, jsx_runtime_1.jsx)(LeadingVisual, { isDisabled: isDisabled, children: leadingVisual }))), (0, jsx_runtime_1.jsxs)("div", { className: "ndl-combobox-option-content-main", children: [customLabel !== null && customLabel !== void 0 ? customLabel : (0, jsx_runtime_1.jsx)(Label, { isDisabled: isDisabled, children: label }), description && ((0, jsx_runtime_1.jsx)(Description, { isDisabled: isDisabled, children: description }))] }), !isMulti && isSelected && (0, jsx_runtime_1.jsx)(SelectionIndicator, { isDisabled: isDisabled })] }));
+};
+const CreateOptionContent = ({ children }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-combobox-option-content", children: [(0, jsx_runtime_1.jsx)(LeadingVisual, { children: (0, jsx_runtime_1.jsx)(heroIcons_1.PlusIconOutline, {}) }), (0, jsx_runtime_1.jsx)("div", { className: "ndl-combobox-option-content-main", children: (0, jsx_runtime_1.jsx)(Label, { children: children }) })] }));
+};
+const LeadingVisual = ({ children, isDisabled }) => {
+    const classes = (0, classnames_1.default)('ndl-combobox-option-content-leading-visual', {
+        'ndl-disabled': isDisabled,
+    });
+    return (0, jsx_runtime_1.jsx)("div", { className: classes, children: children });
+};
+const Label = ({ children, isDisabled }) => {
+    const classes = (0, classnames_1.default)('ndl-combobox-option-content-label', {
+        'ndl-disabled': isDisabled,
+    });
+    return ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "body-medium", className: classes, children: children }));
+};
+const Description = ({ children, isDisabled }) => {
+    const classes = (0, classnames_1.default)('ndl-combobox-option-content-description', {
+        'ndl-disabled': isDisabled,
+    });
+    return ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "body-small", className: classes, children: children }));
+};
+const SelectionIndicator = ({ isDisabled, }) => {
+    const classes = (0, classnames_1.default)('ndl-combobox-option-content-selection-indicator', {
+        'ndl-disabled': isDisabled,
+    });
+    return (0, jsx_runtime_1.jsx)(heroIcons_1.CheckIconOutline, { className: classes });
+};
+/**
+ * The option itself owns selection through `aria-selected` and its click
+ * handler, so the checkbox is decorative. `inert` keeps it out of the
+ * accessibility tree and out of hit testing - without it the wrapping label
+ * forwards a second click to the input, which bubbles back to the option and
+ * undoes the toggle.
+ */
+const MultiSelectIndicator = ({ isDisabled, isSelected, }) => {
+    return ((0, jsx_runtime_1.jsx)("span", { className: "ndl-combobox-option-content-multi-select-indicator", inert: true, children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { ariaLabel: "Select", isChecked: isSelected, isDisabled: isDisabled }) }));
+};
+/**
+ * The visible group header text, shared by both listbox paths: nested inside a
+ * `role="group"` wrapper below the row threshold, or as a presentational row of
+ * its own while windowed.
+ */
+const GroupHeader = ({ label, id, isPresentational, }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { id: id, role: isPresentational === true ? 'presentation' : undefined, className: "ndl-combobox-group-header", children: label }));
+};
+const Group = ({ children, label }) => {
+    const headerId = (0, react_2.useId)();
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "group", "aria-labelledby": headerId, className: "ndl-combobox-group", children: [(0, jsx_runtime_1.jsx)(GroupHeader, { id: headerId, label: label }), children] }));
+};
+const EmptyState = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "body-medium", className: "ndl-combobox-empty-state", htmlAttributes: { role: 'status' }, children: children !== null && children !== void 0 ? children : 'No results found' }));
+};
+const LoadingState = ({ children }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { role: "status", className: "ndl-combobox-empty-state ndl-combobox-loading-state", children: [(0, jsx_runtime_1.jsx)(loading_spinner_1.LoadingSpinner, { size: "small", htmlAttributes: { 'aria-hidden': true } }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "body-medium", children: children !== null && children !== void 0 ? children : DEFAULT_LOADING_MESSAGE })] }));
+};
+//# sourceMappingURL=Combobox.js.map