pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/Components/SearchSelect/SearchSelect.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -43,255 +32,676 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var lucide_react_1 = require("lucide-react");
-var FormLabel_1 = require("../Common/FormLabel");
-var Tag_1 = __importDefault(require("../Tag/Tag"));
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-var HelperText_1 = __importDefault(require("../Common/HelperText"));
-var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
-var SelectTruncatedLabel_1 = __importDefault(require("./SelectTruncatedLabel"));
-var searchSelectSize_1 = require("./searchSelectSize");
-var Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
-var normalizeSingleValue = function (val) {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_2 = require("@chakra-ui/react");
+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 surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const optionRowSizes_1 = require("../../Theme/tokens/primitives/optionRowSizes");
+const optionRowInk_1 = require("../Select/optionRowInk");
+const selectKeyboardRing_1 = require("../Select/selectKeyboardRing");
+const selectRowInk_1 = require("../Select/selectRowInk");
+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 borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
+const zIndices_1 = __importDefault(require("../../Theme/tokens/primitives/zIndices"));
+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 searchSelectNav_1 = require("./searchSelectNav");
+const activationKey_1 = require("../Common/activationKey");
+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;
     }
     return undefined;
 };
-var normalizeMultiValue = function (val) {
+const normalizeMultiValue = (val) => {
     if (Array.isArray(val)) {
-        return val.filter(function (v) { return v && typeof v === "object" && "id" in v && "label" in v; });
+        return val.filter((v) => v && typeof v === "object" && "id" in v && "label" in v);
     }
     return [];
 };
-var SearchSelect = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _k = _a.isOptionLoading, isOptionLoading = _k === void 0 ? false : _k, _l = _a.isLoading, isLoading = _l === void 0 ? false : _l, _m = _a.loadingText, loadingText = _m === void 0 ? "Loading..." : _m, _o = _a.placeholder, placeholder = _o === void 0 ? "Select" : _o, value = _a.value, _p = _a.searchQuery, searchQuery = _p === void 0 ? "" : _p, _q = _a.isMultiple, isMultiple = _q === void 0 ? false : _q, _r = _a.isRequired, isRequired = _r === void 0 ? false : _r, _s = _a.error, error = _s === void 0 ? false : _s, errorMessage = _a.errorMessage, helperText = _a.helperText, _t = _a.width, width = _t === void 0 ? "100%" : _t, height = _a.height, _u = _a.size, size = _u === void 0 ? "md" : _u, chip = _a.chip, information = _a.information, rightIcon = _a.rightIcon, addNew = _a.addNew, _v = _a.isSelectAll, isSelectAll = _v === void 0 ? false : _v, pagination = _a.pagination, insideSelect = _a.insideSelect, isRemoveAllIcon = _a.isRemoveAllIcon;
-    var s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || "md"));
-    var insideSelectBoxHeight = height !== null && height !== void 0 ? height : s.insideSelectDefaultHeight;
-    var _w = (0, react_1.useState)(searchQuery), inputValue = _w[0], setInputValue = _w[1];
-    var _x = (0, react_1.useState)(false), isOpen = _x[0], setIsOpen = _x[1];
-    var _y = (0, react_1.useState)(true), hasMore = _y[0], setHasMore = _y[1];
-    var inputRef = (0, react_1.useRef)(null);
-    var containerRef = (0, react_1.useRef)(null);
-    var scrollTimeoutRef = (0, react_1.useRef)(null);
-    var _z = (0, react_1.useState)(false), focused = _z[0], setFocused = _z[1];
-    var _0 = (0, react_1.useState)(false), customSelectOpen = _0[0], setCustomSelectOpen = _0[1];
-    var customSelectRef = (0, react_1.useRef)(null);
-    var _1 = (0, react_1.useState)({
+const DECORATIVE_CHECKBOX_SX = { pointerEvents: "none", "& input": { visibility: "hidden" } };
+const OptionRow = react_1.default.memo(function OptionRow({ option, index, optionId, isSelected, isActive, showRing, isMultiple, spec, colors, rowBackgrounds, checkboxSize, onSelect, onActivate, }) {
+    const singleSelected = isSelected && !isMultiple;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: optionId, "data-index": index, role: "option", "aria-selected": isSelected, mx: spec.mx, py: spec.py, px: spec.px, minH: spec.minH, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, cursor: "pointer", bg: (0, selectRowInk_1.selectRowFill)(rowBackgrounds, { isSelected, isActive }), boxShadow: showRing ? (0, selectKeyboardRing_1.keyboardRingShadow)(rowBackgrounds.keyboardRing) : undefined, onClick: () => onSelect(option), onMouseEnter: () => onActivate(index), display: "flex", alignItems: "center", gap: spec.gap, color: (0, selectRowInk_1.selectRowInk)(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), children: [isMultiple && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: isSelected, sx: DECORATIVE_CHECKBOX_SX, size: checkboxSize })), option.view ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: option.view })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { flex: 1, minW: 0, isTruncated: true, children: option.label })), singleSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: spec.iconSize, color: colors.accentText, flexShrink: 0 }))] }));
+});
+/** 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 COMPONENT-GOTCHAS.md ("Which select component"). */
+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, _f;
+    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);
+    const [hasMore, setHasMore] = (0, react_1.useState)(true);
+    const inputRef = (0, react_1.useRef)(null);
+    const triggerButtonRef = (0, react_1.useRef)(null);
+    const toggleButtonRef = (0, react_1.useRef)(null);
+    const containerRef = (0, react_1.useRef)(null);
+    const controlRef = (0, react_1.useRef)(null);
+    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);
+    const insideSelectMenuRef = (0, react_1.useRef)(null);
+    const [customSelectPos, setCustomSelectPos] = (0, react_1.useState)({
         top: 0,
         left: 0,
         width: 0,
-    }), customSelectPos = _1[0], setCustomSelectPos = _1[1];
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    });
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.selectRowBackgrounds)(theme.colors), [theme.colors]);
+    const insideRowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
+    // NOTE: inset — the trigger sits flush in the field and the menu clips overflow.
+    const insideFocusRing = {
+        outline: "2px solid transparent",
+        boxShadow: (0, focusRing_styles_1.insetFocusRingShadow)(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 selectAllId = `${baseId}-select-all`;
+    const addNewId = `${baseId}-add-new`;
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(searchSelectNav_1.NO_ROW);
+    const [isKeyboardNav, setIsKeyboardNav] = (0, react_1.useState)(false);
+    const pendingFocusRestoreRef = (0, react_1.useRef)(false);
+    // 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: function () {
+        handler: (e) => {
+            const dropdown = dropdownMenuRef.current;
+            if (dropdown && dropdown.contains(e.target))
+                return;
             setIsOpen(false);
         },
     });
-    var selectedValues = isMultiple
+    const selectedValues = (0, react_1.useMemo)(() => isMultiple
         ? normalizeMultiValue(value)
         : normalizeSingleValue(value)
             ? [normalizeSingleValue(value)]
-            : [];
-    var filteredOptions = (0, react_1.useMemo)(function () { return options.filter(function (option) { var _a, _b; return (_b = (_a = option === null || option === void 0 ? void 0 : option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()); }); }, [options, inputValue]);
-    var onSearchRef = (0, react_1.useRef)(onSearch);
+            : [], [value, isMultiple]);
+    const filteredOptions = (0, react_1.useMemo)(() => options.filter((option) => { var _a, _b; return (_b = (_a = option === null || option === void 0 ? void 0 : option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase()); }), [options, inputValue]);
+    const onSearchRef = (0, react_1.useRef)(onSearch);
     onSearchRef.current = onSearch;
-    (0, react_1.useEffect)(function () {
-        var delayDebounce = setTimeout(function () {
+    (0, react_1.useEffect)(() => {
+        const delayDebounce = setTimeout(() => {
             var _a;
             (_a = onSearchRef.current) === null || _a === void 0 ? void 0 : _a.call(onSearchRef, inputValue);
         }, 1000);
-        return function () { return clearTimeout(delayDebounce); };
+        return () => clearTimeout(delayDebounce);
     }, [inputValue]);
-    (0, react_1.useEffect)(function () {
-        if (pagination === null || pagination === void 0 ? void 0 : pagination.limit) {
-            setHasMore(options.length % pagination.limit === 0);
+    (0, react_1.useEffect)(() => {
+        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]);
-    var handleSelect = function (option) {
+        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) {
-            var insideSelectId = (_a = insideSelect.value) === null || _a === void 0 ? void 0 : _a.id;
-            var exists = selectedValues.find(function (v) { return v.id === option.id; });
-            var updated = exists
-                ? selectedValues.filter(function (v) { return v.id !== option.id; })
-                : __spreadArray(__spreadArray([], selectedValues, true), [__assign(__assign({}, option), { insideSelectId: insideSelectId })], false); // add only for new
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
+            const insideSelectId = (_a = insideSelect.value) === null || _a === void 0 ? void 0 : _a.id;
+            const exists = selectedValues.find((v) => v.id === option.id);
+            const updated = exists
+                ? selectedValues.filter((v) => v.id !== option.id)
+                : [...selectedValues, { ...option, insideSelectId }]; // add only for new
+            emitChange === null || emitChange === void 0 ? void 0 : emitChange(updated);
         }
         else if (isMultiple) {
-            var exists = selectedValues.find(function (v) { return v.id === option.id; });
-            var updated = exists
-                ? selectedValues.filter(function (v) { return v.id !== option.id; })
-                : __spreadArray(__spreadArray([], selectedValues, true), [option], false);
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
+            const exists = selectedValues.find((v) => v.id === option.id);
+            const updated = exists
+                ? selectedValues.filter((v) => v.id !== option.id)
+                : [...selectedValues, option];
+            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("");
         }
     };
-    var handleRemove = function (id) {
-        var updated = selectedValues.filter(function (v) { return v.id !== id; });
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
+    const handleSelectRef = (0, react_1.useRef)(handleSelect);
+    handleSelectRef.current = handleSelect;
+    const selectOption = (0, react_1.useCallback)((option) => handleSelectRef.current(option), []);
+    const handleRemove = (id) => {
+        const updated = selectedValues.filter((v) => v.id !== id);
+        emitChange === null || emitChange === void 0 ? void 0 : emitChange(updated);
     };
-    var handleClearAll = function () {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(isMultiple ? [] : undefined);
+    const handleClearAll = (e) => {
+        e.stopPropagation();
+        emitChange === null || emitChange === void 0 ? void 0 : emitChange(isMultiple ? [] : undefined);
         setInputValue("");
     };
-    var handleSelectAll = function () {
-        var allSelected = filteredOptions.every(function (opt) {
-            return selectedValues.some(function (sel) { return sel.id === opt.id; });
-        });
+    const handleSelectAll = () => {
+        const allSelected = filteredOptions.every((opt) => selectedValues.some((sel) => sel.id === opt.id));
         if (allSelected) {
-            var updated = selectedValues.filter(function (sel) { return !filteredOptions.some(function (opt) { return opt.id === sel.id; }); });
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
+            const updated = selectedValues.filter((sel) => !filteredOptions.some((opt) => opt.id === sel.id));
+            emitChange === null || emitChange === void 0 ? void 0 : emitChange(updated);
         }
         else {
-            var filteredNotSelected = filteredOptions.filter(function (opt) { return !selectedValues.some(function (sel) { return sel.id === opt.id; }); });
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect(__spreadArray(__spreadArray([], selectedValues, true), filteredNotSelected, true));
+            const filteredNotSelected = filteredOptions.filter((opt) => !selectedValues.some((sel) => sel.id === opt.id));
+            emitChange === null || emitChange === void 0 ? void 0 : emitChange([...selectedValues, ...filteredNotSelected]);
         }
         setInputValue("");
     };
-    var selectedIdsSet = (0, react_1.useMemo)(function () { return new Set(selectedValues.map(function (v) { return v.id; })); }, [selectedValues]);
-    var isSelected = (0, react_1.useCallback)(function (id) { return selectedIdsSet.has(id); }, [selectedIdsSet]);
-    var isValidIcon = function (icon) {
-        return react_1.default.isValidElement(icon);
+    const hasSelectAllRow = isMultiple && isSelectAll;
+    const hasAddNewRow = Boolean(addNew === null || addNew === void 0 ? void 0 : addNew.enabled);
+    const rowLayout = {
+        optionCount: filteredOptions.length,
+        hasSelectAll: hasSelectAllRow,
+        hasAddNew: hasAddNewRow,
     };
-    var allFilteredSelected = (0, react_1.useMemo)(function () {
-        return filteredOptions.length > 0 &&
-            filteredOptions.every(function (opt) { return selectedIdsSet.has(opt.id); });
-    }, [filteredOptions, selectedIdsSet]);
-    var handleScroll = (0, react_1.useCallback)(function (e) {
+    const activeOptionId = !isOpen
+        ? undefined
+        : activeIndex === searchSelectNav_1.SELECT_ALL_ROW && hasSelectAllRow
+            ? selectAllId
+            : activeIndex === searchSelectNav_1.ADD_NEW_ROW && hasAddNewRow
+                ? addNewId
+                : activeIndex >= 0 && filteredOptions[activeIndex]
+                    ? getOptionId(activeIndex)
+                    : undefined;
+    // 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
+            ? "button"
+            : "toggle");
+    const disclosureA11yProps = {
+        "aria-haspopup": "listbox",
+        "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 (target === "input") {
+            if (!isPrimary)
+                return {};
+            return {
+                role: "combobox",
+                ...disclosureA11yProps,
+                "aria-owns": listboxId,
+                "aria-activedescendant": activeOptionId,
+                ...validityA11yProps,
+            };
+        }
+        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);
+    };
+    const handlePointerActivate = (0, react_1.useCallback)((index) => {
+        setIsKeyboardNav(false);
+        setActiveIndex(index);
+    }, []);
+    const moveActive = (delta) => {
+        setIsKeyboardNav(true);
+        setActiveIndex((prev) => (0, searchSelectNav_1.stepRow)(rowLayout, prev, delta));
+    };
+    const restoreFocus = () => {
+        pendingFocusRestoreRef.current = true;
+    };
+    // NOTE: only reacts to keys from the combobox triggers — without this guard, Tag's own "Remove" button lost its clicks.
+    const handleControlKeyDown = (e) => {
+        var _a;
+        const target = e.target;
+        const isKnownTrigger = target === inputRef.current ||
+            target === triggerButtonRef.current ||
+            target === toggleButtonRef.current;
+        if (!isKnownTrigger || isDisabled)
+            return;
+        const isTextInputTarget = target.tagName === "INPUT";
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                if (!isOpen) {
+                    openMenu();
+                }
+                else {
+                    moveActive(1);
+                }
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                if (!isOpen) {
+                    openMenu();
+                }
+                else {
+                    moveActive(-1);
+                }
+                break;
+            case "Home":
+                if (isOpen && (0, searchSelectNav_1.firstRow)(rowLayout) !== searchSelectNav_1.NO_ROW && !isTextInputTarget) {
+                    e.preventDefault();
+                    setIsKeyboardNav(true);
+                    setActiveIndex((0, searchSelectNav_1.firstRow)(rowLayout));
+                }
+                break;
+            case "End":
+                if (isOpen && (0, searchSelectNav_1.lastRow)(rowLayout) !== searchSelectNav_1.NO_ROW && !isTextInputTarget) {
+                    e.preventDefault();
+                    setIsKeyboardNav(true);
+                    setActiveIndex((0, searchSelectNav_1.lastRow)(rowLayout));
+                }
+                break;
+            case "Enter":
+                if (!isOpen) {
+                    e.preventDefault();
+                    openMenu();
+                }
+                else if (activeIndex === searchSelectNav_1.SELECT_ALL_ROW && hasSelectAllRow) {
+                    e.preventDefault();
+                    handleSelectAll();
+                }
+                else if (activeIndex === searchSelectNav_1.ADD_NEW_ROW && (addNew === null || addNew === void 0 ? void 0 : addNew.enabled)) {
+                    e.preventDefault();
+                    (_a = addNew.onClick) === null || _a === void 0 ? void 0 : _a.call(addNew);
+                }
+                else if (activeIndex >= 0 && filteredOptions[activeIndex]) {
+                    e.preventDefault();
+                    handleSelect(filteredOptions[activeIndex]);
+                    if (!isMultiple)
+                        restoreFocus();
+                }
+                break;
+            case " ":
+            case "Spacebar":
+                if (!isOpen && !isTextInputTarget) {
+                    e.preventDefault();
+                    openMenu();
+                }
+                break;
+            case "Escape":
+                if (isOpen) {
+                    e.preventDefault();
+                    setIsOpen(false);
+                    setActiveIndex(searchSelectNav_1.NO_ROW);
+                    restoreFocus();
+                }
+                break;
+            default:
+                break;
+        }
+    };
+    // Clamps/clears the highlight whenever the menu closes or the filtered list changes size
+    // (e.g. typing), rather than leaving it pointing at a now out-of-range or stale option.
+    (0, react_1.useEffect)(() => {
+        if (!isOpen) {
+            setActiveIndex(searchSelectNav_1.NO_ROW);
+            setIsKeyboardNav(false);
+            return;
+        }
+        const layout = { optionCount: filteredOptions.length, hasSelectAll: hasSelectAllRow, hasAddNew: hasAddNewRow };
+        setActiveIndex((prev) => ((0, searchSelectNav_1.hasRow)(prev, layout) ? prev : searchSelectNav_1.NO_ROW));
+    }, [isOpen, filteredOptions.length, hasSelectAllRow, hasAddNewRow]);
+    (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)
+            return;
+        pendingFocusRestoreRef.current = false;
+        const active = document.activeElement;
+        const focusWasLost = !active || active === document.body || !((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(active));
+        if (!focusWasLost)
+            return;
+        (_d = ((_c = (_b = triggerButtonRef.current) !== null && _b !== void 0 ? _b : inputRef.current) !== null && _c !== void 0 ? _c : toggleButtonRef.current)) === null || _d === void 0 ? void 0 : _d.focus();
+    });
+    const selectedIdsSet = (0, react_1.useMemo)(() => new Set(selectedValues.map((v) => v.id)), [selectedValues]);
+    const isSelected = (0, react_1.useCallback)((id) => selectedIdsSet.has(id), [selectedIdsSet]);
+    const isValidIcon = (icon) => react_1.default.isValidElement(icon);
+    const allFilteredSelected = (0, react_1.useMemo)(() => filteredOptions.length > 0 &&
+        filteredOptions.every((opt) => selectedIdsSet.has(opt.id)), [filteredOptions, selectedIdsSet]);
+    const handleScroll = (0, react_1.useCallback)((e) => {
         if (!pagination ||
             !pagination.onScroll ||
             pagination.scrollLoading ||
             !hasMore)
             return;
-        var target = e.currentTarget;
-        var nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 5;
+        const target = e.currentTarget;
+        const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 5;
         if (nearBottom) {
             if (scrollTimeoutRef.current)
                 clearTimeout(scrollTimeoutRef.current);
-            scrollTimeoutRef.current = setTimeout(function () {
+            scrollTimeoutRef.current = setTimeout(() => {
                 var _a;
-                var 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: function (e) {
-            var dropdown = document.getElementById("custom-select-portal");
+        handler: (e) => {
+            const dropdown = insideSelectMenuRef.current;
             if (dropdown && dropdown.contains(e.target))
                 return;
             setCustomSelectOpen(false);
         },
     });
-    var handleCustomSelect = function (item) {
+    const handleCustomSelect = (item) => {
         if (typeof (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.onSelect) === "function") {
-            insideSelect.onSelect(item);
+            const option = normalizeSingleValue(item);
+            if (option) {
+                insideSelect.onSelect(option);
+            }
         }
         setCustomSelectOpen(false);
     };
-    (0, react_1.useEffect)(function () {
-        if (customSelectOpen && customSelectRef.current) {
-            var rect = customSelectRef.current.getBoundingClientRect();
-            setCustomSelectPos({
-                top: rect.bottom + window.scrollY,
-                left: rect.left + window.scrollX,
-                width: rect.width + 30,
-            });
+    const focusInsideOnOpenRef = (0, react_1.useRef)(false);
+    const toggleCustomSelect = () => {
+        if (isDisabled)
+            return;
+        setIsOpen(false);
+        if (customSelectOpen) {
+            setCustomSelectOpen(false);
+        }
+        else {
+            requestExclusiveOpen();
+            setCustomSelectOpen(true);
+        }
+    };
+    const closeCustomSelectToTrigger = () => {
+        var _a;
+        setCustomSelectOpen(false);
+        (_a = customSelectRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const handleInsideTriggerKeyDown = (e) => {
+        if (e.target !== e.currentTarget || e.key === "Tab")
+            return;
+        e.stopPropagation();
+        if (e.key === "Escape" && customSelectOpen) {
+            e.preventDefault();
+            setCustomSelectOpen(false);
+            return;
+        }
+        if (!(0, activationKey_1.isActivationKey)(e))
+            return;
+        e.preventDefault();
+        focusInsideOnOpenRef.current = !customSelectOpen;
+        toggleCustomSelect();
+    };
+    const handleInsideMenuKeyDown = (e) => {
+        var _a, _b;
+        e.stopPropagation();
+        const rows = Array.from(e.currentTarget.querySelectorAll('[role="option"]'));
+        const index = rows.indexOf(document.activeElement);
+        const moveTo = (to) => {
+            var _a;
+            e.preventDefault();
+            (_a = rows[Math.max(0, Math.min(rows.length - 1, to))]) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        switch (e.key) {
+            case "ArrowDown":
+                moveTo(index + 1);
+                break;
+            case "ArrowUp":
+                moveTo(index - 1);
+                break;
+            case "Home":
+                moveTo(0);
+                break;
+            case "End":
+                moveTo(rows.length - 1);
+                break;
+            case "Enter":
+            case " ":
+                e.preventDefault();
+                if (index < 0)
+                    return;
+                handleCustomSelect((_a = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _a === void 0 ? void 0 : _a[index]);
+                (_b = customSelectRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                break;
+            case "Escape":
+                e.preventDefault();
+                closeCustomSelectToTrigger();
+                break;
+            case "Tab":
+                closeCustomSelectToTrigger();
+                break;
+            default:
+                break;
+        }
+    };
+    const stopFocusBubbling = (e) => e.stopPropagation();
+    // Anchor the insideSelect menu to its trigger (viewport-fixed). Prefer below;
+    // flip above when near the bottom; clamp horizontally within the viewport.
+    const updateInsideSelectPos = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        if (!customSelectRef.current)
+            return;
+        const rect = customSelectRef.current.getBoundingClientRect();
+        const gutter = 8;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const menuW = ((_a = insideSelectMenuRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || Math.max(rect.width, 128);
+        const menuH = ((_b = insideSelectMenuRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 160;
+        let left = rect.left;
+        if (left + menuW > vw - gutter)
+            left = rect.right - menuW;
+        left = Math.min(Math.max(left, gutter), Math.max(gutter, vw - menuW - gutter));
+        let top = rect.bottom;
+        const spaceBelow = vh - rect.bottom;
+        const spaceAbove = rect.top;
+        if (menuH && top + menuH > vh - gutter && spaceAbove > spaceBelow) {
+            top = rect.top - menuH;
+        }
+        top = Math.min(Math.max(top, gutter), Math.max(gutter, vh - menuH - gutter));
+        setCustomSelectPos({
+            top,
+            left,
+            width: menuW,
+        });
+    }, []);
+    const setInsideSelectMenuRef = (0, react_1.useCallback)((node) => {
+        var _a, _b;
+        insideSelectMenuRef.current = node;
+        if (node)
+            updateInsideSelectPos();
+        if (node && focusInsideOnOpenRef.current) {
+            focusInsideOnOpenRef.current = false;
+            (_b = ((_a = node.querySelector('[aria-selected="true"]')) !== null && _a !== void 0 ? _a : node.querySelector('[role="option"]'))) === null || _b === void 0 ? void 0 : _b.focus();
         }
-    }, [customSelectOpen]);
-    return (react_1.default.createElement(react_2.Box, { ref: containerRef, width: width, position: "relative" },
-        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: information === null || information === void 0 ? void 0 : information.informationMessage })),
-        react_1.default.createElement(react_2.InputGroup, { size: size },
-            react_1.default.createElement(react_2.Box, { as: "div", 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.semantic.error[500]
-                    : focused
-                        ? theme.colors.primary[500]
-                        : (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[500], borderRadius: "0.25rem", bg: (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[50], boxShadow: focused
-                    ? error
-                        ? "0 0 0 0.125rem ".concat((_d = theme.colors.boxShadow) === null || _d === void 0 ? void 0 : _d.error)
-                        : "0 0 0 0.125rem ".concat((_e = theme.colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary)
-                    : error
-                        ? "0 0 0 0.125rem ".concat((_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.error)
-                        : "none", transition: "box-shadow 0.2s, border-color 0.2s", onClick: function () { return setIsOpen(true); } },
-                insideSelect && (react_1.default.createElement(react_2.Box, { position: "relative", ref: customSelectRef, backgroundColor: theme.colors.gray[200], ml: s.insideSelectMarginLeft, h: "-webkit-fill-available", borderRadius: "0.25rem 0 0 0.25rem", onClick: function () { return setCustomSelectOpen(function (prev) { return !prev; }); } },
-                    react_1.default.createElement(react_2.Box, { minW: "5rem", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", width: insideSelect.width, height: insideSelectBoxHeight, pl: "0.5rem", pr: "0.5rem" },
-                        react_1.default.createElement(SelectTruncatedLabel_1.default, { label: (_h = (_g = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.value) === null || _g === void 0 ? void 0 : _g.label) !== null && _h !== void 0 ? _h : "", maxWidth: (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.width) || "6rem", fontSize: s.fieldFontSize }),
-                        customSelectOpen ? (react_1.default.createElement(lucide_react_1.ChevronUp, { size: s.chevronSize })) : (react_1.default.createElement(lucide_react_1.ChevronDown, { size: s.chevronSize }))),
-                    customSelectOpen && (react_1.default.createElement(react_2.Portal, null,
-                        react_1.default.createElement(react_2.Box, { id: "custom-select-portal", position: "absolute", top: "".concat(customSelectPos.top, "px"), left: "".concat(customSelectPos.left, "px"), zIndex: 1400, bg: theme.colors.white, border: "0.063rem solid", borderColor: theme.colors.gray[300], borderRadius: "md", boxShadow: "md", minW: "10rem", maxW: "38rem" }, (_j = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _j === void 0 ? void 0 : _j.map(function (item) { return (react_1.default.createElement(react_2.Box, { key: item.id, display: "flex", alignItems: "center", minH: s.optionRowMinH, px: "0.75rem", fontSize: s.dropdownTextFontSize, _hover: { bg: theme.colors.gray[100] }, cursor: "pointer", onClick: function (e) {
-                                e.stopPropagation();
-                                handleCustomSelect(item);
-                            } }, item.label)); })))))),
-                isMultiple
-                    ? selectedValues
-                        .slice(0, (chip === null || chip === void 0 ? void 0 : chip.maxChips) || selectedValues.length)
-                        .map(function (item) { return (react_1.default.createElement(Tag_1.default, { key: item.id, 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) ? function () { return 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 })); })
-                    : selectedValues.length === 1 &&
-                        !isOpen && (react_1.default.createElement(react_2.Box, { as: "button", type: "button", onClick: function () { return 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 },
-                        react_1.default.createElement(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 && (react_1.default.createElement(Tag_1.default, { key: "extra-count", label: "+ ".concat(selectedValues.length - chip.maxChips), colorScheme: "gray", size: s.tagSize })),
-                (isOpen || inputValue || !selectedValues.length) && (react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "unstyled", size: size, h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, flex: "1", 
-                    // minW="5rem"
-                    minW: "0", value: inputValue, onChange: function (e) { return setInputValue(e.target.value); }, onFocus: function () {
-                        setFocused(true);
-                        setIsOpen(true);
-                    }, onBlur: function () { return setFocused(false); }, placeholder: selectedValues.length && !isOpen ? "" : placeholder })),
-                react_1.default.createElement(react_2.Box, { position: "absolute", right: s.rightOffset, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1 },
-                    isRemoveAllIcon && selectedValues.length > 0 && (react_1.default.createElement(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
-                        react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.X, { size: s.clearIconSize, color: theme.colors.black }), "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 ? (react_1.default.createElement(react_2.Spinner, { size: s.spinnerSize })) : isValidIcon(rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon) ? (react_1.default.createElement(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 })) : (react_1.default.createElement(react_2.Box, { as: "button", onClick: function (e) {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            setIsOpen(function (prev) { return !prev; });
-                        }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center" }, isOpen ? (react_1.default.createElement(lucide_react_1.ChevronUp, { size: s.chevronSize })) : (react_1.default.createElement(lucide_react_1.ChevronDown, { size: s.chevronSize }))))))),
-        isOpen && (react_1.default.createElement(react_2.Box, { position: "absolute", zIndex: 10, width: "100%", maxH: "20rem", borderWidth: 1, borderRadius: "sm", bg: theme.colors.white, boxShadow: "md", display: "flex", flexDirection: "column" },
-            isMultiple && isSelectAll && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
-                react_1.default.createElement(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }),
-                react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, allFilteredSelected ? "Unselect All" : "Select All"))),
-            react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.gray[200] }, isOptionLoading && filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH },
-                react_1.default.createElement(react_2.Spinner, { size: s.spinnerSize }),
-                react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, loadingText))) : !isOptionLoading && filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.gray[500] }, "No results found")) : (react_1.default.createElement(react_1.default.Fragment, null,
-                filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, py: s.optionRowPy, px: 3, minH: s.optionRowMinH, cursor: "pointer", bg: isSelected(option.id) ? theme.colors.gray[100] : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: function () { return handleSelect(option); }, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
-                    isMultiple && (react_1.default.createElement(Checkbox_1.default, { isChecked: isSelected(option.id), sx: { pointerEvents: "none" }, size: s.checkboxSize })),
-                    option.view ? (react_1.default.createElement(react_1.default.Fragment, null, option.view)) : (react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, option.label)))); }),
-                ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", justifyContent: "center", gap: 2, minH: s.optionRowMinH },
-                    react_1.default.createElement(react_2.Spinner, { size: s.spinnerSize }),
-                    react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, loadingText)))))),
-            (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: theme.colors.white, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] } },
-                addNew.icon || react_1.default.createElement(lucide_react_1.Plus, { size: s.addNewIconSize }),
-                react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, addNew.text || "Add New"))))),
-        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText }),
-        error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage })));
+    }, [updateInsideSelectPos]);
+    (0, react_1.useEffect)(() => {
+        if (!customSelectOpen)
+            return;
+        updateInsideSelectPos();
+        const onReposition = (0, rafThrottle_1.rafThrottle)(updateInsideSelectPos);
+        window.addEventListener("scroll", onReposition, {
+            capture: true,
+            passive: true,
+        });
+        window.addEventListener("resize", onReposition);
+        return () => {
+            onReposition.cancel();
+            window.removeEventListener("scroll", onReposition, true);
+            window.removeEventListener("resize", onReposition);
+        };
+    }, [customSelectOpen, updateInsideSelectPos]);
+    // Anchor the main options menu to the control (viewport-fixed). Prefer below;
+    // flip above when near the bottom; clamp horizontally within the viewport.
+    const updateDropdownPos = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        if (!controlRef.current)
+            return;
+        const rect = controlRef.current.getBoundingClientRect();
+        const gutter = 8;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const menuW = ((_a = dropdownMenuRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || rect.width;
+        const menuH = ((_b = dropdownMenuRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 320;
+        let left = rect.left;
+        if (left + menuW > vw - gutter)
+            left = rect.right - menuW;
+        left = Math.min(Math.max(left, gutter), Math.max(gutter, vw - menuW - gutter));
+        let top = rect.bottom;
+        const spaceBelow = vh - rect.bottom;
+        const spaceAbove = rect.top;
+        if (menuH && top + menuH > vh - gutter && spaceAbove > spaceBelow) {
+            top = rect.top - menuH;
+        }
+        top = Math.min(Math.max(top, gutter), Math.max(gutter, vh - menuH - gutter));
+        setDropdownPos({ top, left, width: rect.width });
+    }, []);
+    const setDropdownMenuRef = (0, react_1.useCallback)((node) => {
+        dropdownMenuRef.current = node;
+        if (node)
+            updateDropdownPos();
+    }, [updateDropdownPos]);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            return;
+        updateDropdownPos();
+        const onReposition = (0, rafThrottle_1.rafThrottle)(updateDropdownPos);
+        // capture catches scrolling inside any ancestor (e.g. modal body).
+        window.addEventListener("scroll", onReposition, {
+            capture: true,
+            passive: true,
+        });
+        window.addEventListener("resize", onReposition);
+        return () => {
+            onReposition.cancel();
+            window.removeEventListener("scroll", onReposition, true);
+            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, ...(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, role: "button", tabIndex: isDisabled ? undefined : 0, "aria-haspopup": "listbox", "aria-expanded": customSelectOpen, "aria-controls": customSelectOpen ? insideSelectPortalId : undefined, "aria-disabled": isDisabled || undefined, onKeyDown: handleInsideTriggerKeyDown, onFocus: stopFocusBubbling, onBlur: stopFocusBubbling, _focusVisible: insideFocusRing, flexShrink: 0, ml: s.insideSelectMarginLeft, h: "-webkit-fill-available", borderRight: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: (0, planeStep_1.ruleOn)(theme.colors, theme.colors.background[400]), bg: customSelectOpen
+                                    ? rowBackgrounds.active
+                                    : theme.colors.background[400], borderLeftRadius: "md", borderRightRadius: 0, transition: SEGMENT_TRANSITION, boxShadow: customSelectOpen
+                                    ? `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${theme.colors.primary[500]}`
+                                    : "none", onClick: (e) => {
+                                    e.stopPropagation();
+                                    toggleCustomSelect();
+                                }, 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, role: "listbox", "aria-label": insidePlaceholder, onKeyDown: handleInsideMenuKeyDown, onFocus: stopFocusBubbling, onBlur: stopFocusBubbling, position: "fixed", style: { top: `${customSelectPos.top}px`, left: `${customSelectPos.left}px` }, zIndex: zIndices_1.default.popoverNested, bg: theme.colors.surfaceRaised, border: `${borderWidths_1.BORDER_WIDTHS.hairline} 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: 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: "transparent", ...(0, optionRowInk_1.optionRowCursorSx)(insideRowBackgrounds), cursor: "pointer", role: "option", "aria-selected": selected, tabIndex: -1, _focusVisible: insideFocusRing, 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: spec.iconSize, color: theme.colors.accentText }))] }, item.id));
+                                            }) }) }))] }));
+                        })(), isMultiple
+                            ? selectedValues
+                                .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) && !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, 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, isInvalid: error && primaryTarget === "input", isDisabled: isDisabled, _disabled: { cursor: "not-allowed" }, onChange: (e) => setInputValue(e.target.value), onFocus: () => {
+                                setFocused(true);
+                                setFocusedTrigger("input");
+                                openMenu();
+                            }, onBlur: () => {
+                                setFocused(false);
+                                setFocusedTrigger((prev) => (prev === "input" ? null : prev));
+                            }, 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: "xs", 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" },
+                                            ...(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();
+                                        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-label": (_f = label !== null && label !== void 0 ? label : ariaLabel) !== null && _f !== void 0 ? _f : placeholder, "aria-multiselectable": isMultiple || undefined, position: "fixed", style: {
+                        top: `${dropdownPos.top}px`,
+                        left: `${dropdownPos.left}px`,
+                        width: `${dropdownPos.width}px`,
+                    }, zIndex: zIndices_1.default.popover, 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: [hasSelectAllRow && ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: selectAllId, role: "option", "aria-selected": allFilteredSelected, bg: (0, selectRowInk_1.selectRowFill)(rowBackgrounds, { isSelected: false, isActive: activeIndex === searchSelectNav_1.SELECT_ALL_ROW }), boxShadow: isKeyboardNav && activeIndex === searchSelectNav_1.SELECT_ALL_ROW ? (0, selectKeyboardRing_1.keyboardRingShadow)(rowBackgrounds.keyboardRing) : undefined, py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", onClick: handleSelectAll, onMouseEnter: () => handlePointerActivate(searchSelectNav_1.SELECT_ALL_ROW), display: "flex", alignItems: "center", gap: spec.gap, color: (0, selectRowInk_1.selectRowInk)(theme.colors, false), borderBottom: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, surfaceRaised_1.raisedRule)(theme.colors)}`, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: allFilteredSelected, sx: DECORATIVE_CHECKBOX_SX, 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", py: 1, borderBottom: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), 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) => ((0, jsx_runtime_1.jsx)(OptionRow, { option: option, index: index, optionId: getOptionId(index), isSelected: isSelected(option.id), isActive: index === activeIndex, showRing: isKeyboardNav && index === activeIndex, isMultiple: isMultiple, spec: spec, colors: theme.colors, rowBackgrounds: rowBackgrounds, checkboxSize: s.checkboxSize, onSelect: selectOption, onActivate: handlePointerActivate }, 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, { id: addNewId, role: "option", "aria-selected": false, py: spec.py, px: spec.px, borderTop: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), bg: activeIndex === searchSelectNav_1.ADD_NEW_ROW ? rowBackgrounds.active : theme.colors.surfaceRaised, boxShadow: isKeyboardNav && activeIndex === searchSelectNav_1.ADD_NEW_ROW ? (0, selectKeyboardRing_1.keyboardRingShadow)(rowBackgrounds.keyboardRing) : undefined, 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;