triafly-ui-kit 1.0.40 → 1.0.42

package/dist/_virtual/index2.js

@@ -1,7 +1,4 @@
-import { getDefaultExportFromCjs as e } from "./_commonjsHelpers.js";
-import { __require as r } from "../node_modules/fast-deep-equal/index.js";
-var t = r();
-const p = /* @__PURE__ */ e(t);
+var s = { exports: {} };
 export {
-  p as default
+  s as __module
 };

package/dist/assets/src/components/Ui/Table/Table.css

@@ -1 +1 @@
-.table-component{width:100%;overflow:auto;position:relative}.table-component__wrapper{width:100%}.table-component__wrapper.bordered{border:1px solid var(--color-border-primary-default);border-radius:8px}.table-component__wrapper__table{width:100%;border-collapse:separate;border-spacing:0}.table-component__wrapper__table.bordered{border:none}.table-component__wrapper__table__thead{background-color:var(--color-bg-innerisland-default);height:41px}.table-component__wrapper__table__thead.stickyHeader{position:sticky;top:0;z-index:10}.table-component__wrapper__table__thead__tr:hover{background-color:var(--color-bg-island-selected)}.table-component__wrapper__table__thead__th{padding:12px;text-align:left;position:relative}.table-component__wrapper__table__thead__th.bordered{border-left:1px solid var(--color-border-primary-default);border-bottom:none}.table-component__wrapper__table__thead__th.bordered:first-child{border-left:none}.table-component__wrapper__table__thead__th.stickyLeft{position:sticky;left:0;background-color:inherit;z-index:9}.table-component__wrapper__table__thead__th .th-content{display:flex;align-items:center;gap:4px}.table-component__wrapper__table__thead__th .sort-icon{display:inline-flex}.table-component__wrapper__table__tbody__tr:hover{background-color:var(--color-bg-island-selected)}.table-component__wrapper__table__tbody--hoverable{cursor:pointer}.table-component__wrapper__table__tbody__td{padding:12px}.table-component__wrapper__table__tbody__td--bordered{border-top:1px solid var(--color-border-primary-default);border-left:1px solid var(--color-border-primary-default)}.table-component__wrapper__table__tbody__td--bordered:first-child{border-left:none}.table-component__wrapper__table__tbody__td--sticky-left{position:sticky;left:0;background-color:inherit;z-index:8}.table-component__wrapper.borderBottom .table-component__wrapper__table__tbody td{border-bottom:1px solid var(--color-border-primary-default)}
+.table-component{width:100%;overflow:auto;position:relative}.table-component__wrapper{width:100%}.table-component__wrapper.bordered{border:1px solid var(--color-border-primary-default);border-radius:8px}.table-component__wrapper__table{width:100%;border-collapse:separate;border-spacing:0}.table-component__wrapper__table.bordered{border:none}.table-component__wrapper__table__thead{background-color:var(--color-bg-innerisland-default);height:41px}.table-component__wrapper__table__thead.stickyHeader{position:sticky;top:0;z-index:10}.table-component__wrapper__table__thead__tr:hover{background-color:var(--color-bg-island-selected)}.table-component__wrapper__table__thead__th{padding:12px;text-align:left;position:relative}.table-component__wrapper__table__thead__th.bordered{border-left:1px solid var(--color-border-primary-default);border-bottom:none}.table-component__wrapper__table__thead__th.bordered:first-child{border-left:none}.table-component__wrapper__table__thead__th.stickyLeft{position:sticky;left:0;background-color:inherit;z-index:9}.table-component__wrapper__table__thead__th .th-content{display:flex;align-items:center;gap:4px}.table-component__wrapper__table__thead__th .sort-icon{display:inline-flex}.table-component__wrapper__table__tbody__tr:hover{background-color:var(--color-bg-island-selected)}.table-component__wrapper__table__tbody--hoverable{cursor:pointer}.table-component__wrapper__table__tbody__td{padding:12px}.table-component__wrapper__table__tbody__td--bordered{border-top:1px solid var(--color-border-primary-default);border-left:1px solid var(--color-border-primary-default)}.table-component__wrapper__table__tbody__td--bordered:first-child{border-left:none}.table-component__wrapper__table__tbody__td--sticky-left{position:sticky;left:0;background-color:inherit;z-index:8}.table-component__wrapper.borderBottom .table-component__wrapper__table__tbody td{border-bottom:1px solid var(--color-border-primary-default)}.loading_table_init{position:absolute;top:0;left:0;right:0;bottom:0;display:"flex";justify-content:"center";align-items:"center";background-color:"rgba(255, 255, 255, 0.7)";z-index:10}

package/dist/components/Ui/Table/MemoizedRow/MemoizedRow.js

@@ -1,50 +1,49 @@
-import { jsx as p } from "react/jsx-runtime";
-import c from "react";
-import m from "../../../../_virtual/index2.js";
-import d from "../../../../_virtual/index.js";
-const h = c.memo(
+import { jsx as b } from "react/jsx-runtime";
+import f from "react";
+import o from "../../../../_virtual/index.js";
+const K = f.memo(
   ({
     record: t,
-    columns: _,
+    columns: n,
     rowKey: a,
-    rowClassName: n,
-    index: l,
-    stickyLeft: r,
-    onClickTr: b,
-    bordered: i
+    rowClassName: d,
+    index: i,
+    stickyLeft: e,
+    bordered: y,
+    id: c
   }) => {
-    const s = (e) => {
-      !e.target.closest("[data-no-bubble]") && b && b(t);
-    };
-    return /* @__PURE__ */ p(
+    const m = c || (typeof a == "function" ? a(t) : String(t[a]));
+    return /* @__PURE__ */ b(
       "tr",
       {
-        className: d(
+        "data-id": m,
+        className: o(
           "table-component__wrapper__table__tbody__tr",
-          n == null ? void 0 : n(t, l),
-          {
-            "table-component__wrapper__table__tbody__tr--hoverable": !!b
-          }
+          d == null ? void 0 : d(t, i)
         ),
-        onClick: s,
-        children: _.map((e, o) => /* @__PURE__ */ p(
+        children: n.map((_, r) => /* @__PURE__ */ b(
           "td",
           {
-            className: d("table-component__wrapper__table__tbody__td", e.className, {
-              "table-component__wrapper__table__tbody__td--bordered": i,
-              "table-component__wrapper__table__tbody__td--sticky-left": r && o === 0
+            className: o("table-component__wrapper__table__tbody__td", _.className, {
+              "table-component__wrapper__table__tbody__td--bordered": y,
+              "table-component__wrapper__table__tbody__td--sticky-left": e && r === 0
             }),
-            align: e.align,
-            children: e.render ? e.render(t[e.dataIndex], t) : String(t[e.dataIndex] ?? "")
+            align: _.align,
+            children: _.render ? _.render(t[_.dataIndex], t) : String(t[_.dataIndex] ?? "")
           },
-          `${e.key}-${o}`
+          `${_.key}-${r}`
         ))
       },
-      typeof a == "function" ? a(t) : String(t[a])
+      m
     );
   },
-  (t, _) => m(t.columns, _.columns) && m(t.record, _.record)
+  (t, n) => {
+    if (t.id && n.id)
+      return t.id === n.id;
+    const a = (e) => typeof e.rowKey == "function" ? e.rowKey(e.record) : String(e.record[e.rowKey]), d = a(t), i = a(n);
+    return d !== i ? !1 : t.columns === n.columns;
+  }
 );
 export {
-  h as MemoizedRow
+  K as MemoizedRow
 };

package/dist/components/Ui/Table/Table.js

@@ -1,165 +1,196 @@
-import { jsx as t, jsxs as f } from "react/jsx-runtime";
-import { forwardRef as H, useState as y, useEffect as J, useCallback as _ } from "react";
-import l from "../../../_virtual/index.js";
+import { jsx as n, jsxs as g } from "react/jsx-runtime";
+import Z, { forwardRef as K, useState as M, useMemo as ee, useCallback as k, useEffect as te } from "react";
+import o from "../../../_virtual/index.js";
 import '../../../assets/src/components/Ui/Table/Table.css';/* empty css                                          */
-import { IconCaretDown as k, IconCaretUp as O } from "../Icons/Icons.js";
-import { MemoizedRow as P } from "./MemoizedRow/MemoizedRow.js";
-import { Loader as Q } from "../Loader/Loader.js";
-import { TableSkeletonRow as V } from "./TableSkeletonRow/TableSkeletonRow.js";
-const v = {
-  asc: /* @__PURE__ */ t(k, { viewBox: "0 -6 24 24", "aria-hidden": "true" }),
-  desc: /* @__PURE__ */ t(O, { viewBox: "0 -4 24 24", "aria-hidden": "true" }),
-  default: /* @__PURE__ */ t(k, { viewBox: "0 -6 24 24", "aria-hidden": "true" })
-}, W = ({
-  columns: o,
-  dataSource: p,
+import { IconCaretDown as j, IconCaretUp as ne } from "../Icons/Icons.js";
+import { MemoizedRow as z } from "./MemoizedRow/MemoizedRow.js";
+import { Loader as ae } from "../Loader/Loader.js";
+import { TableSkeletonRow as re } from "./TableSkeletonRow/TableSkeletonRow.js";
+const C = {
+  asc: /* @__PURE__ */ n(j, { viewBox: "0 -6 24 24", "aria-hidden": "true" }),
+  desc: /* @__PURE__ */ n(ne, { viewBox: "0 -4 24 24", "aria-hidden": "true" }),
+  default: /* @__PURE__ */ n(j, { viewBox: "0 -6 24 24", "aria-hidden": "true" })
+}, se = ({
+  columns: f,
+  dataSource: m,
   rowKey: i,
-  tableClassName: x,
-  theadClassName: D,
-  trTheadClassNames: I,
-  thTheadClassNames: S,
-  tbodyClassName: A,
-  wrapperClassName: C,
-  borderBottom: h = !1,
-  stickyHeader: T = !1,
-  stickyLeft: u = !1,
-  bordered: c = !1,
-  rowClassName: j,
-  defaultSort: B,
-  onClickTr: m,
-  onClickTrHeader: R,
-  loading: b = !1,
-  hasMore: z = !1,
-  loadingIndicator: $,
-  loaderRef: g
-}, E) => {
-  const [L, w] = y(p), [n, M] = y(
-    B || null
-  );
-  J(() => {
-    w(p);
-  }, [p]);
-  const U = _(
-    (e) => typeof i == "function" ? i(e) : typeof i == "string" && i in e ? String(e[i]) : "unknown",
+  tableClassName: L,
+  theadClassName: $,
+  trTheadClassNames: O,
+  thTheadClassNames: U,
+  tbodyClassName: q,
+  wrapperClassName: F,
+  borderBottom: y = !1,
+  stickyHeader: G = !1,
+  stickyLeft: b = !1,
+  bordered: p = !1,
+  rowClassName: x,
+  defaultSort: H,
+  onClickTr: _,
+  onClickTrHeader: J,
+  loading: R = !1,
+  hasMore: P = !1,
+  loadingIndicator: Q,
+  loaderRef: B,
+  externalSorting: D = !1,
+  entities: c,
+  sortedIds: u
+}, V) => {
+  const T = Z.useRef(null), l = !!c && !!u, [A, W] = M(m || []), [s, S] = M(
+    H || null
+  ), N = ee(() => {
+    if (!l)
+      return D ? m : A;
+  }, [l, m, A, D]), E = k(
+    (e, t) => {
+      if (l) {
+        S({ key: e, order: t });
+        return;
+      }
+      W((d) => [...d].sort((h, I) => {
+        const r = h[e], a = I[e];
+        return typeof r == "string" && typeof a == "string" ? t === "asc" ? r.localeCompare(a) : a.localeCompare(r) : typeof r == "number" && typeof a == "number" ? t === "asc" ? r - a : a - r : r instanceof Date && a instanceof Date ? t === "asc" ? r.getTime() - a.getTime() : a.getTime() - r.getTime() : 0;
+      })), S({ key: e, order: t });
+    },
+    [l]
+  ), v = k(
+    (e) => typeof i == "function" ? i(e) : String(e[i]),
     [i]
-  ), N = _((e, a) => {
-    w((d) => [...d].sort((F, G) => {
-      const s = F[e], r = G[e];
-      return typeof s == "string" && typeof r == "string" ? a === "asc" ? s.localeCompare(r) : r.localeCompare(s) : typeof s == "number" && typeof r == "number" ? a === "asc" ? s - r : r - s : s instanceof Date && r instanceof Date ? a === "asc" ? s.getTime() - r.getTime() : r.getTime() - s.getTime() : 0;
-    })), M({ key: e, order: a });
-  }, []), q = _(
+  ), X = k(
     (e) => {
-      const d = (n == null ? void 0 : n.key) === e && n.order === "asc" ? "desc" : "asc";
-      N(e, d);
+      const d = (s == null ? void 0 : s.key) === e && s.order === "asc" ? "desc" : "asc";
+      E(e, d);
     },
-    [n, N]
+    [s, E]
   );
-  return /* @__PURE__ */ t("div", { className: l("table-component", C), children: /* @__PURE__ */ t(
+  return te(() => {
+    const e = T.current;
+    if (!e) return;
+    const t = (d) => {
+      const w = d.target, h = w.closest("tr");
+      if (!h || w.closest("[data-no-bubble]")) return;
+      const r = h.dataset.id;
+      if (!(!r || !_))
+        if (l && c) {
+          const a = c[r];
+          a && _(a);
+        } else {
+          const a = m.find((Y) => v(Y) === r);
+          a && _(a);
+        }
+    };
+    return e.addEventListener("click", t), () => e.removeEventListener("click", t);
+  }, [m, _, v, l, c]), /* @__PURE__ */ n("div", { className: o("table-component", F), children: /* @__PURE__ */ n(
     "div",
     {
-      className: l(
+      className: o(
         "table-component__wrapper",
         {
-          bordered: c,
-          borderBottom: h
+          bordered: p,
+          borderBottom: y
         },
-        x
+        L
       ),
-      children: /* @__PURE__ */ f(
+      children: /* @__PURE__ */ g(
         "table",
         {
-          className: l("table-component__wrapper__table", {
-            bordered: c,
-            borderBottom: h
+          className: o("table-component__wrapper__table", {
+            bordered: p,
+            borderBottom: y
           }),
-          ref: E,
+          ref: V,
           children: [
-            /* @__PURE__ */ t(
+            /* @__PURE__ */ n(
               "thead",
               {
-                className: l(
+                className: o(
                   "table-component__wrapper__table__thead",
                   {
-                    stickyHeader: T
+                    stickyHeader: G
                   },
-                  D
+                  $
                 ),
-                children: /* @__PURE__ */ t(
+                children: /* @__PURE__ */ n(
                   "tr",
                   {
-                    className: l(
+                    className: o(
                       "table-component__wrapper__table__thead__tr",
-                      I
+                      O
                     ),
-                    onClick: R,
-                    children: o.map((e, a) => /* @__PURE__ */ t(
+                    onClick: J,
+                    children: f.map((e, t) => /* @__PURE__ */ n(
                       "th",
                       {
-                        className: l(
+                        className: o(
                           "table-component__wrapper__table__thead__th",
                           {
-                            bordered: c,
-                            stickyLeft: u && a === 0
+                            bordered: p,
+                            stickyLeft: b && t === 0
                           },
-                          S
+                          U
                         ),
                         style: {
                           ...e.width ? { width: e.width } : {},
                           ...e.align ? { textAlign: e.align } : {}
                         },
-                        onClick: () => e.sorted && q(e.key),
-                        children: /* @__PURE__ */ f("div", { className: "th-content", children: [
+                        onClick: () => e.sorted && X(e.key),
+                        children: /* @__PURE__ */ g("div", { className: "th-content", children: [
                           e.title,
-                          e.sorted && /* @__PURE__ */ t("span", { className: "sort-icon", children: (n == null ? void 0 : n.key) === e.key ? v[n.order] : v.default })
+                          e.sorted && /* @__PURE__ */ n("span", { className: "sort-icon", children: (s == null ? void 0 : s.key) === e.key ? C[s.order] : C.default })
                         ] })
                       },
-                      `${e.key}-${a}`
+                      `${e.key}-${t}`
                     ))
                   }
                 )
               }
             ),
-            /* @__PURE__ */ f("tbody", { className: l("table-component__wrapper__table__tbody", A), children: [
-              L.map((e, a) => /* @__PURE__ */ t(
-                P,
-                {
-                  record: e,
-                  onClickTr: () => m == null ? void 0 : m(e),
-                  columns: o,
-                  rowKey: i,
-                  rowClassName: j,
-                  index: a,
-                  stickyLeft: u,
-                  bordered: c
-                },
-                U(e)
-              )),
-              b ? /* @__PURE__ */ t(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    backgroundColor: "rgba(255, 255, 255, 0.7)",
-                    zIndex: 10
-                  },
-                  children: /* @__PURE__ */ t(Q, { className: "centered" })
-                }
-              ) : null,
-              !b && z && g && /* @__PURE__ */ t("tr", { ref: g, children: /* @__PURE__ */ t("td", { colSpan: o.length, children: $ || /* @__PURE__ */ t(V, { colSpan: o.length }) }) })
-            ] })
+            /* @__PURE__ */ g(
+              "tbody",
+              {
+                ref: T,
+                className: o("table-component__wrapper__table__tbody", q),
+                children: [
+                  l && u ? u.map((e) => {
+                    const t = c == null ? void 0 : c[e];
+                    return t ? /* @__PURE__ */ n(
+                      z,
+                      {
+                        record: t,
+                        columns: f,
+                        rowKey: i,
+                        rowClassName: x,
+                        index: u.indexOf(e),
+                        stickyLeft: b,
+                        bordered: p,
+                        id: e
+                      },
+                      e
+                    ) : null;
+                  }) : N == null ? void 0 : N.map((e, t) => /* @__PURE__ */ n(
+                    z,
+                    {
+                      record: e,
+                      columns: f,
+                      rowKey: i,
+                      rowClassName: x,
+                      index: t,
+                      stickyLeft: b,
+                      bordered: p
+                    },
+                    v(e)
+                  )),
+                  R ? /* @__PURE__ */ n("div", { className: "loading_table_init", children: /* @__PURE__ */ n(ae, { className: "centered" }) }) : null,
+                  !R && P && B && /* @__PURE__ */ n("tr", { ref: B, children: /* @__PURE__ */ n("td", { colSpan: f.length, children: Q || /* @__PURE__ */ n(re, { colSpan: f.length }) }) })
+                ]
+              }
+            )
           ]
         }
       )
     }
   ) });
-}, re = H(W);
+}, _e = K(se);
 export {
-  re as Table
+  _e as Table
 };

package/dist/main.d.ts

@@ -1178,6 +1178,9 @@ declare type TablesProps<T extends object = Record<string, unknown>> = {
     hasMore?: boolean;
     loadingIndicator?: default_2.ReactNode;
     loaderRef?: default_2.Ref<HTMLTableRowElement>;
+    entities?: Record<string, T>;
+    sortedIds?: string[];
+    externalSorting?: boolean;
 };
 
 export declare const Tabs: React.FC<TabsProps>;

package/dist/node_modules/classnames/index.js

@@ -1,4 +1,4 @@
-import { __module as s } from "../../_virtual/index3.js";
+import { __module as s } from "../../_virtual/index2.js";
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "triafly-ui-kit",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "description": "UI Kit from Triafly",
   "main": "./dist/main.js",
   "module": "./dist/main.js",

package/dist/_virtual/index3.js

@@ -1,4 +0,0 @@
-var s = { exports: {} };
-export {
-  s as __module
-};

package/dist/node_modules/fast-deep-equal/index.js

@@ -1,31 +0,0 @@
-var o, c;
-function l() {
-  return c || (c = 1, o = function n(r, e) {
-    if (r === e) return !0;
-    if (r && e && typeof r == "object" && typeof e == "object") {
-      if (r.constructor !== e.constructor) return !1;
-      var u, t, f;
-      if (Array.isArray(r)) {
-        if (u = r.length, u != e.length) return !1;
-        for (t = u; t-- !== 0; )
-          if (!n(r[t], e[t])) return !1;
-        return !0;
-      }
-      if (r.constructor === RegExp) return r.source === e.source && r.flags === e.flags;
-      if (r.valueOf !== Object.prototype.valueOf) return r.valueOf() === e.valueOf();
-      if (r.toString !== Object.prototype.toString) return r.toString() === e.toString();
-      if (f = Object.keys(r), u = f.length, u !== Object.keys(e).length) return !1;
-      for (t = u; t-- !== 0; )
-        if (!Object.prototype.hasOwnProperty.call(e, f[t])) return !1;
-      for (t = u; t-- !== 0; ) {
-        var s = f[t];
-        if (!n(r[s], e[s])) return !1;
-      }
-      return !0;
-    }
-    return r !== r && e !== e;
-  }), o;
-}
-export {
-  l as __require
-};