@payfit/unity-components 3.1.13 → 3.1.15

package/dist/esm/modules/tanstack-table/components/data-table/DataTable.d.ts

@@ -0,0 +1,304 @@
+import { ReactNode, default as React } from 'react';
+import { ReactTable as TableType, Row, RowData, TableFeatures } from '@tanstack/react-table';
+import { TablePaginationProps } from '../../../../core/components/table/parts/TablePagination.js';
+import { TableProps, TableRootProps } from '../../../../core/components/table/Table.js';
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TFeatures, TData extends RowData, TValue> {
+        /**
+         * Marks the cell as a row header. When true, the cell renders as `<th scope="row">` instead of `<td>`.
+         * Use this for the first column that identifies each row (e.g., ID, name). Important for accessibility.
+         * @default false
+         * @example
+         * ```ts
+         * {
+         *   meta: {
+         *     isRowHeader: true
+         *   }
+         * }
+         * ```
+         */
+        isRowHeader?: boolean;
+        /**
+         * CSS classes to apply to table cells (`TableCell`) in this column.
+         * Use this to control cell styling such as width, truncation, or alignment.
+         * @example
+         * ```ts
+         * {
+         *   meta: {
+         *     className: 'uy:w-1/4 uy:truncate'
+         *   }
+         * }
+         * ```
+         */
+        className?: string;
+        /**
+         * Helper text to display as a tooltip icon next to the column header.
+         * Use this to provide additional context or explanations for the column.
+         * @example
+         * ```ts
+         * {
+         *   meta: {
+         *     helperText: 'This column shows the employee ID'
+         *   }
+         * }
+         * ```
+         */
+        helperText?: string;
+        /**
+         * Controls whether the column cells can receive keyboard focus during table navigation.
+         * Set to false for cells containing interactive elements like buttons or checkboxes.
+         * @default true
+         * @example
+         * ```ts
+         * {
+         *   meta: {
+         *     isFocusable: false // For cells with buttons or checkboxes
+         *   }
+         * }
+         * ```
+         */
+        isFocusable?: boolean;
+        /**
+         * CSS classes to apply to the column header (`TableColumnHeader`).
+         * Use this to set explicit widths when using `layout="fixed"`.
+         * @example
+         * ```ts
+         * {
+         *   meta: {
+         *     headerClassName: 'uy:w-[200px]' // Fixed pixel width
+         *     // or
+         *     headerClassName: 'uy:w-1/4' // Percentage width
+         *     // or
+         *     headerClassName: 'uy:w-[20ch]' // Character-based width
+         *   }
+         * }
+         * ```
+         */
+        headerClassName?: string;
+    }
+}
+export interface DataTablePaginationLabels {
+    /** Label for the "rows per page" and pagination label dropdown */
+    itemLabel?: string;
+}
+export interface DataTablePaginationOptions {
+    /**
+     * Available options in the "rows per page" dropdown, see {@link TablePaginationProps['pageSizeOptions']}
+     * @default [
+     *   { value: '10', label: '10' },
+     *   { value: '50', label: '50' },
+     *   { value: '100', label: '100' },
+     *   { value: '200', label: '200' },
+     * ]
+     */
+    pageSizeOptions?: TablePaginationProps['pageSizeOptions'];
+    /**
+     * Custom labels for pagination, see {@link DataTablePaginationLabels}
+     * @default {
+     *   itemLabel: 'unity:component:table:pagination:item',
+     * }
+     */
+    labels?: DataTablePaginationLabels;
+}
+export interface DataTableProps<TFeatures extends TableFeatures, TData extends RowData> extends Omit<TableRootProps, 'children'>, Omit<TableProps, 'children'> {
+    /** The table instance from @tanstack/react-table */
+    table: TableType<TFeatures, TData>;
+    /**
+     * Optional loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Optional error state
+     * @default null
+     */
+    error?: Error | null;
+    /**
+     * Custom empty state when there's no data. Use it to override the default empty state.
+     * @default <TableEmptyStateNoData />
+     */
+    emptyState?: React.ReactNode;
+    /**
+     * Custom loading state to show when `isLoading` is true. Use it to override the default loading state.
+     * @default <TableEmptyStateLoading />
+     */
+    loadingState?: React.ReactNode;
+    /**
+     * Custom error state to show when `error` prop is not null. Use it to override the default error state.
+     * @default <TableEmptyStateError />
+     */
+    errorState?: React.ReactNode;
+    /**
+     * Optional pagination customization options, including page size options and labels.
+     * The pagination footer is rendered automatically when the table includes `rowPaginationFeature`.
+     */
+    pagination?: DataTablePaginationOptions;
+    /**
+     * Callback fired when the current tablepage changes
+     * @param page - The new page number
+     * @param previous - The previous page number
+     * @param direction - The direction of navigation (1 for forward, -1 for backward)
+     */
+    onPageChange?: TablePaginationProps['onPageChange'];
+    /**
+     * A callback function that is triggered when a page is hovered over in the pagination component.
+     *
+     * This function is intended for handling hover events on individual pagination controls or elements.
+     * It is derived from the `onPageHover` property in the `Pagination` component.
+     */
+    onPageHover?: TablePaginationProps['onPageHover'];
+    /**
+     * Callback fired when the number of rows per page changes
+     * @param pageSize - The new number of rows per page
+     */
+    onPageSizeChange?: TablePaginationProps['onPageSizeChange'];
+    /**
+     * Render function for table rows
+     * @param row - The row data of a given row in the table
+     */
+    children: (row: Row<TFeatures, TData>) => React.ReactNode;
+    /**
+     * Optional callback fired when the button is clicked in the error state.
+     * Used to navigate away or retry when data loading fails.
+     * If not provided, the button won't be rendered.
+     */
+    onErrorButtonPress?: () => void;
+    /**
+     * Optional callback fired when the button is clicked in the no data state.
+     * Typically used to help users configure settings when no data is available.
+     * If not provided, the button won't be rendered.
+     */
+    onNoDataButtonPress?: () => void;
+    /**
+     * Optional description text displayed in the no data empty state.
+     * This should explain to users why there is no data and what they can do about it.
+     * If not provided, a default empty state will be shown.
+     */
+    noDataDescription?: ReactNode;
+    /**
+     * Optional callback fired when the button is clicked in the no search results state.
+     * Typically used to reset filters when a search returns no results.
+     * If provided and filters are active with 0 results, TableNoSearchResults will be shown instead of the default empty state.
+     */
+    onNoSearchResultsButtonPress?: () => void;
+}
+/**
+ * A powerful and flexible data table component that integrates Unity's Table with @tanstack/react-table
+ *
+ * The DataTable component provides a standardized way to display tabular data with built-in support for
+ * pagination, sorting, filtering, and row selection. It handles common table patterns like loading states,
+ * empty states, and consistent table heights.
+ *
+ * The component supports two layout modes via the `layout` prop:
+ * - **Auto layout** (default): Columns adapt to content with horizontal scrolling
+ * - **Fixed layout**: Explicit column widths that fit the container. Set widths using `headerClassName` in column meta.
+ * @param props - The props for the `DataTable` component
+ * @param props.table - The table instance from @tanstack/react-table
+ * @param props.minRows - The minimum number of rows to display, affecting the minimum height
+ * @param props.maxRows - The maximum number of rows to display, affecting the maximum height
+ * @param props.layout - Table layout algorithm: 'auto' (default) or 'fixed'. See {@link TableProps['layout']}
+ * @param props.isLoading - Custom loading state to show when isLoading is true
+ * @param props.error - Custom error state
+ * @param props.emptyState - Custom empty state to show when there's no data
+ * @param props.loadingState - Custom loading state to show when `isLoading` is true
+ * @param props.errorState - Custom error state to show when `error` is not null
+ * @param props.pagination - Optional pagination customization, see {@link DataTablePaginationOptions}
+ * @param props.onPageChange - Optional callback for pagination change
+ * @param props.onPageHover - Optional callback for pagination hover
+ * @param props.onPageSizeChange - Optional callback for pagination size change
+ * @param props.enableVirtualization - Enable internal scroll virtualization for large datasets
+ * @param props.estimatedRowHeight - Estimated row height in pixels for the virtualizer
+ * @param props.overscan - Number of extra rows rendered above/below viewport for virtualization
+ * @param props.onErrorButtonPress - Callback for the button in error state
+ * @param props.onNoDataButtonPress - Callback for the button in no data state
+ * @param props.noDataDescription - Description text shown in the no data empty state
+ * @param props.onNoSearchResultsButtonPress - Callback for the button in no search results state
+ * @param props.children - Render function that takes care of rendering the table rows
+ * @see {@link DataTableProps} for all available props
+ * @example
+ * ```tsx
+ * import { DataTableRoot, DataTable, DataTableBulkActions, TableRow, TableCell } from '@payfit/unity-components'
+ * import { createColumnHelper, createPaginatedRowModel, flexRender, stockFeatures, tableFeatures, useTable, type StockFeatures } from '@tanstack/react-table'
+ * import { useState, useMemo } from 'react'
+ *
+ * const features = tableFeatures({
+ *   ...stockFeatures,
+ *   paginatedRowModel: createPaginatedRowModel(),
+ * })
+ *
+ * function EmployeeTable() {
+ *   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 })
+ *   const [rowSelection, setRowSelection] = useState({})
+ *
+ *   const columnHelper = createColumnHelper<StockFeatures, Employee>()
+ *
+ *   // Define columns with optional width control for fixed layout
+ *   const columns = useMemo(() => [
+ *     columnHelper.accessor('name', {
+ *       header: 'Name',
+ *       meta: {
+ *         isRowHeader: true,
+ *         headerClassName: 'uy:w-[200px]' // Set explicit width for fixed layout
+ *       }
+ *     }),
+ *     columnHelper.accessor('position', {
+ *       header: 'Position',
+ *       meta: {
+ *         headerClassName: 'uy:w-1/3' // Use percentage for proportional width
+ *       }
+ *     }),
+ *     columnHelper.accessor('department', {
+ *       header: 'Department'
+ *       // No headerClassName: will share remaining space
+ *     })
+ *   ], [])
+ *
+ *   const table = useTable({
+ *     features,
+ *     data: employees,
+ *     columns,
+ *     getRowId: (row) => row.id,
+ *     state: { pagination, rowSelection },
+ *     onPaginationChange: setPagination,
+ *     onRowSelectionChange: setRowSelection,
+ *     enableRowSelection: true,
+ *     enableMultiRowSelection: true,
+ *   })
+ *
+ *   return (
+ *     <DataTableRoot>
+ *       <DataTable
+ *         table={table}
+ *         minRows={5}
+ *         maxRows={10}
+ *         layout="fixed" // Use fixed layout with explicit column widths
+ *       >
+ *         {row => (
+ *           <TableRow key={row.id} isSelected={row.getIsSelected()}>
+ *             {row.getVisibleCells().map(cell => (
+ *               <TableCell key={cell.id}>
+ *                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
+ *               </TableCell>
+ *             ))}
+ *           </TableRow>
+ *         )}
+ *       </DataTable>
+ *       <DataTableBulkActions table={table} actions={actions} />
+ *     </DataTableRoot>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - For bulk actions, use DataTableBulkActions component alongside DataTable within DataTableRoot
+ * - DataTableBulkActions provides the F6 keyboard shortcut for accessibility
+ * - Configure `rowPaginationFeature` on the Tanstack table instance to render the Unity pagination footer automatically; use the `pagination` prop only to customize it
+ * - **Layout modes**: Use `layout="auto"` (default) for content-driven columns with scrolling, or `layout="fixed"` for predictable widths that fit the container
+ * - **Setting column widths**: Add `headerClassName` to column meta with width classes (e.g., `'uy:w-[200px]'`, `'uy:w-1/3'`)
+ * - **Fixed layout best practices**: Set explicit widths on column headers and use truncation for overflow content
+ * - [API](https://unity-components.payfit.io/?path=/docs/data-datatable--docs) • [Demo](https://unity-components.payfit.io/?path=/docs/data-datatable--docs)
+ */
+declare function DataTable<TFeatures extends TableFeatures, TData extends RowData>({ table, isLoading, error, emptyState, loadingState, errorState, pagination, minRows, maxRows, onPageChange: onPaginationChange, onPageHover: onPaginationPageHover, onPageSizeChange: onPaginationSizeChange, children, enableVirtualization, estimatedRowHeight, overscan, onErrorButtonPress, onNoDataButtonPress, noDataDescription, onNoSearchResultsButtonPress, ...rest }: DataTableProps<TFeatures, TData>): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTable {
+    var displayName: string;
+}
+export { DataTable };

package/dist/esm/modules/tanstack-table/components/data-table/DataTable.js

@@ -0,0 +1,125 @@
+import { CircularIconButton as e } from "../../../../core/components/icon-button/CircularIconButton.js";
+import { Table as t, TableRoot as n } from "../../../../core/components/table/Table.js";
+import { TableBody as r } from "../../../../core/components/table/parts/TableBody.js";
+import { TableColumnHeader as i } from "../../../../core/components/table/parts/TableColumnHeader.js";
+import { TableEmptyStateError as a, TableEmptyStateLoading as o, TableEmptyStateNoData as s, TableNoSearchResults as c } from "../../../../core/components/table/parts/TableEmptyState.js";
+import { TableHeader as l } from "../../../../core/components/table/parts/TableHeader.js";
+import { TablePagination as u } from "../../../../core/components/table/parts/TablePagination.js";
+import { getPaginationTable as d } from "./DataTablePagination.js";
+import { ColumnSortHeader as f, isSortableHeader as p } from "./parts/ColumnSortHeader.js";
+import { useMemo as m, useRef as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { useId as y } from "react-aria/useId";
+import { flexRender as b } from "@tanstack/react-table";
+import { useSelector as x } from "@tanstack/react-store";
+//#region src/modules/tanstack-table/components/data-table/DataTable.tsx
+var S = ({ children: t, columnNameId: n, helperText: r }) => r === void 0 ? /* @__PURE__ */ _(g, { children: t }) : /* @__PURE__ */ v("div", {
+	className: "uy:flex uy:gap-50 uy:items-center",
+	children: [t, /* @__PURE__ */ _(e, {
+		"aria-labelledby": n,
+		icon: "QuestionOutlined",
+		title: r,
+		color: "content.neutral.lowest"
+	})]
+}), C = ({ table: e, tableRef: t, pagination: n, onPageChange: r, onPageHover: i, onPageSizeChange: a }) => {
+	let o = e.atoms.pagination, { pageIndex: s, pageSize: c } = x(m(() => ({
+		get: () => o.get(),
+		subscribe: (e) => o.subscribe((n) => {
+			t.current?.scrollToTop(), e(n);
+		})
+	}), [o, t]));
+	return e.getPageCount() <= 0 ? null : /* @__PURE__ */ _(u, {
+		pageCount: e.getPageCount(),
+		rowCount: e.getRowCount(),
+		currentPage: s + 1,
+		rowsPerPage: c,
+		pageSizeOptions: n.pageSizeOptions,
+		onPageChange: (t, n, i) => {
+			e.setPageIndex(t - 1), r?.(t - 1, n, i);
+		},
+		onPageHover: (e) => {
+			i?.(e);
+		},
+		onPageSizeChange: (t) => {
+			e.setPageSize(t), a?.(t);
+		},
+		itemLabel: n.labels?.itemLabel
+	});
+};
+function w({ table: e, isLoading: u, error: m, emptyState: g, loadingState: x, errorState: w, pagination: T, minRows: E, maxRows: D, onPageChange: O, onPageHover: k, onPageSizeChange: A, children: j, enableVirtualization: M, estimatedRowHeight: N, overscan: P, onErrorButtonPress: F, onNoDataButtonPress: I, noDataDescription: L, onNoSearchResultsButtonPress: R, ...z }) {
+	let B = h(null), V = y(), H = d(e), U = {
+		label: z.label,
+		description: z.description,
+		isHorizontalScrollEnabled: z.isHorizontalScrollEnabled,
+		layout: z.layout
+	}, W = () => {
+		if (u) return x ?? /* @__PURE__ */ _(o, {});
+		if (m) return w ?? /* @__PURE__ */ _(a, { onButtonPress: F });
+	}, G = () => {
+		let t = e.state, n = t.globalFilter !== void 0 && t.globalFilter !== "", r = t.columnFilters !== void 0 && t.columnFilters.length > 0;
+		return n || r;
+	}, K = () => u || m ? W() : e.getRowModel().rows.length === 0 ? G() && R ? /* @__PURE__ */ _(c, { onButtonPress: R }) : g ?? /* @__PURE__ */ _(s, {
+		onButtonPress: I,
+		description: L
+	}) : g;
+	return /* @__PURE__ */ v(n, {
+		minRows: E,
+		maxRows: D,
+		children: [/* @__PURE__ */ v(t, {
+			ref: B,
+			...U,
+			enableVirtualization: M,
+			estimatedRowHeight: N,
+			overscan: P,
+			children: [/* @__PURE__ */ _(l, { children: e.getHeaderGroups().map((t) => {
+				let n = 0;
+				return /* @__PURE__ */ _("tr", { children: t.headers.map((r) => {
+					let a = n;
+					if (n += r.colSpan, r.rowSpan === 0) return null;
+					let o = !r.isPlaceholder || r.rowSpan > 1, s = `${V}-column-name-${r.column.id}`, c = r.column.columnDef.meta, l = p(r);
+					return /* @__PURE__ */ _(i, {
+						colIndex: a,
+						rowIndex: t.depth,
+						colSpan: r.colSpan,
+						rowSpan: r.rowSpan,
+						scope: r.colSpan > 1 ? "colgroup" : "col",
+						isFocusable: c?.isFocusable,
+						className: c?.headerClassName,
+						children: o && e.getRowModel().rows.length > 0 && l ? /* @__PURE__ */ _(f, {
+							header: r,
+							children: /* @__PURE__ */ _(S, {
+								columnNameId: s,
+								helperText: c?.helperText,
+								children: /* @__PURE__ */ _("span", {
+									id: s,
+									children: b(r.column.columnDef.header, r.getContext())
+								})
+							})
+						}) : o ? /* @__PURE__ */ _(S, {
+							columnNameId: s,
+							helperText: c?.helperText,
+							children: /* @__PURE__ */ _("span", {
+								id: s,
+								children: b(r.column.columnDef.header, r.getContext())
+							})
+						}) : null
+					}, r.id);
+				}) }, t.id);
+			}) }), /* @__PURE__ */ _(r, {
+				renderEmptyState: K,
+				renderDataState: W,
+				children: !u && !m && e.getRowModel().rows.map(j)
+			})]
+		}), H !== void 0 && /* @__PURE__ */ _(C, {
+			table: H,
+			tableRef: B,
+			pagination: T ?? {},
+			onPageChange: O,
+			onPageHover: k,
+			onPageSizeChange: A
+		})]
+	});
+}
+w.displayName = "DataTable";
+//#endregion
+export { w as DataTable };

package/dist/esm/modules/tanstack-table/components/data-table/DataTablePagination.js

@@ -0,0 +1,6 @@
+//#region src/modules/tanstack-table/components/data-table/DataTablePagination.ts
+var e = (e) => {
+	if (e.options.features.rowPaginationFeature !== void 0) return e;
+};
+//#endregion
+export { e as getPaginationTable };

package/dist/esm/modules/tanstack-table/components/data-table/parts/ColumnSortHeader.d.ts

@@ -0,0 +1,14 @@
+import { Column_RowSorting, Header, RowData, TableFeatures } from '@tanstack/react-table';
+import { ActionableProps } from '../../../../../core/components/actionable/Actionable.js';
+type SortableHeader<TFeatures extends TableFeatures, TData extends RowData, TValue> = Header<TFeatures, TData, TValue> & {
+    column: Header<TFeatures, TData, TValue>['column'] & Pick<Column_RowSorting<TFeatures, TData>, 'getCanSort' | 'getIsSorted' | 'getToggleSortingHandler'>;
+};
+declare function isSortableHeader<TFeatures extends TableFeatures, TData extends RowData, TValue>(header: Header<TFeatures, TData, TValue>): header is SortableHeader<TFeatures, TData, TValue>;
+export interface ColumnSortHeaderProps<TFeatures extends TableFeatures, TData extends RowData, TValue> extends ActionableProps {
+    header: SortableHeader<TFeatures, TData, TValue>;
+}
+declare function ColumnSortHeader<TFeatures extends TableFeatures, TData extends RowData, TValue>({ children, header, ...props }: ColumnSortHeaderProps<TFeatures, TData, TValue>): import("react/jsx-runtime").JSX.Element;
+declare namespace ColumnSortHeader {
+    var displayName: string;
+}
+export { ColumnSortHeader, isSortableHeader };

package/dist/esm/modules/tanstack-table/components/data-table/parts/ColumnSortHeader.js

@@ -0,0 +1,31 @@
+import { Actionable as e } from "../../../../../core/components/actionable/Actionable.js";
+import { Icon as t } from "../../../../../core/components/icon/Icon.js";
+import "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/modules/tanstack-table/components/data-table/parts/ColumnSortHeader.tsx
+function a(e) {
+	return "getCanSort" in e.column && typeof e.column.getCanSort == "function" && e.column.getCanSort();
+}
+function o({ children: a, header: o, ...s }) {
+	return /* @__PURE__ */ r(e, {
+		...s,
+		className: "uy:flex uy:items-center uy:gap-50",
+		onPress: (e) => {
+			o.column.getToggleSortingHandler()?.(e);
+		},
+		children: ({ isHovered: e }) => {
+			let s = o.column.getIsSorted();
+			return /* @__PURE__ */ i(n, { children: [a, o.column.getCanSort() && (s || e) ? /* @__PURE__ */ r(t, {
+				src: s === "asc" ? "ArrowUpOutlined" : "ArrowDownOutlined",
+				role: "presentation",
+				size: 20
+			}) : /* @__PURE__ */ r("span", {
+				"aria-hidden": "true",
+				className: "uy:size-250 uy:block"
+			})] });
+		}
+	});
+}
+o.displayName = "ColumnSortHeader";
+//#endregion
+export { o as ColumnSortHeader, a as isSortableHeader };

package/dist/esm/modules/tanstack-table/components/data-table/parts/DataTableBulkActionsLegacy.d.ts

@@ -0,0 +1,13 @@
+import { RowData } from '@tanstack/react-table';
+import { LegacyTable as TableType } from '@tanstack/react-table/legacy';
+import { ActionBarActionItem } from '../../../../../core/components/action-bar/ActionBar.js';
+export interface DataTableBulkActionsLegacyProps<TData extends RowData> {
+    table: TableType<TData>;
+    actions: ActionBarActionItem[];
+    renderSelectionText?: (count: number) => string;
+}
+declare function DataTableBulkActionsLegacy<TData extends RowData>({ table, actions, renderSelectionText, }: DataTableBulkActionsLegacyProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTableBulkActionsLegacy {
+    var displayName: string;
+}
+export { DataTableBulkActionsLegacy };

package/dist/esm/modules/tanstack-table/components/data-table/parts/DataTableRoot.d.ts

@@ -0,0 +1,37 @@
+import { PropsWithChildren } from 'react';
+export declare const dataTableRoot: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnTypeLike<unknown, undefined>>;
+export type DataTableRootProps = PropsWithChildren;
+/**
+ * The DataTableRoot component provides positioning and layout context for DataTable components.
+ * It serves as the container for DataTable, DataTableBulkActions, and other related components.
+ * @param {DataTableRootProps} props - The props for the DataTableRoot component
+ * @example
+ * ```tsx
+ * import { DataTableRoot, DataTable, DataTableBulkActions } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <DataTableRoot>
+ *       <DataTable table={table}>
+ *         {row => (
+ *           <TableRow key={row.id} isSelected={row.getIsSelected()}>
+ *             {row.getVisibleCells().map(cell => (
+ *               <TableCell key={cell.id}>
+ *                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
+ *               </TableCell>
+ *             ))}
+ *           </TableRow>
+ *         )}
+ *       </DataTable>
+ *       <DataTableBulkActions table={table} actions={actions} />
+ *     </DataTableRoot>
+ *   )
+ * }
+ * ```
+ * @see {@link DataTableRootProps} for all available props
+ * @see Source code in [Github](https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/core/components/data-table)
+ */
+declare const DataTableRoot: import('react').ForwardRefExoticComponent<{
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { DataTableRoot };

package/dist/esm/modules/tanstack-table/components/data-table/parts/DataTableRoot.js

@@ -0,0 +1,13 @@
+import { forwardRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/modules/tanstack-table/components/data-table/parts/DataTableRoot.tsx
+var r = t({ base: ["uy:relative uy:overflow-hidden"] }), i = e(({ children: e, ...t }, i) => /* @__PURE__ */ n("div", {
+	ref: i,
+	className: r(),
+	...t,
+	children: e
+}));
+i.displayName = "DataTableRoot";
+//#endregion
+export { i as DataTableRoot, r as dataTableRoot };

package/dist/esm/modules/tanstack-table/components/data-table-bulk-actions/DataTableBulkActions.d.ts

@@ -0,0 +1,74 @@
+import { ReactTable as TableType, RowData, TableFeatures } from '@tanstack/react-table';
+import { ActionBarActionItem } from '../../../../core/components/action-bar/ActionBar.js';
+export interface DataTableBulkActionsProps<TFeatures extends TableFeatures, TData extends RowData> {
+    /** The table instance from @tanstack/react-table */
+    table: TableType<TFeatures, TData> & {
+        getIsAllPageRowsSelected: () => boolean;
+        getIsSomePageRowsSelected: () => boolean;
+        getSelectedRowModel: () => {
+            rows: unknown[];
+        };
+        resetRowSelection: () => void;
+    };
+    /** Bulk actions to perform over the table, rendered in the action bar */
+    actions: ActionBarActionItem[];
+    /**
+     * Custom function to render selection count text.
+     * When provided, pluralization is your responsibility.
+     */
+    renderSelectionText?: (count: number) => string;
+}
+/**
+ * The DataTableBulkActions component provides contextual bulk actions when table rows are selected.
+ * It automatically shows/hides based on row selection and provides keyboard accessibility via F6.
+ *
+ * This component wraps the ActionBar and handles the selection UI (selection count + clear button)
+ * via the `prefixContent` prop, while accepting bulk actions to display.
+ * @param {DataTableBulkActionsProps} props - The props for the DataTableBulkActions component
+ * @param props.table - The table instance from `@tanstack/react-table`
+ * @param props.actions - Bulk actions to perform over the table, rendered in the action bar
+ * @param props.renderSelectionText - Custom function to render selection count text
+ * @example
+ * ```tsx
+ * import { DataTableRoot, DataTable, DataTableBulkActions } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   const actions = [
+ *     { id: 'delete', label: 'Delete', meta: { onPress: handleDelete } },
+ *     { id: 'archive', label: 'Archive', meta: { onPress: handleArchive } },
+ *   ]
+ *
+ *   return (
+ *     <DataTableRoot>
+ *       <DataTable table={table}>
+ *         {row => (
+ *           <TableRow key={row.id} isSelected={row.getIsSelected()}>
+ *             {row.getVisibleCells().map(cell => (
+ *               <TableCell key={cell.id}>
+ *                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
+ *               </TableCell>
+ *             ))}
+ *           </TableRow>
+ *         )}
+ *       </DataTable>
+ *       <DataTableBulkActions table={table} actions={actions} />
+ *     </DataTableRoot>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - DataTableBulkActions automatically reserves space when the table includes `rowPaginationFeature`, matching the pagination footer rendered by DataTable
+ * - Use F6 keyboard shortcut to focus the action bar when it's visible and has actions
+ * - The keyboard shortcut provides quick access to bulk actions for users with disabilities
+ * - When triggered, focus moves to the first focusable element in the action bar (typically the first action button)
+ * - Once focused, use Tab to move between actions and Escape to return focus to the previously focused element
+ * - The shortcut only works when rows are selected and the action bar is visible
+ * - The selection count and clear button are rendered automatically via `prefixContent`
+ * @see {@link DataTableBulkActionsProps} for all available props
+ * @see Source code in [Github](https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/core/components/data-table)
+ */
+declare function DataTableBulkActions<TFeatures extends TableFeatures, TData extends RowData>({ table, actions, renderSelectionText, }: DataTableBulkActionsProps<TFeatures, TData>): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTableBulkActions {
+    var displayName: string;
+}
+export { DataTableBulkActions };