@cfx-dev/ui-components 2.0.10 → 2.1.0

package/dist/components/Layout/Box/Box.d.ts

@@ -1,9 +1,12 @@
 import { default as React } from 'react';
+import { MPProps } from '../../ui';
 
-export interface BoxProps {
+export interface BoxProps extends MPProps {
     noOverflow?: boolean;
     noShrink?: boolean;
     grow?: boolean;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
     /**
      * Number values is treated like quant multiplier
      * String value used as is

package/dist/components/Layout/Box/Box.js

@@ -1,38 +1,104 @@
-import { jsx as m } from "react/jsx-runtime";
-import g from "react";
-import { useContextualStyle as u } from "../../Style/Style.js";
+import { jsx as P } from "react/jsx-runtime";
+import m from "react";
+import { useContextualStyle as j } from "../../Style/Style.js";
 import { ui as d } from "../../ui.js";
-import { clsx as x } from "../../../utils/clsx.js";
-import '../../../assets/Box.css';const p = "_root_1e1ao_1", k = "_grow_1e1ao_7", r = {
-  root: p,
-  "no-overflow": "_no-overflow_1e1ao_1",
-  "no-shrink": "_no-shrink_1e1ao_4",
-  grow: k,
-  "no-grow": "_no-grow_1e1ao_10"
+import { clsx as H } from "../../../utils/clsx.js";
+import '../../../assets/Box.css';const W = "_root_1bvck_1", z = "_grow_1bvck_13", o = {
+  root: W,
+  "full-width": "_full-width_1bvck_1",
+  "full-height": "_full-height_1bvck_4",
+  "no-overflow": "_no-overflow_1bvck_7",
+  "no-shrink": "_no-shrink_1bvck_10",
+  grow: z,
+  "no-grow": "_no-grow_1bvck_16"
 };
-function f(t) {
-  return typeof t == "string" ? t : d.q(t);
+function b(r) {
+  return typeof r == "string" ? r : d.q(r);
 }
-const B = g.forwardRef(function(s, a) {
+const J = m.forwardRef(function(x, y) {
   const {
-    noOverflow: w = !1,
-    noShrink: _ = !1,
-    grow: n = void 0,
-    width: e,
-    height: i,
-    children: l,
-    className: c
-  } = s, h = x(r.root, c, {
-    [r["no-overflow"]]: w,
-    [r["no-shrink"]]: _,
-    [r["no-grow"]]: n === !1,
-    [r.grow]: n === !0
-  }), o = {
-    ...u(),
-    ...s.style || {}
-  };
-  return (e || i) && (e && (o.width = f(e)), i && (o.height = f(i))), !o.width && n === !0 && (o.width = "1px"), /* @__PURE__ */ m("div", { ref: a, className: h, style: o, children: l });
+    noOverflow: S = !1,
+    noShrink: M = !1,
+    grow: e = void 0,
+    width: g,
+    height: a,
+    children: A,
+    className: N,
+    fullWidth: R,
+    fullHeight: q,
+    style: p,
+    // --- MPProps
+    m: l,
+    mt: s,
+    mr: n,
+    mb: f,
+    ml: i,
+    p: c,
+    pt: h,
+    pr: u,
+    pb: _,
+    pl: w
+  } = x, k = j(), B = H(o.root, N, {
+    [o["full-width"]]: R,
+    [o["full-height"]]: q,
+    [o["no-overflow"]]: S,
+    [o["no-shrink"]]: M,
+    [o["no-grow"]]: e === !1,
+    [o.grow]: e === !0
+  }), C = m.useMemo(() => d.getAllMPAttrs({
+    m: l,
+    mt: s,
+    mr: n,
+    mb: f,
+    ml: i,
+    p: c,
+    pt: h,
+    pr: u,
+    pb: _,
+    pl: w
+  }), [
+    l,
+    s,
+    n,
+    f,
+    i,
+    c,
+    h,
+    u,
+    _,
+    w
+  ]), v = m.useMemo(() => d.getAllMPStyles({
+    m: l,
+    mt: s,
+    mr: n,
+    mb: f,
+    ml: i,
+    p: c,
+    pt: h,
+    pr: u,
+    pb: _,
+    pl: w
+  }), [
+    l,
+    s,
+    n,
+    f,
+    i,
+    c,
+    h,
+    u,
+    _,
+    w
+  ]), O = m.useMemo(() => {
+    const t = {
+      ...v,
+      ...k,
+      ...p || {}
+    };
+    return g && (t.width = b(g)), a && (t.height = b(a)), !t.width && e === !0 && (t.width = "1px"), t;
+  }, [e, a, v, p, g, k]);
+  return /* @__PURE__ */ P("div", { ...C, ref: y, className: B, style: O, children: A });
 });
 export {
-  B as Box
+  J as Box
 };

package/dist/components/Layout/Flex/Flex.d.ts

@@ -1,9 +1,8 @@
 import { default as React } from 'react';
+import { BoxProps } from '../Box/Box';
 import { OffesetType } from '../../ui';
 
-export interface FlexProps {
-    fullWidth?: boolean;
-    fullHeight?: boolean;
+export interface FlexProps extends BoxProps {
     centered?: boolean | 'axis' | 'cross-axis' | 'baseline-axis' | 'baseline-cross-axis';
     vertical?: boolean;
     reverseOrder?: boolean;

package/dist/components/Layout/Flex/Flex.js

@@ -1,8 +1,9 @@
-import { jsx as s } from "react/jsx-runtime";
-import u from "react";
+import { jsx as i } from "react/jsx-runtime";
+import f from "react";
+import { Box as u } from "../Box/Box.js";
 import { clsx as b } from "../../../utils/clsx.js";
 import { FlexRestricter as v } from "./FlexRestricter.js";
-import '../../../assets/Flex.css';const z = "_root_w5him_1", R = "_centered_w5him_11", F = "_vertical_w5him_30", C = "_repell_w5him_36", N = "_wrap_w5him_39", E = "_stretch_w5him_51", T = "_horizontal_w5him_57", e = {
+import '../../../assets/Flex.css';const z = "_root_w5him_1", R = "_centered_w5him_11", F = "_vertical_w5him_30", C = "_repell_w5him_36", N = "_wrap_w5him_39", B = "_stretch_w5him_51", E = "_horizontal_w5him_57", e = {
   root: z,
   "full-width": "_full-width_w5him_5",
   "full-height": "_full-height_w5him_8",
@@ -18,8 +19,8 @@ import '../../../assets/Flex.css';const z = "_root_w5him_1", R = "_centered_w5hi
   "align-to-end": "_align-to-end_w5him_42",
   "align-to-end-axis": "_align-to-end-axis_w5him_45",
   "space-between": "_space-between_w5him_48",
-  stretch: E,
-  horizontal: T,
+  stretch: B,
+  horizontal: E,
   "gap-none": "_gap-none_w5him_63",
   "gap-hairthin": "_gap-hairthin_w5him_66",
   "gap-thin": "_gap-thin_w5him_69",
@@ -32,24 +33,21 @@ import '../../../assets/Flex.css';const z = "_root_w5him_1", R = "_centered_w5hi
   "gap-xlarge": "_gap-xlarge_w5him_90",
   "gap-safezone": "_gap-safezone_w5him_93"
 };
-function j(r, i) {
+function T(r, s) {
   const {
-    fullWidth: _ = !1,
-    fullHeight: n = !1,
-    vertical: t = !1,
     centered: a = !1,
-    stretch: o = !1,
-    wrap: c = !1,
-    alignToEnd: h = !1,
-    alignToEndAxis: m = !1,
-    spaceBetween: p = !1,
-    reverseOrder: w = !1,
-    gap: g = "normal",
-    children: d,
-    className: x
-  } = r, f = b(e.root, x, e[`gap-${g}`], {
-    [e["full-width"]]: _,
-    [e["full-height"]]: n,
+    vertical: t = !1,
+    reverseOrder: n = !1,
+    stretch: l = !1,
+    wrap: o = !1,
+    spaceBetween: c = !1,
+    alignToEnd: m = !1,
+    alignToEndAxis: h = !1,
+    gap: p = "normal",
+    children: w,
+    className: g,
+    ...x
+  } = r, d = b(e.root, g, e[`gap-${p}`], {
     [e.centered]: a === !0,
     [e["centered-axis"]]: a === "axis",
     [e["centered-cross-axis"]]: a === "cross-axis",
@@ -57,21 +55,29 @@ function j(r, i) {
     [e["baseline-cross-axis"]]: a === "baseline-cross-axis",
     [e.vertical]: t,
     [e.horizontal]: !t,
-    [e.stretch]: o,
-    [e.wrap]: c,
-    [e["align-to-end"]]: h,
-    [e["align-to-end-axis"]]: m,
-    [e["space-between"]]: p,
-    [e["reverse-order"]]: w
+    [e.stretch]: l,
+    [e.wrap]: o,
+    [e["align-to-end"]]: m,
+    [e["align-to-end-axis"]]: h,
+    [e["space-between"]]: c,
+    [e["reverse-order"]]: n
   });
-  return /* @__PURE__ */ s("div", { ref: i, className: f, children: d });
+  return /* @__PURE__ */ i(
+    u,
+    {
+      ref: s,
+      className: d,
+      ...x,
+      children: w
+    }
+  );
 }
-const A = u.forwardRef(j), l = A;
-l.Restricted = function({
-  children: i
+const j = f.forwardRef(T), _ = j;
+_.Restricted = function({
+  children: s
 }) {
-  return /* @__PURE__ */ s(l, { children: /* @__PURE__ */ s(v, { children: i }) });
+  return /* @__PURE__ */ i(_, { children: /* @__PURE__ */ i(v, { children: s }) });
 };
 export {
-  l as Flex
+  _ as Flex
 };

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

@@ -1,17 +1,29 @@
 import { default as React } from 'react';
 
-interface ITableProps {
-    headers: string[];
-    data: Array<Array<string | number | Date | React.ReactNode>>;
+export interface TableHeaderType {
+    text: string;
+    sortable?: boolean;
+    sortKey?: string;
+}
+export type TableRowType = Array<string | number | Date | React.ReactNode>;
+export type DataContainerType = React.FC<{
+    item: string | number | Date | React.ReactNode;
+}>;
+interface TableHeaderItemProps {
+    item: TableHeaderType;
+    onSortClick?: (sortKey: string) => void;
+}
+export declare function TableHeaderItem(props: TableHeaderItemProps): import("react/jsx-runtime").JSX.Element;
+export interface TableProps {
+    headers: TableHeaderType[];
+    data: TableRowType[];
     includeRadio?: boolean;
-    onSelectChange?: (rowIndex: number) => void;
-    dataContainer?: React.FC<{
-        item: string | number | Date | React.ReactNode;
-    }> | undefined;
-    useSort?: boolean;
+    onSelectChange?: (rowIndex: number | null) => void;
+    dataContainer?: DataContainerType;
+    selectedRow?: number | null;
     sortBy?: string;
     sortOrder?: 'asc' | 'desc';
     onSortChange?: (sortBy: string, sortOrder: 'asc' | 'desc') => void;
 }
-export declare function Table({ headers, data, includeRadio, onSelectChange, dataContainer, useSort, sortBy: initialSortBy, sortOrder: initialSortOrder, onSortChange, }: ITableProps): import("react/jsx-runtime").JSX.Element;
+export declare function Table({ headers, data, includeRadio, onSelectChange, dataContainer, selectedRow: outerSelectedRow, sortBy: outerSortBy, sortOrder: outerSortOrder, onSortChange, }: TableProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Table/Table.js

@@ -1,86 +1,145 @@
-import { jsx as o, jsxs as i } from "react/jsx-runtime";
-import f, { useState as m } from "react";
-import O from "../Checkbox/Checkbox.js";
-import j from "../IconButton/IconButton.js";
-import '../../assets/Table.css';const x = "_pointer_19b0f_18", A = "_selectedRow_19b0f_22", E = "_headerContent_19b0f_40", z = "_sortButton_19b0f_47", l = {
-  "table-responsive": "_table-responsive_19b0f_1",
-  pointer: x,
-  selectedRow: A,
-  headerContent: E,
-  sortButton: z
+import { jsx as t, jsxs as j } from "react/jsx-runtime";
+import l, { useState as C } from "react";
+import N from "../Checkbox/Checkbox.js";
+import B from "../IconButton/IconButton.js";
+import { Text as v } from "../Text/Text.js";
+import { clsx as z } from "../../utils/clsx.js";
+import '../../assets/Table.css';const $ = "_root_jdj5z_1", T = "_radio_jdj5z_15", A = "_pointer_jdj5z_21", E = "_selectedRow_jdj5z_24", O = "_headerContent_jdj5z_34", S = "_sortable_jdj5z_40", F = "_empty_jdj5z_40", H = "_sortButton_jdj5z_43", r = {
+  root: $,
+  radio: T,
+  pointer: A,
+  selectedRow: E,
+  headerContent: O,
+  sortable: S,
+  empty: F,
+  sortButton: H
 };
-function F({
-  headers: u = [],
-  data: B = [],
-  includeRadio: r = !1,
-  onSelectChange: c,
+function V(h) {
+  const {
+    item: e,
+    onSortClick: o
+  } = h, s = l.useCallback(() => {
+    o && o(e.sortKey || e.text);
+  }, [e.sortKey, e.text, o]), b = z(r.headerContent, {
+    [r.sortable]: e.sortable,
+    [r.empty]: !e.text
+  });
+  return /* @__PURE__ */ t(
+    "th",
+    {
+      className: e.sortable ? r.pointer : void 0,
+      onClick: e.sortable ? s : void 0,
+      children: /* @__PURE__ */ j("div", { className: b, children: [
+        /* @__PURE__ */ t(v, { color: "secondary", weight: "bold", uppercase: !0, size: "xxsmall", children: e.text }),
+        !!e.sortable && /* @__PURE__ */ t(
+          B,
+          {
+            className: r.sortButton,
+            color: "secondary",
+            name: "Sort",
+            onClick: s
+          }
+        )
+      ] })
+    }
+  );
+}
+function q(h) {
+  const {
+    index: e,
+    includeRadio: o = !1,
+    selectedRow: s,
+    item: b,
+    dataContainer: m,
+    onSelectChange: a
+  } = h, f = l.useCallback((n) => {
+    a(
+      n ? e : null
+    );
+  }, [a, e]), _ = l.useCallback(() => {
+    a(e);
+  }, [a, e]), p = z({
+    [r.selectedRow]: s === e,
+    [r.pointer]: o
+  });
+  return /* @__PURE__ */ j(
+    "tr",
+    {
+      className: p,
+      onClick: o ? _ : void 0,
+      children: [
+        o && /* @__PURE__ */ t("td", { className: r.radio, children: /* @__PURE__ */ t(
+          N,
+          {
+            size: "small",
+            onCheckedChange: f,
+            "aria-label": `${e}`,
+            checked: s === e
+          }
+        ) }),
+        b.map((n, u) => {
+          let i;
+          return l.isValidElement(n) ? i = n : m ? i = l.createElement(m, { item: n }) : i = String(n), /* @__PURE__ */ t("td", { children: i }, `item-${u}`);
+        })
+      ]
+    },
+    `row-${e}`
+  );
+}
+function M({
+  headers: h = [],
+  data: e = [],
+  includeRadio: o = !1,
+  onSelectChange: s,
   dataContainer: b,
-  useSort: n = !1,
-  sortBy: k,
-  sortOrder: v = "asc",
-  onSortChange: d
+  selectedRow: m = null,
+  sortBy: a,
+  sortOrder: f = "asc",
+  onSortChange: _
 }) {
-  const [p, y] = m(null), [R, w] = m(k), [$, N] = m(v), _ = (e) => {
-    const t = R === e && $ === "asc" ? "desc" : "asc";
-    w(e), N(t), d == null || d(e, t);
-  }, h = f.useCallback(
-    (e, s) => {
-      if (typeof e == "boolean") {
-        const t = e ? s : null;
-        y(t), t !== null && (c == null || c(t));
-      }
+  const [p, n] = C(m), [u, i] = C(a), [k, w] = C(f), R = l.useCallback((c) => {
+    const x = u === c && k === "asc" ? "desc" : "asc";
+    i(c), w(x), _ == null || _(c, x);
+  }, [_, u, k]), y = l.useCallback(
+    (c) => {
+      const d = c === p ? null : c;
+      n(d), s == null || s(d);
     },
-    [c]
+    [s, p]
   );
-  return /* @__PURE__ */ o("div", { className: l.tableResponsive, children: /* @__PURE__ */ i("table", { children: [
-    /* @__PURE__ */ o("thead", { children: /* @__PURE__ */ i("tr", { children: [
-      r && /* @__PURE__ */ o("th", { "aria-label": "Select Row" }),
-      u.map((e, s) => /* @__PURE__ */ o(
-        "th",
+  return l.useEffect(() => {
+    n(m);
+  }, [m]), l.useEffect(() => {
+    i(a);
+  }, [a]), l.useEffect(() => {
+    w(f);
+  }, [f]), /* @__PURE__ */ t("div", { className: r.root, children: /* @__PURE__ */ j("table", { children: [
+    /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ j("tr", { children: [
+      o && /* @__PURE__ */ t("th", { "aria-label": "Select Row" }),
+      h.map((c, d) => /* @__PURE__ */ t(
+        V,
         {
-          className: n ? l.pointer : "",
-          onClick: () => n && _(e),
-          children: /* @__PURE__ */ i("div", { className: l.headerContent, children: [
-            e,
-            n && /* @__PURE__ */ o(
-              j,
-              {
-                className: l.sortButton,
-                color: "secondary",
-                name: "Sort",
-                onClick: n ? () => _(e) : void 0
-              }
-            )
-          ] })
+          item: c,
+          onSortClick: R
         },
-        `header-${s}`
+        `header-${d}`
       ))
     ] }) }),
-    /* @__PURE__ */ o("tbody", { children: B.map((e, s) => /* @__PURE__ */ i(
-      "tr",
+    /* @__PURE__ */ t("tbody", { children: e.map((c, d) => /* @__PURE__ */ t(
+      q,
       {
-        className: `${p === s ? l.selectedRow : ""} ${r ? l.pointer : ""}`,
-        onClick: r ? () => h(!0, s) : void 0,
-        children: [
-          r && /* @__PURE__ */ o("td", { children: /* @__PURE__ */ o(
-            O,
-            {
-              size: "small",
-              onCheckedChange: (t) => h(t, s),
-              "aria-label": `${s}`,
-              checked: p === s
-            }
-          ) }),
-          e.map((t, C) => {
-            let a;
-            return f.isValidElement(t) ? a = t : b ? a = f.createElement(b, { item: t }) : a = String(t), /* @__PURE__ */ o("td", { children: a }, `item-${C}`);
-          })
-        ]
+        index: d,
+        item: c,
+        includeRadio: o,
+        selectedRow: p,
+        onSelectChange: y,
+        dataContainer: b
       },
-      `row-${s}`
+      `row-${d}`
     )) })
   ] }) });
 }
 export {
-  F as Table
+  M as Table,
+  V as TableHeaderItem
 };

package/dist/components/Table/TableShowcase.js

@@ -27,7 +27,13 @@ const i = [
   ["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 = ["Header 1", "Header 2", "Header 3", "Date", "Item"];
+], 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: [

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

@@ -0,0 +1,2 @@
+export { Table } from './Table';
+export type { TableProps } from './Table';

package/dist/components/Table/index.js

@@ -0,0 +1,4 @@
+import { Table as r } from "./Table.js";
+export {
+  r as Table
+};

package/dist/components/ui.d.ts

@@ -1,17 +1,54 @@
 import { TextProps } from './Text/Text.types';
 
-export type OffesetType = 'none' | 'hairthin' | 'thin' | 'xxsmall' | 'xsmall' | 'small' | 'normal' | 'medium' | 'large' | 'xlarge' | 'safezone';
-export type MediaQueryType = 'initial' | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export declare enum OffsetEnum {
+    none = "none",
+    hairthin = "hairthin",
+    thin = "thin",
+    xxsmall = "xxsmall",
+    xsmall = "xsmall",
+    small = "small",
+    normal = "normal",
+    medium = "medium",
+    large = "large",
+    xlarge = "xlarge",
+    safezone = "safezone"
+}
+export type OffesetType = keyof typeof OffsetEnum;
+export declare enum MediaQueryEnum {
+    initial = "initial",
+    xxsmall = "xxsmall",
+    xsmall = "xsmall",
+    small = "small",
+    medium = "medium",
+    large = "large",
+    xlarge = "xlarge"
+}
+export type MediaQueryType = keyof typeof MediaQueryEnum;
+export type ResponsiveOffsetType = OffesetType | number | {
+    [key in MediaQueryType]?: OffesetType | number;
+};
+export interface MPProps {
+    m?: ResponsiveOffsetType;
+    mt?: ResponsiveOffsetType;
+    mr?: ResponsiveOffsetType;
+    mb?: ResponsiveOffsetType;
+    ml?: ResponsiveOffsetType;
+    p?: ResponsiveOffsetType;
+    pt?: ResponsiveOffsetType;
+    pr?: ResponsiveOffsetType;
+    pb?: ResponsiveOffsetType;
+    pl?: ResponsiveOffsetType;
+}
 export declare namespace ui {
     /**
      * Returns CSS value of quant value with applied multiplier
      */
-    function q(multiplier?: number): string;
-    function offset(size: OffesetType): string;
-    function fontSize(size?: TextProps['size']): string;
-    function borderRadius(size?: 'xsmall' | 'small' | 'normal'): string;
-    function color(name: string, variantRaw?: string | number, alpha?: number): string;
-    namespace cls {
+    export function q(multiplier?: number): string;
+    export function offset(size: OffesetType): string;
+    export function fontSize(size?: TextProps['size']): string;
+    export function borderRadius(size?: 'xsmall' | 'small' | 'normal'): string;
+    export function color(name: string, variantRaw?: string | number, alpha?: number): string;
+    export namespace cls {
         const fullWidth = "util-full-width";
         const fullHeight = "util-full-height";
         const flexGrow = "util-flex-grow";
@@ -19,12 +56,19 @@ export declare namespace ui {
         const userSelectableText = "util-text-selectable";
         const zIndex9000 = "util-z-index-9000";
     }
-    const pc: (x: number | string) => string;
-    const px: (x: number | string) => string;
-    const ch: (x: number | string) => string;
-    const em: (x: number | string) => string;
-    const rem: (x: number | string) => string;
-    const vh: (x: number | string) => string;
-    const vw: (x: number | string) => string;
-    const url: (u: unknown) => string;
+    export const pc: (x: number | string) => string;
+    export const px: (x: number | string) => string;
+    export const ch: (x: number | string) => string;
+    export const em: (x: number | string) => string;
+    export const rem: (x: number | string) => string;
+    export const vh: (x: number | string) => string;
+    export const vw: (x: number | string) => string;
+    export const url: (u: unknown) => string;
+    export const getOffsetAttrs: (name: string, value: ResponsiveOffsetType) => Record<string, string>;
+    export const getOffsetStyles: (name: string, value: ResponsiveOffsetType) => Record<string, string>;
+    type CallbackType<T> = (name: string, value: ResponsiveOffsetType) => T;
+    export function callAllMPProps<T>(props: Partial<MPProps>, callback: CallbackType<T>): {};
+    export const getAllMPStyles: (props: Partial<MPProps>) => React.CSSProperties;
+    export const getAllMPAttrs: (props: Partial<MPProps>) => Record<string, string>;
+    export {};
 }