@acronis-platform/ui-react 5.3.0 → 5.4.0

package/dist/components/ui/data-table/data-table-bulk-actions-bar.js

@@ -5,7 +5,7 @@ import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 function a({ table: a, children: o, selectedLabel: s = (e) => `${e} item${e === 1 ? "" : "s"} selected:`, clearLabel: c = "Deselect", loadedLabel: l }) {
 	let u = a.getSelectedRowModel().rows.length, d = t(a);
 	return /* @__PURE__ */ i("div", {
-		className: "flex items-center gap-4",
+		className: "flex items-center gap-4 px-[var(--ui-table-global-cell-padding-x)]",
 		children: [/* @__PURE__ */ r("fieldset", {
 			disabled: !d,
 			className: "m-0 flex min-w-0 items-center gap-4 border-0 p-0",

package/dist/components/ui/data-table/data-table-bulk-actions-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-bulk-actions-bar.js","names":[],"sources":["../../../../src/components/ui/data-table/data-table-bulk-actions-bar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { Table } from '@tanstack/react-table';\n\nimport { Button } from '../button';\nimport { isBulkSelectionActive } from './data-table-selection';\n\ninterface DataTableBulkActionsBarProps<TData> {\n  table: Table<TData>;\n  /**\n   * Bulk actions offered for the current selection — rendered leading, ahead\n   * of the trailing summary/Deselect control. Wrapped in a native `<fieldset\n   * disabled>` while nothing is selected, so every nested control (a `Button`\n   * renders a plain `<button>`) picks up the disabled state and styling for\n   * free — no per-action wiring needed. Each action reads the selection off\n   * the same `table` instance (`table.getSelectedRowModel().rows`).\n   */\n  children?: ReactNode;\n  /** Builds the trailing selection summary from the selected-row count. */\n  selectedLabel?: (count: number) => string;\n  /** Label of the trailing control that clears the selection. */\n  clearLabel?: string;\n  /**\n   * Trailing summary shown in place of the selection summary while nothing is\n   * selected — e.g. `\"25 of 1250 items loaded\"`. Omit to render nothing in\n   * that state.\n   */\n  loadedLabel?: ReactNode;\n}\n\n// Thin TanStack adapter: reads the selected-row count off\n// `table.getSelectedRowModel()` and routes Deselect back through\n// `table.resetRowSelection()`. It owns no state of its own.\n//\n// Always mounted (unlike a bar that appears/disappears with selection) — it\n// just toggles between two states (Figma 5916-11286 disabled / 5916-11991\n// enabled), on the same `isBulkSelectionActive` threshold that hides the\n// per-row actions column: with nothing selected, the leading actions are\n// disabled and the trailing side shows `loadedLabel`; once at least one row\n// is selected — including exactly one — the actions enable and the trailing\n// side switches to the selection summary + Deselect.\nexport function DataTableBulkActionsBar<TData>({\n  table,\n  children,\n  selectedLabel = (count) => `${count} item${count === 1 ? '' : 's'} selected:`,\n  clearLabel = 'Deselect',\n  loadedLabel,\n}: DataTableBulkActionsBarProps<TData>) {\n  const selectedCount = table.getSelectedRowModel().rows.length;\n  const hasSelection = isBulkSelectionActive(table);\n\n  return (\n    <div className=\"flex items-center gap-4\">\n      <fieldset\n        disabled={!hasSelection}\n        className=\"m-0 flex min-w-0 items-center gap-4 border-0 p-0\"\n      >\n        {children}\n      </fieldset>\n      <div className=\"ms-auto flex items-center gap-2\">\n        {hasSelection ? (\n          <>\n            <span className=\"text-sm\">{selectedLabel(selectedCount)}</span>\n            <Button\n              variant=\"ghost\"\n              className=\"h-8\"\n              onClick={() => table.resetRowSelection()}\n            >\n              {clearLabel}\n            </Button>\n          </>\n        ) : (\n          loadedLabel !== undefined && (\n            <span className=\"text-sm text-muted-foreground\">{loadedLabel}</span>\n          )\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAwCA,SAAgB,EAA+B,EAC7C,UACA,aACA,oBAAiB,MAAU,GAAG,EAAM,OAAO,MAAU,IAAI,KAAK,IAAI,aAClE,gBAAa,YACb,kBACsC;CACtC,IAAM,IAAgB,EAAM,oBAAoB,CAAC,CAAC,KAAK,QACjD,IAAe,EAAsB,CAAK;CAEhD,OACE,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,kBAAC,YAAD;GACE,UAAU,CAAC;GACX,WAAU;GAET;EACO,CAAA,GACV,kBAAC,OAAD;GAAK,WAAU;GACZ,UAAA,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;IAAM,WAAU;IAAW,UAAA,EAAc,CAAa;GAAQ,CAAA,GAC9D,kBAAC,GAAD;IACE,SAAQ;IACR,WAAU;IACV,eAAe,EAAM,kBAAkB;IAEtC,UAAA;GACK,CAAA,CACR,EAAA,CAAA,IAEF,MAAgB,KAAA,KACd,kBAAC,QAAD;IAAM,WAAU;IAAiC,UAAA;GAAkB,CAAA;EAGpE,CAAA,CACF;;AAET"}
+{"version":3,"file":"data-table-bulk-actions-bar.js","names":[],"sources":["../../../../src/components/ui/data-table/data-table-bulk-actions-bar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { Table } from '@tanstack/react-table';\n\nimport { Button } from '../button';\nimport { isBulkSelectionActive } from './data-table-selection';\n\ninterface DataTableBulkActionsBarProps<TData> {\n  table: Table<TData>;\n  /**\n   * Bulk actions offered for the current selection — rendered leading, ahead\n   * of the trailing summary/Deselect control. Wrapped in a native `<fieldset\n   * disabled>` while nothing is selected, so every nested control (a `Button`\n   * renders a plain `<button>`) picks up the disabled state and styling for\n   * free — no per-action wiring needed. Each action reads the selection off\n   * the same `table` instance (`table.getSelectedRowModel().rows`).\n   */\n  children?: ReactNode;\n  /** Builds the trailing selection summary from the selected-row count. */\n  selectedLabel?: (count: number) => string;\n  /** Label of the trailing control that clears the selection. */\n  clearLabel?: string;\n  /**\n   * Trailing summary shown in place of the selection summary while nothing is\n   * selected — e.g. `\"25 of 1250 items loaded\"`. Omit to render nothing in\n   * that state.\n   */\n  loadedLabel?: ReactNode;\n}\n\n// Thin TanStack adapter: reads the selected-row count off\n// `table.getSelectedRowModel()` and routes Deselect back through\n// `table.resetRowSelection()`. It owns no state of its own.\n//\n// Always mounted (unlike a bar that appears/disappears with selection) — it\n// just toggles between two states (Figma 5916-11286 disabled / 5916-11991\n// enabled), on the same `isBulkSelectionActive` threshold that hides the\n// per-row actions column: with nothing selected, the leading actions are\n// disabled and the trailing side shows `loadedLabel`; once at least one row\n// is selected — including exactly one — the actions enable and the trailing\n// side switches to the selection summary + Deselect.\nexport function DataTableBulkActionsBar<TData>({\n  table,\n  children,\n  selectedLabel = (count) => `${count} item${count === 1 ? '' : 's'} selected:`,\n  clearLabel = 'Deselect',\n  loadedLabel,\n}: DataTableBulkActionsBarProps<TData>) {\n  const selectedCount = table.getSelectedRowModel().rows.length;\n  const hasSelection = isBulkSelectionActive(table);\n\n  return (\n    <div className=\"flex items-center gap-4 px-[var(--ui-table-global-cell-padding-x)]\">\n      <fieldset\n        disabled={!hasSelection}\n        className=\"m-0 flex min-w-0 items-center gap-4 border-0 p-0\"\n      >\n        {children}\n      </fieldset>\n      <div className=\"ms-auto flex items-center gap-2\">\n        {hasSelection ? (\n          <>\n            <span className=\"text-sm\">{selectedLabel(selectedCount)}</span>\n            <Button\n              variant=\"ghost\"\n              className=\"h-8\"\n              onClick={() => table.resetRowSelection()}\n            >\n              {clearLabel}\n            </Button>\n          </>\n        ) : (\n          loadedLabel !== undefined && (\n            <span className=\"text-sm text-muted-foreground\">{loadedLabel}</span>\n          )\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAwCA,SAAgB,EAA+B,EAC7C,UACA,aACA,oBAAiB,MAAU,GAAG,EAAM,OAAO,MAAU,IAAI,KAAK,IAAI,aAClE,gBAAa,YACb,kBACsC;CACtC,IAAM,IAAgB,EAAM,oBAAoB,CAAC,CAAC,KAAK,QACjD,IAAe,EAAsB,CAAK;CAEhD,OACE,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,kBAAC,YAAD;GACE,UAAU,CAAC;GACX,WAAU;GAET;EACO,CAAA,GACV,kBAAC,OAAD;GAAK,WAAU;GACZ,UAAA,IACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;IAAM,WAAU;IAAW,UAAA,EAAc,CAAa;GAAQ,CAAA,GAC9D,kBAAC,GAAD;IACE,SAAQ;IACR,WAAU;IACV,eAAe,EAAM,kBAAkB;IAEtC,UAAA;GACK,CAAA,CACR,EAAA,CAAA,IAEF,MAAgB,KAAA,KACd,kBAAC,QAAD;IAAM,WAAU;IAAiC,UAAA;GAAkB,CAAA;EAGpE,CAAA,CACF;;AAET"}

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

@@ -4,8 +4,9 @@ import { jsx as t } from "react/jsx-runtime";
 function n({ table: n, ...r }) {
 	let i = n.getAllColumns().filter((e) => e.accessorFn !== void 0 && e.getCanHide()).map((e) => ({
 		id: e.id,
-		label: e.id,
-		hidden: !e.getIsVisible()
+		label: e.columnDef.meta?.label ?? (typeof e.columnDef.header == "string" ? e.columnDef.header : e.id),
+		hidden: !e.getIsVisible(),
+		category: e.columnDef.meta?.category
 	}));
 	return /* @__PURE__ */ t(e, {
 		columns: i,

package/dist/components/ui/data-table/data-table-view-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-view-options.js","names":[],"sources":["../../../../src/components/ui/data-table/data-table-view-options.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\n\nimport { TableViewOptions, type TableViewOptionsProps } from '../table';\n\ninterface DataTableViewOptionsProps<TData>\n  extends Pick<\n    TableViewOptionsProps,\n    'triggerLabel' | 'iconOnly' | 'triggerAriaLabel'\n  > {\n  table: Table<TData>;\n}\n\n// Thin TanStack adapter over the primitive-only `TableViewOptions`: maps\n// `table.getAllColumns()` onto the plain `{ id, label, hidden }[]` shape and\n// routes `onToggle` back through `column.toggleVisibility()`.\nexport function DataTableViewOptions<TData>({\n  table,\n  ...triggerProps\n}: DataTableViewOptionsProps<TData>) {\n  const columns = table\n    .getAllColumns()\n    .filter(\n      (column) =>\n        typeof column.accessorFn !== 'undefined' && column.getCanHide()\n    )\n    .map((column) => ({\n      id: column.id,\n      label: column.id,\n      hidden: !column.getIsVisible(),\n    }));\n\n  return (\n    <TableViewOptions\n      columns={columns}\n      onToggle={(id) => {\n        const column = table.getColumn(id);\n        column?.toggleVisibility(!column.getIsVisible());\n      }}\n      {...triggerProps}\n    />\n  );\n}\n"],"mappings":";;;AAeA,SAAgB,EAA4B,EAC1C,UACA,GAAG,KACgC;CACnC,IAAM,IAAU,EACb,cAAc,CAAC,CACf,QACE,MACQ,EAAO,eAAe,UAAe,EAAO,WAAW,CAClE,CAAC,CACA,KAAK,OAAY;EAChB,IAAI,EAAO;EACX,OAAO,EAAO;EACd,QAAQ,CAAC,EAAO,aAAa;CAC/B,EAAE;CAEJ,OACE,kBAAC,GAAD;EACW;EACT,WAAW,MAAO;GAChB,IAAM,IAAS,EAAM,UAAU,CAAE;GACjC,GAAQ,iBAAiB,CAAC,EAAO,aAAa,CAAC;EACjD;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"data-table-view-options.js","names":[],"sources":["../../../../src/components/ui/data-table/data-table-view-options.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\n\nimport { TableViewOptions, type TableViewOptionsProps } from '../table';\n\ninterface DataTableViewOptionsProps<TData> extends Pick<\n  TableViewOptionsProps,\n  | 'triggerLabel'\n  | 'iconOnly'\n  | 'triggerAriaLabel'\n  | 'searchPlaceholder'\n  | 'showAllLabel'\n  | 'noResultsLabel'\n> {\n  table: Table<TData>;\n}\n\n// Thin TanStack adapter over the primitive-only `TableViewOptions`: maps\n// `table.getAllColumns()` onto the plain `{ id, label, hidden }[]` shape and\n// routes `onToggle` back through `column.toggleVisibility()`.\nexport function DataTableViewOptions<TData>({\n  table,\n  ...triggerProps\n}: DataTableViewOptionsProps<TData>) {\n  const columns = table\n    .getAllColumns()\n    .filter(\n      (column) =>\n        typeof column.accessorFn !== 'undefined' && column.getCanHide()\n    )\n    .map((column) => ({\n      id: column.id,\n      label:\n        column.columnDef.meta?.label ??\n        (typeof column.columnDef.header === 'string'\n          ? column.columnDef.header\n          : column.id),\n      hidden: !column.getIsVisible(),\n      category: column.columnDef.meta?.category,\n    }));\n\n  return (\n    <TableViewOptions\n      columns={columns}\n      onToggle={(id) => {\n        const column = table.getColumn(id);\n        column?.toggleVisibility(!column.getIsVisible());\n      }}\n      {...triggerProps}\n    />\n  );\n}\n"],"mappings":";;;AAmBA,SAAgB,EAA4B,EAC1C,UACA,GAAG,KACgC;CACnC,IAAM,IAAU,EACb,cAAc,CAAC,CACf,QACE,MACQ,EAAO,eAAe,UAAe,EAAO,WAAW,CAClE,CAAC,CACA,KAAK,OAAY;EAChB,IAAI,EAAO;EACX,OACE,EAAO,UAAU,MAAM,UACtB,OAAO,EAAO,UAAU,UAAW,WAChC,EAAO,UAAU,SACjB,EAAO;EACb,QAAQ,CAAC,EAAO,aAAa;EAC7B,UAAU,EAAO,UAAU,MAAM;CACnC,EAAE;CAEJ,OACE,kBAAC,GAAD;EACW;EACT,WAAW,MAAO;GAChB,IAAM,IAAS,EAAM,UAAU,CAAE;GACjC,GAAQ,iBAAiB,CAAC,EAAO,aAAa,CAAC;EACjD;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -8,11 +8,11 @@ import { DropdownMenu as ne, DropdownMenuContent as re, DropdownMenuTrigger as i
 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";
+import { Fragment as m, useEffect as pe, useMemo as h, useRef as me, useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { EllipsisIcon as he } from "@acronis-platform/icons-react/stroke-mono";
 //#region src/components/ui/data-table/data-table.tsx
-function v(e) {
+function y(e) {
 	let t = e.getIsPinned();
 	if (t) return {
 		position: "sticky",
@@ -22,19 +22,19 @@ function v(e) {
 		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 y(e, t) {
+function b(e, t) {
 	if (e.id === "select") return 48;
 	if (t || e.columnDef.size !== void 0) return e.getSize();
 }
-function b(e, t) {
-	let n = v(e.column), r = y(e.column, t);
+function ge(e, t) {
+	let n = y(e.column), r = b(e.column, t);
 	if (!(!n && r === void 0)) return {
 		...n,
 		width: r
 	};
 }
 function x(e, t) {
-	let n = v(e.column), r = y(e.column, t);
+	let n = y(e.column), r = b(e.column, t);
 	if (!(!n && r === void 0)) return {
 		...n,
 		width: r
@@ -66,21 +66,21 @@ var _e = {
 		action: "Drag border"
 	}
 };
-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 = {
+function E({ columns: y = [], data: b = [], table: E, getRowId: ve, getRowCanExpand: ye, renderExpandedRow: D, striped: be = !1, bordered: xe = !1, highlightCurrentRow: O = !1, skeleton: k = !1, skeletonRows: Se = 5, enableColumnResizing: Ce = !1, onColumnSizingChange: we, enableColumnReordering: Te = !1, columnOrder: Ee, onColumnOrderChange: De, columnVisibility: Oe, onColumnVisibilityChange: ke, rowSelection: A, onRowSelectionChange: Ae, manualSorting: j = !1, sorting: M, onSortingChange: je, renderRow: N, renderEmptyState: P, paginationMode: F = "page", onLoadMore: Me, loadMoreRootMargin: Ne, hasNextPage: I = !1, resizeColumnLabel: Pe = "Resize column", emptyLabel: Fe = "No results.", isLoadingMore: L = !1, hideActionColumn: Ie = !1, renderRowActions: R, rowActionsLabel: Le = "Row actions", columnSettingsLabel: Re, columnSearchPlaceholder: ze, showAllColumnsLabel: Be, noColumnsFoundLabel: Ve, headerHints: He }) {
+	let z = {
 		..._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 ? [{
+		...He
+	}, [Ue, We] = g([]), Ge = M ?? Ue, [Ke, qe] = g([]), [Je, Ye] = g({}), Xe = Oe ?? Je, [Ze, Qe] = g({}), $e = A ?? Ze, [et, tt] = g({}), [nt, rt] = g({}), [it, at] = g([]), ot = Ee ?? it, [B, V] = g(), [st, ct] = g(), [lt, H] = g(0), U = me([]), ut = (e) => {
+		rt(e), we?.(e);
+	}, dt = (e) => {
+		Ee === void 0 && at(e), De?.(e);
+	}, ft = (e) => {
+		Ye(e), ke?.(e);
+	}, pt = (e) => {
+		M === void 0 && We(e), je?.(e);
+	}, mt = (e) => {
+		A === void 0 && Qe(e), Ae?.(e);
+	}, W = !Ie && !E, G = h(() => W ? [{
 		id: "__actions",
 		size: 48,
 		enableSorting: !1,
@@ -88,114 +88,119 @@ function E({ columns: v = [], data: y = [], table: E, getRowCanExpand: ve, rende
 		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,
+	}] : [], [W]), K = h(() => [...y, ...G], [y, G]), [ht, q] = g(), gt = te({
+		data: b,
+		columns: K,
+		getRowId: ve,
+		enableColumnResizing: Ce,
 		columnResizeMode: "onChange",
 		getCoreRowModel: s(),
 		getExpandedRowModel: c(),
-		...R === "page" ? { getPaginationRowModel: u() } : {},
-		getRowCanExpand: ve,
-		onExpandedChange: Je,
-		manualSorting: P,
-		onSortingChange: ot,
-		...P ? {} : { getSortedRowModel: ee() },
-		onColumnFiltersChange: Be,
+		...F === "page" ? { getPaginationRowModel: u() } : {},
+		getRowCanExpand: ye,
+		onExpandedChange: tt,
+		manualSorting: j,
+		onSortingChange: pt,
+		...j ? {} : { getSortedRowModel: ee() },
+		onColumnFiltersChange: qe,
 		getFilteredRowModel: l(),
-		onColumnVisibilityChange: at,
-		onRowSelectionChange: st,
-		onColumnSizingChange: rt,
-		onColumnOrderChange: it,
+		onColumnVisibilityChange: ft,
+		onRowSelectionChange: mt,
+		onColumnSizingChange: ut,
+		onColumnOrderChange: dt,
+		initialState: W ? { columnPinning: { right: ["__actions"] } } : void 0,
 		state: {
-			sorting: Re,
-			columnFilters: ze,
-			columnVisibility: Ue,
-			rowSelection: Ke,
-			expanded: qe,
-			columnSizing: Ye,
-			columnOrder: $e
+			sorting: Ge,
+			columnFilters: Ke,
+			columnVisibility: Xe,
+			rowSelection: $e,
+			expanded: et,
+			columnSizing: nt,
+			columnOrder: ot
 		}
-	}), q = E ?? pt, J = !E && R === "infinite", Y = j && !E, mt = Se && !E, X = !!q.getState().columnSizingInfo.isResizingColumn;
+	}), J = E ?? gt, Y = !E && F === "infinite", X = Ce && !E, _t = Te && !E, Z = !!J.getState().columnSizingInfo.isResizingColumn;
 	pe(() => {
-		if (X) return document.documentElement.setAttribute("data-ui-column-resizing", ""), () => {
+		if (Z) 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) => {
+	}, [Z]);
+	let vt = t({
+		onIntersect: () => Me?.(),
+		disabled: !Y || !I || L,
+		rootMargin: Ne
+	}), yt = (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) => ({
+		n !== void 0 && (e.preventDefault(), J.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) => {
+	}, bt = (e, t) => {
+		e.dataTransfer && (e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", t)), V(t);
+	}, xt = (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);
+	}, St = (e, t) => {
+		if (e.preventDefault(), !B) return;
+		let n = J.getState().columnOrder, r = n.length ? n : J.getAllLeafColumns().map((e) => e.id);
+		J.setColumnOrder(T(r, B, t)), V(void 0);
 	};
 	pe(() => {
-		E || q.getAllLeafColumns().forEach((e) => {
+		E || J.getAllLeafColumns().forEach((e) => {
 			e.pin(e.columnDef.meta?.pin ?? !1);
 		});
 	}, [
-		q,
-		v,
+		J,
+		K,
 		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) => {
+	let Q = J.getRowModel().rows, $ = de(J), Ct = Q.length ? Math.min(lt, Q.length - 1) : 0, wt = (e) => {
+		H(e);
+	}, Tt = (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, {
+		let n = e.key === "ArrowDown" ? Math.min(t + 1, Q.length - 1) : Math.max(t - 1, 0);
+		n !== t && (e.preventDefault(), H(n), U.current[n]?.focus());
+	}, Et = xe ? "[&_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, Dt = "bg-background";
+	return /* @__PURE__ */ _("div", {
+		className: e("rounded-md border border-[var(--ui-table-global-row-border-color)]", Et),
+		children: /* @__PURE__ */ v(ae, {
+			style: X ? { width: J.getCenterTotalSize() } : void 0,
+			children: [/* @__PURE__ */ _(a, { children: /* @__PURE__ */ _(le, { children: J.getHeaderGroups().map((t) => /* @__PURE__ */ _(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
+					let n = t.column.getIsPinned(), a = X && t.column.getCanResize() && t.column.id !== "select", s = _t && !t.isPlaceholder && !n, c = !t.isPlaceholder && t.column.getCanSort(), l = [
+						c && z.sort,
+						s && z.reorder,
+						a && z.resize
 					].filter((e) => !!e);
-					if (t.column.id === "__actions") return /* @__PURE__ */ g(ue, {
-						style: b(t, Y),
-						className: $,
-						children: /* @__PURE__ */ g(fe, {
-							table: q,
+					if (t.column.id === "__actions") return /* @__PURE__ */ _(ue, {
+						style: ge(t, X),
+						className: Dt,
+						children: /* @__PURE__ */ _(fe, {
+							table: J,
 							iconOnly: !0,
-							triggerAriaLabel: Pe
+							triggerAriaLabel: Re,
+							searchPlaceholder: ze,
+							showAllLabel: Be,
+							noResultsLabel: Ve
 						})
 					}, t.id);
-					let u = /* @__PURE__ */ _(ce, {
+					let u = /* @__PURE__ */ v(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", {
+						style: ge(t, X),
+						draggable: s && !Z || void 0,
+						onDragStart: s ? (e) => bt(e, t.column.id) : void 0,
+						onDragOver: s ? xt : void 0,
+						onDrop: s ? (e) => St(e, t.column.id) : void 0,
+						onDragEnd: s ? () => V(void 0) : void 0,
+						className: e(a && "relative", c && !Z && "transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] active:bg-[var(--ui-table-header-cell-color-active)]", s && !Z && "cursor-grab select-none active:cursor-grabbing", s && B === t.column.id && "opacity-50", n && Dt),
+						children: [t.isPlaceholder ? null : d(t.column.columnDef.header, t.getContext()), a && /* @__PURE__ */ _("div", {
 							role: "separator",
 							"aria-orientation": "vertical",
-							"aria-label": Ae,
+							"aria-label": Pe,
 							"aria-valuenow": t.column.getSize(),
 							"aria-valuemin": t.column.columnDef.minSize ?? S,
 							"aria-valuemax": t.column.columnDef.maxSize ?? C,
@@ -203,16 +208,16 @@ function E({ columns: v = [], data: y = [], table: E, getRowCanExpand: ve, rende
 							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")
+							onKeyDown: (e) => yt(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-none focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-[var(--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, {
+					return l.length === 0 ? /* @__PURE__ */ _(m, { children: u }, t.id) : /* @__PURE__ */ v(r, {
+						disabled: Z || B !== void 0,
+						children: [/* @__PURE__ */ _(o, { render: u }), /* @__PURE__ */ _(i, {
 							className: "flex flex-col gap-1",
-							children: l.map((e) => /* @__PURE__ */ _("span", { children: [
-								/* @__PURE__ */ _("span", {
+							children: l.map((e) => /* @__PURE__ */ v("span", { children: [
+								/* @__PURE__ */ v("span", {
 									className: "font-semibold",
 									children: [e.label, ":"]
 								}),
@@ -222,80 +227,80 @@ function E({ columns: v = [], data: y = [], table: E, getRowCanExpand: ve, rende
 						})]
 					}, t.id);
 				})
-			}, t.id)) }) }), /* @__PURE__ */ _(se, { children: [
-				A ? Array.from({ length: be }).map((e, t) => /* @__PURE__ */ g(p, {
+			}, t.id)) }) }), /* @__PURE__ */ v(se, { children: [
+				k ? Array.from({ length: Se }).map((e, t) => /* @__PURE__ */ _(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, {
+					children: J.getVisibleLeafColumns().map((e) => /* @__PURE__ */ _(f, { children: /* @__PURE__ */ _("div", { className: "h-4 w-full animate-pulse rounded bg-[var(--ui-background-surface-secondary)]" }) }, e.id))
+				}, `skeleton-${t}`)) : Q?.length ? Q.map((t, r) => {
+					if (N) return /* @__PURE__ */ _(m, { children: N(t, r) }, t.id);
+					let i = t.getIsSelected(), a = O && st === t.id, o = i || a ? "bg-[var(--ui-table-data-row-color-active)]" : be && r % 2 == 1 ? "bg-[var(--ui-background-surface-secondary)]" : "bg-background group-hover:bg-[var(--ui-table-data-row-color-hover)]", s = !$ && ht === t.id;
+					return /* @__PURE__ */ v(m, { children: [/* @__PURE__ */ _(p, {
 						ref: (e) => {
-							K.current[r] = e;
+							U.current[r] = e;
 						},
-						tabIndex: r === bt ? 0 : -1,
-						onFocus: () => xt(r),
-						onKeyDown: (e) => St(e, r),
+						tabIndex: r === Ct ? 0 : -1,
+						onFocus: () => wt(r),
+						onKeyDown: (e) => Tt(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"),
+						onClick: O ? () => ct(t.id) : void 0,
+						className: e("group", O && "cursor-pointer", be && 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),
+							return r.column.id === "__actions" ? /* @__PURE__ */ _(oe, {
+								style: x(r, X),
 								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, {
+								bulkSelectionActive: $,
+								onMouseEnter: $ ? void 0 : () => q(t.id),
+								onMouseLeave: $ ? void 0 : () => q((e) => e === t.id ? void 0 : e),
+								children: R && /* @__PURE__ */ v(ne, { children: [/* @__PURE__ */ _(ie, {
+									render: /* @__PURE__ */ _(n, { "aria-label": Le }),
+									children: /* @__PURE__ */ _(he, {})
+								}), /* @__PURE__ */ _(re, {
 									align: "end",
-									children: V(t)
+									children: R(t)
 								})] })
-							}, r.id) : /* @__PURE__ */ g(f, {
+							}, r.id) : /* @__PURE__ */ _(f, {
 								wrap: r.column.columnDef.meta?.wrap,
-								style: x(r, Y),
+								style: x(r, X),
 								className: e(i && o),
 								children: d(r.column.columnDef.cell, r.getContext())
 							}, r.id);
 						})
-					}), D && t.getIsExpanded() && /* @__PURE__ */ g(p, {
+					}), D && t.getIsExpanded() && /* @__PURE__ */ _(p, {
 						className: "hover:bg-transparent",
-						children: /* @__PURE__ */ g(f, {
+						children: /* @__PURE__ */ _(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,
+				}) : P ? /* @__PURE__ */ _(p, { children: /* @__PURE__ */ _(f, {
+					colSpan: J.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,
+					children: P({ hasFilters: J.getState().columnFilters.length > 0 })
+				}) }) : /* @__PURE__ */ _(p, { children: /* @__PURE__ */ _(f, {
+					colSpan: J.getVisibleLeafColumns().length,
 					className: "h-24 text-center text-[var(--ui-table-data-value-color-disabled)]",
-					children: je
+					children: Fe
 				}) }),
-				J && !A && Z.length > 0 && z && /* @__PURE__ */ g(p, {
-					ref: ht,
+				Y && !k && Q.length > 0 && I && /* @__PURE__ */ _(p, {
+					ref: vt,
 					"aria-hidden": !0,
 					className: "hover:bg-transparent",
-					children: /* @__PURE__ */ g(f, {
-						colSpan: q.getVisibleLeafColumns().length,
+					children: /* @__PURE__ */ _(f, {
+						colSpan: J.getVisibleLeafColumns().length,
 						className: "h-1 p-0"
 					})
 				}),
-				J && !A && Z.length > 0 && B && /* @__PURE__ */ g(p, {
+				Y && !k && Q.length > 0 && L && /* @__PURE__ */ _(p, {
 					className: "hover:bg-transparent",
-					children: /* @__PURE__ */ g(f, {
-						colSpan: q.getVisibleLeafColumns().length,
-						children: /* @__PURE__ */ g("div", {
+					children: /* @__PURE__ */ _(f, {
+						colSpan: J.getVisibleLeafColumns().length,
+						children: /* @__PURE__ */ _("div", {
 							role: "status",
 							"aria-live": "polite",
 							className: "h-4 w-full animate-pulse rounded bg-[var(--ui-background-surface-secondary)]",
-							children: /* @__PURE__ */ g("span", {
+							children: /* @__PURE__ */ _("span", {
 								className: "sr-only",
 								children: "Loading more rows…"
 							})
@@ -307,6 +312,6 @@ function E({ columns: v = [], data: y = [], table: E, getRowCanExpand: ve, rende
 	});
 }
 //#endregion
-export { E as DataTable, x as getCellStyle, y as getColumnWidth, v as getPinnedStyle, w as getResizeKeyboardStep, T as reorderColumn };
+export { E as DataTable, x as getCellStyle, b as getColumnWidth, y as getPinnedStyle, w as getResizeKeyboardStep, T as reorderColumn };
 
 //# sourceMappingURL=data-table.js.map