@acronis-platform/ui-react 3.0.0 → 4.1.0

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

@@ -1,446 +1,312 @@
-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" ? 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)"
-    };
+import { cn as e } from "../../../lib/utils.js";
+import { useIntersectionObserver as t } from "../../../hooks/use-intersection-observer.js";
+import { ButtonIcon as n } from "../button-icon/button-icon.js";
+import { Tooltip as r, TooltipContent as i, TooltipProvider as a, TooltipTrigger as o } from "../tooltip/tooltip.js";
+import { getCoreRowModel as s, getExpandedRowModel as c, getFilteredRowModel as l, getPaginationRowModel as u, getSortedRowModel as ee } from "../../../node_modules/.pnpm/@tanstack_table-core@8.21.3/node_modules/@tanstack/table-core/build/lib/index.js";
+import { flexRender as d, useReactTable as te } 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 { DropdownMenu as ne, DropdownMenuContent as re, DropdownMenuTrigger as ie } from "../dropdown-menu/dropdown-menu.js";
+import { Table as ae, TableActionsCell as oe, TableBody as se, TableCell as f, TableHead as ce, TableHeader as le, TableRow as p, TableSettingsCell as ue } from "../table/table.js";
+import { isBulkSelectionActive as de } from "./data-table-selection.js";
+import { DataTableViewOptions as fe } from "./data-table-view-options.js";
+import { Fragment as m, useEffect as pe, useMemo as me, useRef as he, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { EllipsisIcon as ge } from "@acronis-platform/icons-react/stroke-mono";
+//#region src/components/ui/data-table/data-table.tsx
+function v(e) {
+	let t = e.getIsPinned();
+	if (t) return {
+		position: "sticky",
+		left: t === "left" ? e.getStart("left") : void 0,
+		right: t === "right" ? e.getAfter("right") : void 0,
+		zIndex: 1,
+		boxShadow: t === "left" ? "4px 0 4px -4px var(--ui-table-global-row-border-color)" : "-4px 0 4px -4px var(--ui-table-global-row-border-color)"
+	};
 }
-function ue(n, l) {
-  if (n.id === "select")
-    return 48;
-  if (l || n.columnDef.size !== void 0)
-    return n.getSize();
+function y(e, t) {
+	if (e.id === "select") return 48;
+	if (t || e.columnDef.size !== void 0) return e.getSize();
 }
-function le(n, l) {
-  const a = de(n.column), c = ue(n.column, l);
-  if (!(!a && c === void 0))
-    return { ...a, width: c };
+function b(e, t) {
+	let n = v(e.column), r = y(e.column, t);
+	if (!(!n && r === void 0)) return {
+		...n,
+		width: r
+	};
 }
-function ae(n, l) {
-  const a = de(n.column), c = ue(n.column, l);
-  if (!(!a && c === void 0))
-    return { ...a, width: c };
+function x(e, t) {
+	let n = v(e.column), r = y(e.column, t);
+	if (!(!n && r === void 0)) return {
+		...n,
+		width: r
+	};
 }
-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));
+var S = 20, C = 2 ** 53 - 1;
+function w(e, t, { shiftKey: n, min: r, max: i }) {
+	let a = n ? 50 : 10;
+	if (e === "ArrowLeft") return Math.min(i, Math.max(r, t - a));
+	if (e === "ArrowRight") return Math.max(r, Math.min(i, t + a));
 }
-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;
+function T(e, t, n) {
+	let r = e.indexOf(t), i = e.indexOf(n);
+	if (r === -1 || i === -1 || r === i) return e;
+	let a = [...e];
+	return a.splice(i, 0, a.splice(r, 1)[0]), a;
 }
-const Ho = {
-  sort: { label: "Sort column", action: "Click" },
-  reorder: { label: "Reorder column", action: "Drag" },
-  resize: { label: "Resize column", action: "Drag border" }
+var _e = {
+	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: 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 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: $e,
-    enableColumnResizing: K,
-    columnResizeMode: "onChange",
-    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: ze,
-      columnFilters: xe,
-      columnVisibility: Me,
-      rowSelection: _e,
-      expanded: Fe,
-      columnSizing: He,
-      columnOrder: Ke
-    }
-  }), 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 r = Fo(e.key, o.column.getSize(), {
-      shiftKey: e.shiftKey,
-      min: o.column.columnDef.minSize ?? se,
-      max: o.column.columnDef.maxSize ?? ce
-    });
-    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);
-  };
-  re(() => {
-    a || i.getAllLeafColumns().forEach((e) => {
-      var o;
-      e.pin(((o = e.columnDef.meta) == null ? void 0 : o.pin) ?? !1);
-    });
-  }, [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: R(
-        "rounded-md border border-[var(--ui-table-global-row-border-color)]",
-        ao
-      ),
-      children: /* @__PURE__ */ v(
-        bo,
-        {
-          style: D ? { width: i.getCenterTotalSize() } : void 0,
-          children: [
-            /* @__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() && o.column.id !== "select", 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: (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-grab select-none active:cursor-grabbing",
-                    m && C === o.column.id && "opacity-50",
-                    r && te
-                  ),
-                  children: [
-                    o.isPlaceholder ? null : ie(
-                      o.column.columnDef.header,
-                      o.getContext()
-                    ),
-                    d && /* @__PURE__ */ t(
-                      "div",
-                      {
-                        role: "separator",
-                        "aria-orientation": "vertical",
-                        "aria-label": ve,
-                        "aria-valuenow": o.column.getSize(),
-                        "aria-valuemin": o.column.columnDef.minSize ?? se,
-                        "aria-valuemax": o.column.columnDef.maxSize ?? ce,
-                        tabIndex: 0,
-                        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)) })
-                  ]
-                },
-                o.id
-              );
-            }) }, e.id)) }) }),
-            /* @__PURE__ */ v(So, { children: [
-              A ? Array.from({ length: ge }).map((e, o) => /* @__PURE__ */ t(
-                h,
-                {
-                  className: "hover:bg-transparent",
-                  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-${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,
-                    {
-                      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((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: (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()
-                            )
-                          },
-                          s.id
-                        );
-                      })
-                    }
-                  ),
-                  f && e.getIsExpanded() && /* @__PURE__ */ t(h, { className: "hover:bg-transparent", children: /* @__PURE__ */ t(
-                    S,
-                    {
-                      className: "h-auto py-3",
-                      colSpan: e.getVisibleCells().length,
-                      children: f(e)
-                    }
-                  ) })
-                ] }, e.id);
-              }) : Z ? /* @__PURE__ */ t(h, { children: /* @__PURE__ */ t(
-                S,
-                {
-                  colSpan: i.getVisibleLeafColumns().length,
-                  className: "h-24 text-center",
-                  children: Z({
-                    hasFilters: i.getState().columnFilters.length > 0
-                  })
-                }
-              ) }) : /* @__PURE__ */ t(h, { children: /* @__PURE__ */ t(
-                S,
-                {
-                  colSpan: i.getVisibleLeafColumns().length,
-                  className: "h-24 text-center text-[var(--ui-table-data-value-color-disabled)]",
-                  children: he
-                }
-              ) }),
-              P && !A && p.length > 0 && W && /* @__PURE__ */ t(
-                h,
-                {
-                  ref: Ye,
-                  "aria-hidden": !0,
-                  className: "hover:bg-transparent",
-                  children: /* @__PURE__ */ t(
-                    S,
-                    {
-                      colSpan: i.getVisibleLeafColumns().length,
-                      className: "h-1 p-0"
-                    }
-                  )
-                }
-              ),
-              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__ */ t("span", { className: "sr-only", children: "Loading more rows…" })
-                }
-              ) }) })
-            ] })
-          ]
-        }
-      )
-    }
-  );
+function E({ columns: v = [], data: y = [], table: E, getRowCanExpand: ve, renderExpandedRow: D, striped: O = !1, bordered: ye = !1, highlightCurrentRow: k = !1, skeleton: A = !1, skeletonRows: be = 5, enableColumnResizing: j = !1, onColumnSizingChange: xe, enableColumnReordering: Se = !1, columnOrder: M, onColumnOrderChange: Ce, columnVisibility: we, onColumnVisibilityChange: Te, rowSelection: N, onRowSelectionChange: Ee, manualSorting: P = !1, sorting: F, onSortingChange: De, renderRow: I, renderEmptyState: L, paginationMode: R = "page", onLoadMore: Oe, loadMoreRootMargin: ke, hasNextPage: z = !1, resizeColumnLabel: Ae = "Resize column", emptyLabel: je = "No results.", isLoadingMore: B = !1, hideActionColumn: Me = !1, renderRowActions: V, rowActionsLabel: Ne = "Row actions", columnSettingsLabel: Pe, headerHints: Fe }) {
+	let H = {
+		..._e,
+		...Fe
+	}, [Ie, Le] = h([]), Re = F ?? Ie, [ze, Be] = h([]), [Ve, He] = h({}), Ue = we ?? Ve, [We, Ge] = h({}), Ke = N ?? We, [qe, Je] = h({}), [Ye, Xe] = h({}), [Ze, Qe] = h([]), $e = M ?? Ze, [U, W] = h(), [et, tt] = h(), [nt, G] = h(0), K = he([]), rt = (e) => {
+		Xe(e), xe?.(e);
+	}, it = (e) => {
+		M === void 0 && Qe(e), Ce?.(e);
+	}, at = (e) => {
+		He(e), Te?.(e);
+	}, ot = (e) => {
+		F === void 0 && Le(e), De?.(e);
+	}, st = (e) => {
+		N === void 0 && Ge(e), Ee?.(e);
+	}, ct = !Me && !E, lt = me(() => ct ? [{
+		id: "__actions",
+		size: 48,
+		enableSorting: !1,
+		enableHiding: !1,
+		meta: { pin: "right" },
+		header: () => null,
+		cell: () => null
+	}] : [], [ct]), ut = me(() => [...v, ...lt], [v, lt]), [dt, ft] = h(), pt = te({
+		data: y,
+		columns: ut,
+		enableColumnResizing: j,
+		columnResizeMode: "onChange",
+		getCoreRowModel: s(),
+		getExpandedRowModel: c(),
+		...R === "page" ? { getPaginationRowModel: u() } : {},
+		getRowCanExpand: ve,
+		onExpandedChange: Je,
+		manualSorting: P,
+		onSortingChange: ot,
+		...P ? {} : { getSortedRowModel: ee() },
+		onColumnFiltersChange: Be,
+		getFilteredRowModel: l(),
+		onColumnVisibilityChange: at,
+		onRowSelectionChange: st,
+		onColumnSizingChange: rt,
+		onColumnOrderChange: it,
+		state: {
+			sorting: Re,
+			columnFilters: ze,
+			columnVisibility: Ue,
+			rowSelection: Ke,
+			expanded: qe,
+			columnSizing: Ye,
+			columnOrder: $e
+		}
+	}), q = E ?? pt, J = !E && R === "infinite", Y = j && !E, mt = Se && !E, X = !!q.getState().columnSizingInfo.isResizingColumn;
+	pe(() => {
+		if (X) return document.documentElement.setAttribute("data-ui-column-resizing", ""), () => {
+			document.documentElement.removeAttribute("data-ui-column-resizing");
+		};
+	}, [X]);
+	let ht = t({
+		onIntersect: () => Oe?.(),
+		disabled: !J || !z || B,
+		rootMargin: ke
+	}), gt = (e, t) => {
+		if (e.ctrlKey || e.altKey || e.metaKey) return;
+		let n = w(e.key, t.column.getSize(), {
+			shiftKey: e.shiftKey,
+			min: t.column.columnDef.minSize ?? S,
+			max: t.column.columnDef.maxSize ?? C
+		});
+		n !== void 0 && (e.preventDefault(), q.setColumnSizing((e) => ({
+			...e,
+			[t.column.id]: n
+		})));
+	}, _t = (e, t) => {
+		e.dataTransfer && (e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", t)), W(t);
+	}, vt = (e) => {
+		e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move");
+	}, yt = (e, t) => {
+		if (e.preventDefault(), !U) return;
+		let n = q.getState().columnOrder, r = n.length ? n : q.getAllLeafColumns().map((e) => e.id);
+		q.setColumnOrder(T(r, U, t)), W(void 0);
+	};
+	pe(() => {
+		E || q.getAllLeafColumns().forEach((e) => {
+			e.pin(e.columnDef.meta?.pin ?? !1);
+		});
+	}, [
+		q,
+		v,
+		E
+	]);
+	let Z = q.getRowModel().rows, Q = de(q), bt = Z.length ? Math.min(nt, Z.length - 1) : 0, xt = (e) => {
+		G(e);
+	}, St = (e, t) => {
+		if (e.target !== e.currentTarget || e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+		let n = e.key === "ArrowDown" ? Math.min(t + 1, Z.length - 1) : Math.max(t - 1, 0);
+		n !== t && (e.preventDefault(), G(n), K.current[n]?.focus());
+	}, Ct = ye ? "[&_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, $ = "bg-background";
+	return /* @__PURE__ */ g("div", {
+		className: e("rounded-md border border-[var(--ui-table-global-row-border-color)]", Ct),
+		children: /* @__PURE__ */ _(ae, {
+			style: Y ? { width: q.getCenterTotalSize() } : void 0,
+			children: [/* @__PURE__ */ g(a, { children: /* @__PURE__ */ g(le, { children: q.getHeaderGroups().map((t) => /* @__PURE__ */ g(p, {
+				className: "hover:bg-transparent",
+				children: t.headers.map((t) => {
+					let n = t.column.getIsPinned(), a = Y && t.column.getCanResize() && t.column.id !== "select", s = mt && !t.isPlaceholder && !n, c = !t.isPlaceholder && t.column.getCanSort(), l = [
+						c && H.sort,
+						s && H.reorder,
+						a && H.resize
+					].filter((e) => !!e);
+					if (t.column.id === "__actions") return /* @__PURE__ */ g(ue, {
+						style: b(t, Y),
+						className: $,
+						children: /* @__PURE__ */ g(fe, {
+							table: q,
+							iconOnly: !0,
+							triggerAriaLabel: Pe
+						})
+					}, t.id);
+					let u = /* @__PURE__ */ _(ce, {
+						wrap: t.column.columnDef.meta?.wrap,
+						style: b(t, Y),
+						draggable: s && !X || void 0,
+						onDragStart: s ? (e) => _t(e, t.column.id) : void 0,
+						onDragOver: s ? vt : void 0,
+						onDrop: s ? (e) => yt(e, t.column.id) : void 0,
+						onDragEnd: s ? () => W(void 0) : void 0,
+						className: e(a && "relative", c && !X && "transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)]", s && !X && "cursor-grab select-none active:cursor-grabbing", s && U === t.column.id && "opacity-50", n && $),
+						children: [t.isPlaceholder ? null : d(t.column.columnDef.header, t.getContext()), a && /* @__PURE__ */ g("div", {
+							role: "separator",
+							"aria-orientation": "vertical",
+							"aria-label": Ae,
+							"aria-valuenow": t.column.getSize(),
+							"aria-valuemin": t.column.columnDef.minSize ?? S,
+							"aria-valuemax": t.column.columnDef.maxSize ?? C,
+							tabIndex: 0,
+							draggable: !1,
+							onMouseDown: t.getResizeHandler(),
+							onTouchStart: t.getResizeHandler(),
+							onKeyDown: (e) => gt(e, t),
+							className: e("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)", t.column.getIsResizing() && "bg-[var(--ui-resizable-border-color-active)] opacity-100")
+						})]
+					});
+					return l.length === 0 ? /* @__PURE__ */ g(m, { children: u }, t.id) : /* @__PURE__ */ _(r, {
+						disabled: X || U !== void 0,
+						children: [/* @__PURE__ */ g(o, { render: u }), /* @__PURE__ */ g(i, {
+							className: "flex flex-col gap-1",
+							children: l.map((e) => /* @__PURE__ */ _("span", { children: [
+								/* @__PURE__ */ _("span", {
+									className: "font-semibold",
+									children: [e.label, ":"]
+								}),
+								" ",
+								e.action
+							] }, e.label))
+						})]
+					}, t.id);
+				})
+			}, t.id)) }) }), /* @__PURE__ */ _(se, { children: [
+				A ? Array.from({ length: be }).map((e, t) => /* @__PURE__ */ g(p, {
+					className: "hover:bg-transparent",
+					children: q.getVisibleLeafColumns().map((e) => /* @__PURE__ */ g(f, { children: /* @__PURE__ */ g("div", { className: "h-4 w-full animate-pulse rounded bg-[var(--ui-background-surface-secondary)]" }) }, e.id))
+				}, `skeleton-${t}`)) : Z?.length ? Z.map((t, r) => {
+					if (I) return /* @__PURE__ */ g(m, { children: I(t, r) }, t.id);
+					let i = t.getIsSelected(), a = k && et === t.id, o = i || a ? "bg-[var(--ui-table-data-row-color-active)]" : O && r % 2 == 1 ? "bg-[var(--ui-background-surface-secondary)]" : "bg-background group-hover:bg-[var(--ui-table-data-row-color-hover)]", s = !Q && dt === t.id;
+					return /* @__PURE__ */ _(m, { children: [/* @__PURE__ */ g(p, {
+						ref: (e) => {
+							K.current[r] = e;
+						},
+						tabIndex: r === bt ? 0 : -1,
+						onFocus: () => xt(r),
+						onKeyDown: (e) => St(e, r),
+						selected: i,
+						onClick: k ? () => tt(t.id) : void 0,
+						className: e("group", k && "cursor-pointer", O && r % 2 == 1 && !i && !a && "bg-[var(--ui-background-surface-secondary)]", a && !i && "bg-[var(--ui-table-data-row-color-active)]", s && "hover:bg-transparent"),
+						children: t.getVisibleCells().map((r) => {
+							let i = r.column.getIsPinned();
+							return r.column.id === "__actions" ? /* @__PURE__ */ g(oe, {
+								style: x(r, Y),
+								className: o,
+								bulkSelectionActive: Q,
+								onMouseEnter: Q ? void 0 : () => ft(t.id),
+								onMouseLeave: Q ? void 0 : () => ft((e) => e === t.id ? void 0 : e),
+								children: V && /* @__PURE__ */ _(ne, { children: [/* @__PURE__ */ g(ie, {
+									render: /* @__PURE__ */ g(n, { "aria-label": Ne }),
+									children: /* @__PURE__ */ g(ge, {})
+								}), /* @__PURE__ */ g(re, {
+									align: "end",
+									children: V(t)
+								})] })
+							}, r.id) : /* @__PURE__ */ g(f, {
+								wrap: r.column.columnDef.meta?.wrap,
+								style: x(r, Y),
+								className: e(i && o),
+								children: d(r.column.columnDef.cell, r.getContext())
+							}, r.id);
+						})
+					}), D && t.getIsExpanded() && /* @__PURE__ */ g(p, {
+						className: "hover:bg-transparent",
+						children: /* @__PURE__ */ g(f, {
+							className: "h-auto py-3",
+							colSpan: t.getVisibleCells().length,
+							children: D(t)
+						})
+					})] }, t.id);
+				}) : L ? /* @__PURE__ */ g(p, { children: /* @__PURE__ */ g(f, {
+					colSpan: q.getVisibleLeafColumns().length,
+					className: "h-24 text-center",
+					children: L({ hasFilters: q.getState().columnFilters.length > 0 })
+				}) }) : /* @__PURE__ */ g(p, { children: /* @__PURE__ */ g(f, {
+					colSpan: q.getVisibleLeafColumns().length,
+					className: "h-24 text-center text-[var(--ui-table-data-value-color-disabled)]",
+					children: je
+				}) }),
+				J && !A && Z.length > 0 && z && /* @__PURE__ */ g(p, {
+					ref: ht,
+					"aria-hidden": !0,
+					className: "hover:bg-transparent",
+					children: /* @__PURE__ */ g(f, {
+						colSpan: q.getVisibleLeafColumns().length,
+						className: "h-1 p-0"
+					})
+				}),
+				J && !A && Z.length > 0 && B && /* @__PURE__ */ g(p, {
+					className: "hover:bg-transparent",
+					children: /* @__PURE__ */ g(f, {
+						colSpan: q.getVisibleLeafColumns().length,
+						children: /* @__PURE__ */ g("div", {
+							role: "status",
+							"aria-live": "polite",
+							className: "h-4 w-full animate-pulse rounded bg-[var(--ui-background-surface-secondary)]",
+							children: /* @__PURE__ */ g("span", {
+								className: "sr-only",
+								children: "Loading more rows…"
+							})
+						})
+					})
+				})
+			] })]
+		})
+	});
 }
-export {
-  qo as DataTable,
-  ae as getCellStyle,
-  ue as getColumnWidth,
-  de as getPinnedStyle,
-  Fo as getResizeKeyboardStep,
-  ko as reorderColumn
-};
-//# sourceMappingURL=data-table.js.map
+//#endregion
+export { E as DataTable, x as getCellStyle, y as getColumnWidth, v as getPinnedStyle, w as getResizeKeyboardStep, T as reorderColumn };
+
+//# sourceMappingURL=data-table.js.map