pixelize-design-library 2.3.1-beta.9 → 2.3.3

package/dist/Components/SearchSelect/SearchSelect.js

@@ -81,26 +81,28 @@ var normalizeMultiValue = function (val) {
     return [];
 };
 var SearchSelect = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _k = _a.isOptionLoading, isOptionLoading = _k === void 0 ? false : _k, _l = _a.isLoading, isLoading = _l === void 0 ? false : _l, _m = _a.loadingText, loadingText = _m === void 0 ? "Loading..." : _m, _o = _a.placeholder, placeholder = _o === void 0 ? "Select" : _o, value = _a.value, _p = _a.searchQuery, searchQuery = _p === void 0 ? "" : _p, _q = _a.isMultiple, isMultiple = _q === void 0 ? false : _q, _r = _a.isRequired, isRequired = _r === void 0 ? false : _r, _s = _a.error, error = _s === void 0 ? false : _s, errorMessage = _a.errorMessage, helperText = _a.helperText, _t = _a.width, width = _t === void 0 ? "100%" : _t, height = _a.height, _u = _a.size, size = _u === void 0 ? "md" : _u, chip = _a.chip, information = _a.information, isInformation = _a.isInformation, informationMessage = _a.informationMessage, rightIcon = _a.rightIcon, addNew = _a.addNew, _v = _a.isSelectAll, isSelectAll = _v === void 0 ? false : _v, pagination = _a.pagination, insideSelect = _a.insideSelect, isRemoveAllIcon = _a.isRemoveAllIcon;
+    var _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 _w = (0, react_1.useState)(searchQuery), inputValue = _w[0], setInputValue = _w[1];
-    var _x = (0, react_1.useState)(false), isOpen = _x[0], setIsOpen = _x[1];
-    var _y = (0, react_1.useState)(true), hasMore = _y[0], setHasMore = _y[1];
+    var _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 _z = (0, react_1.useState)({ top: 0, left: 0, width: 0 }), dropdownPos = _z[0], setDropdownPos = _z[1];
+    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 _0 = (0, react_1.useState)(false), focused = _0[0], setFocused = _0[1];
-    var _1 = (0, react_1.useState)(false), customSelectOpen = _1[0], setCustomSelectOpen = _1[1];
+    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 _2 = (0, react_1.useState)({
+    var insideSelectMenuRef = (0, react_1.useRef)(null);
+    var _z = (0, react_1.useState)({
         top: 0,
         left: 0,
         width: 0,
-    }), customSelectPos = _2[0], setCustomSelectPos = _2[1];
+    }), customSelectPos = _z[0], setCustomSelectPos = _z[1];
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     (0, react_2.useOutsideClick)({
         ref: containerRef,
@@ -220,28 +222,81 @@ var SearchSelect = function (_a) {
         }
         setCustomSelectOpen(false);
     };
-    (0, react_1.useEffect)(function () {
-        if (customSelectOpen && customSelectRef.current) {
-            var rect = customSelectRef.current.getBoundingClientRect();
-            setCustomSelectPos({
-                top: rect.bottom + window.scrollY,
-                left: rect.left + window.scrollX,
-                width: rect.width + 30,
-            });
+    // 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 () {
+        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;
+        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;
+        if (menuH && top + menuH > vh - gutter && spaceAbove > spaceBelow) {
+            top = rect.top - menuH;
         }
-    }, [customSelectOpen]);
-    // Keep the portaled options dropdown anchored to the control (on open + while
-    // open if the page/modal scrolls or resizes).
+        top = Math.min(Math.max(top, gutter), Math.max(gutter, vh - menuH - gutter));
+        setCustomSelectPos({
+            top: top,
+            left: left,
+            width: menuW,
+        });
+    }, []);
+    var setInsideSelectMenuRef = (0, react_1.useCallback)(function (node) {
+        insideSelectMenuRef.current = node;
+        if (node)
+            updateInsideSelectPos();
+    }, [updateInsideSelectPos]);
+    (0, react_1.useEffect)(function () {
+        if (!customSelectOpen)
+            return;
+        updateInsideSelectPos();
+        window.addEventListener("scroll", updateInsideSelectPos, true);
+        window.addEventListener("resize", updateInsideSelectPos);
+        return function () {
+            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 () {
+        var _a, _b;
         if (!controlRef.current)
             return;
         var rect = controlRef.current.getBoundingClientRect();
-        setDropdownPos({
-            top: rect.bottom + window.scrollY,
-            left: rect.left + window.scrollX,
-            width: rect.width,
-        });
+        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;
+        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;
+        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 });
     }, []);
+    var setDropdownMenuRef = (0, react_1.useCallback)(function (node) {
+        dropdownMenuRef.current = node;
+        if (node)
+            updateDropdownPos();
+    }, [updateDropdownPos]);
     (0, react_1.useEffect)(function () {
         if (!isOpen)
             return;
@@ -267,16 +322,47 @@ var SearchSelect = function (_a) {
                         : "0 0 0 0.125rem ".concat((_e = theme.colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary)
                     : error
                         ? "0 0 0 0.125rem ".concat((_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.error)
-                        : "none", transition: "box-shadow 0.2s, border-color 0.2s", onClick: function () { return setIsOpen(true); } },
-                insideSelect && (react_1.default.createElement(react_2.Box, { position: "relative", ref: customSelectRef, backgroundColor: theme.colors.gray[200], ml: s.insideSelectMarginLeft, h: "-webkit-fill-available", borderRadius: "0.25rem 0 0 0.25rem", onClick: function () { return setCustomSelectOpen(function (prev) { return !prev; }); } },
-                    react_1.default.createElement(react_2.Box, { minW: "5rem", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", width: insideSelect.width, height: insideSelectBoxHeight, pl: "0.5rem", pr: "0.5rem" },
-                        react_1.default.createElement(SelectTruncatedLabel_1.default, { label: (_h = (_g = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.value) === null || _g === void 0 ? void 0 : _g.label) !== null && _h !== void 0 ? _h : "", maxWidth: (insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.width) || "6rem", fontSize: s.fieldFontSize }),
-                        customSelectOpen ? (react_1.default.createElement(lucide_react_1.ChevronUp, { size: s.chevronSize })) : (react_1.default.createElement(lucide_react_1.ChevronDown, { size: s.chevronSize }))),
-                    customSelectOpen && (react_1.default.createElement(react_2.Portal, null,
-                        react_1.default.createElement(react_2.Box, { id: "custom-select-portal", position: "absolute", top: "".concat(customSelectPos.top, "px"), left: "".concat(customSelectPos.left, "px"), zIndex: 1400, bg: theme.colors.white, border: "0.063rem solid", borderColor: theme.colors.gray[300], borderRadius: "md", boxShadow: "md", minW: "10rem", maxW: "38rem" }, (_j = insideSelect === null || insideSelect === void 0 ? void 0 : insideSelect.option) === null || _j === void 0 ? void 0 : _j.map(function (item) { return (react_1.default.createElement(react_2.Box, { key: item.id, display: "flex", alignItems: "center", minH: s.optionRowMinH, px: "0.75rem", fontSize: s.dropdownTextFontSize, _hover: { bg: theme.colors.gray[100] }, cursor: "pointer", onClick: function (e) {
-                                e.stopPropagation();
-                                handleCustomSelect(item);
-                            } }, item.label)); })))))),
+                        : "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)
@@ -284,13 +370,17 @@ var SearchSelect = function (_a) {
                             ? item.label.slice(0, chip.maxText) + "…"
                             : item.label, onIconClick: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? function () { return handleRemove(item === null || item === void 0 ? void 0 : item.id); } : undefined, icon: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? lucide_react_1.CircleX : undefined, colorScheme: "gray", size: s.tagSize })); })
                     : selectedValues.length === 1 &&
-                        !isOpen && (react_1.default.createElement(react_2.Box, { as: "button", type: "button", onClick: function () { return setIsOpen(true); }, fontSize: s.fieldFontSize, color: theme.colors.gray[800], background: "transparent", border: "none", cursor: "pointer", p: 0, display: "flex", alignItems: "center", flex: "1", minW: 0 },
+                        !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);
+                        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 },
@@ -304,10 +394,14 @@ var SearchSelect = function (_a) {
                     isLoading ? (react_1.default.createElement(react_2.Spinner, { size: s.spinnerSize })) : isValidIcon(rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon) ? (react_1.default.createElement(react_2.IconButton, { icon: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.icon, "aria-label": "right-icon", variant: "ghost", size: s.iconButtonSize, onClick: rightIcon === null || rightIcon === void 0 ? void 0 : rightIcon.onClick })) : (react_1.default.createElement(react_2.Box, { as: "button", onClick: function (e) {
                             e.preventDefault();
                             e.stopPropagation();
-                            setIsOpen(function (prev) { return !prev; });
+                            setIsOpen(function (prev) {
+                                if (!prev)
+                                    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, { id: "searchselect-dropdown-portal", position: "absolute", 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" },
+            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"))),

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

@@ -52,6 +52,8 @@ export type SearchSelectProps = {
         value?: Options;
         option?: Options[];
         width?: string;
+        /** Shown when no value is selected. Defaults to "Select". */
+        placeholder?: string;
     };
 };
 export type Options = {

package/dist/Components/SideBar/components/OtherApps.test.js

@@ -78,10 +78,11 @@ describe("OtherApps", function () {
     beforeEach(function () {
         jest.clearAllMocks();
     });
-    it("does not render flyout copy when expanded", function () {
+    it("renders the section header and inline labels when expanded", function () {
         renderWithChakra(react_1.default.createElement(OtherApps_1.default, { toggle: false, otherApps: sampleApps }));
-        expect(react_2.screen.getByText("Other Apps")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Switch app")).toBeInTheDocument();
         expect(react_2.screen.getByText("Billing")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Tickets")).toBeInTheDocument();
         expect(react_2.screen.queryAllByRole("tooltip")).toHaveLength(0);
     });
     it("shows flyout with Open label on hover when collapsed", function () { return __awaiter(void 0, void 0, void 0, function () {

package/dist/Components/SignInActivityTable/SignInActivityTable.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SignInActivityTableProps } from "./SignInActivityTableProps";
+declare const SignInActivityTable: React.FC<SignInActivityTableProps>;
+export default SignInActivityTable;

package/dist/Components/SignInActivityTable/SignInActivityTable.js

@@ -0,0 +1,95 @@
+"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);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+var DEFAULT_LABELS = {
+    title: "Recent Sign-in Devices",
+    browser: "Browser",
+    device: "Device",
+    recentActivity: "Recent Activity",
+    noActivity: "No recent sign-in activity",
+};
+var SignInActivityTable = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var devices = _a.devices, _o = _a.isLoading, isLoading = _o === void 0 ? false : _o, labelOverrides = _a.labels;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var labels = (0, react_1.useMemo)(function () { return (__assign(__assign({}, DEFAULT_LABELS), labelOverrides)); }, [labelOverrides]);
+    var border = (_e = (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : "#E2E8F0";
+    var surface = (_f = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _f !== void 0 ? _f : "#FFFFFF";
+    var muted = (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#64748B";
+    var heading = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[800]) !== null && _k !== void 0 ? _k : "#1E293B";
+    var headBg = (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : "#F8FAFC";
+    var thStyle = {
+        fontSize: "0.7rem",
+        textTransform: "uppercase",
+        letterSpacing: "0.04em",
+        color: muted,
+        borderColor: border,
+        py: 3,
+    };
+    return (react_1.default.createElement(react_2.Box, { mt: 4, backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "0 1px 2px rgba(16,24,40,0.05)", overflow: "hidden" },
+        react_1.default.createElement(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center" },
+            react_1.default.createElement(react_2.Heading, { size: "sm", fontWeight: 600, color: heading }, labels.title)),
+        react_1.default.createElement(react_2.Box, { overflowX: "auto" }, isLoading ? (react_1.default.createElement(react_2.VStack, { spacing: 3, p: 4, align: "stretch" }, Array.from({ length: 4 }).map(function (_, idx) { return (react_1.default.createElement(react_2.Skeleton, { key: idx, height: "18px", borderRadius: "md" })); }))) : devices.length === 0 ? (react_1.default.createElement(EmptyState_1.default, { icon: lucide_react_1.MonitorSmartphone, title: labels.noActivity, size: "sm", minH: "160px" })) : (react_1.default.createElement(react_2.Table, { variant: "simple", size: "sm" },
+            react_1.default.createElement(react_2.Thead, { bg: headBg },
+                react_1.default.createElement(react_2.Tr, null,
+                    react_1.default.createElement(react_2.Th, __assign({}, thStyle), labels.browser),
+                    react_1.default.createElement(react_2.Th, __assign({}, thStyle), labels.device),
+                    react_1.default.createElement(react_2.Th, __assign({}, thStyle), labels.recentActivity))),
+            react_1.default.createElement(react_2.Tbody, null, devices.map(function (device, index) { return (react_1.default.createElement(react_2.Tr, { key: index, _hover: { bg: headBg }, transition: "background 0.15s ease" },
+                react_1.default.createElement(react_2.Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading }, device.browser || "—"),
+                react_1.default.createElement(react_2.Td, { borderColor: border, fontSize: "sm", color: muted }, device.device),
+                react_1.default.createElement(react_2.Td, { borderColor: border, fontSize: "sm", color: muted },
+                    react_1.default.createElement(react_2.Text, null, device.activity)))); })))))));
+};
+exports.default = SignInActivityTable;

package/dist/Components/SignInActivityTable/SignInActivityTable.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/Components/SignInActivityTable/SignInActivityTable.test.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var SignInActivityTable_1 = __importDefault(require("./SignInActivityTable"));
+jest.mock("../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            white: "#ffffff",
+            gray: {
+                50: "#f8fafc",
+                100: "#f0f0f0",
+                200: "#e2e8f0",
+                500: "#64748b",
+                600: "#475569",
+                800: "#1e293b",
+            },
+            primary: { 50: "#eef2ff", 500: "#6366f1" },
+            boxborder: { 200: "#e2e8f0" },
+        },
+    }); },
+}); });
+beforeAll(function () {
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        configurable: true,
+        value: jest.fn().mockImplementation(function (query) { return ({
+            matches: false,
+            media: query,
+            onchange: null,
+            addListener: jest.fn(),
+            removeListener: jest.fn(),
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn(),
+        }); }),
+    });
+});
+var devices = [
+    { browser: "Chrome", device: "MacBook Pro", activity: "2 minutes ago" },
+    { browser: "Safari", device: "iPhone 15", activity: "Yesterday" },
+];
+var renderWithChakra = function (ui) {
+    return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
+};
+describe("SignInActivityTable", function () {
+    it("renders the device rows", function () {
+        renderWithChakra(react_1.default.createElement(SignInActivityTable_1.default, { devices: devices }));
+        expect(react_2.screen.getByText("Recent Sign-in Devices")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Chrome")).toBeInTheDocument();
+        expect(react_2.screen.getByText("MacBook Pro")).toBeInTheDocument();
+        expect(react_2.screen.getByText("2 minutes ago")).toBeInTheDocument();
+    });
+    it("shows an empty state when there is no activity", function () {
+        renderWithChakra(react_1.default.createElement(SignInActivityTable_1.default, { devices: [] }));
+        expect(react_2.screen.getByText("No recent sign-in activity")).toBeInTheDocument();
+    });
+});

package/dist/Components/SignInActivityTable/SignInActivityTableProps.d.ts

@@ -0,0 +1,21 @@
+export type SignInDevice = {
+    browser: string;
+    device: string;
+    activity: string;
+};
+/**
+ * All user-facing strings. Provide translated values from the host app; every
+ * key has a sensible English default so the component works standalone.
+ */
+export type SignInActivityLabels = {
+    title?: string;
+    browser?: string;
+    device?: string;
+    recentActivity?: string;
+    noActivity?: string;
+};
+export interface SignInActivityTableProps {
+    devices: SignInDevice[];
+    isLoading?: boolean;
+    labels?: SignInActivityLabels;
+}

package/dist/Components/SignInActivityTable/SignInActivityTableProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/StageProgress/StageItem.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { StageItemProps } from "./StageProgressProps";
+declare const StageItem: React.FC<StageItemProps>;
+export default StageItem;

package/dist/Components/StageProgress/StageItem.js

@@ -0,0 +1,137 @@
+"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);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+var StageProgressProps_1 = require("./StageProgressProps");
+var sizeMap = {
+    sm: { arrow: 12, minW: "120px", h: "28px", px: 3, font: "0.75rem", icon: 12 },
+    md: { arrow: 16, minW: "160px", h: "36px", px: 4, font: "0.875rem", icon: 14 },
+    lg: { arrow: 20, minW: "200px", h: "44px", px: 5, font: "1rem", icon: 16 },
+};
+var clipFor = function (index, total, a) {
+    var isFirst = index === 0;
+    var isLast = index === total - 1;
+    if (total === 1)
+        return "none";
+    if (isFirst)
+        return "polygon(0 0, calc(100% - ".concat(a, "px) 0, 100% 50%, calc(100% - ").concat(a, "px) 100%, 0 100%)");
+    if (isLast)
+        return "polygon(0 0, 100% 0, 100% 100%, 0 100%, ".concat(a, "px 50%)");
+    return "polygon(0 0, calc(100% - ".concat(a, "px) 0, 100% 50%, calc(100% - ").concat(a, "px) 100%, 0 100%, ").concat(a, "px 50%)");
+};
+var StageItem = function (_a) {
+    var _b;
+    var label = _a.label, index = _a.index, total = _a.total, state = _a.state, _c = _a.variant, variant = _c === void 0 ? "chevron" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, _e = _a.colorScheme, colorScheme = _e === void 0 ? "primary" : _e, onClick = _a.onClick, _f = _a.isReadOnly, isReadOnly = _f === void 0 ? false : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.showCheck, showCheck = _h === void 0 ? false : _h, minWidth = _a.minWidth, _j = _a.scrollIntoViewWhenActive, scrollIntoViewWhenActive = _j === void 0 ? true : _j, _k = _a.tooltipThreshold, tooltipThreshold = _k === void 0 ? 20 : _k;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var palette = (0, StageProgressProps_1.resolveStagePalette)(theme, colorScheme);
+    var ref = (0, react_1.useRef)(null);
+    var s = sizeMap[size];
+    (0, react_1.useEffect)(function () {
+        if (state === "active" && scrollIntoViewWhenActive && ref.current) {
+            ref.current.scrollIntoView({
+                behavior: "smooth",
+                inline: "center",
+                block: "nearest",
+            });
+        }
+    }, [state, scrollIntoViewWhenActive]);
+    var bg = state === "active"
+        ? palette.strong
+        : state === "completed"
+            ? palette.soft
+            : palette.muted;
+    var color = state === "active"
+        ? palette.onStrong
+        : state === "completed"
+            ? palette.softText
+            : palette.mutedText;
+    var interactive = !isReadOnly && !disabled;
+    var isFirst = index === 0;
+    var isLast = index === total - 1;
+    var isChevron = variant === "chevron";
+    // Chevron pads extra on the left to clear the inbound notch and on the right
+    // to keep text clear of the outgoing arrow point; others are centered.
+    var leftPad = isChevron && !isFirst ? s.arrow + s.px * 4 : s.px * 2;
+    var rightPad = isChevron ? s.arrow + s.px * 4 : s.px * 2;
+    // Chevron overlaps into the previous point, leaving a thin 2px divider.
+    var overlap = isChevron && !isFirst ? -(s.arrow - 2) : 0;
+    var clipPath = isChevron ? clipFor(index, total, s.arrow) : "none";
+    var borderRadius = variant === "pills"
+        ? "full"
+        : variant === "bar"
+            ? isFirst && isLast
+                ? "8px"
+                : isFirst
+                    ? "8px 2px 2px 8px"
+                    : isLast
+                        ? "2px 8px 8px 2px"
+                        : "2px"
+            : "0";
+    // Upcoming pills read as outlined; other states stay filled.
+    var isOutlinePill = variant === "pills" && state === "upcoming";
+    var hoverStyles = interactive
+        ? state === "active"
+            ? { bg: palette.hover }
+            : { bg: palette.strong, color: palette.onStrong, borderColor: palette.strong }
+        : undefined;
+    var showTooltip = ((_b = label === null || label === void 0 ? void 0 : label.length) !== null && _b !== void 0 ? _b : 0) > tooltipThreshold;
+    var content = (react_1.default.createElement(react_2.Box, { ref: ref, role: interactive ? "button" : undefined, "aria-current": state === "active" ? "step" : undefined, onClick: interactive ? onClick : undefined, flexShrink: 0, minWidth: minWidth || s.minW, height: s.h, ml: "".concat(overlap, "px"), pl: "".concat(leftPad, "px"), pr: "".concat(rightPad, "px"), bg: isOutlinePill ? "transparent" : bg, color: isOutlinePill ? palette.mutedText : color, border: isOutlinePill ? "1px solid" : undefined, borderColor: isOutlinePill ? palette.muted : undefined, borderRadius: borderRadius, fontSize: s.font, fontWeight: state === "active" ? 600 : 500, display: "flex", alignItems: "center", justifyContent: isChevron ? "flex-start" : "center", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, transition: "background 0.18s ease, color 0.18s ease, filter 0.18s ease, border-color 0.18s ease", sx: { clipPath: clipPath }, _hover: interactive ? __assign(__assign({}, hoverStyles), { filter: "brightness(0.97)" }) : undefined },
+        react_1.default.createElement(react_2.Flex, { align: "center", justify: isChevron ? "flex-start" : "center", gap: "6px", width: "100%", minW: 0 },
+            showCheck && state === "completed" && (react_1.default.createElement(lucide_react_1.Check, { size: s.icon, style: { flexShrink: 0 } })),
+            react_1.default.createElement(react_2.Box, { as: "span", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", textAlign: "center", flex: "1" }, label))));
+    if (showTooltip) {
+        return (react_1.default.createElement(ToolTip_1.default, { label: label, placement: "top", openDelay: 300 }, content));
+    }
+    return content;
+};
+exports.default = StageItem;

package/dist/Components/StageProgress/StageProgress.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { StageProgressProps } from "./StageProgressProps";
+declare const StageProgress: React.FC<StageProgressProps>;
+export default StageProgress;