pixelize-design-library 2.3.6 → 2.3.8

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,113 +32,104 @@ 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 ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+const HelperText_1 = __importDefault(require("../Common/HelperText"));
+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 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;
-    var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _g = _a.isOptionLoading, isOptionLoading = _g === void 0 ? false : _g, _h = _a.isLoading, isLoading = _h === void 0 ? false : _h, _j = _a.loadingText, loadingText = _j === void 0 ? "Loading..." : _j, _k = _a.placeholder, placeholder = _k === void 0 ? "Select" : _k, value = _a.value, _l = _a.searchQuery, searchQuery = _l === void 0 ? "" : _l, _m = _a.isMultiple, isMultiple = _m === void 0 ? false : _m, _o = _a.isRequired, isRequired = _o === void 0 ? false : _o, _p = _a.error, error = _p === void 0 ? false : _p, errorMessage = _a.errorMessage, helperText = _a.helperText, _q = _a.width, width = _q === void 0 ? "100%" : _q, height = _a.height, _r = _a.size, size = _r === void 0 ? "md" : _r, chip = _a.chip, information = _a.information, isInformation = _a.isInformation, informationMessage = _a.informationMessage, rightIcon = _a.rightIcon, addNew = _a.addNew, _s = _a.isSelectAll, isSelectAll = _s === void 0 ? false : _s, 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 _t = (0, react_1.useState)(searchQuery), inputValue = _t[0], setInputValue = _t[1];
-    var _u = (0, react_1.useState)(false), isOpen = _u[0], setIsOpen = _u[1];
-    var _v = (0, react_1.useState)(true), hasMore = _v[0], setHasMore = _v[1];
-    var inputRef = (0, react_1.useRef)(null);
-    var containerRef = (0, react_1.useRef)(null);
-    var controlRef = (0, react_1.useRef)(null);
-    var dropdownMenuRef = (0, react_1.useRef)(null);
-    var _w = (0, react_1.useState)({ top: 0, left: 0, width: 0 }), dropdownPos = _w[0], setDropdownPos = _w[1];
-    var scrollTimeoutRef = (0, react_1.useRef)(null);
-    var _x = (0, react_1.useState)(false), focused = _x[0], setFocused = _x[1];
-    var _y = (0, react_1.useState)(false), customSelectOpen = _y[0], setCustomSelectOpen = _y[1];
-    var customSelectRef = (0, react_1.useRef)(null);
-    var insideSelectMenuRef = (0, react_1.useRef)(null);
-    var _z = (0, react_1.useState)({
+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;
+    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 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 [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 = _z[0], setCustomSelectPos = _z[1];
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    });
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
     (0, react_2.useOutsideClick)({
         ref: containerRef,
-        handler: function (e) {
+        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.
-            var dropdown = document.getElementById("searchselect-dropdown-portal");
+            const dropdown = document.getElementById("searchselect-dropdown-portal");
             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 () {
+    (0, react_1.useEffect)(() => {
         if (pagination === null || pagination === void 0 ? void 0 : pagination.limit) {
             setHasMore(options.length % pagination.limit === 0);
         }
     }, [options.length, pagination === null || pagination === void 0 ? void 0 : pagination.limit]);
-    var handleSelect = function (option) {
+    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
+            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
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(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);
+            const exists = selectedValues.find((v) => v.id === option.id);
+            const updated = exists
+                ? selectedValues.filter((v) => v.id !== option.id)
+                : [...selectedValues, option];
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
         }
         else {
@@ -158,266 +138,224 @@ var SearchSelect = function (_a) {
             setInputValue("");
         }
     };
-    var handleRemove = function (id) {
-        var updated = selectedValues.filter(function (v) { return v.id !== id; });
+    const handleRemove = (id) => {
+        const updated = selectedValues.filter((v) => v.id !== id);
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(updated);
     };
-    var handleClearAll = function () {
+    const handleClearAll = () => {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(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; }); });
+            const updated = selectedValues.filter((sel) => !filteredOptions.some((opt) => opt.id === sel.id));
             onSelect === null || onSelect === void 0 ? void 0 : onSelect(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));
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect([...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);
-    };
-    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 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;
+                const startIndex = options.length + 1;
                 (_a = pagination.onScroll) === null || _a === void 0 ? void 0 : _a.call(pagination, startIndex, pagination.limit || 10, inputValue);
             }, 200);
         }
     }, [pagination, options.length, inputValue, hasMore]);
     (0, react_2.useOutsideClick)({
         ref: customSelectRef,
-        handler: function (e) {
-            var dropdown = document.getElementById("custom-select-portal");
+        handler: (e) => {
+            const dropdown = document.getElementById("custom-select-portal");
             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);
     };
     // Anchor the insideSelect menu to its trigger (viewport-fixed). Prefer below;
     // flip above when near the bottom; clamp horizontally within the viewport.
-    var updateInsideSelectPos = (0, react_1.useCallback)(function () {
+    const updateInsideSelectPos = (0, react_1.useCallback)(() => {
         var _a, _b;
         if (!customSelectRef.current)
             return;
-        var rect = customSelectRef.current.getBoundingClientRect();
-        var gutter = 8;
-        var vw = window.innerWidth;
-        var vh = window.innerHeight;
-        var menuW = ((_a = insideSelectMenuRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || Math.max(rect.width, 128);
-        var menuH = ((_b = insideSelectMenuRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 160;
-        var left = rect.left;
+        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));
-        var top = rect.bottom;
-        var spaceBelow = vh - rect.bottom;
-        var spaceAbove = rect.top;
+        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: top,
-            left: left,
+            top,
+            left,
             width: menuW,
         });
     }, []);
-    var setInsideSelectMenuRef = (0, react_1.useCallback)(function (node) {
+    const setInsideSelectMenuRef = (0, react_1.useCallback)((node) => {
         insideSelectMenuRef.current = node;
         if (node)
             updateInsideSelectPos();
     }, [updateInsideSelectPos]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (!customSelectOpen)
             return;
         updateInsideSelectPos();
         window.addEventListener("scroll", updateInsideSelectPos, true);
         window.addEventListener("resize", updateInsideSelectPos);
-        return function () {
+        return () => {
             window.removeEventListener("scroll", updateInsideSelectPos, true);
             window.removeEventListener("resize", updateInsideSelectPos);
         };
     }, [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.
-    var updateDropdownPos = (0, react_1.useCallback)(function () {
+    const updateDropdownPos = (0, react_1.useCallback)(() => {
         var _a, _b;
         if (!controlRef.current)
             return;
-        var rect = controlRef.current.getBoundingClientRect();
-        var gutter = 8;
-        var vw = window.innerWidth;
-        var vh = window.innerHeight;
-        var menuW = ((_a = dropdownMenuRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || rect.width;
-        var menuH = ((_b = dropdownMenuRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 320;
-        var left = rect.left;
+        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));
-        var top = rect.bottom;
-        var spaceBelow = vh - rect.bottom;
-        var spaceAbove = rect.top;
+        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: top, left: left, width: rect.width });
+        setDropdownPos({ top, left, width: rect.width });
     }, []);
-    var setDropdownMenuRef = (0, react_1.useCallback)(function (node) {
+    const setDropdownMenuRef = (0, react_1.useCallback)((node) => {
         dropdownMenuRef.current = node;
         if (node)
             updateDropdownPos();
     }, [updateDropdownPos]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (!isOpen)
             return;
         updateDropdownPos();
         // `true` (capture) catches scrolling inside any ancestor (e.g. modal body).
         window.addEventListener("scroll", updateDropdownPos, true);
         window.addEventListener("resize", updateDropdownPos);
-        return function () {
+        return () => {
             window.removeEventListener("scroll", updateDropdownPos, true);
             window.removeEventListener("resize", updateDropdownPos);
         };
     }, [isOpen, updateDropdownPos]);
-    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: 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 })),
-        react_1.default.createElement(react_2.InputGroup, { size: size },
-            react_1.default.createElement(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]
-                        : (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[500], borderRadius: "0.5rem", 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 () {
-                    setCustomSelectOpen(false);
-                    setIsOpen(true);
-                } },
-                insideSelect && (function () {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-                    var insideLabel = (_a = insideSelect.value) === null || _a === void 0 ? void 0 : _a.label;
-                    var insidePlaceholder = (_b = insideSelect.placeholder) !== null && _b !== void 0 ? _b : "Select";
-                    return (react_1.default.createElement(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
-                            ? "inset 0 0 0 0.063rem ".concat((_k = theme.colors.primary) === null || _k === void 0 ? void 0 : _k[500])
-                            : "none", onClick: function (e) {
-                            e.stopPropagation();
-                            setIsOpen(false);
-                            setCustomSelectOpen(function (prev) { return !prev; });
-                        } },
-                        react_1.default.createElement(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" },
-                            insideLabel ? (react_1.default.createElement(SelectTruncatedLabel_1.default, { label: insideLabel, maxWidth: insideSelect.width || "6rem", fontSize: s.fieldFontSize })) : (react_1.default.createElement(react_2.Text, { fontSize: s.fieldFontSize, fontWeight: 500, color: (_m = (_l = theme.colors.placeholder) === null || _l === void 0 ? void 0 : _l[500]) !== null && _m !== void 0 ? _m : theme.colors.gray[500], isTruncated: true, maxW: insideSelect.width || "6rem" }, insidePlaceholder)),
-                            react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, color: customSelectOpen ? (_o = theme.colors.primary) === null || _o === void 0 ? void 0 : _o[600] : theme.colors.gray[600], transition: "transform 0.2s ease, color 0.15s ease", transform: customSelectOpen ? "rotate(180deg)" : "rotate(0deg)" },
-                                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, { ref: setInsideSelectMenuRef, id: "custom-select-portal", position: "fixed", top: "".concat(customSelectPos.top, "px"), left: "".concat(customSelectPos.left, "px"), zIndex: 1510, bg: theme.colors.white, border: "0.063rem solid", borderColor: (_q = (_p = theme.colors.boxborder) === null || _p === void 0 ? void 0 : _p[200]) !== null && _q !== void 0 ? _q : theme.colors.gray[200], borderRadius: "0.5rem", boxShadow: (_s = (_r = theme.shadows) === null || _r === void 0 ? void 0 : _r.md) !== null && _s !== void 0 ? _s : "md", minW: "".concat(customSelectPos.width, "px"), maxW: "20rem", py: 1, overflow: "hidden" }, (_t = insideSelect.option) === null || _t === void 0 ? void 0 : _t.map(function (item) {
-                                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-                                var selected = ((_a = insideSelect.value) === null || _a === void 0 ? void 0 : _a.id) === item.id;
-                                return (react_1.default.createElement(react_2.Box, { key: item.id, 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
-                                        ? (_c = (_b = theme.colors.primary) === null || _b === void 0 ? void 0 : _b[700]) !== null && _c !== void 0 ? _c : (_d = theme.colors.primary) === null || _d === void 0 ? void 0 : _d[600]
-                                        : (_f = (_e = theme.colors.text) === null || _e === void 0 ? void 0 : _e[700]) !== null && _f !== void 0 ? _f : theme.colors.gray[800], bg: selected
-                                        ? (_j = (_h = (_g = theme.colors.primary) === null || _g === void 0 ? void 0 : _g.opacity) === null || _h === void 0 ? void 0 : _h[8]) !== null && _j !== void 0 ? _j : theme.colors.gray[100]
-                                        : "transparent", _hover: {
-                                        bg: selected
-                                            ? (_m = (_l = (_k = theme.colors.primary) === null || _k === void 0 ? void 0 : _k.opacity) === null || _l === void 0 ? void 0 : _l[8]) !== null && _m !== void 0 ? _m : theme.colors.gray[100]
-                                            : (_o = theme.colors.gray) === null || _o === void 0 ? void 0 : _o[50],
-                                    }, cursor: "pointer", onClick: function (e) {
-                                        e.stopPropagation();
-                                        handleCustomSelect(item);
-                                    } },
-                                    react_1.default.createElement(react_2.Text, { isTruncated: true }, item.label),
-                                    selected && (react_1.default.createElement(lucide_react_1.Check, { size: s.chevronSize - 2, color: (_p = theme.colors.primary) === null || _p === void 0 ? void 0 : _p[600] }))));
-                            }))))));
-                })(),
-                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 () {
-                            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 },
-                        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);
+    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
+                        ? 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
+                        ? 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: () => {
                         setCustomSelectOpen(false);
                         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) {
-                                if (!prev)
+                    }, children: [insideSelect && (() => {
+                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+                            const insideLabel = (_a = insideSelect.value) === null || _a === void 0 ? void 0 : _a.label;
+                            const insidePlaceholder = (_b = insideSelect.placeholder) !== null && _b !== void 0 ? _b : "Select";
+                            return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", ref: customSelectRef, flexShrink: 0, ml: s.insideSelectMarginLeft, h: "-webkit-fill-available", borderRight: "0.063rem solid", borderColor: (_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
+                                    ? `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: (_m = (_l = theme.colors.placeholder) === null || _l === void 0 ? void 0 : _l[500]) !== null && _m !== void 0 ? _m : 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 ? (_o = theme.colors.primary) === null || _o === void 0 ? void 0 : _o[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.white, border: "0.063rem solid", borderColor: (_q = (_p = theme.colors.boxborder) === null || _p === void 0 ? void 0 : _p[200]) !== null && _q !== void 0 ? _q : theme.colors.gray[200], borderRadius: "0.5rem", boxShadow: (_s = (_r = theme.shadows) === null || _r === void 0 ? void 0 : _r.md) !== null && _s !== void 0 ? _s : "md", minW: `${customSelectPos.width}px`, maxW: "20rem", py: 1, overflow: "hidden", children: (_t = insideSelect.option) === null || _t === void 0 ? void 0 : _t.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
+                                                        ? (_c = (_b = theme.colors.primary) === null || _b === void 0 ? void 0 : _b[700]) !== null && _c !== void 0 ? _c : (_d = theme.colors.primary) === null || _d === void 0 ? void 0 : _d[600]
+                                                        : (_f = (_e = theme.colors.text) === null || _e === void 0 ? void 0 : _e[700]) !== null && _f !== void 0 ? _f : theme.colors.gray[800], bg: selected
+                                                        ? (_j = (_h = (_g = theme.colors.primary) === null || _g === void 0 ? void 0 : _g.opacity) === null || _h === void 0 ? void 0 : _h[8]) !== null && _j !== void 0 ? _j : theme.colors.gray[100]
+                                                        : "transparent", _hover: {
+                                                        bg: selected
+                                                            ? (_m = (_l = (_k = theme.colors.primary) === null || _k === void 0 ? void 0 : _k.opacity) === null || _l === void 0 ? void 0 : _l[8]) !== null && _m !== void 0 ? _m : theme.colors.gray[100]
+                                                            : (_o = theme.colors.gray) === null || _o === void 0 ? void 0 : _o[50],
+                                                    }, cursor: "pointer", onClick: (e) => {
+                                                        e.stopPropagation();
+                                                        handleCustomSelect(item);
+                                                    }, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { isTruncated: true, children: item.label }), selected && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.chevronSize - 2, color: (_p = theme.colors.primary) === null || _p === void 0 ? void 0 : _p[600] }))] }, item.id));
+                                            }) }) }))] }));
+                        })(), isMultiple
+                            ? selectedValues
+                                .slice(0, (chip === null || chip === void 0 ? void 0 : chip.maxChips) || selectedValues.length)
+                                .map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: (chip === null || chip === void 0 ? void 0 : chip.maxText) && item.label.length > chip.maxText
+                                    ? item.label.slice(0, chip.maxText) + "…"
+                                    : item.label, onIconClick: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? () => handleRemove(item === null || item === void 0 ? void 0 : item.id) : undefined, icon: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? lucide_react_1.CircleX : undefined, colorScheme: "gray", size: s.tagSize }, item.id)))
+                            : selectedValues.length === 1 &&
+                                !isOpen && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: () => {
                                     setCustomSelectOpen(false);
-                                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.Portal, null,
-            react_1.default.createElement(react_2.Box, { ref: setDropdownMenuRef, id: "searchselect-dropdown-portal", position: "fixed", top: "".concat(dropdownPos.top, "px"), left: "".concat(dropdownPos.left, "px"), width: "".concat(dropdownPos.width, "px"), zIndex: 1500, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.gray[200], 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 })));
+                                    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", 
+                            // minW="5rem"
+                            minW: "0", value: inputValue, onChange: (e) => setInputValue(e.target.value), onFocus: () => {
+                                setFocused(true);
+                                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, bg: theme.colors.gray[600], color: theme.colors.white, 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.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 ? ((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) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        setIsOpen((prev) => {
+                                            if (!prev)
+                                                setCustomSelectOpen(false);
+                                            return !prev;
+                                        });
+                                    }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center", children: isOpen ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: s.chevronSize })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: setDropdownMenuRef, id: "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.white, 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.white, 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;