gov-layout 1.2.13 → 1.2.14

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 +79 -82
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +80 -83
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -441,6 +441,7 @@ function MenuItemComponent({
441
441
  const [userToggled, setUserToggled] = react.useState(false);
442
442
  const [isOpen, setIsOpen] = react.useState(isChildActive);
443
443
  const expanded = userToggled ? isOpen : isOpen || isChildActive;
444
+ const btnId = react.useId();
444
445
  const handleClick = () => {
445
446
  if (hasChildren) {
446
447
  if (collapsed) {
@@ -459,17 +460,14 @@ function MenuItemComponent({
459
460
  const hoverBg = isDark ? "#334155" : "var(--color-foundations-fuji-pallet-light, #ebedf5)";
460
461
  if (collapsed && depth === 0) {
461
462
  return /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
463
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@media(hover:hover){.sidebar-btn-${CSS.escape(btnId)}:not([data-active='true']):hover{background-color:${hoverBg}!important}}` }),
462
464
  /* @__PURE__ */ jsxRuntime.jsx(
463
465
  "button",
464
466
  {
467
+ className: `sidebar-btn-${CSS.escape(btnId)}`,
468
+ "data-active": isActive || isChildActive,
465
469
  onClick: handleClick,
466
470
  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
471
  style: {
474
472
  width: "100%",
475
473
  display: "flex",
@@ -481,7 +479,8 @@ function MenuItemComponent({
481
479
  background: isActive || isChildActive ? `color-mix(in srgb, ${activeColor} 10%, transparent)` : "transparent",
482
480
  color: isActive || isChildActive ? activeColor : isDark ? "#ffffff" : "var(--color-alias-text-colors-tertiary, #475272)",
483
481
  cursor: "pointer",
484
- transition: "background-color 0.15s ease"
482
+ transition: "background-color 0.15s ease",
483
+ WebkitTapHighlightColor: "transparent"
485
484
  },
486
485
  children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
487
486
  width: "24px",
@@ -500,48 +499,48 @@ function MenuItemComponent({
500
499
  ] });
501
500
  }
502
501
  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",
502
+ /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
503
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@media(hover:hover){.sidebar-btn-${CSS.escape(btnId)}:not([data-active='true']):hover{background-color:${hoverBg}!important}}` }),
504
+ /* @__PURE__ */ jsxRuntime.jsxs(
505
+ "button",
506
+ {
507
+ className: `sidebar-btn-${CSS.escape(btnId)}`,
508
+ "data-active": isActive,
509
+ onClick: handleClick,
510
+ style: {
511
+ width: "100%",
534
512
  display: "flex",
535
513
  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
- ) }),
514
+ gap: "12px",
515
+ padding: depth > 0 ? "10px 16px 10px 52px" : "12px 16px",
516
+ borderRadius: "8px",
517
+ border: "none",
518
+ background: isActive ? `color-mix(in srgb, ${activeColor} 10%, transparent)` : "transparent",
519
+ color: isActive ? activeColor : isDark ? "#ffffff" : "var(--color-alias-text-colors-primary, #060d26)",
520
+ cursor: "pointer",
521
+ transition: "background-color 0.15s ease",
522
+ textAlign: "left",
523
+ fontSize: "15px",
524
+ fontWeight: isActive ? 600 : 400,
525
+ lineHeight: "22px",
526
+ WebkitTapHighlightColor: "transparent"
527
+ },
528
+ children: [
529
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: {
530
+ width: "24px",
531
+ height: "24px",
532
+ display: "flex",
533
+ alignItems: "center",
534
+ justifyContent: "center",
535
+ flexShrink: 0,
536
+ color: isActive ? activeColor : isDark ? "#e2e8f0" : "var(--color-alias-text-colors-tertiary, #475272)"
537
+ }, children: resolvedIcon }),
538
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 }, children: item.title }),
539
+ hasChildren && /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { isOpen: expanded })
540
+ ]
541
+ }
542
+ )
543
+ ] }),
545
544
  hasChildren && expanded && /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
546
545
  MenuItemComponent,
547
546
  {
@@ -561,8 +560,7 @@ function MenuItemComponent({
561
560
  }
562
561
  function SidebarMenu({ menuItems, onItemClick, currentPath, collapsed, onExpandRequest }) {
563
562
  return /* @__PURE__ */ jsxRuntime.jsx("nav", { style: {
564
- padding: collapsed ? "8px 8px" : "8px 12px",
565
- overflowY: "auto"
563
+ padding: collapsed ? "8px 8px" : "8px 12px"
566
564
  }, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { style: {
567
565
  listStyle: "none",
568
566
  margin: 0,
@@ -1041,39 +1039,38 @@ function StaffSidebar({
1041
1039
  ]
1042
1040
  }
1043
1041
  ),
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
- )
1042
+ collapsible && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1043
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@media(hover:hover){.sidebar-toggle-btn:hover{background-color:${isDark ? "#374151" : "#f3f4f6"}!important}}` }),
1044
+ /* @__PURE__ */ jsxRuntime.jsx(
1045
+ "button",
1046
+ {
1047
+ className: "sidebar-toggle-btn",
1048
+ onClick: handleToggle,
1049
+ title: sidebarOpen ? "\u0E22\u0E48\u0E2D Sidebar" : "\u0E02\u0E22\u0E32\u0E22 Sidebar",
1050
+ style: {
1051
+ position: "fixed",
1052
+ top: "10%",
1053
+ left: currentWidth,
1054
+ zIndex: 41,
1055
+ width: "24px",
1056
+ height: "40px",
1057
+ borderRadius: "0 6px 6px 0",
1058
+ border: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
1059
+ borderLeft: "none",
1060
+ background: isDark ? "#1e293b" : "#fff",
1061
+ cursor: "pointer",
1062
+ display: "flex",
1063
+ alignItems: "center",
1064
+ justifyContent: "center",
1065
+ boxShadow: isDark ? "2px 0 8px rgba(0,0,0,0.3)" : "2px 0 8px rgba(0,0,0,0.06)",
1066
+ transition: "left 0.3s ease",
1067
+ color: isDark ? "#ffffff" : "var(--color-alias-text-colors-tertiary, #475272)",
1068
+ WebkitTapHighlightColor: "transparent"
1069
+ },
1070
+ children: /* @__PURE__ */ jsxRuntime.jsx(ToggleIcon, { isOpen: sidebarOpen })
1071
+ }
1072
+ )
1073
+ ] })
1077
1074
  ] });
1078
1075
  }
1079
1076
  function BellIcon2() {