@cfx-dev/ui-components 5.0.5 → 5.0.6

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

@@ -4,6 +4,7 @@ export interface BurgerMenuItem {
     label: string;
     highlighted?: boolean;
     id: string;
+    openByDefault?: boolean;
     className?: string;
     submenu?: BurgerMenuItem[];
 }
@@ -12,5 +13,9 @@ export interface BurgerMenuProps {
     onItemClick: (item: string) => void;
     isOpen: boolean;
     className?: string;
+    menuClassName?: string;
+    subItemContainerClassName?: string;
+    itemInteractiveClassName?: string;
+    itemClassName?: string;
 }
-export declare function BurgerMenu({ items, onItemClick, isOpen, className, }: BurgerMenuProps): React.ReactElement;
+export declare function BurgerMenu({ items, onItemClick, isOpen, className, menuClassName, subItemContainerClassName, itemInteractiveClassName, itemClassName, }: BurgerMenuProps): React.ReactElement;

package/dist/components/BurgerMenu/BurgerMenu.js

@@ -1,22 +1,31 @@
-import { jsx as o, jsxs as c } from "react/jsx-runtime";
-import { useState as C, useCallback as d } from "react";
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { useState as x, useCallback as b } from "react";
 import r from "../Flex/Flex.js";
-import { clsx as m } from "../../utils/clsx.js";
-import { Icon as k } from "../Icon/Icon.js";
-import { Interactive as h } from "../Interactive/Interactive.js";
-import { Text as w } from "../Text/Text.js";
+import { clsx as u } from "../../utils/clsx.js";
+import { Icon as N } from "../Icon/Icon.js";
+import { Interactive as f } from "../Interactive/Interactive.js";
+import { Text as S } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
-import { s as l } from "../../BurgerMenu.module-CyY93Y4u.js";
-function K({
-  items: b,
-  onItemClick: u,
-  isOpen: p,
-  className: f
+import { s as i } from "../../BurgerMenu.module-CyY93Y4u.js";
+function P({
+  items: a,
+  onItemClick: c,
+  isOpen: g,
+  className: y,
+  menuClassName: C,
+  subItemContainerClassName: k,
+  itemInteractiveClassName: s,
+  itemClassName: t
 }) {
-  const [t, g] = C({}), i = d((e) => {
-    u(e);
-  }, [u]), s = d((e) => {
-    g((n) => ({
+  const [d, w] = x(() => {
+    const e = {};
+    return a.forEach((n) => {
+      n.openByDefault && (e[n.id] = !0);
+    }), e;
+  }), l = b((e) => {
+    c(e);
+  }, [c]), m = b((e) => {
+    w((n) => ({
       ...n,
       [e]: !n[e]
     }));
@@ -24,24 +33,25 @@ function K({
   return /* @__PURE__ */ o(
     r,
     {
-      className: m(l.burgerMenuContentContainer, f),
+      className: u(i.burgerMenuContentContainer, y),
       direction: "column",
-      children: p && /* @__PURE__ */ o(r, { direction: "column", className: l.menu, children: b.map((e) => /* @__PURE__ */ c("div", { children: [
+      children: g && /* @__PURE__ */ o(r, { direction: "column", className: u(i.menu, C), children: a.map((e) => /* @__PURE__ */ p("div", { children: [
         /* @__PURE__ */ o(
-          h,
+          f,
           {
             showPointer: !0,
             "aria-label": "Toggle item",
             role: "button",
             onClick: () => {
-              e.submenu ? s(e.id) : i(e.id);
+              e.submenu ? m(e.id) : l(e.id);
             },
             onKeyDown: (n) => {
-              (n.key === "Enter" || n.key === " ") && (e.submenu ? s(e.id) : i(e.id));
+              (n.key === "Enter" || n.key === " ") && (e.submenu ? m(e.id) : l(e.id));
             },
-            children: /* @__PURE__ */ c(r, { p: 2, justifyContent: "space-between", children: [
+            className: s,
+            children: /* @__PURE__ */ p(r, { p: 2, justifyContent: "space-between", className: t, children: [
               /* @__PURE__ */ o(
-                w,
+                S,
                 {
                   size: "xsmall",
                   weight: e.highlighted ? "bold" : "regular",
@@ -49,9 +59,9 @@ function K({
                 }
               ),
               e.submenu && /* @__PURE__ */ o(
-                k,
+                N,
                 {
-                  name: t[e.id] ? "UpChevron" : "DownChevron"
+                  name: d[e.id] ? "UpChevron" : "DownChevron"
                 }
               )
             ] })
@@ -60,21 +70,26 @@ function K({
         e.submenu && /* @__PURE__ */ o(
           r,
           {
-            className: m(l.subItemContainer, {
-              [l.subItemContainerOpen]: t[e.id]
-            }),
+            className: u(
+              i.subItemContainer,
+              k,
+              {
+                [i.subItemContainerOpen]: d[e.id]
+              }
+            ),
             direction: "column",
             children: e.submenu.map((n) => /* @__PURE__ */ o(
-              h,
+              f,
               {
                 showPointer: !0,
                 "aria-label": "Toggle sub item",
                 role: "button",
-                onClick: () => i(n.id),
-                onKeyDown: (a) => {
-                  (a.key === "Enter" || a.key === " ") && i(n.id);
+                onClick: () => l(n.id),
+                onKeyDown: (h) => {
+                  (h.key === "Enter" || h.key === " ") && l(n.id);
                 },
-                children: /* @__PURE__ */ o(r, { p: 2, children: n.label })
+                className: s,
+                children: /* @__PURE__ */ o(r, { p: 2, className: t, children: n.label })
               },
               n.id
             ))
@@ -85,5 +100,5 @@ function K({
   );
 }
 export {
-  K as BurgerMenu
+  P as BurgerMenu
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "5.0.5",
+  "version": "5.0.6",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",