@acronis-platform/ui-react 1.0.0 → 2.0.0

package/dist/components/ui/data-table/data-table.js

@@ -1,266 +1,429 @@
-import { jsx as n, jsxs as y } from "react/jsx-runtime";
-import { useState as m, useEffect as ve, Fragment as K } from "react";
-import { useReactTable as Se, flexRender as k } from "../../../node_modules/.pnpm/@tanstack_react-table@8.21.3_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/@tanstack/react-table/build/lib/index.js";
-import { cn as h } from "../../../lib/utils.js";
-import { useIntersectionObserver as ye } from "../../../hooks/use-intersection-observer.js";
-import { Table as we, TableHeader as Re, TableRow as u, TableHead as xe, TableBody as ze, TableCell as g } from "../table/table.js";
-import { getFilteredRowModel as Ne, getSortedRowModel as Ce, getPaginationRowModel as De, getExpandedRowModel as Ie, getCoreRowModel as Me } from "../../../node_modules/.pnpm/@tanstack_table-core@8.21.3/node_modules/@tanstack/table-core/build/lib/index.js";
-function U(o) {
-  const l = o.getIsPinned();
+import { jsx as t, jsxs as v } from "react/jsx-runtime";
+import { useState as g, useRef as so, useMemo as ne, useEffect as re, Fragment as L } from "react";
+import { useReactTable as co, flexRender as ie } from "../../../node_modules/.pnpm/@tanstack_react-table@8.21.3_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/@tanstack/react-table/build/lib/index.js";
+import { EllipsisIcon as uo } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as R } from "../../../lib/utils.js";
+import { isBulkSelectionActive as mo } from "./data-table-selection.js";
+import { DataTableViewOptions as go } from "./data-table-view-options.js";
+import { useIntersectionObserver as fo } from "../../../hooks/use-intersection-observer.js";
+import { Table as bo, TableHeader as po, TableRow as h, TableSettingsCell as vo, TableHead as ho, TableBody as So, TableCell as S, TableActionsCell as Do } from "../table/table.js";
+import { TooltipProvider as yo, Tooltip as wo, TooltipTrigger as Ro, TooltipContent as Co } from "../tooltip/tooltip.js";
+import { DropdownMenu as zo, DropdownMenuTrigger as xo, DropdownMenuContent as Io } from "../dropdown-menu/dropdown-menu.js";
+import { ButtonIcon as No } from "../button-icon/button-icon.js";
+import { getFilteredRowModel as Ao, getSortedRowModel as Mo, getPaginationRowModel as To, getExpandedRowModel as Eo, getCoreRowModel as _o } from "../../../node_modules/.pnpm/@tanstack_table-core@8.21.3/node_modules/@tanstack/table-core/build/lib/index.js";
+function de(n) {
+  const l = n.getIsPinned();
   if (l)
     return {
       position: "sticky",
-      left: l === "left" ? o.getStart("left") : void 0,
-      right: l === "right" ? o.getAfter("right") : void 0,
+      left: l === "left" ? n.getStart("left") : void 0,
+      right: l === "right" ? n.getAfter("right") : void 0,
       zIndex: 1,
       // Derived from the same border token every other table divider uses (not a
       // hardcoded color), so the separator theme-adapts automatically.
       boxShadow: l === "left" ? "4px 0 4px -4px var(--ui-table-global-row-border-color)" : "-4px 0 4px -4px var(--ui-table-global-row-border-color)"
     };
 }
-function B(o, l) {
-  if (l || o.columnDef.size !== void 0)
-    return o.getSize();
+function ue(n, l) {
+  if (l || n.columnDef.size !== void 0)
+    return n.getSize();
 }
-function Ee(o, l) {
-  const i = U(o.column), s = B(o.column, l);
-  if (!(!i && s === void 0))
-    return { ...i, width: s };
+function le(n, l) {
+  const a = de(n.column), c = ue(n.column, l);
+  if (!(!a && c === void 0))
+    return { ...a, width: c };
 }
-function _e(o, l) {
-  const i = U(o.column), s = B(o.column, l);
-  if (!(!i && s === void 0))
-    return { ...i, width: s };
+function ae(n, l) {
+  const a = de(n.column), c = ue(n.column, l);
+  if (!(!a && c === void 0))
+    return { ...a, width: c };
 }
-const L = 20, H = Number.MAX_SAFE_INTEGER;
-function Fe(o, l, { shiftKey: i, min: s, max: b }) {
-  const p = i ? 50 : 10;
-  if (o === "ArrowLeft")
-    return Math.min(b, Math.max(s, l - p));
-  if (o === "ArrowRight")
-    return Math.max(s, Math.min(b, l + p));
+const se = 20, ce = Number.MAX_SAFE_INTEGER;
+function Fo(n, l, { shiftKey: a, min: c, max: f }) {
+  const b = a ? 50 : 10;
+  if (n === "ArrowLeft")
+    return Math.min(f, Math.max(c, l - b));
+  if (n === "ArrowRight")
+    return Math.max(c, Math.min(f, l + b));
 }
-function He({
-  columns: o = [],
+function ko(n, l, a) {
+  const c = n.indexOf(l), f = n.indexOf(a);
+  if (c === -1 || f === -1 || c === f) return n;
+  const b = [...n];
+  return b.splice(f, 0, b.splice(c, 1)[0]), b;
+}
+const Ho = {
+  sort: { label: "Sort column", action: "Click" },
+  reorder: { label: "Reorder column", action: "Drag" },
+  resize: { label: "Resize column", action: "Drag border" }
+};
+function qo({
+  columns: n = [],
   data: l = [],
-  table: i,
-  getRowCanExpand: s,
-  renderExpandedRow: b,
-  striped: p = !1,
-  bordered: O = !1,
-  highlightCurrentRow: w = !1,
-  skeleton: R = !1,
-  skeletonRows: j = 5,
-  enableColumnResizing: I = !1,
-  onColumnSizingChange: x,
-  columnVisibility: X,
-  onColumnVisibilityChange: z,
-  manualSorting: M = !1,
-  sorting: E,
-  onSortingChange: N,
-  renderRow: _,
-  renderEmptyState: F,
-  paginationMode: A = "page",
-  onLoadMore: C,
-  loadMoreRootMargin: Z,
-  hasNextPage: T = !1,
-  isLoadingMore: P = !1
+  table: a,
+  getRowCanExpand: c,
+  renderExpandedRow: f,
+  striped: b = !1,
+  bordered: me = !1,
+  highlightCurrentRow: N = !1,
+  skeleton: A = !1,
+  skeletonRows: ge = 5,
+  enableColumnResizing: K = !1,
+  onColumnSizingChange: M,
+  enableColumnReordering: fe = !1,
+  columnOrder: V,
+  onColumnOrderChange: T,
+  columnVisibility: be,
+  onColumnVisibilityChange: E,
+  rowSelection: B,
+  onRowSelectionChange: _,
+  manualSorting: U = !1,
+  sorting: j,
+  onSortingChange: F,
+  renderRow: X,
+  renderEmptyState: Z,
+  paginationMode: G = "page",
+  onLoadMore: k,
+  loadMoreRootMargin: pe,
+  hasNextPage: W = !1,
+  resizeColumnLabel: ve = "Resize column",
+  emptyLabel: he = "No results.",
+  isLoadingMore: $ = !1,
+  hideActionColumn: Se = !1,
+  renderRowActions: q,
+  rowActionsLabel: De = "Row actions",
+  columnSettingsLabel: ye,
+  headerHints: we
 }) {
-  const [G, W] = m([]), $ = E ?? G, [q, J] = m([]), [Q, Y] = m({}), ee = X ?? Q, [te, ne] = m({}), [oe, le] = m({}), [ie, re] = m({}), [ae, se] = m(), ce = (e) => {
-    re(e), x == null || x(e);
-  }, de = (e) => {
-    Y(e), z == null || z(e);
-  }, ue = (e) => {
-    E === void 0 && W(e), N == null || N(e);
-  }, me = Se({
+  const H = {
+    ...Ho,
+    ...we
+  }, [Re, Ce] = g([]), ze = j ?? Re, [xe, Ie] = g([]), [Ne, Ae] = g({}), Me = be ?? Ne, [Te, Ee] = g({}), _e = B ?? Te, [Fe, ke] = g({}), [He, Oe] = g({}), [Pe, Le] = g([]), Ke = V ?? Pe, [C, O] = g(), [Ve, Be] = g(), [Ue, J] = g(0), Q = so([]), je = (e) => {
+    Oe(e), M == null || M(e);
+  }, Xe = (e) => {
+    V === void 0 && Le(e), T == null || T(e);
+  }, Ze = (e) => {
+    Ae(e), E == null || E(e);
+  }, Ge = (e) => {
+    j === void 0 && Ce(e), F == null || F(e);
+  }, We = (e) => {
+    B === void 0 && Ee(e), _ == null || _(e);
+  }, Y = !Se && !a, ee = ne(
+    () => Y ? [
+      {
+        id: "__actions",
+        size: 48,
+        enableSorting: !1,
+        enableHiding: !1,
+        meta: { pin: "right" },
+        header: () => null,
+        cell: () => null
+      }
+    ] : [],
+    [Y]
+  ), $e = ne(
+    () => [...n, ...ee],
+    [n, ee]
+  ), [qe, oe] = g(), Je = co({
     data: l,
-    columns: o,
-    enableColumnResizing: I,
+    columns: $e,
+    enableColumnResizing: K,
     columnResizeMode: "onChange",
-    getCoreRowModel: Me(),
-    getExpandedRowModel: Ie(),
-    ...A === "page" ? { getPaginationRowModel: De() } : {},
-    getRowCanExpand: s,
-    onExpandedChange: le,
-    manualSorting: M,
-    onSortingChange: ue,
-    ...M ? {} : { getSortedRowModel: Ce() },
-    onColumnFiltersChange: J,
-    getFilteredRowModel: Ne(),
-    onColumnVisibilityChange: de,
-    onRowSelectionChange: ne,
-    onColumnSizingChange: ce,
+    getCoreRowModel: _o(),
+    getExpandedRowModel: Eo(),
+    ...G === "page" ? { getPaginationRowModel: To() } : {},
+    getRowCanExpand: c,
+    onExpandedChange: ke,
+    manualSorting: U,
+    onSortingChange: Ge,
+    ...U ? {} : { getSortedRowModel: Mo() },
+    onColumnFiltersChange: Ie,
+    getFilteredRowModel: Ao(),
+    onColumnVisibilityChange: Ze,
+    onRowSelectionChange: We,
+    onColumnSizingChange: je,
+    onColumnOrderChange: Xe,
     state: {
-      sorting: $,
-      columnFilters: q,
-      columnVisibility: ee,
-      rowSelection: te,
-      expanded: oe,
-      columnSizing: ie
+      sorting: ze,
+      columnFilters: xe,
+      columnVisibility: Me,
+      rowSelection: _e,
+      expanded: Fe,
+      columnSizing: He,
+      columnOrder: Ke
     }
-  }), r = i ?? me, D = !i && A === "infinite", v = I && !i, ge = ye({
-    onIntersect: () => C == null ? void 0 : C(),
-    disabled: !D || !T || P,
-    rootMargin: Z
-  }), fe = (e, t) => {
+  }), i = a ?? Je, P = !a && G === "infinite", D = K && !a, Qe = fe && !a, y = !!i.getState().columnSizingInfo.isResizingColumn;
+  re(() => {
+    if (y)
+      return document.documentElement.setAttribute("data-ui-column-resizing", ""), () => {
+        document.documentElement.removeAttribute("data-ui-column-resizing");
+      };
+  }, [y]);
+  const Ye = fo({
+    onIntersect: () => k == null ? void 0 : k(),
+    disabled: !P || !W || $,
+    rootMargin: pe
+  }), eo = (e, o) => {
     if (e.ctrlKey || e.altKey || e.metaKey) return;
-    const a = Fe(e.key, t.column.getSize(), {
+    const r = Fo(e.key, o.column.getSize(), {
       shiftKey: e.shiftKey,
-      min: t.column.columnDef.minSize ?? L,
-      max: t.column.columnDef.maxSize ?? H
+      min: o.column.columnDef.minSize ?? se,
+      max: o.column.columnDef.maxSize ?? ce
     });
-    a !== void 0 && (e.preventDefault(), r.setColumnSizing((c) => ({ ...c, [t.column.id]: a })));
+    r !== void 0 && (e.preventDefault(), i.setColumnSizing((d) => ({ ...d, [o.column.id]: r })));
+  }, oo = (e, o) => {
+    e.dataTransfer && (e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", o)), O(o);
+  }, to = (e) => {
+    e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move");
+  }, no = (e, o) => {
+    if (e.preventDefault(), !C) return;
+    const r = i.getState().columnOrder, d = r.length ? r : i.getAllLeafColumns().map((m) => m.id);
+    i.setColumnOrder(ko(d, C, o)), O(void 0);
   };
-  ve(() => {
-    i || r.getAllLeafColumns().forEach((e) => {
-      var t;
-      e.pin(((t = e.columnDef.meta) == null ? void 0 : t.pin) ?? !1);
+  re(() => {
+    a || i.getAllLeafColumns().forEach((e) => {
+      var o;
+      e.pin(((o = e.columnDef.meta) == null ? void 0 : o.pin) ?? !1);
     });
-  }, [r, o, i]);
-  const f = r.getRowModel().rows, be = O ? "[&_th:not(:last-child)]:border-e [&_td:not(:last-child)]:border-e [&_th]:border-[var(--ui-table-global-row-border-color)] [&_td]:border-[var(--ui-table-global-row-border-color)]" : void 0, pe = "bg-background";
-  return /* @__PURE__ */ n(
+  }, [i, n, a]);
+  const p = i.getRowModel().rows, z = mo(i), ro = p.length ? Math.min(Ue, p.length - 1) : 0, io = (e) => {
+    J(e);
+  }, lo = (e, o) => {
+    var d;
+    if (e.target !== e.currentTarget || e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+    const r = e.key === "ArrowDown" ? Math.min(o + 1, p.length - 1) : Math.max(o - 1, 0);
+    r !== o && (e.preventDefault(), J(r), (d = Q.current[r]) == null || d.focus());
+  }, ao = me ? "[&_th:not(:last-child)]:border-e [&_td:not(:last-child)]:border-e [&_th]:border-[var(--ui-table-global-row-border-color)] [&_td]:border-[var(--ui-table-global-row-border-color)]" : void 0, te = "bg-background";
+  return /* @__PURE__ */ t(
     "div",
     {
-      className: h(
+      className: R(
         "rounded-md border border-[var(--ui-table-global-row-border-color)]",
-        be
+        ao
       ),
-      children: /* @__PURE__ */ y(
-        we,
+      children: /* @__PURE__ */ v(
+        bo,
         {
-          style: v ? { width: r.getCenterTotalSize() } : void 0,
+          style: D ? { width: i.getCenterTotalSize() } : void 0,
           children: [
-            /* @__PURE__ */ n(Re, { children: r.getHeaderGroups().map((e) => /* @__PURE__ */ n(u, { children: e.headers.map((t) => {
-              var S;
-              const a = t.column.getIsPinned(), c = v && t.column.getCanResize();
-              return /* @__PURE__ */ y(
-                xe,
+            /* @__PURE__ */ t(yo, { children: /* @__PURE__ */ t(po, { children: i.getHeaderGroups().map((e) => /* @__PURE__ */ t(h, { className: "hover:bg-transparent", children: e.headers.map((o) => {
+              var w;
+              const r = o.column.getIsPinned(), d = D && o.column.getCanResize(), m = Qe && !o.isPlaceholder && !r, x = !o.isPlaceholder && o.column.getCanSort(), s = [
+                x && H.sort,
+                m && H.reorder,
+                d && H.resize
+              ].filter(
+                (u) => !!u
+              );
+              if (o.column.id === "__actions")
+                return /* @__PURE__ */ t(
+                  vo,
+                  {
+                    style: le(o, D),
+                    className: te,
+                    children: /* @__PURE__ */ t(
+                      go,
+                      {
+                        table: i,
+                        iconOnly: !0,
+                        triggerAriaLabel: ye
+                      }
+                    )
+                  },
+                  o.id
+                );
+              const I = /* @__PURE__ */ v(
+                ho,
                 {
-                  wrap: (S = t.column.columnDef.meta) == null ? void 0 : S.wrap,
-                  style: Ee(t, v),
-                  className: h(
-                    c && "relative",
-                    a && pe
+                  wrap: (w = o.column.columnDef.meta) == null ? void 0 : w.wrap,
+                  style: le(o, D),
+                  draggable: m && !y || void 0,
+                  onDragStart: m ? (u) => oo(u, o.column.id) : void 0,
+                  onDragOver: m ? to : void 0,
+                  onDrop: m ? (u) => no(u, o.column.id) : void 0,
+                  onDragEnd: m ? () => O(void 0) : void 0,
+                  className: R(
+                    d && "relative",
+                    // Per the design, a sortable header tints the whole
+                    // cell on hover/press, not just the inner sort button.
+                    // Suppressed while any column is resizing, since the
+                    // pointer drags across neighboring `<th>`s and would
+                    // otherwise tint them via native `:hover`.
+                    x && !y && "transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)]",
+                    m && !y && "cursor-(--ui-draggable-cursor) select-none active:cursor-(--ui-draggable-cursor-active)",
+                    m && C === o.column.id && "opacity-50",
+                    r && te
                   ),
                   children: [
-                    t.isPlaceholder ? null : k(
-                      t.column.columnDef.header,
-                      t.getContext()
+                    o.isPlaceholder ? null : ie(
+                      o.column.columnDef.header,
+                      o.getContext()
                     ),
-                    c && /* @__PURE__ */ n(
+                    d && /* @__PURE__ */ t(
                       "div",
                       {
                         role: "separator",
                         "aria-orientation": "vertical",
-                        "aria-label": "Resize column",
-                        "aria-valuenow": t.column.getSize(),
-                        "aria-valuemin": t.column.columnDef.minSize ?? L,
-                        "aria-valuemax": t.column.columnDef.maxSize ?? H,
+                        "aria-label": ve,
+                        "aria-valuenow": o.column.getSize(),
+                        "aria-valuemin": o.column.columnDef.minSize ?? se,
+                        "aria-valuemax": o.column.columnDef.maxSize ?? ce,
                         tabIndex: 0,
-                        onMouseDown: t.getResizeHandler(),
-                        onTouchStart: t.getResizeHandler(),
-                        onKeyDown: (d) => fe(d, t),
-                        className: h(
-                          "absolute end-0 top-0 h-full w-1 cursor-(--ui-resizable-cursor) touch-none select-none bg-[var(--ui-table-global-row-border-color)] opacity-0 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-(--ui-focus-primary)",
-                          t.column.getIsResizing() && "opacity-100"
+                        draggable: !1,
+                        onMouseDown: o.getResizeHandler(),
+                        onTouchStart: o.getResizeHandler(),
+                        onKeyDown: (u) => eo(u, o),
+                        className: R(
+                          "absolute end-0 top-0 h-full w-1 cursor-(--ui-resizable-cursor) touch-none select-none bg-[var(--ui-table-global-row-border-color)] opacity-0 transition-[opacity,background-color] hover:bg-[var(--ui-resizable-border-color-hover)] hover:opacity-100 focus-visible:bg-[var(--ui-resizable-border-color-hover)] focus-visible:opacity-100 focus-visible:outline-[3px] focus-visible:outline-(--ui-focus-primary)",
+                          o.column.getIsResizing() && "bg-[var(--ui-resizable-border-color-active)] opacity-100"
                         )
                       }
                     )
                   ]
+                }
+              );
+              return s.length === 0 ? /* @__PURE__ */ t(L, { children: I }, o.id) : /* @__PURE__ */ v(
+                wo,
+                {
+                  disabled: y || C !== void 0,
+                  children: [
+                    /* @__PURE__ */ t(Ro, { render: I }),
+                    /* @__PURE__ */ t(Co, { className: "flex flex-col gap-1", children: s.map((u) => /* @__PURE__ */ v("span", { children: [
+                      /* @__PURE__ */ v("span", { className: "font-semibold", children: [
+                        u.label,
+                        ":"
+                      ] }),
+                      " ",
+                      u.action
+                    ] }, u.label)) })
+                  ]
                 },
-                t.id
+                o.id
               );
-            }) }, e.id)) }),
-            /* @__PURE__ */ y(ze, { children: [
-              R ? Array.from({ length: j }).map((e, t) => /* @__PURE__ */ n(
-                u,
+            }) }, e.id)) }) }),
+            /* @__PURE__ */ v(So, { children: [
+              A ? Array.from({ length: ge }).map((e, o) => /* @__PURE__ */ t(
+                h,
                 {
                   className: "hover:bg-transparent",
-                  children: r.getVisibleLeafColumns().map((a) => /* @__PURE__ */ n(g, { children: /* @__PURE__ */ n("div", { className: "h-4 w-full animate-pulse rounded bg-[var(--ui-background-surface-secondary)]" }) }, a.id))
+                  children: i.getVisibleLeafColumns().map((r) => /* @__PURE__ */ t(S, { children: /* @__PURE__ */ t("div", { className: "h-4 w-full animate-pulse rounded bg-[var(--ui-background-surface-secondary)]" }) }, r.id))
                 },
-                `skeleton-${t}`
-              )) : f != null && f.length ? f.map((e, t) => {
-                if (_)
-                  return /* @__PURE__ */ n(K, { children: _(e, t) }, e.id);
-                const a = e.getIsSelected(), c = w && ae === e.id, S = a || c ? "bg-[var(--ui-table-data-row-color-active)]" : p && t % 2 === 1 ? "bg-[var(--ui-background-surface-secondary)]" : "bg-background";
-                return /* @__PURE__ */ y(K, { children: [
-                  /* @__PURE__ */ n(
-                    u,
+                `skeleton-${o}`
+              )) : p != null && p.length ? p.map((e, o) => {
+                if (X)
+                  return /* @__PURE__ */ t(L, { children: X(e, o) }, e.id);
+                const r = e.getIsSelected(), d = N && Ve === e.id, m = r || d ? "bg-[var(--ui-table-data-row-color-active)]" : b && o % 2 === 1 ? "bg-[var(--ui-background-surface-secondary)]" : "bg-background group-hover:bg-[var(--ui-table-data-row-color-hover)]", x = !z && qe === e.id;
+                return /* @__PURE__ */ v(L, { children: [
+                  /* @__PURE__ */ t(
+                    h,
                     {
-                      selected: a,
-                      onClick: w ? () => se(e.id) : void 0,
-                      className: h(
-                        w && "cursor-pointer",
-                        p && t % 2 === 1 && !a && !c && "bg-[var(--ui-background-surface-secondary)]",
-                        c && !a && "bg-[var(--ui-table-data-row-color-active)]"
+                      ref: (s) => {
+                        Q.current[o] = s;
+                      },
+                      tabIndex: o === ro ? 0 : -1,
+                      onFocus: () => io(o),
+                      onKeyDown: (s) => lo(s, o),
+                      selected: r,
+                      onClick: N ? () => Be(e.id) : void 0,
+                      className: R(
+                        "group",
+                        N && "cursor-pointer",
+                        b && o % 2 === 1 && !r && !d && "bg-[var(--ui-background-surface-secondary)]",
+                        d && !r && "bg-[var(--ui-table-data-row-color-active)]",
+                        // The action cell's own hover tint (its ellipsis/cog
+                        // trigger) should be the only thing that reacts while
+                        // it's hovered — not the rest of the row underneath it.
+                        x && "hover:bg-transparent"
                       ),
-                      children: e.getVisibleCells().map((d) => {
-                        var V;
-                        const he = d.column.getIsPinned();
-                        return /* @__PURE__ */ n(
-                          g,
+                      children: e.getVisibleCells().map((s) => {
+                        var w;
+                        const I = s.column.getIsPinned();
+                        return s.column.id === "__actions" ? /* @__PURE__ */ t(
+                          Do,
+                          {
+                            style: ae(s, D),
+                            className: m,
+                            bulkSelectionActive: z,
+                            onMouseEnter: z ? void 0 : () => oe(e.id),
+                            onMouseLeave: z ? void 0 : () => oe(
+                              (u) => u === e.id ? void 0 : u
+                            ),
+                            children: q && /* @__PURE__ */ v(zo, { children: [
+                              /* @__PURE__ */ t(
+                                xo,
+                                {
+                                  render: /* @__PURE__ */ t(No, { "aria-label": De }),
+                                  children: /* @__PURE__ */ t(uo, {})
+                                }
+                              ),
+                              /* @__PURE__ */ t(Io, { align: "end", children: q(e) })
+                            ] })
+                          },
+                          s.id
+                        ) : /* @__PURE__ */ t(
+                          S,
                           {
-                            wrap: (V = d.column.columnDef.meta) == null ? void 0 : V.wrap,
-                            style: _e(d, v),
-                            className: h(he && S),
-                            children: k(
-                              d.column.columnDef.cell,
-                              d.getContext()
+                            wrap: (w = s.column.columnDef.meta) == null ? void 0 : w.wrap,
+                            style: ae(s, D),
+                            className: R(I && m),
+                            children: ie(
+                              s.column.columnDef.cell,
+                              s.getContext()
                             )
                           },
-                          d.id
+                          s.id
                         );
                       })
                     }
                   ),
-                  b && e.getIsExpanded() && /* @__PURE__ */ n(u, { className: "hover:bg-transparent", children: /* @__PURE__ */ n(
-                    g,
+                  f && e.getIsExpanded() && /* @__PURE__ */ t(h, { className: "hover:bg-transparent", children: /* @__PURE__ */ t(
+                    S,
                     {
                       className: "h-auto py-3",
                       colSpan: e.getVisibleCells().length,
-                      children: b(e)
+                      children: f(e)
                     }
                   ) })
                 ] }, e.id);
-              }) : F ? /* @__PURE__ */ n(u, { children: /* @__PURE__ */ n(
-                g,
+              }) : Z ? /* @__PURE__ */ t(h, { children: /* @__PURE__ */ t(
+                S,
                 {
-                  colSpan: r.getVisibleLeafColumns().length,
+                  colSpan: i.getVisibleLeafColumns().length,
                   className: "h-24 text-center",
-                  children: F({
-                    hasFilters: r.getState().columnFilters.length > 0
+                  children: Z({
+                    hasFilters: i.getState().columnFilters.length > 0
                   })
                 }
-              ) }) : /* @__PURE__ */ n(u, { children: /* @__PURE__ */ n(
-                g,
+              ) }) : /* @__PURE__ */ t(h, { children: /* @__PURE__ */ t(
+                S,
                 {
-                  colSpan: r.getVisibleLeafColumns().length,
+                  colSpan: i.getVisibleLeafColumns().length,
                   className: "h-24 text-center text-[var(--ui-table-data-value-color-disabled)]",
-                  children: "No results."
+                  children: he
                 }
               ) }),
-              D && !R && f.length > 0 && T && /* @__PURE__ */ n(
-                u,
+              P && !A && p.length > 0 && W && /* @__PURE__ */ t(
+                h,
                 {
-                  ref: ge,
+                  ref: Ye,
                   "aria-hidden": !0,
                   className: "hover:bg-transparent",
-                  children: /* @__PURE__ */ n(
-                    g,
+                  children: /* @__PURE__ */ t(
+                    S,
                     {
-                      colSpan: r.getVisibleLeafColumns().length,
+                      colSpan: i.getVisibleLeafColumns().length,
                       className: "h-1 p-0"
                     }
                   )
                 }
               ),
-              D && !R && f.length > 0 && P && /* @__PURE__ */ n(u, { className: "hover:bg-transparent", children: /* @__PURE__ */ n(g, { colSpan: r.getVisibleLeafColumns().length, children: /* @__PURE__ */ n(
+              P && !A && p.length > 0 && $ && /* @__PURE__ */ t(h, { className: "hover:bg-transparent", children: /* @__PURE__ */ t(S, { colSpan: i.getVisibleLeafColumns().length, children: /* @__PURE__ */ t(
                 "div",
                 {
                   role: "status",
                   "aria-live": "polite",
                   className: "h-4 w-full animate-pulse rounded bg-[var(--ui-background-surface-secondary)]",
-                  children: /* @__PURE__ */ n("span", { className: "sr-only", children: "Loading more rows…" })
+                  children: /* @__PURE__ */ t("span", { className: "sr-only", children: "Loading more rows…" })
                 }
               ) }) })
             ] })
@@ -271,10 +434,11 @@ function He({
   );
 }
 export {
-  He as DataTable,
-  _e as getCellStyle,
-  B as getColumnWidth,
-  U as getPinnedStyle,
-  Fe as getResizeKeyboardStep
+  qo as DataTable,
+  ae as getCellStyle,
+  ue as getColumnWidth,
+  de as getPinnedStyle,
+  Fo as getResizeKeyboardStep,
+  ko as reorderColumn
 };
 //# sourceMappingURL=data-table.js.map