@cfx-dev/ui-components 5.0.25 → 5.0.27

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

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { IconName } from '../Icon';
 
 export interface BurgerMenuItem {
     label: string;
@@ -7,6 +8,7 @@ export interface BurgerMenuItem {
     openByDefault?: boolean;
     className?: string;
     submenu?: BurgerMenuItem[];
+    icon?: IconName;
 }
 export interface BurgerMenuProps {
     items: BurgerMenuItem[];
@@ -17,6 +19,6 @@ export interface BurgerMenuProps {
     subItemContainerClassName?: string;
     itemInteractiveClassName?: string;
     itemClassName?: string;
-    showHighlightBorder?: boolean;
+    highlightedItemClassname?: string;
 }
-export declare function BurgerMenu({ items, onItemClick, isOpen, className, menuClassName, subItemContainerClassName, itemInteractiveClassName, itemClassName, showHighlightBorder, }: BurgerMenuProps): React.ReactElement;
+export declare function BurgerMenu({ items, onItemClick, isOpen, className, menuClassName, subItemContainerClassName, itemInteractiveClassName, itemClassName, highlightedItemClassname, }: BurgerMenuProps): React.ReactElement;

package/dist/components/BurgerMenu/BurgerMenu.js

@@ -1,113 +1,114 @@
-import { jsx as o, jsxs as p } from "react/jsx-runtime";
-import { useState as N, useCallback as b } from "react";
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import { useState as S, useCallback as f } from "react";
 import r from "../Flex/Flex.js";
-import { clsx as u } from "../../utils/clsx.js";
-import { Icon as S } from "../Icon/Icon.js";
-import { Interactive as f } from "../Interactive/Interactive.js";
+import { clsx as i } from "../../utils/clsx.js";
+import { Icon as g } from "../Icon/Icon.js";
+import { Interactive as y } from "../Interactive/Interactive.js";
 import { Text as D } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
-import { s as l } from "../../BurgerMenu.module-DA0ojIYf.js";
+import { s as u } from "../../BurgerMenu.module-Dy-zFg88.js";
 function z({
-  items: a,
-  onItemClick: s,
-  isOpen: g,
+  items: c,
+  onItemClick: a,
+  isOpen: k,
   className: w,
-  menuClassName: y,
+  menuClassName: x,
   subItemContainerClassName: C,
-  itemInteractiveClassName: t,
-  itemClassName: c,
-  showHighlightBorder: k
+  itemInteractiveClassName: s,
+  itemClassName: t,
+  highlightedItemClassname: d
 }) {
-  const [d, x] = N(() => {
-    const e = {};
-    return a.forEach((n) => {
-      n.openByDefault && (e[n.id] = !0);
-    }), e;
-  }), i = b((e) => {
-    s(e);
-  }, [s]), h = b((e) => {
-    x((n) => ({
-      ...n,
-      [e]: !n[e]
+  const [h, N] = S(() => {
+    const n = {};
+    return c.forEach((e) => {
+      e.openByDefault && (n[e.id] = !0);
+    }), n;
+  }), l = f((n) => {
+    a(n);
+  }, [a]), p = f((n) => {
+    N((e) => ({
+      ...e,
+      [n]: !e[n]
     }));
   }, []);
   return /* @__PURE__ */ o(
     r,
     {
-      className: u(l.burgerMenuContentContainer, w),
+      className: i(u.burgerMenuContentContainer, w),
       direction: "column",
-      children: g && /* @__PURE__ */ o(r, { direction: "column", className: u(l.menu, y), children: a.map((e) => /* @__PURE__ */ p("div", { children: [
+      children: k && /* @__PURE__ */ o(r, { direction: "column", className: i(u.menu, x), children: c.map((n) => /* @__PURE__ */ m("div", { children: [
         /* @__PURE__ */ o(
-          f,
+          y,
           {
             showPointer: !0,
             "aria-label": "Toggle item",
             role: "button",
             onClick: () => {
-              e.submenu ? h(e.id) : i(e.id);
+              n.submenu ? p(n.id) : l(n.id);
             },
-            onKeyDown: (n) => {
-              (n.key === "Enter" || n.key === " ") && (e.submenu ? h(e.id) : i(e.id));
+            onKeyDown: (e) => {
+              (e.key === "Enter" || e.key === " ") && (n.submenu ? p(n.id) : l(n.id));
             },
-            className: t,
-            children: /* @__PURE__ */ p(
+            className: s,
+            children: /* @__PURE__ */ m(
               r,
               {
                 p: 2,
                 justifyContent: "space-between",
-                className: u(
-                  e.highlighted && k ? l.showHighlightBorder : null,
-                  c
+                className: i(
+                  n.highlighted && d ? d : null,
+                  t
                 ),
                 children: [
                   /* @__PURE__ */ o(
                     D,
                     {
                       size: "xsmall",
-                      weight: e.highlighted ? "bold" : "regular",
-                      children: e.label
+                      weight: n.highlighted ? "bold" : "regular",
+                      children: n.label
                     }
                   ),
-                  e.submenu && /* @__PURE__ */ o(
-                    S,
+                  n.submenu && /* @__PURE__ */ o(
+                    g,
                     {
-                      name: d[e.id] ? "UpChevron" : "DownChevron"
+                      name: h[n.id] ? "UpChevron" : "DownChevron"
                     }
-                  )
+                  ),
+                  n.icon && /* @__PURE__ */ o(g, { name: n.icon })
                 ]
               }
             )
           }
         ),
-        e.submenu && /* @__PURE__ */ o(
+        n.submenu && /* @__PURE__ */ o(
           r,
           {
-            className: u(
-              l.subItemContainer,
+            className: i(
+              u.subItemContainer,
               C,
               {
-                [l.subItemContainerOpen]: d[e.id]
+                [u.subItemContainerOpen]: h[n.id]
               }
             ),
             direction: "column",
-            children: e.submenu.map((n) => /* @__PURE__ */ o(
-              f,
+            children: n.submenu.map((e) => /* @__PURE__ */ o(
+              y,
               {
                 showPointer: !0,
                 "aria-label": "Toggle sub item",
                 role: "button",
-                onClick: () => i(n.id),
-                onKeyDown: (m) => {
-                  (m.key === "Enter" || m.key === " ") && i(n.id);
+                onClick: () => l(e.id),
+                onKeyDown: (b) => {
+                  (b.key === "Enter" || b.key === " ") && l(e.id);
                 },
-                className: t,
-                children: /* @__PURE__ */ o(r, { p: 2, className: c, children: n.label })
+                className: s,
+                children: /* @__PURE__ */ o(r, { p: 2, className: t, children: e.label })
               },
-              n.id
+              e.id
             ))
           }
         )
-      ] }, e.id)) })
+      ] }, n.id)) })
     }
   );
 }

package/dist/components/BurgerMenu/BurgerMenuButton.js

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as s } from "react/jsx-runtime";
 import u from "../Flex/Flex.js";
 import { clsx as o } from "../../utils/clsx.js";
 import { Interactive as m } from "../Interactive/Interactive.js";
-import { s as r } from "../../BurgerMenu.module-DA0ojIYf.js";
+import { s as r } from "../../BurgerMenu.module-Dy-zFg88.js";
 function g({
   isOpen: n,
   onToggle: t,

package/dist/components/BurgerMenu/BurgerMenuShowcase.js

@@ -1,10 +1,11 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import g, { useState as d, useCallback as h } from "react";
-import l from "../Flex/Flex.js";
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import d, { useState as h, useCallback as p } from "react";
+import i from "../Flex/Flex.js";
 import { Text as o } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
 import { BurgerMenu as n } from "./BurgerMenu.js";
-import { BurgerMenuButton as u } from "./BurgerMenuButton.js";
+import { BurgerMenuButton as s } from "./BurgerMenuButton.js";
+import { s as m } from "../../BurgerMenu.module-Dy-zFg88.js";
 const a = [
   {
     id: "1",
@@ -31,44 +32,46 @@ const a = [
   },
   {
     id: "4",
-    label: "Settings"
+    label: "Settings",
+    icon: "ExternalLink"
   }
-], m = (e) => {
+], u = (e) => {
   console.log(`Item clicked: ${e}`);
 };
-function p() {
-  const [e, s] = d(!1), i = h(() => {
-    s((c) => !c);
+function b() {
+  const [e, c] = h(!1), l = p(() => {
+    c((g) => !g);
   }, []);
-  return /* @__PURE__ */ t(l, { gap: "large", vertical: !0, pb: 20, children: [
-    /* @__PURE__ */ t(l, { gap: "medium", vertical: !0, children: [
-      /* @__PURE__ */ r(o, { children: "Burger Menu" }),
-      /* @__PURE__ */ r(u, { isOpen: e, onToggle: i }),
-      /* @__PURE__ */ r(
+  return /* @__PURE__ */ r(i, { gap: "large", vertical: !0, pb: 20, children: [
+    /* @__PURE__ */ r(i, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ t(o, { children: "Burger Menu" }),
+      /* @__PURE__ */ t(s, { isOpen: e, onToggle: l }),
+      /* @__PURE__ */ t(
         n,
         {
           items: a,
-          onItemClick: m,
+          onItemClick: u,
           isOpen: e
         }
       )
     ] }),
-    /* @__PURE__ */ t(l, { gap: "medium", vertical: !0, children: [
-      /* @__PURE__ */ r(o, { children: "Burger Menu With highlighted border" }),
-      /* @__PURE__ */ r(u, { isOpen: e, onToggle: i }),
-      /* @__PURE__ */ r(
+    /* @__PURE__ */ r(i, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ t(o, { children: "Burger Menu With highlighted borders to show custom styling" }),
+      /* @__PURE__ */ t(s, { isOpen: e, onToggle: l }),
+      /* @__PURE__ */ t(
         n,
         {
           items: a,
-          onItemClick: m,
+          onItemClick: u,
           isOpen: e,
-          showHighlightBorder: !0
+          highlightedItemClassname: m.highlightTest,
+          itemClassName: m.borderTest
         }
       )
     ] })
   ] });
 }
-const k = g.memo(p);
+const C = d.memo(b);
 export {
-  k as default
+  C as default
 };

package/dist/components/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { IconName } from '../Icon';
 
-export type ButtonTheme = 'primary' | 'secondary' | 'on-light' | 'tertiary' | 'linked' | 'quicklink';
+export type ButtonTheme = 'primary' | 'secondary' | 'tertiary' | 'on-light' | 'linked' | 'quicklink';
 export interface ButtonProps<T = HTMLButtonElement> {
     text?: React.ReactNode;
     title?: string;
@@ -16,6 +16,7 @@ export interface ButtonProps<T = HTMLButtonElement> {
     fullWidth?: boolean;
     disabled?: boolean;
     autofocus?: boolean;
+    borderShredded?: boolean;
     onClick?: (event: React.MouseEvent<T>) => void;
     onMouseDown?: (event: React.MouseEvent<T>) => void;
     onMouseUp?: (event: React.MouseEvent<T>) => void;

package/dist/components/Button/Button.js

@@ -1,86 +1,91 @@
-import { jsx as a, jsxs as q, Fragment as I } from "react/jsx-runtime";
-import x from "react";
-import { Icon as h } from "../Icon/Icon.js";
-import { clsx as b } from "../../utils/clsx.js";
-import { noop as m } from "../../utils/functional.js";
-const M = "cfxui__Button__unsetAll__44b96", j = "cfxui__Button__root__e2ace", F = "cfxui__Button__fullWidth__f61d9", v = "cfxui__Button__primary__1c59f", w = "cfxui__Button__secondary__b2b84", D = "cfxui__Button__linked__330cb", P = "cfxui__Button__quicklink__204ac", R = "cfxui__Button__icon__44e51", U = "cfxui__Button__icononly__4f786", $ = "cfxui__Button__decorator__39a9b", t = {
+import { jsx as r, jsxs as q, Fragment as I } from "react/jsx-runtime";
+import b from "react";
+import { Icon as k } from "../Icon/Icon.js";
+import { clsx as h } from "../../utils/clsx.js";
+import { noop as x } from "../../utils/functional.js";
+const M = "cfxui__Button__unsetAll__44b96", j = "cfxui__Button__root__e2ace", F = "cfxui__Button__fullWidth__f61d9", v = "cfxui__Button__borderShredded__2388c", w = "cfxui__Button__primary__1c59f", D = "cfxui__Button__secondary__b2b84", P = "cfxui__Button__linked__330cb", R = "cfxui__Button__quicklink__204ac", U = "cfxui__Button__icon__44e51", $ = "cfxui__Button__icononly__4f786", z = "cfxui__Button__decorator__39a9b", o = {
   unsetAll: M,
   root: j,
   fullWidth: F,
-  primary: v,
-  secondary: w,
+  borderShredded: v,
+  primary: w,
+  secondary: D,
   "on-light": "cfxui__Button__on-light__ae69c",
-  linked: D,
-  quicklink: P,
-  icon: R,
-  icononly: U,
-  decorator: $
+  linked: P,
+  quicklink: R,
+  icon: U,
+  icononly: $,
+  decorator: z
 };
-function z(l) {
+function E(l) {
   const {
-    text: o = null,
+    text: t = null,
     icon: n,
     iconLeft: e,
-    iconClassName: u,
+    iconClassName: _,
     decorator: i = null
   } = l;
   return /* @__PURE__ */ q(I, { children: [
-    !!e && /* @__PURE__ */ a(h, { name: e, className: b(t.icon, u) }),
-    o,
-    !!n && /* @__PURE__ */ a(h, { name: n, className: b(t.icon, u) }),
-    !!i && /* @__PURE__ */ a("div", { className: t.decorator, children: i })
+    !!e && /* @__PURE__ */ r(k, { name: e, className: h(o.icon, _) }),
+    t,
+    !!n && /* @__PURE__ */ r(k, { name: n, className: h(o.icon, _) }),
+    !!i && /* @__PURE__ */ r("div", { className: o.decorator, children: i })
   ] });
 }
-function E(l) {
+function G(l) {
   const {
-    text: o = null,
+    text: t = null,
     icon: n,
     iconLeft: e,
-    theme: u = "tertiary",
+    theme: _ = "tertiary",
     disabled: i = !1,
-    className: r = "",
+    className: d = "",
     autofocus: s = !1,
-    fullWidth: _ = !1,
-    tabIndex: c
+    fullWidth: u = !1,
+    borderShredded: c = !1,
+    tabIndex: a
   } = l;
-  return b(t.unsetAll, t.root, t[u], r, {
-    [t.disabled]: i,
-    [t.icononly]: (!!n || !!e) && (o === null || typeof o > "u"),
-    [t.text]: !!o,
-    [t.autofocus]: s || typeof c < "u",
-    [t.fullWidth]: _
+  return h(o.unsetAll, o.root, o[_], d, {
+    [o.disabled]: i,
+    [o.icononly]: (!!n || !!e) && (t === null || typeof t > "u"),
+    [o.text]: !!t,
+    [o.autofocus]: s || typeof a < "u",
+    [o.fullWidth]: u,
+    [o.borderShredded]: c
   });
 }
-function G(l) {
+function H(l) {
   const {
-    text: o = null,
+    text: t = null,
     icon: n,
     iconLeft: e,
-    iconClassName: u,
+    iconClassName: _,
     title: i = "",
-    type: r = "button",
+    type: d = "button",
     className: s = "",
-    theme: _ = "tertiary",
+    theme: u = "tertiary",
     disabled: c = !1,
-    onClick: y = m,
-    onMouseDown: k = m,
-    onMouseUp: p = m,
+    onClick: a = x,
+    onMouseDown: p = x,
+    onMouseUp: N = x,
     autofocus: f = !1,
-    tabIndex: d,
+    tabIndex: m,
     fullWidth: B = !1,
-    ariaLabel: N = "",
-    ref: C,
+    ariaLabel: C = "",
+    borderShredded: y = !1,
+    ref: S,
     ...W
-  } = l, g = x.useMemo(() => E({
-    text: o,
+  } = l, g = b.useMemo(() => G({
+    text: t,
     icon: n,
     iconLeft: e,
-    theme: _,
+    theme: u,
     disabled: c,
     className: s,
     autofocus: f,
     fullWidth: B,
-    tabIndex: d
+    tabIndex: m,
+    borderShredded: y
   }), [
     f,
     s,
@@ -88,34 +93,35 @@ function G(l) {
     c,
     n,
     e,
-    d,
-    o,
-    _
-  ]), A = x.useCallback((L) => {
-    c || y(L);
-  }, [c, y]);
-  return /* @__PURE__ */ a(
+    m,
+    t,
+    u,
+    y
+  ]), A = b.useCallback((L) => {
+    c || a(L);
+  }, [c, a]);
+  return /* @__PURE__ */ r(
     "button",
     {
-      ref: C,
+      ref: S,
       disabled: c,
       className: g,
       onClick: A,
-      onMouseDown: k,
-      onMouseUp: p,
+      onMouseDown: p,
+      onMouseUp: N,
       autoFocus: f,
-      tabIndex: d,
+      tabIndex: m,
       title: i,
-      type: r,
-      "aria-label": N,
+      type: d,
+      "aria-label": C,
       ...W,
-      children: /* @__PURE__ */ a(z, { ...l })
+      children: /* @__PURE__ */ r(E, { ...l })
     }
   );
 }
-const S = x.memo(G);
+const V = b.memo(H);
 export {
-  z as ButtonContent,
-  S as default,
-  E as getButtonClassName
+  E as ButtonContent,
+  V as default,
+  G as getButtonClassName
 };