pixelize-design-library 2.4.2 → 3.0.0

package/dist/esm/Components/Select/SelectNative.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useRef, useState } from "react";
+import { Select as ChakraSelect, FormControl } from "@chakra-ui/react";
+import { CONTROL_SIZES, DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { TextLabel } from "../Common/FormLabel.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+const optionGroups = (options) => {
+    const segments = [];
+    options.forEach((option) => {
+        const last = segments[segments.length - 1];
+        if (last && last.group === option.group) {
+            last.options.push(option);
+        }
+        else {
+            segments.push({ group: option.group, options: [option] });
+        }
+    });
+    return segments;
+};
+/** Native `<select>` renderer — today's `Select`, unchanged, plus optgroup/disabled from `option.group`/`isDisabled`. */
+const SelectNative = forwardRef(function SelectNative({ placeholder = "Select Option", size = DEFAULT_CONTROL_SIZE, variant = "outline", icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired = false, value, defaultValue, colorScheme, label, id, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, error = false, errorMessage, helperText, options = [], width, height, formControlStyle, isInformation = false, informationMessage, selectStyle, noOptionsMessage, }, ref) {
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const [internalValue, setInternalValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
+    const wasControlledRef = useRef(false);
+    if (value !== undefined)
+        wasControlledRef.current = true;
+    const shownValue = value !== null && value !== void 0 ? value : (wasControlledRef.current ? "" : internalValue);
+    const getOptionsList = useCallback(() => {
+        if (!options.length) {
+            return _jsx("option", { value: "", children: String(noOptionsMessage !== null && noOptionsMessage !== void 0 ? noOptionsMessage : "No Options") });
+        }
+        return optionGroups(options).map((segment, index) => {
+            const rows = segment.options.map((option) => (_jsx("option", { value: option.id, disabled: option.isDisabled, children: option.label }, option.id)));
+            if (!segment.group)
+                return rows;
+            return (_jsx("optgroup", { label: segment.group, children: rows }, `${segment.group}-${index}`));
+        });
+    }, [options, noOptionsMessage]);
+    const handleOnChange = (event) => {
+        if (isReadOnly)
+            return;
+        const selectedOption = options.find((option) => option.id.toString() === event.target.value.toString());
+        if (!selectedOption)
+            return;
+        setInternalValue(selectedOption.id);
+        onChange(selectedOption);
+    };
+    return (_jsxs(FormControl, { isInvalid: error, style: formControlStyle, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsx(ChakraSelect, { ref: ref, ...ids.controlProps, name: name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, placeholder: placeholder, size: size, variant: variant, icon: icon, iconSize: `${CONTROL_SIZES[size].iconSize}px`, isInvalid: error, isRequired: isRequired, value: shownValue, onChange: handleOnChange, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle, ...(height != null && height !== "" ? { minH: height, h: height } : {}), children: getOptionsList() }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+export default SelectNative;

package/dist/esm/Components/Select/SelectPopup.js

@@ -0,0 +1,586 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Box, Checkbox, FormControl, Input, Popover, PopoverAnchor, PopoverContent, Portal, Spinner, useDisclosure, useMergeRefs, } from "@chakra-ui/react";
+import { Check, ChevronDown, Plus, X } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import { focusGlowShadow } from "../../Theme/chakra/focusRing.styles.js";
+import { selectRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { optionRowWeight } from "./optionRowInk.js";
+import { SELECT_ROW_DISABLED_CONTENT_OPACITY, selectFilterPlaceholderInk, selectRowDescriptionInk, selectRowDisabledInk, selectRowFill, selectRowInk, } from "./selectRowInk.js";
+import { keyboardRingShadow, NAVIGATION_KEYS } from "./selectKeyboardRing.js";
+import { optionRowSpec } from "../../Theme/tokens/primitives/optionRowSizes.js";
+import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
+import { scrollShadowStylesVertical } from "../../Theme/tokens/builders/scrollShadow.js";
+import { CONTROL_SIZES, DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { chipTriggerSizeStyles } from "../Common/chipTriggerSize.js";
+import { fieldControlStyles } from "../Common/fieldStyles.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
+import { TextLabel } from "../Common/FormLabel.js";
+import Tag from "../Tag/Tag.js";
+import { buildGroupedRows, groupedWindow, layoutGroupedRows } from "./groupedWindow.js";
+const ROW_TRANSITION = transitionFor(["background-color", "color"]);
+const CHEVRON_TRANSITION = transitionFor(["transform"], "base");
+const PAGE_STEP = 8;
+const LOAD_MORE_THRESHOLD_PX = 8;
+const DEFAULT_MAX_VISIBLE_CHIPS = 6;
+const VIRTUAL_OVERSCAN = 4;
+const DECORATIVE_CHECKBOX_SX = { "& input": { visibility: "hidden" } };
+const GROUP_HEADER_ESTIMATE_PX = 29;
+const NO_ROW = -1;
+const SELECT_ALL_ROW = -2;
+const CREATE_ROW = -3;
+const FOOTER_ROW = -4;
+const CHECK_SLOT_MIN_PX = 16;
+const SELECT_ALL_RULE_MARGIN_PX = 4;
+const DISABLED_CONTENT_SX = { "& > *": { opacity: SELECT_ROW_DISABLED_CONTENT_OPACITY } };
+const truncateLabel = (label, max) => max !== undefined && label.length > max ? `${label.slice(0, max)}…` : label;
+const asIdSet = (values) => new Set((values !== null && values !== void 0 ? values : []).map((v) => v.toString()));
+/** Regression-guarded id scheme — tickets e2e (`e2e/tests/helpers/selectV2.ts`) resolves it verbatim. */
+const optionDomId = (listboxId, id) => `${listboxId}-option-${id.toString().replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+const parseRemToPx = (value, fallbackPx) => {
+    const match = /^(\d*\.?\d+)rem$/.exec(value);
+    return match ? parseFloat(match[1]) * 16 : fallbackPx;
+};
+const OptionRow = React.memo(function OptionRow({ option, index, listboxId, isSelected, isActive, isMulti, theme, backgrounds, ink, showRing, spec, renderOption, renderOptionEnd, optionAction, checkPlacement, onSelect, onActivate, }) {
+    const isSingleSelected = isSelected && !isMulti;
+    const solidDisabledInk = option.isDisabled ? ink.disabled : null;
+    const checkSlotPx = Math.max(CHECK_SLOT_MIN_PX, spec.iconSize);
+    const checkSlot = (_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", justifyContent: "center", flexShrink: 0, width: `${checkSlotPx}px`, children: isSingleSelected ? _jsx(Box, { as: Check, size: spec.iconSize, color: theme.colors.accentText }) : null }));
+    return (_jsxs(Box, { id: optionDomId(listboxId, option.id), "data-index": index, role: "option", "aria-selected": isSelected, "aria-disabled": option.isDisabled, onMouseEnter: () => onActivate(index), onClick: () => onSelect(option), mx: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: option.isDisabled ? "not-allowed" : "pointer", display: "flex", alignItems: "center", gap: spec.gap, fontSize: spec.fontSize, fontWeight: optionRowWeight(isSingleSelected), color: solidDisabledInk !== null && solidDisabledInk !== void 0 ? solidDisabledInk : (isSingleSelected ? ink.selected : ink.rest), bg: selectRowFill(backgrounds, { isSelected, isActive }), boxShadow: showRing ? keyboardRingShadow(backgrounds.keyboardRing) : undefined, transition: ROW_TRANSITION, sx: option.isDisabled && !ink.disabled ? { ...reducedMotionSx(), ...DISABLED_CONTENT_SX } : reducedMotionSx(), children: [!isMulti && checkPlacement === "start" ? checkSlot : null, isMulti ? (_jsx(Checkbox, { id: `${optionDomId(listboxId, option.id)}-checkbox`, isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1, sx: DECORATIVE_CHECKBOX_SX })) : null, renderOption ? (_jsx(Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : (_jsxs(_Fragment, { children: [option.icon ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, _jsxs(Box, { flex: 1, minW: 0, isTruncated: true, children: [_jsx(Box, { as: "span", isTruncated: true, children: option.label }), option.description ? (_jsx(Box, { as: "span", display: "block", fontSize: spec.descriptionFontSize, color: solidDisabledInk !== null && solidDisabledInk !== void 0 ? solidDisabledInk : ink.description, isTruncated: true, children: option.description })) : null] })] })), renderOptionEnd ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: renderOptionEnd(option, { isSelected, isActive }) })) : null, optionAction ? (_jsx(Box, { as: "span", "aria-hidden": true, title: optionAction.label, onMouseDown: (event) => event.preventDefault(), onClick: (event) => {
+                    event.stopPropagation();
+                    optionAction.onAction(option);
+                }, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, cursor: "pointer", color: ink.description, _hover: { color: ink.selected }, children: optionAction.icon })) : null, !isMulti && checkPlacement === "end" ? checkSlot : null] }));
+});
+/** The unified `Select`'s popup mode (`native={false}`) — absorbs SelectV2's behaviour, plus clear/create/groups/virtualization. */
+const SelectPopup = forwardRef(function SelectPopup(props, ref) {
+    var _a, _b, _c, _d, _e, _f;
+    const { options = [], id, name, placeholder = "Select Option", label, error = false, errorMessage, helperText, isDisabled = false, isReadOnly = false, isRequired = false, isInformation = false, informationMessage, size = DEFAULT_CONTROL_SIZE, isSearchable = true, width, formControlStyle, onBlur, onFocus, renderOption, renderOptionEnd, optionAction, checkPlacement = "end", renderValue, maxMenuHeight = "16rem", defaultOpen = false, isLoading = false, loadingText = "Loading...", onLoadMore, hasMore, onSearchChange, searchValue, defaultSearchValue, searchDebounceMs = 0, filterOptions, isClearable = false, onClear, noOptionsMessage, onCreate, createLabel, createWhen = "no-options", footerAction, searchFields, filterOption, isFieldLoading = false, rightIcon, virtualizeAfter, "data-testid": dataTestId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, } = props;
+    const theme = useCustomTheme();
+    const { colors } = theme;
+    const { isOpen, onOpen, onClose } = useDisclosure({ defaultIsOpen: defaultOpen });
+    const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const [isKeyboardNav, setIsKeyboardNav] = useState(false);
+    const triggerRef = useRef(null);
+    const mergedTriggerRef = useMergeRefs(triggerRef, ref);
+    const filterInputRef = useRef(null);
+    const listRef = useRef(null);
+    const lastActiveIndex = useRef(-1);
+    const wasVirtualized = useRef(false);
+    const [triggerWidth, setTriggerWidth] = useState(0);
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const listboxId = `${ids.inputId}-listbox`;
+    const filterInputId = `${listboxId}-filter`;
+    const createRowId = `${listboxId}-create`;
+    const selectAllId = `${listboxId}-select-all`;
+    const footerId = `${listboxId}-footer`;
+    const isInteractive = !isDisabled && !isReadOnly;
+    const isValueControlled = props.value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(props.defaultValue);
+    const currentValue = isValueControlled ? props.value : uncontrolledValue;
+    const isSearchControlled = searchValue !== undefined;
+    const [uncontrolledSearch, setUncontrolledSearch] = useState(defaultSearchValue !== null && defaultSearchValue !== void 0 ? defaultSearchValue : "");
+    const currentSearch = isSearchControlled ? searchValue : uncontrolledSearch;
+    const searchDebounceTimer = useRef();
+    useEffect(() => () => clearTimeout(searchDebounceTimer.current), []);
+    const selectedIds = useMemo(() => props.isMulti
+        ? asIdSet(currentValue)
+        : asIdSet(currentValue !== undefined ? [currentValue] : undefined), [props.isMulti, currentValue]);
+    const selectionCacheRef = useRef(new Map());
+    const selectedOptions = useMemo(() => {
+        const cache = selectionCacheRef.current;
+        options.forEach((option) => {
+            if (selectedIds.has(option.id.toString()))
+                cache.set(option.id.toString(), option);
+        });
+        Array.from(cache.keys()).forEach((cachedId) => {
+            if (!selectedIds.has(cachedId))
+                cache.delete(cachedId);
+        });
+        return Array.from(selectedIds)
+            .map((selectedId) => cache.get(selectedId))
+            .filter((option) => option !== undefined);
+    }, [options, selectedIds]);
+    const shouldFilterLocally = filterOptions !== null && filterOptions !== void 0 ? filterOptions : !onSearchChange;
+    const searchesLabel = searchFields ? searchFields.includes("label") : true;
+    const searchesDescription = !!searchFields && searchFields.includes("description");
+    const filteredOptions = useMemo(() => {
+        const query = currentSearch.trim();
+        if (!isSearchable || !query || !shouldFilterLocally)
+            return options;
+        if (filterOption)
+            return options.filter((option) => filterOption(option, query));
+        const needle = query.toLowerCase();
+        return options.filter((option) => (searchesLabel && option.label.toString().toLowerCase().includes(needle)) ||
+            (searchesDescription && !!option.description && option.description.toLowerCase().includes(needle)));
+    }, [options, currentSearch, isSearchable, shouldFilterLocally, filterOption, searchesLabel, searchesDescription]);
+    const hasGroups = useMemo(() => options.some((option) => option.group), [options]);
+    const resetAndClose = useCallback((opts) => {
+        if (props.isMulti && (opts === null || opts === void 0 ? void 0 : opts.keepOpenForMulti))
+            return;
+        onClose();
+        if (!isSearchControlled)
+            setUncontrolledSearch("");
+        setActiveIndex(-1);
+        setIsKeyboardNav(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, [onClose, onBlur, props.isMulti, isSearchControlled]);
+    const handleOpen = () => {
+        if (!isInteractive)
+            return;
+        requestExclusiveOpen();
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+        onOpen();
+        const firstSelected = props.isMulti
+            ? currentValue === null || currentValue === void 0 ? void 0 : currentValue[0]
+            : currentValue;
+        setActiveIndex(filteredOptions.findIndex((option) => option.id.toString() === (firstSelected === null || firstSelected === void 0 ? void 0 : firstSelected.toString())));
+    };
+    const selectedIdsRef = useRef(selectedIds);
+    selectedIdsRef.current = selectedIds;
+    const selectedOptionsRef = useRef(selectedOptions);
+    selectedOptionsRef.current = selectedOptions;
+    const handleSelect = useCallback((option) => {
+        var _a, _b;
+        if (option.isDisabled)
+            return;
+        if (props.isMulti) {
+            const alreadySelected = selectedIdsRef.current.has(option.id.toString());
+            const next = alreadySelected
+                ? selectedOptionsRef.current.filter((selected) => selected.id.toString() !== option.id.toString())
+                : [...selectedOptionsRef.current, option];
+            if (!isValueControlled)
+                setUncontrolledValue(next.map((o) => o.id));
+            props.onChange(next);
+            resetAndClose({ keepOpenForMulti: true });
+            (_a = filterInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+        if (!isValueControlled)
+            setUncontrolledValue(option.id);
+        props.onChange(option);
+        resetAndClose();
+        (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.isMulti, props.onChange, resetAndClose, isValueControlled]);
+    const handleCreate = useCallback(() => {
+        if (!onCreate)
+            return;
+        onCreate(currentSearch.trim());
+        resetAndClose();
+    }, [onCreate, currentSearch, resetAndClose]);
+    const handleFooterAction = useCallback(() => {
+        if (!footerAction)
+            return;
+        footerAction.onSelect(currentSearch.trim());
+        resetAndClose();
+    }, [footerAction, currentSearch, resetAndClose]);
+    const hasSelectAllRow = !!props.isMulti && !!props.isSelectAll;
+    const selectableFiltered = useMemo(() => (hasSelectAllRow ? filteredOptions.filter((option) => !option.isDisabled) : []), [hasSelectAllRow, filteredOptions]);
+    const showSelectAllRow = selectableFiltered.length > 0;
+    const allFilteredSelected = showSelectAllRow && selectableFiltered.every((o) => selectedIds.has(o.id.toString()));
+    const handleSelectAll = () => {
+        var _a;
+        if (!props.isMulti || !showSelectAllRow)
+            return;
+        const shown = new Set(selectableFiltered.map((option) => option.id.toString()));
+        const next = allFilteredSelected
+            ? selectedOptions.filter((selected) => !shown.has(selected.id.toString()))
+            : [...selectedOptions, ...selectableFiltered.filter((option) => !selectedIds.has(option.id.toString()))];
+        if (!isValueControlled)
+            setUncontrolledValue(next.map((o) => o.id));
+        props.onChange(next);
+        (_a = filterInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const handleClear = useCallback((event) => {
+        event.stopPropagation();
+        if (!isInteractive)
+            return;
+        if (props.isMulti) {
+            if (!isValueControlled)
+                setUncontrolledValue([]);
+            props.onChange([]);
+        }
+        else {
+            if (!isValueControlled)
+                setUncontrolledValue(undefined);
+            props.onChange(undefined);
+        }
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isInteractive, props.isMulti, props.onChange, isValueControlled, onClear]);
+    // The panel grows past the trigger to fit long labels, so it cannot inherit the anchor width.
+    useEffect(() => {
+        const node = triggerRef.current;
+        if (!isOpen || !node)
+            return;
+        setTriggerWidth(node.getBoundingClientRect().width);
+    }, [isOpen]);
+    useEffect(() => {
+        if (!isOpen || !isSearchable)
+            return;
+        const frame = requestAnimationFrame(() => { var _a; return (_a = filterInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+        return () => cancelAnimationFrame(frame);
+    }, [isOpen, isSearchable]);
+    const spec = useMemo(() => optionRowSpec(size), [size]);
+    const listPaddingPx = parseRemToPx(spec.mx, 6);
+    const maxMenuHeightPx = useMemo(() => parseRemToPx(maxMenuHeight, 256), [maxMenuHeight]);
+    const shouldVirtualize = !!virtualizeAfter && filteredOptions.length > virtualizeAfter;
+    const [scrollTop, setScrollTop] = useState(0);
+    // A description, an avatar or a renderOption row outgrows the spec's single-line height.
+    const [rowHeightPx, setRowHeightPx] = useState(spec.virtualRowHeightPx);
+    const [headerHeightPx, setHeaderHeightPx] = useState(GROUP_HEADER_ESTIMATE_PX);
+    const selectAllLeadPx = showSelectAllRow ? rowHeightPx + parseInt(BORDER_WIDTHS.hairline, 10) + 2 * SELECT_ALL_RULE_MARGIN_PX : 0;
+    const windowTop = Math.max(0, scrollTop - selectAllLeadPx);
+    const visibleCount = Math.ceil(maxMenuHeightPx / rowHeightPx) + VIRTUAL_OVERSCAN * 2;
+    const groupedRows = useMemo(() => (hasGroups ? buildGroupedRows(filteredOptions) : []), [hasGroups, filteredOptions]);
+    const groupedLayout = useMemo(() => (hasGroups && shouldVirtualize ? layoutGroupedRows(groupedRows, headerHeightPx, rowHeightPx) : null), [hasGroups, shouldVirtualize, groupedRows, headerHeightPx, rowHeightPx]);
+    const groupedRange = groupedLayout
+        ? groupedWindow(groupedLayout.tops, windowTop, maxMenuHeightPx, VIRTUAL_OVERSCAN)
+        : null;
+    const startIndex = shouldVirtualize
+        ? Math.max(0, Math.floor(windowTop / rowHeightPx) - VIRTUAL_OVERSCAN)
+        : 0;
+    const endIndex = shouldVirtualize
+        ? Math.min(filteredOptions.length, startIndex + visibleCount)
+        : filteredOptions.length;
+    const renderedOptions = shouldVirtualize ? filteredOptions.slice(startIndex, endIndex) : filteredOptions;
+    const topPadPx = groupedLayout && groupedRange
+        ? groupedLayout.tops[groupedRange.start]
+        : shouldVirtualize ? startIndex * rowHeightPx : 0;
+    const bottomPadPx = groupedLayout && groupedRange
+        ? groupedLayout.tops[groupedLayout.tops.length - 1] - groupedLayout.tops[groupedRange.end]
+        : shouldVirtualize ? (filteredOptions.length - endIndex) * rowHeightPx : 0;
+    const renderedGroupedRows = groupedRange ? groupedRows.slice(groupedRange.start, groupedRange.end) : groupedRows;
+    useLayoutEffect(() => {
+        var _a, _b;
+        if (!isOpen)
+            return;
+        const row = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[role="option"][data-index]');
+        if (row) {
+            const measured = row.getBoundingClientRect().height;
+            if (measured > 0 && Math.abs(measured - rowHeightPx) > 0.5)
+                setRowHeightPx(measured);
+        }
+        const header = (_b = listRef.current) === null || _b === void 0 ? void 0 : _b.querySelector("[data-group-header]");
+        if (header) {
+            const measured = header.getBoundingClientRect().height;
+            if (measured > 0 && Math.abs(measured - headerHeightPx) > 0.5)
+                setHeaderHeightPx(measured);
+        }
+    }, [isOpen, rowHeightPx, headerHeightPx, filteredOptions.length]);
+    // Windowing starts mid-list, so the window must open where the user already is.
+    useLayoutEffect(() => {
+        var _a, _b;
+        if (shouldVirtualize && !wasVirtualized.current)
+            setScrollTop((_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0);
+        wasVirtualized.current = shouldVirtualize;
+    }, [shouldVirtualize]);
+    useEffect(() => {
+        var _a, _b, _c, _d;
+        if (activeIndex === NO_ROW || !listRef.current)
+            return;
+        if (lastActiveIndex.current === activeIndex)
+            return;
+        lastActiveIndex.current = activeIndex;
+        const el = listRef.current;
+        if (activeIndex < 0) {
+            const extraId = activeIndex === SELECT_ALL_ROW ? selectAllId : activeIndex === CREATE_ROW ? createRowId : footerId;
+            (_b = (_a = el.ownerDocument.getElementById(extraId)) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: "nearest" });
+            return;
+        }
+        if (shouldVirtualize) {
+            let targetTop = activeIndex * rowHeightPx;
+            let targetBottom = targetTop + rowHeightPx;
+            const rowIndex = groupedLayout === null || groupedLayout === void 0 ? void 0 : groupedLayout.optionRows[activeIndex];
+            if (groupedLayout && rowIndex !== undefined) {
+                const startsGroup = rowIndex > 0 && groupedRows[rowIndex - 1].kind === "header";
+                targetTop = groupedLayout.tops[startsGroup ? rowIndex - 1 : rowIndex];
+                targetBottom = groupedLayout.tops[rowIndex + 1];
+            }
+            targetTop += selectAllLeadPx + listPaddingPx;
+            targetBottom += selectAllLeadPx + listPaddingPx;
+            if (targetTop < el.scrollTop) {
+                el.scrollTop = targetTop;
+                setScrollTop(targetTop);
+            }
+            else if (targetBottom > el.scrollTop + maxMenuHeightPx) {
+                const next = targetBottom - maxMenuHeightPx;
+                el.scrollTop = next;
+                setScrollTop(next);
+            }
+            return;
+        }
+        (_d = (_c = el.querySelector(`[data-index="${activeIndex}"]`)) === null || _c === void 0 ? void 0 : _c.scrollIntoView) === null || _d === void 0 ? void 0 : _d.call(_c, { block: "nearest" });
+    }, [activeIndex, shouldVirtualize, maxMenuHeightPx, rowHeightPx, groupedLayout, groupedRows, selectAllLeadPx, listPaddingPx, selectAllId, createRowId, footerId]);
+    const loadMoreInFlightRef = useRef(false);
+    const prevOptionsLengthRef = useRef(options.length);
+    const prevIsLoadingRef = useRef(isLoading);
+    useEffect(() => {
+        if (options.length !== prevOptionsLengthRef.current)
+            loadMoreInFlightRef.current = false;
+        prevOptionsLengthRef.current = options.length;
+    }, [options.length]);
+    useEffect(() => {
+        if (prevIsLoadingRef.current && !isLoading)
+            loadMoreInFlightRef.current = false;
+        prevIsLoadingRef.current = isLoading;
+    }, [isLoading]);
+    const canLoadMore = !!onLoadMore && hasMore !== false;
+    const triggerLoadMore = useCallback(() => {
+        if (!onLoadMore || hasMore === false || isLoading || loadMoreInFlightRef.current)
+            return;
+        loadMoreInFlightRef.current = true;
+        onLoadMore();
+    }, [onLoadMore, hasMore, isLoading]);
+    const trimmedSearch = currentSearch.trim();
+    const hasExactMatch = useMemo(() => {
+        if (createWhen !== "no-exact-match" || !trimmedSearch)
+            return false;
+        const needle = trimmedSearch.toLowerCase();
+        return options.some((option) => option.label.toString().trim().toLowerCase() === needle);
+    }, [createWhen, trimmedSearch, options]);
+    const showCreateRow = !!onCreate &&
+        isSearchable &&
+        trimmedSearch !== "" &&
+        !isLoading &&
+        (createWhen === "no-exact-match" ? !hasExactMatch : filteredOptions.length === 0);
+    const isCreateImplicit = showCreateRow && filteredOptions.length === 0;
+    const hasFooter = !!footerAction;
+    const leadingStops = showSelectAllRow ? 1 : 0;
+    const optionsEndStop = leadingStops + filteredOptions.length - 1;
+    const stopCount = optionsEndStop + 1 + (showCreateRow ? 1 : 0) + (hasFooter ? 1 : 0);
+    const rowToStop = (row) => {
+        if (row === SELECT_ALL_ROW)
+            return showSelectAllRow ? 0 : -1;
+        if (row === CREATE_ROW)
+            return showCreateRow ? optionsEndStop + 1 : -1;
+        if (row === FOOTER_ROW)
+            return hasFooter ? stopCount - 1 : -1;
+        return row >= 0 && row < filteredOptions.length ? leadingStops + row : -1;
+    };
+    const stopToRow = (stop) => {
+        if (showSelectAllRow && stop === 0)
+            return SELECT_ALL_ROW;
+        if (stop <= optionsEndStop)
+            return stop - leadingStops;
+        return showCreateRow && stop === optionsEndStop + 1 ? CREATE_ROW : FOOTER_ROW;
+    };
+    const moveActive = (delta) => {
+        if (!stopCount)
+            return;
+        const current = rowToStop(activeIndex);
+        const next = current + delta;
+        const isPaging = delta > 0 && canLoadMore && filteredOptions.length > 0 && current === optionsEndStop;
+        if (isPaging)
+            triggerLoadMore();
+        if (delta > 0 && next >= stopCount) {
+            if (!isPaging)
+                setActiveIndex(stopToRow(0));
+            return;
+        }
+        if (next < 0) {
+            setActiveIndex(stopToRow(stopCount - 1));
+            return;
+        }
+        setActiveIndex(stopToRow(next));
+    };
+    const moveActiveBy = (delta) => {
+        if (!filteredOptions.length)
+            return;
+        setActiveIndex((current) => Math.min(Math.max(current + delta, 0), filteredOptions.length - 1));
+    };
+    const moveActiveToEdge = (edge) => {
+        if (!filteredOptions.length)
+            return;
+        setActiveIndex(edge === "start" ? 0 : filteredOptions.length - 1);
+    };
+    const handleListKeyDown = (event) => {
+        var _a, _b;
+        const isTextInput = ((_a = event.target) === null || _a === void 0 ? void 0 : _a.tagName) === "INPUT";
+        if (NAVIGATION_KEYS.has(event.key))
+            setIsKeyboardNav(true);
+        switch (event.key) {
+            case "ArrowDown":
+                event.preventDefault();
+                moveActive(1);
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                moveActive(-1);
+                break;
+            case "Home":
+                if (isTextInput)
+                    break;
+                event.preventDefault();
+                moveActiveToEdge("start");
+                break;
+            case "End":
+                if (isTextInput)
+                    break;
+                event.preventDefault();
+                moveActiveToEdge("end");
+                break;
+            case "PageUp":
+                event.preventDefault();
+                moveActiveBy(-PAGE_STEP);
+                break;
+            case "PageDown":
+                event.preventDefault();
+                moveActiveBy(PAGE_STEP);
+                break;
+            case "Enter": {
+                event.preventDefault();
+                const activeOption = filteredOptions[activeIndex];
+                if (activeIndex === SELECT_ALL_ROW && showSelectAllRow)
+                    handleSelectAll();
+                else if (activeIndex === FOOTER_ROW && hasFooter)
+                    handleFooterAction();
+                else if (activeIndex === CREATE_ROW && showCreateRow)
+                    handleCreate();
+                else if (activeOption)
+                    handleSelect(activeOption);
+                else if (isCreateImplicit)
+                    handleCreate();
+                break;
+            }
+            case "Escape":
+                event.preventDefault();
+                resetAndClose();
+                (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                break;
+            case "Tab":
+                resetAndClose();
+                break;
+            default:
+                break;
+        }
+    };
+    const handleTriggerKeyDown = (event) => {
+        if (!isInteractive)
+            return;
+        if (event.target !== event.currentTarget && (event.key === "Enter" || event.key === " "))
+            return;
+        if (props.isMulti && props.isChipRemovable !== false && !isOpen && event.key === "Backspace" && selectedOptions.length) {
+            event.preventDefault();
+            handleSelect(selectedOptions[selectedOptions.length - 1]);
+            return;
+        }
+        if (isOpen) {
+            handleListKeyDown(event);
+            return;
+        }
+        if (["ArrowDown", "ArrowUp", "Enter", " "].includes(event.key)) {
+            event.preventDefault();
+            handleOpen();
+        }
+    };
+    const handleListScroll = (event) => {
+        const { scrollTop: nextScrollTop, clientHeight, scrollHeight } = event.currentTarget;
+        if (shouldVirtualize)
+            setScrollTop(nextScrollTop);
+        if (nextScrollTop + clientHeight >= scrollHeight - LOAD_MORE_THRESHOLD_PX)
+            triggerLoadMore();
+    };
+    const handleFilterChange = (event) => {
+        const nextText = event.target.value;
+        if (!isSearchControlled)
+            setUncontrolledSearch(nextText);
+        setActiveIndex(0);
+        if (!onSearchChange)
+            return;
+        if (!searchDebounceMs) {
+            onSearchChange(nextText);
+            return;
+        }
+        clearTimeout(searchDebounceTimer.current);
+        searchDebounceTimer.current = setTimeout(() => onSearchChange(nextText), searchDebounceMs);
+    };
+    const activeOption = filteredOptions[activeIndex];
+    const activeDescendantId = activeIndex === SELECT_ALL_ROW && showSelectAllRow
+        ? selectAllId
+        : activeIndex === FOOTER_ROW && hasFooter
+            ? footerId
+            : activeOption
+                ? optionDomId(listboxId, activeOption.id)
+                : showCreateRow && (isCreateImplicit || activeIndex === CREATE_ROW)
+                    ? createRowId
+                    : undefined;
+    const listScrollStyles = useMemo(() => ({
+        ...scrollbarStyles(colors, "overlay"),
+        ...scrollShadowStylesVertical(colors.surfaceRaised),
+    }), [colors]);
+    const rowBackgrounds = useMemo(() => selectRowBackgrounds(colors), [colors]);
+    const rowInks = useMemo(() => ({
+        rest: selectRowInk(colors, false),
+        selected: selectRowInk(colors, true),
+        description: selectRowDescriptionInk(colors),
+        disabled: selectRowDisabledInk(colors),
+    }), [colors]);
+    const filterPlaceholderInk = useMemo(() => selectFilterPlaceholderInk(colors), [colors]);
+    const handlePointerActivate = useCallback((index) => {
+        setIsKeyboardNav(false);
+        setActiveIndex(index);
+    }, []);
+    const ringShadowFor = (isActive) => isActive && isKeyboardNav ? keyboardRingShadow(rowBackgrounds.keyboardRing) : undefined;
+    const showChips = !!props.isMulti && !renderValue && selectedOptions.length > 0;
+    const chipSize = size === "xs" ? "xs" : "sm";
+    const maxVisibleChips = props.isMulti ? ((_a = props.maxVisibleChips) !== null && _a !== void 0 ? _a : DEFAULT_MAX_VISIBLE_CHIPS) : 0;
+    const chipMaxLength = props.isMulti ? props.chipMaxLength : undefined;
+    const canRemoveChips = isInteractive && !!props.isMulti && props.isChipRemovable !== false;
+    const visibleChipOptions = showChips ? selectedOptions.slice(0, maxVisibleChips) : [];
+    const overflowChipCount = showChips ? selectedOptions.length - visibleChipOptions.length : 0;
+    const showClear = isClearable && isInteractive && selectedOptions.length > 0;
+    const triggerSx = useMemo(() => ({
+        ...fieldControlStyles(colors),
+        ...chipTriggerSizeStyles(size, showChips, chipSize),
+        ...(selectedOptions.length ? {} : { color: colors.textMuted }),
+        ...(isOpen
+            ? { borderColor: error ? colors.semanticText.error : colors.primary[500], boxShadow: focusGlowShadow(colors) }
+            : {}),
+        ...reducedMotionSx(),
+    }), [colors, size, showChips, chipSize, selectedOptions.length, isOpen, error]);
+    const defaultTriggerContent = () => {
+        var _a;
+        if (props.isMulti) {
+            const max = (_a = props.maxLabelsBeforeSummary) !== null && _a !== void 0 ? _a : 2;
+            if (selectedOptions.length === 0)
+                return placeholder;
+            if (selectedOptions.length > max)
+                return `${selectedOptions.length} selected`;
+            return selectedOptions.map((o) => o.label).join(", ");
+        }
+        return selectedOptions[0] ? selectedOptions[0].label : placeholder;
+    };
+    const triggerAriaLabel = () => {
+        const base = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label;
+        if (!showChips)
+            return base;
+        const summary = defaultTriggerContent();
+        return base ? `${base}: ${summary}` : `${summary}`;
+    };
+    const triggerIcon = !props.isMulti && ((_b = selectedOptions[0]) === null || _b === void 0 ? void 0 : _b.icon) ? selectedOptions[0].icon : null;
+    const selectedValueIds = selectedOptions.map((option) => option.id.toString());
+    const hiddenValues = !name ? [] : props.isMulti ? selectedValueIds : [(_c = selectedValueIds[0]) !== null && _c !== void 0 ? _c : ""];
+    return (_jsxs(FormControl, { isInvalid: error, isDisabled: isDisabled, isReadOnly: isReadOnly, style: formControlStyle, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isOpen: isOpen, onClose: () => resetAndClose(), placement: "bottom-start", autoFocus: false, returnFocusOnClose: false, gutter: 4, children: [_jsx(PopoverAnchor, { children: _jsxs(Box, { as: "div", ref: mergedTriggerRef, ...ids.controlProps, role: "combobox", tabIndex: isDisabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-owns": `${listboxId} ${filterInputId}`, "aria-activedescendant": activeDescendantId, "aria-disabled": isDisabled || undefined, "aria-busy": isFieldLoading || undefined, "data-readonly": isReadOnly || undefined, "aria-required": isRequired || undefined, "aria-label": triggerAriaLabel(), "aria-labelledby": ariaLabelledBy, onClick: handleOpen, onKeyDown: handleTriggerKeyDown, display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", textAlign: "left", cursor: isDisabled ? "not-allowed" : isReadOnly ? "default" : "pointer", "data-testid": dataTestId, sx: triggerSx, children: [_jsx(Box, { as: "span", display: "inline-flex", flexWrap: showChips ? "wrap" : "nowrap", alignItems: "center", gap: showChips ? 1 : 1.5, minW: 0, flex: 1, isTruncated: !showChips, children: showChips ? (_jsxs(_Fragment, { children: [visibleChipOptions.map((option) => (_jsx(Tag, { label: truncateLabel(String(option.label), chipMaxLength), size: chipSize, variant: "subtle", icon: canRemoveChips ? X : undefined, onIconClick: canRemoveChips ? () => handleSelect(option) : undefined }, option.id))), overflowChipCount > 0 && (_jsx(Tag, { label: `+${overflowChipCount}`, size: chipSize, variant: "subtle", colorScheme: "gray" }))] })) : (_jsxs(_Fragment, { children: [triggerIcon ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: triggerIcon })) : null, _jsx(Box, { as: "span", isTruncated: true, children: renderValue ? renderValue(selectedOptions) : defaultTriggerContent() })] })) }), showClear && (_jsx(Box, { as: "button", type: "button", "aria-label": "Clear selection", onClick: handleClear, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, ml: 2, color: colors.textMuted, _hover: { color: colors.text[700] }, children: _jsx(X, { size: CONTROL_SIZES[size].iconSize }) })), isFieldLoading ? (_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, ml: 2, children: _jsx(Spinner, { size: "xs", label: "" }) })) : rightIcon ? ("onClick" in rightIcon && isInteractive ? (_jsx(Box, { as: "button", type: "button", "aria-label": rightIcon.ariaLabel, onClick: (event) => {
+                                        event.stopPropagation();
+                                        rightIcon.onClick();
+                                    }, onKeyDown: (event) => event.stopPropagation(), display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, ml: 2, color: colors.textMuted, _hover: { color: colors.text[700] }, children: rightIcon.icon })) : (_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, ml: 2, color: colors.textMuted, children: rightIcon.icon }))) : (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, ml: 2, transition: CHEVRON_TRANSITION, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", color: colors.textMuted, sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: CONTROL_SIZES[size].iconSize }) }))] }) }), _jsx(Portal, { children: _jsxs(PopoverContent, { "aria-label": (_d = label !== null && label !== void 0 ? label : ariaLabel) !== null && _d !== void 0 ? _d : placeholder, width: "max-content", minWidth: triggerWidth ? `${triggerWidth}px` : undefined, maxWidth: "min(24rem, calc(100vw - 2rem))", borderRadius: "xl", boxShadow: theme.shadows.lg, overflow: "hidden", onKeyDown: handleListKeyDown, children: [_jsx(Box, { p: spec.mx, borderBottom: `${BORDER_WIDTHS.hairline} solid ${raisedRule(colors)}`, display: isSearchable ? undefined : "none", children: _jsx(Input, { ref: filterInputRef, id: filterInputId, size: size, px: spec.px, placeholder: "Type to filter...", _placeholder: filterPlaceholderInk ? { color: filterPlaceholderInk } : undefined, value: currentSearch, onChange: handleFilterChange, "aria-activedescendant": activeDescendantId, "aria-controls": listboxId, "aria-label": "Filter options", tabIndex: isSearchable ? undefined : -1 }) }), _jsxs(Box, { id: listboxId, ref: listRef, role: "listbox", "aria-label": (_e = label !== null && label !== void 0 ? label : ariaLabel) !== null && _e !== void 0 ? _e : placeholder, "aria-multiselectable": props.isMulti || undefined, "aria-busy": isLoading || undefined, maxH: maxMenuHeight, overflowY: "auto", py: spec.mx, sx: listScrollStyles, onScroll: handleListScroll, children: [filteredOptions.length === 0 && !isLoading && !showCreateRow && (_jsx(Box, { mx: spec.mx, px: spec.px, py: spec.py, fontSize: spec.fontSize, color: colors.textMuted, children: noOptionsMessage !== null && noOptionsMessage !== void 0 ? noOptionsMessage : "No Options" })), showSelectAllRow && (_jsxs(Box, { id: selectAllId, role: "option", "aria-selected": allFilteredSelected, onClick: handleSelectAll, onMouseEnter: () => handlePointerActivate(SELECT_ALL_ROW), mx: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: "pointer", display: "flex", alignItems: "center", gap: spec.gap, fontSize: spec.fontSize, color: rowInks.rest, bg: selectRowFill(rowBackgrounds, { isSelected: false, isActive: activeIndex === SELECT_ALL_ROW }), boxShadow: ringShadowFor(activeIndex === SELECT_ALL_ROW), transition: ROW_TRANSITION, sx: reducedMotionSx(), children: [_jsx(Checkbox, { isChecked: allFilteredSelected, pointerEvents: "none", tabIndex: -1, sx: DECORATIVE_CHECKBOX_SX }), allFilteredSelected ? "Unselect All" : "Select All"] })), showSelectAllRow && (_jsx(Box, { role: "presentation", mx: spec.mx, my: `${SELECT_ALL_RULE_MARGIN_PX}px`, height: BORDER_WIDTHS.hairline, bg: raisedRule(colors) })), hasGroups
+                                            ? (_jsxs(_Fragment, { children: [topPadPx > 0 && _jsx(Box, { height: `${topPadPx}px` }), renderedGroupedRows.map((row) => {
+                                                        var _a;
+                                                        return row.kind === "header" ? (_jsx(Box, { "data-group-header": shouldVirtualize ? "" : undefined, mx: spec.mx, px: spec.px, pt: 2, pb: 1, fontSize: "xs-minus", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.03em", color: colors.textMuted, children: row.group }, row.key)) : (_jsx(OptionRow, { option: row.option, index: row.index, listboxId: listboxId, isSelected: selectedIds.has(row.option.id.toString()), isActive: row.index === activeIndex, isMulti: (_a = props.isMulti) !== null && _a !== void 0 ? _a : false, theme: theme, backgrounds: rowBackgrounds, ink: rowInks, showRing: isKeyboardNav && row.index === activeIndex, spec: spec, renderOption: renderOption, renderOptionEnd: renderOptionEnd, optionAction: optionAction, checkPlacement: checkPlacement, onSelect: handleSelect, onActivate: handlePointerActivate }, row.key));
+                                                    }), bottomPadPx > 0 && _jsx(Box, { height: `${bottomPadPx}px` })] }))
+                                            : (_jsxs(_Fragment, { children: [topPadPx > 0 && _jsx(Box, { height: `${topPadPx}px` }), renderedOptions.map((option, i) => {
+                                                        var _a;
+                                                        return (_jsx(OptionRow, { option: option, index: startIndex + i, listboxId: listboxId, isSelected: selectedIds.has(option.id.toString()), isActive: startIndex + i === activeIndex, isMulti: (_a = props.isMulti) !== null && _a !== void 0 ? _a : false, theme: theme, backgrounds: rowBackgrounds, ink: rowInks, showRing: isKeyboardNav && startIndex + i === activeIndex, spec: spec, renderOption: renderOption, renderOptionEnd: renderOptionEnd, optionAction: optionAction, checkPlacement: checkPlacement, onSelect: handleSelect, onActivate: handlePointerActivate }, option.id));
+                                                    }), bottomPadPx > 0 && _jsx(Box, { height: `${bottomPadPx}px` })] })), showCreateRow && (_jsx(Box, { id: createRowId, role: "option", "aria-selected": false, "data-index": -1, onClick: handleCreate, mx: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: "pointer", fontSize: spec.fontSize, fontWeight: 600, color: colors.primary[600], bg: activeDescendantId === createRowId ? rowBackgrounds.active : "transparent", boxShadow: ringShadowFor(activeDescendantId === createRowId), children: createLabel ? createLabel(currentSearch.trim()) : `Create "${currentSearch.trim()}"` })), isLoading && (_jsxs(Box, { mx: spec.mx, px: spec.px, py: spec.py, display: "flex", alignItems: "center", gap: spec.gap, fontSize: spec.fontSize, color: colors.textMuted, children: [_jsx(Spinner, { size: "xs" }), loadingText] })), footerAction && (_jsx(Box, { id: footerId, role: "option", "aria-selected": false, onClick: handleFooterAction, onMouseEnter: () => handlePointerActivate(FOOTER_ROW), position: "sticky", bottom: `-${spec.mx}`, pt: 1, bg: colors.surfaceRaised, borderTop: `${BORDER_WIDTHS.hairline} solid ${raisedRule(colors)}`, children: _jsxs(Box, { mx: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: "pointer", display: "flex", alignItems: "center", gap: spec.gap, fontSize: spec.fontSize, fontWeight: 500, color: colors.accentText, bg: activeIndex === FOOTER_ROW ? rowBackgrounds.active : "transparent", boxShadow: ringShadowFor(activeIndex === FOOTER_ROW), children: [(_f = footerAction.icon) !== null && _f !== void 0 ? _f : _jsx(Plus, { size: spec.iconSize }), footerAction.label] }) }))] })] }) })] }), hiddenValues.map((value) => (_jsx("input", { type: "hidden", name: name, value: value }, value))), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+export default SelectPopup;