@cfx-dev/ui-components 4.2.24 → 4.3.0

package/dist/components/DataTable/DataTable.js

@@ -0,0 +1,163 @@
+import { jsx as t, jsxs as x } from "react/jsx-runtime";
+import s, { useState as k } from "react";
+import $ from "../Checkbox/Checkbox.js";
+import { clsx as p } from "../../utils/clsx.js";
+import "../Layout/Box/Box.js";
+import "../Layout/Flex/Flex.js";
+import "../../utils/ui/ui.js";
+import "../Table/TableCellCheckbox.js";
+import S from "../Table/TableIconButton.js";
+import { Text as j } from "../Text/Text.js";
+const z = "cfxui__DataTable__root__49417", A = "cfxui__DataTable__radio__8126b", B = "cfxui__DataTable__radioContent__9c8cc", E = "cfxui__DataTable__pointer__91cb4", O = "cfxui__DataTable__selectedRow__39a1c", g = "cfxui__DataTable__headerText__aa726", F = "cfxui__DataTable__headerContent__1c65d", H = "cfxui__DataTable__hidden__41ce8", a = {
+  root: z,
+  radio: A,
+  radioContent: B,
+  pointer: E,
+  selectedRow: O,
+  headerText: g,
+  headerContent: F,
+  hidden: H
+};
+function V(b) {
+  const {
+    item: e,
+    onSortClick: c
+  } = b, _ = s.useCallback(() => {
+    c && c(e.sortKey || e.text);
+  }, [e.sortKey, e.text, c]), n = p(a.headerContent, {
+    [a.sortable]: e.sortable,
+    [a.empty]: !e.text
+  });
+  return /* @__PURE__ */ t(
+    "th",
+    {
+      className: e.sortable ? a.pointer : void 0,
+      onClick: e.sortable ? _ : void 0,
+      children: /* @__PURE__ */ x("div", { className: n, children: [
+        /* @__PURE__ */ t(
+          j,
+          {
+            className: a.headerText,
+            color: "secondary",
+            letterSpacing: "large",
+            weight: "bold",
+            uppercase: !0,
+            size: "xxsmall",
+            children: e.text
+          }
+        ),
+        !!e.sortable && /* @__PURE__ */ t(
+          S,
+          {
+            name: "Sort",
+            onClick: _
+          }
+        )
+      ] })
+    }
+  );
+}
+function q(b) {
+  const {
+    index: e,
+    includeRadio: c = !1,
+    loading: _,
+    selectedRow: n,
+    item: C,
+    dataContainer: m,
+    onSelectChange: r
+  } = b, f = s.useCallback((o) => {
+    r(
+      o ? e : null
+    );
+  }, [r, e]), h = s.useCallback(() => {
+    r(e);
+  }, [r, e]), T = p({
+    [a.selectedRow]: n === e,
+    [a.pointer]: c
+  });
+  return /* @__PURE__ */ x(
+    "tr",
+    {
+      className: T,
+      onClick: c ? h : void 0,
+      children: [
+        c && /* @__PURE__ */ t("td", { className: p(a.radio, { [a.hidden]: _ }), children: /* @__PURE__ */ t("div", { className: a.radioContent, children: /* @__PURE__ */ t(
+          $,
+          {
+            size: "small",
+            onCheckedChange: f,
+            "aria-label": `${e}`,
+            checked: n === e
+          }
+        ) }) }),
+        C.map((o, u) => {
+          let d;
+          return s.isValidElement(o) ? d = o : m ? d = s.createElement(m, { item: o }) : d = String(o), /* @__PURE__ */ t("td", { children: d }, `item-${u}`);
+        })
+      ]
+    },
+    `row-${e}`
+  );
+}
+function X({
+  headers: b = [],
+  data: e = [],
+  includeRadio: c = !1,
+  loading: _ = !1,
+  onSelectChange: n,
+  dataContainer: C,
+  selectedRow: m = null,
+  sortBy: r,
+  sortOrder: f = "asc",
+  onSortChange: h,
+  className: T
+}) {
+  const [o, u] = k(m), [d, w] = k(r), [D, R] = k(f), v = s.useCallback((l) => {
+    const N = d === l && D === "asc" ? "desc" : "asc";
+    w(l), R(N), h == null || h(l, N);
+  }, [h, d, D]), y = s.useCallback(
+    (l) => {
+      const i = l === o ? null : l;
+      u(i), n == null || n(i);
+    },
+    [n, o]
+  );
+  return s.useEffect(() => {
+    u(m);
+  }, [m]), s.useEffect(() => {
+    w(r);
+  }, [r]), s.useEffect(() => {
+    R(f);
+  }, [f]), /* @__PURE__ */ t("div", { className: p(a.root, T), children: /* @__PURE__ */ x("table", { children: [
+    /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ x("tr", { children: [
+      c && /* @__PURE__ */ t("th", { "aria-label": "Select Row" }),
+      b.map((l, i) => /* @__PURE__ */ t(
+        V,
+        {
+          item: l,
+          onSortClick: v
+        },
+        `header-${i}`
+      ))
+    ] }) }),
+    /* @__PURE__ */ t("tbody", { children: e.map((l, i) => /* @__PURE__ */ t(
+      q,
+      {
+        index: i,
+        item: l,
+        includeRadio: c,
+        loading: _,
+        selectedRow: o,
+        onSelectChange: y,
+        dataContainer: C
+      },
+      `row-${i}`
+    )) })
+  ] }) });
+}
+export {
+  X as DataTable,
+  V as DataTableHeaderItem,
+  q as DataTableRow
+};

package/dist/components/DataTable/DataTableShowcase.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function TableShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof TableShowcase>;
+export default _default;

package/dist/components/DataTable/DataTableShowcase.js

@@ -0,0 +1,60 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import d from "react";
+import { Badge as l } from "../Badge/Badge.js";
+import a from "../Layout/Flex/Flex.js";
+import { Scrollable as c } from "../Layout/Scrollable/Scrollable.js";
+import { Text as r } from "../Text/Text.js";
+import "../../utils/ui/ui.js";
+import { DataTable as o } from "./DataTable.js";
+const n = [
+  [
+    "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")]
+], i = [
+  { 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: i, data: n }) })
+    ] }),
+    /* @__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: i, data: n }) })
+        }
+      )
+    ] })
+  ] });
+}
+const L = d.memo(C);
+export {
+  L as default
+};

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

@@ -0,0 +1,2 @@
+export { DataTable, DataTableHeaderItem, DataTableRow, } from './DataTable';
+export type { DataTableHeaderType, DataTableProps, DataTableRowType, DataTableContainerType, DataTableHeaderItemProps, DataTableRowProps, } from './DataTable';

package/dist/components/DataTable/index.js

@@ -0,0 +1,6 @@
+import { DataTable as t, DataTableHeaderItem as b, DataTableRow as l } from "./DataTable.js";
+export {
+  t as DataTable,
+  b as DataTableHeaderItem,
+  l as DataTableRow
+};

package/dist/components/Decorate/Decorate.d.ts

@@ -5,7 +5,8 @@ export interface DecorateProps {
     children?: React.ReactNode;
     className?: string;
     decoratorClassName?: string;
+    ref?: React.Ref<HTMLDivElement>;
 }
-export declare const Decorate: React.ForwardRefExoticComponent<DecorateProps & React.RefAttributes<HTMLDivElement>>;
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<DecorateProps & React.RefAttributes<HTMLDivElement>>>;
+export declare function Decorate(props: DecorateProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Decorate>;
 export default _default;

package/dist/components/Decorate/Decorate.js

@@ -1,20 +1,24 @@
-import { jsxs as _, jsx as f } from "react/jsx-runtime";
-import a from "react";
-import { clsx as t } from "../../utils/clsx.js";
-const l = "cfxui__Decorate__root__8f2af", i = "cfxui__Decorate__decorator__db06a", e = {
-  root: l,
-  decorator: i
-}, u = a.forwardRef(function(o, c) {
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import f from "react";
+import { clsx as r } from "../../utils/clsx.js";
+const i = "cfxui__Decorate__root__8f2af", N = "cfxui__Decorate__decorator__db06a", a = {
+  root: i,
+  decorator: N
+};
+function u(e) {
   const {
-    decorator: r,
-    children: s,
-    className: d
-  } = o, m = t(e.root, d), n = t(e.decorator, o.decoratorClassName);
-  return /* @__PURE__ */ _("div", { ref: c, className: m, children: [
-    s,
-    !!r && /* @__PURE__ */ f("div", { className: n, children: r })
+    decorator: o,
+    children: t,
+    className: c,
+    decoratorClassName: s,
+    ref: d
+  } = e, m = r(a.root, c), _ = r(a.decorator, s);
+  return /* @__PURE__ */ l("div", { ref: d, className: m, children: [
+    t,
+    !!o && /* @__PURE__ */ n("div", { className: _, children: o })
   ] });
-}), C = a.memo(u);
+}
+const C = f.memo(u);
 export {
   u as Decorate,
   C as default

package/dist/components/Dot/Dot.d.ts

@@ -5,5 +5,6 @@ export type DotSize = 'small' | 'normal' | 'large';
 export interface DotProps extends GetColorProps {
     size?: DotSize;
     className?: string;
+    ref?: React.Ref<HTMLDivElement>;
 }
-export declare const Dot: React.ForwardRefExoticComponent<DotProps & React.RefAttributes<HTMLDivElement>>;
+export declare function Dot(props: DotProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Dot/Dot.js

@@ -1,29 +1,31 @@
-import { jsx as s } from "react/jsx-runtime";
-import i from "react";
+import { jsx as i } from "react/jsx-runtime";
 import { clsx as l } from "../../utils/clsx.js";
 import { getColor as a } from "../../utils/color.js";
-const c = "cfxui__Dot__root__9bed3", r = {
-  root: c,
+const m = "cfxui__Dot__root__9bed3", r = {
+  root: m,
   "size-small": "cfxui__Dot__size-small__b7d03",
   "size-normal": "cfxui__Dot__size-normal__e73b3",
   "size-large": "cfxui__Dot__size-large__4fe0a"
-}, x = i.forwardRef(function(o, _) {
+};
+function z(o) {
   const {
-    size: t = "normal",
-    className: e
+    color: _ = "primary",
+    size: e = "normal",
+    className: s,
+    ref: t
   } = o;
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ i(
     "div",
     {
-      ref: _,
-      className: l(r.root, r[`size-${t}`], e),
+      ref: t,
+      className: l(r.root, r[`size-${e}`], s),
       style: { backgroundColor: a({
         ...o,
-        color: o.color || "primary"
+        color: _
       }) }
     }
   );
-});
+}
 export {
-  x as Dot
+  z as Dot
 };

package/dist/components/DropdownSelect/DropdownSelect.d.ts

@@ -14,6 +14,7 @@ export interface DropdownSelectProps<T = string> {
     disabled?: boolean;
     fullWidth?: boolean;
     onlight?: boolean;
+    ref?: React.Ref<HTMLButtonElement>;
 }
-export declare const DropdownSelect: React.ForwardRefExoticComponent<DropdownSelectProps<string> & React.RefAttributes<HTMLButtonElement>>;
+export declare function DropdownSelect(props: DropdownSelectProps): import("react/jsx-runtime").JSX.Element;
 export default DropdownSelect;