@npm_leadtech/legal-contracts-ui 0.53.1 → 0.53.2

package/dist/components/Header.d.ts

@@ -68,6 +68,7 @@ export type NavMenuItemProps = {
     dropdownItems: (NavMenuItemProps | NavMenuLink)[];
     hasDropdown: true;
     isNested?: boolean;
+    onItemClick?: () => void;
 };
 
 export type NavMenuLink = {
@@ -77,6 +78,7 @@ export type NavMenuLink = {
     hasDropdown: false;
     isNested?: boolean;
     bold?: boolean;
+    onItemClick?: () => void;
 };
 
 export interface NavMenuProps {

package/dist/components/NavMenu.d.ts

@@ -9,6 +9,7 @@ export type NavMenuItemProps = {
     dropdownItems: (NavMenuItemProps | NavMenuLink)[];
     hasDropdown: true;
     isNested?: boolean;
+    onItemClick?: () => void;
 };
 
 export type NavMenuLink = {
@@ -18,6 +19,7 @@ export type NavMenuLink = {
     hasDropdown: false;
     isNested?: boolean;
     bold?: boolean;
+    onItemClick?: () => void;
 };
 
 export declare interface NavMenuProps {

package/dist/components/NavMenuItem.d.ts

@@ -9,6 +9,7 @@ export declare type NavMenuItemProps = {
     dropdownItems: (NavMenuItemProps | NavMenuLink)[];
     hasDropdown: true;
     isNested?: boolean;
+    onItemClick?: () => void;
 };
 
 export declare type NavMenuLink = {
@@ -18,5 +19,6 @@ export declare type NavMenuLink = {
     hasDropdown: false;
     isNested?: boolean;
     bold?: boolean;
+    onItemClick?: () => void;
 };
 

package/dist/components/NavMenuItem.js

@@ -1,61 +1,68 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import "react";
-import { ChevronDownIcon as g } from "./ChevronDownIcon.js";
-import { ChevronRightIcon as f } from "./ChevronRightIcon.js";
-const h = (o) => {
-  const { hasDropdown: i, isNested: a } = o, n = {
+"use client";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useState as C } from "react";
+import { ChevronDownIcon as b } from "./ChevronDownIcon.js";
+import { ChevronRightIcon as I } from "./ChevronRightIcon.js";
+const N = (n) => {
+  const { hasDropdown: m, isNested: u } = n, i = {
     topLevel: {
-      liClass: "group relative py-2",
+      liClass: "relative py-2",
       triggerClass: "hover:text-neutral-600",
       dropdownPosition: "top-full left-0",
-      dropdownTrigger: "group-hover:pointer-events-auto group-hover:opacity-100",
-      Icon: g,
-      iconClass: "transition-transform duration-200 group-hover:rotate-180"
+      Icon: b
     },
     nested: {
-      liClass: "group/nested relative",
+      liClass: "relative",
       triggerClass: "p-1 hover:bg-primary-100 w-full rounded min-w-48.5",
       dropdownPosition: "top-0 left-full -mt-4 pl-6",
-      dropdownTrigger: "group-hover/nested:pointer-events-auto group-hover/nested:opacity-100",
-      Icon: f,
-      iconClass: ""
+      Icon: I
     }
-  }, t = a ? n.nested : n.topLevel, d = t.Icon;
-  if (i) {
-    const { dropdownItems: m, label: u } = o;
-    return /* @__PURE__ */ r("li", { className: t.liClass, children: [
-      /* @__PURE__ */ r(
+  }, t = u ? i.nested : i.topLevel, h = t.Icon, [l, o] = C(!1), r = () => {
+    o(!1), n.onItemClick && n.onItemClick();
+  }, f = (s) => {
+    s.stopPropagation(), o(!l);
+  }, p = () => {
+    globalThis.window.matchMedia("(hover: hover)").matches && o(!0);
+  }, g = () => {
+    globalThis.window.matchMedia("(hover: hover)").matches && o(!1);
+  };
+  if (m) {
+    const { dropdownItems: s, label: v } = n;
+    return /* @__PURE__ */ a("li", { className: t.liClass, onMouseEnter: p, onMouseLeave: g, children: [
+      /* @__PURE__ */ a(
         "button",
         {
-          className: `text-small flex w-full cursor-pointer items-center justify-between gap-1 font-medium text-nowrap text-neutral-800 transition-colors ${t.triggerClass} `,
+          className: `text-small flex w-full cursor-pointer items-center justify-between gap-1 font-medium text-nowrap text-neutral-800 transition-colors ${t.triggerClass}`,
           "aria-haspopup": "menu",
+          "aria-expanded": l,
+          onClick: f,
           children: [
-            /* @__PURE__ */ e("span", { className: "text-medium", children: u }),
-            /* @__PURE__ */ e(d, { className: t.iconClass, fill: "#000", width: 20, height: 20 })
+            /* @__PURE__ */ e("span", { className: "text-medium", children: v }),
+            /* @__PURE__ */ e(h, { fill: "#000", width: 20, height: 20 })
           ]
         }
       ),
       /* @__PURE__ */ e(
         "div",
         {
-          className: `pointer-events-none absolute z-50 min-w-48 opacity-0 transition-opacity duration-200 ${t.dropdownPosition} ${t.dropdownTrigger} `,
-          children: /* @__PURE__ */ e("div", { className: "rounded-md border border-neutral-200 bg-white p-4 shadow-lg", children: /* @__PURE__ */ e("ul", { className: "flex flex-col gap-2", children: m.map((l) => /* @__PURE__ */ e(h, { ...l, isNested: !0 }, l.id)) }) })
+          className: `absolute z-50 min-w-48 transition-all duration-200 ${t.dropdownPosition} ${l ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
+          children: /* @__PURE__ */ e("div", { className: "rounded-md border border-neutral-200 bg-white p-4 shadow-lg", children: /* @__PURE__ */ e("ul", { className: "flex flex-col gap-2", children: s.map((d) => /* @__PURE__ */ e(N, { ...d, isNested: !0, onItemClick: r }, d.id)) }) })
         }
       )
     ] });
   }
-  const { link: c, tag: s, bold: p } = o;
-  return /* @__PURE__ */ e("li", { className: t.liClass, children: /* @__PURE__ */ r(
+  const { link: w, tag: c, bold: x } = n;
+  return /* @__PURE__ */ e("li", { className: t.liClass, onClick: r, children: /* @__PURE__ */ a(
     "span",
     {
       className: `text-small relative flex w-full items-center gap-1 font-medium text-nowrap text-neutral-800 transition-colors ${t.triggerClass} `,
       children: [
-        /* @__PURE__ */ e("span", { className: `text-medium flex-1 ${p ? "font-bold" : ""} [&_a]:after:absolute [&_a]:after:inset-0`, children: c }),
-        s && /* @__PURE__ */ e("span", { className: "bg-secondary-200 text-extra-small flex h-4.5 w-5.25 items-center justify-center rounded align-middle font-bold", children: s })
+        /* @__PURE__ */ e("span", { className: `text-medium flex-1 ${x ? "font-bold" : ""} [&_a]:after:absolute [&_a]:after:inset-0`, children: w }),
+        c && /* @__PURE__ */ e("span", { className: "bg-secondary-200 text-extra-small flex h-4.5 w-5.25 items-center justify-center rounded align-middle font-bold", children: c })
       ]
     }
   ) });
 };
 export {
-  h as NavMenuItem
+  N as NavMenuItem
 };