@cfx-dev/ui-components 4.2.23 → 4.3.0

package/dist/components/Table/TableShowcase.js

@@ -1,62 +1,61 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import d from "react";
-import { Badge as l } from "../Badge/Badge.js";
-import { Flex as a } from "../Layout/Flex/Flex.js";
-import "../Interactive/Interactive.js";
-import { Scrollable as c } from "../Layout/Scrollable/Scrollable.js";
-import "../Layout/Scrollable/VirtualScrollable.js";
-import { Text as r } from "../Text/Text.js";
-import "../../utils/ui/ui.js";
-import { Table as o } from "./Table.js";
-const i = [
-  [
-    "Cell 1",
-    "Cell 2",
-    "Cell 3",
-    new Date(2023, 0, 1).toLocaleDateString(),
-    /* @__PURE__ */ e(l, { color: "error", children: "Error" }, "1")
-  ],
-  ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "2")],
-  ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")],
-  ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "2")],
-  ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")],
-  ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "2")],
-  ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")],
-  ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "2")],
-  ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")],
-  ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "2")],
-  ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")],
-  ["Cell 4", "Cell 5", "Cell 6", new Date(2023, 1, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "2")],
-  ["Cell 7", "Cell 8", "Cell 9", new Date(2023, 2, 1).toLocaleDateString(), /* @__PURE__ */ e(l, { children: "Badge" }, "3")]
-], n = [
-  { text: "Header 1" },
-  { text: "Header 2" },
-  { text: "Header 3" },
-  { text: "Date" },
-  { text: "Item" }
-];
-function C() {
-  return /* @__PURE__ */ t(a, { gap: "large", vertical: !0, children: [
-    /* @__PURE__ */ t(a, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "Table" }),
-      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(o, { headers: n, data: i }) })
-    ] }),
-    /* @__PURE__ */ t(a, { fullWidth: !0, vertical: !0, children: [
-      /* @__PURE__ */ e(r, { children: "Table with scroll" }),
-      /* @__PURE__ */ e(
-        "div",
-        {
-          style: {
-            height: "400px",
-            overflow: "hidden"
-          },
-          children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(o, { includeRadio: !0, headers: n, data: i }) })
-        }
-      )
+import { jsxs as o, jsx as l } from "react/jsx-runtime";
+import r from "react";
+import h from "../Button/Button.js";
+import "../../utils/links.js";
+import { Table as e } from "./index.js";
+import C from "./TableIconButton.js";
+function a() {
+  const [n, d] = r.useState(null), c = r.useCallback((t) => {
+    d((i) => i === t ? null : t);
+  }, []);
+  return /* @__PURE__ */ o(e.Root, { children: [
+    /* @__PURE__ */ l(e.Header, { sticky: !0, children: /* @__PURE__ */ o(e.Row, { children: [
+      /* @__PURE__ */ l(e.CellCheckbox, { as: "th", isPlaceholder: !0 }),
+      /* @__PURE__ */ o(e.Cell, { as: "th", width: "30%", gap: 1, onClick: () => console.log(">>> sort click"), children: [
+        "Header 1",
+        /* @__PURE__ */ l(C, { name: "Sort" })
+      ] }),
+      /* @__PURE__ */ l(e.Cell, { as: "th", children: "Header 2" }),
+      /* @__PURE__ */ o(e.Cell, { as: "th", gap: 1, children: [
+        "Header 3",
+        /* @__PURE__ */ l(C, { name: "Sort", onClick: () => console.log(">>> sort click") })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ o(e.Body, { children: [
+      /* @__PURE__ */ o(e.Row, { color: "red", children: [
+        /* @__PURE__ */ l(e.CellCheckbox, { checked: n === 1, disabled: !0 }),
+        /* @__PURE__ */ l(e.Cell, { children: "Content row 1 Cell 1" }),
+        /* @__PURE__ */ l(e.Cell, { children: "Content row 1 Cell 2" }),
+        /* @__PURE__ */ l(e.Cell, { children: "Content row 1 Cell 3" })
+      ] }),
+      /* @__PURE__ */ o(e.Row, { onClick: () => c(2), selected: n === 2, children: [
+        /* @__PURE__ */ l(e.CellCheckbox, { checked: n === 2 }),
+        /* @__PURE__ */ l(e.Cell, { children: "Content row 2 Cell 1" }),
+        /* @__PURE__ */ l(e.Cell, { children: "Content row 2 Cell 2" }),
+        /* @__PURE__ */ l(e.Cell, { children: "Content row 2 Cell 3" })
+      ] }),
+      /* @__PURE__ */ o(e.Row, { color: "yellow", onClick: () => c(3), selected: n === 3, children: [
+        /* @__PURE__ */ l(e.CellCheckbox, { checked: n === 3 }),
+        /* @__PURE__ */ l(e.Cell, { children: "Content row 3 Cell 1" }),
+        /* @__PURE__ */ l(e.Cell, { children: "Content row 3 Cell 2" }),
+        /* @__PURE__ */ l(e.Cell, { children: /* @__PURE__ */ l(h, { theme: "primary", text: "123", onClick: (t) => t.stopPropagation() }) })
+      ] }),
+      /* @__PURE__ */ o(e.Row, { color: "green", onClick: () => c(4), selected: n === 4, children: [
+        /* @__PURE__ */ l(e.CellCheckbox, { checked: n === 4 }),
+        /* @__PURE__ */ l(e.Cell, { children: "Content row 4 Cell 1" }),
+        /* @__PURE__ */ l(e.Cell, { children: "Content row 4 Cell 2" }),
+        /* @__PURE__ */ l(e.Cell, { children: "Content row 4 Cell 3" })
+      ] }),
+      /* @__PURE__ */ o(e.Row, { children: [
+        /* @__PURE__ */ l(e.CellCheckbox, { checked: n === 5, disabled: !0 }),
+        /* @__PURE__ */ l(e.Cell, { children: "Content row 5 Cell 1" }),
+        /* @__PURE__ */ l(e.Cell, { children: "Content row 5 Cell 2" }),
+        /* @__PURE__ */ l(e.Cell, { children: "Content row 5 Cell 3" })
+      ] })
     ] })
   ] });
 }
-const f = d.memo(C);
+const p = r.memo(a);
 export {
-  f as default
+  p as default
 };

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

@@ -1,2 +1,20 @@
-export { Table, TableIconButton, TableHeaderItem, TableRow, } from './Table';
-export type { TableHeaderType, TableProps, TableRowType, TableDataContainerType, TableHeaderItemProps, TableRowProps, } from './Table';
+import { default as TableBody } from './TableBody';
+import { default as TableCell } from './TableCell';
+import { default as TableHeader } from './TableHeader';
+import { default as TableRoot } from './TableRoot';
+import { default as TableRow } from './TableRow';
+
+export declare const Table: {
+    Root: typeof TableRoot;
+    Header: typeof TableHeader;
+    Body: typeof TableBody;
+    Row: typeof TableRow;
+    Cell: typeof TableCell;
+    CellCheckbox: import('react').MemoExoticComponent<(props: import('./TableCellCheckbox').TableCellCheckboxProps) => import("react/jsx-runtime").JSX.Element>;
+};
+export { default as TableIconButton } from './TableIconButton';
+export type { TableRootProps } from './TableRoot';
+export type { TableBodyProps } from './TableBody';
+export type { TableHeaderProps } from './TableHeader';
+export type { TableCellProps } from './TableCell';
+export type { TableRowProps } from './TableRow';

package/dist/components/Table/index.js

@@ -1,7 +1,19 @@
-import { Table as o, TableHeaderItem as b, TableIconButton as l, TableRow as t } from "./Table.js";
+import o from "./TableBody.js";
+import e from "./TableCell.js";
+import l from "./TableCellCheckbox.js";
+import r from "./TableHeader.js";
+import t from "./TableRoot.js";
+import m from "./TableRow.js";
+import { default as x } from "./TableIconButton.js";
+const C = {
+  Root: t,
+  Header: r,
+  Body: o,
+  Row: m,
+  Cell: e,
+  CellCheckbox: l
+};
 export {
-  o as Table,
-  b as TableHeaderItem,
-  l as TableIconButton,
-  t as TableRow
+  C as Table,
+  x as TableIconButton
 };

package/dist/components/Tabular/TabularShowcase.js

@@ -1,6 +1,6 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import o from "react";
-import { Flex as i } from "../Layout/Flex/Flex.js";
+import i from "../Layout/Flex/Flex.js";
 import { Text as l } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
 import { Tabular as m } from "./Tabular.js";

package/dist/components/Text/Text.d.ts

@@ -6,7 +6,10 @@ export declare const lineHeightResponsiveValueFormatter: (val: ResponsiveTextSiz
 export declare const TEXT_OPACITY_MAP: Record<TextOpacity, number | string>;
 export declare const getTextOpacity: (opacity?: TextOpacity, otherwise?: string | number) => string | number;
 export declare const DEFAULT_TEXT_COLOR = "primary";
-export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
-export declare const TextBlock: React.ForwardRefExoticComponent<TextProps & {
+export declare function Text(props: TextProps & {
+    ref?: React.Ref<HTMLElement>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TextBlock(props: TextProps & {
     asDiv?: undefined;
-} & React.RefAttributes<HTMLElement>>;
+    ref?: React.Ref<HTMLElement>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Text/Text.js

@@ -1,18 +1,17 @@
-import { jsx as f } from "react/jsx-runtime";
-import l from "react";
-import { clsx as w } from "../../utils/clsx.js";
-import { getColor as A } from "../../utils/color.js";
-import { ui as t } from "../../utils/ui/ui.js";
-import { TextSizeEnum as _ } from "../../utils/ui/ui.types.js";
-const E = "cfxui__Text__root__2fe11", O = "cfxui__Text__centered__4d7bd", F = "cfxui__Text__underlined__5860e", H = "cfxui__Text__strikethrough__e3ee3", N = "cfxui__Text__truncated__417f4", $ = "cfxui__Text__typographic__d8155", B = "cfxui__Text__block__cb1b6", n = {
-  root: E,
+import { jsx as c } from "react/jsx-runtime";
+import { clsx as A } from "../../utils/clsx.js";
+import { getColor as E } from "../../utils/color.js";
+import { ui as o } from "../../utils/ui/ui.js";
+import { TextSizeEnum as a } from "../../utils/ui/ui.types.js";
+const F = "cfxui__Text__root__2fe11", O = "cfxui__Text__centered__4d7bd", H = "cfxui__Text__underlined__5860e", N = "cfxui__Text__strikethrough__e3ee3", $ = "cfxui__Text__truncated__417f4", w = "cfxui__Text__typographic__d8155", P = "cfxui__Text__block__cb1b6", r = {
+  root: F,
   centered: O,
-  underlined: F,
-  strikethrough: H,
-  truncated: N,
-  typographic: $,
-  block: B
-}, P = (e) => e in _ ? t.fontSize(e) : typeof e == "number" ? t.q(e) : e, q = (e) => e in _ ? t.lineHeight(e) : typeof e == "number" ? t.q(e) : e, D = {
+  underlined: H,
+  strikethrough: N,
+  truncated: $,
+  typographic: w,
+  block: P
+}, q = (e) => e in a ? o.fontSize(e) : typeof e == "number" ? o.q(e) : e, B = (e) => e in a ? o.lineHeight(e) : typeof e == "number" ? o.q(e) : e, D = {
   0: 0,
   25: "var(--text-opacity-25)",
   50: "var(--text-opacity-50)",
@@ -25,64 +24,69 @@ const E = "cfxui__Text__root__2fe11", O = "cfxui__Text__centered__4d7bd", F = "c
   h4: "h4",
   h5: "h5",
   h6: "h6"
-}, L = (e, o = 1) => {
-  const r = typeof e == "string" && D[e];
-  return typeof r == "string" || typeof r == "number" ? r : o;
-}, M = "primary", V = l.forwardRef(function(o, r) {
+}, L = (e, n = 1) => {
+  const t = typeof e == "string" && D[e];
+  return typeof t == "string" || typeof t == "number" ? t : n;
+}, M = "primary";
+function V(e) {
   const {
-    family: c,
-    size: i = "normal",
-    weight: u = "normal",
-    letterSpacing: p = "normal",
-    as: s = "span",
-    centered: h = !1,
-    truncated: m = !1,
-    typographic: g = !1,
-    uppercase: d = !1,
-    userSelectable: x = !1,
-    underlined: y = !1,
-    strikethrough: T = !1,
-    children: b,
-    className: k,
-    style: R
-  } = o, S = s === "div", C = w(
-    n.root,
-    k,
-    t.getResponsiveClassnames("font-size", i),
-    t.getResponsiveClassnames("line-height", i),
+    family: n,
+    size: t = "normal",
+    weight: l = "normal",
+    letterSpacing: f = "normal",
+    color: _,
+    opacity: u,
+    as: i = "span",
+    centered: p = !1,
+    truncated: h = !1,
+    typographic: m = !1,
+    uppercase: g = !1,
+    userSelectable: y = !1,
+    underlined: d = !1,
+    strikethrough: x = !1,
+    children: T,
+    className: b,
+    style: k,
+    ref: S
+  } = e, C = i === "div", R = A(
+    r.root,
+    b,
+    o.getResponsiveClassnames("font-size", t),
+    o.getResponsiveClassnames("line-height", t),
     {
-      [n.block]: S,
-      [n.centered]: h,
-      [n.truncated]: m,
-      [n.underlined]: y,
-      [n.strikethrough]: T,
-      [n.typographic]: g,
-      [t.cls.userSelectableText]: x
+      [r.block]: C,
+      [r.centered]: p,
+      [r.truncated]: h,
+      [r.underlined]: d,
+      [r.strikethrough]: x,
+      [r.typographic]: m,
+      [o.cls.userSelectableText]: y
     }
-  ), v = A({
-    ...o,
-    color: o.color || M,
-    opacity: L(o.opacity)
-  }), z = typeof c == "string" ? c : I[s] || "primary", a = {
+  ), v = E({
+    ...e,
+    color: _ || M,
+    opacity: L(u)
+  }), z = typeof n == "string" ? n : I[i] || "primary", s = {
     color: v,
     fontFamily: `var(--font-family-${z})`,
-    lineHeight: `var(--line-height-${i})`,
-    letterSpacing: `var(--letter-spacing-${p})`,
-    fontWeight: `var(--font-weight-${u})`,
-    ...t.getResponsiveStyles("font-size", i, P),
-    ...t.getResponsiveStyles("line-height", i, q),
-    ...R
+    lineHeight: `var(--line-height-${t})`,
+    letterSpacing: `var(--letter-spacing-${f})`,
+    fontWeight: `var(--font-weight-${l})`,
+    ...o.getResponsiveStyles("font-size", t, q),
+    ...o.getResponsiveStyles("line-height", t, B),
+    ...k
   };
-  return d && (a.textTransform = "uppercase"), /* @__PURE__ */ f(s, { ref: r, dir: "auto", className: C, style: a, children: b });
-}), K = l.forwardRef(function(o, r) {
-  return /* @__PURE__ */ f(V, { ref: r, ...o, as: "div" });
-});
+  return g && (s.textTransform = "uppercase"), /* @__PURE__ */ c(i, { ref: S, dir: "auto", className: R, style: s, children: T });
+}
+function J(e) {
+  return /* @__PURE__ */ c(V, { ...e, as: "div" });
+}
 export {
   M as DEFAULT_TEXT_COLOR,
   D as TEXT_OPACITY_MAP,
   V as Text,
-  K as TextBlock,
+  J as TextBlock,
   L as getTextOpacity,
-  q as lineHeightResponsiveValueFormatter,
-  P as textSizeResponsiveValueFormatter
+  B as lineHeightResponsiveValueFormatter,
+  q as textSizeResponsiveValueFormatter
 };

package/dist/components/Text/TextShowcase.js

@@ -1,43 +1,50 @@
-import { jsx as o, jsxs as t, Fragment as e } from "react/jsx-runtime";
-import p from "react";
+import { jsx as o, jsxs as t, Fragment as a } from "react/jsx-runtime";
+import s from "react";
+import m from "../Layout/Flex/Flex.js";
 import { Text as c } from "./Text.js";
-import { Separator as d } from "../Separator/Separator.js";
-const h = "cfxui__TextShowcase__root__a3632", _ = {
-  root: h
-}, f = "The quick brown fox jumps over the lazy dog.", T = "How vexingly quick daft zebras jump.";
-function m() {
-  return /* @__PURE__ */ t(e, { children: [
-    f,
+import { Separator as l } from "../Separator/Separator.js";
+const _ = "cfxui__TextShowcase__root__a3632", f = {
+  root: _
+}, u = "The quick brown fox jumps over the lazy dog.", T = "How vexingly quick daft zebras jump.";
+function x() {
+  return /* @__PURE__ */ t(a, { children: [
+    u,
     /* @__PURE__ */ o("br", {}),
     T
   ] });
 }
-function u(a) {
+function g(p) {
   const {
-    items: l
-  } = a;
-  return /* @__PURE__ */ o("div", { className: _.root, children: l.map((r) => /* @__PURE__ */ t(e, { children: [
-    /* @__PURE__ */ t("div", { children: [
-      /* @__PURE__ */ o(c, { ...r.textProps, children: r.title }),
-      /* @__PURE__ */ o("br", {}),
-      /* @__PURE__ */ t(c, { color: "secondary", children: [
-        r.descriptions.map((n, s) => /* @__PURE__ */ t(e, { children: [
-          n,
-          s < r.descriptions.length - 1 && /* @__PURE__ */ o("br", {})
-        ] })),
-        Object.entries(r.textProps).map(([n, s], i) => /* @__PURE__ */ t(e, { children: [
-          r.descriptions.length > 0 && i === 0 && /* @__PURE__ */ o(d, { content: "props", offset: "large" }),
-          n,
-          ": ",
-          s.toString(),
-          i < r.descriptions.length - 1 && /* @__PURE__ */ o("br", {})
-        ] }))
-      ] })
-    ] }),
-    /* @__PURE__ */ o(c, { ...r.textProps, children: /* @__PURE__ */ o(m, {}) })
+    items: d
+  } = p;
+  return /* @__PURE__ */ o(m, { direction: "column", children: d.map((r, h) => /* @__PURE__ */ t(a, { children: [
+    h > 0 && /* @__PURE__ */ o(l, { mt: 6, mb: 6 }),
+    /* @__PURE__ */ t("div", { className: f.root, children: [
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ o(c, { ...r.textProps, children: r.title }),
+        /* @__PURE__ */ o("br", {}),
+        /* @__PURE__ */ t(c, { color: "secondary", children: [
+          r.descriptions.map((e, n) => (
+            // eslint-disable-next-line react/no-array-index-key
+            /* @__PURE__ */ t(s.Fragment, { children: [
+              e,
+              n < r.descriptions.length - 1 && /* @__PURE__ */ o("br", {})
+            ] }, `description_${n}`)
+          )),
+          Object.entries(r.textProps).map(([e, n], i) => /* @__PURE__ */ t(s.Fragment, { children: [
+            r.descriptions.length > 0 && i === 0 && /* @__PURE__ */ o(l, { content: "props", offset: "large" }),
+            e,
+            ": ",
+            n.toString(),
+            i < r.descriptions.length - 1 && /* @__PURE__ */ o("br", {})
+          ] }, `prop_${e}`))
+        ] })
+      ] }),
+      /* @__PURE__ */ o(c, { ...r.textProps, children: /* @__PURE__ */ o(x, {}) })
+    ] }, `prop_${r.title}`)
   ] })) });
 }
-const w = p.memo(u);
+const C = s.memo(g);
 export {
-  w as default
+  C as default
 };

package/dist/components/Title/Title.d.ts

@@ -4,7 +4,9 @@ export declare const TITLE_OUTLET_ID = "title-outlet";
 export type TitleFixedOn = 'top' | 'top-left' | 'right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left';
 export declare function titleGetCssStyle(fixed: boolean, delay: number, [x, y]: number[]): React.CSSProperties;
 export declare function titleGetCoords(element: HTMLElement, fixedOn: TitleFixedOn): [number, number];
-export type TitleChildren = ((ref: React.RefObject<any>) => React.ReactNode) | React.ReactElement;
+export type TitleChildren = ((ref: React.RefObject<unknown>) => React.ReactNode) | React.ReactElement<React.PropsWithChildren<{
+    ref: React.RefObject<unknown> | React.RefCallback<unknown>;
+}>>;
 export interface TitleProps {
     children: TitleChildren;
     title?: React.ReactNode;

package/dist/components/Title/TitleShowcase.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import i from "react";
-import { Flex as r } from "../Layout/Flex/Flex.js";
+import r from "../Layout/Flex/Flex.js";
 import { Text as o } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
 import { Title as l } from "./Title.js";

package/dist/components/ToggleGroup/ToggleGroupShowcase.js

@@ -1,6 +1,6 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import u from "react";
-import { Flex as r } from "../Layout/Flex/Flex.js";
+import r from "../Layout/Flex/Flex.js";
 import { Text as a } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
 import { ToggleGroup as i } from "./ToggleGroup.js";