pixelize-design-library 2.4.1 → 2.4.2-beta.0

package/dist/Components/SearchSelect/SearchSelect.js

@@ -49,6 +49,7 @@ 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 normalizeSingleValue = (val) => {
     if (typeof val === "object" && val !== null && "id" in val && "label" in val) {
         return val;
@@ -62,13 +63,15 @@ const normalizeMultiValue = (val) => {
     return [];
 };
 const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading = false, isLoading = false, loadingText = "Loading...", placeholder = "Select", value, searchQuery = "", isMultiple = false, isRequired = false, error = false, errorMessage, helperText, width = "100%", height, size = "md", chip, information, isInformation, informationMessage, rightIcon, addNew, isSelectAll = false, pagination, insideSelect, isRemoveAllIcon, }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     const s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || "md"));
     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);
@@ -84,12 +87,27 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
         width: 0,
     });
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    // `searchselect-dropdown-portal` is also the DOM id an existing outside-click check and
+    // several tests look up directly — kept as a literal constant, not derived from `baseId`,
+    // so those keep working unchanged.
+    const generatedId = (0, react_1.useId)();
+    const baseId = id || generatedId;
+    const listboxId = "searchselect-dropdown-portal";
+    const getOptionId = (index) => `${baseId}-option-${index}`;
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(-1);
+    const pendingFocusRestoreRef = (0, react_1.useRef)(false);
+    // Which trigger element actually has DOM focus right now, if any. Opening the menu from the
+    // toggle button (or the closed single-value button) doesn't move focus into Input — it stays
+    // wherever it was — so which element is the combobox's ARIA host must follow real focus, not
+    // just "Input is mounted now": falling back to render-condition guessing there would put
+    // aria-activedescendant on an unfocused Input while the still-focused toggle button gets none.
+    const [focusedTrigger, setFocusedTrigger] = (0, react_1.useState)(null);
     (0, react_2.useOutsideClick)({
         ref: containerRef,
         handler: (e) => {
             // The options dropdown is portaled to <body>, so a click on it is "outside"
             // the container — ignore those so selecting an option doesn't close first.
-            const dropdown = document.getElementById("searchselect-dropdown-portal");
+            const dropdown = document.getElementById(listboxId);
             if (dropdown && dropdown.contains(e.target))
                 return;
             setIsOpen(false);
@@ -158,6 +176,162 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
         }
         setInputValue("");
     };
+    const activeOptionId = isOpen && activeIndex >= 0 && filteredOptions[activeIndex]
+        ? getOptionId(activeIndex)
+        : undefined;
+    // Exactly one of {Input, the closed single-select trigger button, the toggle-dropdown
+    // button} is the field's authoritative combobox host at any moment — mirrors the render
+    // conditions below (Input when it's mounted, else the closed single-select trigger button,
+    // else the toggle-dropdown button, which is present in every other state bar `isLoading`/a
+    // custom `rightIcon` override — both flagged as residual gaps, not fixed here). Only that
+    // one element gets `role="combobox"` + `aria-activedescendant`: axe's `aria-allowed-attr`
+    // correctly rejects `aria-activedescendant` on a plain (button-role) element, so the other,
+    // non-primary trigger(s) that happen to render alongside it (e.g. the toggle button next to
+    // the closed single-value button) only get the plain disclosure attributes below.
+    // Real focus wins when we have it; otherwise fall back to guessing from render state (nothing
+    // has been focused yet, e.g. on first render).
+    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 comboboxA11yProps = (target) => {
+        const isPrimary = primaryTarget === target;
+        if (isPrimary) {
+            return { role: "combobox", ...disclosureA11yProps, "aria-activedescendant": activeOptionId };
+        }
+        // Native <input>'s implicit role is "textbox", which — unlike "button" — doesn't validly
+        // support aria-expanded/haspopup/controls at all (axe's aria-allowed-attr correctly rejects
+        // it): only expose disclosure state on Input once it's actually the focused combobox host.
+        // The trigger/toggle buttons keep native role="button" either way, which does support them.
+        return target === "input" ? {} : disclosureA11yProps;
+    };
+    // 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 = () => {
+        setCustomSelectOpen(false);
+        setIsOpen(true);
+    };
+    const moveActive = (delta) => {
+        setActiveIndex((prev) => {
+            if (!filteredOptions.length)
+                return -1;
+            if (prev < 0)
+                return delta > 0 ? 0 : filteredOptions.length - 1;
+            return (prev + delta + filteredOptions.length) % filteredOptions.length;
+        });
+    };
+    const restoreFocus = () => {
+        pendingFocusRestoreRef.current = true;
+    };
+    // ArrowDown/Up open the closed control and then move the aria-activedescendant highlight
+    // (wrapping at both ends, matching SelectV2's convention). Home/End are skipped while the
+    // event target is the text input so they still move the text cursor, not the highlight.
+    //
+    // Only reacts when the key originated on one of the three combobox trigger elements, not
+    // merely bubbled up to this Box from some other focusable descendant — a Tag's own "Remove"
+    // button lives inside this same Box, and without this guard its Enter/Space presses were
+    // being intercepted here (e.g. re-opening the menu) instead of reaching Tag's click handler.
+    const handleControlKeyDown = (e) => {
+        const target = e.target;
+        const isKnownTrigger = target === inputRef.current ||
+            target === triggerButtonRef.current ||
+            target === toggleButtonRef.current;
+        if (!isKnownTrigger)
+            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 && filteredOptions.length && !isTextInputTarget) {
+                    e.preventDefault();
+                    setActiveIndex(0);
+                }
+                break;
+            case "End":
+                if (isOpen && filteredOptions.length && !isTextInputTarget) {
+                    e.preventDefault();
+                    setActiveIndex(filteredOptions.length - 1);
+                }
+                break;
+            case "Enter":
+                if (!isOpen) {
+                    e.preventDefault();
+                    openMenu();
+                }
+                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(-1);
+                    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(-1);
+            return;
+        }
+        setActiveIndex((prev) => (prev >= 0 && prev < filteredOptions.length ? prev : -1));
+    }, [isOpen, filteredOptions.length]);
+    // A keyboard-driven close (Escape, or Enter selecting in single-select) can unmount the
+    // focused Input as the control collapses to the trigger button, which silently drops focus to
+    // <body>. Only step in when that actually happened — focus staying right where it was (e.g.
+    // Escape pressed on the toggle button, which never unmounts) must be left alone: forcing focus
+    // onto Input here would fire its own onFocus handler and reopen the menu right after closing it.
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _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);
@@ -237,11 +411,16 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
         if (!customSelectOpen)
             return;
         updateInsideSelectPos();
-        window.addEventListener("scroll", updateInsideSelectPos, true);
-        window.addEventListener("resize", updateInsideSelectPos);
+        const onReposition = (0, rafThrottle_1.rafThrottle)(updateInsideSelectPos);
+        window.addEventListener("scroll", onReposition, {
+            capture: true,
+            passive: true,
+        });
+        window.addEventListener("resize", onReposition);
         return () => {
-            window.removeEventListener("scroll", updateInsideSelectPos, true);
-            window.removeEventListener("resize", updateInsideSelectPos);
+            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;
@@ -278,25 +457,30 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
         if (!isOpen)
             return;
         updateDropdownPos();
-        // `true` (capture) catches scrolling inside any ancestor (e.g. modal body).
-        window.addEventListener("scroll", updateDropdownPos, true);
-        window.addEventListener("resize", 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 () => {
-            window.removeEventListener("scroll", updateDropdownPos, true);
-            window.removeEventListener("resize", updateDropdownPos);
+            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: id, isRequired: isRequired, isInformation: isInformation !== null && isInformation !== void 0 ? isInformation : information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: informationMessage !== null && informationMessage !== void 0 ? informationMessage : information === null || information === void 0 ? void 0 : information.informationMessage })), (0, jsx_runtime_1.jsx)(react_2.InputGroup, { size: size, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "div", ref: controlRef, w: "100%", minH: s.minH, px: s.px, pr: s.pr, position: "relative", display: "flex", alignItems: "center", flexWrap: "wrap", gap: s.gap, border: "0.063rem solid", borderColor: error
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: containerRef, width: width, position: "relative", children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: baseId, isRequired: isRequired, isInformation: isInformation !== null && isInformation !== void 0 ? isInformation : information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: informationMessage !== null && informationMessage !== void 0 ? informationMessage : information === null || information === void 0 ? void 0 : information.informationMessage })), (0, jsx_runtime_1.jsx)(react_2.InputGroup, { size: size, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "div", ref: controlRef, w: "100%", minH: s.minH, px: s.px, pr: s.pr, position: "relative", display: "flex", alignItems: "center", flexWrap: "wrap", gap: s.gap, border: "0.063rem solid", borderColor: error
                         ? theme.colors.semantic.error[500]
                         : focused
                             ? theme.colors.primary[500]
-                            : (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[500], borderRadius: "0.5rem", bg: (_b = theme.colors.gray) === null || _b === void 0 ? void 0 : _b[50], boxShadow: focused
+                            : (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[500], borderRadius: "lg", bg: (_b = theme.colors.gray) === null || _b === void 0 ? void 0 : _b[50], boxShadow: focused
                         ? error
                             ? `0 0 0 0.125rem ${(_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.error}`
                             : `0 0 0 0.125rem ${(_d = theme.colors.boxShadow) === null || _d === void 0 ? void 0 : _d.primary}`
                         : error
                             ? `0 0 0 0.125rem ${(_e = theme.colors.boxShadow) === null || _e === void 0 ? void 0 : _e.error}`
-                            : "none", transition: "box-shadow 0.2s, border-color 0.2s", onClick: () => {
+                            : "none", transition: "box-shadow 0.2s, border-color 0.2s", onKeyDown: handleControlKeyDown, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onClick: () => {
                         setCustomSelectOpen(false);
                         setIsOpen(true);
                     }, children: [insideSelect && (() => {
@@ -305,13 +489,13 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
                             const insidePlaceholder = (_b = insideSelect.placeholder) !== null && _b !== void 0 ? _b : "Select";
                             return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", ref: customSelectRef, flexShrink: 0, ml: s.insideSelectMarginLeft, h: "-webkit-fill-available", borderRight: "0.063rem solid", borderColor: (_d = (_c = theme.colors.boxborder) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : theme.colors.gray[200], bg: customSelectOpen
                                     ? (_g = (_f = (_e = theme.colors.primary) === null || _e === void 0 ? void 0 : _e.opacity) === null || _f === void 0 ? void 0 : _f[8]) !== null && _g !== void 0 ? _g : theme.colors.gray[100]
-                                    : (_j = (_h = theme.colors.background) === null || _h === void 0 ? void 0 : _h[400]) !== null && _j !== void 0 ? _j : theme.colors.white, borderRadius: "0.375rem 0 0 0.375rem", transition: "background 0.15s ease, box-shadow 0.15s ease", boxShadow: customSelectOpen
+                                    : (_j = (_h = theme.colors.background) === null || _h === void 0 ? void 0 : _h[400]) !== null && _j !== void 0 ? _j : theme.colors.white, borderLeftRadius: "md", borderRightRadius: 0, transition: "background 0.15s ease, box-shadow 0.15s ease", boxShadow: customSelectOpen
                                     ? `inset 0 0 0 0.063rem ${(_k = theme.colors.primary) === null || _k === void 0 ? void 0 : _k[500]}`
                                     : "none", onClick: (e) => {
                                     e.stopPropagation();
                                     setIsOpen(false);
                                     setCustomSelectOpen((prev) => !prev);
-                                }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { minW: "4.5rem", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, width: insideSelect.width, height: insideSelectBoxHeight, pl: "0.5rem", pr: "0.375rem", children: [insideLabel ? ((0, jsx_runtime_1.jsx)(SelectTruncatedLabel_1.default, { label: insideLabel, maxWidth: insideSelect.width || "6rem", fontSize: s.fieldFontSize })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.fieldFontSize, fontWeight: 500, color: theme.colors.gray[500], isTruncated: true, maxW: insideSelect.width || "6rem", children: insidePlaceholder })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, color: customSelectOpen ? (_l = theme.colors.primary) === null || _l === void 0 ? void 0 : _l[600] : theme.colors.gray[600], transition: "transform 0.2s ease, color 0.15s ease", transform: customSelectOpen ? "rotate(180deg)" : "rotate(0deg)", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize }) })] }), customSelectOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: setInsideSelectMenuRef, id: "custom-select-portal", position: "fixed", top: `${customSelectPos.top}px`, left: `${customSelectPos.left}px`, zIndex: 1510, bg: theme.colors.background[50], border: "0.063rem solid", borderColor: (_o = (_m = theme.colors.boxborder) === null || _m === void 0 ? void 0 : _m[200]) !== null && _o !== void 0 ? _o : theme.colors.gray[200], borderRadius: "0.5rem", boxShadow: (_q = (_p = theme.shadows) === null || _p === void 0 ? void 0 : _p.md) !== null && _q !== void 0 ? _q : "md", minW: `${customSelectPos.width}px`, maxW: "20rem", py: 1, overflow: "hidden", children: (_r = insideSelect.option) === null || _r === void 0 ? void 0 : _r.map((item) => {
+                                }, 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.gray[500], isTruncated: true, maxW: insideSelect.width || "6rem", children: insidePlaceholder })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, color: customSelectOpen ? (_l = theme.colors.primary) === null || _l === void 0 ? void 0 : _l[600] : theme.colors.gray[600], transition: "transform 0.2s ease, color 0.15s ease", transform: customSelectOpen ? "rotate(180deg)" : "rotate(0deg)", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize }) })] }), customSelectOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: setInsideSelectMenuRef, id: "custom-select-portal", position: "fixed", top: `${customSelectPos.top}px`, left: `${customSelectPos.left}px`, zIndex: 1510, bg: theme.colors.background[50], border: "0.063rem solid", borderColor: (_o = (_m = theme.colors.boxborder) === null || _m === void 0 ? void 0 : _m[200]) !== null && _o !== void 0 ? _o : theme.colors.gray[200], borderRadius: "lg", boxShadow: (_q = (_p = theme.shadows) === null || _p === void 0 ? void 0 : _p.md) !== null && _q !== void 0 ? _q : "md", minW: `${customSelectPos.width}px`, maxW: "20rem", py: 1, overflow: "hidden", children: (_r = insideSelect.option) === null || _r === void 0 ? void 0 : _r.map((item) => {
                                                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
                                                 const selected = ((_a = insideSelect.value) === null || _a === void 0 ? void 0 : _a.id) === item.id;
                                                 return ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, minH: s.optionRowMinH, py: s.optionRowPy, px: "0.75rem", fontSize: s.dropdownTextFontSize, fontWeight: selected ? 600 : 500, color: selected
@@ -334,21 +518,25 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
                                     ? item.label.slice(0, chip.maxText) + "…"
                                     : item.label, onIconClick: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? () => handleRemove(item === null || item === void 0 ? void 0 : item.id) : undefined, icon: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? lucide_react_1.CircleX : undefined, colorScheme: "gray", size: s.tagSize }, item.id)))
                             : selectedValues.length === 1 &&
-                                !isOpen && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: () => {
+                                !isOpen && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", ref: triggerButtonRef, id: primaryTarget === "button" ? baseId : undefined, ...comboboxA11yProps("button"), "aria-label": !label ? String((_g = (_f = selectedValues[0]) === null || _f === void 0 ? void 0 : _f.label) !== null && _g !== void 0 ? _g : "") : undefined, onFocus: () => setFocusedTrigger("button"), onBlur: () => setFocusedTrigger((prev) => (prev === "button" ? null : prev)), onClick: () => {
                                     setCustomSelectOpen(false);
                                     setIsOpen(true);
-                                }, fontSize: s.fieldFontSize, color: theme.colors.gray[800], background: "transparent", border: "none", cursor: "pointer", p: 0, display: "flex", alignItems: "center", flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(SelectTruncatedLabel_1.default, { label: String(selectedValues[0].label), maxWidth: "calc(100% - 2rem)", fontSize: s.fieldFontSize }) })), (chip === null || chip === void 0 ? void 0 : chip.maxChips) && isMultiple && selectedValues.length > chip.maxChips && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: `+ ${selectedValues.length - chip.maxChips}`, colorScheme: "gray", size: s.tagSize }, "extra-count")), (isOpen || inputValue || !selectedValues.length) && ((0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, variant: "unstyled", size: size, h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, flex: "1", 
+                                }, fontSize: s.fieldFontSize, color: theme.colors.gray[800], background: "transparent", border: "none", cursor: "pointer", p: 0, display: "flex", alignItems: "center", flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(SelectTruncatedLabel_1.default, { label: String(selectedValues[0].label), maxWidth: "calc(100% - 2rem)", fontSize: s.fieldFontSize }) })), (chip === null || chip === void 0 ? void 0 : chip.maxChips) && isMultiple && selectedValues.length > chip.maxChips && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: `+ ${selectedValues.length - chip.maxChips}`, colorScheme: "gray", size: s.tagSize }, "extra-count")), (isOpen || inputValue || !selectedValues.length) && ((0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, id: primaryTarget === "input" ? baseId : undefined, "aria-autocomplete": "list", ...comboboxA11yProps("input"), variant: "unstyled", size: size, h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, flex: "1", 
                             // minW="5rem"
                             minW: "0", value: inputValue, onChange: (e) => setInputValue(e.target.value), onFocus: () => {
                                 setFocused(true);
+                                setFocusedTrigger("input");
                                 setCustomSelectOpen(false);
                                 setIsOpen(true);
-                            }, onBlur: () => setFocused(false), placeholder: selectedValues.length && !isOpen ? "" : placeholder })), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", right: s.rightOffset, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1, children: [isRemoveAllIcon && selectedValues.length > 0 && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: s.clearIconSize, color: theme.colors.text[900] }), "aria-label": "Clear all", variant: "ghost", size: s.iconButtonSize, onClick: handleClearAll, sx: {
+                            }, onBlur: () => {
+                                setFocused(false);
+                                setFocusedTrigger((prev) => (prev === "input" ? null : prev));
+                            }, placeholder: selectedValues.length && !isOpen ? "" : placeholder })), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", right: s.rightOffset, top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: 1, children: [isRemoveAllIcon && selectedValues.length > 0 && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: s.clearIconSize, color: theme.colors.text[900] }), "aria-label": "Clear all", variant: "ghost", size: s.iconButtonSize, onClick: handleClearAll, sx: {
                                             bg: "transparent",
                                             _hover: { bg: "transparent" },
                                             _active: { bg: "transparent" },
                                             _focus: { boxShadow: "none", bg: "transparent" },
-                                        } }) })), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize })) : isValidIcon(rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon) ? ((0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon, "aria-label": "right-icon", variant: "ghost", size: s.iconButtonSize, onClick: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.onClick })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", onClick: (e) => {
+                                        } }) })), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize })) : isValidIcon(rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon) ? ((0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon, "aria-label": "right-icon", variant: "ghost", size: s.iconButtonSize, onClick: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.onClick })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", ref: toggleButtonRef, id: primaryTarget === "toggle" ? baseId : undefined, ...comboboxA11yProps("toggle"), onFocus: () => setFocusedTrigger("toggle"), onBlur: () => setFocusedTrigger((prev) => (prev === "toggle" ? null : prev)), onClick: (e) => {
                                         e.preventDefault();
                                         e.stopPropagation();
                                         setIsOpen((prev) => {
@@ -356,6 +544,13 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
                                                 setCustomSelectOpen(false);
                                             return !prev;
                                         });
-                                    }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center", children: isOpen ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: s.chevronSize })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: setDropdownMenuRef, id: "searchselect-dropdown-portal", position: "fixed", top: `${dropdownPos.top}px`, left: `${dropdownPos.left}px`, width: `${dropdownPos.width}px`, zIndex: 1500, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.gray[200], borderRadius: "sm", bg: theme.colors.background[50], boxShadow: "md", display: "flex", flexDirection: "column", children: [isMultiple && isSelectAll && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.gray[100]}`, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.gray[200], children: isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsx)(react_2.Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.gray[500], children: "No results found" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filteredOptions.map((option) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { 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: () => handleSelect(option), display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.gray[100]}`, children: [isMultiple && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: isSelected(option.id), sx: { pointerEvents: "none" }, size: s.checkboxSize })), option.view ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: option.view })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: option.label }))] }, option.id))), ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", justifyContent: "center", gap: 2, minH: s.optionRowMinH, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: theme.colors.background[50], display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] }, children: [addNew.icon || (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: s.addNewIconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: addNew.text || "Add New" })] }))] }) })), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage })] }));
+                                    }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center", children: isOpen ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: s.chevronSize })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: setDropdownMenuRef, id: listboxId, role: "listbox", "aria-multiselectable": isMultiple || undefined, position: "fixed", top: `${dropdownPos.top}px`, left: `${dropdownPos.left}px`, width: `${dropdownPos.width}px`, zIndex: 1500, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.gray[200], borderRadius: "sm", bg: theme.colors.background[50], boxShadow: "md", display: "flex", flexDirection: "column", children: [isMultiple && isSelectAll && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.gray[100]}`, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.gray[200], children: isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsx)(react_2.Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.gray[500], children: "No results found" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filteredOptions.map((option, index) => {
+                                        var _a, _b, _c;
+                                        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: getOptionId(index), role: "option", "aria-selected": isSelected(option.id), py: s.optionRowPy, px: 3, minH: s.optionRowMinH, cursor: "pointer", bg: index === activeIndex
+                                                ? (_c = (_b = (_a = theme.colors.primary) === null || _a === void 0 ? void 0 : _a.opacity) === null || _b === void 0 ? void 0 : _b[8]) !== null && _c !== void 0 ? _c : theme.colors.gray[100]
+                                                : isSelected(option.id)
+                                                    ? theme.colors.gray[100]
+                                                    : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: () => handleSelect(option), onMouseEnter: () => setActiveIndex(index), display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.gray[100]}`, children: [isMultiple && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: isSelected(option.id), sx: { pointerEvents: "none" }, size: s.checkboxSize })), option.view ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: option.view })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: option.label }))] }, option.id));
+                                    }), ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", justifyContent: "center", gap: 2, minH: s.optionRowMinH, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: theme.colors.background[50], display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] }, children: [addNew.icon || (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: s.addNewIconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: addNew.text || "Add New" })] }))] }) })), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage })] }));
 };
 exports.default = SearchSelect;

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

@@ -61,4 +61,3 @@ export type Options = {
     label: string;
     view?: React.ReactNode;
 };
-//# sourceMappingURL=SearchSelectProps.d.ts.map

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

@@ -4,4 +4,3 @@ declare const SelectTruncatedLabel: ({ label, maxWidth, fontSize, }: {
     maxWidth?: string;
 } & Pick<TextProps, "fontSize">) => import("react/jsx-runtime").JSX.Element;
 export default SelectTruncatedLabel;
-//# sourceMappingURL=SelectTruncatedLabel.d.ts.map

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

@@ -42,4 +42,3 @@ export type SearchSelectSizeStyles = {
  * Returns layout and child control tokens for a SearchSelect `size`.
  */
 export declare function getSearchSelectSizeStyles(size: SearchSelectControlSize): SearchSelectSizeStyles;
-//# sourceMappingURL=searchSelectSize.d.ts.map

package/dist/Components/Select/Select.d.ts

@@ -1,3 +1,2 @@
 import { chakraSelectProps } from "./SelectProps";
 export default function Select({ placeholder, size, variant, icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, error, errorMessage, helperText, options, height, formControlStyle, isInformation, informationMessage, selectStyle, }: chakraSelectProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Select.d.ts.map

package/dist/Components/Select/Select.styles.d.ts

@@ -1,3 +1,2 @@
 import { ComponentStyleConfig } from "@chakra-ui/react";
 export declare const Select: ComponentStyleConfig;
-//# sourceMappingURL=Select.styles.d.ts.map

package/dist/Components/Select/Select.styles.js

@@ -2,27 +2,36 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
 exports.Select = {
-    baseStyle: {
-        field: {
-            fontWeight: 500,
-            fontSize: "0.875rem",
-            letterSpacing: "0.044rem",
-            borderRadius: "0.5rem",
-            transition: "border-color 0.2s, box-shadow 0.2s",
-            minWidth: "0", // allow shrinking inside flex
-            width: "100%", // full container width
-            maxWidth: "100%",
-            _placeholder: {
-                fontStyle: "italic",
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
+    baseStyle: ({ theme }) => {
+        var _a, _b;
+        return ({
+            field: {
+                // Chakra's stock Select sets `--select-bg: colors.white` and swaps it to gray.700 behind
+                // `.chakra-ui-dark`/`[data-theme="dark"]` — selectors that NEVER match here, because dark
+                // mode swaps the palette instead of flipping Chakra's colour mode. The variable therefore
+                // stayed `#fff`, painting the native `<option>` list white-on-white in dark. `background[50]`
+                // is the canvas-following equivalent: byte-identical `#ffffff` in light, dark in dark.
+                "--select-bg": (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b[50],
+                fontWeight: 500,
+                fontSize: "0.875rem",
+                letterSpacing: "0.044rem",
+                borderRadius: "lg",
+                transition: "border-color 0.2s, box-shadow 0.2s",
+                minWidth: "0", // allow shrinking inside flex
+                width: "100%", // full container width
+                maxWidth: "100%",
+                _placeholder: {
+                    fontStyle: "italic",
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                },
             },
-        },
-        icon: {
-            width: "1.25rem",
-            height: "1.25rem",
-        },
+            icon: {
+                width: "1.25rem",
+                height: "1.25rem",
+            },
+        });
     },
     sizes: {
         sm: {

package/dist/Components/Select/SelectProps.d.ts

@@ -17,4 +17,3 @@ export type OptionProp = {
     id: string | number;
     label: string | number;
 };
-//# sourceMappingURL=SelectProps.d.ts.map

package/dist/Components/SelectSearch/SelectSearch.d.ts

@@ -1,3 +1,2 @@
 import { SelectSearchProps } from "./SelectSearchProps";
 export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, isMultipleSelect, isRequired, onOptionMultiSelect, error, isProfile, isBottomIcon, errorMessage, BottomIcon, BottomText, handleBottomClick, BottomTextColor, isColorOptions, }: Readonly<SelectSearchProps>): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=SelectSearch.d.ts.map