triafly-ui-kit 1.0.58 → 1.0.60

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

@@ -0,0 +1 @@
+.skeleton{display:inline-block;background-color:var(--color-bg-neutral-medium-default)!important;position:relative;overflow:hidden}.skeleton.animated:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,#f000,#ffffff80,#f000);animation:skeleton-loading 1.5s infinite}@keyframes skeleton-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}

package/dist/assets/src/context/ToastContext/ToastContext.css

@@ -0,0 +1 @@
+.toast-provider{position:fixed;bottom:20px;right:20px;z-index:101;display:flex;flex-direction:column;gap:10px}.toast-provider__element{color:var(--color-text-primary-inversed);padding:20px 24px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;min-width:250px;max-width:400px;font-size:16px;box-shadow:0 6px 15px -2px var(--effect-shadow-L, rgba(18, 18, 18, .08));animation:fadeIn .5s ease-in-out;background-color:var(--color-bg-neutral-basic-inversed)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

package/dist/components/Ui/Skeleton/Skeleton.js

@@ -1,26 +1,25 @@
-import { jsx as i } from "react/jsx-runtime";
-import p from "../../../_virtual/index.js";
-import e from "../../../src/components/Ui/Skeleton/Skeleton.module.scss.js";
-const c = ({
-  width: s = "100%",
-  height: o = "100%",
-  borderRadius: t = "4px",
-  circle: r = !1,
-  animated: m = !0,
+import { jsx as l } from "react/jsx-runtime";
+import '../../../assets/src/components/Ui/Skeleton/Skeleton.css';/* empty css                                                */
+const n = ({
+  width: e = "100%",
+  height: t = "100%",
+  borderRadius: o = "4px",
+  circle: s = !1,
+  animated: r = !0,
   className: a,
-  style: l
-}) => /* @__PURE__ */ i(
+  style: i
+}) => /* @__PURE__ */ l(
   "div",
   {
-    className: p(e.skeleton, { [e.animated]: m }, a),
+    className: `skeleton ${r ? "animated" : ""} ${a || ""}`,
     style: {
-      width: s,
-      height: o,
-      borderRadius: r ? "50%" : t,
-      ...l
+      width: e,
+      height: t,
+      borderRadius: s ? "50%" : o,
+      ...i
     }
   }
 );
 export {
-  c as Skeleton
+  n as Skeleton
 };

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

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

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

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

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

@@ -1,11 +1,7 @@
-import { jsx as o, jsxs as t } from "react/jsx-runtime";
-import { Skeleton as e } from "../../Skeleton/Skeleton.js";
+import { jsx as e } from "react/jsx-runtime";
+import { Skeleton as t } from "../../Skeleton/Skeleton.js";
 import '../../../../assets/src/components/Ui/Table/TableSkeletonRow/TableSkeletonRow.css';/* empty css                                                                         */
-const n = ({ colSpan: r }) => /* @__PURE__ */ o("tr", { className: "skeleton-row", children: /* @__PURE__ */ t("td", { colSpan: r, children: [
-  /* @__PURE__ */ o(e, {}),
-  /* @__PURE__ */ o(e, {}),
-  /* @__PURE__ */ o(e, {})
-] }) });
+const n = ({ colSpan: o }) => /* @__PURE__ */ e("td", { colSpan: o, children: /* @__PURE__ */ e("div", { className: "table-skeleton-row", children: [...Array(o)].map((l, r) => /* @__PURE__ */ e(t, {}, r)) }) });
 export {
   n as TableSkeletonRow
 };

package/dist/context/ToastContext/ToastContext.js

@@ -1,38 +1,40 @@
-import { jsxs as v, jsx as d } from "react/jsx-runtime";
-import { createContext as f, useState as h, useCallback as u, useMemo as w, useContext as C } from "react";
-import P from "react-dom";
-import m from "../../src/context/ToastContext/ToastContext.module.scss.js";
-const l = f(void 0), y = () => {
-  const e = C(l);
-  if (!e)
+import { jsxs as p, jsx as l } from "react/jsx-runtime";
+import { createContext as x, useState as f, useCallback as u, useMemo as h, useContext as w } from "react";
+import g from "react-dom";
+import '../../assets/src/context/ToastContext/ToastContext.css';/* empty css                                               */
+const m = x(void 0), j = () => {
+  const o = w(m);
+  if (!o)
     throw new Error("useToast must be used within a ToastProvider");
-  return e;
-}, M = ({ children: e }) => {
-  const [T, a] = h([]), p = 3, n = 4e3, c = u((t) => {
-    a((o) => o.filter((s) => s.id !== t));
-  }, []), i = u(
+  return o;
+}, M = ({ children: o }) => {
+  const [r, n] = f([]), T = 3, c = 4e3, i = u((t) => {
+    n((e) => e.filter((s) => s.id !== t));
+  }, []), d = u(
     (t) => {
-      const o = {
+      const e = {
         id: Date.now(),
         message: t,
-        duration: n
+        duration: c
       };
-      a((s) => {
-        const r = [...s, o];
-        return r.length > p ? r.slice(1) : r;
-      }), setTimeout(() => c(o.id), n);
+      n((s) => {
+        const a = [...s, e];
+        return a.length > T ? a.slice(1) : a;
+      }), setTimeout(() => i(e.id), c);
     },
-    [c]
-  ), x = w(() => ({ addToast: i }), [i]);
-  return /* @__PURE__ */ v(l.Provider, { value: x, children: [
-    e,
-    P.createPortal(
-      /* @__PURE__ */ d("div", { className: m.Wrapper, children: T.map((t) => /* @__PURE__ */ d("div", { className: m.Toast, children: t.message }, t.id)) }),
+    [i]
+  );
+  console.log("тест addToast"), console.log("toasts", r);
+  const v = h(() => ({ addToast: d }), [d]);
+  return /* @__PURE__ */ p(m.Provider, { value: v, children: [
+    o,
+    g.createPortal(
+      /* @__PURE__ */ l("div", { className: "toast-provider", children: r.map((t) => /* @__PURE__ */ l("div", { className: "toast-provider__element", children: t.message }, t.id)) }),
       document.body
     )
   ] });
 };
 export {
   M as ToastProvider,
-  y as useToast
+  j as useToast
 };

package/dist/main.d.ts

@@ -1180,7 +1180,7 @@ declare type TablesProps<T extends object = Record<string, unknown>> = {
     wrapperClassName?: string;
     borderBottom?: boolean;
     bordered?: boolean;
-    rowClassName?: (row: T, index: number) => string;
+    rowClassName?: (row: T) => string;
     defaultSort?: {
         key: string;
         order: "asc" | "desc";
@@ -1189,10 +1189,7 @@ declare type TablesProps<T extends object = Record<string, unknown>> = {
     onClickTrHeader?: () => void;
     loading?: boolean;
     hasMore?: boolean;
-    loadingIndicator?: default_2.ReactNode;
     loaderRef?: default_2.Ref<HTMLTableRowElement>;
-    entities?: Record<string, T>;
-    sortedIds?: string[];
     externalSorting?: boolean;
     containerRef?: default_2.RefObject<HTMLDivElement>;
 };

package/package.json

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

package/dist/assets/src/components/Ui/Skeleton/Skeleton.module.css

@@ -1 +0,0 @@
-._skeleton_1xagr_1{display:inline-block;background-color:var(--color-bg-neutral-medium-default)}._animated_1xagr_6{background:linear-gradient(90deg,var(--color-bg-neutral-medium-default) 25%,var(--color-bg-neutral-medium-default) 50%,var(--color-bg-neutral-medium-default) 75%);background-size:200% 100%;animation:_skeleton-loading_1xagr_1 1.5s infinite linear}@keyframes _skeleton-loading_1xagr_1{0%{background-position:200% 0}to{background-position:-200% 0}}

package/dist/assets/src/context/ToastContext/ToastContext.module.css

@@ -1 +0,0 @@
-._Wrapper_12sk9_1{position:fixed;bottom:20px;right:20px;z-index:101;display:flex;flex-direction:column;gap:10px}._Toast_12sk9_11{color:var(--color-text-primary-inversed);padding:20px 24px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;min-width:250px;max-width:400px;font-size:16px;box-shadow:0 6px 15px -2px var(--effect-shadow-L, rgba(18, 18, 18, .08));animation:_fadeIn_12sk9_1 .5s ease-in-out;background-color:var(--color-bg-neutral-basic-inversed)}@keyframes _fadeIn_12sk9_1{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

package/dist/src/components/Ui/Skeleton/Skeleton.module.scss.js

@@ -1,9 +0,0 @@
-import '../../../../assets/src/components/Ui/Skeleton/Skeleton.module.css';const e = "_skeleton_1xagr_1", t = "_animated_1xagr_6", a = {
-  skeleton: e,
-  animated: t
-};
-export {
-  t as animated,
-  a as default,
-  e as skeleton
-};

package/dist/src/context/ToastContext/ToastContext.module.scss.js

@@ -1,9 +0,0 @@
-import '../../../assets/src/context/ToastContext/ToastContext.module.css';const s = "_Wrapper_12sk9_1", t = "_Toast_12sk9_11", a = {
-  Wrapper: s,
-  Toast: t
-};
-export {
-  t as Toast,
-  s as Wrapper,
-  a as default
-};