@konstructio/ui 0.1.2-alpha.99 → 0.1.3

package/dist/components/VirtualizedTable/components/Filter/Filter.js

@@ -1,75 +1,67 @@
-import { o as $ } from "../../../../chunk-cI0lbGMq.js";
-import { t as G } from "../../../../Input-BZG7N8m1.js";
-import { t as H } from "../../../../utils-COaoD3PI.js";
-import { Button as J } from "../../../Button/Button.js";
-import { resetEvent as K } from "../../../Filter/events/index.js";
-import { Filter as n } from "../../../Filter/Filter.js";
-import { t as Q } from "../../../../debounce-B55BpO1u.js";
-import { useTableContext as U } from "../../contexts/table.hook.js";
-import { VirtualizedTableEvent as W } from "../../events/index.js";
-import { useCallback as w, useEffect as X, useMemo as u, useRef as Y } from "react";
-import { jsx as s, jsxs as p } from "react/jsx-runtime";
-var Z = /* @__PURE__ */ $(Q(), 1), ue = ({ id: m, actions: i, filters: d, multiSelectFilter: h, placeholder: D, showFilterInput: x = !0, showResetButton: A = !0, resetButtonClassName: M, closeOnApply: j = !0 }) => {
-  const c = Y(null), { termOfSearch: y, multiselectSelected: b, dateFilters: F, dateRangeFilters: S, timeFilters: v, onChangeTermOfSearch: l, onSelectMultiselect: R, onSelectDateFilter: E, onSelectDateRangeFilter: O, onSelectTimeFilter: B } = U(), I = u(() => {
-    const e = d ?? h?.map((a) => ({
-      ...a,
-      type: "badgeMultiSelect"
-    })) ?? [], t = i ?? [];
-    return [...e, ...t];
-  }, [
-    d,
-    h,
-    i
-  ]), T = w((e, t) => R(e, t.map((a) => a.id)), [R]), _ = w(() => {
-    l(""), c.current && (c.current.value = "");
-  }, [l]);
-  X(() => {
-    const e = Array.isArray(m) ? m.join(",") : String(m), t = new AbortController();
-    return document.addEventListener(W.RESET_FILTERS, (a) => {
-      const { detail: o } = a;
-      o.tableId === e && (l(""), c.current && (c.current.value = ""), K());
-    }, { signal: t.signal }), () => t.abort();
-  }, [m, l]);
-  const k = u(() => (0, Z.default)((e) => {
-    l(e.target.value);
-  }, 500), [l]), P = u(() => !!y || Object.values(b ?? {}).flat().length > 0 || Object.values(F ?? {}).some(Boolean) || Object.values(S ?? {}).some(Boolean) || Object.values(v ?? {}).some(Boolean), [
-    y,
-    b,
-    F,
-    S,
-    v
-  ]), g = (e) => {
+import { o as z } from "../../../../rolldown-runtime-B28h4lGi.js";
+import { t as V } from "../../../../debounce-DhCY9mXz.js";
+import { Button as $ } from "../../../Button/Button.js";
+import { Filter as o } from "../../../Filter/Filter.js";
+import { resetEvent as G } from "../../../Filter/events/index.js";
+import { t as H } from "../../../../Input-C1Js3pbF.js";
+import { t as J } from "../../../../utils-DnIJruo0.js";
+import { useTableContext as K } from "../../contexts/table.hook.js";
+import { t as Q } from "../../../../events.types-BG1Uh8i6.js";
+import { getTableId as U } from "../../utils/get-table-id.js";
+import { useEffect as W, useMemo as X, useRef as Y } from "react";
+import { jsx as n, jsxs as d } from "react/jsx-runtime";
+var Z = /* @__PURE__ */ z(V(), 1), de = ({ id: F, actions: b, filters: v, multiSelectFilter: w, placeholder: S, showFilterInput: x = !0, showResetButton: R = !0, resetButtonClassName: D, closeOnApply: T = !0 }) => {
+  const l = Y(null), c = U(F), { termOfSearch: k, multiselectSelected: M, dateFilters: E, dateRangeFilters: _, timeFilters: j, onChangeTermOfSearch: m, onSelectMultiselect: A, onSelectDateFilter: I, onSelectDateRangeFilter: i, onSelectTimeFilter: O } = K(), B = [...v ?? w?.map((e) => ({
+    ...e,
+    type: "badgeMultiSelect"
+  })) ?? [], ...b ?? []], h = (e, t) => {
+    A(e, t.map((r) => r.id));
+  }, P = () => {
+    m(""), l.current && (l.current.value = "");
+  };
+  W(() => {
+    const e = new AbortController();
+    return document.addEventListener(Q.RESET_FILTERS, (t) => {
+      const { detail: r } = t;
+      r.tableId === c && (m(""), l.current && (l.current.value = ""), G(c));
+    }, { signal: e.signal }), () => e.abort();
+  }, [c, m]);
+  const g = X(() => (0, Z.default)((e) => {
+    m(e.target.value);
+  }, 500), [m]), N = !!k || Object.values(M ?? {}).flat().length > 0 || Object.values(E ?? {}).some(Boolean) || Object.values(_ ?? {}).some(Boolean) || Object.values(j ?? {}).some(Boolean), f = (e) => {
     if (e.type === "action") {
-      const { label: r, appearance: N = "compact", variant: L = "secondary", leftIcon: q, rightIcon: z, type: f, ...V } = e;
-      return /* @__PURE__ */ p(J, {
-        appearance: N,
-        variant: L,
-        ...V,
+      const { label: a, appearance: y = "compact", variant: p = "secondary", leftIcon: u, rightIcon: L, type: C, ...q } = e;
+      return /* @__PURE__ */ d($, {
+        appearance: y,
+        variant: p,
+        ...q,
         children: [
-          q,
-          r,
-          z
+          u,
+          a,
+          L
         ]
-      }, r);
+      }, a);
     }
-    const { key: t, label: a, position: o = "right" } = e;
-    return e.type === "textMultiSelect" ? /* @__PURE__ */ s(n.TextMultiSelect, {
-      label: a,
-      position: o,
+    const { key: t, label: r, position: s = "right" } = e;
+    if (e.type === "textMultiSelect") return /* @__PURE__ */ n(o.TextMultiSelect, {
+      label: r,
+      position: s,
       options: e.options,
-      onApply: (r) => {
-        T(t, r);
+      onApply: (a) => {
+        h(t, a);
       }
-    }, t) : e.type === "date" ? /* @__PURE__ */ s(n.DateFilterDropdown, {
-      label: a,
-      position: o,
+    }, t);
+    if (e.type === "date") return /* @__PURE__ */ n(o.DateFilterDropdown, {
+      label: r,
+      position: s,
       countryCode: e.countryCode,
-      onApply: (r) => {
-        E(t, r);
+      onApply: (a) => {
+        I(t, a);
       }
-    }, t) : e.type === "dateRange" ? /* @__PURE__ */ s(n.DateRangeFilterDropdown, {
-      label: a,
-      position: o,
+    }, t);
+    if (e.type === "dateRange") return /* @__PURE__ */ n(o.DateRangeFilterDropdown, {
+      label: r,
+      position: s,
       showTime: e.showTime,
       timeFormat: e.timeFormat,
       showPresets: e.showPresets,
@@ -77,48 +69,61 @@ var Z = /* @__PURE__ */ $(Q(), 1), ue = ({ id: m, actions: i, filters: d, multiS
       minDate: e.minDate,
       maxDate: e.maxDate,
       countryCode: e.countryCode,
-      onApply: (r) => {
-        O(t, r);
+      onApply: (a) => {
+        i(t, a);
       },
       onRangeChange: e.onRangeChange
-    }, t) : e.type === "time" ? /* @__PURE__ */ s(n.TimeFilterDropdown, {
-      label: a,
-      position: o,
+    }, t);
+    if (e.type === "customDateRange") {
+      const { key: a, type: y, ...p } = e;
+      return /* @__PURE__ */ n(o.CustomDateRangeFilterDropdown, {
+        ...p,
+        position: s,
+        onApply: (u) => {
+          i(t, u);
+        }
+      }, t);
+    }
+    return e.type === "time" ? /* @__PURE__ */ n(o.TimeFilterDropdown, {
+      label: r,
+      position: s,
       format: e.format,
       presets: e.presets,
       showTimePicker: e.showTimePicker,
-      onApply: (r) => {
-        B(t, r);
+      onApply: (a) => {
+        O(t, a);
       }
-    }, t) : /* @__PURE__ */ s(n.BadgeMultiSelect, {
-      label: a,
-      position: o,
+    }, t) : /* @__PURE__ */ n(o.BadgeMultiSelect, {
+      label: r,
+      position: s,
       options: e.options,
-      onApply: (r) => {
-        T(t, r);
+      onApply: (a) => {
+        h(t, a);
       }
     }, t);
   };
-  return /* @__PURE__ */ p("div", {
-    className: "w-full flex items-center justify-end pb-6",
-    children: [x && /* @__PURE__ */ s(G, {
-      ref: c,
-      placeholder: D,
+  return /* @__PURE__ */ d("div", {
+    className: "kvt-filter w-full flex items-center justify-end gap-y-4 pb-6 max-md:flex-wrap",
+    children: [x && /* @__PURE__ */ n(H, {
+      ref: l,
+      placeholder: S,
       isSearch: !0,
       autoComplete: "false",
-      className: "w-72",
+      className: "kvt-search w-72 max-md:w-full",
       inputMode: "search",
-      onChange: k
-    }), /* @__PURE__ */ p(n, {
-      closeOnApply: j,
-      children: [I.map(g), A && /* @__PURE__ */ s(n.ResetButton, {
-        className: H("select-none", M),
-        disabled: !P,
-        onClick: _
+      onChange: g
+    }), /* @__PURE__ */ d(o, {
+      className: "kvt-filter-actions max-md:w-full max-md:flex-wrap",
+      closeOnApply: T,
+      resetScope: c,
+      children: [B.map(f), R && /* @__PURE__ */ n(o.ResetButton, {
+        className: J("select-none max-md:ml-auto", D),
+        disabled: !N,
+        onClick: P
       })]
     })]
   });
 };
 export {
-  ue as Filter
+  de as Filter
 };

package/dist/components/VirtualizedTable/components/FormPaginate/FormPaginate.js

@@ -1,23 +1,23 @@
-import { t as s } from "../../../../Input-BZG7N8m1.js";
-import { Button as i } from "../../../Button/Button.js";
-import { Typography as p } from "../../../Typography/Typography.js";
+import { t as s } from "../../../../Input-C1Js3pbF.js";
+import { Typography as i } from "../../../Typography/Typography.js";
+import { Button as p } from "../../../Button/Button.js";
 import { useTableContext as u } from "../../contexts/table.hook.js";
-import { useCallback as l, useRef as c } from "react";
-import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import { useRef as l } from "react";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
 var N = () => {
-  const r = c(null), { totalPages: t, handlePage: o } = u();
-  return /* @__PURE__ */ f("form", {
+  const r = l(null), { totalPages: t, handlePage: m } = u();
+  return /* @__PURE__ */ c("form", {
     "aria-label": "footer-pagination",
     ref: r,
-    onSubmit: l((a) => {
-      a.preventDefault();
-      const n = new FormData(a.currentTarget), m = Number(n.get("jump-to"));
-      o(((m < t ? m : t) || 1) - 1), r.current?.reset();
-    }, [o, t]),
+    onSubmit: (o) => {
+      o.preventDefault();
+      const n = new FormData(o.currentTarget), a = Number(n.get("jump-to"));
+      m(((a < t ? a : t) || 1) - 1), r.current?.reset();
+    },
     className: "flex items-center gap-2",
     noValidate: !0,
     children: [
-      /* @__PURE__ */ e(p, {
+      /* @__PURE__ */ e(i, {
         component: "span",
         className: "text-sm min-w-fit tracking-normal",
         children: "Jump to"
@@ -31,7 +31,7 @@ var N = () => {
         required: !0,
         autoComplete: "off"
       }),
-      /* @__PURE__ */ e(i, {
+      /* @__PURE__ */ e(p, {
         variant: "link",
         type: "submit",
         className: "text-xs p-2 cursor-pointer",

package/dist/components/VirtualizedTable/components/Header/Header.js

@@ -1,40 +1,60 @@
-import { t as r } from "../../../../utils-COaoD3PI.js";
-import { n as b } from "../../../../table.provider-BPlFpIAe.js";
-import { useTableContext as g } from "../../contexts/table.hook.js";
-import u from "../../assets/chevron-up.js";
-import k from "../../assets/chevron-down.js";
-import { useCallback as d } from "react";
-import { jsx as a, jsxs as l } from "react/jsx-runtime";
-var y = ({ className: n, classNameArrows: i, classNameActiveArrows: o }) => {
-  const { table: c, onSorting: s } = g(), m = d((t) => s([{
-    id: t.id,
-    desc: !1
-  }]), [s]), p = d((t) => s([{
-    id: t.id,
-    desc: !0
-  }]), [s]);
-  return /* @__PURE__ */ a("thead", {
-    className: r("font-semibold", "uppercase", "text-slate-500", "text-xs", "not-italic", "bg-slate-100", "overflow-hidden", "dark:text-slate-300", "dark:bg-metal-800", n),
-    children: c.getHeaderGroups().map(({ id: t, headers: f }) => /* @__PURE__ */ a("tr", { children: f.map(({ id: x, column: e, getContext: h }) => /* @__PURE__ */ a("th", {
-      scope: "col",
-      className: r("px-4", "py-3", "text-left", "text-xs", "first:rounded-tl-lg", "last:rounded-tr-lg", "border-transparent", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", e.columnDef.meta?.headerClassName),
-      children: /* @__PURE__ */ l("span", {
-        className: "flex items-center gap-2 w-full",
-        children: [b(e.columnDef.header, h()), e.getCanSort() && /* @__PURE__ */ l("div", {
-          className: r("flex flex-col text-slate-400 justify-center items-center gap-1", i),
-          role: "presentation",
-          children: [/* @__PURE__ */ a(u, {
-            className: r("w-2 h-2 cursor-pointer", { "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "asc" }, o),
-            onClick: () => m(e)
-          }), /* @__PURE__ */ a(k, {
-            className: r("w-2 h-2 cursor-pointer", { "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "desc" }, o),
-            onClick: () => p(e)
-          })]
-        })]
+import { n as N } from "../../../../table.provider-Dhs7WtwK.js";
+import { t } from "../../../../utils-DnIJruo0.js";
+import w from "../../assets/chevron-down.js";
+import y from "../../assets/chevron-up.js";
+import { HIDE_BELOW_CLASS as P } from "../../constants/responsive.js";
+import { useTableContext as D } from "../../contexts/table.hook.js";
+import { getPinnedCellProps as H } from "../../utils/pinned-columns/pinned-columns.js";
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+var G = ({ className: p, classNameArrows: f, classNameActiveArrows: l, classNameHeaderContent: h }) => {
+  const { table: o, headerContent: d, onSorting: n, pinnedWidths: x, getPinnedHeaderRef: b } = D(), g = (a) => {
+    n([{
+      id: a.id,
+      desc: !1
+    }]);
+  }, k = (a) => {
+    n([{
+      id: a.id,
+      desc: !0
+    }]);
+  };
+  return /* @__PURE__ */ s("thead", {
+    className: t("kvt-header", "font-semibold", "uppercase", "text-slate-500", "text-xs", "not-italic", "bg-slate-100", "overflow-hidden", "dark:text-slate-300", "dark:bg-metal-800", p),
+    children: [d && /* @__PURE__ */ r("tr", {
+      "data-header-content": !0,
+      children: /* @__PURE__ */ r("th", {
+        colSpan: o.getVisibleLeafColumns().length,
+        className: t("kvt-header-content", "px-6", "py-4", "text-left", "text-sm", "font-normal", "normal-case", "text-slate-800", "bg-white", "rounded-tl-lg", "rounded-tr-lg", "border-b", "border-b-gray-200", "dark:border-b-0", "dark:text-metal-50", "dark:bg-metal-900", "dark:border-t", "dark:border-x", "dark:border-metal-700", h),
+        children: d
       })
-    }, x)) }, t))
+    }), o.getHeaderGroups().map(({ id: a, headers: u }) => /* @__PURE__ */ r("tr", {
+      className: "kvt-header-row",
+      children: u.map(({ id: C, column: e, getContext: S }) => {
+        const { hideBelow: i, headerClassName: v } = e.columnDef.meta ?? {}, c = !!e.getIsPinned(), m = H(o, e, x);
+        return /* @__PURE__ */ r("th", {
+          scope: "col",
+          ref: c ? b(e.id) : void 0,
+          className: t("kvt-header-cell", "px-4", "py-3", "text-left", "text-xs", !d && "first:rounded-tl-lg", !d && "last:rounded-tr-lg", "border-transparent", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", c && "bg-slate-100 dark:bg-metal-800", m.className, i && P[i], v),
+          style: m.style,
+          children: /* @__PURE__ */ s("span", {
+            className: "flex items-center gap-2 w-full",
+            children: [N(e.columnDef.header, S()), e.getCanSort() && /* @__PURE__ */ s("div", {
+              className: t("flex flex-col text-slate-400 justify-center items-center gap-1", f),
+              role: "presentation",
+              children: [/* @__PURE__ */ r(y, {
+                className: t("w-2 h-2 cursor-pointer", { "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "asc" }, l),
+                onClick: () => g(e)
+              }), /* @__PURE__ */ r(w, {
+                className: t("w-2 h-2 cursor-pointer", { "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "desc" }, l),
+                onClick: () => k(e)
+              })]
+            })]
+          })
+        }, C);
+      })
+    }, a))]
   });
 };
 export {
-  y as Header
+  G as Header
 };

package/dist/components/VirtualizedTable/components/Pagination/Pagination.js

@@ -1,14 +1,14 @@
-import { t as f } from "../../../../utils-COaoD3PI.js";
-import "../../constants/pagination.js";
-import { useTableContext as p } from "../../contexts/table.hook.js";
-import { DotPaginate as x } from "../DotPaginate/DotPaginate.js";
+import { useTableContext as x } from "../../contexts/table.hook.js";
+import { isPaginationBarVisible as g } from "../../utils/pagination.js";
+import { DotPaginate as b } from "../DotPaginate/DotPaginate.js";
 import { DropdownPaginate as u } from "../DropdownPaginate/DropdownPaginate.js";
-import { FormPaginate as b } from "../FormPaginate/FormPaginate.js";
-import { Fragment as g, jsx as e, jsxs as t } from "react/jsx-runtime";
-var j = ({ showTotalItems: a = !0, showDropdownPagination: i = !0, showDotPagination: l = !0, showFormPagination: n = !0, pageSizes: s, classNamePagination: m, isLoading: o }) => {
-  const { totalItems: r = -1 / 0, tableFetching: d, isFirstLoad: c } = p();
-  return r <= 10 || d || o ? null : /* @__PURE__ */ t(g, { children: [/* @__PURE__ */ e("div", {
-    className: f("bg-slate-50", "border", "border-y-transparent", "border-x-slate-100", "text-slate-500", "text-sm", "not-italic", "py-2", "px-6", "rounded-b-lg", "shadow", "dark:bg-metal-800", "dark:border-x-metal-700", "dark:border-b-metal-700", m, { "animate-in fade-in-10": !c }),
+import { FormPaginate as h } from "../FormPaginate/FormPaginate.js";
+import { t as v } from "../../../../utils-DnIJruo0.js";
+import { Fragment as N, jsx as e, jsxs as t } from "react/jsx-runtime";
+var I = ({ showTotalItems: a = !0, showDropdownPagination: i = !0, showDotPagination: n = !0, showFormPagination: s = !0, pageSizes: l, classNamePagination: o, isLoading: m, isListPortal: d, dropdownPaginationDirection: c }) => {
+  const { totalItems: r = -1 / 0, tableLoading: p, isFirstLoad: f } = x();
+  return !g(r) || p || m ? null : /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e("div", {
+    className: v("kvt-pagination", "bg-slate-50", "border", "border-y-transparent", "border-x-slate-100", "text-slate-500", "text-sm", "not-italic", "py-2", "px-6", "rounded-b-lg", "shadow", "dark:bg-metal-800", "dark:border-x-metal-700", "dark:border-b-metal-700", o, { "animate-in fade-in-10": !f }),
     children: /* @__PURE__ */ t("div", {
       className: "flex items-center justify-between",
       children: [/* @__PURE__ */ t("div", {
@@ -18,15 +18,19 @@ var j = ({ showTotalItems: a = !0, showDropdownPagination: i = !0, showDotPagina
           children: [r, " Results"]
         }) : null, i && /* @__PURE__ */ e("div", {
           className: "flex items-center gap-2",
-          children: /* @__PURE__ */ e(u, { pageSizes: s })
+          children: /* @__PURE__ */ e(u, {
+            pageSizes: l,
+            isListPortal: d,
+            direction: c
+          })
         })]
       }), /* @__PURE__ */ t("div", {
         className: "flex items-center gap-8",
-        children: [l && /* @__PURE__ */ e(x, {}), n && /* @__PURE__ */ e(b, {})]
+        children: [n && /* @__PURE__ */ e(b, {}), s && /* @__PURE__ */ e(h, {})]
       })]
     })
-  }), /* @__PURE__ */ e("div", { className: "w-full min-h-37.5" })] });
+  }) });
 };
 export {
-  j as Pagination
+  I as Pagination
 };

package/dist/components/VirtualizedTable/components/ScrollContainer/ScrollContainer.js

@@ -0,0 +1,75 @@
+import { t as c } from "../../../../utils-DnIJruo0.js";
+import { useTableContext as N } from "../../contexts/table.hook.js";
+import { useLayoutEffect as M, useRef as u, useState as S } from "react";
+import { Fragment as C, jsx as n, jsxs as k } from "react/jsx-runtime";
+var y = (r, e) => {
+  e && e.scrollLeft !== r.scrollLeft && (e.scrollLeft = r.scrollLeft);
+}, O = ({ scrollWidth: r, clientWidth: e, scrollLeft: a }) => ({
+  scrollWidth: r,
+  clientWidth: e,
+  scrollLeft: a
+}), j = (r, e) => r.scrollWidth === e.scrollWidth && r.clientWidth === e.clientWidth && r.scrollLeft === e.scrollLeft, T = ({ className: r, hasPinnedColumns: e = !1, children: a }) => {
+  const { table: m, pinnedWidths: g } = N(), i = u(null), b = u(null), v = u(null), [o, W] = S({
+    scrollWidth: 0,
+    clientWidth: 0,
+    scrollLeft: 0
+  }), d = () => {
+    const t = i.current;
+    t && W((s) => {
+      const l = O(t);
+      return j(s, l) ? s : l;
+    });
+  };
+  M(() => {
+    const t = i.current, s = b.current;
+    if (!t || !s || (d(), typeof ResizeObserver > "u")) return;
+    const l = new ResizeObserver(d);
+    return l.observe(t), l.observe(s), () => l.disconnect();
+  }, []);
+  const p = o.scrollWidth > o.clientWidth, w = (t) => t.reduce((s, l) => s + (g[l] ?? 0), 0), f = w(m.getLeftLeafColumns().map(({ id: t }) => t)), h = w(m.getRightLeafColumns().map(({ id: t }) => t)), L = e && p, x = o.scrollLeft > 0, R = o.scrollLeft < o.scrollWidth - o.clientWidth - 1;
+  return /* @__PURE__ */ k("div", {
+    className: "kvt-scroll-area relative w-full",
+    children: [/* @__PURE__ */ n("div", {
+      ref: i,
+      "data-kvt-overflow": p ? "" : void 0,
+      className: c("kvt-scroll", "w-full", e && "[&::-webkit-scrollbar]:hidden rounded-lg", r),
+      style: e ? { scrollbarWidth: "none" } : void 0,
+      onScroll: ({ currentTarget: t }) => {
+        y(t, v.current), d();
+      },
+      children: /* @__PURE__ */ n("div", {
+        ref: b,
+        className: "kvt-scroll-content w-full min-w-fit",
+        children: a
+      })
+    }), L && /* @__PURE__ */ k(C, { children: [
+      /* @__PURE__ */ n("div", {
+        "aria-hidden": "true",
+        className: c("kvt-scroll-fade pointer-events-none absolute inset-y-0 w-8", "bg-gradient-to-r from-white to-transparent dark:from-metal-900", "transition-opacity duration-200", x ? "opacity-100" : "opacity-0"),
+        style: { left: f }
+      }),
+      /* @__PURE__ */ n("div", {
+        "aria-hidden": "true",
+        className: c("kvt-scroll-fade pointer-events-none absolute inset-y-0 w-8", "bg-gradient-to-l from-white to-transparent dark:from-metal-900", "transition-opacity duration-200", R ? "opacity-100" : "opacity-0"),
+        style: { right: h }
+      }),
+      /* @__PURE__ */ n("div", {
+        ref: v,
+        "aria-hidden": "true",
+        className: c("kvt-scrollbar absolute bottom-0 overflow-x-auto overflow-y-hidden", "[scrollbar-width:thin] [scrollbar-color:var(--color-slate-300)_transparent]", "dark:[scrollbar-color:var(--color-metal-600)_transparent]", "[&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-slate-300", "dark:[&::-webkit-scrollbar-thumb]:bg-metal-600"),
+        style: {
+          left: f,
+          right: h
+        },
+        onScroll: ({ currentTarget: t }) => y(t, i.current),
+        children: /* @__PURE__ */ n("div", {
+          className: "h-px",
+          style: { width: o.scrollWidth - f - h }
+        })
+      })
+    ] })]
+  });
+};
+export {
+  T as ScrollContainer
+};

package/dist/components/VirtualizedTable/components/Skeleton/Skeleton.js

@@ -1,43 +1,50 @@
-import { t as l } from "../../../../utils-COaoD3PI.js";
-import { Button as m } from "../../../Button/Button.js";
-import { t as c } from "../../../../ellipsis-vertical-Cm9A6Zu8.js";
-import { useTableContext as h } from "../../contexts/table.hook.js";
-import { jsx as r } from "react/jsx-runtime";
-var N = ({ numberOfRows: i, table: o }) => {
-  const { tableFetching: n, tableLoading: b } = h(), t = Array.from({ length: i });
-  return /* @__PURE__ */ r("tbody", {
-    className: "text-slate-800 text-sm font-normal relative",
-    children: t.map((g, e) => {
-      const d = o.getAllColumns();
-      return /* @__PURE__ */ r("tr", {
+import { t as p } from "../../../../ellipsis-vertical-C_yX7aQe.js";
+import { Button as g } from "../../../Button/Button.js";
+import { HIDE_BELOW_CLASS as m } from "../../constants/responsive.js";
+import { useTableContext as f } from "../../contexts/table.hook.js";
+import { getPinnedCellProps as k } from "../../utils/pinned-columns/pinned-columns.js";
+import { t as l } from "../../../../utils-DnIJruo0.js";
+import { jsx as e } from "react/jsx-runtime";
+var w = ({ numberOfRows: b, table: n }) => {
+  const { tableLoading: c, pinnedWidths: h } = f(), r = Array.from({ length: b });
+  return /* @__PURE__ */ e("tbody", {
+    className: "kvt-skeleton text-slate-800 text-sm font-normal relative",
+    children: r.map((y, a) => {
+      const o = n.getVisibleLeafColumns();
+      return /* @__PURE__ */ e("tr", {
         className: l("border-b", "border-b-gray-200", "bg-transparent", "last:border-b-transparent"),
-        children: d.map((a, s) => a.id !== "actions" ? /* @__PURE__ */ r("td", {
-          className: l("px-4", "py-1", "bg-white", "dark:bg-metal-900", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", "dark:[tr:last-child_&]:border-b", a.columnDef.meta?.className, {
-            "[tr:last-child_&:first-of-type]:rounded-bl-lg": e === t.length - 1 && s === 0,
-            "[tr:last-child_&:last-of-type]:rounded-br-lg": e === t.length - 1 && s === d.length - 1
-          }),
-          children: /* @__PURE__ */ r("div", {
-            className: "animate-in fade-in-0",
-            children: /* @__PURE__ */ r("div", { className: l("bg-gray-200", "dark:bg-metal-700", "animate-pulse", "rounded", "h-5", "w-full") })
-          })
-        }, `skeleton-${a.id}`) : /* @__PURE__ */ r("td", {
-          className: l("px-4", "py-1", "bg-white", "dark:bg-metal-900", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", "dark:[tr:last-child_&]:border-b", a.columnDef.meta?.className, {
-            "[tr:last-child_&:first-of-type]:rounded-bl-lg": e === t.length - 1 && s === 0,
-            "[tr:last-child_&:last-of-type]:rounded-br-lg": e === t.length - 1 && s === d.length - 1
-          }),
-          children: /* @__PURE__ */ r(m, {
-            variant: "link",
-            shape: "circle",
-            size: "large",
-            disabled: !0,
-            "aria-hidden": "true",
-            children: /* @__PURE__ */ r(c, { className: l("w-5", "h-5", "text-slate-400", "dark:text-metal-700", { "text-gray-300 animate-pulse": n || b }) })
-          })
-        }, `skeleton-${a.id}`))
-      }, `skeleton-row-${e}`);
+        children: o.map((t, s) => {
+          const { hideBelow: d } = t.columnDef.meta ?? {}, i = k(n, t, h);
+          return t.id !== "actions" ? /* @__PURE__ */ e("td", {
+            style: i.style,
+            className: l("px-4", "py-1", "bg-white", "dark:bg-metal-900", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", "dark:[tr:last-child_&]:border-b", i.className, d && m[d], t.columnDef.meta?.className, {
+              "[tr:last-child_&:first-of-type]:rounded-bl-lg": a === r.length - 1 && s === 0,
+              "[tr:last-child_&:last-of-type]:rounded-br-lg": a === r.length - 1 && s === o.length - 1
+            }),
+            children: /* @__PURE__ */ e("div", {
+              className: "animate-in fade-in-0",
+              children: /* @__PURE__ */ e("div", { className: l("bg-gray-200", "dark:bg-metal-700", "animate-pulse", "rounded", "h-5", "w-full") })
+            })
+          }, `skeleton-${t.id}`) : /* @__PURE__ */ e("td", {
+            style: i.style,
+            className: l("px-4", "py-1", "bg-white", "dark:bg-metal-900", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", "dark:[tr:last-child_&]:border-b", i.className, d && m[d], t.columnDef.meta?.className, {
+              "[tr:last-child_&:first-of-type]:rounded-bl-lg": a === r.length - 1 && s === 0,
+              "[tr:last-child_&:last-of-type]:rounded-br-lg": a === r.length - 1 && s === o.length - 1
+            }),
+            children: /* @__PURE__ */ e(g, {
+              variant: "link",
+              shape: "circle",
+              size: "large",
+              disabled: !0,
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ e(p, { className: l("w-5", "h-5", "text-slate-400", "dark:text-metal-700", { "text-gray-300 animate-pulse": c }) })
+            })
+          }, `skeleton-${t.id}`);
+        })
+      }, `skeleton-row-${a}`);
     })
   });
 };
 export {
-  N as Skeleton
+  w as Skeleton
 };