@cfx-dev/ui-components 0.0.19 → 0.0.21

package/dist/components/Shroud/Shroud.js

@@ -1,34 +1,35 @@
-import { jsx as t, jsxs as m } from "react/jsx-runtime";
-import o from "react";
-import { a as p, b as v } from "../../hooks-GAujvL7d.js";
-import { ui as x } from "../ui.js";
-import '../../assets/Shroud.css';const _ = "_root_7v6x1_1", b = "_tile_7v6x1_6", e = {
-  root: _,
-  tile: b
-}, S = o.forwardRef(function(c, n) {
+import { jsx as t, jsxs as h } from "react/jsx-runtime";
+import r from "react";
+import { TITLE_OUTLET_ID as p } from "../Title/Title.js";
+import { ui as _ } from "../ui.js";
+import { useOutlet as v, useWindowResize as x } from "../../utils/hooks.js";
+import '../../assets/Shroud.css';const b = "_root_7v6x1_1", g = "_tile_7v6x1_6", e = {
+  root: b,
+  tile: g
+}, S = r.forwardRef(function(c, n) {
   const {
-    forRef: r
-  } = c, [u, d] = o.useState({}), f = p("pre-title"), i = o.useCallback(() => {
-    if (!r.current)
+    forRef: s
+  } = c, [u, d] = r.useState({}), f = v(p, "before"), i = r.useCallback(() => {
+    if (!s.current)
       return;
-    const s = r.current.getBoundingClientRect(), h = {
-      x: s.x,
-      y: s.y,
-      w: s.width,
-      h: s.height,
+    const o = s.current.getBoundingClientRect(), m = {
+      x: o.x,
+      y: o.y,
+      w: o.width,
+      h: o.height,
       sw: globalThis.screen.availWidth,
       sh: globalThis.screen.availHeight
     };
     d(
       Object.fromEntries(
-        Object.entries(h).flatMap(([a, l]) => [
-          [`--${a}`, x.px(l)],
+        Object.entries(m).flatMap(([a, l]) => [
+          [`--${a}`, _.px(l)],
           [`--${a}-raw`, l]
         ])
       )
     );
   }, []);
-  return o.useEffect(i, []), v(i), /* @__PURE__ */ t(f, { children: /* @__PURE__ */ m("div", { ref: n, className: e.root, style: u, children: [
+  return r.useEffect(i, []), x(i), /* @__PURE__ */ t(f, { children: /* @__PURE__ */ h("div", { ref: n, className: e.root, style: u, children: [
     /* @__PURE__ */ t("div", { className: e.tile, "data-top": !0 }),
     /* @__PURE__ */ t("div", { className: e.tile, "data-left": !0 }),
     /* @__PURE__ */ t("div", { className: e.tile, "data-right": !0 }),

package/dist/components/Switch/Switch.js

@@ -1,7 +1,7 @@
 import { jsxs as r, jsx as p } from "react/jsx-runtime";
 import d from "react";
-import { clsx as _ } from "../../utils/clsx.js";
 import { Interactive as S } from "../Interactive/Interactive.js";
+import { clsx as _ } from "../../utils/clsx.js";
 import '../../assets/Switch.css';const g = "_root_11dd4_1", j = "_disabled_11dd4_7", k = "_descripted_11dd4_11", w = "_multiline_11dd4_14", E = "_options_11dd4_18", L = "_option_11dd4_18", O = "_description_11dd4_25", I = "_active_11dd4_73", e = {
   root: g,
   disabled: j,

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

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+
+interface ITableProps {
+    headers: string[];
+    data: Array<Array<string | number | Date | React.ReactNode>>;
+    includeRadio?: boolean;
+    onSelectChange?: (rowIndex: number) => void;
+    dataContainer?: React.FC<{
+        item: string | number | Date | React.ReactNode;
+    }> | undefined;
+    useSort?: boolean;
+    sortBy?: string;
+    sortOrder?: 'asc' | 'desc';
+    onSortChange?: (sortBy: string, sortOrder: 'asc' | 'desc') => void;
+}
+declare function Table({ headers, data, includeRadio, onSelectChange, dataContainer, useSort, sortBy: initialSortBy, sortOrder: initialSortOrder, onSortChange, }: ITableProps): import("react/jsx-runtime").JSX.Element;
+export default Table;

package/dist/components/Table/Table.js

@@ -0,0 +1,61 @@
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import o, { useState as i } from "react";
+import { F, a as A } from "../../index.esm-BkynlSN6.js";
+import '../../assets/Table.css';const E = "_selectedRow_1jg2j_23", _ = {
+  "table-responsive": "_table-responsive_1jg2j_1",
+  selectedRow: E
+};
+function S({
+  headers: h = [],
+  data: w = [],
+  includeRadio: n = !1,
+  onSelectChange: c,
+  dataContainer: p,
+  useSort: m = !1,
+  sortBy: j,
+  sortOrder: v = "asc",
+  onSortChange: d
+}) {
+  const [b, f] = i(null), [u, y] = i(j), [R, k] = i(v), O = (e) => {
+    const l = u === e && R === "asc" ? "desc" : "asc";
+    y(e), k(l), d == null || d(e, l);
+  }, $ = o.useCallback((e) => {
+    f(parseInt(e.target.value, 10)), c == null || c(parseInt(e.target.value, 10));
+  }, [f, c]);
+  return /* @__PURE__ */ t("div", { className: _.table, children: /* @__PURE__ */ a("table", { children: [
+    /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ a("tr", { children: [
+      n && /* @__PURE__ */ t("th", { children: "Select Row" }),
+      h.map((e, s) => /* @__PURE__ */ a("th", { onClick: () => m && O(e), children: [
+        e,
+        m && u === e && /* @__PURE__ */ t("span", { children: R === "asc" ? /* @__PURE__ */ t(F, {}) : /* @__PURE__ */ t(A, {}) })
+      ] }, `header-${s}`))
+    ] }) }),
+    /* @__PURE__ */ t("tbody", { children: w.map((e, s) => /* @__PURE__ */ a(
+      "tr",
+      {
+        className: b === s ? _.selectedRow : "",
+        children: [
+          n && /* @__PURE__ */ t("td", { children: /* @__PURE__ */ t(
+            "input",
+            {
+              type: "radio",
+              name: "tableRowSelect",
+              value: s,
+              checked: b === s,
+              onChange: $,
+              "aria-label": `${s}`
+            }
+          ) }),
+          e.map((l, B) => {
+            let r;
+            return o.isValidElement(l) ? r = l : p ? r = o.createElement(p, { item: l }) : r = String(l), /* @__PURE__ */ t("td", { children: r }, `item-${B}`);
+          })
+        ]
+      },
+      `row-${s}`
+    )) })
+  ] }) });
+}
+export {
+  S as default
+};

package/dist/components/Tabular/Tabular.d.ts

@@ -15,7 +15,7 @@ export declare function Tabular(props: TabularProps): import("react/jsx-runtime"
 export declare namespace Tabular {
     var Root: (props: TabularRootProps) => import("react/jsx-runtime").JSX.Element;
     var Item: React.ForwardRefExoticComponent<Pick<TabularItem, "label" | "disabled" | "icon"> & {
-        active?: boolean | undefined;
+        active?: boolean;
         onClick?(): void;
     } & React.RefAttributes<HTMLDivElement>>;
 }

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type TextColor = 'inherit' | 'main' | 'primary' | 'teal' | 'success' | 'warning' | 'error';
 export type TextSize = 'xsmall' | 'small' | 'normal' | 'large' | 'xlarge' | 'xxlarge';
 export type TextWeight = 'thin' | 'normal' | 'bold' | 'bolder';

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

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 
+export declare const TITLE_OUTLET_ID = "title-outlet";
 type FixedOn = 'top' | 'top-left' | 'right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left';
 type TitleChildren = ((ref: React.RefObject<any>) => React.ReactNode) | React.ReactElement;
 export interface TitleProps {

package/dist/components/Title/Title.js

@@ -1,11 +1,11 @@
-import { jsxs as L, Fragment as k, jsx as p } from "react/jsx-runtime";
+import { jsxs as T, Fragment as w, jsx as p } from "react/jsx-runtime";
 import f from "react";
 import { clsx as O } from "../../utils/clsx.js";
-import { a as y } from "../../hooks-GAujvL7d.js";
-import C from "../../utils/mergeRefs.js";
-import '../../assets/Title.css';const R = "_wrapper_1l1sn_1", T = "_appearance_1l1sn_1", $ = "_animated_1l1sn_26", M = "_root_1l1sn_71", N = "_shortcut_1l1sn_84", m = {
-  wrapper: R,
-  appearance: T,
+import { useOutlet as k } from "../../utils/hooks.js";
+import { mergeRefs as y } from "../../utils/mergeRefs.js";
+import '../../assets/Title.css';const C = "_wrapper_1l1sn_1", R = "_appearance_1l1sn_1", $ = "_animated_1l1sn_26", M = "_root_1l1sn_71", N = "_shortcut_1l1sn_84", m = {
+  wrapper: C,
+  appearance: R,
   animated: $,
   "fixed-on-top": "_fixed-on-top_1l1sn_29",
   "fixed-on-top-left": "_fixed-on-top-left_1l1sn_35",
@@ -16,9 +16,9 @@ import '../../assets/Title.css';const R = "_wrapper_1l1sn_1", T = "_appearance_1
   "fixed-on-right": "_fixed-on-right_1l1sn_65",
   root: M,
   shortcut: N
-}, i = 10;
-function S(a, l, [e, n]) {
-  const r = a ? n : n - 20, s = a ? e : e + 16;
+}, i = 10, S = "title-outlet";
+function F(l, a, [e, n]) {
+  const r = l ? n : n - 20, s = l ? e : e + 16;
   return {
     // Prefer top and left for element to snap to the pixel grid
     // as when using transform it will become blurry in most of the cases as top and left values are floats
@@ -26,18 +26,18 @@ function S(a, l, [e, n]) {
     left: `${s}px`,
     // transform: `translate(${left}px, ${top}px)`,
     maxWidth: `calc(100vw - ${s}px - 10px)`,
-    animationDelay: `${l}ms`
+    animationDelay: `${a}ms`
   };
 }
-function F(a, l) {
+function I(l, a) {
   const {
     x: e,
     y: n,
     width: r,
     height: s
-  } = a.getBoundingClientRect();
+  } = l.getBoundingClientRect();
   let t = 0, c = 0;
-  switch (l) {
+  switch (a) {
     case "top": {
       t = e + r / 2, c = n - i;
       break;
@@ -69,21 +69,21 @@ function F(a, l) {
   }
   return [t, c];
 }
-function D(a) {
+function B(l) {
   const {
-    title: l,
+    title: a,
     children: e,
     animated: n = !0,
     fixedOn: r = "bottom",
     delay: s = 0
-  } = a, t = f.useRef(r);
+  } = l, t = f.useRef(r);
   t.current = r;
-  const c = y("title"), o = f.useRef(null), [g, x] = f.useState(!1), [E, _] = f.useState([0, 0]);
+  const c = k(S), o = f.useRef(null), [g, x] = f.useState(!1), [E, _] = f.useState([0, 0]);
   f.useEffect(() => {
     if (!o.current)
       return;
     const d = (u) => {
-      t.current && o.current ? _(F(o.current, t.current)) : _([u.clientX, u.clientY]), x(!0);
+      t.current && o.current ? _(I(o.current, t.current)) : _([u.clientX, u.clientY]), x(!0);
     }, v = () => {
       x(!1);
     }, b = (u) => {
@@ -94,20 +94,21 @@ function D(a) {
     };
   }, []);
   let h = null;
-  if (g && l) {
+  if (g && a) {
     const d = O(m.wrapper, m[`fixed-on-${r}`], {
       [m.animated]: n
     });
-    h = /* @__PURE__ */ p(c, { children: /* @__PURE__ */ p("div", { className: d, style: S(!!r, s, E), children: /* @__PURE__ */ p("div", { className: m.root, children: l }) }) });
+    h = /* @__PURE__ */ p(c, { children: /* @__PURE__ */ p("div", { className: d, style: F(!!r, s, E), children: /* @__PURE__ */ p("div", { className: m.root, children: a }) }) });
   }
-  const w = typeof e == "function" ? e(o) : f.cloneElement(e, {
-    ref: C(o, e.props.ref)
+  const L = typeof e == "function" ? e(o) : f.cloneElement(e, {
+    ref: y(o, e.props.ref)
   });
-  return /* @__PURE__ */ L(k, { children: [
-    w,
+  return /* @__PURE__ */ T(w, { children: [
+    L,
     h
   ] });
 }
 export {
-  D as Title
+  S as TITLE_OUTLET_ID,
+  B as Title
 };

package/dist/{extends-Dk_bSU3E.js → extends-hS2Bh-Yp.js}

@@ -2,8 +2,7 @@ function e() {
   return e = Object.assign ? Object.assign.bind() : function(t) {
     for (var n = 1; n < arguments.length; n++) {
       var r = arguments[n];
-      for (var a in r)
-        ({}).hasOwnProperty.call(r, a) && (t[a] = r[a]);
+      for (var a in r) ({}).hasOwnProperty.call(r, a) && (t[a] = r[a]);
     }
     return t;
   }, e.apply(null, arguments);