gov-layout 1.2.13 → 1.2.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +85 -82
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +86 -83
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -308,6 +308,12 @@ function TrashIcon({ size = 20, className, style } = {}) {
308
308
  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "14", y1: "11", x2: "14", y2: "17" })
309
309
  ] });
310
310
  }
311
+ var safeCssEscape = (value) => {
312
+ if (typeof CSS !== "undefined" && CSS.escape) {
313
+ return CSS.escape(value);
314
+ }
315
+ return value.replace(/[^a-zA-Z0-9_-]/g, "_");
316
+ };
311
317
  var ICON_MAP = {
312
318
  home: HomeIcon,
313
319
  dashboard: HomeIcon,
@@ -441,6 +447,7 @@ function MenuItemComponent({
441
447
  const [userToggled, setUserToggled] = react.useState(false);
442
448
  const [isOpen, setIsOpen] = react.useState(isChildActive);
443
449
  const expanded = userToggled ? isOpen : isOpen || isChildActive;
450
+ const btnId = react.useId();
444
451
  const handleClick = () => {
445
452
  if (hasChildren) {
446
453
  if (collapsed) {
@@ -459,17 +466,14 @@ function MenuItemComponent({
459
466
  const hoverBg = isDark ? "#334155" : "var(--color-foundations-fuji-pallet-light, #ebedf5)";
460
467
  if (collapsed && depth === 0) {
461
468
  return /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
469
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@media(hover:hover){.sidebar-btn-${safeCssEscape(btnId)}:not([data-active='true']):hover{background-color:${hoverBg}!important}}` }),
462
470
  /* @__PURE__ */ jsxRuntime.jsx(
463
471
  "button",
464
472
  {
473
+ className: `sidebar-btn-${safeCssEscape(btnId)}`,
474
+ "data-active": isActive || isChildActive,
465
475
  onClick: handleClick,
466
476
  title: item.title,
467
- onMouseEnter: (e) => {
468
- if (!isActive) e.currentTarget.style.backgroundColor = hoverBg;
469
- },
470
- onMouseLeave: (e) => {
471
- if (!isActive) e.currentTarget.style.backgroundColor = "transparent";
472
- },
473
477
  style: {
474
478
  width: "100%",
475
479
  display: "flex",
@@ -481,7 +485,8 @@ function MenuItemComponent({
481
485
  background: isActive || isChildActive ? `color-mix(in srgb, ${activeColor} 10%, transparent)` : "transparent",
482
486
  color: isActive || isChildActive ? activeColor : isDark ? "#ffffff" : "var(--color-alias-text-colors-tertiary, #475272)",
483
487
  cursor: "pointer",
484
- transition: "background-color 0.15s ease"
488
+ transition: "background-color 0.15s ease",
489
+ WebkitTapHighlightColor: "transparent"
485
490
  },
486
491
  children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
487
492
  width: "24px",
@@ -500,48 +505,48 @@ function MenuItemComponent({
500
505
  ] });
501
506
  }
502
507
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
503
- /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
504
- "button",
505
- {
506
- onClick: handleClick,
507
- onMouseEnter: (e) => {
508
- if (!isActive) e.currentTarget.style.backgroundColor = hoverBg;
509
- },
510
- onMouseLeave: (e) => {
511
- if (!isActive) e.currentTarget.style.backgroundColor = "transparent";
512
- },
513
- style: {
514
- width: "100%",
515
- display: "flex",
516
- alignItems: "center",
517
- gap: "12px",
518
- padding: depth > 0 ? "10px 16px 10px 52px" : "12px 16px",
519
- borderRadius: "8px",
520
- border: "none",
521
- background: isActive ? `color-mix(in srgb, ${activeColor} 10%, transparent)` : "transparent",
522
- color: isActive ? activeColor : isDark ? "#ffffff" : "var(--color-alias-text-colors-primary, #060d26)",
523
- cursor: "pointer",
524
- transition: "background-color 0.15s ease",
525
- textAlign: "left",
526
- fontSize: "15px",
527
- fontWeight: isActive ? 600 : 400,
528
- lineHeight: "22px"
529
- },
530
- children: [
531
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
532
- width: "24px",
533
- height: "24px",
508
+ /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
509
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@media(hover:hover){.sidebar-btn-${safeCssEscape(btnId)}:not([data-active='true']):hover{background-color:${hoverBg}!important}}` }),
510
+ /* @__PURE__ */ jsxRuntime.jsxs(
511
+ "button",
512
+ {
513
+ className: `sidebar-btn-${safeCssEscape(btnId)}`,
514
+ "data-active": isActive,
515
+ onClick: handleClick,
516
+ style: {
517
+ width: "100%",
534
518
  display: "flex",
535
519
  alignItems: "center",
536
- justifyContent: "center",
537
- flexShrink: 0,
538
- color: isActive ? activeColor : isDark ? "#e2e8f0" : "var(--color-alias-text-colors-tertiary, #475272)"
539
- }, children: resolvedIcon }),
540
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 }, children: item.title }),
541
- hasChildren && /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { isOpen: expanded })
542
- ]
543
- }
544
- ) }),
520
+ gap: "12px",
521
+ padding: depth > 0 ? "10px 16px 10px 52px" : "12px 16px",
522
+ borderRadius: "8px",
523
+ border: "none",
524
+ background: isActive ? `color-mix(in srgb, ${activeColor} 10%, transparent)` : "transparent",
525
+ color: isActive ? activeColor : isDark ? "#ffffff" : "var(--color-alias-text-colors-primary, #060d26)",
526
+ cursor: "pointer",
527
+ transition: "background-color 0.15s ease",
528
+ textAlign: "left",
529
+ fontSize: "15px",
530
+ fontWeight: isActive ? 600 : 400,
531
+ lineHeight: "22px",
532
+ WebkitTapHighlightColor: "transparent"
533
+ },
534
+ children: [
535
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
536
+ width: "24px",
537
+ height: "24px",
538
+ display: "flex",
539
+ alignItems: "center",
540
+ justifyContent: "center",
541
+ flexShrink: 0,
542
+ color: isActive ? activeColor : isDark ? "#e2e8f0" : "var(--color-alias-text-colors-tertiary, #475272)"
543
+ }, children: resolvedIcon }),
544
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 }, children: item.title }),
545
+ hasChildren && /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { isOpen: expanded })
546
+ ]
547
+ }
548
+ )
549
+ ] }),
545
550
  hasChildren && expanded && /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
546
551
  MenuItemComponent,
547
552
  {
@@ -561,8 +566,7 @@ function MenuItemComponent({
561
566
  }
562
567
  function SidebarMenu({ menuItems, onItemClick, currentPath, collapsed, onExpandRequest }) {
563
568
  return /* @__PURE__ */ jsxRuntime.jsx("nav", { style: {
564
- padding: collapsed ? "8px 8px" : "8px 12px",
565
- overflowY: "auto"
569
+ padding: collapsed ? "8px 8px" : "8px 12px"
566
570
  }, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { style: {
567
571
  listStyle: "none",
568
572
  margin: 0,
@@ -1041,39 +1045,38 @@ function StaffSidebar({
1041
1045
  ]
1042
1046
  }
1043
1047
  ),
1044
- collapsible && /* @__PURE__ */ jsxRuntime.jsx(
1045
- "button",
1046
- {
1047
- onClick: handleToggle,
1048
- title: sidebarOpen ? "\u0E22\u0E48\u0E2D Sidebar" : "\u0E02\u0E22\u0E32\u0E22 Sidebar",
1049
- onMouseEnter: (e) => {
1050
- e.currentTarget.style.backgroundColor = isDark ? "#374151" : "#f3f4f6";
1051
- },
1052
- onMouseLeave: (e) => {
1053
- e.currentTarget.style.backgroundColor = isDark ? "#1e293b" : "#fff";
1054
- },
1055
- style: {
1056
- position: "fixed",
1057
- top: "10%",
1058
- left: currentWidth,
1059
- zIndex: 41,
1060
- width: "24px",
1061
- height: "40px",
1062
- borderRadius: "0 6px 6px 0",
1063
- border: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
1064
- borderLeft: "none",
1065
- background: isDark ? "#1e293b" : "#fff",
1066
- cursor: "pointer",
1067
- display: "flex",
1068
- alignItems: "center",
1069
- justifyContent: "center",
1070
- boxShadow: isDark ? "2px 0 8px rgba(0,0,0,0.3)" : "2px 0 8px rgba(0,0,0,0.06)",
1071
- transition: "left 0.3s ease",
1072
- color: isDark ? "#ffffff" : "var(--color-alias-text-colors-tertiary, #475272)"
1073
- },
1074
- children: /* @__PURE__ */ jsxRuntime.jsx(ToggleIcon, { isOpen: sidebarOpen })
1075
- }
1076
- )
1048
+ collapsible && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1049
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@media(hover:hover){.sidebar-toggle-btn:hover{background-color:${isDark ? "#374151" : "#f3f4f6"}!important}}` }),
1050
+ /* @__PURE__ */ jsxRuntime.jsx(
1051
+ "button",
1052
+ {
1053
+ className: "sidebar-toggle-btn",
1054
+ onClick: handleToggle,
1055
+ title: sidebarOpen ? "\u0E22\u0E48\u0E2D Sidebar" : "\u0E02\u0E22\u0E32\u0E22 Sidebar",
1056
+ style: {
1057
+ position: "fixed",
1058
+ top: "10%",
1059
+ left: currentWidth,
1060
+ zIndex: 41,
1061
+ width: "24px",
1062
+ height: "40px",
1063
+ borderRadius: "0 6px 6px 0",
1064
+ border: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
1065
+ borderLeft: "none",
1066
+ background: isDark ? "#1e293b" : "#fff",
1067
+ cursor: "pointer",
1068
+ display: "flex",
1069
+ alignItems: "center",
1070
+ justifyContent: "center",
1071
+ boxShadow: isDark ? "2px 0 8px rgba(0,0,0,0.3)" : "2px 0 8px rgba(0,0,0,0.06)",
1072
+ transition: "left 0.3s ease",
1073
+ color: isDark ? "#ffffff" : "var(--color-alias-text-colors-tertiary, #475272)",
1074
+ WebkitTapHighlightColor: "transparent"
1075
+ },
1076
+ children: /* @__PURE__ */ jsxRuntime.jsx(ToggleIcon, { isOpen: sidebarOpen })
1077
+ }
1078
+ )
1079
+ ] })
1077
1080
  ] });
1078
1081
  }
1079
1082
  function BellIcon2() {