@tedi-design-system/react 18.0.0-rc.9 → 18.0.0

package/src/tedi/components/content/table/table.es.js

@@ -1,21 +1,21 @@
-import { jsx as i, jsxs as re } from "react/jsx-runtime";
+import { jsx as i, jsxs as de } from "react/jsx-runtime";
 import { useReactTable as mn, flexRender as xe } from "../../../../../external/@tanstack/react-table/build/lib/index.es.js";
 import k from "../../../../../external/classnames/index.es.js";
 import { useRef as H, useId as fn, useMemo as w, useCallback as N, useState as K, useEffect as ft, Fragment as bn } from "react";
 import { Icon as ht } from "../../base/icon/icon.es.js";
-import { Collapse as hn } from "../../buttons/collapse/collapse.es.js";
+import { CollapseButton as hn } from "../../buttons/collapse-button/collapse-button.es.js";
 import { Checkbox as bt } from "../../form/checkbox/checkbox.es.js";
 import { Radio as wn } from "../../form/radio/radio.es.js";
 import { TextField as _n } from "../../form/textfield/textfield.es.js";
 import l from "./table.module.scss.es.js";
-import { TableColumnsMenu as Cn } from "./table-columns-menu/table-columns-menu.es.js";
-import { TableContext as vn } from "./table-context.es.js";
+import { TableColumnsMenu as vn } from "./table-columns-menu/table-columns-menu.es.js";
+import { TableContext as Cn } from "./table-context.es.js";
 import { TableHeaderButton as xn } from "./table-header-button/table-header-button.es.js";
 import { TableToolbar as Sn } from "./table-toolbar/table-toolbar.es.js";
 import { useTablePersistence as Dn } from "./use-table-persistence.es.js";
-import { Pagination as Rn } from "../../navigation/pagination/pagination.es.js";
-import { useLabels as yn } from "../../../providers/label-provider/use-labels.es.js";
-import { getCoreRowModel as In, getFilteredRowModel as kn, getSortedRowModel as En, getExpandedRowModel as Tn, getPaginationRowModel as Nn } from "../../../../../external/@tanstack/table-core/build/lib/index.es.js";
+import { useLabels as Rn } from "../../../providers/label-provider/use-labels.es.js";
+import { getCoreRowModel as yn, getFilteredRowModel as In, getSortedRowModel as kn, getExpandedRowModel as En, getPaginationRowModel as Tn } from "../../../../../external/@tanstack/table-core/build/lib/index.es.js";
+import { Pagination as Nn } from "../../navigation/pagination/pagination.es.js";
 const eo = (R, E) => (V) => {
   const x = V.index;
   if (x < 0 || x >= R.length) return 1;
@@ -58,20 +58,20 @@ const eo = (R, E) => (V) => {
     onClick: A,
     onKeyDownHandler: De,
     ariaRowIndex: Re,
-    columnProps: ne,
-    draggable: se,
-    dragHandleLabel: ce,
+    columnProps: oe,
+    draggable: ce,
+    dragHandleLabel: ue,
     dragHandlers: u,
     dragHandleId: ye,
     dragHandlePickedUp: Ie,
-    dragOverColumnId: ue
+    dragOverColumnId: ge
   } = R;
   return /* @__PURE__ */ i(
     "tr",
     {
       className: V,
       style: x,
-      draggable: se || void 0,
+      draggable: ce || void 0,
       onDragStart: u == null ? void 0 : u.onDragStart,
       onDragOver: u == null ? void 0 : u.onDragOver,
       onDragLeave: u == null ? void 0 : u.onDragLeave,
@@ -84,8 +84,8 @@ const eo = (R, E) => (V) => {
       "aria-rowindex": Re,
       "aria-current": O ? "true" : void 0,
       children: E.getVisibleCells().map(($) => {
-        var ge;
-        const g = $.column.columnDef.meta, F = ne == null ? void 0 : ne($.column.id), oe = se && $.column.id === Se, z = !!ue && $.column.id === ue, G = (ge = g == null ? void 0 : g.rowSpan) == null ? void 0 : ge.call(g, $.row);
+        var pe;
+        const g = $.column.columnDef.meta, F = oe == null ? void 0 : oe($.column.id), le = ce && $.column.id === Se, z = !!ge && $.column.id === ge, G = (pe = g == null ? void 0 : g.rowSpan) == null ? void 0 : pe.call(g, $.row);
         return G === 0 ? null : /* @__PURE__ */ i(
           "td",
           {
@@ -95,16 +95,16 @@ const eo = (R, E) => (V) => {
               {
                 [l[`tedi-table__cell--align-${g == null ? void 0 : g.align}`]]: g == null ? void 0 : g.align,
                 [l[`tedi-table__cell--valign-${g == null ? void 0 : g.vAlign}`]]: g == null ? void 0 : g.vAlign,
-                [l["tedi-table__cell--drag-handle"]]: oe,
+                [l["tedi-table__cell--drag-handle"]]: le,
                 [l["tedi-table__cell--drag-over"]]: z
               },
               F == null ? void 0 : F.className
             ),
             style: F == null ? void 0 : F.style,
-            children: oe ? /* @__PURE__ */ i(
+            children: le ? /* @__PURE__ */ i(
               On,
               {
-                label: ce,
+                label: ue,
                 onHandlePointerDown: (u == null ? void 0 : u.onHandlePointerDown) ?? (() => {
                 }),
                 onKeyDown: u == null ? void 0 : u.onKeyDown,
@@ -118,12 +118,12 @@ const eo = (R, E) => (V) => {
       })
     }
   );
-}, Ve = "__select__", Ge = "__expand__", Se = "__drag__", de = () => !0, Ln = {
-  text: de,
-  select: de,
-  "multi-select": de,
-  "date-range": de,
-  "date-range-period": de
+}, Ve = "__select__", Ge = "__expand__", Se = "__drag__", se = () => !0, Ln = {
+  text: se,
+  select: se,
+  "multi-select": se,
+  "date-range": se,
+  "date-range-period": se
 };
 function Pn(R) {
   return Array.isArray(R.columns);
@@ -138,33 +138,33 @@ function _t(R) {
     state: A,
     defaultState: De,
     onStateChange: Re,
-    persist: ne,
-    emptyState: se,
-    emptyStateRole: ce,
+    persist: oe,
+    emptyState: ce,
+    emptyStateRole: ue,
     className: u,
     children: ye,
     striped: Ie = !1,
-    verticalBorders: ue = !1,
+    verticalBorders: ge = !1,
     borderless: $ = !1,
     stickyFirstColumn: g = !1,
     stickyHeader: F = !1,
-    maxHeight: oe,
+    maxHeight: le,
     onRowClick: z,
     activeRowId: G,
-    rowHover: ge,
+    rowHover: pe,
     enableRowSelection: Me,
     selectionMode: ke = "multiple",
-    highlightSelectedRows: Ct = !0,
+    highlightSelectedRows: vt = !0,
     enableColumnFilters: Ee = !1,
-    renderSubComponent: pe,
+    renderSubComponent: W,
     getRowCanExpand: je,
     getSubRows: We,
-    getRowId: vt,
+    getRowId: Ct,
     expandTrigger: Te = "button",
     paginateExpandedRows: xt = !1,
     pagination: M,
     autoResetPageIndex: St = !0,
-    manualPagination: W = !1,
+    manualPagination: X = !1,
     manualSorting: Ne = !1,
     manualFiltering: Oe = !1,
     pageCount: Xe,
@@ -176,9 +176,9 @@ function _t(R) {
     columnProps: j,
     reorderableRows: S = !1,
     onRowDrop: L,
-    reorderableColumns: X = !1
-  } = R, { getLabel: b } = yn(), Je = se ?? b("table.no-data"), Y = H(b);
-  Y.current = b;
+    reorderableColumns: Y = !1
+  } = R, { getLabel: b } = Rn(), Je = ce ?? b("table.no-data"), q = H(b);
+  q.current = b;
   const Dt = fn(), p = E ?? Dt, h = w(() => M ? M === !0 ? { pageSize: 10, pageSizeOptions: [10, 25, 50], paginationProps: void 0 } : {
     pageSize: M.pageSize ?? 10,
     pageSizeOptions: M.pageSizeOptions === void 0 ? [10, 25, 50] : M.pageSizeOptions,
@@ -187,7 +187,7 @@ function _t(R) {
     const e = h == null ? void 0 : h.pageSizeOptions;
     return Array.isArray(e) && e.length > 0 ? e : void 0;
   }, [h]), [P, D] = Dn({
-    persist: ne,
+    persist: oe,
     controlled: A,
     defaultState: De,
     onStateChange: Re
@@ -250,9 +250,9 @@ function _t(R) {
       });
     },
     [D, h]
-  ), le = !!(pe || We), Qe = !!Me, $t = w(() => In(), []), Lt = w(() => Oe ? void 0 : kn(), [Oe]), Pt = w(() => Ne ? void 0 : En(), [Ne]), At = w(() => le ? Tn() : void 0, [le]), Ft = w(
-    () => y && !W ? Nn() : void 0,
-    [y, W]
+  ), ae = !!(W || We), Qe = !!Me, $t = w(() => yn(), []), Lt = w(() => Oe ? void 0 : In(), [Oe]), Pt = w(() => Ne ? void 0 : kn(), [Ne]), At = w(() => ae ? En() : void 0, [ae]), Ft = w(
+    () => y && !X ? Tn() : void 0,
+    [y, X]
   ), zt = w(() => {
     const e = [];
     if (S && e.push({
@@ -277,7 +277,7 @@ function _t(R) {
             ...$e,
             id: `${p}-select-all`,
             name: `${p}-select-all`,
-            label: Y.current("table.select-all", o.getIsAllPageRowsSelected()),
+            label: q.current("table.select-all", o.getIsAllPageRowsSelected()),
             hideLabel: !0,
             value: "all",
             checked: o.getIsAllPageRowsSelected(),
@@ -291,7 +291,7 @@ function _t(R) {
             ...Ye,
             id: `${p}-select-${o.id}`,
             name: t,
-            label: Y.current("table.select-row", o.getIsSelected()),
+            label: q.current("table.select-row", o.getIsSelected()),
             hideLabel: !0,
             value: o.id,
             checked: o.getIsSelected(),
@@ -306,7 +306,7 @@ function _t(R) {
             ...$e,
             id: `${p}-select-${o.id}`,
             name: `${p}-select-${o.id}`,
-            label: Y.current("table.select-row", o.getIsSelected()),
+            label: q.current("table.select-row", o.getIsSelected()),
             hideLabel: !0,
             value: o.id,
             checked: o.getIsSelected(),
@@ -317,7 +317,7 @@ function _t(R) {
         )
       });
     }
-    return le && e.push({
+    return ae && e.push({
       id: Ge,
       enableSorting: !1,
       enableHiding: !1,
@@ -337,17 +337,15 @@ function _t(R) {
             children: /* @__PURE__ */ i(
               hn,
               {
-                iconOnly: !0,
                 arrowType: Te === "row" ? "default" : "secondary",
-                hideCollapseText: !0,
                 ...qe,
+                hideText: !0,
                 id: `${p}-expand-${n.id}`,
-                controlsId: t,
-                openText: Y.current("table.expand-row"),
-                closeText: Y.current("table.collapse-row"),
+                "aria-controls": W ? t : void 0,
+                openText: q.current("table.expand-row"),
+                closeText: q.current("table.collapse-row"),
                 open: n.getIsExpanded(),
-                onToggle: () => n.toggleExpanded(),
-                children: null
+                onOpenChange: () => n.toggleExpanded()
               }
             )
           }
@@ -358,7 +356,8 @@ function _t(R) {
     x,
     Qe,
     ke,
-    le,
+    ae,
+    W,
     Te,
     S,
     p,
@@ -384,16 +383,16 @@ function _t(R) {
     enableMultiRowSelection: ke !== "single",
     enableColumnFilters: Ee,
     autoResetPageIndex: St,
-    paginateExpandedRows: y && !W ? xt : !0,
-    manualPagination: W,
+    paginateExpandedRows: y && !X ? xt : !0,
+    manualPagination: X,
     manualSorting: Ne,
     manualFiltering: Oe,
     // `pageCount` only matters in manual mode; TanStack ignores it otherwise.
-    pageCount: W && Xe !== void 0 ? Xe : void 0,
-    rowCount: W && me !== void 0 ? me : void 0,
-    getRowCanExpand: pe ? je ?? (() => !0) : je,
+    pageCount: X && Xe !== void 0 ? Xe : void 0,
+    rowCount: X && me !== void 0 ? me : void 0,
+    getRowCanExpand: W ? je ?? (() => !0) : je,
     getSubRows: We,
-    getRowId: vt,
+    getRowId: Ct,
     onColumnVisibilityChange: yt,
     onColumnOrderChange: Tt,
     onRowSelectionChange: It,
@@ -410,12 +409,12 @@ function _t(R) {
   }), Mt = w(
     () => ({ table: s, size: O, id: p, state: P }),
     [s, O, p, P]
-  ), jt = N((e) => s.setPageIndex(e - 1), [s]), Wt = N((e) => s.setPageSize(e), [s]), Xt = s.getHeaderGroups().length > 1, fe = Te === "row" && le, Yt = ge ?? (!!z || fe), qt = k(
+  ), jt = N((e) => s.setPageIndex(e - 1), [s]), Wt = N((e) => s.setPageSize(e), [s]), Xt = s.getHeaderGroups().length > 1, fe = Te === "row" && ae, Yt = pe ?? (!!z || fe), qt = k(
     l["tedi-table"],
     l[`tedi-table--${O}`],
     {
       [l["tedi-table--striped"]]: Ie,
-      [l["tedi-table--vertical-borders"]]: ue,
+      [l["tedi-table--vertical-borders"]]: ge,
       [l["tedi-table--borderless"]]: $,
       [l["tedi-table--sticky-first-column"]]: g,
       [l["tedi-table--sticky-header"]]: F,
@@ -431,30 +430,30 @@ function _t(R) {
     fe && e.getCanExpand() && e.toggleExpanded(), z == null || z(e);
   }, Qt = (e) => (n) => {
     tt(e) && n.target === n.currentTarget && (n.key === "Enter" || n.key === " ") && (n.preventDefault(), nt(e));
-  }, ot = be.length + (Ee ? 1 : 0), lt = s.getState().pagination, Zt = y ? lt.pageIndex * lt.pageSize : 0, en = y ? me ?? s.getFilteredRowModel().rows.length : _.length, tn = y ? ot + en : void 0, [at, Pe] = K(null), [nn, we] = K(null), q = H(null), J = H(null), [it, Ae] = K(null), [rt, _e] = K(null), Q = H(null), Z = H(null), [dt, Fe] = K(null), Ce = H([]), [st, ze] = K(null), ae = H(-1), [on, B] = K(""), ve = H(null), [ln, ct] = K(0), Be = w(
+  }, ot = be.length + (Ee ? 1 : 0), lt = s.getState().pagination, Zt = y ? lt.pageIndex * lt.pageSize : 0, en = y ? me ?? s.getFilteredRowModel().rows.length : _.length, tn = y ? ot + en : void 0, [at, Pe] = K(null), [nn, we] = K(null), J = H(null), Q = H(null), [it, Ae] = K(null), [rt, _e] = K(null), Z = H(null), ee = H(null), [dt, Fe] = K(null), ve = H([]), [st, ze] = K(null), ie = H(-1), [on, B] = K(""), Ce = H(null), [ln, ct] = K(0), Be = w(
     () => S ? new Map(_.map((e) => [e.id, e.index])) : /* @__PURE__ */ new Map(),
     [S, _]
   );
   ft(() => {
-    if (!S && !X) return;
+    if (!S && !Y) return;
     const e = () => {
-      J.current = null, Z.current = null;
+      Q.current = null, ee.current = null;
     };
     return window.addEventListener("mouseup", e), window.addEventListener("touchend", e), () => {
       window.removeEventListener("mouseup", e), window.removeEventListener("touchend", e);
     };
-  }, [S, X]);
+  }, [S, Y]);
   const an = N(
     (e) => ({
       onHandlePointerDown: () => {
-        J.current = e;
+        Q.current = e;
       },
       onDragStart: (n) => {
-        if (J.current !== e) {
+        if (Q.current !== e) {
           n.preventDefault();
           return;
         }
-        J.current = null, n.dataTransfer.effectAllowed = "move";
+        Q.current = null, n.dataTransfer.effectAllowed = "move";
         try {
           n.dataTransfer.setData("text/plain", e);
         } catch {
@@ -465,31 +464,31 @@ function _t(R) {
           c.style.cssText = `position:fixed;top:-10000px;left:0;width:${a.width}px;pointer-events:none;`;
           const f = document.createElement("table");
           f.className = o.className, f.style.cssText = `width:${a.width}px;table-layout:fixed;border-collapse:collapse;`;
-          const C = document.createElement("tbody"), v = t.cloneNode(!0);
-          v.classList.add(l["tedi-table__row--drag-preview"]);
-          const d = Array.from(v.children);
-          r.forEach((ee, I) => {
+          const v = document.createElement("tbody"), C = t.cloneNode(!0);
+          C.classList.add(l["tedi-table__row--drag-preview"]);
+          const d = Array.from(C.children);
+          r.forEach((te, I) => {
             const U = d[I];
             if (!U) return;
-            const ie = ee.getBoundingClientRect();
-            U.style.width = `${ie.width}px`, U.style.minWidth = `${ie.width}px`, U.style.maxWidth = `${ie.width}px`;
-          }), C.appendChild(v), f.appendChild(C), c.appendChild(f), document.body.appendChild(c), n.dataTransfer.setDragImage(c, 24, a.height / 2), window.setTimeout(() => c.remove(), 0);
+            const re = te.getBoundingClientRect();
+            U.style.width = `${re.width}px`, U.style.minWidth = `${re.width}px`, U.style.maxWidth = `${re.width}px`;
+          }), v.appendChild(C), f.appendChild(v), c.appendChild(f), document.body.appendChild(c), n.dataTransfer.setDragImage(c, 24, a.height / 2), window.setTimeout(() => c.remove(), 0);
         }
-        q.current = e, Pe(e);
+        J.current = e, Pe(e);
       },
       onDragOver: (n) => {
-        !q.current || q.current === e || (n.preventDefault(), n.dataTransfer.dropEffect = "move", we(e));
+        !J.current || J.current === e || (n.preventDefault(), n.dataTransfer.dropEffect = "move", we(e));
       },
       onDragLeave: () => {
         we((n) => n === e ? null : n);
       },
       onDragEnd: () => {
-        q.current = null, J.current = null, Pe(null), we(null);
+        J.current = null, Q.current = null, Pe(null), we(null);
       },
       onDrop: (n) => {
         n.preventDefault();
-        const t = q.current, o = e;
-        if (q.current = null, J.current = null, Pe(null), we(null), !t || t === o) return;
+        const t = J.current, o = e;
+        if (J.current = null, Q.current = null, Pe(null), we(null), !t || t === o) return;
         const a = Be.get(t), r = Be.get(o);
         a === void 0 || r === void 0 || L == null || L({ fromId: t, toId: o, fromIndex: a, toIndex: r });
       }
@@ -501,14 +500,14 @@ function _t(R) {
   }, rn = N(
     (e) => ({
       onHandlePointerDown: () => {
-        Z.current = e;
+        ee.current = e;
       },
       onDragStart: (n) => {
-        if (Z.current !== e) {
+        if (ee.current !== e) {
           n.preventDefault();
           return;
         }
-        Z.current = null, n.dataTransfer.effectAllowed = "move";
+        ee.current = null, n.dataTransfer.effectAllowed = "move";
         try {
           n.dataTransfer.setData("text/plain", e);
         } catch {
@@ -517,25 +516,25 @@ function _t(R) {
         a.style.cssText = `position:fixed;top:-10000px;left:0;width:${o.width}px;pointer-events:none;`;
         const r = document.createElement("table"), c = t.closest("table");
         r.className = (c == null ? void 0 : c.className) ?? "", r.style.cssText = `width:${o.width}px;table-layout:fixed;border-collapse:collapse;`;
-        const f = document.createElement("thead"), C = document.createElement("tr");
-        C.className = l["tedi-table__row"];
-        const v = t.cloneNode(!0);
-        v.classList.add(l["tedi-table__header-cell--drag-preview"]), v.style.width = `${o.width}px`, C.appendChild(v), f.appendChild(C), r.appendChild(f), a.appendChild(r), document.body.appendChild(a), n.dataTransfer.setDragImage(a, o.width / 2, o.height / 2), window.setTimeout(() => a.remove(), 0), Q.current = e, Ae(e);
+        const f = document.createElement("thead"), v = document.createElement("tr");
+        v.className = l["tedi-table__row"];
+        const C = t.cloneNode(!0);
+        C.classList.add(l["tedi-table__header-cell--drag-preview"]), C.style.width = `${o.width}px`, v.appendChild(C), f.appendChild(v), r.appendChild(f), a.appendChild(r), document.body.appendChild(a), n.dataTransfer.setDragImage(a, o.width / 2, o.height / 2), window.setTimeout(() => a.remove(), 0), Z.current = e, Ae(e);
       },
       onDragOver: (n) => {
-        !Q.current || Q.current === e || (n.preventDefault(), n.dataTransfer.dropEffect = "move", _e(e));
+        !Z.current || Z.current === e || (n.preventDefault(), n.dataTransfer.dropEffect = "move", _e(e));
       },
       onDragLeave: () => {
         _e((n) => n === e ? null : n);
       },
       onDragEnd: () => {
-        Q.current = null, Z.current = null, Ae(null), _e(null);
+        Z.current = null, ee.current = null, Ae(null), _e(null);
       },
       onDrop: (n) => {
         n.preventDefault();
-        const t = Q.current, o = e;
-        if (Q.current = null, Z.current = null, Ae(null), _e(null), !t || t === o) return;
-        const a = s.getState().columnOrder, r = a.length > 0 ? a : s.getAllLeafColumns().map((C) => C.id), c = r.indexOf(t), f = r.indexOf(o);
+        const t = Z.current, o = e;
+        if (Z.current = null, ee.current = null, Ae(null), _e(null), !t || t === o) return;
+        const a = s.getState().columnOrder, r = a.length > 0 ? a : s.getAllLeafColumns().map((v) => v.id), c = r.indexOf(t), f = r.indexOf(o);
         c < 0 || f < 0 || s.setColumnOrder(ut(r, c, f));
       }
     }),
@@ -549,25 +548,25 @@ function _t(R) {
     const a = o + e;
     if (a < 0 || a >= t.length) return;
     const r = ut(t, o, a), c = s.getState().columnOrder.length > 0 ? [...s.getState().columnOrder] : s.getAllLeafColumns().map((d) => d.id), f = new Set(t);
-    let C = 0;
-    const v = c.map((d) => f.has(d) ? r[C++] : d);
-    for (const d of r) v.includes(d) || v.push(d);
-    s.setColumnOrder(v), B(b("table.reorder.move", Ue(n), a + 1)), ve.current = { kind: "column", id: n }, ct((d) => d + 1);
+    let v = 0;
+    const C = c.map((d) => f.has(d) ? r[v++] : d);
+    for (const d of r) C.includes(d) || C.push(d);
+    s.setColumnOrder(C), B(b("table.reorder.move", Ue(n), a + 1)), Ce.current = { kind: "column", id: n }, ct((d) => d + 1);
   }, cn = (e, n) => {
-    if (!X) return;
+    if (!Y) return;
     const t = dt;
     switch (e.key) {
       case " ":
       case "Enter":
         if (e.preventDefault(), t === null)
-          Ce.current = [...s.getState().columnOrder ?? []], Fe(n), B(b("table.reorder.pickup", Ue(n)));
+          ve.current = [...s.getState().columnOrder ?? []], Fe(n), B(b("table.reorder.pickup", Ue(n)));
         else {
           const o = gt().indexOf(t) + 1;
-          Fe(null), Ce.current = [], B(b("table.reorder.drop", Ue(t), o));
+          Fe(null), ve.current = [], B(b("table.reorder.drop", Ue(t), o));
         }
         break;
       case "Escape":
-        t !== null && (e.preventDefault(), s.setColumnOrder(Ce.current), Fe(null), Ce.current = [], B(b("table.reorder.cancel")));
+        t !== null && (e.preventDefault(), s.setColumnOrder(ve.current), Fe(null), ve.current = [], B(b("table.reorder.cancel")));
         break;
       case "ArrowLeft":
         t !== null && (e.preventDefault(), pt(-1, t));
@@ -587,7 +586,7 @@ function _t(R) {
       toId: r.id,
       fromIndex: a.index,
       toIndex: r.index
-    }), B(b("table.row-reorder.move", o + 1)), ve.current = { kind: "row", original: n }, ct((c) => c + 1);
+    }), B(b("table.row-reorder.move", o + 1)), Ce.current = { kind: "row", original: n }, ct((c) => c + 1);
   }, un = (e, n) => {
     if (!S) return;
     const t = st;
@@ -595,26 +594,26 @@ function _t(R) {
       case " ":
       case "Enter":
         if (e.preventDefault(), t === null)
-          ze(n.original), ae.current = n.index, B(b("table.row-reorder.pickup", _.indexOf(n) + 1));
+          ze(n.original), ie.current = n.index, B(b("table.row-reorder.pickup", _.indexOf(n) + 1));
         else {
           const o = _.findIndex((a) => a.original === t) + 1;
-          ze(null), ae.current = -1, B(b("table.row-reorder.drop", o));
+          ze(null), ie.current = -1, B(b("table.row-reorder.drop", o));
         }
         break;
       case "Escape":
         if (t !== null) {
           e.preventDefault();
           const o = _.findIndex((a) => a.original === t);
-          if (o >= 0 && ae.current >= 0) {
+          if (o >= 0 && ie.current >= 0) {
             const a = _[o];
             L == null || L({
               fromId: a.id,
               toId: a.id,
               fromIndex: a.index,
-              toIndex: ae.current
+              toIndex: ie.current
             });
           }
-          ze(null), ae.current = -1, B(b("table.row-reorder.cancel"));
+          ze(null), ie.current = -1, B(b("table.row-reorder.cancel"));
         }
         break;
       case "ArrowUp":
@@ -627,9 +626,9 @@ function _t(R) {
   };
   return ft(() => {
     var t;
-    const e = ve.current;
+    const e = Ce.current;
     if (!e) return;
-    ve.current = null;
+    Ce.current = null;
     let n;
     if (e.kind === "column")
       n = `${p}-col-reorder-${e.id}`;
@@ -638,15 +637,15 @@ function _t(R) {
       n = o ? `${p}-row-reorder-${o.id}` : null;
     }
     n && ((t = document.getElementById(n)) == null || t.focus());
-  }, [ln, _, p]), /* @__PURE__ */ i(vn.Provider, { value: Mt, children: /* @__PURE__ */ re("div", { className: qt, "data-name": "tedi-table", children: [
+  }, [ln, _, p]), /* @__PURE__ */ i(Cn.Provider, { value: Mt, children: /* @__PURE__ */ de("div", { className: qt, "data-name": "tedi-table", children: [
     ye,
-    (S || X) && /* @__PURE__ */ i("div", { className: l["tedi-table__sr-only"], "aria-live": "polite", "aria-atomic": "true", children: on }),
+    (S || Y) && /* @__PURE__ */ i("div", { className: l["tedi-table__sr-only"], "aria-live": "polite", "aria-atomic": "true", children: on }),
     /* @__PURE__ */ i(
       "div",
       {
         className: l["tedi-table__scroll"],
-        style: oe !== void 0 ? { maxHeight: oe, overflowY: "auto" } : void 0,
-        children: /* @__PURE__ */ re(
+        style: le !== void 0 ? { maxHeight: le, overflowY: "auto" } : void 0,
+        children: /* @__PURE__ */ de(
           "table",
           {
             id: E,
@@ -655,7 +654,7 @@ function _t(R) {
             "aria-colcount": he > 0 ? he : void 0,
             children: [
               T && /* @__PURE__ */ i("caption", { className: l["tedi-table__caption"], children: T }),
-              /* @__PURE__ */ re("thead", { className: l["tedi-table__head"], children: [
+              /* @__PURE__ */ de("thead", { className: l["tedi-table__head"], children: [
                 be.map((e, n) => /* @__PURE__ */ i(
                   "tr",
                   {
@@ -665,13 +664,13 @@ function _t(R) {
                       const o = t.subHeaders.length > 0, a = !!t.column.parent, r = Pn(t.column.columnDef), c = !r && !a;
                       if (t.isPlaceholder && !c || !t.isPlaceholder && c && n > 0)
                         return null;
-                      const f = c ? be.length - n : 1, C = t.column.getIsSorted(), v = t.column.getCanSort() ? C === "asc" ? "ascending" : C === "desc" ? "descending" : "none" : void 0, d = t.column.columnDef.meta, ee = (d == null ? void 0 : d.label) ?? (typeof t.column.columnDef.header == "string" ? t.column.columnDef.header : void 0), I = j == null ? void 0 : j(t.column.id), U = t.column.getSize(), ie = t.column.id === Se || t.column.id === Ve || t.column.id === Ge, te = X && c && !ie, m = te ? rn(t.column.id) : void 0, gn = te && it === t.column.id, pn = te && rt === t.column.id && it !== t.column.id, He = te && dt === t.column.id;
+                      const f = c ? be.length - n : 1, v = t.column.getIsSorted(), C = t.column.getCanSort() ? v === "asc" ? "ascending" : v === "desc" ? "descending" : "none" : void 0, d = t.column.columnDef.meta, te = (d == null ? void 0 : d.label) ?? (typeof t.column.columnDef.header == "string" ? t.column.columnDef.header : void 0), I = j == null ? void 0 : j(t.column.id), U = t.column.getSize(), re = t.column.id === Se || t.column.id === Ve || t.column.id === Ge, ne = Y && c && !re, m = ne ? rn(t.column.id) : void 0, gn = ne && it === t.column.id, pn = ne && rt === t.column.id && it !== t.column.id, He = ne && dt === t.column.id;
                       return /* @__PURE__ */ i(
                         "th",
                         {
                           colSpan: t.colSpan,
                           rowSpan: f > 1 ? f : void 0,
-                          draggable: te || void 0,
+                          draggable: ne || void 0,
                           onDragStart: m == null ? void 0 : m.onDragStart,
                           onDragOver: m == null ? void 0 : m.onDragOver,
                           onDragLeave: m == null ? void 0 : m.onDragLeave,
@@ -690,10 +689,10 @@ function _t(R) {
                             I == null ? void 0 : I.className
                           ),
                           scope: "col",
-                          "aria-sort": v,
-                          "aria-label": ee ?? (r ? void 0 : t.column.id),
+                          "aria-sort": C,
+                          "aria-label": te ?? (r ? void 0 : t.column.id),
                           style: U || I != null && I.style ? { ...U ? { width: U } : null, ...I == null ? void 0 : I.style } : void 0,
-                          children: te && m ? /* @__PURE__ */ re("span", { className: l["tedi-table__header-cell-inner"], children: [
+                          children: ne && m ? /* @__PURE__ */ de("span", { className: l["tedi-table__header-cell-inner"], children: [
                             /* @__PURE__ */ i(
                               "button",
                               {
@@ -702,7 +701,7 @@ function _t(R) {
                                 className: k(l["tedi-table__drag-handle"], {
                                   [l["tedi-table__drag-handle--picked-up"]]: He
                                 }),
-                                "aria-label": b("table.drag-column", ee ?? t.column.id),
+                                "aria-label": b("table.drag-column", te ?? t.column.id),
                                 "aria-pressed": He,
                                 onClick: (Ke) => Ke.stopPropagation(),
                                 onMouseDown: m.onHandlePointerDown,
@@ -760,23 +759,23 @@ function _t(R) {
                 {
                   colSpan: Math.max(1, he),
                   className: k(l["tedi-table__cell"], l["tedi-table__cell--placeholder"]),
-                  children: ce ? /* @__PURE__ */ i("div", { role: ce, children: Je }) : Je
+                  children: ue ? /* @__PURE__ */ i("div", { role: ue, children: Je }) : Je
                 }
               ) }) : _.map((e, n) => {
                 const t = tt(e), o = G !== void 0 && e.id === G, a = Le == null ? void 0 : Le(e), r = k(
                   l["tedi-table__row"],
                   {
-                    [l["tedi-table__row--selected"]]: Ct && e.getIsSelected(),
+                    [l["tedi-table__row--selected"]]: vt && e.getIsSelected(),
                     [l["tedi-table__row--active"]]: o,
                     [l["tedi-table__row--clickable"]]: t,
                     [l["tedi-table__row--sub-row"]]: e.depth > 0
                   },
                   a == null ? void 0 : a.className
-                ), c = y ? ot + Zt + n + 1 : void 0, f = `${p}-sub-${e.id}`, C = S && at === e.id, v = S && nn === e.id && at !== e.id, d = S && st === e.original, ee = {
+                ), c = y ? ot + Zt + n + 1 : void 0, f = `${p}-sub-${e.id}`, v = S && at === e.id, C = S && nn === e.id && at !== e.id, d = S && st === e.original, te = {
                   row: e,
                   rowClassName: k(r, {
-                    [l["tedi-table__row--dragging"]]: C,
-                    [l["tedi-table__row--drag-over"]]: v,
+                    [l["tedi-table__row--dragging"]]: v,
+                    [l["tedi-table__row--drag-over"]]: C,
                     [l["tedi-table__row--picked-up"]]: d
                   }),
                   rowStyle: a == null ? void 0 : a.style,
@@ -791,11 +790,11 @@ function _t(R) {
                   dragHandlers: S ? { ...an(e.id), onKeyDown: (I) => un(I, e) } : void 0,
                   dragHandleId: S ? sn(e.id) : void 0,
                   dragHandlePickedUp: d,
-                  dragOverColumnId: X ? rt : null
+                  dragOverColumnId: Y ? rt : null
                 };
-                return /* @__PURE__ */ re(bn, { children: [
-                  /* @__PURE__ */ i($n, { ...ee }),
-                  pe && e.getIsExpanded() && /* @__PURE__ */ i("tr", { className: k(l["tedi-table__row"], l["tedi-table__row--sub-component"]), children: /* @__PURE__ */ i(
+                return /* @__PURE__ */ de(bn, { children: [
+                  /* @__PURE__ */ i($n, { ...te }),
+                  W && e.getIsExpanded() && /* @__PURE__ */ i("tr", { className: k(l["tedi-table__row"], l["tedi-table__row--sub-component"]), children: /* @__PURE__ */ i(
                     "td",
                     {
                       id: f,
@@ -803,7 +802,7 @@ function _t(R) {
                       "aria-label": b("table.row-details"),
                       colSpan: Math.max(1, he),
                       className: k(l["tedi-table__cell"], l["tedi-table__cell--sub-component"]),
-                      children: pe(e)
+                      children: W(e)
                     }
                   ) })
                 ] }, e.id);
@@ -829,7 +828,7 @@ function _t(R) {
       }
     ),
     y && /* @__PURE__ */ i("div", { className: l["tedi-table__pagination"], children: /* @__PURE__ */ i(
-      Rn,
+      Nn,
       {
         ...h == null ? void 0 : h.paginationProps,
         pageCount: Math.max(1, s.getPageCount()),
@@ -846,11 +845,10 @@ function _t(R) {
 _t.displayName = "Table";
 const to = Object.assign(_t, {
   Toolbar: Sn,
-  ColumnsMenu: Cn,
+  ColumnsMenu: vn,
   HeaderButton: xn
 });
 export {
   to as Table,
-  to as default,
   eo as groupRowSpan
 };