@cfx-dev/ui-components 5.0.5 → 5.0.7

package/dist/assets/css/TableResponsiveText.css

@@ -1 +1 @@
-.cfxui__TableResponsiveText__root__0e257{position:relative;min-width:calc(var(--quant) * 15);z-index:-1}.cfxui__TableResponsiveText__root__0e257 .cfxui__TableResponsiveText__text__78e87{position:absolute;left:0;right:0;overflow:hidden}
+.cfxui__TableResponsiveText__root__0e257{position:relative;display:flex;align-items:center;width:100%;min-width:var(--min-width)}.cfxui__TableResponsiveText__root__0e257 .cfxui__TableResponsiveText__text__78e87{position:absolute;left:0;right:0;z-index:1;overflow-x:clip}

package/dist/assets/css/Text.css

@@ -1 +1 @@
-.cfxui__Text__root__2fe11{--trim-line-height: calc(var(--font-size-current) * var(--line-height-current));--trim-extra-height: calc(var(--trim-line-height) - 1cap);--trim-size: calc((var(--trim-extra-height) / 2) * -1)}.cfxui__Text__root__2fe11{transition:all .25s ease,outline-offset 0s,outline 0s}.cfxui__Text__root__2fe11:before{content:"";margin-bottom:calc(var(--trim-size) - .015cap);display:table}.cfxui__Text__root__2fe11:after{content:"";margin-top:calc(var(--trim-size) + .025cap);display:table}.cfxui__Text__root__2fe11.cfxui__Text__verticalTrimDisabled__34631:before,.cfxui__Text__root__2fe11.cfxui__Text__verticalTrimDisabled__34631:after{display:none;margin:0}.cfxui__Text__root__2fe11.cfxui__Text__centered__4d7bd{text-align:center}.cfxui__Text__root__2fe11.cfxui__Text__underlined__5860e{text-decoration:underline}.cfxui__Text__root__2fe11.cfxui__Text__strikethrough__e3ee3{text-decoration:line-through}.cfxui__Text__root__2fe11.cfxui__Text__truncated__417f4{width:100%;line-height:1.1;white-space:nowrap;overflow:hidden;mask:linear-gradient(90deg,red,red calc(100% - 2ch),transparent)}.cfxui__Text__root__2fe11.cfxui__Text__typographic__d8155{overflow-wrap:break-word}.cfxui__Text__root__2fe11.cfxui__Text__typographic__d8155 li{margin-left:calc(var(--quant) * 4)}.cfxui__Text__root__2fe11:not(.cfxui__Text__typographic__d8155) a{color:inherit;text-decoration:none}.cfxui__Text__root__2fe11.cfxui__Text__block__cb1b6{max-width:100%}
+.cfxui__Text__root__2fe11{--trim-line-height: calc(var(--font-size-current) * var(--line-height-current));--trim-extra-height: calc(var(--trim-line-height) - 1cap);--trim-size: calc((var(--trim-extra-height) / 2) * -1)}.cfxui__Text__root__2fe11{transition:all .25s ease,outline-offset 0s,outline 0s}.cfxui__Text__root__2fe11:before{content:"";margin-bottom:calc(var(--trim-size) - .015cap);display:table}.cfxui__Text__root__2fe11:after{content:"";margin-top:calc(var(--trim-size) + .025cap);display:table}.cfxui__Text__root__2fe11.cfxui__Text__verticalTrimDisabled__34631:before,.cfxui__Text__root__2fe11.cfxui__Text__verticalTrimDisabled__34631:after{display:none;margin:0}.cfxui__Text__root__2fe11.cfxui__Text__centered__4d7bd{text-align:center}.cfxui__Text__root__2fe11.cfxui__Text__underlined__5860e{text-decoration:underline}.cfxui__Text__root__2fe11.cfxui__Text__strikethrough__e3ee3{text-decoration:line-through}.cfxui__Text__root__2fe11.cfxui__Text__truncated__417f4{width:100%;white-space:nowrap;overflow-x:clip;display:inline-block;mask:linear-gradient(90deg,rgba(var(--color-red),1),rgba(var(--color-red),1) calc(100% - 2ch),transparent)}.cfxui__Text__root__2fe11.cfxui__Text__typographic__d8155{overflow-wrap:break-word}.cfxui__Text__root__2fe11.cfxui__Text__typographic__d8155 li{margin-left:calc(var(--quant) * 4)}.cfxui__Text__root__2fe11:not(.cfxui__Text__typographic__d8155) a{color:inherit;text-decoration:none}.cfxui__Text__root__2fe11.cfxui__Text__block__cb1b6{max-width:100%}

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/dist/components/TableResponsiveText/TableResponsiveText.d.ts

@@ -4,6 +4,7 @@ import { TextProps } from '../Text';
 export interface TableResponsiveTextProps extends TextProps {
     title?: string;
     rootClassName?: string;
+    minWidth?: string | number;
 }
 declare function TableResponsiveText(props: TableResponsiveTextProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof TableResponsiveText>;

package/dist/components/TableResponsiveText/TableResponsiveText.js

@@ -1,23 +1,32 @@
-import { jsx as t } from "react/jsx-runtime";
-import n from "react";
-import l from "../Flex/Flex.js";
-import { clsx as m } from "../../utils/clsx.js";
-import { Text as c } from "../Text/Text.js";
-import "../../utils/ui/ui.js";
+import { jsx as e } from "react/jsx-runtime";
+import l from "react";
+import { Text as m } from "../Text/Text.js";
+import { ui as c } from "../../utils/ui/ui.js";
 import { Title as a } from "../Title/Title.js";
-const x = "cfxui__TableResponsiveText__root__0e257", _ = "cfxui__TableResponsiveText__text__78e87", o = {
-  root: x,
-  text: _
+import { clsx as x } from "../../utils/clsx.js";
+const _ = "cfxui__TableResponsiveText__root__0e257", f = "cfxui__TableResponsiveText__text__78e87", i = {
+  root: _,
+  text: f
 };
-function f(e) {
+function p(o) {
   const {
-    title: r,
-    children: s,
-    rootClassName: i
-  } = e;
-  return /* @__PURE__ */ t(a, { title: r ?? s, children: /* @__PURE__ */ t(l, { gap: "medium", centered: !0, className: m(o.root, i), children: /* @__PURE__ */ t(c, { truncated: !0, ...e, className: o.text }) }) });
+    title: n,
+    children: r,
+    rootClassName: s,
+    minWidth: t = 15
+  } = o;
+  return /* @__PURE__ */ e(a, { title: n ?? r, fixedOn: "top", children: /* @__PURE__ */ e(
+    "div",
+    {
+      className: x(i.root, s),
+      style: {
+        "--min-width": typeof t == "number" ? c.q(t) : t
+      },
+      children: /* @__PURE__ */ e(m, { truncated: !0, ...o, className: i.text })
+    }
+  ) });
 }
-const C = n.memo(f);
+const y = l.memo(p);
 export {
-  C as default
+  y as default
 };

package/package.json

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