pixelize-design-library 2.4.1-beta.10 → 2.4.1-beta.12

package/dist/Components/SelectSearch/SelectSearch.js

@@ -12,13 +12,20 @@ const fieldStyles_1 = require("../Common/fieldStyles");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const lucide_react_1 = require("lucide-react");
 const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOptionClick, isProfile, isColorOptions, }) => {
+const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOptionClick, isProfile, isColorOptions, isOptionSelected, activeIndex, optionRefs, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     if (isOptionLoading) {
         return ((0, jsx_runtime_1.jsxs)(react_2.VStack, { py: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.primary[500] }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.primary[500], children: loadingText })] }));
     }
     if (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredOptions.map((option) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { px: 4, py: 2, cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[50] }, onClick: () => handleOptionClick(option), display: "flex", alignItems: "center", gap: "0.5rem", children: [isProfile && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "sm", name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "50%" })), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: option.label }), option.email && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: 12, color: "gray.500", children: option.email }))] })] }, option.id))) }));
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredOptions.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: (el) => {
+                    optionRefs.current[index] = el;
+                }, role: "option", "aria-selected": isOptionSelected(option), tabIndex: index === activeIndex ? 0 : -1, w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", bg: "transparent", px: 4, py: 2, cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[50] }, onClick: () => handleOptionClick(option), onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        handleOptionClick(option);
+                    }
+                }, display: "flex", alignItems: "center", gap: "0.5rem", children: [isProfile && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "sm", name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "50%" })), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: option.label }), option.email && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: 12, color: "gray.500", children: option.email }))] })] }, option.id))) }));
     }
     return ((0, jsx_runtime_1.jsx)(react_2.Text, { px: 4, py: 2, color: "gray.500", children: "No options found" }));
 };
@@ -36,6 +43,27 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
     const [position, setPosition] = (0, react_1.useState)("below");
     const inputRef = (0, react_1.useRef)(null);
     const dropdownRef = (0, react_1.useRef)(null);
+    const listboxId = (0, react_1.useId)();
+    // Roving-tabindex keyboard nav for the options list (same shape as
+    // Table/filters/CompactSelect's listbox pattern): real DOM focus moves
+    // through the options, so no aria-activedescendant is needed.
+    const optionRefs = (0, react_1.useRef)([]);
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const pendingFocusFirstOption = (0, react_1.useRef)(false);
+    // Programmatically focusing the input (Escape returning focus there) would
+    // otherwise re-trigger its own onFocus and immediately reopen the list.
+    const skipNextInputFocusOpen = (0, react_1.useRef)(false);
+    const closeAndFocusInput = () => {
+        var _a;
+        setIsOpen(false);
+        skipNextInputFocusOpen.current = true;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const focusOption = (0, react_1.useCallback)((next) => {
+        var _a;
+        setActiveIndex(next);
+        (_a = optionRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
     // const filteredOptions = useMemo(() => {
     //   return options.filter((option) => {
     //     const optionLabel = option.label || '';
@@ -113,6 +141,38 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
             }
         }
     }, [isMultipleSelect, onOptionSelect, onOptionMultiSelect]);
+    const isOptionSelected = (0, react_1.useCallback)((option) => selectedOptions.some((selected) => selected.id === option.id), [selectedOptions]);
+    (0, react_1.useEffect)(() => setActiveIndex(0), [inputValue, isOpen]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (isOpen && pendingFocusFirstOption.current) {
+            pendingFocusFirstOption.current = false;
+            // Refs are already attached by the time this effect runs (React
+            // commits before running effects), so this can focus synchronously.
+            (_a = optionRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [isOpen]);
+    const handleListKeyDown = (e) => {
+        if (filteredOptions.length === 0)
+            return;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            const step = e.key === "ArrowDown" ? 1 : -1;
+            focusOption((activeIndex + step + filteredOptions.length) % filteredOptions.length);
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            focusOption(0);
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            focusOption(filteredOptions.length - 1);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            closeAndFocusInput();
+        }
+    };
     const handleRemoveOption = (option) => {
         setSelectedOptions((prev) => prev.filter((selected) => selected.id !== option.id));
         if (onOptionMultiSelect) {
@@ -130,6 +190,25 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
             if (matchingOption) {
                 handleOptionClick(matchingOption);
             }
+            else if (!isOpen) {
+                setIsOpen(true);
+            }
+        }
+        else if (e.key === "ArrowDown") {
+            // Space is left untouched here (unlike a button trigger) since this
+            // trigger is a text field — Space must still type a literal space.
+            e.preventDefault();
+            if (!isOpen) {
+                pendingFocusFirstOption.current = true;
+                setIsOpen(true);
+            }
+            else if (filteredOptions.length > 0) {
+                focusOption(0);
+            }
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            closeAndFocusInput();
         }
     };
     const updateDropdownPosition = () => {
@@ -167,7 +246,13 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: error, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => ((0, jsx_runtime_1.jsxs)(react_2.Tag, { size: "md", borderRadius: "full", variant: "solid", sx: { backgroundColor: theme.colors.primary[500] }, children: [(0, jsx_runtime_1.jsx)(react_2.TagLabel, { width: "50px", children: option.label }), (0, jsx_runtime_1.jsx)(react_2.TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, variant: "outline", borderRadius: fieldStyles_1.FIELD_RADIUS, value: inputValue ? inputValue : "", onClick: () => setIsOpen(true), onFocus: () => setIsOpen(true), onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: theme.colors.boxborder[800], transition: "border-color 0.2s, box-shadow 0.2s", _hover: {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: error, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => ((0, jsx_runtime_1.jsxs)(react_2.Tag, { size: "md", borderRadius: "full", variant: "solid", sx: { backgroundColor: theme.colors.primary[500] }, children: [(0, jsx_runtime_1.jsx)(react_2.TagLabel, { width: "50px", children: option.label }), (0, jsx_runtime_1.jsx)(react_2.TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, variant: "outline", borderRadius: fieldStyles_1.FIELD_RADIUS, value: inputValue ? inputValue : "", onClick: () => setIsOpen(true), onFocus: () => {
+                                    if (skipNextInputFocusOpen.current) {
+                                        skipNextInputFocusOpen.current = false;
+                                        return;
+                                    }
+                                    setIsOpen(true);
+                                }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, cursor: "pointer", borderColor: theme.colors.boxborder[800], transition: "border-color 0.2s, box-shadow 0.2s", _hover: {
                                     borderColor: error
                                         ? theme.colors.semantic.error[500]
                                         : theme.colors.primary[500],
@@ -185,7 +270,7 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
                                     fontSize: 15,
                                     letterSpacing: 0.7,
                                     border: error ? errorBorder : defaultBorderThin,
-                                } }), rightIcon && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, marginTop: "5px", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: "gray.300", borderRadius: "md", bg: theme.colors.background[50], maxHeight: "150px", overflowY: "auto", zIndex: 10, children: [(0, jsx_runtime_1.jsx)(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions }), (0, jsx_runtime_1.jsx)("hr", {}), isBottomIcon && ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "sticky", bottom: 0, background: theme.colors.background[50], display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: "gray.300", zIndex: 1, borderTop: `1px solid ${theme.colors.border[500]}`, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: BottomIcon ? BottomIcon : (0, jsx_runtime_1.jsx)(lucide_react_1.PlusIcon, { size: "1rem" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.875rem", color: BottomTextColor
+                                } }), rightIcon && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, marginTop: "5px", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: "gray.300", borderRadius: "md", bg: theme.colors.background[50], maxHeight: "150px", overflowY: "auto", zIndex: 10, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: (0, jsx_runtime_1.jsx)(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs }) }), (0, jsx_runtime_1.jsx)("hr", {}), isBottomIcon && ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "sticky", bottom: 0, background: theme.colors.background[50], display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: "gray.300", zIndex: 1, borderTop: `1px solid ${theme.colors.border[500]}`, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: BottomIcon ? BottomIcon : (0, jsx_runtime_1.jsx)(lucide_react_1.PlusIcon, { size: "1rem" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.875rem", color: BottomTextColor
                                             ? BottomTextColor
                                             : theme.colors.primary[500], padding: "8px 8px", children: BottomText || "Add New" })] }))] })), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage })] }) }) }));
 }

package/dist/Components/SelectV2/SelectV2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectV2.d.ts","sourceRoot":"","sources":["../../../src/Components/SelectV2/SelectV2.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAc,aAAa,EAAgB,MAAM,iBAAiB,CAAC;AAY1E,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAiYpD"}
+{"version":3,"file":"SelectV2.d.ts","sourceRoot":"","sources":["../../../src/Components/SelectV2/SelectV2.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAc,aAAa,EAAgB,MAAM,iBAAiB,CAAC;AAmH1E,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA+XpD"}

package/dist/Components/SelectV2/SelectV2.js

@@ -1,11 +1,44 @@
 "use strict";
+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 });
 exports.default = SelectV2;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
@@ -20,8 +53,18 @@ const SIZE_MAP = {
     lg: { h: "2.75rem", fontSize: "0.9375rem", px: "1rem" },
 };
 const asIdSet = (values) => new Set((values !== null && values !== void 0 ? values : []).map((v) => v.toString()));
+// Derived from the option's own id (not its index) so it stays stable across filtering/reordering.
+const optionDomId = (listboxId, id) => `${listboxId}-option-${id.toString().replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+const OptionRow = react_1.default.memo(function OptionRow({ option, index, listboxId, isSelected, isActive, isMulti, theme, renderOption, onSelect, onActivate, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: optionDomId(listboxId, option.id), "data-index": index, role: "option", "aria-selected": isSelected, "aria-disabled": option.isDisabled, onMouseEnter: () => onActivate(index), onClick: () => onSelect(option), mx: 1.5, px: 2.5, py: 1.5, borderRadius: "0.375rem", cursor: option.isDisabled ? "not-allowed" : "pointer", opacity: option.isDisabled ? 0.4 : 1, display: "flex", alignItems: "center", gap: 2, fontSize: "0.8125rem", fontWeight: isSelected && !isMulti ? 600 : 500, color: isSelected && !isMulti
+            ? (_b = (_a = theme.colors.primary) === null || _a === void 0 ? void 0 : _a[700]) !== null && _b !== void 0 ? _b : (_c = theme.colors.primary) === null || _c === void 0 ? void 0 : _c[600]
+            : (_e = (_d = theme.colors.text) === null || _d === void 0 ? void 0 : _d[700]) !== null && _e !== void 0 ? _e : (_f = theme.colors.gray) === null || _f === void 0 ? void 0 : _f[700], bg: isActive
+            ? (_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 : (_k = theme.colors.gray) === null || _k === void 0 ? void 0 : _k[100]
+            : "transparent", transition: "background 0.12s ease, color 0.12s ease", children: [isMulti ? ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1 })) : null, renderOption ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [option.icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, isTruncated: true, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, children: option.label }), option.description ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "block", fontSize: "0.75rem", fontWeight: 400, color: (_l = theme.colors.gray) === null || _l === void 0 ? void 0 : _l[500], isTruncated: true, children: option.description })) : null] })] }))] }));
+});
 function SelectV2(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const { options = [], placeholder = "Select Option", label, error = false, errorMessage, helperText, isDisabled = false, isRequired = false, size = "md", isSearchable = true, width, formControlStyle, onBlur, onFocus, renderOption, renderValue, maxMenuHeight = "16rem", defaultOpen = false, "data-testid": dataTestId, "aria-label": ariaLabel, } = props;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)({ defaultIsOpen: defaultOpen });
@@ -31,7 +74,7 @@ function SelectV2(props) {
     const filterInputRef = (0, react_1.useRef)(null);
     const listRef = (0, react_1.useRef)(null);
     const s = (_a = SIZE_MAP[size]) !== null && _a !== void 0 ? _a : SIZE_MAP.md;
-    const fieldStyles = (0, fieldStyles_1.getFieldStateStyles)(theme, { error, focused: isOpen });
+    const fieldStyles = (0, react_1.useMemo)(() => (0, fieldStyles_1.getFieldStateStyles)(theme, { error, focused: isOpen }), [theme, error, isOpen]);
     const selectedIds = (0, react_1.useMemo)(() => props.isMulti
         ? asIdSet(props.value)
         : asIdSet(props.value !== undefined ? [props.value] : undefined), 
@@ -64,7 +107,7 @@ function SelectV2(props) {
         const selectedFilteredIndex = filteredOptions.findIndex((option) => option.id.toString() === (firstSelected === null || firstSelected === void 0 ? void 0 : firstSelected.toString()));
         setActiveIndex(selectedFilteredIndex);
     };
-    const handleSelect = (option) => {
+    const handleSelect = (0, react_1.useCallback)((option) => {
         var _a, _b;
         if (option.isDisabled)
             return;
@@ -81,7 +124,9 @@ function SelectV2(props) {
         props.onChange(option);
         resetAndClose();
         (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-    };
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.isMulti, props.onChange, selectedIds, selectedOptions, resetAndClose]);
     (0, react_1.useEffect)(() => {
         if (isOpen && isSearchable) {
             // Popover content mounts after open; defer focus so it lands on the rendered input.
@@ -108,16 +153,36 @@ function SelectV2(props) {
             return next;
         });
     };
+    // Page keys jump-and-clamp rather than wrap, matching the APG listbox pattern.
+    const PAGE_STEP = 8;
+    const moveActiveBy = (delta) => {
+        if (!filteredOptions.length)
+            return;
+        setActiveIndex((current) => Math.min(Math.max(current + delta, 0), filteredOptions.length - 1));
+    };
+    const moveActiveToEdge = (edge) => {
+        if (!filteredOptions.length)
+            return;
+        setActiveIndex(edge === "start" ? 0 : filteredOptions.length - 1);
+    };
     const handleTriggerKeyDown = (event) => {
         if (isDisabled)
             return;
-        if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            handleOpen();
+        if (!isOpen) {
+            if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                handleOpen();
+            }
+            return;
         }
+        // Popup already open with focus still on the trigger (isSearchable=false has no
+        // filter input to move focus into) — drive the same listbox navigation from here.
+        handleListKeyDown(event);
     };
     const handleListKeyDown = (event) => {
-        var _a;
+        var _a, _b;
+        // Home/End on the type-ahead filter input must move the text cursor, not the active option.
+        const isTextInput = ((_a = event.target) === null || _a === void 0 ? void 0 : _a.tagName) === "INPUT";
         switch (event.key) {
             case "ArrowDown":
                 event.preventDefault();
@@ -127,6 +192,26 @@ function SelectV2(props) {
                 event.preventDefault();
                 moveActive(-1);
                 break;
+            case "Home":
+                if (isTextInput)
+                    break;
+                event.preventDefault();
+                moveActiveToEdge("start");
+                break;
+            case "End":
+                if (isTextInput)
+                    break;
+                event.preventDefault();
+                moveActiveToEdge("end");
+                break;
+            case "PageUp":
+                event.preventDefault();
+                moveActiveBy(-PAGE_STEP);
+                break;
+            case "PageDown":
+                event.preventDefault();
+                moveActiveBy(PAGE_STEP);
+                break;
             case "Enter": {
                 event.preventDefault();
                 const activeOption = filteredOptions[activeIndex];
@@ -137,7 +222,7 @@ function SelectV2(props) {
             case "Escape":
                 event.preventDefault();
                 resetAndClose();
-                (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
                 break;
             case "Tab":
                 resetAndClose();
@@ -146,7 +231,23 @@ function SelectV2(props) {
                 break;
         }
     };
-    const listboxId = `selectv2-listbox-${label !== null && label !== void 0 ? label : "field"}`;
+    const instanceId = (0, react_1.useId)();
+    const listboxId = `selectv2-listbox-${instanceId}`;
+    const triggerId = `selectv2-trigger-${instanceId}`;
+    const activeOption = filteredOptions[activeIndex];
+    const activeDescendantId = activeOption ? optionDomId(listboxId, activeOption.id) : undefined;
+    const listScrollStyles = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        return ({
+            scrollbarWidth: "thin",
+            scrollbarColor: `${(_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[300]} transparent`,
+            "&::-webkit-scrollbar": { width: "6px" },
+            "&::-webkit-scrollbar-thumb": {
+                background: (_b = theme.colors.gray) === null || _b === void 0 ? void 0 : _b[300],
+                borderRadius: "3px",
+            },
+        });
+    }, [theme]);
     const defaultTriggerContent = () => {
         var _a;
         if (props.isMulti) {
@@ -161,25 +262,11 @@ function SelectV2(props) {
         return selectedOptions[0] ? selectedOptions[0].label : placeholder;
     };
     const triggerIcon = !props.isMulti && ((_b = selectedOptions[0]) === null || _b === void 0 ? void 0 : _b.icon) ? selectedOptions[0].icon : null;
-    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: error, isDisabled: isDisabled, style: formControlStyle, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: () => resetAndClose(), placement: "bottom-start", matchWidth: true, autoFocus: false, returnFocusOnClose: false, gutter: 4, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: triggerRef, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-disabled": isDisabled, "aria-label": ariaLabel, disabled: isDisabled, onClick: handleOpen, onKeyDown: handleTriggerKeyDown, display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", h: s.h, px: s.px, fontSize: s.fontSize, fontWeight: 500, textAlign: "left", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.4 : 1, color: selectedOptions.length ? (_c = theme.colors.text) === null || _c === void 0 ? void 0 : _c[900] : (_d = theme.colors.gray) === null || _d === void 0 ? void 0 : _d[500], "data-testid": dataTestId, ...fieldStyles, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 1.5, minW: 0, isTruncated: true, children: [triggerIcon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: triggerIcon })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, fontStyle: selectedOptions.length ? "normal" : "italic", children: renderValue ? renderValue(selectedOptions) : defaultTriggerContent() })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, ml: 2, transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", color: (_e = theme.colors.gray) === null || _e === void 0 ? void 0 : _e[500], children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.PopoverContent, { width: "100%", borderRadius: "0.625rem", border: `0.063rem solid ${(_g = (_f = theme.colors.boxborder) === null || _f === void 0 ? void 0 : _f[200]) !== null && _g !== void 0 ? _g : (_h = theme.colors.gray) === null || _h === void 0 ? void 0 : _h[200]}`, boxShadow: (_j = theme.shadows) === null || _j === void 0 ? void 0 : _j.lg, overflow: "hidden", onKeyDown: handleListKeyDown, children: [isSearchable && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, borderBottom: `0.063rem solid ${(_l = (_k = theme.colors.boxborder) === null || _k === void 0 ? void 0 : _k[100]) !== null && _l !== void 0 ? _l : (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[200]}`, children: (0, jsx_runtime_1.jsx)(react_2.Input, { ref: filterInputRef, size: "sm", placeholder: "Type to filter...", value: filterText, onChange: (event) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: error, isDisabled: isDisabled, style: formControlStyle, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: triggerId, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: () => resetAndClose(), placement: "bottom-start", matchWidth: true, autoFocus: false, returnFocusOnClose: false, gutter: 4, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", id: triggerId, ref: triggerRef, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-activedescendant": activeDescendantId, "aria-disabled": isDisabled, "aria-label": ariaLabel, disabled: isDisabled, onClick: handleOpen, onKeyDown: handleTriggerKeyDown, display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", h: s.h, px: s.px, fontSize: s.fontSize, fontWeight: 500, textAlign: "left", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.4 : 1, color: selectedOptions.length ? (_c = theme.colors.text) === null || _c === void 0 ? void 0 : _c[900] : (_d = theme.colors.gray) === null || _d === void 0 ? void 0 : _d[500], "data-testid": dataTestId, ...fieldStyles, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 1.5, minW: 0, isTruncated: true, children: [triggerIcon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: triggerIcon })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, fontStyle: selectedOptions.length ? "normal" : "italic", children: renderValue ? renderValue(selectedOptions) : defaultTriggerContent() })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, ml: 2, transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", color: (_e = theme.colors.gray) === null || _e === void 0 ? void 0 : _e[500], children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.PopoverContent, { width: "100%", borderRadius: "0.625rem", border: `0.063rem solid ${(_g = (_f = theme.colors.boxborder) === null || _f === void 0 ? void 0 : _f[200]) !== null && _g !== void 0 ? _g : (_h = theme.colors.gray) === null || _h === void 0 ? void 0 : _h[200]}`, boxShadow: (_j = theme.shadows) === null || _j === void 0 ? void 0 : _j.lg, overflow: "hidden", onKeyDown: handleListKeyDown, children: [isSearchable && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, borderBottom: `0.063rem solid ${(_l = (_k = theme.colors.boxborder) === null || _k === void 0 ? void 0 : _k[100]) !== null && _l !== void 0 ? _l : (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[200]}`, children: (0, jsx_runtime_1.jsx)(react_2.Input, { ref: filterInputRef, size: "sm", placeholder: "Type to filter...", value: filterText, onChange: (event) => {
                                             setFilterText(event.target.value);
                                             setActiveIndex(0);
-                                        }, "aria-label": "Filter options" }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { id: listboxId, ref: listRef, role: "listbox", "aria-multiselectable": props.isMulti || undefined, maxH: maxMenuHeight, overflowY: "auto", py: 1, sx: {
-                                        scrollbarWidth: "thin",
-                                        scrollbarColor: `${(_o = theme.colors.gray) === null || _o === void 0 ? void 0 : _o[300]} transparent`,
-                                        "&::-webkit-scrollbar": { width: "6px" },
-                                        "&::-webkit-scrollbar-thumb": {
-                                            background: (_p = theme.colors.gray) === null || _p === void 0 ? void 0 : _p[300],
-                                            borderRadius: "3px",
-                                        },
-                                    }, children: [filteredOptions.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, py: 2, fontSize: "0.8125rem", color: (_q = theme.colors.gray) === null || _q === void 0 ? void 0 : _q[500], children: "No Options" })), filteredOptions.map((option, index) => {
-                                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-                                            const isSelected = selectedIds.has(option.id.toString());
-                                            const isActive = index === activeIndex;
-                                            return ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: `${listboxId}-option-${index}`, "data-index": index, role: "option", "aria-selected": isSelected, "aria-disabled": option.isDisabled, onMouseEnter: () => setActiveIndex(index), onClick: () => handleSelect(option), mx: 1.5, px: 2.5, py: 1.5, borderRadius: "0.375rem", cursor: option.isDisabled ? "not-allowed" : "pointer", opacity: option.isDisabled ? 0.4 : 1, display: "flex", alignItems: "center", gap: 2, fontSize: "0.8125rem", fontWeight: isSelected && !props.isMulti ? 600 : 500, color: isSelected && !props.isMulti
-                                                    ? (_b = (_a = theme.colors.primary) === null || _a === void 0 ? void 0 : _a[700]) !== null && _b !== void 0 ? _b : (_c = theme.colors.primary) === null || _c === void 0 ? void 0 : _c[600]
-                                                    : (_e = (_d = theme.colors.text) === null || _d === void 0 ? void 0 : _d[700]) !== null && _e !== void 0 ? _e : (_f = theme.colors.gray) === null || _f === void 0 ? void 0 : _f[700], bg: isActive
-                                                    ? (_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 : (_k = theme.colors.gray) === null || _k === void 0 ? void 0 : _k[100]
-                                                    : "transparent", transition: "background 0.12s ease, color 0.12s ease", children: [props.isMulti ? ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1 })) : null, renderOption ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [option.icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, isTruncated: true, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, children: option.label }), option.description ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "block", fontSize: "0.75rem", fontWeight: 400, color: (_l = theme.colors.gray) === null || _l === void 0 ? void 0 : _l[500], isTruncated: true, children: option.description })) : null] })] }))] }, option.id));
+                                        }, "aria-activedescendant": activeDescendantId, "aria-label": "Filter options" }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { id: listboxId, ref: listRef, role: "listbox", "aria-multiselectable": props.isMulti || undefined, maxH: maxMenuHeight, overflowY: "auto", py: 1, sx: listScrollStyles, children: [filteredOptions.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, py: 2, fontSize: "0.8125rem", color: (_o = theme.colors.gray) === null || _o === void 0 ? void 0 : _o[500], children: "No Options" })), filteredOptions.map((option, index) => {
+                                            var _a;
+                                            return ((0, jsx_runtime_1.jsx)(OptionRow, { option: option, index: index, listboxId: listboxId, isSelected: selectedIds.has(option.id.toString()), isActive: index === activeIndex, isMulti: (_a = props.isMulti) !== null && _a !== void 0 ? _a : false, theme: theme, renderOption: renderOption, onSelect: handleSelect, onActivate: setActiveIndex }, option.id));
                                         })] })] }) })] }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
 }

package/dist/Components/SideBar/SecondaryBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SecondaryBar.d.ts","sourceRoot":"","sources":["../../../src/Components/SideBar/SecondaryBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAgBxC,OAAO,EAAa,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AA+K9D,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyH7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SecondaryBar.d.ts","sourceRoot":"","sources":["../../../src/Components/SideBar/SecondaryBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAgBxC,OAAO,EAAa,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAgM9D,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiI7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Components/SideBar/SecondaryBar.js

@@ -23,28 +23,36 @@ const parseBadge = (badge) => {
     });
 };
 const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const isDark = (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff");
     const activeAccent = (0, sidebarAccentColors_1.useSidebarActiveAccent)(theme.colors, isDark);
     const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { role: "group", py: "8px", mb: "2px", borderRadius: "7px", display: "flex", alignItems: "center", justifyContent: "center", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.primary[500] : "transparent", _hover: {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: (_c = item.url) !== null && _c !== void 0 ? _c : "#", "data-group": "", "aria-label": item.title, "aria-current": isActive ? "page" : undefined, "aria-disabled": item.disabled ? true : undefined, textDecoration: "none", py: "8px", mb: "2px", borderRadius: "7px", display: "flex", alignItems: "center", justifyContent: "center", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.primary[500] : "transparent", _hover: {
                         bg: item.disabled
                             ? "transparent"
                             : isActive
                                 ? "whiteAlpha.400"
                                 : "whiteAlpha.200",
-                    }, onClick: () => !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)), bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "1rem", color: isActive ? activeAccent.icon : "whiteAlpha.600", _groupHover: isActive ? undefined : { color: "whiteAlpha.800" }, transition: "color 0.12s" }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "0.5rem", bg: theme.colors.sidebar.background[200], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: "white", border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: "0.75rem", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
+                    }, onClick: (e) => {
+                        e.preventDefault();
+                        if (!item.disabled)
+                            onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
+                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "1rem", color: isActive ? activeAccent.icon : "whiteAlpha.600", _groupHover: isActive ? undefined : { color: "whiteAlpha.800" }, transition: "color 0.12s" }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "0.5rem", bg: theme.colors.sidebar.background[200], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: "white", border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: "0.75rem", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
 };
 const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const isDark = (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff");
     const activeAccent = (0, sidebarAccentColors_1.useSidebarActiveAccent)(theme.colors, isDark);
     const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "group", px: "8px", py: "7px", mb: "2px", borderRadius: "7px", align: "center", justify: "space-between", gap: "8px", overflow: "hidden", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, bg: isActive ? "whiteAlpha.300" : "transparent", _hover: {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "a", href: (_c = item.url) !== null && _c !== void 0 ? _c : "#", "data-group": "", "aria-current": isActive ? "page" : undefined, "aria-disabled": item.disabled ? true : undefined, textDecoration: "none", px: "8px", py: "7px", mb: "2px", borderRadius: "7px", align: "center", justify: "space-between", gap: "8px", overflow: "hidden", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, bg: isActive ? "whiteAlpha.300" : "transparent", _hover: {
             bg: item.disabled ? "transparent" : isActive ? "whiteAlpha.400" : "whiteAlpha.200",
-        }, onClick: () => !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)), borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.primary[500] : "transparent", transition: "background 0.12s", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "8px", flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "0.95rem", flexShrink: 0, color: isActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isActive ? undefined : { color: "white" }, transition: "color 0.12s" }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : "whiteAlpha.900", _groupHover: isActive ? undefined : { color: "white" }, as: "p", children: item.title }) })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }));
+        }, onClick: (e) => {
+            e.preventDefault();
+            if (!item.disabled)
+                onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
+        }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.primary[500] : "transparent", transition: "background 0.12s", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "8px", flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "0.95rem", flexShrink: 0, color: isActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isActive ? undefined : { color: "white" }, transition: "color 0.12s" }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : "whiteAlpha.900", _groupHover: isActive ? undefined : { color: "white" }, as: "p", children: item.title }) })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }));
 };
 const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = "0.75rem", itemFontSize = "0.75rem", selected, onItemClick, title, icon, }) => {
     var _a, _b;
@@ -53,7 +61,7 @@ const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3
     const activeAccent = (0, sidebarAccentColors_1.useSidebarActiveAccent)(theme.colors, isDark);
     const [collapsed, setCollapsed] = (0, react_1.useState)(defaultCollapsed);
     const width = collapsed ? collapsedWidth : expandedWidth;
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { transition: "all 0.3s", pos: "sticky", top: 0, h: "100vh", w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: "whiteAlpha.100", boxShadow: theme.shadows.md, zIndex: 1, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 0, h: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: Sidebar_1.HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: "whiteAlpha.100", flexShrink: 0, children: [!collapsed && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, fontSize: "0.95rem", color: activeAccent.icon, flexShrink: 0 })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: "whiteAlpha.900", as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { w: "20px", h: "20px", borderRadius: "5px", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.100" }, transition: "background 0.15s", children: collapsed ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 13, color: theme.colors.white, opacity: 0.6 }) })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 13, color: theme.colors.white, opacity: 0.6 })) })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: "secondary-scroll-container", flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", p: "8px 6px", children: items.map((item) => {
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: "all 0.3s", pos: "sticky", top: 0, h: "100vh", w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: "whiteAlpha.100", boxShadow: theme.shadows.md, zIndex: 1, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 0, h: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: Sidebar_1.HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: "whiteAlpha.100", flexShrink: 0, children: [!collapsed && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, fontSize: "0.95rem", color: activeAccent.icon, flexShrink: 0 })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: "whiteAlpha.900", as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": collapsed ? "Expand navigation panel" : "Collapse navigation panel", "aria-expanded": !collapsed, border: "none", bg: "transparent", w: "24px", h: "24px", borderRadius: "5px", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.100" }, transition: "background 0.15s", children: collapsed ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 13, color: theme.colors.white, opacity: 0.6 }) })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 13, color: theme.colors.white, opacity: 0.6 })) })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: "secondary-scroll-container", flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", p: "8px 6px", children: items.map((item) => {
                         var _a;
                         const isActive = String(selected) === String(item.id) ||
                             String(selected) === String(item.title);

package/dist/Components/SideBar/SideBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideBar.d.ts","sourceRoot":"","sources":["../../../src/Components/SideBar/SideBar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AAma3D,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,KAAK,EACL,UAAU,EACV,eAAe,EACf,uBAAuB,EACvB,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,eAAe,EACf,IAAI,EACJ,eAAuB,EACvB,aAAa,EACb,eAAe,EACf,qBAAqB,EACrB,SAAS,EACT,YAAY,EACZ,IAAW,EACX,SAAS,EACT,UAAkB,EAClB,aAAa,EACb,SAAiB,EACjB,iBAAiB,GAClB,EAAE,YAAY,2CAsRd"}
+{"version":3,"file":"SideBar.d.ts","sourceRoot":"","sources":["../../../src/Components/SideBar/SideBar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AA6a3D,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,KAAK,EACL,UAAU,EACV,eAAe,EACf,uBAAuB,EACvB,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,eAAe,EACf,IAAI,EACJ,eAAuB,EACvB,aAAa,EACb,eAAe,EACf,qBAAqB,EACrB,SAAS,EACT,YAAY,EACZ,IAAW,EACX,SAAS,EACT,UAAkB,EAClB,aAAa,EACb,SAAiB,EACjB,iBAAiB,GAClB,EAAE,YAAY,2CAsTd"}

package/dist/Components/SideBar/SideBar.js

@@ -19,18 +19,19 @@ const Z_PANEL = 1400;
 // expanded 13rem for comfortable touch targets, but below the old 16rem that was
 // too wide on phones. Still capped by `maxW: 88vw` on very small screens.
 const OVERLAY_WIDTH = "14.7rem";
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 const MenuItems_1 = __importDefault(require("./components/MenuItems"));
 const defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
 const OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
 const SecondaryBar_1 = __importDefault(require("./SecondaryBar"));
 const OtherApps_1 = __importDefault(require("./components/OtherApps"));
-const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading, onToggle, overlay, onClose, }) => {
+const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading, onToggle, overlay, onClose, closeButtonRef, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     if (isLoading) {
         return ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2, h: Sidebar_1.HEADER_HEIGHT, display: "flex", alignItems: "center", flexShrink: 0, children: toggle ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: 4, justifyContent: "center", w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "1.25rem", w: "60%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })] })) }));
     }
     const logoNode = logo ? ((0, jsx_runtime_1.jsx)(react_2.Image, { borderRadius: "md", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, "aria-label": toggle ? "Expand sidebar" : undefined })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.primary[500], color: (0, accentText_1.onFilled)(theme.colors.primary[500], theme.colors.white, theme.colors.black), borderRadius: "md", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, "aria-label": toggle ? "Expand sidebar" : undefined, children: (0, jsx_runtime_1.jsx)(defaultLogo_1.default, {}) }));
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "8px", px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: "whiteAlpha.100", minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", fontWeight: 600, fontSize: "12.5px", textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "10px", color: "whiteAlpha.500", lineHeight: "1.3", isTruncated: true, children: companySubtitle }))] })), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: overlay ? onClose : onToggle, "aria-label": overlay ? "Close menu" : "Collapse sidebar", w: "22px", h: "22px", borderRadius: "5px", bg: "whiteAlpha.100", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", children: overlay ? ((0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, color: theme.colors.white, opacity: 0.7 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 14, color: theme.colors.white, opacity: 0.6 })) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "8px", px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: "whiteAlpha.100", minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", fontWeight: 600, fontSize: "12.5px", textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "10px", color: "whiteAlpha.500", lineHeight: "1.3", isTruncated: true, children: companySubtitle }))] })), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", ref: closeButtonRef, onClick: overlay ? onClose : onToggle, "aria-label": overlay ? "Close menu" : "Collapse sidebar", w: "22px", h: "22px", borderRadius: "5px", bg: "whiteAlpha.100", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", children: overlay ? ((0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, color: theme.colors.white, opacity: 0.7 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 14, color: theme.colors.white, opacity: 0.6 })) }))] }));
 };
 const SkeletonMenuRow = ({ toggle }) => ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "100%", px: toggle ? 1 : 2, py: 2, children: toggle ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: 4, justifyContent: "center", children: (0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "24px", h: "24px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "18px", h: "18px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "0.875rem", w: "80%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })] })) }));
 const AddNewButton = ({ toggle, onClick, overlay }) => {
@@ -38,7 +39,7 @@ const AddNewButton = ({ toggle, onClick, overlay }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const isDark = (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff");
     const activeAccent = (0, sidebarAccentColors_1.useSidebarActiveAccent)(theme.colors, isDark);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "group", alignItems: "center", gap: "9px", px: "10px", py: overlay ? "11px" : "7px", borderRadius: "7px", cursor: "pointer", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.100" }, transition: "background 0.12s", onClick: onClick, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { w: "18px", h: "18px", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, color: activeAccent.icon }) }), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "12.5px", color: "whiteAlpha.900", fontWeight: "medium", children: "Add New" }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "data-group": "", "aria-label": "Add New", alignItems: "center", gap: "9px", px: "10px", py: overlay ? "11px" : "7px", borderRadius: "7px", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.100" }, transition: "background 0.12s", onClick: onClick, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { w: "18px", h: "18px", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, color: activeAccent.icon }) }), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "12.5px", color: "whiteAlpha.900", fontWeight: "medium", children: "Add New" }))] }));
 };
 const deriveInitials = (user) => {
     if (user.initials)
@@ -140,6 +141,36 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
         document.addEventListener("keydown", onKey);
         return () => document.removeEventListener("keydown", onKey);
     }, [isOverlayOpen, onMobileClose]);
+    // `role="dialog" aria-modal` only promises modality — focus has to be moved in and
+    // kept in, or Tab walks straight into the content behind the scrim.
+    const panelRef = (0, react_1.useRef)(null);
+    const closeButtonRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!isOverlayOpen)
+            return;
+        (_a = closeButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [isOverlayOpen]);
+    const trapTab = (e) => {
+        if (e.key !== "Tab" || !isOverlayOpen)
+            return;
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const stops = Array.from(panel.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => el.getAttribute("aria-hidden") !== "true");
+        if (stops.length === 0)
+            return;
+        const first = stops[0];
+        const last = stops[stops.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+        }
+        else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    };
     // Lock body scroll while the overlay is open.
     (0, react_1.useEffect)(() => {
         if (!isOverlayOpen)
@@ -192,7 +223,7 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
         : isOverlayOpen
             ? "translateX(0)"
             : "translateX(-100%)";
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: mobileNav ? "block" : { base: "block", lg: "none" }, position: "fixed", inset: 0, bg: "blackAlpha.600", zIndex: Z_SCRIM, opacity: isOverlayOpen ? 1 : 0, visibility: isOverlayOpen ? "visible" : "hidden", transition: "opacity 0.28s ease, visibility 0.28s ease", onClick: onMobileClose, "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: mobileNav ? "fixed" : { base: "fixed", lg: "sticky" }, top: 0, left: mobileNav ? 0 : { base: 0, lg: "auto" }, bottom: mobileNav ? 0 : { base: 0, lg: "auto" }, zIndex: mobileNav ? Z_PANEL : { base: Z_PANEL, lg: "auto" }, height: "100vh", maxW: mobileNav ? "88vw" : { base: "88vw", lg: "none" }, transform: mobileNav ? baseTransform : { base: baseTransform, lg: "none" }, transition: mobileNav
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: mobileNav ? "block" : { base: "block", lg: "none" }, position: "fixed", inset: 0, bg: "blackAlpha.600", zIndex: Z_SCRIM, opacity: isOverlayOpen ? 1 : 0, visibility: isOverlayOpen ? "visible" : "hidden", transition: "opacity 0.28s ease, visibility 0.28s ease", onClick: onMobileClose, "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: panelRef, onKeyDown: trapTab, position: mobileNav ? "fixed" : { base: "fixed", lg: "sticky" }, top: 0, left: mobileNav ? 0 : { base: 0, lg: "auto" }, bottom: mobileNav ? 0 : { base: 0, lg: "auto" }, zIndex: mobileNav ? Z_PANEL : { base: Z_PANEL, lg: "auto" }, height: "100vh", maxW: mobileNav ? "88vw" : { base: "88vw", lg: "none" }, transform: mobileNav ? baseTransform : { base: baseTransform, lg: "none" }, transition: mobileNav
                     ? dragging
                         ? "none"
                         : "transform 0.28s cubic-bezier(0.22, 1, 0.36, 1)"
@@ -201,7 +232,7 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
                             ? "none"
                             : "transform 0.28s cubic-bezier(0.22, 1, 0.36, 1)",
                         lg: "all 0.5s",
-                    }, borderRadius: 0, boxShadow: mobileNav ? "10px 0 40px rgba(0,0,0,0.45)" : { base: "10px 0 40px rgba(0,0,0,0.45)", lg: theme.shadows.lg }, display: "flex", background: theme.colors.sidebar.background[500], borderRight: "1px solid", borderColor: "whiteAlpha.100", role: overlay ? "dialog" : undefined, "aria-modal": overlay ? true : undefined, "aria-label": overlay ? "Main navigation" : undefined, ...(overlay && !mobileOpen ? { inert: "" } : {}), sx: { touchAction: overlay ? "pan-y" : "auto" }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { width: mobileNav ? OVERLAY_WIDTH : { base: OVERLAY_WIDTH, lg: toggle ? "4.688rem" : "13rem" }, transition: "width 0.5s ease", display: "flex", flexDirection: "column", justifyContent: "space-between", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { flexDir: "column", w: "100%", as: "nav", h: "100vh", children: [(0, jsx_runtime_1.jsx)(SidebarHeader, { logo: logo, companyName: companyName, companySubtitle: companySubtitle, toggle: effToggle, isLoading: isLoading, onToggle: changeToggle, overlay: overlay, onClose: onMobileClose }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: "sidebar-scroll-container", flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", p: "8px 6px", css: {
+                    }, borderRadius: 0, boxShadow: mobileNav ? "10px 0 40px rgba(0,0,0,0.45)" : { base: "10px 0 40px rgba(0,0,0,0.45)", lg: theme.shadows.lg }, display: "flex", background: theme.colors.sidebar.background[500], borderRight: "1px solid", borderColor: "whiteAlpha.100", role: overlay ? "dialog" : undefined, "aria-modal": overlay ? true : undefined, "aria-label": overlay ? "Main navigation" : undefined, ...(overlay && !mobileOpen ? { inert: "" } : {}), sx: { touchAction: overlay ? "pan-y" : "auto" }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { width: mobileNav ? OVERLAY_WIDTH : { base: OVERLAY_WIDTH, lg: toggle ? "4.688rem" : "13rem" }, transition: "width 0.5s ease", display: "flex", flexDirection: "column", justifyContent: "space-between", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { flexDir: "column", w: "100%", as: "nav", "aria-label": "Main navigation", h: "100vh", children: [(0, jsx_runtime_1.jsx)(SidebarHeader, { logo: logo, companyName: companyName, companySubtitle: companySubtitle, toggle: effToggle, isLoading: isLoading, onToggle: changeToggle, overlay: overlay, onClose: onMobileClose, closeButtonRef: closeButtonRef }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: "sidebar-scroll-container", flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", p: "8px 6px", css: {
                                         ...Sidebar_1.FlexCss,
                                         transition: "all 0.3s ease",
                                         // (a) larger touch targets for menu rows in overlay mode

package/dist/Components/SideBar/components/MenuItemBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemBox.d.ts","sourceRoot":"","sources":["../../../../src/Components/SideBar/components/MenuItemBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAS5C,UAAU,KAAK;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwShC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MenuItemBox.d.ts","sourceRoot":"","sources":["../../../../src/Components/SideBar/components/MenuItemBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAS5C,UAAU,KAAK;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAUD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6UhC,CAAC;AAEF,eAAe,WAAW,CAAC"}