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

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

@@ -1,63 +1,197 @@
+import type { ElementType } from "react";
+/** Footer identity block (UserFooter); avatar falls back to initials derived from name when absent. */
+export type SidebarUser = {
+    /** Display name; initials derive from it when `initials` is absent. */
+    name: string;
+    /** Muted line under the name. */
+    role?: string;
+    /** Avatar image; initials are shown when absent. */
+    avatarUrl?: string;
+    /** Overrides the initials derived from `name` when there is no avatar image. */
+    initials?: string;
+    /** Called when the footer identity block is pressed. */
+    onClick?: () => void;
+};
+/** Docked/collapsible left rail with its own responsive overlay — not NavigationBar (top bar) or WorkspaceWindow (floating panel). */
 export type SidebarProps = {
+    /** Rows in display order; items with a `group` get section labels and must be pre-sorted by it. */
     menus: MenuProps[];
-    activeMenu: string;
+    /** Matched against each menu's `title` first, then `id` — a title that collides with another menu's `id` wins silently. */
+    activeMenu: string | number;
+    /** Called with the menu when a row is chosen; in the overlay a leaf row also closes it. */
     handleMenuClick?: (menu: MenuProps) => void;
+    /** Called with the item chosen in the SecondaryBar flyout. */
     handleSecondaryNavClick?: (menu: MenuProps) => void;
+    /** True collapses the inline rail to icons; false shows it fully expanded. */
     toggle: boolean;
+    /** Called to flip `toggle`: by the header and footer collapse controls, and automatically when `autoCollapse` is on. */
     changeToggle: () => void;
+    /** Falls back to a rendered brand mark (DefaultLogo) tinted by primary color when omitted. */
     logo?: string;
+    /** Name shown beside the logo; hidden while the rail is collapsed. */
     companyName: string;
+    /** Muted line under `companyName`. */
+    companySubtitle?: string;
+    /** Footer identity block is omitted entirely (not just simplified) when this is not provided. */
+    user?: SidebarUser;
+    /** true hides the Add New row completely, rather than disabling it. */
     isDisableAddNew?: boolean;
+    /** Called when the Add New row is pressed. */
     onAddNewClick?: () => void;
+    /** @deprecated Dead — threaded down to MenuItemBox but never read there; no known consumer usage. */
     selectedSubMenu?: string | null;
+    /** Id or title of the highlighted item in the SecondaryBar flyout. */
     selectedSecondaryItem?: string | number | null;
+    /** Shows skeleton rows instead of MenuItems; header and footer render normally. */
     isLoading?: boolean;
+    /** Defaults to 15 when isLoading is true; ignored otherwise. */
     loadingLines?: number;
+    /** Not a direct render switch — on change it calls `changeToggle()` once; nothing collapses unless that updates `toggle`. */
     open?: boolean;
+    /** Legacy "Switch app" grid — AppSwitcher supersedes it; avoid wiring both into one shell. */
     otherApps?: OtherAppsProps['otherApps'];
+    /** Controls the overlay's visibility below `lg`; no effect once inline at `lg`+. Wire to NavigationBar's `onSideBarToggole`. */
+    mobileOpen?: boolean;
+    /** Called when the overlay is dismissed (backdrop click, Esc, close button, or swipe). */
+    onMobileClose?: () => void;
+    /** Forces overlay presentation at any width — a layout switch, not a close; never hides navigation. */
+    mobileNav?: boolean;
+    /** Backs the footer Hide/Show control; render it only when this is provided. */
+    onToggleMobileNav?: () => void;
+    /** Shows the sidebar without pinning — closes on pointer-leave. Wire to NavigationBar's `onSideBarPeek`. */
+    peekOpen?: boolean;
+    /** Called when the pointer leaves a peeked overlay, so the host can clear `peekOpen`. */
+    onPeekEnd?: () => void;
+    /** Rendered above `menus` under a `pinnedLabel` heading; the whole block is omitted when empty. */
+    pinnedItems?: SidebarPinnedItem[];
+    /** Heading above the pinned block; defaults to "Pinned". */
+    pinnedLabel?: string;
+    /** Shows an unpin button on row hover/focus (always visible in the overlay); omit for read-only rows. */
+    onUnpin?: (item: SidebarPinnedItem) => void;
+    /** Matched against pinned ids for the active state; while it matches, the same id in `menus` is not highlighted. */
+    activePinnedId?: string | number | null;
+    /** Rows shown before the rest collapse behind a "Show N more" row; defaults to 5. */
+    pinnedLimit?: number;
+    /** Overrides for the pinned block's strings; `{count}` and `{title}` are substituted. */
+    pinnedLabels?: SidebarPinnedLabels;
+    /** Inline (`lg`+) collapse/expand animation; defaults to `{ speed: "base" }` (200ms). Overlay slide is unaffected. */
+    collapseTransition?: SidebarCollapseTransition;
+    /** Defaults to true: a menu with `secondaryItems` (and the `open` prop) call `changeToggle` for you. False: `toggle` alone decides. */
+    autoCollapse?: boolean;
+};
+/** One pinned shortcut row; the same fields as a menu item, minus the lock/disabled/submenu states. */
+export type SidebarPinnedItem = Pick<MenuProps, "id" | "title" | "icon" | "url" | "badge">;
+/** Strings for the pinned block; every key is optional and falls back to English. */
+export type SidebarPinnedLabels = {
+    /** Default "Show {count} more". */
+    showMore?: string;
+    /** Default "Show less". */
+    showLess?: string;
+    /** Default "Unpin {title}". */
+    unpin?: string;
+};
+/** `"none"` is instant; otherwise `speed` picks 150/200/260ms and `animateShadow` (default true) toggles the panel shadow. */
+export type SidebarCollapseTransition = "none" | {
+    /** Duration of the inline collapse: "fast" 150ms, "base" 200ms, "slow" 260ms. */
+    speed?: "fast" | "base" | "slow";
+    /** Animates the panel shadow along with the width; defaults to true. */
+    animateShadow?: boolean;
 };
+/** One nav item; `subMenu` renders inline (expand/collapse), `secondaryItems` opens a separate SecondaryBar instead. */
 export type MenuProps = {
+    /** Unique key; `SidebarProps.activeMenu` matches it after `title`. */
     id: string | number;
+    /** Row text, truncated with a tooltip when too long; `SidebarProps.activeMenu` matches it first. */
     title: string;
-    icon: any;
+    /** Icon component (not an element) drawn at the start of the row. */
+    icon?: ElementType;
+    /** Ignored when subMenu is non-empty — the row becomes a toggle button instead of a link. */
     url: string;
+    /** Blocks the click handler and dims the row; wins over `disabled` when both are set. */
+    isDisabled?: boolean;
+    /** @deprecated Use `isDisabled` — renamed to match every other field. */
     disabled?: boolean;
+    /** Blocks the click handler/submenu expand and dims the row, same as `isDisabled`; also shows a lock icon. */
     locked?: boolean;
+    /** Shown as a tooltip on hover/focus of a `locked` row (rail row, submenu row, and both flyouts). Ignored unless `locked` is true. */
+    lockedReason?: string;
+    /** Runtime also accepts a bare number/string (legacy shorthand) though the type only declares the object shape. */
     badge?: {
+        /** Also triggers the small red dot on the icon when the rail is collapsed. */
         count?: number;
+        /** Chakra colorScheme name; defaults to "teal". */
         color?: string;
+        /** Chakra borderRadius value; defaults to "full". */
         radius?: string | number;
+        /** Chakra Badge variant; defaults to "subtle". */
         variant?: string;
     };
+    /** Nested rows shown inline when this row is expanded; non-empty turns the row into a toggle. */
     subMenu?: MenuProps[];
+    /** Non-empty on the active menu auto-collapses the main rail and renders a SecondaryBar, regardless of the `toggle` prop. On drawer viewports up to 23.3em (about 373px) it starts as the icon strip. */
     secondaryItems?: MenuProps[];
+    /** First item with a new value renders a section label plus divider; items must be pre-sorted by group. */
+    group?: string;
 };
+/** Props for the internal MenuItems renderer — a narrowed slice of SidebarProps. */
 export type RenderMenuType = {
+    /** Rows to render, in order. */
     menus: MenuProps[];
-    activeMenu: string;
+    /** Matched against each menu's `title`, then `id`, to mark the active row. */
+    activeMenu: string | number;
+    /** Called with the menu when a row is chosen. */
     handleMenuClick: (menu: MenuProps) => void;
+    /** True renders the collapsed icon rail. */
     toggle: boolean;
+    /** Carried over from the unused `SidebarProps.selectedSubMenu`; not read. */
     selectedSubMenu?: string | null;
+    /** Id or title of the highlighted SecondaryBar item. */
     selectedSecondaryItem?: string | number | null;
+    /** @deprecated Dead — the drawer uses the docked row metrics; nothing reads it. */
+    overlay?: boolean;
+    /** The scroll container's own id, read back by the auto-scroll-into-view effect. */
+    containerId: string;
 };
+/** Secondary flyout panel props; `defaultCollapsed` only seeds initial state, then the panel self-manages it. */
 export type SecondaryBarProps = {
+    /** Flyout entries in order. */
     items?: MenuProps[];
+    /** Defaults to true (collapsed) when omitted. */
     defaultCollapsed?: boolean;
+    /** Defaults to "3.5rem". */
     collapsedWidth?: string | number;
+    /** Defaults to "10rem". */
     expandedWidth?: string | number;
+    /** Lets the panel narrow down to `collapsedWidth` inside a width-capped parent such as the mobile drawer, instead of overflowing it. */
+    shrinkable?: boolean;
+    /** Drill-down title size. Defaults to the shared sidebar row size (13px). */
     headerFontSize?: string;
+    /** Row label size. Defaults to the shared sidebar row size (13px). */
     itemFontSize?: string;
+    /** Matched by string equality against either the item's id or title, whichever matches. */
     selected?: string | number | null;
+    /** Called with the item chosen; skipped for locked or disabled items. */
     onItemClick?: (item: MenuProps) => void;
+    /** Also used as the collapsed-state tooltip label. */
     title?: string;
+    /** Shown only in the expanded header — hidden entirely while collapsed. */
+    icon?: ElementType;
 };
+/** "Switch app" footer grid; becomes hover popovers when the sidebar is collapsed. */
 export type OtherAppsProps = {
+    /** True when the sidebar is collapsed; apps then show as hover popovers. */
     toggle: boolean;
+    /** Apps to list; renders nothing when empty. */
     otherApps: {
+        /** Used as the React list key — must be unique among otherApps entries. */
         name: string;
+        /** Fills the fallback dot (no icon) and its glow — ignored when `icon` is provided. */
         color: string;
+        /** Shown only in the collapsed-state hover flyout, never in the expanded grid cell. */
         description?: string;
+        /** Called when the app is pressed. */
         onClick: () => void;
+        /** A pre-rendered ReactNode, unlike MenuProps.icon (a component reference). */
         icon?: React.ReactNode;
     }[];
 };

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

@@ -9,5 +9,11 @@ interface Props {
     isOpen?: boolean;
     onToggle?: (menu: MenuProps, clickY?: number) => void;
 }
-declare const MenuItemBox: React.FC<Props>;
-export default MenuItemBox;
+/**
+ * These rows are real `<a href>`s now, so the browser's own gestures have to keep working —
+ * cmd/ctrl-click for a new tab, shift for a window, middle-click. Only a plain left click is
+ * routed through the in-app handler.
+ */
+export declare const isBrowserNavigationGesture: (e: React.MouseEvent) => boolean;
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/dist/Components/SideBar/components/MenuItemBox.js

@@ -1,122 +1,204 @@
 "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;
+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 __assign.apply(this, arguments);
-};
+    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 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var MenuPopoverContent_1 = __importDefault(require("./MenuPopoverContent"));
-var lucide_react_1 = require("lucide-react");
-var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-var TextTruncation_1 = __importDefault(require("./TextTruncation"));
-var MenuItemBox = function (_a) {
-    var _b, _c, _d, _e;
-    var menu = _a.menu, activeMenu = _a.activeMenu, toggle = _a.toggle, handleClick = _a.handleClick, isOpen = _a.isOpen, onToggle = _a.onToggle;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var title = menu.title, icon = menu.icon, disabled = menu.disabled, locked = menu.locked, badge = menu.badge, subMenu = menu.subMenu;
-    var hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
-    var isBadgeObj = typeof badge === "object" && badge !== null;
-    var badgeValue = isBadgeObj ? badge.count : badge;
-    var hasSubmenuBadge = (_b = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some(function (sub) {
-        var isObj = typeof sub.badge === "object" && sub.badge !== null;
-        var value = isObj ? sub.badge.count : sub.badge;
+exports.isBrowserNavigationGesture = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_2 = require("@chakra-ui/react");
+const MenuPopoverContent_1 = __importDefault(require("./MenuPopoverContent"));
+const menuDisabled_1 = require("../menuDisabled");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const states_1 = require("../../../Theme/tokens/primitives/states");
+const sidebarAccentColors_1 = require("../sidebarAccentColors");
+const tone_1 = require("../../../Theme/tokens/builders/tone");
+const sidebarAccent_1 = require("../../../Theme/tokens/builders/sidebarAccent");
+const zIndices_1 = __importDefault(require("../../../Theme/tokens/primitives/zIndices"));
+const paletteFromTheme_1 = require("../../../Theme/chakra/paletteFromTheme");
+const TextTruncation_1 = __importDefault(require("./TextTruncation"));
+const sidebarId_1 = require("../sidebarId");
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const sidebarFocus_1 = require("../sidebarFocus");
+const sidebarScale_1 = require("../sidebarScale");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const sidebarMotion_1 = require("../sidebarMotion");
+const SUBMENU_REVEAL_TRANSITION = (0, motion_1.transitionFor)(["opacity", "transform"], "base");
+/**
+ * These rows are real `<a href>`s now, so the browser's own gestures have to keep working —
+ * cmd/ctrl-click for a new tab, shift for a window, middle-click. Only a plain left click is
+ * routed through the in-app handler.
+ */
+const isBrowserNavigationGesture = (e) => e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0;
+exports.isBrowserNavigationGesture = isBrowserNavigationGesture;
+const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle, }) => {
+    var _a, _b, _c, _d, _e;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
+    // Never the raw label — keeps this id unique across multiple mounted SideBars too.
+    const reactId = (0, sidebarId_1.sanitizeId)((0, react_1.useId)());
+    const { title, icon, locked, lockedReason, badge, subMenu, url } = menu;
+    // `locked` blocks interaction the same as `disabled` — a locked item showing the padlock icon
+    // but still fully clickable was a real gotcha (see COMPONENT-GOTCHAS.md).
+    const isBlocked = (0, menuDisabled_1.menuDisabled)(menu) || locked;
+    const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
+    const submenuPanelId = `submenu-${reactId}`;
+    // A submenu parent only expands, so it is a button; every other row navigates.
+    // Cast: Chakra narrows `as` unions to their *shared* props, which drops `href`.
+    const rowAs = (hasSubMenu ? "button" : "a");
+    const badgeConfig = typeof badge === "object" && badge !== null ? badge : null;
+    const badgeValue = (_a = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.count) !== null && _a !== void 0 ? _a : (typeof badge !== "object" ? badge : undefined);
+    const hasSubmenuBadge = (_b = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some((sub) => {
+        var _a;
+        const subCfg = typeof sub.badge === "object" && sub.badge !== null
+            ? sub.badge
+            : null;
+        const value = (_a = subCfg === null || subCfg === void 0 ? void 0 : subCfg.count) !== null && _a !== void 0 ? _a : (typeof sub.badge !== "object" ? sub.badge : undefined);
         return value != null;
     })) !== null && _b !== void 0 ? _b : false;
-    var isChildActive = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some(function (sub) { return sub.id === activeMenu; });
-    var isParentActive = activeMenu === menu.id;
-    var isAnyActive = isParentActive || isChildActive;
-    var handleToggleSubMenu = function (e) {
-        if (!disabled && hasSubMenu) {
+    const isChildActive = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some((sub) => sub.id === activeMenu);
+    const isParentActive = activeMenu === menu.id;
+    const isAnyActive = isParentActive || isChildActive;
+    const handleToggleSubMenu = (e) => {
+        if (!isBlocked && hasSubMenu) {
             onToggle === null || onToggle === void 0 ? void 0 : onToggle(menu, e === null || e === void 0 ? void 0 : e.clientY);
             return;
         }
-        if (!disabled)
+        if (!isBlocked)
             handleClick === null || handleClick === void 0 ? void 0 : handleClick(menu);
     };
-    var commonStyles = {
+    // Pill-style nav item. The fill is a white overlay, not a brand tint: the sidebar is a
+    // near-black surface in BOTH modes, and a `primary.opacity` tint of a dark accent on it is
+    // imperceptible for most brands (measured 1.03-1.15 idle->hover) and exactly 1.000 for zinc
+    // light, whose primary[500] IS the sidebar colour. Brand identity stays in the accent bar
+    // and icon below. See interactionStates.test.ts.
+    const commonStyles = {
+        // `data-group` rather than `role="group"`: Chakra's `_groupHover` accepts either.
+        "data-group": "",
+        display: "flex",
+        alignItems: "center",
+        textAlign: "left",
+        textDecoration: "none",
         w: "100%",
-        px: "1.5rem",
-        py: "0.75rem",
-        fontWeight: "medium",
-        backgroundColor: isAnyActive ? theme.colors.primary[500] : "transparent",
-        color: disabled ? "gray.400" : theme.colors.white,
-        _hover: disabled
+        h: sidebarScale_1.SIDEBAR_ROW.height,
+        borderRadius: "lg",
+        px: "10px",
+        fontWeight: 500,
+        border: "none",
+        borderLeft: "2px solid",
+        borderLeftColor: isAnyActive ? theme.colors.sidebar.activeIcon : "transparent",
+        backgroundColor: isAnyActive ? "whiteAlpha.300" : "transparent",
+        color: theme.colors.sidebar.mutedIcon,
+        _hover: isBlocked
             ? {}
             : {
-                backgroundColor: theme.colors.primary[700],
+                backgroundColor: isAnyActive ? "whiteAlpha.400" : "whiteAlpha.200",
             },
-        pl: toggle ? "1.6875rem" : undefined,
-        cursor: disabled ? "not-allowed" : "pointer",
-        opacity: disabled ? 0.6 : 1,
+        cursor: isBlocked ? "not-allowed" : "pointer",
+        opacity: isBlocked ? states_1.DISABLED_OPACITY : 1,
+        transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION,
+        sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors),
     };
-    var buttonContent = (react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.625rem", justify: "space-between" },
-        react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.625rem", overflow: "hidden" },
-            react_1.default.createElement(react_2.Box, { position: "relative" },
-                react_1.default.createElement(react_2.Icon, { as: icon, fontSize: "1.25rem", verticalAlign: "middle", color: disabled ? theme.colors.gray[400] : theme.colors.white }),
-                toggle && (badgeValue != null || hasSubmenuBadge) && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))),
-            !toggle && (react_1.default.createElement(TextTruncation_1.default, { open: isOpen, fontSize: "1rem", lineHeight: "1", flex: "1" }, title))),
-        !toggle && (react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.375rem" },
-            (function () {
-                var _a, _b, _c;
-                var value = badgeValue;
-                var colorScheme = (_a = (isBadgeObj ? badge.color : undefined)) !== null && _a !== void 0 ? _a : "teal";
-                var radius = (_b = (isBadgeObj ? badge.radius : undefined)) !== null && _b !== void 0 ? _b : "full";
-                var variant = (_c = (isBadgeObj ? badge.variant : undefined)) !== null && _c !== void 0 ? _c : "subtle";
-                return value != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, value)) : null;
-            })(),
-            locked && react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" }),
-            hasSubMenu && (react_1.default.createElement(react_2.Icon, { as: isOpen ? lucide_react_1.ChevronDown : lucide_react_1.ChevronRight, fontSize: "1rem", onClick: function (e) {
-                    e.stopPropagation();
-                    handleToggleSubMenu(e);
-                } }))))));
+    const buttonContent = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", 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: icon, fontSize: "md", verticalAlign: "middle", color: isAnyActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isAnyActive ? undefined : { color: theme.colors.white }, transition: sidebarMotion_1.SIDEBAR_INK_TRANSITION }), toggle && (badgeValue != null || hasSubmenuBadge) && ((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.sidebar.semanticText.error }))] }), !toggle && ((0, jsx_runtime_1.jsx)(TextTruncation_1.default
+                    // open={isOpen}
+                    , { 
+                        // open={isOpen}
+                        fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, lineHeight: "1", flex: "1", color: isAnyActive ? activeAccent.label : theme.colors.white, fontWeight: isAnyActive ? 600 : 500, _groupHover: isAnyActive ? undefined : { color: theme.colors.white }, children: title }))] }), !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.375rem", children: [(() => {
+                        var _a, _b, _c;
+                        const value = badgeValue;
+                        if (value == null)
+                            return null;
+                        const colorScheme = (_a = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.color) !== null && _a !== void 0 ? _a : "teal";
+                        const radius = (_b = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.radius) !== null && _b !== void 0 ? _b : "full";
+                        const variant = (_c = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.variant) !== null && _c !== void 0 ? _c : "subtle";
+                        const tone = (0, tone_1.resolveSoftTone)(theme.colors, (0, paletteFromTheme_1.scaleFor)(theme.colors, colorScheme), (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.background[500]));
+                        return ((0, jsx_runtime_1.jsx)(react_2.Badge, { bg: tone.bg, color: tone.fg, fontSize: "xs", variant: variant, borderRadius: radius, children: value }));
+                    })(), locked && (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }), hasSubMenu && ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: isOpen ? lucide_react_1.ChevronDown : lucide_react_1.ChevronRight, fontSize: "md", color: theme.colors.sidebar.mutedIcon }))] }))] }));
     if (toggle) {
         // Collapsed sidebar: show Popover
-        return (react_1.default.createElement(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true },
-            react_1.default.createElement(react_2.PopoverTrigger, null,
-                react_1.default.createElement(react_2.Box, __assign({}, commonStyles, { onClick: function (e) { return handleToggleSubMenu(e); }, "data-menu-id": String((_c = menu.id) !== null && _c !== void 0 ? _c : title) }), buttonContent)),
-            react_1.default.createElement(react_2.Portal, null,
-                react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.063rem", bg: theme.colors.primary[isAnyActive ? 500 : 700], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: 'none', cursor: disabled ? "not-allowed" : "pointer", zIndex: 1500 },
-                    react_1.default.createElement(react_2.PopoverBody, { p: "0.625rem", color: "white" },
-                        react_1.default.createElement(MenuPopoverContent_1.default, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }))))));
+        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, { ...commonStyles, as: rowAs, type: hasSubMenu ? "button" : undefined, href: hasSubMenu ? undefined : url !== null && url !== void 0 ? url : "#", "aria-label": title, "aria-current": isAnyActive ? "page" : undefined, "aria-disabled": isBlocked ? true : undefined, onClick: (e) => {
+                            if (!hasSubMenu && url && (0, exports.isBrowserNavigationGesture)(e))
+                                return;
+                            e.preventDefault();
+                            handleToggleSubMenu(e);
+                        }, "data-menu-id": String((_c = menu.id) !== null && _c !== void 0 ? _c : title), children: buttonContent }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: 'none', cursor: isBlocked ? "not-allowed" : "pointer", zIndex: zIndices_1.default.popover, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: "0.625rem", color: theme.colors.white, children: (0, jsx_runtime_1.jsx)(MenuPopoverContent_1.default, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }) }) }) })] }));
     }
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_2.Box, __assign({}, commonStyles, { onClick: function (e) { return handleToggleSubMenu(e); }, "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title) }), buttonContent),
-        hasSubMenu && (react_1.default.createElement(react_2.Collapse, { in: isOpen, animateOpacity: true },
-            react_1.default.createElement(react_2.Box, { "data-collapse": "true", "data-menu-id": String((_e = menu.id) !== null && _e !== void 0 ? _e : title), "data-open": isOpen ? "true" : "false", sx: {
-                    transition: "opacity 0.28s ease, transform 0.28s ease",
-                    opacity: isOpen ? 1 : 0,
-                    transform: isOpen ? "translateY(0)" : "translateY(-6px)",
-                } }, subMenu.map(function (sub, sIdx) {
-                var _a, _b;
-                var isSubActive = activeMenu === sub.id;
-                return (react_1.default.createElement(react_2.Box, { key: "".concat(String((_b = (_a = sub.id) !== null && _a !== void 0 ? _a : sub.title) !== null && _b !== void 0 ? _b : sIdx), "-").concat(sIdx), py: "0.5rem", px: "1.25rem", pl: "3.3rem", fontSize: "0.875rem", backgroundColor: isAnyActive ? theme.colors.primary[500] : "transparent", borderLeft: isSubActive
-                        ? "0.188rem solid ".concat(theme.colors.background[300])
-                        : "0.188rem solid transparent", _hover: {
-                        backgroundColor: theme.colors.primary[700],
-                    }, opacity: sub.disabled ? 0.6 : 1, cursor: sub.disabled ? "not-allowed" : "pointer", pointerEvents: sub.disabled ? "none" : "auto", onClick: function () { return !sub.disabled && (handleClick === null || handleClick === void 0 ? void 0 : handleClick(sub)); }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: "0.5rem", color: theme.colors.white },
-                    react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", overflow: "auto" },
-                        react_1.default.createElement(react_2.Icon, { as: sub.icon, fontSize: "1rem", verticalAlign: "middle" }),
-                        react_1.default.createElement(TextTruncation_1.default, { fontSize: "0.875rem", fontWeight: "medium", lineHeight: "1", open: isOpen }, sub.title)),
-                    sub.locked ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" })) : (function () {
+    const row = ((0, jsx_runtime_1.jsx)(react_2.Box, { ...commonStyles, as: rowAs, type: hasSubMenu ? "button" : undefined, href: hasSubMenu ? undefined : url !== null && url !== void 0 ? url : "#", "aria-expanded": hasSubMenu ? !!isOpen : undefined, "aria-controls": hasSubMenu ? submenuPanelId : undefined, "aria-current": isAnyActive ? "page" : undefined, "aria-disabled": isBlocked ? true : undefined, onClick: (e) => {
+            if (!hasSubMenu && url && (0, exports.isBrowserNavigationGesture)(e))
+                return;
+            e.preventDefault();
+            handleToggleSubMenu(e);
+        }, "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title), children: buttonContent }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [locked && lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: lockedReason, placement: "top", children: row })) : (row), hasSubMenu && ((0, jsx_runtime_1.jsx)(react_2.Collapse, { in: isOpen, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_2.Box, { id: submenuPanelId, "data-collapse": "true", "data-menu-id": String((_e = menu.id) !== null && _e !== void 0 ? _e : title), "data-open": isOpen ? "true" : "false", mt: "0.125rem", sx: {
+                        transition: SUBMENU_REVEAL_TRANSITION,
+                        opacity: isOpen ? 1 : 0,
+                        transform: isOpen ? "translateY(0)" : "translateY(-6px)",
+                    }, children: subMenu.map((sub, sIdx) => {
                         var _a, _b, _c;
-                        var isObj = typeof sub.badge === "object" && sub.badge !== null;
-                        var value = isObj ? sub.badge.count : sub.badge;
-                        var colorScheme = (_a = (isObj ? sub.badge.color : undefined)) !== null && _a !== void 0 ? _a : "teal";
-                        var radius = (_b = (isObj ? sub.badge.radius : undefined)) !== null && _b !== void 0 ? _b : "full";
-                        var variant = (_c = (isObj ? sub.badge.variant : undefined)) !== null && _c !== void 0 ? _c : "subtle";
-                        return value != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, value)) : null;
-                    })()));
-            }))))));
+                        const isSubActive = activeMenu === sub.id;
+                        const isSubBlocked = (0, menuDisabled_1.menuDisabled)(sub) || sub.locked;
+                        const subKey = `${String((_b = (_a = sub.id) !== null && _a !== void 0 ? _a : sub.title) !== null && _b !== void 0 ? _b : sIdx)}-${sIdx}`;
+                        const subRow = ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "a", href: (_c = sub.url) !== null && _c !== void 0 ? _c : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": isSubBlocked ? true : undefined, textDecoration: "none", h: sidebarScale_1.SIDEBAR_ROW.subHeight, pl: "28px", pr: "10px", borderRadius: "lg", fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.sidebar.activeIcon : "transparent", backgroundColor: isSubActive ? "whiteAlpha.300" : "transparent", _hover: {
+                                backgroundColor: isSubBlocked
+                                    ? "transparent"
+                                    : isSubActive
+                                        ? "whiteAlpha.400"
+                                        : "whiteAlpha.200",
+                            }, opacity: isSubBlocked ? states_1.DISABLED_OPACITY : 1, cursor: isSubBlocked ? "not-allowed" : "pointer", pointerEvents: isSubBlocked ? "none" : "auto", onClick: (e) => {
+                                if (sub.url && (0, exports.isBrowserNavigationGesture)(e))
+                                    return;
+                                e.preventDefault();
+                                if (!isSubBlocked)
+                                    handleClick === null || handleClick === void 0 ? void 0 : handleClick(sub);
+                            }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: sub.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: sidebarMotion_1.SIDEBAR_INK_TRANSITION })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION })), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, lineHeight: "1", color: isSubActive ? activeAccent.label : theme.colors.sidebar.mutedLabel, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })) : (() => {
+                                    var _a, _b, _c, _d;
+                                    const subCfg = typeof sub.badge === "object" && sub.badge !== null
+                                        ? sub.badge
+                                        : null;
+                                    const value = (_a = subCfg === null || subCfg === void 0 ? void 0 : subCfg.count) !== null && _a !== void 0 ? _a : (typeof sub.badge !== "object" ? sub.badge : undefined);
+                                    if (value == null)
+                                        return null;
+                                    const colorScheme = (_b = subCfg === null || subCfg === void 0 ? void 0 : subCfg.color) !== null && _b !== void 0 ? _b : "teal";
+                                    const radius = (_c = subCfg === null || subCfg === void 0 ? void 0 : subCfg.radius) !== null && _c !== void 0 ? _c : "full";
+                                    const variant = (_d = subCfg === null || subCfg === void 0 ? void 0 : subCfg.variant) !== null && _d !== void 0 ? _d : "subtle";
+                                    const tone = (0, tone_1.resolveSoftTone)(theme.colors, (0, paletteFromTheme_1.scaleFor)(theme.colors, colorScheme), (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.background[500]));
+                                    return ((0, jsx_runtime_1.jsx)(react_2.Badge, { bg: tone.bg, color: tone.fg, fontSize: "xs", variant: variant, borderRadius: radius, children: value }));
+                                })()] }));
+                        return sub.locked && sub.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: sub.lockedReason, placement: "top", children: subRow }, subKey)) : ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: subRow }, subKey));
+                    }) }) }))] }));
 };
-exports.default = MenuItemBox;
+exports.default = react_1.default.memo(MenuItemBox);

package/dist/Components/SideBar/components/MenuItems.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { RenderMenuType } from "../SideBarProps";
-declare const MenuItems: React.FC<RenderMenuType>;
-export default MenuItems;
+declare const _default: React.NamedExoticComponent<RenderMenuType>;
+export default _default;