@konstructio/ui 0.1.2-alpha.101 → 0.1.2-alpha.104

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -1,104 +1,107 @@
-import { t as n } from "../../utils-Cx-WzRZF.js";
-import { Actions as g } from "./components/Actions/Actions.js";
-import { t as h } from "../../table.provider-9uUt5a-s.js";
-import { sendCollapseRowEvent as L, sendExpandRowEvent as P, sendResetFiltersEvent as D, sendToggleRowEvent as ee } from "./events/index.js";
-import { Body as re } from "./components/Body/Body.js";
-import { Filter as te } from "./components/Filter/Filter.js";
-import { Header as ae } from "./components/Header/Header.js";
-import { Pagination as le } from "./components/Pagination/Pagination.js";
-import { TruncateText as me } from "./components/TruncateText/TruncateText.js";
-import { WrapperBody as oe } from "./components/WrapperBody/WrapperBody.js";
-import { useMemo as se } from "react";
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-var ie = ({ id: i, ariaLabel: p, columns: f, data: u, totalItems: b = -1 / 0, className: v, classNameHeaderActiveArrows: E, classNameHeaderArrows: T, classNameHeaderTable: x, classNameTable: N, classNameWrapperTable: A, isLoading: a, emptyState: y, getRowId: R, fetchData: z, queryOptions: B, showPagination: c, showTotalItems: l, showDropdownPagination: m, showDotPagination: o, showFormPagination: s, pageSizes: V, showFilter: j = !1, showFilterInput: k, filterSearchPlaceholder: C = "", filters: H, multiSelectFilter: K, filterActions: M, showResetButton: W = !0, resetButtonClassName: q, closeOnApply: F = !0, enableHoverRow: G, classNameHoverRow: I, enableExpandedRow: J, expandedState: O, defaultExpanded: Q, classNameExpandedRow: S, classNameExpandedCell: U, classNameExpandedContent: X, classNameExpandedHeader: Y, classNameActiveExpandedRow: Z, onExpandedChange: _, renderExpandedRow: $, keepExpandColumnVisible: w }) => {
-  const r = se(() => c || [
-    l,
+import { t as l } from "../../utils-Cx-WzRZF.js";
+import { Actions as ee } from "./components/Actions/Actions.js";
+import { t as re } from "../../table.provider-B0BafHuU.js";
+import { sendResetFiltersEvent as te } from "./events/filters/filters.js";
+import { sendRefreshEvent as ae } from "./events/refresh/refresh.js";
+import { sendCollapseRowEvent as le, sendExpandRowEvent as oe, sendToggleRowEvent as ie } from "./events/row/row.js";
+import { Body as se } from "./components/Body/Body.js";
+import { Filter as ne } from "./components/Filter/Filter.js";
+import { Header as me } from "./components/Header/Header.js";
+import { Pagination as ce } from "./components/Pagination/Pagination.js";
+import { TruncateText as de } from "./components/TruncateText/TruncateText.js";
+import { WrapperBody as fe } from "./components/WrapperBody/WrapperBody.js";
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+var pe = ({ id: i, ariaLabel: f, columns: p, data: v, totalItems: u = -1 / 0, className: b, classNameHeaderActiveArrows: w, classNameHeaderArrows: E, classNameHeaderTable: T, classNameTable: N, classNameWrapperTable: h, isLoading: a, emptyState: k, errorState: x, headerContent: A, classNameHeaderContent: R, classNameScrollContainer: s, getRowId: y, fetchData: z, queryOptions: B, showPagination: P, showTotalItems: n, showDropdownPagination: m, showDotPagination: c, showFormPagination: d, pageSizes: V, dropdownPaginationDirection: g, showFilter: j = !1, showFilterInput: F, filterSearchPlaceholder: H = "", filters: I, multiSelectFilter: K, filterActions: W, showResetButton: q = !0, resetButtonClassName: C, closeOnApply: G = !0, enableHoverRow: J, classNameHoverRow: M, enableExpandedRow: O, expandedState: Q, defaultExpanded: U, classNameExpandedRow: X, classNameExpandedCell: Y, classNameExpandedContent: Z, classNameExpandedHeader: _, classNameActiveExpandedRow: $, onExpandedChange: L, renderExpandedRow: S, keepExpandColumnVisible: D }) => {
+  const r = P || [
+    n,
     m,
-    o,
-    s
-  ].some(Boolean), [
     c,
-    l,
-    m,
-    o,
-    s
-  ]);
-  return /* @__PURE__ */ e(h, {
+    d
+  ].some(Boolean);
+  return /* @__PURE__ */ e(re, {
     id: i,
-    columns: f,
-    data: u,
-    getRowId: R,
+    columns: p,
+    data: v,
+    headerContent: A,
+    getRowId: y,
     fetchData: z,
-    totalItems: b,
+    totalItems: u,
     queryOptions: B,
     isPaginationEnabled: r,
-    enableExpandedRow: J,
-    expandedState: O,
-    onExpandedChange: _,
-    defaultExpanded: Q,
-    classNameExpandedRow: S,
-    classNameExpandedCell: U,
-    classNameExpandedContent: X,
-    classNameExpandedHeader: Y,
-    classNameActiveExpandedRow: Z,
-    enableHoverRow: G,
-    classNameHoverRow: I,
-    renderExpandedRow: $,
-    keepExpandColumnVisible: w,
-    children: /* @__PURE__ */ d("section", {
-      className: n("w-full min-w-fit", v),
-      children: [
-        j && /* @__PURE__ */ e(te, {
-          id: i,
-          actions: M,
-          filters: H,
-          multiSelectFilter: K,
-          placeholder: C,
-          showFilterInput: k,
-          showResetButton: W,
-          resetButtonClassName: q,
-          closeOnApply: F
-        }),
-        /* @__PURE__ */ e(oe, {
-          showPagination: r,
-          classNameWrapperTable: A,
-          isLoading: a,
-          children: /* @__PURE__ */ d("table", {
-            className: n("w-full border-collapse table-auto", "dark:border-separate dark:border-spacing-0", N),
-            "aria-label": p,
-            children: [/* @__PURE__ */ e(ae, {
-              className: x,
-              classNameArrows: T,
-              classNameActiveArrows: E
-            }), /* @__PURE__ */ e(re, {
-              isLoading: a,
-              showPagination: r,
-              emptyState: y
-            })]
-          })
-        }),
-        r && /* @__PURE__ */ e(le, {
-          showTotalItems: l,
-          showDropdownPagination: m,
-          showDotPagination: o,
-          showFormPagination: s,
-          pageSizes: V,
-          isLoading: a
+    enableExpandedRow: O,
+    expandedState: Q,
+    onExpandedChange: L,
+    defaultExpanded: U,
+    classNameExpandedRow: X,
+    classNameExpandedCell: Y,
+    classNameExpandedContent: Z,
+    classNameExpandedHeader: _,
+    classNameActiveExpandedRow: $,
+    enableHoverRow: J,
+    classNameHoverRow: M,
+    renderExpandedRow: S,
+    keepExpandColumnVisible: D,
+    children: /* @__PURE__ */ o("section", {
+      className: l("kvt", "w-full min-w-fit", b),
+      children: [j && /* @__PURE__ */ e(ne, {
+        id: i,
+        actions: W,
+        filters: I,
+        multiSelectFilter: K,
+        placeholder: H,
+        showFilterInput: F,
+        showResetButton: q,
+        resetButtonClassName: C,
+        closeOnApply: G
+      }), /* @__PURE__ */ e("div", {
+        className: l("kvt-scroll", "w-full", s),
+        children: /* @__PURE__ */ o("div", {
+          className: "kvt-scroll-content w-full min-w-fit",
+          children: [/* @__PURE__ */ e(fe, {
+            showPagination: r,
+            classNameWrapperTable: h,
+            isLoading: a,
+            children: /* @__PURE__ */ o("table", {
+              className: l("kvt-table", "w-full border-collapse table-auto", "dark:border-separate dark:border-spacing-0", N),
+              "aria-label": f,
+              children: [/* @__PURE__ */ e(me, {
+                className: T,
+                classNameArrows: E,
+                classNameActiveArrows: w,
+                classNameHeaderContent: R
+              }), /* @__PURE__ */ e(se, {
+                isLoading: a,
+                showPagination: r,
+                emptyState: k,
+                errorState: x
+              })]
+            })
+          }), r && /* @__PURE__ */ e(ce, {
+            showTotalItems: n,
+            showDropdownPagination: m,
+            showDotPagination: c,
+            showFormPagination: d,
+            pageSizes: V,
+            isLoading: a,
+            isListPortal: !!s,
+            dropdownPaginationDirection: g
+          })]
         })
-      ]
+      })]
     })
   });
-}, t = ie;
+}, t = pe;
 t.displayName = "KonstructVirtualizedTable";
-t.TruncateText = me;
-t.Actions = g;
+t.TruncateText = de;
+t.Actions = ee;
 t.Events = {
-  sendExpandRowEvent: P,
-  sendCollapseRowEvent: L,
-  sendToggleRowEvent: ee,
-  sendResetFiltersEvent: D
+  sendExpandRowEvent: oe,
+  sendCollapseRowEvent: le,
+  sendToggleRowEvent: ie,
+  sendResetFiltersEvent: te,
+  sendRefreshEvent: ae
 };
 export {
-  me as TruncateText,
+  de as TruncateText,
   t as VirtualizedTable
 };

package/dist/components/VirtualizedTable/components/Actions/Actions.js

@@ -1,14 +1,14 @@
 import { t as r } from "../../../../utils-Cx-WzRZF.js";
 import { Button as g } from "../../../Button/Button.js";
 import { t as B } from "../../../../ellipsis-vertical-BBmhzIXn.js";
-import { useCallback as C, useRef as R, useState as A } from "react";
-import { jsx as a, jsxs as m } from "react/jsx-runtime";
-var H = 36, I = 16, G = ({ actions: o, wrapperClassName: h, triggerButtonClassName: v, iconTriggerButtonClassName: f, wrapperActionsClassName: b, wrapperContentActionsClassName: w, ...x }) => {
-  const c = R(null), [u, y] = A(!1), k = C(() => {
-    const n = c.current;
-    if (!n || !o) return;
-    const t = n.getBoundingClientRect(), p = o.length * H + I;
-    let i = 0, l = window.innerHeight, e = n.parentElement;
+import { useRef as R, useState as A } from "react";
+import { jsx as n, jsxs as m } from "react/jsx-runtime";
+var C = 36, H = 16, D = ({ actions: i, wrapperClassName: h, triggerButtonClassName: v, iconTriggerButtonClassName: f, wrapperActionsClassName: b, wrapperContentActionsClassName: w, ...x }) => {
+  const c = R(null), [u, y] = A(!1), k = () => {
+    const o = c.current;
+    if (!o || !i) return;
+    const t = o.getBoundingClientRect(), p = i.length * C + H;
+    let a = 0, l = window.innerHeight, e = o.parentElement;
     for (; e; ) {
       const { overflowY: E } = window.getComputedStyle(e);
       if ([
@@ -17,15 +17,15 @@ var H = 36, I = 16, G = ({ actions: o, wrapperClassName: h, triggerButtonClassNa
         "hidden"
       ].includes(E)) {
         const d = e.getBoundingClientRect();
-        i = d.top, l = d.bottom;
+        a = d.top, l = d.bottom;
         break;
       }
       e = e.parentElement;
     }
-    const s = l - t.bottom, N = t.top - i;
+    const s = l - t.bottom, N = t.top - a;
     y(s < p && N > s);
-  }, [o]);
-  return o ? /* @__PURE__ */ m("div", {
+  };
+  return i ? /* @__PURE__ */ m("div", {
     ref: c,
     className: r("relative group", h),
     onMouseEnter: k,
@@ -34,30 +34,28 @@ var H = 36, I = 16, G = ({ actions: o, wrapperClassName: h, triggerButtonClassNa
       shape: "circle",
       size: "large",
       className: r("text-slate-400", "group-hover:text-slate-800", "group-hover:bg-aurora-50", "dark:text-metal-400", "dark:group-hover:text-aurora-500", "dark:group-hover:bg-aurora-900", v),
-      role: "presentation",
-      children: [/* @__PURE__ */ a(B, {
+      children: [/* @__PURE__ */ n(B, {
         "aria-hidden": "true",
         className: r("w-7 h-7", f)
-      }), /* @__PURE__ */ a("span", {
+      }), /* @__PURE__ */ n("span", {
         className: "sr-only",
         children: "Show Actions"
       })]
-    }), /* @__PURE__ */ a("div", {
+    }), /* @__PURE__ */ n("div", {
       className: r("absolute", "right-0", "w-53.75", "z-10", u ? "bottom-full" : "top-full", u ? "pb-1" : "pt-1", "invisible", "opacity-0", "transition-[opacity,visibility]", "duration-150", "delay-150", "group-hover:visible", "group-hover:opacity-100", "group-hover:delay-0", "group-hover:duration-75", b),
-      children: /* @__PURE__ */ a("div", {
+      children: /* @__PURE__ */ n("div", {
         className: r("bg-white", "py-2", "rounded-lg", "shadow-lg", "border", "border-zinc-100", "dark:bg-metal-800", "dark:border-metal-700", w),
-        children: o.map(({ id: n, label: t, className: p, component: i = g, componentProps: l, onClick: e }, s) => /* @__PURE__ */ a(i, {
+        children: i.map(({ id: o, label: t, className: p, component: a = g, componentProps: l, onClick: e }, s) => /* @__PURE__ */ n(a, {
           className: r("w-full", "text-slate-800", "cursor-pointer", "p-0", "h-9", "flex", "gap-2", "text-sm", "font-normal", "justify-start", "rounded-none", "px-6", "hover:bg-gray-50", "hover:text-slate-800", "hover:no-underline", "dark:hover:bg-metal-700", p),
           variant: "link",
-          role: "presentation",
           onClick: () => e(x.row.original),
           ...l,
           children: t
-        }, n ?? (typeof t == "string" ? t : `action-${s}`)))
+        }, o ?? (typeof t == "string" ? t : `action-${s}`)))
       })
     })]
   }) : null;
 };
 export {
-  G as Actions
+  D as Actions
 };

package/dist/components/VirtualizedTable/components/Body/Body.js

@@ -1,73 +1,74 @@
 import { t as r } from "../../../../utils-Cx-WzRZF.js";
-import { n as H } from "../../../../table.provider-9uUt5a-s.js";
-import { useTableContext as L } from "../../contexts/table.hook.js";
-import { Skeleton as M } from "../Skeleton/Skeleton.js";
-import { isPaginationBarVisible as O } from "../../utils/pagination.js";
-import { ExpandableRow as P } from "../ExpandableRow/ExpandableRow.js";
-import { Fragment as I } from "react";
-import { jsx as e, jsxs as T } from "react/jsx-runtime";
-var Y = ({ isLoading: h, showPagination: w, emptyState: p }) => {
-  const { table: i, pageSize: k, totalItems: N = -1 / 0, tableFetching: R, enableExpandedRow: E, classNameExpandedRow: v, classNameExpandedCell: y, classNameExpandedContent: C, enableHoverRow: g, classNameHoverRow: D, classNameActiveExpandedRow: j, renderExpandedRow: f, isBorderOnAdjacentCell: B, isExpandColumnVisible: V } = L();
-  if (h || R) return /* @__PURE__ */ e(M, {
-    numberOfRows: k,
-    table: i
+import { n as I } from "../../../../table.provider-B0BafHuU.js";
+import { useTableContext as T } from "../../contexts/table.hook.js";
+import { isPaginationBarVisible as q } from "../../utils/pagination.js";
+import { Skeleton as G } from "../Skeleton/Skeleton.js";
+import { ExpandableRow as J } from "../ExpandableRow/ExpandableRow.js";
+import { Fragment as K } from "react";
+import { jsx as e, jsxs as Q } from "react/jsx-runtime";
+var re = ({ isLoading: v, showPagination: N, emptyState: y, errorState: a }) => {
+  const { table: m, pageSize: E, totalItems: R = -1 / 0, tableLoading: C, tableError: c, enableExpandedRow: D, classNameExpandedRow: j, classNameExpandedCell: B, classNameExpandedContent: V, enableHoverRow: u, classNameHoverRow: z, classNameActiveExpandedRow: L, renderExpandedRow: f, isBorderOnAdjacentCell: _, isExpandColumnVisible: A } = T();
+  if (v || C) return /* @__PURE__ */ e(G, {
+    numberOfRows: E,
+    table: m
   });
-  const a = i.getRowModel().rows ?? [], o = w && O(N);
-  if (a.length === 0 && p) {
-    const d = i.getVisibleLeafColumns().length;
+  const t = m.getRowModel().rows ?? [], l = N && q(R), x = t.length === 0 && !!c && !!a, h = t.length > 0 ? null : c && a ? typeof a == "function" ? a(c) : a : y ?? null;
+  if (h) {
+    const d = m.getVisibleLeafColumns().length;
     return /* @__PURE__ */ e("tbody", {
-      className: r("text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
+      className: r("kvt-body", "text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
       children: /* @__PURE__ */ e("tr", {
-        className: r("border-b", "border-b-gray-200", "dark:border-b-metal-700", "bg-transparent"),
+        className: r(x ? "kvt-error-row" : "kvt-empty-row", "border-b", "border-b-gray-200", "dark:border-b-metal-700", "bg-transparent"),
         "data-empty-row": !0,
+        "data-error-row": x ? !0 : void 0,
         children: /* @__PURE__ */ e("td", {
           colSpan: d,
           className: r("p-0", "bg-white", "dark:bg-metal-900", "dark:border", "dark:border-metal-700", "rounded-b-lg"),
           children: /* @__PURE__ */ e("div", {
             className: "flex items-center justify-center",
-            children: p
+            children: h
           })
         })
       })
     });
   }
   return /* @__PURE__ */ e("tbody", {
-    className: r("text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
-    children: a.map((d, m) => {
-      const { id: c, original: b, getVisibleCells: z } = d, { meta: l = {} } = b, s = z(), t = E && d.getIsExpanded(), F = !!l.expandedRow || !!f, u = s[0]?.column.id !== "__expand" || V ? 0 : B ? 1 : null;
-      return /* @__PURE__ */ T(I, { children: [/* @__PURE__ */ e("tr", {
-        className: r({ "group/row": g }, "border-b", "border-b-gray-200", "dark:text-metal-50", "dark:border-b-metal-700", "bg-transparent", l.className),
-        "data-row-id": c,
-        ...l.attributes ?? {},
-        children: s.map(({ id: S, column: n, getContext: _ }, x) => {
-          const A = typeof n.columnDef.meta?.className == "function" ? n.columnDef.meta?.className(b) : n.columnDef.meta?.className;
+    className: r("kvt-body", "text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
+    children: t.map((d, b) => {
+      const { id: p, original: g, getVisibleCells: F } = d, { meta: s = {} } = g, i = F(), n = D && d.getIsExpanded(), H = !!s.expandedRow || !!f, k = i[0]?.column.id !== "__expand" || A ? 0 : _ ? 1 : null;
+      return /* @__PURE__ */ Q(K, { children: [/* @__PURE__ */ e("tr", {
+        className: r("kvt-row", { "group/row": u }, "border-b", "border-b-gray-200", "dark:text-metal-50", "dark:border-b-metal-700", "bg-transparent", s.className),
+        "data-row-id": p,
+        ...s.attributes ?? {},
+        children: i.map(({ id: M, column: o, getContext: O }, w) => {
+          const P = typeof o.columnDef.meta?.className == "function" ? o.columnDef.meta?.className(g) : o.columnDef.meta?.className;
           return /* @__PURE__ */ e("td", {
-            className: r("px-4", "py-1", "text-sm", "bg-white", "dark:bg-metal-900", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", {
-              "group-hover/row:bg-zinc-100 dark:group-hover/row:bg-metal-800": g,
-              [r("bg-zinc-100 dark:bg-metal-800", j)]: !!t
-            }, D, A, {
-              "rounded-bl-lg": m === a.length - 1 && u !== null && x === u && !o && !t,
-              "rounded-br-lg": m === a.length - 1 && x === s.length - 1 && !o && !t,
-              "dark:[tr:last-child_&]:border-b": !o
+            className: r("kvt-cell", "px-4", "py-1", "text-sm", "bg-white", "dark:bg-metal-900", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", {
+              "group-hover/row:bg-zinc-100 dark:group-hover/row:bg-metal-800": u,
+              [r("bg-zinc-100 dark:bg-metal-800", L)]: !!n
+            }, z, P, {
+              "rounded-bl-lg": b === t.length - 1 && k !== null && w === k && !l && !n,
+              "rounded-br-lg": b === t.length - 1 && w === i.length - 1 && !l && !n,
+              "dark:[tr:last-child_&]:border-b": !l
             }),
-            "data-expanded": t ? !0 : void 0,
-            ...n.columnDef.meta?.attributes ?? {},
-            children: H(n.columnDef.cell, _())
-          }, S);
+            "data-expanded": n ? !0 : void 0,
+            ...o.columnDef.meta?.attributes ?? {},
+            children: I(o.columnDef.cell, O())
+          }, M);
         })
-      }), F && /* @__PURE__ */ e(P, {
-        classNameExpandedCell: y,
-        classNameExpandedContent: C,
-        classNameExpandedRow: v,
-        colSpan: s.length,
-        id: c,
-        isExpanded: !!t,
-        isLastRow: m === a.length - 1 && !o,
-        children: l.expandedRow ?? f?.(b)
-      })] }, c);
+      }), H && /* @__PURE__ */ e(J, {
+        classNameExpandedCell: B,
+        classNameExpandedContent: V,
+        classNameExpandedRow: j,
+        colSpan: i.length,
+        id: p,
+        isExpanded: !!n,
+        isLastRow: b === t.length - 1 && !l,
+        children: s.expandedRow ?? f?.(g)
+      })] }, p);
     })
   });
 };
 export {
-  Y as Body
+  re as Body
 };

package/dist/components/VirtualizedTable/components/DropdownPaginate/DropdownPaginate.js

@@ -1,26 +1,72 @@
-import { Select as i } from "../../../Select/Select.js";
-import { DEFAULT_PAGE_SIZES as l } from "../../constants/pagination.js";
-import { useTableContext as p } from "../../contexts/table.hook.js";
-import { useCallback as g, useMemo as c } from "react";
-import { jsx as o, jsxs as d } from "react/jsx-runtime";
-var u = ({ pageSizes: m = l }) => {
-  const { pageSize: r, onPageSize: t, handlePage: a } = p(), s = c(() => m.map(String).map((e) => ({
-    label: e,
-    value: e
-  })), []), n = g((e) => {
-    t(Number(e)), a(0);
-  }, [a, t]);
-  return /* @__PURE__ */ d("div", {
-    className: "flex items-center gap-2 dark:text-metal-300",
-    children: [/* @__PURE__ */ o("span", { children: "Show" }), /* @__PURE__ */ o(i, {
-      className: "w-22 [&>div>p]:text-sm bg-white",
-      listItemClassName: "[&>p]:text-sm dark:bg-metal-800",
-      options: s,
-      value: r.toString(),
-      onChange: ({ target: e }) => n(e.value)
+import { t as o } from "../../../../utils-Cx-WzRZF.js";
+import { t as u } from "../../../../chevron-up-Bjpvg6ui.js";
+import { Typography as c } from "../../../Typography/Typography.js";
+import { i as b, n as v, r as w, t as S } from "../../../../dist-BaPW7qXd2.js";
+import { listVariants as k } from "../../../Select/components/List/List.variants.js";
+import { listItemVariants as N } from "../../../Select/components/ListItem/ListItem.variants.js";
+import { selectVariants as C } from "../../../Select/Select.variants.js";
+import { DEFAULT_PAGE_SIZES as y } from "../../constants/pagination.js";
+import { useTableContext as z } from "../../contexts/table.hook.js";
+import { useState as O } from "react";
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+var _ = ({ pageSizes: d = y, isListPortal: f = !1, direction: s = "auto" }) => {
+  const { pageSize: i, onPageSize: g, handlePage: h } = z(), [n, l] = O(!1), m = (e) => {
+    g(Number(e)), h(0), l(!1);
+  }, p = /* @__PURE__ */ t(S, {
+    asChild: !0,
+    side: s === "up" ? "top" : "bottom",
+    avoidCollisions: s === "auto",
+    align: "start",
+    sideOffset: 4,
+    onOpenAutoFocus: (e) => {
+      e.preventDefault();
+    },
+    children: /* @__PURE__ */ t("ul", {
+      role: "listbox",
+      "aria-label": "Rows per page",
+      className: o(k(), "kvt-page-size-list", "static top-auto mt-0 z-50 w-(--radix-popover-trigger-width)"),
+      children: d.map((e) => {
+        const a = String(e);
+        return /* @__PURE__ */ t("li", {
+          role: "option",
+          "aria-selected": a === String(i),
+          tabIndex: 0,
+          className: o(N(), "dark:bg-metal-800"),
+          onClick: () => {
+            m(a);
+          },
+          onKeyDown: (x) => {
+            x.key === "Enter" && m(a);
+          },
+          children: /* @__PURE__ */ t(c, {
+            variant: "body2",
+            className: "text-sm dark:text-metal-50",
+            children: a
+          })
+        }, a);
+      })
+    })
+  });
+  return /* @__PURE__ */ r("div", {
+    className: "kvt-page-size flex items-center gap-2 dark:text-metal-300",
+    children: [/* @__PURE__ */ t("span", { children: "Show" }), /* @__PURE__ */ r(w, {
+      open: n,
+      onOpenChange: l,
+      children: [/* @__PURE__ */ r(b, {
+        "aria-label": "Rows per page",
+        className: o(C(), "w-22 bg-white"),
+        children: [/* @__PURE__ */ t(c, {
+          variant: "body2",
+          className: "flex-1 text-left text-sm text-metal-800 dark:text-metal-50",
+          children: i
+        }), /* @__PURE__ */ t(u, {
+          "data-state": n ? "open" : "closed",
+          className: "w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none"
+        })]
+      }), f ? /* @__PURE__ */ t(v, { children: p }) : p]
     })]
   });
 };
 export {
-  u as DropdownPaginate
+  _ as DropdownPaginate
 };

package/dist/components/VirtualizedTable/components/ExpandableRow/ExpandableRow.js

@@ -1,7 +1,7 @@
 import { t as a } from "../../../../utils-Cx-WzRZF.js";
 import { jsx as d } from "react/jsx-runtime";
 var n = ({ children: o, classNameExpandedCell: b, classNameExpandedContent: t, classNameExpandedRow: l, colSpan: m, id: i, isExpanded: r, isLastRow: e }) => /* @__PURE__ */ d("tr", {
-  className: a("h-0 leading-0", l),
+  className: a("kvt-expanded-row h-0 leading-0", l),
   "data-expanded-row-id": i,
   children: /* @__PURE__ */ d("td", {
     colSpan: m,