@cfx-dev/ui-components 4.2.8 → 4.2.10

package/dist/components/BurgerMenu/BurgerMenu.d.ts

@@ -1,15 +1,14 @@
 import { default as React } from 'react';
 
-interface MenuItem {
+export interface BurgerMenuItem {
+    id: string;
     label: string;
     highlighted?: boolean;
-    id: string;
-    className?: string;
-    submenu?: MenuItem[];
+    submenu?: BurgerMenuItem[];
 }
-interface BurgerMenuProps {
-    items: MenuItem[];
+export interface BurgerMenuProps {
+    items: BurgerMenuItem[];
     onItemClick: (item: string) => void;
+    onOpenChange?: (isOpen: boolean) => void;
 }
-export declare function BurgerMenu({ items, onItemClick, }: BurgerMenuProps): React.ReactElement;
-export {};
+export declare function BurgerMenu(props: BurgerMenuProps): React.ReactElement;

package/dist/components/BurgerMenu/BurgerMenu.js

@@ -1,51 +1,54 @@
 import { jsxs as a, jsx as n } from "react/jsx-runtime";
-import { useState as f, useCallback as l } from "react";
-import { Icon as O } from "../Icon/Icon.js";
-import { Interactive as c } from "../Interactive/Interactive.js";
-import { Flex as u } from "../Layout/Flex/Flex.js";
-import { Text as x } from "../Text/Text.js";
+import k, { useState as h, useCallback as c } from "react";
+import { Icon as y } from "../Icon/Icon.js";
+import { Interactive as b } from "../Interactive/Interactive.js";
+import { Flex as i } from "../Layout/Flex/Flex.js";
+import { Text as L } from "../Text/Text.js";
 import "../ui.js";
 import { clsx as t } from "../../utils/clsx.js";
-const y = "cfxui__BurgerMenu__burgerButton__cc9ab", L = "cfxui__BurgerMenu__burgerContainerOpen__ed7ab", B = "cfxui__BurgerMenu__burgerLine__886ad", k = "cfxui__BurgerMenu__burgerLineOpen__af602", w = "cfxui__BurgerMenu__subItemContainer__0d64a", I = "cfxui__BurgerMenu__subItemContainerOpen__5491d", r = {
-  burgerButton: y,
-  burgerContainerOpen: L,
-  burgerLine: B,
-  burgerLineOpen: k,
-  subItemContainer: w,
-  subItemContainerOpen: I
+const B = "cfxui__BurgerMenu__burgerButton__cc9ab", I = "cfxui__BurgerMenu__burgerContainerOpen__ed7ab", w = "cfxui__BurgerMenu__burgerLine__886ad", M = "cfxui__BurgerMenu__burgerLineOpen__af602", N = "cfxui__BurgerMenu__subItemContainer__0d64a", T = "cfxui__BurgerMenu__subItemContainerOpen__5491d", r = {
+  burgerButton: B,
+  burgerContainerOpen: I,
+  burgerLine: w,
+  burgerLineOpen: M,
+  subItemContainer: N,
+  subItemContainerOpen: T
 };
-function K({
-  items: h,
-  onItemClick: b
-}) {
-  const [i, g] = f(!1), [d, C] = f({}), p = l(() => {
-    g((e) => !e);
-  }, []), s = l((e) => {
-    b(e), g(!1);
-  }, [b]), _ = l((e) => {
-    C((o) => ({
+function F(C) {
+  const {
+    items: O,
+    onItemClick: g,
+    onOpenChange: l
+  } = C, [u, d] = h(!1), [m, x] = h({}), _ = c(() => {
+    d((e) => !e);
+  }, []), s = c((e) => {
+    g(e), d(!1);
+  }, [g]), p = c((e) => {
+    x((o) => ({
       ...o,
       [e]: !o[e]
     }));
   }, []);
-  return /* @__PURE__ */ a(
-    u,
+  return k.useEffect(() => {
+    l && l(u);
+  }, [u, l]), /* @__PURE__ */ a(
+    i,
     {
-      className: t({ [r.burgerContainerOpen]: i }),
+      className: t({ [r.burgerContainerOpen]: u }),
       direction: "column",
       children: [
-        /* @__PURE__ */ n(u, { justifyContent: "flex-end", children: /* @__PURE__ */ n(
-          c,
+        /* @__PURE__ */ n(i, { justifyContent: "flex-end", children: /* @__PURE__ */ n(
+          b,
           {
             showPointer: !0,
             "aria-label": "Toggle menu",
             role: "button",
-            onClick: p,
+            onClick: _,
             onKeyDown: (e) => {
-              (e.key === "Enter" || e.key === " ") && p();
+              (e.key === "Enter" || e.key === " ") && _();
             },
             children: /* @__PURE__ */ a(
-              u,
+              i,
               {
                 justifyContent: "space-around",
                 direction: "column",
@@ -54,19 +57,19 @@ function K({
                   /* @__PURE__ */ n(
                     "span",
                     {
-                      className: t(i ? r.burgerLineOpen : r.burgerLine)
+                      className: t(u ? r.burgerLineOpen : r.burgerLine)
                     }
                   ),
                   /* @__PURE__ */ n(
                     "span",
                     {
-                      className: t(i ? r.burgerLineOpen : r.burgerLine)
+                      className: t(u ? r.burgerLineOpen : r.burgerLine)
                     }
                   ),
                   /* @__PURE__ */ n(
                     "span",
                     {
-                      className: t(i ? r.burgerLineOpen : r.burgerLine)
+                      className: t(u ? r.burgerLineOpen : r.burgerLine)
                     }
                   )
                 ]
@@ -74,22 +77,22 @@ function K({
             )
           }
         ) }),
-        i && /* @__PURE__ */ n(u, { direction: "column", className: r.menu, children: h.map((e) => /* @__PURE__ */ a("div", { children: [
+        u && /* @__PURE__ */ n(i, { direction: "column", className: r.menu, children: O.map((e) => /* @__PURE__ */ a("div", { children: [
           /* @__PURE__ */ n(
-            c,
+            b,
             {
               showPointer: !0,
               "aria-label": "Toggle item",
               role: "button",
               onClick: () => {
-                e.submenu ? _(e.id) : s(e.id);
+                e.submenu ? p(e.id) : s(e.id);
               },
               onKeyDown: (o) => {
-                (o.key === "Enter" || o.key === " ") && (e.submenu ? _(e.id) : s(e.id));
+                (o.key === "Enter" || o.key === " ") && (e.submenu ? p(e.id) : s(e.id));
               },
-              children: /* @__PURE__ */ a(u, { p: 2, justifyContent: "space-between", children: [
+              children: /* @__PURE__ */ a(i, { p: 2, justifyContent: "space-between", children: [
                 /* @__PURE__ */ n(
-                  x,
+                  L,
                   {
                     size: "xsmall",
                     weight: e.highlighted ? "bold" : "normal",
@@ -97,32 +100,32 @@ function K({
                   }
                 ),
                 e.submenu && /* @__PURE__ */ n(
-                  O,
+                  y,
                   {
-                    name: d[e.id] ? "UpChevron" : "DownChevron"
+                    name: m[e.id] ? "UpChevron" : "DownChevron"
                   }
                 )
               ] })
             }
           ),
           e.submenu && /* @__PURE__ */ n(
-            u,
+            i,
             {
               className: t(r.subItemContainer, {
-                [r.subItemContainerOpen]: d[e.id]
+                [r.subItemContainerOpen]: m[e.id]
               }),
               direction: "column",
               children: e.submenu.map((o) => /* @__PURE__ */ n(
-                c,
+                b,
                 {
                   showPointer: !0,
                   "aria-label": "Toggle sub item",
                   role: "button",
                   onClick: () => s(o.id),
-                  onKeyDown: (m) => {
-                    (m.key === "Enter" || m.key === " ") && s(o.id);
+                  onKeyDown: (f) => {
+                    (f.key === "Enter" || f.key === " ") && s(o.id);
                   },
-                  children: /* @__PURE__ */ n(u, { p: 2, children: o.label })
+                  children: /* @__PURE__ */ n(i, { p: 2, children: o.label })
                 },
                 o.id
               ))
@@ -134,5 +137,5 @@ function K({
   );
 }
 export {
-  K as BurgerMenu
+  F as BurgerMenu
 };

package/dist/components/BurgerMenu/index.d.ts

@@ -1 +1,2 @@
 export { BurgerMenu } from './BurgerMenu';
+export type { BurgerMenuItem, BurgerMenuProps } from './BurgerMenu';