@payfit/unity-components 2.46.15 → 2.46.17

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

@@ -1,309 +0,0 @@
-import { default as React, ReactNode } from 'react';
-import { Row, RowData, Table as TableType } 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<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<TData> extends Omit<TableRootProps, 'children'>, Omit<TableProps, 'children'> {
-    /** The table instance from @tanstack/react-table */
-    table: TableType<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;
-    /**
-     * Pagination customization options, including page size options and labels
-     * @default {
-     *   pageSizeOptions: [
-     *     { value: '10', label: '10' },
-     *     { value: '50', label: '50' },
-     *     { value: '100', label: '100' },
-     *     { value: '200', label: '200' },
-     *   ],
-     *   labels: {
-     *     itemLabel: 'unity:component:table:pagination:item',
-     *   },
-     * }
-     */
-    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<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 { flexRender, useReactTable, getCoreRowModel, getPaginationRowModel, createColumnHelper } from '@tanstack/react-table'
- * import { useState, useMemo } from 'react'
- *
- * function EmployeeTable() {
- *   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 })
- *   const [rowSelection, setRowSelection] = useState({})
- *
- *   const columnHelper = createColumnHelper<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 = useReactTable({
- *     data: employees,
- *     columns,
- *     getRowId: (row) => row.id,
- *     state: { pagination, rowSelection },
- *     onPaginationChange: setPagination,
- *     onRowSelectionChange: setRowSelection,
- *     getCoreRowModel: getCoreRowModel(),
- *     getPaginationRowModel: getPaginationRowModel(),
- *     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
- * - **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<TData extends object>({ 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<TData>): import("react/jsx-runtime").JSX.Element;
-declare namespace DataTable {
-    var displayName: string;
-}
-export { DataTable };

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

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

package/dist/esm/components/data-table/mocks/employee-columns.d.ts

@@ -1,7 +0,0 @@
-import { Employee } from './employee-data.js';
-/**
- * Creates optimized checkbox column with stable handlers to prevent unnecessary re-renders
- */
-export declare const createCheckboxColumn: () => import('@tanstack/react-table').DisplayColumnDef<Employee, unknown>;
-export declare const employeeColumns: (import('@tanstack/react-table').AccessorKeyColumnDefBase<Employee, string> & Partial<import('@tanstack/react-table').IdIdentifier<Employee, string>>)[];
-export declare const employeeColumnsWithCheckbox: ((import('@tanstack/react-table').AccessorKeyColumnDefBase<Employee, string> & Partial<import('@tanstack/react-table').IdIdentifier<Employee, string>>) | import('@tanstack/react-table').DisplayColumnDef<Employee, unknown>)[];

package/dist/esm/components/data-table/mocks/employee-data.d.ts

@@ -1,18 +0,0 @@
-export type Employee = {
-    id: string;
-    name: string;
-    position: string;
-    avatarUrl: string;
-    team: string;
-    workingAgreement: 'Full-time' | 'Part-time' | 'Freelance' | 'Contractor';
-    startWorkingDate: string;
-    endWorkingDate: string;
-    status: 'active' | 'onboarding' | 'offboarding' | 'inactive' | 'retired';
-    manager: {
-        name: string;
-        position: string;
-        team: string;
-    } | null;
-};
-export declare const employees: Employee[];
-export declare const employees500: Employee[];

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

@@ -1,10 +0,0 @@
-import { Header } from '@tanstack/react-table';
-import { ActionableProps } from '../../actionable/Actionable.js';
-export interface ColumnSortHeaderProps<TData, TValue> extends ActionableProps {
-    header: Header<TData, TValue>;
-}
-declare function ColumnSortHeader<TData, TValue>({ children, header, ...props }: ColumnSortHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
-declare namespace ColumnSortHeader {
-    var displayName: string;
-}
-export { ColumnSortHeader };

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

@@ -1,37 +0,0 @@
-import { jsx as r, jsxs as l, Fragment as c } from "react/jsx-runtime";
-import { Actionable as i } from "../../actionable/Actionable.js";
-import { Icon as m } from "../../icon/Icon.js";
-function u({
-  children: n,
-  header: o,
-  ...t
-}) {
-  return /* @__PURE__ */ r(
-    i,
-    {
-      ...t,
-      className: "uy:flex uy:items-center uy:gap-50",
-      onPress: () => {
-        o.column.getCanSort() && o.column.toggleSorting();
-      },
-      children: ({ isHovered: e }) => {
-        const s = o.column.getCanSort() && (o.column.getIsSorted() || e);
-        return /* @__PURE__ */ l(c, { children: [
-          n,
-          s ? /* @__PURE__ */ r(
-            m,
-            {
-              src: o.column.getIsSorted() === "asc" ? "ArrowUpOutlined" : "ArrowDownOutlined",
-              role: "presentation",
-              size: 20
-            }
-          ) : /* @__PURE__ */ r("span", { "aria-hidden": "true", className: "uy:size-250 uy:block" })
-        ] });
-      }
-    }
-  );
-}
-u.displayName = "ColumnSortHeader";
-export {
-  u as ColumnSortHeader
-};

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

@@ -1,65 +0,0 @@
-import { Table as TableType } from '@tanstack/react-table';
-import { ActionBarActionItem } from '../../action-bar/ActionBar.js';
-export interface DataTableBulkActionsProps<TData> {
-    /** The table instance from @tanstack/react-table */
-    table: TableType<TData>;
-    /** 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
- * - 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)
- * - 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<TData extends object>({ table, actions, renderSelectionText, }: DataTableBulkActionsProps<TData>): import("react/jsx-runtime").JSX.Element;
-declare namespace DataTableBulkActions {
-    var displayName: string;
-}
-export { DataTableBulkActions };