@payfit/unity-components 2.46.13 → 2.46.14

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

@@ -0,0 +1,309 @@
+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

@@ -0,0 +1,156 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,65 @@
+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 };