@dgshahr/ui-kit 0.0.90 → 0.0.92

package/dist/Table/index.mjs

@@ -1,31 +1,69 @@
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
-import { c as a } from "../clsx-OuTLNxxd.js";
-import T from "../Badge/index.mjs";
-import B from "../Button/index.mjs";
-import K from "../Form/Checkbox/index.mjs";
-import v from "../Tooltip/index.mjs";
-import { I as R } from "../IconArrowDown2-7ddwV5IE.js";
-import { I as j } from "../IconInfoCircleOutline-aO1F3qnG.js";
-import p from "../Divider/index.mjs";
-import I from "../Pagination/index.mjs";
+"use client";
+import { jsx as s, jsxs as g } from "react/jsx-runtime";
+import { c } from "../clsx-OuTLNxxd.js";
+import { useState as K, useEffect as T, createContext as L, useContext as j, useRef as H } from "react";
+import D from "../Badge/index.mjs";
+import O from "../Form/Checkbox/index.mjs";
+import A from "../Tooltip/index.mjs";
+import { I as P } from "../IconArrowDown2-7ddwV5IE.js";
+import { I as z } from "../IconInfoCircleOutline-aO1F3qnG.js";
+import m from "../Divider/index.mjs";
+import q from "../Pagination/index.mjs";
 import '../assets/styles.css';/* empty css                 */
-const L = (t) => {
-  const { title: i, actionButton: r, showTotal: d, total: n, className: o } = t;
-  return /* @__PURE__ */ u(
+const E = L({
+  observer: null,
+  columns: [],
+  data: [],
+  rowKey: ""
+}), R = "after:!dgs-ui-kit-shadow-[rgba(0,0,0,0.06)]";
+function y(e) {
+  e.classList.add(R);
+}
+function $(e) {
+  e.classList.remove(R);
+}
+function M(e) {
+  const { children: t, ...n } = e, { columns: o, rowSelection: r } = n, [d, a] = K(null);
+  return T(() => {
+    let i = o.some((u) => !!u.sticky);
+    return i || (i = !!r?.sticky), i && a(
+      new IntersectionObserver(
+        (u) => {
+          let l = !1;
+          for (const k of u)
+            if (k.boundingClientRect.right > k.intersectionRect.right) {
+              document.querySelectorAll("#sticky-cell-right").forEach(y), l = !0;
+              break;
+            } else if (k.boundingClientRect.left < k.intersectionRect.left) {
+              document.querySelectorAll("#sticky-cell-left").forEach(y), l = !0;
+              break;
+            }
+          l || document.querySelectorAll('[id^="sticky-cell-"]').forEach($);
+        },
+        { threshold: 1, rootMargin: "0% 100% 0% 100%" }
+      )
+    ), () => {
+      d && d.disconnect();
+    };
+  }, []), /* @__PURE__ */ s(E.Provider, { value: { observer: d, ...n }, children: t });
+}
+const b = () => j(E), F = (e) => {
+  const { title: t, extraElement: n, showTotal: o, total: r, className: d } = e;
+  return /* @__PURE__ */ g(
     "div",
     {
-      className: a(
+      className: c(
         "dgs-ui-kit-p-4 dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-space-x-1 dgs-ui-kit-space-x-reverse dgs-ui-kit-border-b dgs-ui-kit-border-solid dgs-ui-kit-border-gray-200",
-        o
+        d
       ),
       children: [
-        /* @__PURE__ */ e("div", { className: "dgs-ui-kit-font-h4-bold dgs-ui-kit-text-gray-700 dgs-ui-kit-w-full", children: i }),
-        d && /* @__PURE__ */ u("div", { className: "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-shrink-0", children: [
-          /* @__PURE__ */ e("span", { className: "dgs-ui-kit-font-p2-regular dgs-ui-kit-text-gray-700 dgs-ui-kit-ml-1", children: "تعداد نتایج:" }),
-          /* @__PURE__ */ e(
-            T,
+        /* @__PURE__ */ s("div", { className: "dgs-ui-kit-font-h4-bold dgs-ui-kit-text-gray-700 dgs-ui-kit-w-full", children: t }),
+        o && /* @__PURE__ */ g("div", { className: "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-shrink-0", children: [
+          /* @__PURE__ */ s("span", { className: "dgs-ui-kit-font-p2-regular dgs-ui-kit-text-gray-700 dgs-ui-kit-ml-1", children: "تعداد نتایج:" }),
+          /* @__PURE__ */ s(
+            D,
             {
-              value: n ?? 0,
+              value: r ?? 0,
               valueType: "number",
               size: "large",
               color: "primary",
@@ -33,20 +71,13 @@ const L = (t) => {
             }
           )
         ] }),
-        r && /* @__PURE__ */ e(
-          B,
-          {
-            className: a("dgs-ui-kit-shrink-0", r.className),
-            ...r,
-            children: r.children ?? null
-          }
-        )
+        n
       ]
     }
   );
 };
-function h(t) {
-  switch (t) {
+function p(e) {
+  switch (e) {
     case "center":
       return "dgs-ui-kit-justify-center";
     case "start":
@@ -57,100 +88,128 @@ function h(t) {
       return;
   }
 }
-function C(t, i) {
-  return t || (Array.isArray(i) ? i[i.length - 1] : i);
+function B(e, t) {
+  return e || (Array.isArray(t) ? t[t.length - 1] : t);
 }
-function S(t) {
-  return !!(t && t.selectedRowKeys.length > 1 || typeof t?.onSelectRow == "function");
+function _(e) {
+  return !!(e && e.selectedRowKeys.length > 1 || typeof e?.onSelectRow == "function");
 }
-function A(t, i) {
-  return /* @__PURE__ */ e(
+function I(e, t) {
+  return /* @__PURE__ */ s(
     "div",
     {
-      className: a(
-        "dgs-ui-kit-w-full dgs-ui-kit-flex dgs-ui-kit-items-center",
-        h(t ?? "center")
+      className: c(
+        "dgs-ui-kit-w-full dgs-ui-kit-flex dgs-ui-kit-items-centerd",
+        p(e ?? "center")
       ),
-      children: /* @__PURE__ */ e(K, { ...i })
+      children: /* @__PURE__ */ s(O, { ...t })
     }
   );
 }
-function k(t, i) {
-  if (t)
-    return a("dgs-ui-kit-sticky dgs-ui-kit-translate-y-[1px] dgs-ui-kit-z-10", {
-      "dgs-ui-kit-right-0": t === "right",
-      "dgs-ui-kit-left-0": t === "left",
-      'after:dgs-ui-kit-content-[""] after:dgs-ui-kit-absolute after:dgs-ui-kit-bottom-0 after:dgs-ui-kit-right-0 after:dgs-ui-kit-w-full after:dgs-ui-kit-border-b after:dgs-ui-kit-border-solid after:dgs-ui-kit-border-gray-200': i
-    });
+function U(e, t) {
+  if (e)
+    return c(
+      "dgs-ui-kit-sticky dgs-ui-kit-z-10",
+      'after:dgs-ui-kit-content[""] after:dgs-ui-kit-absolute after:dgs-ui-kit-top-0 after:dgs-ui-kit-h-full after:dgs-ui-kit-w-[30px] after:dgs-ui-kit-transition-shadow',
+      // sticky shadow class
+      {
+        " dgs-ui-kit-right-[-1px] dgs-ui-kit-pr-[calc(1em+1px)] after:dgs-ui-kit-left-0 after:-dgs-ui-kit-translate-x-full after:dgs-ui-kit-shadow-[inset_-10px_0_8px_-8px] after:dgs-ui-kit-shadow-transparent": e === "right",
+        " dgs-ui-kit-left-[-1px] dgs-ui-kit-pl-[calc(1em+1px)] after:dgs-ui-kit-right-0 after:dgs-ui-kit-translate-x-full after:dgs-ui-kit-shadow-[inset_10px_0_8px_-8px] after:dgs-ui-kit-shadow-transparent": e === "left",
+        'before:dgs-ui-kit-content-[""] before:dgs-ui-kit-absolute before:dgs-ui-kit-top-0 before:dgs-ui-kit-right-0 before:dgs-ui-kit-w-full before:dgs-ui-kit-border-t before:md:dgs-ui-kit-border-t-0 before:dgs-ui-kit-border-solid before:dgs-ui-kit-border-gray-200': t
+      }
+    );
 }
-const y = "dgs-ui-kit-p-4 dgs-ui-kit-pl-0 dgs-ui-kit-bg-white dgs-ui-kit-border-b dgs-ui-kit-border-solid dgs-ui-kit-border-gray-200";
-function D(t, i) {
-  return t ? Array.isArray(t) ? t.reduce((r, d) => r?.[d] ?? null, i) : i[t] : null;
+const f = (e) => {
+  const { children: t, className: n, type: o, sticky: r, addBorderToSticky: d, stuckToTop: a } = e, i = H(null), u = o, { observer: l } = b();
+  return T(() => {
+    if (!(!i.current || !l))
+      return r && l.observe(i.current), () => {
+        !i.current || !l || r && l.unobserve(i.current);
+      };
+  }, [i, l]), /* @__PURE__ */ s(
+    u,
+    {
+      ref: i,
+      className: c(n, U(r, d), {
+        'dgs-ui-kit-border-b-0 before:dgs-ui-kit-content[""] before:dgs-ui-kit-absolute before:dgs-ui-kit-bottom-0 before:dgs-ui-kit-left-0 before:dgs-ui-kit-w-full before:dgs-ui-kit-border-b before:dgs-ui-kit-border-solid before:dgs-ui-kit-border-gray-200': a,
+        "dgs-ui-kit-top-0 dgs-ui-kit-z-20": a && r,
+        "dgs-ui-kit-sticky dgs-ui-kit-top-0 dgs-ui-kit-z-10": a && !r
+      }),
+      id: r && `sticky-cell-${r}`,
+      children: t
+    }
+  );
+}, x = "dgs-ui-kit-p-4 dgs-ui-kit-pl-0 dgs-ui-kit-bg-white dgs-ui-kit-border-b dgs-ui-kit-border-solid dgs-ui-kit-border-gray-200";
+function W(e, t) {
+  return e ? Array.isArray(e) ? e.reduce((n, o) => n?.[o] ?? null, t) : t[e] : null;
 }
-function E(t, i, r) {
-  if (typeof t.render == "function") return t.render(i, r);
-  const d = D(t.dataIndex, i);
-  if (t.ellipsis) {
-    const n = /* @__PURE__ */ e("div", { className: "!dgs-ui-kit-truncate", children: d });
-    return typeof t.ellipsis != "boolean" && t.ellipsis.hideTooltip ? n : /* @__PURE__ */ e(
-      v,
+function Z(e, t, n) {
+  if (typeof e.render == "function") return e.render(t, n);
+  const o = W(e.dataIndex, t);
+  if (e.ellipsis) {
+    const r = /* @__PURE__ */ s("div", { className: "!dgs-ui-kit-truncate", children: o });
+    return typeof e.ellipsis != "boolean" && e.ellipsis.hideTooltip ? r : /* @__PURE__ */ s(
+      A,
       {
         wrapperClassName: "dgs-ui-kit-w-full",
-        content: d,
-        children: n
+        content: o,
+        children: r
       }
     );
   }
-  return d;
+  return o;
 }
-function H(t) {
-  const { data: i, columns: r, rowKey: d, rowSelection: n, havePagination: o } = t;
-  return /* @__PURE__ */ e("tbody", { children: i.map((s, g) => /* @__PURE__ */ u("tr", { children: [
-    S(n) && /* @__PURE__ */ e(
-      "td",
+const G = (e) => {
+  const { havePagination: t } = e, { columns: n, data: o, rowKey: r, rowSelection: d, stickyTableHeader: a } = b();
+  return /* @__PURE__ */ s("tbody", { children: o.map((i, u) => /* @__PURE__ */ g("tr", { children: [
+    _(d) && /* @__PURE__ */ s(
+      f,
       {
-        className: a(
-          y,
-          n?.className,
+        type: "td",
+        className: c(
+          x,
+          d?.className,
           {
-            "dgs-ui-kit-border-b-0 dgs-ui-kit-rounded-br-2xl": !o && g === i.length - 1
+            "dgs-ui-kit-border-b-0 dgs-ui-kit-rounded-br-2xl": !t && u === o.length - 1
           },
-          k(n?.sticky),
-          n?.className
+          d?.className
         ),
-        children: A(n?.align, {
-          onChange: (l) => n?.onSelectRow(l, s[d]),
-          checked: !!n?.selectedRowKeys.find((l) => l === s[d])
+        sticky: d?.sticky,
+        addBorderToSticky: a ? u !== 0 : !0,
+        children: I(d?.align, {
+          onChange: (l) => d?.onSelectRow(l, i[r]),
+          checked: !!d?.selectedRowKeys.find((l) => l === i[r])
         })
       }
     ),
-    r.map((l) => /* @__PURE__ */ e(
-      "td",
+    n.map((l) => /* @__PURE__ */ s(
+      f,
       {
-        className: a(
-          y,
+        type: "td",
+        className: c(
+          x,
           {
-            "dgs-ui-kit-border-b-0 first:dgs-ui-kit-rounded-br-2xl last:dgs-ui-kit-rounded-bl-2xl": !o && g === i.length - 1
+            "dgs-ui-kit-border-b-0 first:dgs-ui-kit-rounded-br-2xl last:dgs-ui-kit-rounded-bl-2xl": !t && u === o.length - 1
           },
-          k(l?.sticky),
           l.className
         ),
-        children: /* @__PURE__ */ e(
+        sticky: l.sticky,
+        addBorderToSticky: a ? u !== 0 : !0,
+        children: /* @__PURE__ */ s(
           "div",
           {
-            className: a(
+            className: c(
               "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-ml-2",
-              h(l.align)
+              p(l.align)
             ),
-            children: E(l, s, g)
+            children: Z(l, i, u)
           }
         )
       },
-      `${s[d]}-${C(l.key, l.dataIndex)}`
+      `${i[r]}-${B(l.key, l.dataIndex)}`
     ))
-  ] }, s[d])) });
-}
-const P = (t) => /* @__PURE__ */ e(
+  ] }, i[r])) });
+}, J = (e) => /* @__PURE__ */ s(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -158,8 +217,8 @@ const P = (t) => /* @__PURE__ */ e(
     height: "1em",
     fill: "none",
     viewBox: "0 0 24 24",
-    ...t,
-    children: /* @__PURE__ */ e(
+    ...e,
+    children: /* @__PURE__ */ s(
       "path",
       {
         fill: "currentColor",
@@ -168,51 +227,63 @@ const P = (t) => /* @__PURE__ */ e(
     )
   }
 );
-function _(t, i) {
-  if (t.length !== i.length) return !1;
-  t.sort(), i.sort();
-  for (let r = 0; r < t.length; r++) if (t[r] !== i[r]) return !1;
+function Q(e, t) {
+  if (e.length !== t.length) return !1;
+  e.sort(), t.sort();
+  for (let n = 0; n < e.length; n++) if (e[n] !== t[n]) return !1;
   return !0;
 }
-const c = 16, b = "dgs-ui-kit-p-4 dgs-ui-kit-pl-0 dgs-ui-kit-text-gray-500 dgs-ui-kit-bg-gray-50 dgs-ui-kit-border-b dgs-ui-kit-border-solid dgs-ui-kit-border-gray-200", w = "!dgs-ui-kit-h-8 dgs-ui-kit-shrink-0";
-function N(t, i) {
-  return /* @__PURE__ */ u("div", { className: "dgs-ui-kit-font-p1-medium dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-space-x-1 dgs-ui-kit-space-x-reverse", children: [
-    /* @__PURE__ */ e("span", { children: t }),
-    i && (i.anchorIcon ?? /* @__PURE__ */ e(
-      j,
+const h = 16, v = "dgs-ui-kit-p-4 dgs-ui-kit-pl-0 dgs-ui-kit-text-gray-500 dgs-ui-kit-bg-gray-50 dgs-ui-kit-border-b dgs-ui-kit-border-solid dgs-ui-kit-border-gray-200", w = "!dgs-ui-kit-h-8 dgs-ui-kit-shrink-0";
+function C(e, t) {
+  return /* @__PURE__ */ s("button", { onClick: () => t.onSort(e), children: /* @__PURE__ */ s(
+    e === "ascend" ? J : P,
+    {
+      width: h,
+      height: h,
+      className: t.active === e ? "dgs-ui-kit-text-primary-500" : "dgs-ui-kit-text-gray-500"
+    }
+  ) });
+}
+function N(e, t) {
+  return /* @__PURE__ */ g("div", { className: "dgs-ui-kit-font-p1-medium dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-space-x-1 dgs-ui-kit-space-x-reverse", children: [
+    /* @__PURE__ */ s("span", { children: e }),
+    t && (t.anchorIcon ?? /* @__PURE__ */ s(
+      z,
       {
-        width: c,
-        height: c
+        width: h,
+        height: h
       }
     ))
   ] });
 }
-function x(t, i) {
-  return t.map((r) => r[i]);
+function S(e, t) {
+  return e.map((n) => n[t]);
 }
-function z(t) {
-  const { columns: i, haveHeader: r, rowSelection: d, rowKey: n, data: o } = t;
-  return /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ u("tr", { children: [
-    S(d) && /* @__PURE__ */ e(
-      "th",
+const X = (e) => {
+  const { haveHeader: t } = e, { columns: n, rowKey: o, rowSelection: r, data: d, stickyTableHeader: a } = b();
+  return /* @__PURE__ */ s("thead", { children: /* @__PURE__ */ g("tr", { children: [
+    _(r) && /* @__PURE__ */ s(
+      f,
       {
-        className: a(
-          b,
-          { "dgs-ui-kit-rounded-tr-2xl": !r },
-          k(d?.sticky, !0),
-          d?.className
+        type: "th",
+        className: c(
+          v,
+          { "dgs-ui-kit-rounded-tr-2xl": !t },
+          r?.className
         ),
-        children: /* @__PURE__ */ u("div", { className: "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-justify-between", children: [
-          A(d?.align, {
-            checked: d.selectedRowKeys.length > 0,
-            isIndeterminate: !_(
-              x(o, n),
-              d.selectedRowKeys
+        sticky: r?.sticky,
+        stuckToTop: a,
+        children: /* @__PURE__ */ g("div", { className: "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-justify-between", children: [
+          I(r?.align, {
+            checked: r.selectedRowKeys.length > 0,
+            isIndeterminate: !Q(
+              S(d, o),
+              r.selectedRowKeys
             ),
-            onChange: (s) => d?.onSelectRow(s, s.target.checked ? x(o, n) : [])
+            onChange: (i) => r?.onSelectRow(i, i.target.checked ? S(d, o) : [])
           }),
-          /* @__PURE__ */ e(
-            p,
+          /* @__PURE__ */ s(
+            m,
             {
               type: "vertical",
               className: w
@@ -221,48 +292,38 @@ function z(t) {
         ] })
       }
     ),
-    i.map((s, g) => /* @__PURE__ */ e(
-      "th",
+    n.map((i, u) => /* @__PURE__ */ s(
+      f,
       {
-        className: a(
-          b,
+        type: "th",
+        sticky: i.sticky,
+        className: c(
+          v,
           {
-            "first:dgs-ui-kit-rounded-tr-2xl last:dgs-ui-kit-rounded-tl-2xl": !r
+            "first:dgs-ui-kit-rounded-tr-2xl last:dgs-ui-kit-rounded-tl-2xl": !t
           },
-          k(s?.sticky, !0),
-          s.className
+          i.className
         ),
-        children: /* @__PURE__ */ u("div", { className: "dgs-ui-kit-flex dgs-ui-kit-justify-between dgs-ui-kit-items-center", children: [
-          /* @__PURE__ */ u(
+        stuckToTop: a,
+        children: /* @__PURE__ */ g("div", { className: "dgs-ui-kit-flex dgs-ui-kit-justify-between dgs-ui-kit-items-center", children: [
+          /* @__PURE__ */ g(
             "div",
             {
-              className: a(
+              className: c(
                 "dgs-ui-kit-flex dgs-ui-kit-items-center dgs-ui-kit-space-x-2 dgs-ui-kit-space-x-reverse dgs-ui-kit-w-full dgs-ui-kit-ml-2",
-                h(s.align)
+                p(i.align)
               ),
               children: [
-                s.tooltip?.content ? /* @__PURE__ */ e(v, { ...s.tooltip, children: N(s.title, s.tooltip) }) : N(s.title),
-                typeof s.onSort == "function" && /* @__PURE__ */ u("div", { className: "dgs-ui-kit-flex dgs-ui-kit-flex-col", children: [
-                  /* @__PURE__ */ e("button", { onClick: () => s.onSort("ascend"), children: /* @__PURE__ */ e(
-                    P,
-                    {
-                      width: c,
-                      height: c
-                    }
-                  ) }),
-                  /* @__PURE__ */ e("button", { onClick: () => s.onSort("descend"), children: /* @__PURE__ */ e(
-                    R,
-                    {
-                      width: c,
-                      height: c
-                    }
-                  ) })
+                i.tooltip?.content ? /* @__PURE__ */ s(A, { ...i.tooltip, children: N(i.title, i.tooltip) }) : N(i.title),
+                typeof i.sort?.onSort == "function" && /* @__PURE__ */ g("div", { className: "dgs-ui-kit-flex dgs-ui-kit-flex-col", children: [
+                  C("ascend", i.sort),
+                  C("descend", i.sort)
                 ] })
               ]
             }
           ),
-          g !== i.length - 1 && /* @__PURE__ */ e(
-            p,
+          u !== n.length - 1 && /* @__PURE__ */ s(
+            m,
             {
               type: "vertical",
               className: w
@@ -270,54 +331,36 @@ function z(t) {
           )
         ] })
       },
-      C(s.key, s.dataIndex)
+      B(i.key, i.dataIndex)
     ))
   ] }) });
-}
-function W(t) {
-  const { header: i, wrapperClassName: r, className: d, columns: n, rowSelection: o, data: s, rowKey: g, pagination: l } = t, f = (i && Object.values(i).length > 0) ?? !1, m = !!(l?.totalCount && l?.pageSize);
-  return /* @__PURE__ */ u(
+};
+function ae(e) {
+  const { header: t, wrapperClassName: n, className: o, data: r, pagination: d } = e, a = (t && Object.values(t).length > 0) ?? !1, i = !!(d?.totalCount && d?.pageSize);
+  return /* @__PURE__ */ g(
     "div",
     {
-      className: a(
-        "dgs-ui-kit-relative dgs-ui-kit-bg-white dgs-ui-kit-border dgs-ui-kit-border-gray-200 dgs-ui-kit-border-solid dgs-ui-kit-rounded-2xl",
-        r
+      className: c(
+        "dgs-ui-kit-relative dgs-ui-kit-bg-white dgs-ui-kit-border dgs-ui-kit-border-gray-200 dgs-ui-kit-border-solid dgs-ui-kit-rounded-2xl ",
+        n
       ),
       children: [
-        f && /* @__PURE__ */ e(
-          L,
+        a && /* @__PURE__ */ s(
+          F,
           {
-            ...i,
-            total: l?.totalCount ?? s.length
+            ...t,
+            total: d?.totalCount ?? r.length
           }
         ),
-        /* @__PURE__ */ u("table", { className: d, children: [
-          /* @__PURE__ */ e(
-            z,
-            {
-              columns: n,
-              haveHeader: f,
-              rowKey: g,
-              rowSelection: o,
-              data: s
-            }
-          ),
-          /* @__PURE__ */ e(
-            H,
-            {
-              columns: n,
-              data: s,
-              rowKey: g,
-              rowSelection: o,
-              havePagination: m
-            }
-          )
-        ] }),
-        m && /* @__PURE__ */ e(
-          I,
+        /* @__PURE__ */ s("table", { className: o, children: /* @__PURE__ */ g(M, { ...e, children: [
+          /* @__PURE__ */ s(X, { haveHeader: a }),
+          /* @__PURE__ */ s(G, { havePagination: i })
+        ] }) }),
+        i && /* @__PURE__ */ s(
+          q,
           {
-            className: a("dgs-ui-kit-py-4 !dgs-ui-kit-px-0", l?.className),
-            ...l
+            className: c("dgs-ui-kit-py-4 !dgs-ui-kit-px-0", d?.className),
+            ...d
           }
         )
       ]
@@ -325,5 +368,5 @@ function W(t) {
   );
 }
 export {
-  W as default
+  ae as default
 };

package/dist/Table/types.d.ts

@@ -1,12 +1,12 @@
 import { ReactNode } from 'react';
 import { DeepNamePath } from '../../utils/types/deepNamePath';
-import { ButtonProps } from '../Button';
 import { PaginationProps } from '../Pagination';
 import { TooltipProps } from '../Tooltip';
 type NonTypeSafeDataIndex = string | string[];
 type TypeSafeDataIndex<T> = keyof T | DeepNamePath<T>;
 type DataIndexPath<T> = [keyof T] extends [never] ? NonTypeSafeDataIndex : TypeSafeDataIndex<T>;
 export type UnknownRecord = Record<string, unknown>;
+export type SortValues = 'ascend' | 'descend';
 interface ColumnsTypeBase<T> {
     title?: string;
     align?: 'start' | 'center' | 'end';
@@ -19,7 +19,10 @@ interface ColumnsTypeBase<T> {
         hideTooltip?: boolean;
     };
     render?: (record: T, index: number) => ReactNode;
-    onSort?: (sortOrder: 'ascend' | 'descend') => void;
+    sort?: {
+        active?: SortValues;
+        onSort: (value: SortValues) => void;
+    };
 }
 interface ColumnsTypeWithKey<T> {
     key: string;
@@ -33,7 +36,7 @@ export type ColumnsType<T extends UnknownRecord = UnknownRecord> = ColumnsTypeBa
 export interface TableHeaderProps {
     title?: string;
     showTotal?: boolean;
-    actionButton?: ButtonProps;
+    extraElement?: ReactNode;
     className?: string;
 }
 export interface RowSelectionProps<T> extends Pick<ColumnsType, 'align' | 'sticky' | 'className'> {
@@ -45,6 +48,7 @@ export interface TableProps<T extends UnknownRecord = UnknownRecord> {
     columns: ColumnsType<T>[];
     rowKey: [keyof T] extends [never] ? string : keyof T;
     header?: TableHeaderProps;
+    stickyTableHeader?: boolean;
     rowSelection?: RowSelectionProps<T>;
     pagination?: PaginationProps;
     wrapperClassName?: string;

package/dist/Table/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/Table/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/Table/types.ts"],"names":[],"mappings":"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"}

package/dist/Table/utils.d.ts

@@ -4,5 +4,5 @@ export declare function getAlingmentClass(align: ColumnsType['align']): "dgs-ui-
 export declare function getColumnKey(key: ColumnsType['key'], dataIndex: ColumnsType<UnknownRecord>['dataIndex']): string | undefined;
 export declare function isSelectionAvailable<T extends UnknownRecord>(rowSelection: TableProps<T>['rowSelection']): boolean;
 export declare function renderRowSelectCheckbox(alingment: ColumnsType['align'], checkboxProps?: CheckboxProps): import("react/jsx-runtime").JSX.Element;
-export declare function getStickyClass(sticky: ColumnsType['sticky'], addAfterBorderBottom?: boolean): string | undefined;
+export declare function getStickyClass(sticky: ColumnsType['sticky'], addBeforeBorderTop?: boolean): string | undefined;
 //# sourceMappingURL=utils.d.ts.map

package/dist/Table/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/components/Table/utils.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACtE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGtD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,mGAW5D;AAED,wBAAgB,YAAY,CAC1B,GAAG,EAAE,WAAW,CAAC,KAAK,CAAC,EACvB,SAAS,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC,sBAQnD;AAED,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,aAAa,EAC1D,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,WAM5C;AAED,wBAAgB,uBAAuB,CACrC,SAAS,EAAE,WAAW,CAAC,OAAO,CAAC,EAC/B,aAAa,CAAC,EAAE,aAAa,2CAY9B;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,EAAE,oBAAoB,CAAC,EAAE,OAAO,sBAS3F"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/components/Table/utils.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACtE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGtD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,mGAW5D;AAED,wBAAgB,YAAY,CAC1B,GAAG,EAAE,WAAW,CAAC,KAAK,CAAC,EACvB,SAAS,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC,sBAQnD;AAED,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,aAAa,EAC1D,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,WAM5C;AAED,wBAAgB,uBAAuB,CACrC,SAAS,EAAE,WAAW,CAAC,OAAO,CAAC,EAC/B,aAAa,CAAC,EAAE,aAAa,2CAY9B;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,EAAE,kBAAkB,CAAC,EAAE,OAAO,sBAezF"}