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

package/dist/esm/Components/SearchSelect/SearchSelect.js

@@ -0,0 +1,669 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, Input, InputGroup, Spinner, Text, IconButton, useOutsideClick, Portal, } from "@chakra-ui/react";
+import { Check, ChevronDown, ChevronUp, CircleX, Plus, X } from "lucide-react";
+import { TextLabel } from "../Common/FormLabel.js";
+import Tag from "../Tag/Tag.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import { ruleOn } from "../../Theme/tokens/builders/planeStep.js";
+import { listRowBackgrounds, selectRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { OPTION_ROW_RADIUS, optionRowSpec } from "../../Theme/tokens/primitives/optionRowSizes.js";
+import { optionRowCursorSx, optionRowInk, optionRowWeight } from "../Select/optionRowInk.js";
+import { keyboardRingShadow } from "../Select/selectKeyboardRing.js";
+import { selectRowFill, selectRowInk } from "../Select/selectRowInk.js";
+import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { fieldHoverBorder, getFieldStateStyles } from "../Common/fieldStyles.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import zIndices from "../../Theme/tokens/primitives/zIndices.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles, insetFocusRingShadow } from "../../Theme/chakra/focusRing.styles.js";
+import ToolTip from "../ToolTip/ToolTip.js";
+import SelectTruncatedLabel from "./SelectTruncatedLabel.js";
+import { getSearchSelectSizeStyles, } from "./searchSelectSize.js";
+import Checkbox from "../Checkbox/Checkbox.js";
+import { rafThrottle } from "../../Utils/rafThrottle.js";
+import { ADD_NEW_ROW, NO_ROW, SELECT_ALL_ROW, firstRow, hasRow, lastRow, stepRow } from "./searchSelectNav.js";
+import { isActivationKey } from "../Common/activationKey.js";
+const SEGMENT_TRANSITION = transitionFor(["background-color", "box-shadow"]);
+const CHEVRON_TRANSITION = transitionFor(["transform", "color"], "base");
+const normalizeSingleValue = (val) => {
+    if (typeof val === "object" && val !== null && "id" in val && "label" in val) {
+        return val;
+    }
+    return undefined;
+};
+const normalizeMultiValue = (val) => {
+    if (Array.isArray(val)) {
+        return val.filter((v) => v && typeof v === "object" && "id" in v && "label" in v);
+    }
+    return [];
+};
+const DECORATIVE_CHECKBOX_SX = { pointerEvents: "none", "& input": { visibility: "hidden" } };
+const OptionRow = React.memo(function OptionRow({ option, index, optionId, isSelected, isActive, showRing, isMultiple, spec, colors, rowBackgrounds, checkboxSize, onSelect, onActivate, }) {
+    const singleSelected = isSelected && !isMultiple;
+    return (_jsxs(Box, { id: optionId, "data-index": index, role: "option", "aria-selected": isSelected, mx: spec.mx, py: spec.py, px: spec.px, minH: spec.minH, borderRadius: OPTION_ROW_RADIUS, cursor: "pointer", bg: selectRowFill(rowBackgrounds, { isSelected, isActive }), boxShadow: showRing ? keyboardRingShadow(rowBackgrounds.keyboardRing) : undefined, onClick: () => onSelect(option), onMouseEnter: () => onActivate(index), display: "flex", alignItems: "center", gap: spec.gap, color: selectRowInk(colors, singleSelected), 
+        // `view` is consumer JSX with no size of its own; it inherited the 16px body font.
+        fontSize: spec.fontSize, fontWeight: optionRowWeight(singleSelected), children: [isMultiple && (_jsx(Checkbox, { isChecked: isSelected, sx: DECORATIVE_CHECKBOX_SX, size: checkboxSize })), option.view ? (_jsx(_Fragment, { children: option.view })) : (_jsx(Text, { flex: 1, minW: 0, isTruncated: true, children: option.label })), singleSelected && (_jsx(Box, { as: 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 = getSearchSelectSizeStyles(size);
+    const spec = optionRowSpec(size);
+    const emitChange = onChange !== null && onChange !== void 0 ? onChange : onSelect;
+    const insideSelectBoxHeight = height !== null && height !== void 0 ? height : s.insideSelectDefaultHeight;
+    const [inputValue, setInputValue] = useState(searchQuery);
+    const [isOpen, setIsOpen] = useState(false);
+    const [hasMore, setHasMore] = useState(true);
+    const inputRef = useRef(null);
+    const triggerButtonRef = useRef(null);
+    const toggleButtonRef = useRef(null);
+    const containerRef = useRef(null);
+    const controlRef = useRef(null);
+    const dropdownMenuRef = useRef(null);
+    const [dropdownPos, setDropdownPos] = useState({ top: 0, left: 0, width: 0 });
+    const scrollTimeoutRef = useRef(null);
+    const optionsLengthRef = useRef(options.length);
+    const lastPageStartRef = useRef(null);
+    const optionsListRef = useRef(null);
+    const [focused, setFocused] = useState(false);
+    const [customSelectOpen, setCustomSelectOpen] = useState(false);
+    const customSelectRef = useRef(null);
+    const insideSelectMenuRef = useRef(null);
+    const [customSelectPos, setCustomSelectPos] = useState({
+        top: 0,
+        left: 0,
+        width: 0,
+    });
+    const theme = useCustomTheme();
+    const rowBackgrounds = useMemo(() => selectRowBackgrounds(theme.colors), [theme.colors]);
+    const insideRowBackgrounds = useMemo(() => 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: insetFocusRingShadow(theme.colors),
+    };
+    const ids = 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] = useState(NO_ROW);
+    const [isKeyboardNav, setIsKeyboardNav] = useState(false);
+    const pendingFocusRestoreRef = useRef(false);
+    // NOTE: the ARIA host follows real focus; opening from a button doesn't move it.
+    const [focusedTrigger, setFocusedTrigger] = useState(null);
+    const closeMenus = useCallback(() => {
+        setIsOpen(false);
+        setCustomSelectOpen(false);
+    }, []);
+    const requestExclusiveOpen = useExclusiveOverlay(isOpen || customSelectOpen, closeMenus);
+    useOutsideClick({
+        ref: containerRef,
+        handler: (e) => {
+            const dropdown = dropdownMenuRef.current;
+            if (dropdown && dropdown.contains(e.target))
+                return;
+            setIsOpen(false);
+        },
+    });
+    const selectedValues = useMemo(() => isMultiple
+        ? normalizeMultiValue(value)
+        : normalizeSingleValue(value)
+            ? [normalizeSingleValue(value)]
+            : [], [value, isMultiple]);
+    const filteredOptions = 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 = useRef(onSearch);
+    onSearchRef.current = onSearch;
+    useEffect(() => {
+        const delayDebounce = setTimeout(() => {
+            var _a;
+            (_a = onSearchRef.current) === null || _a === void 0 ? void 0 : _a.call(onSearchRef, inputValue);
+        }, 1000);
+        return () => clearTimeout(delayDebounce);
+    }, [inputValue]);
+    useEffect(() => {
+        optionsLengthRef.current = options.length;
+    }, [options.length]);
+    useEffect(() => {
+        if ((pagination === null || pagination === void 0 ? void 0 : pagination.hasMore) !== undefined) {
+            setHasMore(pagination.hasMore);
+            return;
+        }
+        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) {
+            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) {
+            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 {
+            emitChange === null || emitChange === void 0 ? void 0 : emitChange(option);
+            setIsOpen(false);
+            setInputValue("");
+        }
+    };
+    const handleSelectRef = useRef(handleSelect);
+    handleSelectRef.current = handleSelect;
+    const selectOption = 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);
+    };
+    const handleClearAll = (e) => {
+        e.stopPropagation();
+        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));
+            emitChange === null || emitChange === void 0 ? void 0 : emitChange(updated);
+        }
+        else {
+            const filteredNotSelected = filteredOptions.filter((opt) => !selectedValues.some((sel) => sel.id === opt.id));
+            emitChange === null || emitChange === void 0 ? void 0 : emitChange([...selectedValues, ...filteredNotSelected]);
+        }
+        setInputValue("");
+    };
+    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,
+    };
+    const activeOptionId = !isOpen
+        ? undefined
+        : activeIndex === SELECT_ALL_ROW && hasSelectAllRow
+            ? selectAllId
+            : activeIndex === 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 = useCallback((index) => {
+        setIsKeyboardNav(false);
+        setActiveIndex(index);
+    }, []);
+    const moveActive = (delta) => {
+        setIsKeyboardNav(true);
+        setActiveIndex((prev) => 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 && firstRow(rowLayout) !== NO_ROW && !isTextInputTarget) {
+                    e.preventDefault();
+                    setIsKeyboardNav(true);
+                    setActiveIndex(firstRow(rowLayout));
+                }
+                break;
+            case "End":
+                if (isOpen && lastRow(rowLayout) !== NO_ROW && !isTextInputTarget) {
+                    e.preventDefault();
+                    setIsKeyboardNav(true);
+                    setActiveIndex(lastRow(rowLayout));
+                }
+                break;
+            case "Enter":
+                if (!isOpen) {
+                    e.preventDefault();
+                    openMenu();
+                }
+                else if (activeIndex === SELECT_ALL_ROW && hasSelectAllRow) {
+                    e.preventDefault();
+                    handleSelectAll();
+                }
+                else if (activeIndex === 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(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.
+    useEffect(() => {
+        if (!isOpen) {
+            setActiveIndex(NO_ROW);
+            setIsKeyboardNav(false);
+            return;
+        }
+        const layout = { optionCount: filteredOptions.length, hasSelectAll: hasSelectAllRow, hasAddNew: hasAddNewRow };
+        setActiveIndex((prev) => (hasRow(prev, layout) ? prev : NO_ROW));
+    }, [isOpen, filteredOptions.length, hasSelectAllRow, hasAddNewRow]);
+    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.
+    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 = useMemo(() => new Set(selectedValues.map((v) => v.id)), [selectedValues]);
+    const isSelected = useCallback((id) => selectedIdsSet.has(id), [selectedIdsSet]);
+    const isValidIcon = (icon) => React.isValidElement(icon);
+    const allFilteredSelected = useMemo(() => filteredOptions.length > 0 &&
+        filteredOptions.every((opt) => selectedIdsSet.has(opt.id)), [filteredOptions, selectedIdsSet]);
+    const handleScroll = useCallback((e) => {
+        if (!pagination ||
+            !pagination.onScroll ||
+            pagination.scrollLoading ||
+            !hasMore)
+            return;
+        const target = e.currentTarget;
+        const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 5;
+        if (nearBottom) {
+            if (scrollTimeoutRef.current)
+                clearTimeout(scrollTimeoutRef.current);
+            scrollTimeoutRef.current = setTimeout(() => {
+                var _a;
+                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, inputValue, hasMore]);
+    useEffect(() => {
+        if (isOpen)
+            return;
+        if (scrollTimeoutRef.current) {
+            clearTimeout(scrollTimeoutRef.current);
+            scrollTimeoutRef.current = null;
+        }
+        lastPageStartRef.current = null;
+    }, [isOpen]);
+    useEffect(() => () => {
+        if (scrollTimeoutRef.current)
+            clearTimeout(scrollTimeoutRef.current);
+    }, []);
+    useOutsideClick({
+        ref: customSelectRef,
+        handler: (e) => {
+            const dropdown = insideSelectMenuRef.current;
+            if (dropdown && dropdown.contains(e.target))
+                return;
+            setCustomSelectOpen(false);
+        },
+    });
+    const handleCustomSelect = (item) => {
+        if (typeof (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.onSelect) === "function") {
+            const option = normalizeSingleValue(item);
+            if (option) {
+                insideSelect.onSelect(option);
+            }
+        }
+        setCustomSelectOpen(false);
+    };
+    const focusInsideOnOpenRef = 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 (!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 = 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 = 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();
+        }
+    }, [updateInsideSelectPos]);
+    useEffect(() => {
+        if (!customSelectOpen)
+            return;
+        updateInsideSelectPos();
+        const onReposition = 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 = 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 = useCallback((node) => {
+        dropdownMenuRef.current = node;
+        if (node)
+            updateDropdownPos();
+    }, [updateDropdownPos]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        updateDropdownPos();
+        const onReposition = 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 (_jsxs(Box, { ref: containerRef, width: width, position: "relative", children: [label && (_jsx(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 })), _jsx(InputGroup, { size: size, children: _jsxs(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, ...getFieldStateStyles(theme, { error, focused, disabled: isDisabled }), _hover: focused || error || isDisabled ? undefined : { borderColor: fieldHoverBorder(theme.colors) }, sx: 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 (_jsxs(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: `${BORDER_WIDTHS.hairline} solid`, borderColor: 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 ${BORDER_WIDTHS.hairline} ${theme.colors.primary[500]}`
+                                    : "none", onClick: (e) => {
+                                    e.stopPropagation();
+                                    toggleCustomSelect();
+                                }, children: [_jsxs(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 ? (_jsx(SelectTruncatedLabel, { label: insideLabel, maxWidth: insideSelect.width || "6rem", fontSize: s.fieldFontSize })) : (_jsx(Text, { fontSize: s.fieldFontSize, fontWeight: 500, color: theme.colors.textMuted, isTruncated: true, maxW: insideSelect.width || "6rem", children: insidePlaceholder })), _jsx(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: _jsx(ChevronDown, { size: s.chevronSize }) })] }), customSelectOpen && (_jsx(Portal, { children: _jsx(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.popoverNested, bg: theme.colors.surfaceRaised, border: `${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 (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: spec.gap, minH: spec.minH, py: spec.py, px: spec.px, fontSize: spec.fontSize, fontWeight: optionRowWeight(selected), color: optionRowInk(theme.colors, selected), bg: "transparent", ...optionRowCursorSx(insideRowBackgrounds), cursor: "pointer", role: "option", "aria-selected": selected, tabIndex: -1, _focusVisible: insideFocusRing, onClick: (e) => {
+                                                        e.stopPropagation();
+                                                        handleCustomSelect(item);
+                                                    }, children: [_jsx(Text, { isTruncated: true, children: item.label }), selected && (_jsx(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) => (_jsx(Tag, { 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 ? CircleX : undefined, colorScheme: "gray", size: s.tagSize }, item.id)))
+                            : selectedValues.length === 1 &&
+                                !isOpen && (_jsx(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: _jsx(SelectTruncatedLabel, { 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 && (_jsx(Tag, { label: `+ ${selectedValues.length - chip.maxChips}`, colorScheme: "gray", size: s.tagSize }, "extra-count")), (isOpen || inputValue || !selectedValues.length) && (_jsx(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 })), _jsxs(Box, { position: "absolute", right: s.rightOffset, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1, children: [isRemoveAllIcon && selectedValues.length > 0 && !isDisabled && (_jsx(ToolTip, { placement: "top", label: "Remove All", hasArrow: true, fontSize: "xs", children: _jsx(IconButton, { icon: _jsx(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" },
+                                            ...focusVisibleStyles(theme.colors),
+                                        } }) })), isLoading ? (_jsx(Spinner, { size: s.spinnerSize })) : isValidIcon(rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon) ? (_jsx(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 })) : (_jsx(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: focusVisibleStyles(theme.colors), children: isOpen ? (_jsx(ChevronUp, { size: s.chevronSize })) : (_jsx(ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && (_jsx(Portal, { children: _jsxs(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.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 && (_jsxs(Box, { id: selectAllId, role: "option", "aria-selected": allFilteredSelected, bg: selectRowFill(rowBackgrounds, { isSelected: false, isActive: activeIndex === SELECT_ALL_ROW }), boxShadow: isKeyboardNav && activeIndex === SELECT_ALL_ROW ? keyboardRingShadow(rowBackgrounds.keyboardRing) : undefined, py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", onClick: handleSelectAll, onMouseEnter: () => handlePointerActivate(SELECT_ALL_ROW), display: "flex", alignItems: "center", gap: spec.gap, color: selectRowInk(theme.colors, false), borderBottom: `${BORDER_WIDTHS.hairline} solid ${raisedRule(theme.colors)}`, children: [_jsx(Checkbox, { isChecked: allFilteredSelected, sx: DECORATIVE_CHECKBOX_SX, size: s.checkboxSize }), _jsx(Text, { fontSize: spec.fontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), _jsx(Box, { ref: optionsListRef, flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", py: 1, borderBottom: `${BORDER_WIDTHS.hairline} solid`, borderColor: raisedRule(theme.colors), children: isOptionLoading && filteredOptions.length === 0 ? (_jsxs(Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [_jsx(Spinner, { size: s.spinnerSize }), _jsx(Text, { fontSize: spec.fontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? (_jsx(Text, { p: 3, fontSize: spec.fontSize, color: theme.colors.textMuted, children: "No results found" })) : (_jsxs(_Fragment, { children: [filteredOptions.map((option, index) => (_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)) && (_jsxs(Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", justifyContent: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [_jsx(Spinner, { size: s.spinnerSize }), _jsx(Text, { fontSize: spec.fontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (_jsxs(Box, { id: addNewId, role: "option", "aria-selected": false, py: spec.py, px: spec.px, borderTop: `${BORDER_WIDTHS.hairline} solid`, borderColor: raisedRule(theme.colors), bg: activeIndex === ADD_NEW_ROW ? rowBackgrounds.active : theme.colors.surfaceRaised, boxShadow: isKeyboardNav && activeIndex === ADD_NEW_ROW ? 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 || _jsx(Plus, { size: s.addNewIconSize }), _jsx(Text, { fontSize: spec.fontSize, children: addNew.text || "Add New" })] }))] }) })), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+};
+export default SearchSelect;