@konstructio/ui 0.1.2-alpha.99 → 0.1.4

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

@@ -1,75 +1,70 @@
-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 { o as U } from "../../../../rolldown-runtime-B28h4lGi.js";
+import { t as X } from "../../../../debounce-DhCY9mXz.js";
+import { Button as x } from "../../../Button/Button.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 { resetEvent as Y } from "../../../Filter/events/index.js";
+import { t as Z } from "../../../../Input-CE6J6HIW.js";
+import { t as d } from "../../../../utils-DnIJruo0.js";
+import { HIDE_BELOW_CLASS as C, SHOW_BELOW_CLASS as ee } from "../../constants/responsive.js";
+import { useTableContext as te } from "../../contexts/table.hook.js";
+import { useIsFlexWrapped as ae } from "../../hooks/useIsFlexWrapped/useIsFlexWrapped.js";
+import { t as re } from "../../../../events.types-BG1Uh8i6.js";
+import { getTableId as oe } from "../../utils/get-table-id.js";
+import { useEffect as se, useMemo as ne, useRef as D } from "react";
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+var le = /* @__PURE__ */ U(X(), 1), De = ({ id: T, actions: _, filters: O, multiSelectFilter: k, placeholder: A, showFilterInput: b = !0, showResetButton: E = !0, resetButtonClassName: B, closeOnApply: I = !0 }) => {
+  const l = D(null), v = D(null), M = ae(v), m = oe(T), { termOfSearch: j, multiselectSelected: N, dateFilters: f, dateRangeFilters: g, timeFilters: L, onChangeTermOfSearch: c, onSelectMultiselect: P, onSelectDateFilter: W, onSelectDateRangeFilter: S, onSelectTimeFilter: z } = te(), w = [...O ?? k?.map((e) => ({
+    ...e,
+    type: "badgeMultiSelect"
+  })) ?? [], ..._ ?? []], H = w.filter((e) => e.type === "action" && !!e.iconOnlyBelow), F = (e, t) => {
+    P(e, t.map((r) => r.id));
+  }, q = () => {
+    c(""), l.current && (l.current.value = "");
+  };
+  se(() => {
+    const e = new AbortController();
+    return document.addEventListener(re.RESET_FILTERS, (t) => {
+      const { detail: r } = t;
+      r.tableId === m && (c(""), l.current && (l.current.value = ""), Y(m));
+    }, { signal: e.signal }), () => e.abort();
+  }, [m, c]);
+  const V = ne(() => (0, le.default)((e) => {
+    c(e.target.value);
+  }, 500), [c]), $ = !!j || Object.values(N ?? {}).flat().length > 0 || Object.values(f ?? {}).some(Boolean) || Object.values(g ?? {}).some(Boolean) || Object.values(L ?? {}).some(Boolean), G = (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: p = "compact", variant: i = "secondary", leftIcon: u, rightIcon: h, iconOnlyBelow: R, className: K, type: ce, ...Q } = e;
+      return /* @__PURE__ */ y(x, {
+        appearance: p,
+        variant: i,
+        className: d(R && C[R], K),
+        ...Q,
         children: [
-          q,
-          r,
-          z
+          u,
+          a,
+          h
         ]
-      }, 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 = M ? "left" : "right" } = e;
+    if (e.type === "textMultiSelect") return /* @__PURE__ */ o(n.TextMultiSelect, {
+      label: r,
+      position: s,
       options: e.options,
-      onApply: (r) => {
-        T(t, r);
+      onApply: (a) => {
+        F(t, a);
       }
-    }, t) : e.type === "date" ? /* @__PURE__ */ s(n.DateFilterDropdown, {
-      label: a,
-      position: o,
+    }, t);
+    if (e.type === "date") return /* @__PURE__ */ o(n.DateFilterDropdown, {
+      label: r,
+      position: s,
       countryCode: e.countryCode,
-      onApply: (r) => {
-        E(t, r);
+      onApply: (a) => {
+        W(t, a);
       }
-    }, t) : e.type === "dateRange" ? /* @__PURE__ */ s(n.DateRangeFilterDropdown, {
-      label: a,
-      position: o,
+    }, t);
+    if (e.type === "dateRange") return /* @__PURE__ */ o(n.DateRangeFilterDropdown, {
+      label: r,
+      position: s,
       showTime: e.showTime,
       timeFormat: e.timeFormat,
       showPresets: e.showPresets,
@@ -77,48 +72,75 @@ 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) => {
+        S(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: p, ...i } = e;
+      return /* @__PURE__ */ o(n.CustomDateRangeFilterDropdown, {
+        ...i,
+        position: s,
+        onApply: (u) => {
+          S(t, u);
+        }
+      }, t);
+    }
+    return e.type === "time" ? /* @__PURE__ */ o(n.TimeFilterDropdown, {
+      label: r,
+      position: s,
       format: e.format,
       presets: e.presets,
       showTimePicker: e.showTimePicker,
-      onApply: (r) => {
-        B(t, r);
+      onApply: (a) => {
+        z(t, a);
       }
-    }, t) : /* @__PURE__ */ s(n.BadgeMultiSelect, {
-      label: a,
-      position: o,
+    }, t) : /* @__PURE__ */ o(n.BadgeMultiSelect, {
+      label: r,
+      position: s,
       options: e.options,
-      onApply: (r) => {
-        T(t, r);
+      onApply: (a) => {
+        F(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,
-      isSearch: !0,
-      autoComplete: "false",
-      className: "w-72",
-      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: _
-      })]
-    })]
+  }, J = ({ label: e, variant: t = "secondary", leftIcon: r, rightIcon: s, iconOnlyBelow: a, className: p, appearance: i, type: u, ...h }) => /* @__PURE__ */ o(x, {
+    variant: t,
+    "aria-label": e,
+    className: d("relative size-10 shrink-0 p-0 pointer-coarse:min-h-10 touch-hit-area [&>svg]:size-5", a && ee[a], p),
+    ...h,
+    children: r ?? s
+  }, e);
+  return /* @__PURE__ */ y("div", {
+    ref: v,
+    className: d("kvt-filter w-full flex flex-wrap items-center gap-4 pb-6", b ? "justify-between" : "justify-end"),
+    children: [
+      b && /* @__PURE__ */ o("div", {
+        className: "kvt-search-wrapper w-60 min-w-0 max-sm:grow max-sm:basis-0",
+        children: /* @__PURE__ */ o(Z, {
+          ref: l,
+          placeholder: A,
+          isSearch: !0,
+          autoComplete: "false",
+          className: "kvt-search w-full",
+          inputMode: "search",
+          onChange: V
+        })
+      }),
+      H.map(J),
+      /* @__PURE__ */ y(n, {
+        className: "kvt-filter-actions flex-wrap gap-4 max-sm:basis-full",
+        closeOnApply: I,
+        resetScope: m,
+        children: [w.map(G), E && /* @__PURE__ */ o(n.ResetButton, {
+          className: d("select-none max-md:ml-auto", B),
+          disabled: !$,
+          onClick: q
+        })]
+      })
+    ]
   });
 };
 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-CE6J6HIW.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,62 @@
-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 y } from "../../../../table.provider-Dhs7WtwK.js";
+import { t } from "../../../../utils-DnIJruo0.js";
+import B from "../../assets/chevron-down.js";
+import P from "../../assets/chevron-up.js";
+import { BORDER_EDGE_CLASSES as L, HIDE_BELOW_CLASS as O, ROUNDED_TOP_EDGE_CLASSES as H } from "../../constants/responsive.js";
+import { useTableContext as I } from "../../contexts/table.hook.js";
+import { getPinnedCellProps as T } from "../../utils/pinned-columns/pinned-columns.js";
+import { getResponsiveEdgeClasses as k } from "../../utils/responsive-edges/responsive-edges.js";
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+var j = {
+  asc: "ascending",
+  desc: "descending",
+  none: "none"
+}, J = ({ className: S, classNameArrows: v, classNameActiveArrows: m, classNameHeaderContent: C }) => {
+  const { table: n, headerContent: o, onSorting: E, pinnedWidths: N, getPinnedHeaderRef: D } = I(), w = (s) => {
+    E([{
+      id: s.id,
+      desc: s.getIsSorted() === "asc"
+    }]);
+  };
+  return /* @__PURE__ */ c("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", S),
+    children: [o && /* @__PURE__ */ r("tr", {
+      "data-header-content": !0,
+      children: /* @__PURE__ */ r("th", {
+        colSpan: n.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", C),
+        children: o
       })
-    }, x)) }, t))
+    }), n.getHeaderGroups().map(({ id: s, headers: p }) => {
+      const d = p.map(({ column: l }) => l.columnDef.meta?.hideBelow), a = d.some(Boolean);
+      return /* @__PURE__ */ r("tr", {
+        className: "kvt-header-row",
+        children: p.map(({ id: l, column: e, getContext: R }, g) => {
+          const { hideBelow: f, headerClassName: _ } = e.columnDef.meta ?? {}, b = !!e.getIsPinned(), h = T(n, e, N), x = e.getCanSort(), i = e.getIsSorted(), u = y(e.columnDef.header, R());
+          return /* @__PURE__ */ r("th", {
+            scope: "col",
+            ref: b ? D(e.id) : void 0,
+            className: t("kvt-header-cell", "px-4", "py-3", "text-left", "text-xs", !o && !a && "first:rounded-tl-lg", !o && !a && "last:rounded-tr-lg", !o && a && k(d, g, H), "border-transparent", "dark:border-t", "dark:border-metal-700", !a && "dark:first:border-l", !a && "dark:last:border-r", a && k(d, g, L), b && "bg-slate-100 dark:bg-metal-800", h.className, f && O[f], _),
+            style: h.style,
+            "aria-sort": x ? j[i || "none"] : void 0,
+            children: x ? /* @__PURE__ */ c("button", {
+              type: "button",
+              className: t("relative flex w-full items-center gap-2 text-left", "cursor-pointer rounded-xs outline-none [text-transform:inherit]", "tap-target touch-hit-area", "focus-visible:ring-1 focus-visible:ring-aurora-500"),
+              onClick: () => w(e),
+              children: [u, /* @__PURE__ */ c("span", {
+                className: t("flex flex-col text-slate-400 justify-center items-center gap-1", v),
+                children: [/* @__PURE__ */ r(P, { className: t("w-2 h-2", { "text-blue-600 dark:text-aurora-500": i === "asc" }, m) }), /* @__PURE__ */ r(B, { className: t("w-2 h-2", { "text-blue-600 dark:text-aurora-500": i === "desc" }, m) })]
+              })]
+            }) : /* @__PURE__ */ r("span", {
+              className: "flex items-center gap-2 w-full",
+              children: u
+            })
+          }, l);
+        })
+      }, s);
+    })]
   });
 };
 export {
-  y as Header
+  J 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,51 @@
-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 { t as y } from "../../../../ellipsis-vertical-C_yX7aQe.js";
+import { Button as _ } from "../../../Button/Button.js";
+import { BORDER_EDGE_CLASSES as E, HIDE_BELOW_CLASS as h, ROUNDED_BOTTOM_EDGE_CLASSES as N } from "../../constants/responsive.js";
+import { useTableContext as u } from "../../contexts/table.hook.js";
+import { getPinnedCellProps as D } from "../../utils/pinned-columns/pinned-columns.js";
+import { getResponsiveEdgeClasses as c } from "../../utils/responsive-edges/responsive-edges.js";
+import { t as i } from "../../../../utils-DnIJruo0.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 });
+var T = ({ numberOfRows: g, table: b }) => {
+  const { tableLoading: f, pinnedWidths: k } = u(), a = Array.from({ length: g });
   return /* @__PURE__ */ r("tbody", {
-    className: "text-slate-800 text-sm font-normal relative",
-    children: t.map((g, e) => {
-      const d = o.getAllColumns();
+    className: "kvt-skeleton text-slate-800 text-sm font-normal relative",
+    children: a.map((S, s) => {
+      const d = b.getVisibleLeafColumns(), m = d.map((e) => e.columnDef.meta?.hideBelow), t = m.some(Boolean), p = (e) => [c(m, e, E), s === a.length - 1 && c(m, e, N)];
       return /* @__PURE__ */ r("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}`);
+        className: i("border-b", "border-b-gray-200", "bg-transparent", "last:border-b-transparent"),
+        children: d.map((e, l) => {
+          const { hideBelow: o } = e.columnDef.meta ?? {}, n = D(b, e, k);
+          return e.id !== "actions" ? /* @__PURE__ */ r("td", {
+            style: n.style,
+            className: i("px-4", "py-1", "bg-white", "dark:bg-metal-900", "dark:border-t", "dark:border-metal-700", !t && "dark:first:border-l", !t && "dark:last:border-r", t && p(l), "dark:[tr:last-child_&]:border-b", n.className, o && h[o], e.columnDef.meta?.className, {
+              "[tr:last-child_&:first-of-type]:rounded-bl-lg": !t && s === a.length - 1 && l === 0,
+              "[tr:last-child_&:last-of-type]:rounded-br-lg": !t && s === a.length - 1 && l === d.length - 1
+            }),
+            children: /* @__PURE__ */ r("div", {
+              className: "animate-in fade-in-0",
+              children: /* @__PURE__ */ r("div", { className: i("bg-gray-200", "dark:bg-metal-700", "animate-pulse", "rounded", "h-5", "w-full") })
+            })
+          }, `skeleton-${e.id}`) : /* @__PURE__ */ r("td", {
+            style: n.style,
+            className: i("px-4", "py-1", "bg-white", "dark:bg-metal-900", "dark:border-t", "dark:border-metal-700", !t && "dark:first:border-l", !t && "dark:last:border-r", t && p(l), "dark:[tr:last-child_&]:border-b", n.className, o && h[o], e.columnDef.meta?.className, {
+              "[tr:last-child_&:first-of-type]:rounded-bl-lg": !t && s === a.length - 1 && l === 0,
+              "[tr:last-child_&:last-of-type]:rounded-br-lg": !t && s === a.length - 1 && l === d.length - 1
+            }),
+            children: /* @__PURE__ */ r(_, {
+              variant: "link",
+              shape: "circle",
+              size: "large",
+              disabled: !0,
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ r(y, { className: i("w-5", "h-5", "text-slate-400", "dark:text-metal-700", { "text-gray-300 animate-pulse": f }) })
+            })
+          }, `skeleton-${e.id}`);
+        })
+      }, `skeleton-row-${s}`);
     })
   });
 };
 export {
-  N as Skeleton
+  T as Skeleton
 };