triafly-ui-kit 1.0.31 → 1.0.33

package/dist/components/Ui/Icons/index.js

@@ -1,4 +1,4 @@
-import { IconArrowBendUpRight as c, IconArrowClockwise as I, IconArrowDown as e, IconArrowLeft as r, IconArrowLineDown as i, IconArrowLineLeft as t, IconArrowLineRight as a, IconArrowLineUp as l, IconArrowRight as s, IconArrowUp as C, IconArrowsOut as w, IconArticle as h, IconAt as p, IconBellSimple as g, IconBookOpenText as u, IconCalendarBlank as S, IconCaretDown as A, IconCaretLeft as D, IconCaretRight as L, IconCaretUp as d, IconCaretUpDown as k, IconChartPieSlice as U, IconChatText as P, IconCheck as F, IconCheckCircle as T, IconChecks as f, IconCircleNotch as y, IconCopy as B, IconCornersOut as R, IconCsv as X, IconCube as m, IconDatabase as x, IconDotsNine as M, IconDotsThreeVertical as v, IconExport as H, IconEye as N, IconEyeSlash as O, IconFile as Q, IconFiles as E, IconFloppyDisk as G, IconFolderSimple as b, IconFolderSimpleX as W, IconFunnel as z, IconGauge as J, IconGear as V, IconGoogleDrive as Y, IconHand as j, IconHeadCircuit as q, IconHouse as K, IconIcon as Z, IconInfo as _, IconJoin as $, IconLanguage as oo, IconLink as no, IconList as co, IconLock as Io, IconLockOpen as eo, IconMariaDB as ro, IconMinus as io, IconMongoDB as to, IconMoon as ao, IconMySQL as lo, IconNavigationArrow as so, IconNotePencil as Co, IconPassword as wo, IconPen as ho, IconPlay as po, IconPlugsX as go, IconPlus as uo, IconPorsgteSQL as So, IconPresentationChart as Ao, IconQuestion as Do, IconQuestionFullfilled as Lo, IconRedo as ko, IconRoleX as Uo, IconSearch as Po, IconSearchX as Fo, IconSelection as To, IconServer as fo, IconSlidersHorizontal as yo, IconSticker as Bo, IconSun as Ro, IconThreeDot as Xo, IconTrash as mo, IconTriangleDown as xo, IconTriangleUp as Mo, IconUndo as vo, IconUploadSimple as Ho, IconUser as No, IconUserX as Oo, IconWarningCircle as Qo, IconWrench as Eo, IconX as Go, IconYandexDisk as bo } from "./Icons.js";
+import { IconArrowBendUpRight as c, IconArrowClockwise as I, IconArrowDown as e, IconArrowLeft as r, IconArrowLineDown as i, IconArrowLineLeft as t, IconArrowLineRight as a, IconArrowLineUp as l, IconArrowRight as s, IconArrowUp as C, IconArrowsOut as h, IconArticle as w, IconAt as p, IconBellSimple as u, IconBookOpenText as g, IconCalendarBlank as S, IconCaretDown as A, IconCaretLeft as D, IconCaretRight as L, IconCaretUp as d, IconCaretUpDown as k, IconChartPieSlice as U, IconChatText as P, IconCheck as B, IconCheckCircle as F, IconChecks as T, IconCircleNotch as X, IconClickHouse as f, IconCopy as y, IconCornersOut as R, IconCsv as m, IconCube as x, IconDatabase as H, IconDotsNine as M, IconDotsThreeVertical as v, IconExport as G, IconEye as N, IconEyeSlash as O, IconFile as Q, IconFiles as E, IconFloppyDisk as b, IconFolderSimple as W, IconFolderSimpleX as z, IconFunnel as J, IconGauge as V, IconGear as Y, IconGitBranchX as j, IconGoogleDrive as q, IconHand as K, IconHeadCircuit as Z, IconHouse as _, IconIcon as $, IconInfo as oo, IconJoin as no, IconLanguage as co, IconLink as Io, IconList as eo, IconLock as ro, IconLockOpen as io, IconMariaDB as to, IconMinus as ao, IconMongoDB as lo, IconMoon as so, IconMySQL as Co, IconNavigationArrow as ho, IconNotePencil as wo, IconPassword as po, IconPen as uo, IconPlay as go, IconPlugsX as So, IconPlus as Ao, IconPorsgteSQL as Do, IconPresentationChart as Lo, IconQuestion as ko, IconQuestionFullfilled as Uo, IconRedo as Po, IconRoleX as Bo, IconSearch as Fo, IconSearchX as To, IconSelection as Xo, IconServer as fo, IconSlidersHorizontal as yo, IconSticker as Ro, IconSun as mo, IconThreeDot as xo, IconTrash as Ho, IconTriangleDown as Mo, IconTriangleUp as vo, IconUndo as Go, IconUploadSimple as No, IconUser as Oo, IconUserX as Qo, IconWarningCircle as Eo, IconWrench as bo, IconX as Wo, IconYandexDisk as zo } from "./Icons.js";
 export {
   c as IconArrowBendUpRight,
   I as IconArrowClockwise,
@@ -10,11 +10,11 @@ export {
   l as IconArrowLineUp,
   s as IconArrowRight,
   C as IconArrowUp,
-  w as IconArrowsOut,
-  h as IconArticle,
+  h as IconArrowsOut,
+  w as IconArticle,
   p as IconAt,
-  g as IconBellSimple,
-  u as IconBookOpenText,
+  u as IconBellSimple,
+  g as IconBookOpenText,
   S as IconCalendarBlank,
   A as IconCaretDown,
   D as IconCaretLeft,
@@ -23,75 +23,77 @@ export {
   k as IconCaretUpDown,
   U as IconChartPieSlice,
   P as IconChatText,
-  F as IconCheck,
-  T as IconCheckCircle,
-  f as IconChecks,
-  y as IconCircleNotch,
-  B as IconCopy,
+  B as IconCheck,
+  F as IconCheckCircle,
+  T as IconChecks,
+  X as IconCircleNotch,
+  f as IconClickHouse,
+  y as IconCopy,
   R as IconCornersOut,
-  X as IconCsv,
-  m as IconCube,
-  x as IconDatabase,
+  m as IconCsv,
+  x as IconCube,
+  H as IconDatabase,
   M as IconDotsNine,
   v as IconDotsThreeVertical,
-  H as IconExport,
+  G as IconExport,
   N as IconEye,
   O as IconEyeSlash,
   Q as IconFile,
   E as IconFiles,
-  G as IconFloppyDisk,
-  b as IconFolderSimple,
-  W as IconFolderSimpleX,
-  z as IconFunnel,
-  J as IconGauge,
-  V as IconGear,
-  Y as IconGoogleDrive,
-  j as IconHand,
-  q as IconHeadCircuit,
-  K as IconHouse,
-  Z as IconIcon,
-  _ as IconInfo,
-  $ as IconJoin,
-  oo as IconLanguage,
-  no as IconLink,
-  co as IconList,
-  Io as IconLock,
-  eo as IconLockOpen,
-  ro as IconMariaDB,
-  io as IconMinus,
-  to as IconMongoDB,
-  ao as IconMoon,
-  lo as IconMySQL,
-  so as IconNavigationArrow,
-  Co as IconNotePencil,
-  wo as IconPassword,
-  ho as IconPen,
-  po as IconPlay,
-  go as IconPlugsX,
-  uo as IconPlus,
-  So as IconPorsgteSQL,
-  Ao as IconPresentationChart,
-  Do as IconQuestion,
-  Lo as IconQuestionFullfilled,
-  ko as IconRedo,
-  Uo as IconRoleX,
-  Po as IconSearch,
-  Fo as IconSearchX,
-  To as IconSelection,
+  b as IconFloppyDisk,
+  W as IconFolderSimple,
+  z as IconFolderSimpleX,
+  J as IconFunnel,
+  V as IconGauge,
+  Y as IconGear,
+  j as IconGitBranchX,
+  q as IconGoogleDrive,
+  K as IconHand,
+  Z as IconHeadCircuit,
+  _ as IconHouse,
+  $ as IconIcon,
+  oo as IconInfo,
+  no as IconJoin,
+  co as IconLanguage,
+  Io as IconLink,
+  eo as IconList,
+  ro as IconLock,
+  io as IconLockOpen,
+  to as IconMariaDB,
+  ao as IconMinus,
+  lo as IconMongoDB,
+  so as IconMoon,
+  Co as IconMySQL,
+  ho as IconNavigationArrow,
+  wo as IconNotePencil,
+  po as IconPassword,
+  uo as IconPen,
+  go as IconPlay,
+  So as IconPlugsX,
+  Ao as IconPlus,
+  Do as IconPorsgteSQL,
+  Lo as IconPresentationChart,
+  ko as IconQuestion,
+  Uo as IconQuestionFullfilled,
+  Po as IconRedo,
+  Bo as IconRoleX,
+  Fo as IconSearch,
+  To as IconSearchX,
+  Xo as IconSelection,
   fo as IconServer,
   yo as IconSlidersHorizontal,
-  Bo as IconSticker,
-  Ro as IconSun,
-  Xo as IconThreeDot,
-  mo as IconTrash,
-  xo as IconTriangleDown,
-  Mo as IconTriangleUp,
-  vo as IconUndo,
-  Ho as IconUploadSimple,
-  No as IconUser,
-  Oo as IconUserX,
-  Qo as IconWarningCircle,
-  Eo as IconWrench,
-  Go as IconX,
-  bo as IconYandexDisk
+  Ro as IconSticker,
+  mo as IconSun,
+  xo as IconThreeDot,
+  Ho as IconTrash,
+  Mo as IconTriangleDown,
+  vo as IconTriangleUp,
+  Go as IconUndo,
+  No as IconUploadSimple,
+  Oo as IconUser,
+  Qo as IconUserX,
+  Eo as IconWarningCircle,
+  bo as IconWrench,
+  Wo as IconX,
+  zo as IconYandexDisk
 };

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

@@ -1,112 +1,117 @@
-import { jsx as t, jsxs as _ } from "react/jsx-runtime";
-import U, { useState as N, useEffect as q, useCallback as d } from "react";
-import o from "../../../_virtual/index.js";
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as O, useRef as v, useState as y, useEffect as P, useImperativeHandle as Q, useCallback as _ } from "react";
+import i from "../../../_virtual/index.js";
 import '../../../assets/src/components/Ui/Table/Table.css';/* empty css                                          */
-import { IconCaretDown as w, IconCaretUp as F } from "../Icons/Icons.js";
-import { MemoizedRow as G } from "./MemoizedRow/MemoizedRow.js";
-import { Loader as H } from "../Loader/Loader.js";
-const y = {
-  asc: /* @__PURE__ */ t(w, { viewBox: "0 -6 24 24", "aria-hidden": "true" }),
-  desc: /* @__PURE__ */ t(F, { viewBox: "0 -4 24 24", "aria-hidden": "true" }),
-  default: /* @__PURE__ */ t(w, { viewBox: "0 -6 24 24", "aria-hidden": "true" })
-};
-function J({
-  columns: f,
-  dataSource: c,
-  rowKey: i,
-  tableClassName: v,
-  theadClassName: k,
-  trTheadClassNames: x,
-  thTheadClassNames: D,
-  tbodyClassName: I,
-  wrapperClassName: A,
-  borderBottom: u = !1,
-  stickyHeader: C = !1,
-  stickyLeft: h = !1,
-  bordered: l = !1,
+import { IconCaretDown as k, IconCaretUp as V } from "../Icons/Icons.js";
+import { MemoizedRow as W } from "./MemoizedRow/MemoizedRow.js";
+import { Loader as X } from "../Loader/Loader.js";
+import { TableSkeletonRow as Y } from "./TableSkeletonRow/TableSkeletonRow.js";
+const x = {
+  asc: /* @__PURE__ */ t(k, { viewBox: "0 -6 24 24", "aria-hidden": "true" }),
+  desc: /* @__PURE__ */ t(V, { viewBox: "0 -4 24 24", "aria-hidden": "true" }),
+  default: /* @__PURE__ */ t(k, { viewBox: "0 -6 24 24", "aria-hidden": "true" })
+}, Z = ({
+  columns: o,
+  dataSource: p,
+  rowKey: l,
+  tableClassName: R,
+  theadClassName: I,
+  trTheadClassNames: D,
+  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: S = !1
-}) {
-  const [T, b] = N(c), [n, z] = N(
+  onClickTrHeader: z,
+  loading: b = !1,
+  hasMore: $ = !1,
+  loadingIndicator: E
+}, H) => {
+  const L = v(null), g = v(null), [M, w] = y(p), [n, U] = y(
     B || null
   );
-  q(() => {
-    b(c);
-  }, [c]);
-  const $ = d(
-    (e) => typeof i == "function" ? i(e) : typeof i == "string" && i in e ? String(e[i]) : "unknown",
-    [i]
-  ), g = d((e, a) => {
-    b((p) => [...p].sort((L, M) => {
-      const s = L[e], r = M[e];
+  P(() => {
+    w(p);
+  }, [p]), Q(H, () => ({
+    loaderRef: g.current
+  }));
+  const q = _(
+    (e) => typeof l == "function" ? l(e) : typeof l == "string" && l in e ? String(e[l]) : "unknown",
+    [l]
+  ), N = _((e, a) => {
+    w((f) => [...f].sort((G, J) => {
+      const s = G[e], r = J[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;
-    })), z({ key: e, order: a });
-  }, []), E = d(
+    })), U({ key: e, order: a });
+  }, []), F = _(
     (e) => {
-      const p = (n == null ? void 0 : n.key) === e && n.order === "asc" ? "desc" : "asc";
-      g(e, p);
+      const f = (n == null ? void 0 : n.key) === e && n.order === "asc" ? "desc" : "asc";
+      N(e, f);
     },
-    [n, g]
+    [n, N]
   );
-  return /* @__PURE__ */ t("div", { className: o("table-component", A), children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ t("div", { className: i("table-component", C), children: /* @__PURE__ */ t(
     "div",
     {
-      className: o(
+      className: i(
         "table-component__wrapper",
         {
-          bordered: l,
-          borderBottom: u
+          bordered: c,
+          borderBottom: h
         },
-        v
+        R
       ),
-      children: /* @__PURE__ */ _(
+      children: /* @__PURE__ */ d(
         "table",
         {
-          className: o("table-component__wrapper__table", {
-            bordered: l,
-            borderBottom: u
+          className: i("table-component__wrapper__table", {
+            bordered: c,
+            borderBottom: h
           }),
+          ref: L,
           children: [
             /* @__PURE__ */ t(
               "thead",
               {
-                className: o(
+                className: i(
                   "table-component__wrapper__table__thead",
                   {
-                    stickyHeader: C
+                    stickyHeader: T
                   },
-                  k
+                  I
                 ),
                 children: /* @__PURE__ */ t(
                   "tr",
                   {
-                    className: o(
+                    className: i(
                       "table-component__wrapper__table__thead__tr",
-                      x
+                      D
                     ),
-                    onClick: R,
-                    children: f.map((e, a) => /* @__PURE__ */ t(
+                    onClick: z,
+                    children: o.map((e, a) => /* @__PURE__ */ t(
                       "th",
                       {
-                        className: o(
+                        className: i(
                           "table-component__wrapper__table__thead__th",
                           {
-                            bordered: l,
-                            stickyLeft: h && a === 0
+                            bordered: c,
+                            stickyLeft: u && a === 0
                           },
-                          D
+                          S
                         ),
                         style: {
                           ...e.width ? { width: e.width } : {},
                           ...e.align ? { textAlign: e.align } : {}
                         },
-                        onClick: () => e.sorted && E(e.key),
-                        children: /* @__PURE__ */ _("div", { className: "th-content", children: [
+                        onClick: () => e.sorted && F(e.key),
+                        children: /* @__PURE__ */ d("div", { className: "th-content", children: [
                           e.title,
-                          e.sorted && /* @__PURE__ */ t("span", { className: "sort-icon", children: (n == null ? void 0 : n.key) === e.key ? y[n.order] : y.default })
+                          e.sorted && /* @__PURE__ */ t("span", { className: "sort-icon", children: (n == null ? void 0 : n.key) === e.key ? x[n.order] : x.default })
                         ] })
                       },
                       `${e.key}-${a}`
@@ -115,22 +120,22 @@ function J({
                 )
               }
             ),
-            /* @__PURE__ */ _("tbody", { className: o("table-component__wrapper__table__tbody", I), children: [
-              T.map((e, a) => /* @__PURE__ */ t(
-                G,
+            /* @__PURE__ */ d("tbody", { className: i("table-component__wrapper__table__tbody", A), children: [
+              M.map((e, a) => /* @__PURE__ */ t(
+                W,
                 {
                   record: e,
                   onClickTr: () => m == null ? void 0 : m(e),
-                  columns: f,
-                  rowKey: i,
+                  columns: o,
+                  rowKey: l,
                   rowClassName: j,
                   index: a,
-                  stickyLeft: h,
-                  bordered: l
+                  stickyLeft: u,
+                  bordered: c
                 },
-                $(e)
+                q(e)
               )),
-              S ? /* @__PURE__ */ t(
+              b ? /* @__PURE__ */ t(
                 "div",
                 {
                   style: {
@@ -145,17 +150,17 @@ function J({
                     backgroundColor: "rgba(255, 255, 255, 0.7)",
                     zIndex: 10
                   },
-                  children: /* @__PURE__ */ t(H, { className: "centered" })
+                  children: /* @__PURE__ */ t(X, { className: "centered" })
                 }
-              ) : null
+              ) : null,
+              !b && $ && /* @__PURE__ */ t("tr", { ref: g, children: /* @__PURE__ */ t("td", { colSpan: o.length, children: E || /* @__PURE__ */ t(Y, { colSpan: o.length }) }) })
             ] })
           ]
         }
       )
     }
   ) });
-}
-const K = U.memo(J);
+}, oe = O(Z);
 export {
-  K as Table
+  oe as Table
 };

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

@@ -0,0 +1,11 @@
+import { jsx as o, jsxs as t } from "react/jsx-runtime";
+import { Skeleton as e } 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, {})
+] }) });
+export {
+  n as TableSkeletonRow
+};

package/dist/main.d.ts

@@ -79,8 +79,8 @@ export declare const ButtonsArray: React.FC<ButtonsArrayProps>;
 export declare interface ButtonsArrayProps {
     tabs: ButtonTab[];
     label?: string;
-    initialActiveTab?: number;
-    onChange?: (status: string | number) => void;
+    initialActiveTab?: string | number;
+    onChange?: (key: string | number) => void;
 }
 
 declare interface ButtonTab {
@@ -516,6 +516,13 @@ className?: string;
 viewBox?: string;
 }>;
 
+export declare const IconClickHouse: FC<    {
+size?: number;
+color?: string;
+className?: string;
+viewBox?: string;
+}>;
+
 export declare const IconCopy: FC<    {
 size?: number;
 color?: string;
@@ -642,6 +649,13 @@ className?: string;
 viewBox?: string;
 }>;
 
+export declare const IconGitBranchX: FC<    {
+size?: number;
+color?: string;
+className?: string;
+viewBox?: string;
+}>;
+
 export declare const IconGoogleDrive: FC<    {
 size?: number;
 color?: string;
@@ -1135,7 +1149,11 @@ export declare interface TabItem {
     disabled?: boolean;
 }
 
-export declare const Table: <T extends object>(props: TablesProps<T>) => JSX.Element;
+export declare const Table: <T extends object>(props: TablesProps<T> & {
+    ref?: default_2.ForwardedRef<{
+        loaderRef: HTMLTableRowElement | null;
+    }>;
+}) => JSX.Element;
 
 declare type TablesProps<T extends object = Record<string, unknown>> = {
     columns: Column<T>[];
@@ -1159,6 +1177,8 @@ declare type TablesProps<T extends object = Record<string, unknown>> = {
     onClickTr?: (record: T) => void;
     onClickTrHeader?: () => void;
     loading?: boolean;
+    hasMore?: boolean;
+    loadingIndicator?: default_2.ReactNode;
 };
 
 export declare const Tabs: React.FC<TabsProps>;