pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

package/dist/Components/SearchSelect/SearchSelect.js

@@ -43,13 +43,23 @@ const lucide_react_1 = require("lucide-react");
 const FormLabel_1 = require("../Common/FormLabel");
 const Tag_1 = __importDefault(require("../Tag/Tag"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-const HelperText_1 = __importDefault(require("../Common/HelperText"));
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const optionRowSizes_1 = require("../../Theme/tokens/primitives/optionRowSizes");
+const optionRowInk_1 = require("../Select/optionRowInk");
+const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+const fieldStyles_1 = require("../Common/fieldStyles");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const SelectTruncatedLabel_1 = __importDefault(require("./SelectTruncatedLabel"));
 const searchSelectSize_1 = require("./searchSelectSize");
 const Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
 const rafThrottle_1 = require("../../Utils/rafThrottle");
+const SEGMENT_TRANSITION = (0, motion_1.transitionFor)(["background-color", "box-shadow"]);
+const CHEVRON_TRANSITION = (0, motion_1.transitionFor)(["transform", "color"], "base");
 const normalizeSingleValue = (val) => {
     if (typeof val === "object" && val !== null && "id" in val && "label" in val) {
         return val;
@@ -62,9 +72,13 @@ const normalizeMultiValue = (val) => {
     }
     return [];
 };
-const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading = false, isLoading = false, loadingText = "Loading...", placeholder = "Select", value, searchQuery = "", isMultiple = false, isRequired = false, error = false, errorMessage, helperText, width = "100%", height, size = "md", chip, information, isInformation, informationMessage, rightIcon, addNew, isSelectAll = false, pagination, insideSelect, isRemoveAllIcon, }) => {
-    var _a, _b;
-    const s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || "md"));
+/** Full-featured combobox: search, chips, select-all, paginated infinite scroll — not DOM-virtualized despite the `virtualization` prop. */
+/** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see select-absorption-spec.md. */
+const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOptionLoading = false, isLoading = false, loadingText = "Loading...", placeholder = "Select", value, searchQuery = "", isMultiple = false, isRequired = false, error = false, errorMessage, helperText, width = "100%", height, size = "sm", isDisabled = false, chip, information, isInformation, informationMessage, rightIcon, addNew, isSelectAll = false, pagination, insideSelect, isRemoveAllIcon, "aria-label": ariaLabel, }) => {
+    var _a, _b, _c, _d, _e;
+    const s = (0, searchSelectSize_1.getSearchSelectSizeStyles)(size);
+    const spec = (0, optionRowSizes_1.optionRowSpec)(size);
+    const emitChange = onChange !== null && onChange !== void 0 ? onChange : onSelect;
     const insideSelectBoxHeight = height !== null && height !== void 0 ? height : s.insideSelectDefaultHeight;
     const [inputValue, setInputValue] = (0, react_1.useState)(searchQuery);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
@@ -77,6 +91,9 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
     const dropdownMenuRef = (0, react_1.useRef)(null);
     const [dropdownPos, setDropdownPos] = (0, react_1.useState)({ top: 0, left: 0, width: 0 });
     const scrollTimeoutRef = (0, react_1.useRef)(null);
+    const optionsLengthRef = (0, react_1.useRef)(options.length);
+    const lastPageStartRef = (0, react_1.useRef)(null);
+    const optionsListRef = (0, react_1.useRef)(null);
     const [focused, setFocused] = (0, react_1.useState)(false);
     const [customSelectOpen, setCustomSelectOpen] = (0, react_1.useState)(false);
     const customSelectRef = (0, react_1.useRef)(null);
@@ -87,27 +104,25 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
         width: 0,
     });
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    // `searchselect-dropdown-portal` is also the DOM id an existing outside-click check and
-    // several tests look up directly — kept as a literal constant, not derived from `baseId`,
-    // so those keep working unchanged.
-    const generatedId = (0, react_1.useId)();
-    const baseId = id || generatedId;
-    const listboxId = "searchselect-dropdown-portal";
+    const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    const baseId = ids.inputId;
+    const listboxId = `${baseId}-listbox`;
+    const insideSelectPortalId = `${baseId}-inside-select`;
     const getOptionId = (index) => `${baseId}-option-${index}`;
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(-1);
     const pendingFocusRestoreRef = (0, react_1.useRef)(false);
-    // Which trigger element actually has DOM focus right now, if any. Opening the menu from the
-    // toggle button (or the closed single-value button) doesn't move focus into Input — it stays
-    // wherever it was — so which element is the combobox's ARIA host must follow real focus, not
-    // just "Input is mounted now": falling back to render-condition guessing there would put
-    // aria-activedescendant on an unfocused Input while the still-focused toggle button gets none.
+    // NOTE: the ARIA host follows real focus; opening from a button doesn't move it.
     const [focusedTrigger, setFocusedTrigger] = (0, react_1.useState)(null);
+    const closeMenus = (0, react_1.useCallback)(() => {
+        setIsOpen(false);
+        setCustomSelectOpen(false);
+    }, []);
+    const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen || customSelectOpen, closeMenus);
     (0, react_2.useOutsideClick)({
         ref: containerRef,
         handler: (e) => {
-            // The options dropdown is portaled to <body>, so a click on it is "outside"
-            // the container — ignore those so selecting an option doesn't close first.
-            const dropdown = document.getElementById(listboxId);
+            const dropdown = dropdownMenuRef.current;
             if (dropdown && dropdown.contains(e.target))
                 return;
             setIsOpen(false);
@@ -129,10 +144,22 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
         return () => clearTimeout(delayDebounce);
     }, [inputValue]);
     (0, react_1.useEffect)(() => {
-        if (pagination === null || pagination === void 0 ? void 0 : pagination.limit) {
-            setHasMore(options.length % pagination.limit === 0);
+        optionsLengthRef.current = options.length;
+    }, [options.length]);
+    (0, react_1.useEffect)(() => {
+        if ((pagination === null || pagination === void 0 ? void 0 : pagination.hasMore) !== undefined) {
+            setHasMore(pagination.hasMore);
+            return;
         }
-    }, [options.length, pagination === null || pagination === void 0 ? void 0 : pagination.limit]);
+        if ((pagination === null || pagination === void 0 ? void 0 : pagination.totalRecords) !== undefined) {
+            setHasMore(options.length < pagination.totalRecords);
+            return;
+        }
+        if (!(pagination === null || pagination === void 0 ? void 0 : pagination.onScroll))
+            return;
+        const limit = pagination.limit || 10;
+        setHasMore(options.length % limit === 0);
+    }, [options.length, pagination === null || pagination === void 0 ? void 0 : pagination.hasMore, pagination === null || pagination === void 0 ? void 0 : pagination.totalRecords, pagination === null || pagination === void 0 ? void 0 : pagination.limit, pagination === null || pagination === void 0 ? void 0 : pagination.onScroll]);
     const handleSelect = (option) => {
         var _a;
         if (isMultiple && insideSelect) {
@@ -141,55 +168,45 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
             const updated = exists
                 ? selectedValues.filter((v) => v.id !== option.id)
                 : [...selectedValues, { ...option, insideSelectId }]; // add only for new
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
+            emitChange === null || emitChange === void 0 ? void 0 : emitChange(updated);
         }
         else if (isMultiple) {
             const exists = selectedValues.find((v) => v.id === option.id);
             const updated = exists
                 ? selectedValues.filter((v) => v.id !== option.id)
                 : [...selectedValues, option];
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
+            emitChange === null || emitChange === void 0 ? void 0 : emitChange(updated);
         }
         else {
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
+            emitChange === null || emitChange === void 0 ? void 0 : emitChange(option);
             setIsOpen(false);
             setInputValue("");
         }
     };
     const handleRemove = (id) => {
         const updated = selectedValues.filter((v) => v.id !== id);
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
+        emitChange === null || emitChange === void 0 ? void 0 : emitChange(updated);
     };
     const handleClearAll = () => {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(isMultiple ? [] : undefined);
+        emitChange === null || emitChange === void 0 ? void 0 : emitChange(isMultiple ? [] : undefined);
         setInputValue("");
     };
     const handleSelectAll = () => {
         const allSelected = filteredOptions.every((opt) => selectedValues.some((sel) => sel.id === opt.id));
         if (allSelected) {
             const updated = selectedValues.filter((sel) => !filteredOptions.some((opt) => opt.id === sel.id));
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
+            emitChange === null || emitChange === void 0 ? void 0 : emitChange(updated);
         }
         else {
             const filteredNotSelected = filteredOptions.filter((opt) => !selectedValues.some((sel) => sel.id === opt.id));
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect([...selectedValues, ...filteredNotSelected]);
+            emitChange === null || emitChange === void 0 ? void 0 : emitChange([...selectedValues, ...filteredNotSelected]);
         }
         setInputValue("");
     };
     const activeOptionId = isOpen && activeIndex >= 0 && filteredOptions[activeIndex]
         ? getOptionId(activeIndex)
         : undefined;
-    // Exactly one of {Input, the closed single-select trigger button, the toggle-dropdown
-    // button} is the field's authoritative combobox host at any moment — mirrors the render
-    // conditions below (Input when it's mounted, else the closed single-select trigger button,
-    // else the toggle-dropdown button, which is present in every other state bar `isLoading`/a
-    // custom `rightIcon` override — both flagged as residual gaps, not fixed here). Only that
-    // one element gets `role="combobox"` + `aria-activedescendant`: axe's `aria-allowed-attr`
-    // correctly rejects `aria-activedescendant` on a plain (button-role) element, so the other,
-    // non-primary trigger(s) that happen to render alongside it (e.g. the toggle button next to
-    // the closed single-value button) only get the plain disclosure attributes below.
-    // Real focus wins when we have it; otherwise fall back to guessing from render state (nothing
-    // has been focused yet, e.g. on first render).
+    // One element hosts the field's ARIA at a time: real focus wins, else render state.
     const primaryTarget = focusedTrigger !== null && focusedTrigger !== void 0 ? focusedTrigger : (isOpen || inputValue || !selectedValues.length
         ? "input"
         : !isMultiple && selectedValues.length === 1
@@ -200,20 +217,33 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
         "aria-expanded": isOpen,
         "aria-controls": isOpen ? listboxId : undefined,
     };
+    const validityA11yProps = {
+        "aria-invalid": ids.controlProps["aria-invalid"],
+        "aria-describedby": ids.describedBy,
+        "aria-required": isRequired || undefined,
+    };
+    // role="combobox" is invalid on a native <button>, so only Input carries it.
     const comboboxA11yProps = (target) => {
         const isPrimary = primaryTarget === target;
-        if (isPrimary) {
-            return { role: "combobox", ...disclosureA11yProps, "aria-activedescendant": activeOptionId };
+        if (target === "input") {
+            if (!isPrimary)
+                return {};
+            return {
+                role: "combobox",
+                ...disclosureA11yProps,
+                "aria-owns": listboxId,
+                "aria-activedescendant": activeOptionId,
+                ...validityA11yProps,
+            };
         }
-        // Native <input>'s implicit role is "textbox", which — unlike "button" — doesn't validly
-        // support aria-expanded/haspopup/controls at all (axe's aria-allowed-attr correctly rejects
-        // it): only expose disclosure state on Input once it's actually the focused combobox host.
-        // The trigger/toggle buttons keep native role="button" either way, which does support them.
-        return target === "input" ? {} : disclosureA11yProps;
+        return { ...disclosureA11yProps, ...(isPrimary ? validityA11yProps : {}) };
     };
     // Opens only — matches SelectV2's convention of a first ArrowDown/Enter/Space that opens with
     // nothing highlighted yet, and a second keypress that moves onto the first/last option.
     const openMenu = () => {
+        if (isDisabled)
+            return;
+        requestExclusiveOpen();
         setCustomSelectOpen(false);
         setIsOpen(true);
     };
@@ -229,20 +259,13 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
     const restoreFocus = () => {
         pendingFocusRestoreRef.current = true;
     };
-    // ArrowDown/Up open the closed control and then move the aria-activedescendant highlight
-    // (wrapping at both ends, matching SelectV2's convention). Home/End are skipped while the
-    // event target is the text input so they still move the text cursor, not the highlight.
-    //
-    // Only reacts when the key originated on one of the three combobox trigger elements, not
-    // merely bubbled up to this Box from some other focusable descendant — a Tag's own "Remove"
-    // button lives inside this same Box, and without this guard its Enter/Space presses were
-    // being intercepted here (e.g. re-opening the menu) instead of reaching Tag's click handler.
+    // NOTE: only reacts to keys from the combobox triggers — without this guard, Tag's own "Remove" button lost its clicks.
     const handleControlKeyDown = (e) => {
         const target = e.target;
         const isKnownTrigger = target === inputRef.current ||
             target === triggerButtonRef.current ||
             target === toggleButtonRef.current;
-        if (!isKnownTrigger)
+        if (!isKnownTrigger || isDisabled)
             return;
         const isTextInputTarget = target.tagName === "INPUT";
         switch (e.key) {
@@ -316,11 +339,14 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
         }
         setActiveIndex((prev) => (prev >= 0 && prev < filteredOptions.length ? prev : -1));
     }, [isOpen, filteredOptions.length]);
-    // A keyboard-driven close (Escape, or Enter selecting in single-select) can unmount the
-    // focused Input as the control collapses to the trigger button, which silently drops focus to
-    // <body>. Only step in when that actually happened — focus staying right where it was (e.g.
-    // Escape pressed on the toggle button, which never unmounts) must be left alone: forcing focus
-    // onto Input here would fire its own onFocus handler and reopen the menu right after closing it.
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (!isOpen || activeIndex < 0 || !optionsListRef.current)
+            return;
+        (_b = (_a = optionsListRef.current
+            .querySelector(`[data-index="${activeIndex}"]`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: "nearest" });
+    }, [isOpen, activeIndex]);
+    // NOTE: only restores focus when a keyboard close actually unmounted Input and dropped focus to body.
     (0, react_1.useEffect)(() => {
         var _a, _b, _c, _d;
         if (!pendingFocusRestoreRef.current)
@@ -350,15 +376,34 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
                 clearTimeout(scrollTimeoutRef.current);
             scrollTimeoutRef.current = setTimeout(() => {
                 var _a;
-                const startIndex = options.length + 1;
+                scrollTimeoutRef.current = null;
+                const startIndex = optionsLengthRef.current + 1;
+                if (lastPageStartRef.current === startIndex) {
+                    setHasMore(false);
+                    return;
+                }
+                lastPageStartRef.current = startIndex;
                 (_a = pagination.onScroll) === null || _a === void 0 ? void 0 : _a.call(pagination, startIndex, pagination.limit || 10, inputValue);
             }, 200);
         }
-    }, [pagination, options.length, inputValue, hasMore]);
+    }, [pagination, inputValue, hasMore]);
+    (0, react_1.useEffect)(() => {
+        if (isOpen)
+            return;
+        if (scrollTimeoutRef.current) {
+            clearTimeout(scrollTimeoutRef.current);
+            scrollTimeoutRef.current = null;
+        }
+        lastPageStartRef.current = null;
+    }, [isOpen]);
+    (0, react_1.useEffect)(() => () => {
+        if (scrollTimeoutRef.current)
+            clearTimeout(scrollTimeoutRef.current);
+    }, []);
     (0, react_2.useOutsideClick)({
         ref: customSelectRef,
         handler: (e) => {
-            const dropdown = document.getElementById("custom-select-portal");
+            const dropdown = insideSelectMenuRef.current;
             if (dropdown && dropdown.contains(e.target))
                 return;
             setCustomSelectOpen(false);
@@ -470,84 +515,82 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
             window.removeEventListener("resize", onReposition);
         };
     }, [isOpen, updateDropdownPos]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: containerRef, width: width, position: "relative", children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: baseId, isRequired: isRequired, isInformation: isInformation !== null && isInformation !== void 0 ? isInformation : information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: informationMessage !== null && informationMessage !== void 0 ? informationMessage : information === null || information === void 0 ? void 0 : information.informationMessage })), (0, jsx_runtime_1.jsx)(react_2.InputGroup, { size: size, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "div", ref: controlRef, w: "100%", minH: s.minH, px: s.px, pr: s.pr, position: "relative", display: "flex", alignItems: "center", flexWrap: "wrap", gap: s.gap, border: "0.063rem solid", borderColor: error
-                        ? theme.colors.semanticText.error
-                        : focused
-                            ? theme.colors.primary[500]
-                            : theme.colors.boxborder[500], borderRadius: "lg", bg: theme.colors.gray[50], boxShadow: focused
-                        ? error
-                            ? `0 0 0 0.125rem ${theme.colors.boxShadow.error}`
-                            : `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`
-                        : error
-                            ? `0 0 0 0.125rem ${theme.colors.boxShadow.error}`
-                            : "none", transition: "box-shadow 0.2s, border-color 0.2s", onKeyDown: handleControlKeyDown, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onClick: () => {
-                        setCustomSelectOpen(false);
-                        setIsOpen(true);
-                    }, children: [insideSelect && (() => {
-                            var _a, _b, _c, _d, _e;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: containerRef, width: width, position: "relative", children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: baseId, isRequired: isRequired, isInformation: isInformation !== null && isInformation !== void 0 ? isInformation : information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: informationMessage !== null && informationMessage !== void 0 ? informationMessage : information === null || information === void 0 ? void 0 : information.informationMessage })), (0, jsx_runtime_1.jsx)(react_2.InputGroup, { size: size, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "div", ref: controlRef, w: "100%", minH: s.minH, px: s.px, pr: s.pr, position: "relative", display: "flex", alignItems: "center", flexWrap: "wrap", gap: s.gap, ...(0, fieldStyles_1.getFieldStateStyles)(theme, { error, focused, disabled: isDisabled }), _hover: focused || error || isDisabled ? undefined : { borderColor: (0, fieldStyles_1.fieldHoverBorder)(theme.colors) }, sx: (0, motion_2.reducedMotionSx)(), "aria-disabled": isDisabled || undefined, onKeyDown: handleControlKeyDown, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onClick: () => openMenu(), children: [insideSelect && (() => {
+                            var _a, _b, _c;
                             const insideLabel = (_a = insideSelect.value) === null || _a === void 0 ? void 0 : _a.label;
                             const insidePlaceholder = (_b = insideSelect.placeholder) !== null && _b !== void 0 ? _b : "Select";
                             return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", ref: customSelectRef, flexShrink: 0, ml: s.insideSelectMarginLeft, h: "-webkit-fill-available", borderRight: "0.063rem solid", borderColor: theme.colors.boxborder[200], bg: customSelectOpen
-                                    ? theme.colors.primary.opacity[8]
-                                    : theme.colors.background[400], borderLeftRadius: "md", borderRightRadius: 0, transition: "background 0.15s ease, box-shadow 0.15s ease", boxShadow: customSelectOpen
+                                    ? rowBackgrounds.active
+                                    : theme.colors.background[400], borderLeftRadius: "md", borderRightRadius: 0, transition: SEGMENT_TRANSITION, boxShadow: customSelectOpen
                                     ? `inset 0 0 0 0.063rem ${theme.colors.primary[500]}`
                                     : "none", onClick: (e) => {
                                     e.stopPropagation();
+                                    if (isDisabled)
+                                        return;
                                     setIsOpen(false);
-                                    setCustomSelectOpen((prev) => !prev);
-                                }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { minW: "4.5rem", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, width: insideSelect.width, height: insideSelectBoxHeight, pl: "0.5rem", pr: "0.375rem", children: [insideLabel ? ((0, jsx_runtime_1.jsx)(SelectTruncatedLabel_1.default, { label: insideLabel, maxWidth: insideSelect.width || "6rem", fontSize: s.fieldFontSize })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.fieldFontSize, fontWeight: 500, color: theme.colors.placeholder[500], isTruncated: true, maxW: insideSelect.width || "6rem", children: insidePlaceholder })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, color: customSelectOpen ? theme.colors.accentText : theme.colors.textMuted, transition: "transform 0.2s ease, color 0.15s ease", transform: customSelectOpen ? "rotate(180deg)" : "rotate(0deg)", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize }) })] }), customSelectOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: setInsideSelectMenuRef, id: "custom-select-portal", position: "fixed", top: `${customSelectPos.top}px`, left: `${customSelectPos.left}px`, zIndex: 1510, bg: theme.colors.background[50], border: "0.063rem solid", borderColor: theme.colors.boxborder[200], borderRadius: "lg", boxShadow: (_d = (_c = theme.shadows) === null || _c === void 0 ? void 0 : _c.md) !== null && _d !== void 0 ? _d : "md", minW: `${customSelectPos.width}px`, maxW: "20rem", py: 1, overflow: "hidden", children: (_e = insideSelect.option) === null || _e === void 0 ? void 0 : _e.map((item) => {
+                                    if (customSelectOpen) {
+                                        setCustomSelectOpen(false);
+                                    }
+                                    else {
+                                        requestExclusiveOpen();
+                                        setCustomSelectOpen(true);
+                                    }
+                                }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { minW: "4.5rem", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, width: insideSelect.width, height: insideSelectBoxHeight, pl: "0.5rem", pr: "0.375rem", children: [insideLabel ? ((0, jsx_runtime_1.jsx)(SelectTruncatedLabel_1.default, { label: insideLabel, maxWidth: insideSelect.width || "6rem", fontSize: s.fieldFontSize })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.fieldFontSize, fontWeight: 500, color: theme.colors.textMuted, isTruncated: true, maxW: insideSelect.width || "6rem", children: insidePlaceholder })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, color: customSelectOpen ? theme.colors.accentText : theme.colors.textMuted, transition: CHEVRON_TRANSITION, transform: customSelectOpen ? "rotate(180deg)" : "rotate(0deg)", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize }) })] }), customSelectOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: setInsideSelectMenuRef, id: insideSelectPortalId, position: "fixed", top: `${customSelectPos.top}px`, left: `${customSelectPos.left}px`, zIndex: 1510, bg: theme.colors.surfaceRaised, border: "0.063rem solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, minW: `${customSelectPos.width}px`, maxW: "20rem", py: 1, overflow: "hidden", children: (_c = insideSelect.option) === null || _c === void 0 ? void 0 : _c.map((item) => {
                                                 var _a;
                                                 const selected = ((_a = insideSelect.value) === null || _a === void 0 ? void 0 : _a.id) === item.id;
-                                                return ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, minH: s.optionRowMinH, py: s.optionRowPy, px: "0.75rem", fontSize: s.dropdownTextFontSize, fontWeight: selected ? 600 : 500, color: selected
-                                                        ? theme.colors.accentText
-                                                        : theme.colors.text[700], bg: selected
-                                                        ? theme.colors.primary.opacity[8]
-                                                        : "transparent", _hover: {
+                                                return ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: spec.gap, minH: spec.minH, py: spec.py, px: spec.px, fontSize: spec.fontSize, fontWeight: (0, optionRowInk_1.optionRowWeight)(selected), color: (0, optionRowInk_1.optionRowInk)(theme.colors, selected), bg: selected ? rowBackgrounds.selected : "transparent", _hover: {
                                                         bg: selected
-                                                            ? theme.colors.primary.opacity[8]
-                                                            : theme.colors.gray[50],
+                                                            ? rowBackgrounds.selectedActive
+                                                            : rowBackgrounds.active,
                                                     }, cursor: "pointer", onClick: (e) => {
                                                         e.stopPropagation();
                                                         handleCustomSelect(item);
-                                                    }, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { isTruncated: true, children: item.label }), selected && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.chevronSize - 2, color: theme.colors.accentText }))] }, item.id));
+                                                    }, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { isTruncated: true, children: item.label }), selected && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: spec.iconSize, color: theme.colors.accentText }))] }, item.id));
                                             }) }) }))] }));
                         })(), isMultiple
                             ? selectedValues
-                                .slice(0, (chip === null || chip === void 0 ? void 0 : chip.maxChips) || selectedValues.length)
+                                .slice(0, (_a = chip === null || chip === void 0 ? void 0 : chip.maxChips) !== null && _a !== void 0 ? _a : selectedValues.length)
                                 .map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: (chip === null || chip === void 0 ? void 0 : chip.maxText) && item.label.length > chip.maxText
                                     ? item.label.slice(0, chip.maxText) + "…"
-                                    : item.label, onIconClick: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? () => handleRemove(item === null || item === void 0 ? void 0 : item.id) : undefined, icon: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? lucide_react_1.CircleX : undefined, colorScheme: "gray", size: s.tagSize }, item.id)))
+                                    : item.label, onIconClick: (chip === null || chip === void 0 ? void 0 : chip.onClick) && !isDisabled ? () => handleRemove(item.id) : undefined, icon: (chip === null || chip === void 0 ? void 0 : chip.onClick) && !isDisabled ? lucide_react_1.CircleX : undefined, colorScheme: "gray", size: s.tagSize }, item.id)))
                             : selectedValues.length === 1 &&
-                                !isOpen && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", ref: triggerButtonRef, id: primaryTarget === "button" ? baseId : undefined, ...comboboxA11yProps("button"), "aria-label": !label ? String((_b = (_a = selectedValues[0]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "") : undefined, onFocus: () => setFocusedTrigger("button"), onBlur: () => setFocusedTrigger((prev) => (prev === "button" ? null : prev)), onClick: () => {
-                                    setCustomSelectOpen(false);
-                                    setIsOpen(true);
-                                }, fontSize: s.fieldFontSize, color: theme.colors.gray[800], background: "transparent", border: "none", cursor: "pointer", p: 0, display: "flex", alignItems: "center", flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(SelectTruncatedLabel_1.default, { label: String(selectedValues[0].label), maxWidth: "calc(100% - 2rem)", fontSize: s.fieldFontSize }) })), (chip === null || chip === void 0 ? void 0 : chip.maxChips) && isMultiple && selectedValues.length > chip.maxChips && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: `+ ${selectedValues.length - chip.maxChips}`, colorScheme: "gray", size: s.tagSize }, "extra-count")), (isOpen || inputValue || !selectedValues.length) && ((0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, id: primaryTarget === "input" ? baseId : undefined, "aria-autocomplete": "list", ...comboboxA11yProps("input"), variant: "unstyled", size: size, h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, flex: "1", 
+                                !isOpen && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", ref: triggerButtonRef, disabled: isDisabled, id: primaryTarget === "button" ? baseId : undefined, ...comboboxA11yProps("button"), "aria-label": label ? `${label}: ${String((_c = (_b = selectedValues[0]) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : "")}` : String((_e = (_d = selectedValues[0]) === null || _d === void 0 ? void 0 : _d.label) !== null && _e !== void 0 ? _e : ""), onFocus: () => setFocusedTrigger("button"), onBlur: () => setFocusedTrigger((prev) => (prev === "button" ? null : prev)), onClick: () => openMenu(), fontSize: s.fieldFontSize, color: theme.colors.text[900], background: "transparent", border: "none", cursor: "pointer", p: 0, display: "flex", alignItems: "center", flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(SelectTruncatedLabel_1.default, { label: String(selectedValues[0].label), maxWidth: "calc(100% - 2rem)", fontSize: s.fieldFontSize }) })), (chip === null || chip === void 0 ? void 0 : chip.maxChips) !== undefined && isMultiple && selectedValues.length > chip.maxChips && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: `+ ${selectedValues.length - chip.maxChips}`, colorScheme: "gray", size: s.tagSize }, "extra-count")), (isOpen || inputValue || !selectedValues.length) && ((0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, id: primaryTarget === "input" ? baseId : undefined, "aria-autocomplete": "list", "aria-label": label ? undefined : ariaLabel, ...comboboxA11yProps("input"), variant: "unstyled", size: size, h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, flex: "1", 
                             // minW="5rem"
-                            minW: "0", value: inputValue, onChange: (e) => setInputValue(e.target.value), onFocus: () => {
+                            minW: "0", value: inputValue, isInvalid: error && primaryTarget === "input", isDisabled: isDisabled, _disabled: { cursor: "not-allowed" }, onChange: (e) => setInputValue(e.target.value), onFocus: () => {
                                 setFocused(true);
                                 setFocusedTrigger("input");
-                                setCustomSelectOpen(false);
-                                setIsOpen(true);
+                                openMenu();
                             }, onBlur: () => {
                                 setFocused(false);
                                 setFocusedTrigger((prev) => (prev === "input" ? null : prev));
-                            }, placeholder: selectedValues.length && !isOpen ? "" : placeholder })), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", right: s.rightOffset, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1, children: [isRemoveAllIcon && selectedValues.length > 0 && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: s.clearIconSize, color: theme.colors.text[900] }), "aria-label": "Clear all", variant: "ghost", size: s.iconButtonSize, onClick: handleClearAll, sx: {
+                            }, placeholder: selectedValues.length ? "" : placeholder })), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", right: s.rightOffset, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1, children: [isRemoveAllIcon && selectedValues.length > 0 && !isDisabled && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: s.clearIconSize, color: theme.colors.text[900] }), "aria-label": "Clear all", variant: "ghost", size: s.iconButtonSize, onClick: handleClearAll, sx: {
                                             bg: "transparent",
                                             _hover: { bg: "transparent" },
                                             _active: { bg: "transparent" },
-                                            _focus: { boxShadow: "none", bg: "transparent" },
-                                        } }) })), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize })) : isValidIcon(rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon) ? ((0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon, "aria-label": "right-icon", variant: "ghost", size: s.iconButtonSize, onClick: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.onClick })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", ref: toggleButtonRef, id: primaryTarget === "toggle" ? baseId : undefined, ...comboboxA11yProps("toggle"), onFocus: () => setFocusedTrigger("toggle"), onBlur: () => setFocusedTrigger((prev) => (prev === "toggle" ? null : prev)), onClick: (e) => {
+                                            ...(0, focusRing_styles_1.focusVisibleStyles)(theme.colors),
+                                        } }) })), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize })) : isValidIcon(rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon) ? ((0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon, "aria-label": "right-icon", variant: "ghost", size: s.iconButtonSize, onClick: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.onClick })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", ref: toggleButtonRef, disabled: isDisabled, id: primaryTarget === "toggle" ? baseId : undefined, ...comboboxA11yProps("toggle"), onFocus: () => setFocusedTrigger("toggle"), onBlur: () => setFocusedTrigger((prev) => (prev === "toggle" ? null : prev)), onClick: (e) => {
                                         e.preventDefault();
                                         e.stopPropagation();
-                                        setIsOpen((prev) => {
-                                            if (!prev)
-                                                setCustomSelectOpen(false);
-                                            return !prev;
-                                        });
-                                    }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center", children: isOpen ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: s.chevronSize })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: setDropdownMenuRef, id: listboxId, role: "listbox", "aria-multiselectable": isMultiple || undefined, position: "fixed", top: `${dropdownPos.top}px`, left: `${dropdownPos.left}px`, width: `${dropdownPos.width}px`, zIndex: 1500, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.boxborder[200], borderRadius: "sm", bg: theme.colors.background[50], boxShadow: "md", display: "flex", flexDirection: "column", children: [isMultiple && isSelectAll && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.boxborder[200], children: isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsx)(react_2.Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.textMuted, children: "No results found" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filteredOptions.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: getOptionId(index), role: "option", "aria-selected": isSelected(option.id), py: s.optionRowPy, px: 3, minH: s.optionRowMinH, cursor: "pointer", bg: index === activeIndex
-                                            ? theme.colors.primary.opacity[8]
-                                            : isSelected(option.id)
-                                                ? theme.colors.gray[100]
-                                                : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: () => handleSelect(option), onMouseEnter: () => setActiveIndex(index), display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [isMultiple && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: isSelected(option.id), sx: { pointerEvents: "none" }, size: s.checkboxSize })), option.view ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: option.view })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: option.label }))] }, option.id))), ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", justifyContent: "center", gap: 2, minH: s.optionRowMinH, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, borderTop: "0.063rem solid", borderColor: theme.colors.boxborder[200], bg: theme.colors.background[50], display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] }, children: [addNew.icon || (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: s.addNewIconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: addNew.text || "Add New" })] }))] }) })), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage })] }));
+                                        if (isOpen) {
+                                            closeMenus();
+                                        }
+                                        else {
+                                            openMenu();
+                                        }
+                                    }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center", borderRadius: "sm", color: theme.colors.textMuted, cursor: isDisabled ? "not-allowed" : "pointer", sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors), children: isOpen ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: s.chevronSize })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: setDropdownMenuRef, id: listboxId, role: "listbox", "aria-multiselectable": isMultiple || undefined, position: "fixed", top: `${dropdownPos.top}px`, left: `${dropdownPos.left}px`, width: `${dropdownPos.width}px`, zIndex: 1500, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.boxborder[200], borderRadius: "xl", overflow: "hidden", bg: theme.colors.surfaceRaised, boxShadow: theme.shadows.lg, display: "flex", flexDirection: "column", children: [isMultiple && isSelectAll && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: spec.gap, color: theme.colors.text[700], borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { ref: optionsListRef, flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.boxborder[200], children: isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsx)(react_2.Text, { p: 3, fontSize: spec.fontSize, color: theme.colors.textMuted, children: "No results found" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filteredOptions.map((option, index) => {
+                                        const selected = isSelected(option.id);
+                                        const singleSelected = selected && !isMultiple;
+                                        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: getOptionId(index), "data-index": index, role: "option", "aria-selected": selected, py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", bg: selected
+                                                ? index === activeIndex
+                                                    ? rowBackgrounds.selectedActive
+                                                    : rowBackgrounds.selected
+                                                : index === activeIndex
+                                                    ? rowBackgrounds.active
+                                                    : "transparent", _hover: {
+                                                bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active,
+                                            }, onClick: () => handleSelect(option), onMouseEnter: () => setActiveIndex(index), display: "flex", alignItems: "center", gap: spec.gap, color: (0, optionRowInk_1.optionRowInk)(theme.colors, singleSelected), 
+                                            // `view` is consumer JSX with no size of its own; it inherited the 16px body font.
+                                            fontSize: spec.fontSize, fontWeight: (0, optionRowInk_1.optionRowWeight)(singleSelected), borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [isMultiple && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: selected, sx: { pointerEvents: "none" }, size: s.checkboxSize })), option.view ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: option.view })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { isTruncated: true, children: option.label })), singleSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 }))] }, option.id));
+                                    }), ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", justifyContent: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: spec.py, px: spec.px, borderTop: "0.063rem solid", borderColor: theme.colors.boxborder[200], bg: theme.colors.surfaceRaised, display: "flex", alignItems: "center", gap: spec.gap, color: theme.colors.accentText, fontWeight: 500, minH: spec.minH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: rowBackgrounds.active }, children: [addNew.icon || (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: s.addNewIconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: addNew.text || "Add New" })] }))] }) })), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 };
 exports.default = SearchSelect;

package/dist/Components/SearchSelect/SearchSelectProps.d.ts

@@ -1,61 +1,112 @@
+/** value's shape must match isMultiple (array vs single object) — a mismatch normalizes to no selection, not an error. */
+/** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see select-absorption-spec.md. */
 export type SearchSelectProps = {
     id?: string;
     label?: string;
+    /** Accessible name for a labelless field; falls back to the visible label when both are set. */
+    "aria-label"?: string;
+    /** Filtered against option.label only — a custom `view` node's visible text isn't searchable. */
     options: Options[];
+    /** Canonical change callback; required for selections to stick (fully controlled). Wins over `onSelect`. */
+    onChange?: (options: Options | Options[] | undefined) => void;
+    /** @deprecated Use `onChange` — same payload; renamed to match every other picker. */
     onSelect?: (options: Options | Options[] | undefined) => void;
+    /** Fires 1s after typing stops; local filtering against `options` already runs synchronously regardless. */
     onSearch?: (value: string) => void;
+    /** Shows `loadingText` in place of options when the list is empty, else as a trailing row. */
     isOptionLoading?: boolean;
+    /** Overrides rightIcon — replaces it with a spinner in the trailing slot whenever true. */
     isLoading?: boolean;
+    /** Text of the option-list loading row. Defaults to "Loading...". */
     loadingText?: string;
+    /** Input placeholder, hidden once a value is selected and the menu is closed. Defaults to "Select". */
     placeholder?: string;
+    /** Fully controlled selection; pass back what `onChange` emits or nothing sticks. */
     value?: Options[] | Options;
+    /** Only seeds the initial input text at mount — later prop changes don't resync the input. */
     searchQuery?: string;
+    /** Multi mode: chips, toggling rows, menu stays open; `value`/`onChange` become arrays. */
     isMultiple?: boolean;
+    /** Visual-only — shows the required asterisk on the label; doesn't block selection or submission. */
     isRequired?: boolean;
     error?: boolean;
+    /** Only rendered when `error` is true — setting this alone shows nothing. */
     errorMessage?: string;
+    /** Hidden whenever `error` is true — mutually exclusive with errorMessage. */
     helperText?: string;
+    /** Width of the whole field; the menu matches it. Defaults to "100%". */
     width?: string | number;
+    /** Only sets the insideSelect segment's height, not the main field's — that's driven by `size`. */
     height?: string | number;
+    /** Height on the shared control scale (xs 28 · sm 35 · md 40 · lg 48px). Defaults to `sm`. */
     size?: "xs" | "sm" | "md" | "lg";
+    /** Blocks opening, typing, chip removal and clearing; renders the shared disabled field look. */
+    isDisabled?: boolean;
     chip?: {
+        /** Chips shown before a "+N" chip; `0` shows only the count. */
         maxChips?: number;
+        /** Truncates each chip label to this many characters, adding an ellipsis. */
         maxText?: number;
+        /** Never called — its presence alone enables each chip's remove (X) icon, which fires `onChange`. */
         onClick?: (options: Options | Options[]) => void;
     };
+    /** Legacy nested form of `isInformation`/`informationMessage`; the flat props win when both are set. */
     information?: {
         isInformation?: boolean;
         informationMessage?: string;
     };
+    /** Wins over `information.isInformation` when both are set; both this and informationMessage must be truthy to show the icon. */
     isInformation?: boolean;
     informationMessage?: string;
     rightIcon?: {
+        /** Must be a rendered element (`<Icon />`); anything else fails isValidElement and falls back to the toggle chevron. */
         icon?: React.ReactNode;
+        /** Fires on custom-icon click; the click also bubbles to the field and opens the menu. */
         onClick?: () => void;
     };
     addNew?: {
+        /** Must be explicitly true — icon/text/onClick alone render nothing. */
         enabled: boolean;
+        /** Defaults to a plus icon. */
         icon?: React.ReactNode;
+        /** Defaults to "Add New". */
         text?: string;
+        /** Fires on the footer row click; the menu stays open. */
         onClick?: () => void;
     };
+    /** Shows a clear-all (X) button while anything is selected; emits `[]` or `undefined`. */
     isRemoveAllIcon?: boolean;
+    /** Ignored entirely unless `isMultiple` is also true. */
     isSelectAll?: boolean;
     pagination?: {
+        /** startIndex is 1-based (current options.length + 1), not a 0-based offset. */
         onScroll?: (startIndex: number, limit: number, query: string) => void;
+        /** Also used to guess whether more pages exist (options.length % limit === 0, refined once a page returns no new rows). Defaults to 10 when omitted. */
         limit?: number;
+        /** Set this synchronously while a page request is in flight, or fast scrolling can re-fire onScroll for the same page. */
         scrollLoading?: boolean;
+        /** Explicit stop signal; overrides the limit-based heuristic when set. */
+        hasMore?: boolean;
+        /** Total row count; when set, hasMore is derived as options.length < totalRecords instead of the limit heuristic. */
+        totalRecords?: number;
     };
+    /** Not implemented — the option list always renders unvirtualized; use `pagination` to page in large datasets instead. */
     virtualization?: boolean;
     insideSelect?: {
+        /** Fires with the picked nested option; the nested picker is controlled via `insideSelect.value`. */
         onSelect?: (options: Options) => void;
+        /** In isMultiple mode, its `id` is stamped onto every newly selected main option as `insideSelectId`. */
         value?: Options;
+        /** The nested picker's own option list — distinct from the top-level `options`, singular name despite being an array. */
         option?: Options[];
+        /** Nested trigger width; label truncates at 6rem when unset. */
         width?: string;
         /** Shown when no value is selected. Defaults to "Select". */
         placeholder?: string;
     };
 };
+/** One selectable option; view, when set, fully replaces the default label rendering for that option's row. */
+/** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see select-absorption-spec.md. */
 export type Options = {
     id: string | number;
     label: string;