gov-layout 1.2.13 → 1.2.15

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { createContext, useState, useEffect, useRef, useCallback, useContext } from 'react';
+import { createContext, useState, useEffect, useRef, useCallback, useContext, useId } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/sidebar/StaffSidebar.tsx
@@ -306,6 +306,12 @@ function TrashIcon({ size = 20, className, style } = {}) {
     /* @__PURE__ */ jsx("line", { x1: "14", y1: "11", x2: "14", y2: "17" })
   ] });
 }
+var safeCssEscape = (value) => {
+  if (typeof CSS !== "undefined" && CSS.escape) {
+    return CSS.escape(value);
+  }
+  return value.replace(/[^a-zA-Z0-9_-]/g, "_");
+};
 var ICON_MAP = {
   home: HomeIcon,
   dashboard: HomeIcon,
@@ -439,6 +445,7 @@ function MenuItemComponent({
   const [userToggled, setUserToggled] = useState(false);
   const [isOpen, setIsOpen] = useState(isChildActive);
   const expanded = userToggled ? isOpen : isOpen || isChildActive;
+  const btnId = useId();
   const handleClick = () => {
     if (hasChildren) {
       if (collapsed) {
@@ -457,17 +464,14 @@ function MenuItemComponent({
   const hoverBg = isDark ? "#334155" : "var(--color-foundations-fuji-pallet-light, #ebedf5)";
   if (collapsed && depth === 0) {
     return /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsx("style", { children: `@media(hover:hover){.sidebar-btn-${safeCssEscape(btnId)}:not([data-active='true']):hover{background-color:${hoverBg}!important}}` }),
       /* @__PURE__ */ jsx(
         "button",
         {
+          className: `sidebar-btn-${safeCssEscape(btnId)}`,
+          "data-active": isActive || isChildActive,
           onClick: handleClick,
           title: item.title,
-          onMouseEnter: (e) => {
-            if (!isActive) e.currentTarget.style.backgroundColor = hoverBg;
-          },
-          onMouseLeave: (e) => {
-            if (!isActive) e.currentTarget.style.backgroundColor = "transparent";
-          },
           style: {
             width: "100%",
             display: "flex",
@@ -479,7 +483,8 @@ function MenuItemComponent({
             background: isActive || isChildActive ? `color-mix(in srgb, ${activeColor} 10%, transparent)` : "transparent",
             color: isActive || isChildActive ? activeColor : isDark ? "#ffffff" : "var(--color-alias-text-colors-tertiary, #475272)",
             cursor: "pointer",
-            transition: "background-color 0.15s ease"
+            transition: "background-color 0.15s ease",
+            WebkitTapHighlightColor: "transparent"
           },
           children: /* @__PURE__ */ jsx("span", { style: {
             width: "24px",
@@ -498,48 +503,48 @@ function MenuItemComponent({
     ] });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: handleClick,
-        onMouseEnter: (e) => {
-          if (!isActive) e.currentTarget.style.backgroundColor = hoverBg;
-        },
-        onMouseLeave: (e) => {
-          if (!isActive) e.currentTarget.style.backgroundColor = "transparent";
-        },
-        style: {
-          width: "100%",
-          display: "flex",
-          alignItems: "center",
-          gap: "12px",
-          padding: depth > 0 ? "10px 16px 10px 52px" : "12px 16px",
-          borderRadius: "8px",
-          border: "none",
-          background: isActive ? `color-mix(in srgb, ${activeColor} 10%, transparent)` : "transparent",
-          color: isActive ? activeColor : isDark ? "#ffffff" : "var(--color-alias-text-colors-primary, #060d26)",
-          cursor: "pointer",
-          transition: "background-color 0.15s ease",
-          textAlign: "left",
-          fontSize: "15px",
-          fontWeight: isActive ? 600 : 400,
-          lineHeight: "22px"
-        },
-        children: [
-          /* @__PURE__ */ jsx("span", { style: {
-            width: "24px",
-            height: "24px",
+    /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsx("style", { children: `@media(hover:hover){.sidebar-btn-${safeCssEscape(btnId)}:not([data-active='true']):hover{background-color:${hoverBg}!important}}` }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: `sidebar-btn-${safeCssEscape(btnId)}`,
+          "data-active": isActive,
+          onClick: handleClick,
+          style: {
+            width: "100%",
             display: "flex",
             alignItems: "center",
-            justifyContent: "center",
-            flexShrink: 0,
-            color: isActive ? activeColor : isDark ? "#e2e8f0" : "var(--color-alias-text-colors-tertiary, #475272)"
-          }, children: resolvedIcon }),
-          /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: item.title }),
-          hasChildren && /* @__PURE__ */ jsx(ChevronDownIcon, { isOpen: expanded })
-        ]
-      }
-    ) }),
+            gap: "12px",
+            padding: depth > 0 ? "10px 16px 10px 52px" : "12px 16px",
+            borderRadius: "8px",
+            border: "none",
+            background: isActive ? `color-mix(in srgb, ${activeColor} 10%, transparent)` : "transparent",
+            color: isActive ? activeColor : isDark ? "#ffffff" : "var(--color-alias-text-colors-primary, #060d26)",
+            cursor: "pointer",
+            transition: "background-color 0.15s ease",
+            textAlign: "left",
+            fontSize: "15px",
+            fontWeight: isActive ? 600 : 400,
+            lineHeight: "22px",
+            WebkitTapHighlightColor: "transparent"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { style: {
+              width: "24px",
+              height: "24px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+              color: isActive ? activeColor : isDark ? "#e2e8f0" : "var(--color-alias-text-colors-tertiary, #475272)"
+            }, children: resolvedIcon }),
+            /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: item.title }),
+            hasChildren && /* @__PURE__ */ jsx(ChevronDownIcon, { isOpen: expanded })
+          ]
+        }
+      )
+    ] }),
     hasChildren && expanded && /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: item.children.map((child) => /* @__PURE__ */ jsx(
       MenuItemComponent,
       {
@@ -559,8 +564,7 @@ function MenuItemComponent({
 }
 function SidebarMenu({ menuItems, onItemClick, currentPath, collapsed, onExpandRequest }) {
   return /* @__PURE__ */ jsx("nav", { style: {
-    padding: collapsed ? "8px 8px" : "8px 12px",
-    overflowY: "auto"
+    padding: collapsed ? "8px 8px" : "8px 12px"
   }, children: /* @__PURE__ */ jsx("ul", { style: {
     listStyle: "none",
     margin: 0,
@@ -1039,39 +1043,38 @@ function StaffSidebar({
         ]
       }
     ),
-    collapsible && /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: handleToggle,
-        title: sidebarOpen ? "\u0E22\u0E48\u0E2D Sidebar" : "\u0E02\u0E22\u0E32\u0E22 Sidebar",
-        onMouseEnter: (e) => {
-          e.currentTarget.style.backgroundColor = isDark ? "#374151" : "#f3f4f6";
-        },
-        onMouseLeave: (e) => {
-          e.currentTarget.style.backgroundColor = isDark ? "#1e293b" : "#fff";
-        },
-        style: {
-          position: "fixed",
-          top: "10%",
-          left: currentWidth,
-          zIndex: 41,
-          width: "24px",
-          height: "40px",
-          borderRadius: "0 6px 6px 0",
-          border: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
-          borderLeft: "none",
-          background: isDark ? "#1e293b" : "#fff",
-          cursor: "pointer",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          boxShadow: isDark ? "2px 0 8px rgba(0,0,0,0.3)" : "2px 0 8px rgba(0,0,0,0.06)",
-          transition: "left 0.3s ease",
-          color: isDark ? "#ffffff" : "var(--color-alias-text-colors-tertiary, #475272)"
-        },
-        children: /* @__PURE__ */ jsx(ToggleIcon, { isOpen: sidebarOpen })
-      }
-    )
+    collapsible && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("style", { children: `@media(hover:hover){.sidebar-toggle-btn:hover{background-color:${isDark ? "#374151" : "#f3f4f6"}!important}}` }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "sidebar-toggle-btn",
+          onClick: handleToggle,
+          title: sidebarOpen ? "\u0E22\u0E48\u0E2D Sidebar" : "\u0E02\u0E22\u0E32\u0E22 Sidebar",
+          style: {
+            position: "fixed",
+            top: "10%",
+            left: currentWidth,
+            zIndex: 41,
+            width: "24px",
+            height: "40px",
+            borderRadius: "0 6px 6px 0",
+            border: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
+            borderLeft: "none",
+            background: isDark ? "#1e293b" : "#fff",
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            boxShadow: isDark ? "2px 0 8px rgba(0,0,0,0.3)" : "2px 0 8px rgba(0,0,0,0.06)",
+            transition: "left 0.3s ease",
+            color: isDark ? "#ffffff" : "var(--color-alias-text-colors-tertiary, #475272)",
+            WebkitTapHighlightColor: "transparent"
+          },
+          children: /* @__PURE__ */ jsx(ToggleIcon, { isOpen: sidebarOpen })
+        }
+      )
+    ] })
   ] });
 }
 function BellIcon2() {