@payfit/unity-components 3.1.14 → 3.1.16

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

@@ -1,304 +0,0 @@
-import { ReactNode, default as React } from 'react';
-import { ReactTable as TableType, Row, RowData, TableFeatures } from '@tanstack/react-table';
-import { TablePaginationProps } from '../table/parts/TablePagination.js';
-import { TableProps, TableRootProps } from '../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/components/data-table/DataTable.js

@@ -1,125 +0,0 @@
-import { CircularIconButton as e } from "../icon-button/CircularIconButton.js";
-import { TablePagination as t } from "../table/parts/TablePagination.js";
-import { Table as n, TableRoot as r } from "../table/Table.js";
-import { TableBody as i } from "../table/parts/TableBody.js";
-import { TableColumnHeader as a } from "../table/parts/TableColumnHeader.js";
-import { TableEmptyStateError as o, TableEmptyStateLoading as s, TableEmptyStateNoData as c, TableNoSearchResults as l } from "../table/parts/TableEmptyState.js";
-import { TableHeader as u } from "../table/parts/TableHeader.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/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: n, pagination: r, onPageChange: i, onPageHover: a, onPageSizeChange: o }) => {
-	let s = e.atoms.pagination, { pageIndex: c, pageSize: l } = x(m(() => ({
-		get: () => s.get(),
-		subscribe: (e) => s.subscribe((t) => {
-			n.current?.scrollToTop(), e(t);
-		})
-	}), [s, n]));
-	return e.getPageCount() <= 0 ? null : /* @__PURE__ */ _(t, {
-		pageCount: e.getPageCount(),
-		rowCount: e.getRowCount(),
-		currentPage: c + 1,
-		rowsPerPage: l,
-		pageSizeOptions: r.pageSizeOptions,
-		onPageChange: (t, n, r) => {
-			e.setPageIndex(t - 1), i?.(t - 1, n, r);
-		},
-		onPageHover: (e) => {
-			a?.(e);
-		},
-		onPageSizeChange: (t) => {
-			e.setPageSize(t), o?.(t);
-		},
-		itemLabel: r.labels?.itemLabel
-	});
-};
-function w({ table: e, isLoading: t, 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 (t) return x ?? /* @__PURE__ */ _(s, {});
-		if (m) return w ?? /* @__PURE__ */ _(o, { 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 = () => t || m ? W() : e.getRowModel().rows.length === 0 ? G() && R ? /* @__PURE__ */ _(l, { onButtonPress: R }) : g ?? /* @__PURE__ */ _(c, {
-		onButtonPress: I,
-		description: L
-	}) : g;
-	return /* @__PURE__ */ v(r, {
-		minRows: E,
-		maxRows: D,
-		children: [/* @__PURE__ */ v(n, {
-			ref: B,
-			...U,
-			enableVirtualization: M,
-			estimatedRowHeight: N,
-			overscan: P,
-			children: [/* @__PURE__ */ _(u, { children: e.getHeaderGroups().map((t) => {
-				let n = 0;
-				return /* @__PURE__ */ _("tr", { children: t.headers.map((r) => {
-					let i = 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__ */ _(a, {
-						colIndex: i,
-						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__ */ _(i, {
-				renderEmptyState: K,
-				renderDataState: W,
-				children: !t && !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/components/data-table/DataTablePagination.js

@@ -1,6 +0,0 @@
-//#region src/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/components/data-table/parts/ColumnSortHeader.d.ts

@@ -1,14 +0,0 @@
-import { Column_RowSorting, Header, RowData, TableFeatures } from '@tanstack/react-table';
-import { ActionableProps } from '../../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/components/data-table/parts/ColumnSortHeader.js

@@ -1,31 +0,0 @@
-import { Actionable as e } from "../../actionable/Actionable.js";
-import { Icon as t } from "../../icon/Icon.js";
-import "react";
-import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/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/components/data-table/parts/DataTableBulkActions.d.ts

@@ -1,74 +0,0 @@
-import { ReactTable as TableType, RowData, TableFeatures } from '@tanstack/react-table';
-import { ActionBarActionItem } from '../../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/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 };

package/dist/esm/components/data-table/parts/DataTableBulkActions.js

@@ -1,98 +0,0 @@
-import { Button as e } from "../../button/Button.js";
-import { ActionBarButton as t } from "../../action-bar/parts/ActionBarButton.js";
-import { ActionBarIconButton as n } from "../../action-bar/parts/ActionBarIconButton.js";
-import { ActionBar as r } from "../../action-bar/ActionBar.js";
-import { ActionBarRoot as i } from "../../action-bar/parts/ActionBarRoot.js";
-import { getPaginationTable as a } from "../DataTablePagination.js";
-import { useCallback as o, useRef as s, useState as c } from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
-import { FormattedMessage as f, useIntl as p } from "react-intl";
-import { useHotkeys as m } from "react-hotkeys-hook";
-//#region src/components/data-table/parts/DataTableBulkActions.tsx
-function h({ selectionCount: t, onClearSelection: n, renderSelectionText: r, hasKeyshortcuts: i, keyShortcuts: a }) {
-	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ d("div", {
-		className: "uy:typography-body uy:whitespace-nowrap! uy:sr-only uy:md:not-sr-only",
-		role: "status",
-		"aria-live": "polite",
-		"aria-atomic": "true",
-		children: [r ? r(t) : /* @__PURE__ */ u(f, {
-			id: "unity:component:action-bar:selection-count-text",
-			defaultMessage: "{selectionCount, plural, =0 {no items} one {item} other {items}} selected",
-			values: { selectionCount: t }
-		}), i && /* @__PURE__ */ u("span", {
-			className: "uy:sr-only",
-			children: /* @__PURE__ */ u(f, {
-				id: "unity:component:action-bar:key-shortcuts-text",
-				defaultMessage: "Use {keyShortcuts} to focus the action bar",
-				values: { keyShortcuts: a }
-			})
-		})]
-	}), /* @__PURE__ */ u(e, {
-		color: "inverted",
-		variant: "ghost",
-		onPress: n,
-		children: /* @__PURE__ */ u(f, {
-			id: "unity:component:action-bar:clear-selection-button",
-			defaultMessage: "Clear selection"
-		})
-	})] });
-}
-var g = (e) => e.type === "icon-button";
-function _({ table: e, actions: l, renderSelectionText: d }) {
-	let f = s(null), _ = s(null), [v, y] = c(!1), b = p();
-	m("f6", () => {
-		if ((e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected()) && f.current) {
-			let e = f.current.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])");
-			_.current = document.activeElement, e.length > 0 && (e[0].focus(), y(!0));
-		}
-	}, { enableOnFormTags: !0 }), m("esc", () => {
-		v && _.current && (_.current.focus(), y(!1));
-	}, { enableOnFormTags: !0 });
-	let x = e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected(), S = e.getSelectedRowModel().rows.length, C = a(e) !== void 0, w = o(() => {
-		e.resetRowSelection();
-	}, [e]);
-	return /* @__PURE__ */ u(i, {
-		isVisible: x,
-		offsetBottom: C ? "$600" : 0,
-		children: /* @__PURE__ */ u(r, {
-			ref: f,
-			actions: l,
-			prefixContent: /* @__PURE__ */ u(h, {
-				selectionCount: S,
-				onClearSelection: w,
-				renderSelectionText: d,
-				hasKeyshortcuts: !0,
-				keyShortcuts: "f6"
-			}),
-			onFocus: () => {
-				y(!0);
-			},
-			onBlur: () => {
-				y(!1);
-			},
-			"aria-keyshortcuts": "f6",
-			"aria-label": b.formatMessage({
-				id: "unity:component:action-bar:toolbar-label",
-				defaultMessage: "Bulk actions toolbar"
-			}),
-			children: (e) => g(e) ? /* @__PURE__ */ u(n, {
-				icon: e.meta.icon,
-				label: e.label,
-				variant: e.variant,
-				onPress: e.meta.onPress,
-				isDisabled: e.meta.isDisabled,
-				isLoading: e.meta.isLoading
-			}, e.id) : /* @__PURE__ */ u(t, {
-				variant: e.variant,
-				onPress: e.meta?.onPress,
-				prefixIcon: e.meta?.prefixIcon,
-				isDisabled: e.meta?.isDisabled,
-				isLoading: e.meta?.isLoading,
-				children: e.label
-			}, e.id)
-		})
-	});
-}
-_.displayName = "DataTableBulkActions";
-//#endregion
-export { _ as DataTableBulkActions };

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

@@ -1,13 +0,0 @@
-import { RowData } from '@tanstack/react-table';
-import { LegacyTable as TableType } from '@tanstack/react-table/legacy';
-import { ActionBarActionItem } from '../../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 };