@npm_leadtech/legal-contracts-ui 0.53.2 → 0.53.3

package/dist/components/Header.d.ts

@@ -69,6 +69,8 @@ export type NavMenuItemProps = {
     hasDropdown: true;
     isNested?: boolean;
     onItemClick?: () => void;
+    isOpen?: boolean;
+    onToggle?: (open: boolean) => void;
 };
 
 export type NavMenuLink = {
@@ -79,6 +81,8 @@ export type NavMenuLink = {
     isNested?: boolean;
     bold?: boolean;
     onItemClick?: () => void;
+    isOpen?: boolean;
+    onToggle?: (open: boolean) => void;
 };
 
 export interface NavMenuProps {

package/dist/components/NavMenu.d.ts

@@ -10,6 +10,8 @@ export type NavMenuItemProps = {
     hasDropdown: true;
     isNested?: boolean;
     onItemClick?: () => void;
+    isOpen?: boolean;
+    onToggle?: (open: boolean) => void;
 };
 
 export type NavMenuLink = {
@@ -20,6 +22,8 @@ export type NavMenuLink = {
     isNested?: boolean;
     bold?: boolean;
     onItemClick?: () => void;
+    isOpen?: boolean;
+    onToggle?: (open: boolean) => void;
 };
 
 export declare interface NavMenuProps {

package/dist/components/NavMenu.js

@@ -1,7 +1,21 @@
-import { jsx as e } from "react/jsx-runtime";
-import "react";
-import { NavMenuItem as a } from "./NavMenuItem.js";
-const o = ({ navItems: m, className: t = "" }) => /* @__PURE__ */ e("nav", { className: t, children: /* @__PURE__ */ e("ul", { className: "text-medium flex flex-wrap items-center gap-4 xl:gap-8", children: m.map((r) => /* @__PURE__ */ e(a, { ...r }, r.id)) }) });
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { useState as m } from "react";
+import { NavMenuItem as n } from "./NavMenuItem.js";
+const c = ({ navItems: l, className: o = "" }) => {
+  const [t, i] = m(null);
+  return /* @__PURE__ */ r("nav", { className: o, children: /* @__PURE__ */ r("ul", { className: "text-medium flex flex-wrap items-center gap-4 xl:gap-8", children: l.map((e) => /* @__PURE__ */ r(
+    n,
+    {
+      ...e,
+      isOpen: t === e.id,
+      onToggle: (p) => {
+        i(p ? e.id : null);
+      }
+    },
+    e.id
+  )) }) });
+};
 export {
-  o as NavMenu
+  c as NavMenu
 };

package/dist/components/NavMenuItem.d.ts

@@ -10,6 +10,8 @@ export declare type NavMenuItemProps = {
     hasDropdown: true;
     isNested?: boolean;
     onItemClick?: () => void;
+    isOpen?: boolean;
+    onToggle?: (open: boolean) => void;
 };
 
 export declare type NavMenuLink = {
@@ -20,5 +22,7 @@ export declare type NavMenuLink = {
     isNested?: boolean;
     bold?: boolean;
     onItemClick?: () => void;
+    isOpen?: boolean;
+    onToggle?: (open: boolean) => void;
 };
 

package/dist/components/NavMenuItem.js

@@ -1,68 +1,104 @@
 "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 = {
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { useState as p, useCallback as E, useRef as T, useEffect as $ } from "react";
+import { ChevronDownIcon as j } from "./ChevronDownIcon.js";
+import { ChevronRightIcon as P } from "./ChevronRightIcon.js";
+const R = (l) => {
+  const { hasDropdown: g, isNested: w, isOpen: v, onToggle: i } = l, [x, C] = p(!1), [I, u] = p(null), s = v ?? x, n = E(
+    (e) => {
+      e || u(null), i ? i(e) : C(e);
+    },
+    [i]
+  ), r = T(null);
+  $(() => {
+    if (!s) return;
+    const e = (c) => {
+      r.current && !r.current.contains(c.target) && n(!1);
+    };
+    return document.addEventListener("mousedown", e), () => {
+      document.removeEventListener("mousedown", e);
+    };
+  }, [s, n]);
+  const m = {
     topLevel: {
       liClass: "relative py-2",
       triggerClass: "hover:text-neutral-600",
       dropdownPosition: "top-full left-0",
-      Icon: b
+      Icon: j
     },
     nested: {
       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",
-      Icon: I
+      Icon: P
     }
-  }, 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);
+  }, o = w ? m.nested : m.topLevel, b = o.Icon, f = () => {
+    n(!1), l.onItemClick && l.onItemClick();
+  }, N = (e) => {
+    e.stopPropagation(), n(!s);
+  }, k = () => {
+    globalThis.window.matchMedia("(hover: hover)").matches && n(!0);
+  }, O = () => {
+    globalThis.window.matchMedia("(hover: hover)").matches && n(!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}`,
-          "aria-haspopup": "menu",
-          "aria-expanded": l,
-          onClick: f,
-          children: [
-            /* @__PURE__ */ e("span", { className: "text-medium", children: v }),
-            /* @__PURE__ */ e(h, { fill: "#000", width: 20, height: 20 })
-          ]
-        }
-      ),
-      /* @__PURE__ */ e(
-        "div",
-        {
-          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)) }) })
-        }
-      )
-    ] });
+  if (g) {
+    const { dropdownItems: e, label: c } = l;
+    return /* @__PURE__ */ d(
+      "li",
+      {
+        ref: r,
+        className: o.liClass,
+        onMouseEnter: k,
+        onMouseLeave: O,
+        children: [
+          /* @__PURE__ */ d(
+            "button",
+            {
+              className: `text-small flex w-full cursor-pointer items-center justify-between gap-1 font-medium text-nowrap text-neutral-800 transition-colors ${o.triggerClass}`,
+              "aria-haspopup": "menu",
+              "aria-expanded": s,
+              onClick: N,
+              children: [
+                /* @__PURE__ */ t("span", { className: "text-medium", children: c }),
+                /* @__PURE__ */ t(b, { fill: "#000", width: 20, height: 20 })
+              ]
+            }
+          ),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: `absolute z-50 min-w-48 transition-all duration-200 ${o.dropdownPosition} ${s ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
+              children: /* @__PURE__ */ t("div", { className: "rounded-md border border-neutral-200 bg-white p-4 shadow-lg", children: /* @__PURE__ */ t("ul", { className: "flex flex-col gap-2", children: e.map((a) => /* @__PURE__ */ t(
+                R,
+                {
+                  ...a,
+                  isNested: !0,
+                  onItemClick: f,
+                  isOpen: I === a.id,
+                  onToggle: (M) => {
+                    u(M ? a.id : null);
+                  }
+                },
+                a.id
+              )) }) })
+            }
+          )
+        ]
+      }
+    );
   }
-  const { link: w, tag: c, bold: x } = n;
-  return /* @__PURE__ */ e("li", { className: t.liClass, onClick: r, children: /* @__PURE__ */ a(
+  const { link: y, tag: h, bold: L } = l;
+  return /* @__PURE__ */ t("li", { className: o.liClass, onClick: f, children: /* @__PURE__ */ d(
     "span",
     {
-      className: `text-small relative flex w-full items-center gap-1 font-medium text-nowrap text-neutral-800 transition-colors ${t.triggerClass} `,
+      className: `text-small relative flex w-full items-center gap-1 font-medium text-nowrap text-neutral-800 transition-colors ${o.triggerClass} `,
       children: [
-        /* @__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 })
+        /* @__PURE__ */ t("span", { className: `text-medium flex-1 ${L ? "font-bold" : ""} [&_a]:after:absolute [&_a]:after:inset-0`, children: y }),
+        h && /* @__PURE__ */ t("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: h })
       ]
     }
   ) });
 };
 export {
-  N as NavMenuItem
+  R as NavMenuItem
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-contracts-ui",
-  "version": "0.53.2",
+  "version": "0.53.3",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",