@verifiedinc-public/shared-ui-elements 11.0.3-beta.1 → 11.1.1

package/dist/components/DataTable/DataTable.types.d.ts

@@ -0,0 +1,525 @@
+import { ComponentType, CSSProperties, ReactNode, Ref } from 'react';
+import { SvgIconProps, SxProps, Theme } from '@mui/material';
+import { Cell, ColumnDef, ColumnPinningState, PaginationState, Row, SortingState, VisibilityState } from '@tanstack/react-table';
+import { VirtualItem } from '@tanstack/react-virtual';
+/**
+ * Generic record shape — the table works with arrays of objects whose
+ * shape is unknown ahead of time.
+ */
+export type DataTableData = Record<string, unknown>;
+/** Operators available in the column filter panel (MUI DataGrid parity). */
+export type DataTableFilterOperator = 'contains' | 'doesNotContain' | 'equals' | 'doesNotEqual' | 'startsWith' | 'endsWith' | 'isEmpty' | 'isNotEmpty' | 'isAnyOf';
+/**
+ * Low-level value shape used internally by `dataTableFilterFn` — consumed
+ * from `DataTableFilterRow` when pre-filtering client-side.
+ */
+export interface DataTableFilterValue {
+    operator: DataTableFilterOperator;
+    /**
+     * A single string for most operators; a `string[]` for the multi-value
+     * operators (`contains`, `isAnyOf`) — `contains` accepts either.
+     */
+    value?: string | string[];
+}
+/** Whether all filter rows must match (AND) or any one suffices (OR). */
+export type DataTableFilterLogicOperator = 'and' | 'or';
+/**
+ * One row in the filter panel. Each row targets a specific column with an
+ * operator and optional value. `id` is a unique key within the current
+ * filter state (not the column id) so multiple rows can target the same
+ * column.
+ */
+export interface DataTableFilterRow {
+    id: string;
+    columnId: string;
+    operator: DataTableFilterOperator;
+    /**
+     * `string` for most operators; `string[]` for the multi-value operators
+     * (`contains`, `isAnyOf`) — `contains` accepts either. Multiple values
+     * OR within the row (the cell value matches any of them).
+     */
+    value?: string | string[];
+}
+/**
+ * The full filter state passed to / returned from the table. With
+ * `manualFiltering`, translate these into the server query in
+ * `onFiltersChange`; client-side filtering is applied automatically
+ * otherwise.
+ */
+export interface DataTableActiveFilters {
+    rows: DataTableFilterRow[];
+    logicOperator: DataTableFilterLogicOperator;
+}
+/**
+ * Optional per-column display hints, supplied via the TanStack
+ * `ColumnDef.meta` field.
+ */
+export interface DataTableColumnMeta {
+    align?: 'left' | 'right' | 'center';
+    /**
+     * Column width — any CSS width value: a number for px (e.g. 140) or a
+     * string for percentage fill (e.g. '40%'). Applied to the header cell,
+     * which sizes the whole column.
+     *
+     * With `enableColumnResizing`, a numeric (px) width behaves like a
+     * drag-resize: the table grows to the sum of the column widths and
+     * scrolls horizontally rather than shrinking the other columns to fit,
+     * so a large width never reflows its neighbors. Percentage widths still
+     * split the available space.
+     */
+    width?: number | string;
+    /**
+     * Options suggested by the filter panel's value input for this column.
+     * When omitted, suggestions are derived from the column's distinct
+     * values in `data` — with `manualFiltering`, `data` only holds the
+     * current page, so supply the full set here.
+     */
+    filterOptions?: string[];
+    /**
+     * Hides the hover kebab (column menu) on this column even when the table
+     * has `enableColumnMenu`. Use for utility columns with nothing to act on
+     * (e.g. an expand/select column) so they don't show a menu offering only
+     * the global "Manage columns" action.
+     */
+    disableColumnMenu?: boolean;
+}
+/**
+ * Replacement component for one of the table's built-in MUI icons. Slots
+ * receive the same props as the icon they replace (`fontSize`, `sx`, ...) so
+ * MUI icons drop in directly; custom components are free to ignore them.
+ */
+export type DataTableIconComponent = ComponentType<SvgIconProps>;
+/**
+ * Custom icon mapping — each slot replaces the MUI icon the table renders
+ * there by default. Unset slots keep the MUI default.
+ */
+export interface DataTableIcons {
+    /**
+     * Sort direction arrow on sortable headers. Defaults to the MUI
+     * TableSortLabel arrow.
+     */
+    sort?: DataTableIconComponent;
+    /** Column menu "Sort by ASC" item. Defaults to ArrowUpward. */
+    sortAsc?: DataTableIconComponent;
+    /** Column menu "Sort by DESC" item. Defaults to ArrowDownward. */
+    sortDesc?: DataTableIconComponent;
+    /** Column menu "Pin to left" item. Defaults to a left-tilted PushPin. */
+    pinLeft?: DataTableIconComponent;
+    /** Column menu "Pin to right" item. Defaults to a right-tilted PushPin. */
+    pinRight?: DataTableIconComponent;
+    /** Column menu "Unpin" item. Defaults to PushPinOutlined. */
+    unpin?: DataTableIconComponent;
+    /**
+     * Kebab button on header hover that opens the column menu. Defaults to
+     * MoreVert.
+     */
+    columnMenu?: DataTableIconComponent;
+    /**
+     * Column menu "Filter" item and the active-filter indicator on filtered
+     * headers. Defaults to FilterAlt.
+     */
+    filter?: DataTableIconComponent;
+    /** Toolbar "Filters" button. Defaults to FilterList. */
+    openFilterPanel?: DataTableIconComponent;
+    /**
+     * Toolbar "Manage columns" button and the column menu "Manage columns"
+     * item. Defaults to ViewColumn.
+     */
+    manageColumns?: DataTableIconComponent;
+    /** Toolbar "Export" button. Defaults to FileDownloadOutlined. */
+    export?: DataTableIconComponent;
+    /** Export menu "Print" item. Defaults to Print. */
+    print?: DataTableIconComponent;
+    /** Export menu "Download as CSV" item. Defaults to DescriptionOutlined. */
+    downloadCsv?: DataTableIconComponent;
+    /** Export menu "Download as Excel" item. Defaults to GridOnOutlined. */
+    downloadExcel?: DataTableIconComponent;
+    /** Column menu "Hide column" item. Defaults to VisibilityOff. */
+    hideColumn?: DataTableIconComponent;
+    /**
+     * Search adornments — the toolbar quick search and the manage columns
+     * panel input. Defaults to Search.
+     */
+    search?: DataTableIconComponent;
+    /**
+     * Clear buttons — clear search and remove a filter panel row. Defaults
+     * to Close.
+     */
+    close?: DataTableIconComponent;
+    /** Filter panel "Add filter" button. Defaults to Add. */
+    addFilter?: DataTableIconComponent;
+    /** Filter panel "Remove all" button. Defaults to DeleteOutline. */
+    removeAllFilters?: DataTableIconComponent;
+    /** Pagination first-page button. Defaults to FirstPage. */
+    paginationFirst?: DataTableIconComponent;
+    /** Pagination previous-page button. Defaults to KeyboardArrowLeft. */
+    paginationPrevious?: DataTableIconComponent;
+    /** Pagination next-page button. Defaults to KeyboardArrowRight. */
+    paginationNext?: DataTableIconComponent;
+    /** Pagination last-page button. Defaults to LastPage. */
+    paginationLast?: DataTableIconComponent;
+}
+/**
+ * Props for one body `<TableCell>` matching the default cells: the meta
+ * alignment plus, for pinned columns, the sticky offset and background
+ * styles (and the fixed-layout overflow clipping).
+ */
+export interface DataTableCellProps {
+    align?: DataTableColumnMeta['align'];
+    style?: CSSProperties;
+    sx?: SxProps<Theme>;
+}
+/**
+ * Context handed to the custom row renderer. The default row markup is
+ * available through `renderDefaultRow` so custom renderers can decorate it
+ * (e.g. append an expandable detail row) instead of rebuilding it.
+ */
+export interface DataTableRowContext<TData> {
+    /** TanStack row — `row.original` holds the raw data object. */
+    row: Row<TData>;
+    /** Virtual item for this row (index, measured size, offsets). */
+    virtualRow: VirtualItem;
+    /**
+     * Spread onto the first `<TableRow>` of a custom row so the virtualizer
+     * can measure its rendered height. Sibling rows rendered after it (e.g.
+     * a divider row or an expandable detail row) are measured and observed
+     * as part of the same row group — expanding a Collapse panel resizes
+     * the virtual row instead of snapping the scroll.
+     */
+    rowProps: {
+        'data-index': number;
+        ref: Ref<HTMLTableRowElement>;
+    };
+    /**
+     * Spread onto each `<TableCell>` of a custom row (built from
+     * `row.getVisibleCells()`) to match the default cells — column meta
+     * alignment plus, with `enableColumnPinning`, the sticky styles that
+     * keep pinned cells in place while the table scrolls horizontally.
+     */
+    getCellProps: (cell: Cell<TData, unknown>) => DataTableCellProps;
+    /** Renders the default `<TableRow>` for this row. */
+    renderDefaultRow: () => ReactNode;
+}
+/**
+ * Configuration for bidirectional infinite scroll (see
+ * `DataTableProps.bidirectionalScroll`). The flags describe a paged,
+ * reverse-chronological feed: "newer" pages sit above the loaded window,
+ * "older" pages below it.
+ */
+export interface DataTableBidirectionalScroll {
+    /** Whether more rows exist above the loaded window. */
+    hasNewer?: boolean;
+    /** Whether more rows exist below the loaded window. */
+    hasOlder?: boolean;
+    /**
+     * Whether a newer-page fetch is in flight — shows the sticky indicator
+     * below the header and holds the scroll position when the rows land.
+     */
+    isLoadingNewer?: boolean;
+    /**
+     * Whether an older-page fetch is in flight — shows the sticky indicator
+     * at the bottom edge.
+     */
+    isLoadingOlder?: boolean;
+    /**
+     * Called when the user scrolls to the top edge — fetch the next newer
+     * page and prepend its rows to `data`.
+     */
+    onLoadNewer: () => void;
+    /**
+     * Called when the user scrolls to the bottom edge — fetch the next older
+     * page and append its rows to `data`.
+     */
+    onLoadOlder: () => void;
+    /**
+     * When this value changes, the scroll position resets to the top and the
+     * edge triggers re-arm. Derive it from the active filters (e.g. a
+     * serialised filter string) so a filter change starts a fresh feed.
+     */
+    resetKey?: string | number;
+    /** Label inside the top indicator. Defaults to 'Loading newer rows'. */
+    loadingNewerLabel?: string;
+    /** Label inside the bottom indicator. Defaults to 'Loading older rows'. */
+    loadingOlderLabel?: string;
+}
+export interface DataTableProps<TData extends DataTableData> {
+    data: TData[];
+    /**
+     * TanStack column definitions. When omitted, columns are inferred from
+     * the keys of the first data row with sensible header/cell defaults
+     * (inferred columns are all sortable).
+     *
+     * Sorting is opt-in: declare sortable columns with
+     * `enableSorting: true` on their defs — columns are plain labels
+     * otherwise.
+     *
+     * Supports TanStack group defs (`{ header: 'Group', columns: [...] }`)
+     * for a grouped header: group labels render centered above their
+     * sub-columns while ungrouped columns span all header rows.
+     */
+    columns?: Array<ColumnDef<TData, unknown>>;
+    /** Stable row identity; falls back to the row index. */
+    getRowId?: (row: TData, index: number) => string;
+    /**
+     * Custom row renderer; falls back to the default row markup. Custom rows
+     * build their own cells, so column visibility (Hide column / Manage
+     * columns) only affects them when they render from
+     * `row.getVisibleCells()` instead of hardcoding cells. Spread
+     * `getCellProps(cell)` onto each cell to keep the default alignment and
+     * pinned-column stickiness.
+     */
+    renderRow?: (context: DataTableRowContext<TData>) => ReactNode;
+    /** Initial sorting state, e.g. `[{ id: 'email', desc: false }]`. */
+    initialSorting?: SortingState;
+    /**
+     * Controlled sorting state (pair with `onSortingChange`). Takes
+     * precedence over `initialSorting`. When omitted, sorting state is
+     * internal.
+     */
+    sorting?: SortingState;
+    /**
+     * Called with the next sorting state when a header is clicked. With
+     * `manualSorting`, fetch the re-sorted rows from the server in response
+     * (and usually reset the page to 0).
+     */
+    onSortingChange?: (sorting: SortingState) => void;
+    /**
+     * Server-side sorting: rows in `data` are assumed to already be sorted —
+     * header clicks only update the sorting state, nothing is sorted
+     * client-side.
+     */
+    manualSorting?: boolean;
+    /** Rows per page when the table mounts. Defaults to 25. */
+    initialPageSize?: number;
+    /** Options for the rows-per-page select. Defaults to [10, 25, 50, 100]. */
+    pageSizeOptions?: number[];
+    /**
+     * Controlled pagination state (pair with `onPaginationChange`). Use when
+     * the consumer needs to drive the page externally — e.g. reset to the
+     * first page when filters change. Takes precedence over
+     * `initialPageSize`. When omitted, pagination state is internal.
+     */
+    pagination?: PaginationState;
+    /**
+     * Called with the next pagination state whenever the page or page size
+     * changes. With `manualPagination`, fetch the new page from the server
+     * in response (e.g. by keying a React Query on this state).
+     */
+    onPaginationChange?: (pagination: PaginationState) => void;
+    /**
+     * Server-side pagination: rows in `data` are treated as the current
+     * page (no client-side slicing) and `rowCount` drives the pager.
+     */
+    manualPagination?: boolean;
+    /**
+     * Total row count on the server. Required with `manualPagination` so
+     * the pager knows how many pages exist.
+     */
+    rowCount?: number;
+    /**
+     * Disables sorting for the whole table — headers render as plain labels
+     * and rows keep the order of `data`, even for columns declaring
+     * `enableSorting: true`.
+     */
+    disableSorting?: boolean;
+    /** Hides the pagination footer and renders all rows (still virtualized). */
+    disablePagination?: boolean;
+    /**
+     * Bidirectional infinite scroll for streaming feeds (e.g. logs):
+     * scrolling to the bottom edge calls `onLoadOlder`, scrolling back to
+     * the top edge calls `onLoadNewer`, and sticky in-flight indicators pin
+     * to the edges while a page loads. The scroll position is preserved when
+     * newer rows are prepended, so the viewport doesn't jump.
+     *
+     * The consumer owns the pages: merge the fetched rows into `data` and
+     * flip the `has*` / `isLoading*` flags (e.g. from a React Query infinite
+     * query). Pair with `disablePagination` (the scroll edges replace the
+     * pager) and `getRowId` (prepended rows shift the indexes, which are the
+     * default row identity); rows are assumed to arrive in feed order, so
+     * sorting is usually disabled or manual.
+     */
+    bidirectionalScroll?: DataTableBidirectionalScroll;
+    /**
+     * Adds drag handles (vertical separator lines) on the header cell edges
+     * to resize columns; double-clicking a handle restores the column's
+     * pre-drag width. Drags start from the column's rendered width, and the
+     * other columns are frozen at theirs — resizing changes the table width
+     * (adding horizontal scroll as needed) instead of reflowing the
+     * neighboring columns. Per-column opt-out via `enableResizing: false`
+     * on the def. Widths are enforced exactly with `tableLayout: 'fixed'`;
+     * with the default 'auto', content can keep a column from shrinking
+     * below its natural width.
+     */
+    enableColumnResizing?: boolean;
+    /**
+     * Shows a kebab menu on each column header (revealed on hover, like the
+     * MUI DataGrid) with per-column actions: Sort by ASC/DESC for sortable
+     * columns, Pin to left / Pin to right / Unpin with
+     * `enableColumnPinning`, Filter for filterable columns, and Hide column
+     * / Manage columns for column visibility.
+     *
+     * Every accessor column is filterable through the operator-based filter
+     * panel by default — opt a column out with `enableColumnFilter: false`
+     * on its def. Hide the kebab on a specific column (e.g. a utility
+     * expand/select column) with `meta.disableColumnMenu`.
+     */
+    enableColumnMenu?: boolean;
+    /**
+     * Adds Pin to left / Pin to right / Unpin actions to the column menu.
+     * Pinned columns reorder to that edge and stay sticky while the table
+     * scrolls horizontally; their offsets are measured from the rendered
+     * header cells, so they hold under both table layouts. Per-column
+     * opt-out via `enablePinning: false` on the def. Custom `renderRow`
+     * rows build their own cells — spread `getCellProps(cell)` onto them
+     * to get the sticky styles.
+     *
+     * The table only scrolls horizontally once it is wider than its
+     * container — pair with a `minWidth` beyond the container width (or
+     * exact column widths on every column with `tableLayout: 'fixed'`),
+     * otherwise there is nothing for pinned columns to stick over.
+     */
+    enableColumnPinning?: boolean;
+    /**
+     * Shows a toolbar row above the table with Manage columns and Filters
+     * buttons plus a search button that expands into a quick-search input on
+     * the right, like the MUI DataGrid toolbar. The filter button carries a
+     * badge with the active filter count. While the toolbar is shown, the
+     * filter / manage columns panels open anchored to their toolbar button —
+     * including when triggered from a column menu — instead of at the column
+     * that opened them.
+     */
+    showToolbar?: boolean;
+    /**
+     * Adds an Export button to the toolbar (requires `showToolbar`) with
+     * Print, Download as CSV and Download as Excel actions. Exports always
+     * reflect the displayed table: the filtered + sorted rows across every
+     * page and the visible accessor columns in display order (display-only
+     * columns are skipped). With grouped columns the export starts with a
+     * group header row, like the rendered header. With `manualPagination`
+     * only the loaded page is exported.
+     */
+    enableExport?: boolean;
+    /**
+     * Base filename (no extension) for the exported files; also the printed
+     * document title. Defaults to 'data'.
+     */
+    exportFilename?: string;
+    /**
+     * Initial filter state. Rows are applied as AND by default; switch to OR
+     * via `logicOperator: 'or'`.
+     *
+     * @example
+     * initialFilters={{ rows: [{ id: 'f1', columnId: 'role', operator: 'equals', value: 'admin' }], logicOperator: 'and' }}
+     */
+    initialFilters?: DataTableActiveFilters;
+    /**
+     * Controlled filter state (pair with `onFiltersChange`). Takes
+     * precedence over `initialFilters`. When omitted, filter state is
+     * internal.
+     */
+    filters?: DataTableActiveFilters;
+    /**
+     * Called with the next filter state when the filter panel changes. With
+     * `manualFiltering`, fetch the matching rows from the server in response
+     * (and usually reset the page to 0).
+     */
+    onFiltersChange?: (filters: DataTableActiveFilters) => void;
+    /**
+     * Server-side filtering: rows in `data` are assumed to already match the
+     * active filters and search query — the filter panel and the toolbar
+     * search input only update their state, nothing is filtered client-side.
+     */
+    manualFiltering?: boolean;
+    /** Initial quick-search query for the toolbar search input. */
+    initialSearch?: string;
+    /**
+     * Controlled quick-search query (pair with `onSearchChange`). Takes
+     * precedence over `initialSearch`. When omitted, search state is
+     * internal.
+     */
+    search?: string;
+    /**
+     * Called with the next query as the user types in the toolbar search
+     * input. With `manualFiltering`, fetch the matching rows from the server
+     * in response (and usually reset the page to 0).
+     */
+    onSearchChange?: (search: string) => void;
+    /**
+     * Initial column visibility, keyed by column id — `{ role: false }`
+     * mounts the table with the role column hidden. Also what the manage
+     * columns panel's Reset restores. Per-column opt-out from hiding via
+     * `enableHiding: false` on the def.
+     */
+    initialColumnVisibility?: VisibilityState;
+    /**
+     * Controlled column visibility state (pair with
+     * `onColumnVisibilityChange`) — e.g. to persist hidden columns per user.
+     * Takes precedence over `initialColumnVisibility`. When omitted,
+     * visibility state is internal.
+     */
+    columnVisibility?: VisibilityState;
+    /**
+     * Called with the next visibility state whenever a column is hidden or
+     * shown (column menu, manage columns panel).
+     */
+    onColumnVisibilityChange?: (columnVisibility: VisibilityState) => void;
+    /**
+     * Initial pinned columns, e.g. `{ left: ['email'], right: [] }` —
+     * requires `enableColumnPinning`.
+     */
+    initialColumnPinning?: ColumnPinningState;
+    /**
+     * Controlled pinning state (pair with `onColumnPinningChange`) — e.g.
+     * to persist pinned columns per user. Takes precedence over
+     * `initialColumnPinning`. When omitted, pinning state is internal.
+     */
+    columnPinning?: ColumnPinningState;
+    /**
+     * Called with the next pinning state whenever a column is pinned or
+     * unpinned from the column menu.
+     */
+    onColumnPinningChange?: (columnPinning: ColumnPinningState) => void;
+    /**
+     * Content rendered on the left side of the footer, opposite the
+     * pagination controls (e.g. a summary, bulk actions or an export button).
+     * Rendered even when pagination is disabled.
+     */
+    footerLeft?: ReactNode;
+    /** Estimated row height in px used by the virtualizer. Defaults to 53. */
+    estimateRowHeight?: number;
+    /**
+     * Min width of the table itself (any CSS width value). When it exceeds
+     * the container width, the table scrolls horizontally — which is what
+     * gives pinned columns something to stick over. Defaults to 650.
+     */
+    minWidth?: number | string;
+    /** Max height of the scroll container. Defaults to 800. */
+    maxHeight?: number | string;
+    /**
+     * Table layout algorithm. With the default 'auto', column widths are
+     * hints and content can stretch a column. Use 'fixed' to enforce the
+     * exact px/percentage widths set via column meta — content that cannot
+     * fit (e.g. long unbreakable strings) is clipped with an ellipsis
+     * instead of leaking over the neighboring cells.
+     */
+    tableLayout?: 'auto' | 'fixed';
+    /**
+     * Custom icon mapping — replaces the MUI icons the table renders by
+     * default (toolbar buttons, column menu items, filter panel actions,
+     * pagination arrows). Unset slots keep the MUI default.
+     *
+     * @example
+     * icons={{ search: MagnifyingGlass, columnMenu: DotsThree }}
+     */
+    icons?: DataTableIcons;
+    /** Message displayed when `data` is empty. */
+    emptyMessage?: string;
+    isLoading?: boolean;
+    /**
+     * Custom loading state renderer, shown while `isLoading` is true and
+     * there are no rows. Rendered inside the table body, so it must return
+     * one or more `<TableRow>`s (e.g. skeleton rows). Receives the column
+     * count for `colSpan`. Falls back to a default loading row.
+     */
+    renderLoading?: (columnCount: number) => ReactNode;
+}

package/dist/components/DataTable/DataTable.utils.d.ts

@@ -0,0 +1,39 @@
+import { Column, ColumnDef } from '@tanstack/react-table';
+import { DataTableColumnMeta, DataTableData } from './DataTable.types';
+/**
+ * Marks tbody rows that don't belong to any virtual row group (the
+ * virtualizer padding rows, the bidirectional-scroll edge indicators) so
+ * group measurement and observation stop walking when they reach one.
+ */
+export declare const VIRTUAL_BOUNDARY_ATTRIBUTE = "data-virtual-boundary";
+/**
+ * Measures a logical row group. A single virtual row renders as several
+ * sibling `<tr>`s — the data row (which carries `data-index` and the
+ * measure ref) plus the divider row and any detail row a custom renderRow
+ * appends — so measuring only the first `<tr>` (the virtualizer default)
+ * undersizes every row, making the scrollbar jitter while scrolling, and
+ * ignores expanded detail panels entirely, snapping the scroll when their
+ * row leaves the render window. Sums the whole group up to the next
+ * measured row or a boundary row instead.
+ */
+export declare function measureRowGroup(element: Element): number;
+/** Turns an object key into a readable header label, e.g. `createdAt` → `Created At`. */
+export declare function formatColumnLabel(key: string): string;
+/** Default cell formatting for values of unknown shape. */
+export declare function formatCellValue(value: unknown): string;
+/** Builds default column definitions from the keys of the first data row. */
+export declare function inferColumns<TData extends DataTableData>(data: TData[]): Array<ColumnDef<TData, unknown>>;
+export declare function getColumnMeta(meta: unknown): DataTableColumnMeta | undefined;
+/**
+ * Plain-text label for a column, used where the header def can't be
+ * rendered (aria-labels, the filter panel column select, the manage
+ * columns list). Function/element headers fall back to a label derived
+ * from the column id.
+ */
+export declare function getColumnLabel<TData>(column: Column<TData, unknown>): string;
+/**
+ * Copies numeric meta widths onto the TanStack `size` (recursing into group
+ * defs) so drag-resizing starts from the rendered width instead of jumping
+ * to TanStack's 150px default on the first drag.
+ */
+export declare function applyMetaWidthsToSizes<TData extends DataTableData>(defs: Array<ColumnDef<TData, unknown>>): Array<ColumnDef<TData, unknown>>;

package/dist/components/DataTable/DataTable.utils.mjs

@@ -0,0 +1 @@
+"use strict";const o="data-virtual-boundary";function l(e){let n=e.offsetHeight,t=e.nextElementSibling;for(;t&&!t.hasAttribute("data-index")&&!t.hasAttribute(o);)n+=t.offsetHeight,t=t.nextElementSibling;return n}function a(e){return e.replace(/([a-z0-9])([A-Z])/g,"$1 $2").replace(/[_-]+/g," ").trim().replace(/\b\w/g,n=>n.toUpperCase())}function i(e){return e==null||e===""?"\u2014":e instanceof Date?e.toLocaleString():typeof e=="object"?JSON.stringify(e):String(e)}function s(e){const[n]=e;return n?Object.keys(n).map(t=>({id:t,accessorFn:r=>r[t],header:a(t),cell:r=>i(r.getValue()),enableSorting:!0})):[]}function c(e){return e}function f(e){const{header:n}=e.columnDef;return typeof n=="string"&&n.length>0?n:a(e.id)}function u(e){return e.map(n=>{const t=n.meta,r={...n};return typeof t?.width=="number"&&r.size===void 0&&(r.size=t.width),"columns"in r&&Array.isArray(r.columns)&&(r.columns=u(r.columns)),r})}export{o as VIRTUAL_BOUNDARY_ATTRIBUTE,u as applyMetaWidthsToSizes,i as formatCellValue,a as formatColumnLabel,f as getColumnLabel,c as getColumnMeta,s as inferColumns,l as measureRowGroup};

package/dist/components/DataTable/DataTableBody.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+/**
+ * Table body: the loading / empty states, the bidirectional-scroll edge
+ * indicators, the virtualizer padding rows and the virtualized data rows
+ * (default markup or the consumer's `renderRow`).
+ */
+export declare function DataTableBody(): React.JSX.Element;

package/dist/components/DataTable/DataTableBody.mjs

@@ -0,0 +1 @@
+"use strict";import D,{useRef as S,useEffect as I}from"react";import{flexRender as O}from"@tanstack/react-table";import{TableBody as P,TableRow as l,TableCell as i,Typography as T,Stack as j,CircularProgress as N}from"@mui/material";import{useDataTableContext as U}from"./DataTable.context.mjs";import{VIRTUAL_BOUNDARY_ATTRIBUTE as R}from"./DataTable.utils.mjs";import{jsxs as x,jsx as e,Fragment as V}from"react/jsx-runtime";const f={[R]:""};function L({edge:s,top:n=0,columnCount:u,label:g}){return e(l,{...f,sx:{position:"sticky",...s==="top"?{top:n}:{bottom:0},zIndex:2,pointerEvents:"none"},children:e(i,{colSpan:u,sx:{textAlign:"center",py:.75,bgcolor:"grey.100",...s==="top"?{borderBottom:"1px solid"}:{borderTop:"1px solid"},borderColor:"divider"},children:x(j,{direction:"row",alignItems:"center",justifyContent:"center",spacing:1,children:[e(N,{size:12}),e(T,{variant:"caption",color:"text.secondary",children:g})]})})})}function _(){const{rows:s,columnCount:n,isLoading:u,renderLoading:g,emptyMessage:E,bidirectionalScroll:a,headerHeight:A,renderRow:v,getCellProps:y,virtualizer:p}=U(),d=p.getVirtualItems(),m=S(new Set),b=S(null),z=()=>(!b.current&&typeof ResizeObserver<"u"&&(b.current=new ResizeObserver(t=>{for(const o of t){let r=o.target.previousElementSibling;for(;r&&!r.hasAttribute("data-index");)r=r.previousElementSibling;r!=null&&r.isConnected&&p.measureElement(r)}})),b.current);I(()=>()=>{var t;return(t=b.current)==null?void 0:t.disconnect()},[]);const B=t=>{if(p.measureElement(t),!t)return;const o=z();if(!o)return;for(const c of m.current)c.isConnected||(o.unobserve(c),m.current.delete(c));let r=t.nextElementSibling;for(;r&&!r.hasAttribute("data-index")&&!r.hasAttribute(R);)m.current.has(r)||(o.observe(r),m.current.add(r)),r=r.nextElementSibling},w=d.length>0?d[0].start:0,C=d.length>0?p.getTotalSize()-d[d.length-1].end:0;return x(P,{children:[u&&s.length===0&&(g?g(n):e(l,{children:e(i,{colSpan:n,sx:{textAlign:"center",py:2},children:e(T,{color:"text.secondary",children:"Loading..."})})})),!u&&s.length===0&&e(l,{children:e(i,{colSpan:n,children:E})}),a?.isLoadingNewer&&e(L,{edge:"top",top:A,columnCount:n,label:a.loadingNewerLabel??"Loading newer rows"}),w>0&&e(l,{...f,children:e(i,{colSpan:n,sx:{p:0,border:"none"},style:{height:w}})}),d.map(t=>{const o=s[t.index],r={"data-index":t.index,ref:B},c=()=>x(V,{children:[e(l,{hover:!0,...r,sx:{"& > td":{borderBottom:"unset"}},children:o.getVisibleCells().map(h=>e(i,{...y(h),children:O(h.column.columnDef.cell,h.getContext())},h.id))}),e(l,{children:e(i,{colSpan:n,sx:{py:0}})})]});return e(D.Fragment,{children:v?v({row:o,virtualRow:t,rowProps:r,getCellProps:y,renderDefaultRow:c}):c()},o.id)}),C>0&&e(l,{...f,children:e(i,{colSpan:n,sx:{p:0,border:"none"},style:{height:C}})}),a?.isLoadingOlder&&e(L,{edge:"bottom",columnCount:n,label:a.loadingOlderLabel??"Loading older rows"})]})}export{_ as DataTableBody};

package/dist/components/DataTable/DataTableColumnMenu.d.ts

@@ -0,0 +1,22 @@
+import { Column } from '@tanstack/react-table';
+import { DataTableData, DataTableIcons } from './DataTable.types';
+interface DataTableColumnMenuProps<TData extends DataTableData> {
+    column: Column<TData, unknown>;
+    anchorEl: HTMLElement;
+    /** Custom icon slots for the menu items; unset slots keep the MUI default. */
+    icons?: DataTableIcons;
+    /** Blocks the sort actions while a page is being fetched (manualSorting). */
+    isLoading: boolean;
+    onClose: () => void;
+    /** Swaps this menu for the filter panel, preselecting this column. */
+    onOpenFilter: () => void;
+    /** Swaps this menu for the manage columns panel. */
+    onOpenManageColumns: () => void;
+}
+/**
+ * Per-column actions menu opened from the kebab button on a header cell,
+ * mirroring the MUI DataGrid column menu. Sections render only when the
+ * column supports them (e.g. sort items only for sortable columns).
+ */
+export declare function DataTableColumnMenu<TData extends DataTableData>({ column, anchorEl, icons, isLoading, onClose, onOpenFilter, onOpenManageColumns, }: Readonly<DataTableColumnMenuProps<TData>>): import("react").JSX.Element;
+export {};

package/dist/components/DataTable/DataTableColumnMenu.mjs

@@ -0,0 +1 @@
+"use strict";import{Menu as L,MenuItem as l,ListItemIcon as r,ListItemText as t,Divider as f}from"@mui/material";import{ViewColumn as v,ArrowUpward as E,ArrowDownward as U,PushPinOutlined as V,FilterAlt as j,VisibilityOff as H,PushPin as u}from"@mui/icons-material";import{jsxs as e,jsx as n}from"react/jsx-runtime";function T(i){return n(u,{...i,sx:{transform:"rotate(30deg)"}})}function R(i){return n(u,{...i,sx:{transform:"rotate(-30deg)"}})}function K({column:i,anchorEl:S,icons:p={},isLoading:s,onClose:c,onOpenFilter:z,onOpenManageColumns:b}){const{sortAsc:k=E,sortDesc:P=U,pinLeft:w=T,pinRight:x=R,unpin:O=V,filter:A=j,hideColumn:D=H,manageColumns:I=v}=p,o=i.getCanSort(),M=i.getIsSorted(),a=i.getCanPin(),h=i.getIsPinned(),d=i.getCanFilter(),y=i.getCanHide(),C=g=>{i.toggleSorting(g),c()},F=()=>{i.clearSorting(),c()},m=g=>{i.pin(g),c()};return e(L,{open:!0,anchorEl:S,onClose:c,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},children:[o&&e(l,{disabled:s,onClick:()=>C(!1),children:[n(r,{children:n(k,{fontSize:"small"})}),n(t,{children:"Sort by ASC"})]}),o&&e(l,{disabled:s,onClick:()=>C(!0),children:[n(r,{children:n(P,{fontSize:"small"})}),n(t,{children:"Sort by DESC"})]}),o&&M&&e(l,{disabled:s,onClick:F,children:[n(r,{}),n(t,{children:"Unsort"})]}),o&&a&&n(f,{}),a&&h!=="left"&&e(l,{onClick:()=>m("left"),children:[n(r,{children:n(w,{fontSize:"small"})}),n(t,{children:"Pin to left"})]}),a&&h!=="right"&&e(l,{onClick:()=>m("right"),children:[n(r,{children:n(x,{fontSize:"small"})}),n(t,{children:"Pin to right"})]}),a&&h!==!1&&e(l,{onClick:()=>m(!1),children:[n(r,{children:n(O,{fontSize:"small"})}),n(t,{children:"Unpin"})]}),(o||a)&&d&&n(f,{}),d&&e(l,{onClick:z,children:[n(r,{children:n(A,{fontSize:"small"})}),n(t,{children:"Filter"})]}),(o||a||d)&&n(f,{}),y&&e(l,{onClick:()=>{i.toggleVisibility(!1),c()},children:[n(r,{children:n(D,{fontSize:"small"})}),n(t,{children:"Hide column"})]}),e(l,{onClick:b,children:[n(r,{children:n(I,{fontSize:"small"})}),n(t,{children:"Manage columns"})]})]})}export{K as DataTableColumnMenu};

package/dist/components/DataTable/DataTableExportMenu.d.ts

@@ -0,0 +1,16 @@
+import { Table } from '@tanstack/react-table';
+import { DataTableData, DataTableIcons } from './DataTable.types';
+interface DataTableExportMenuProps<TData extends DataTableData> {
+    table: Table<TData>;
+    /** Base filename (no extension); also the printed document title. */
+    filename: string;
+    icons: DataTableIcons;
+}
+/**
+ * Toolbar Export button opening a menu with Print / Download as CSV /
+ * Download as Excel actions, like the MUI DataGrid toolbar. Every action
+ * exports the displayed table: the filtered + sorted rows across every
+ * page and the visible accessor columns in display order.
+ */
+export declare function DataTableExportMenu<TData extends DataTableData>({ table, filename, icons, }: Readonly<DataTableExportMenuProps<TData>>): import("react").JSX.Element;
+export {};

package/dist/components/DataTable/DataTableExportMenu.mjs

@@ -0,0 +1 @@
+"use strict";import{useState as f}from"react";import{Tooltip as T,IconButton as D,Menu as b,MenuItem as t,ListItemIcon as r,ListItemText as i}from"@mui/material";import{GridOnOutlined as C,FileDownloadOutlined as E,Print as w,DescriptionOutlined as S}from"@mui/icons-material";import{getDataTableExportModel as z,printDataTable as I,exportDataTableToCsv as k,exportDataTableToExcel as M}from"./DataTable.export.mjs";import{jsxs as e,Fragment as O,jsx as l}from"react/jsx-runtime";function g({table:c,filename:d,icons:m}){const{export:p=E,print:h=w,downloadCsv:u=S,downloadExcel:x=C}=m,[s,a]=f(null),n=o=>{o(z(c),d),a(null)};return e(O,{children:[l(T,{title:"Export",placement:"bottom",arrow:!0,children:l(D,{size:"small","aria-label":"Export",onClick:o=>a(o.currentTarget),children:l(p,{fontSize:"small"})})}),e(b,{anchorEl:s,open:!!s,onClose:()=>a(null),children:[e(t,{onClick:()=>n(I),children:[l(r,{children:l(h,{fontSize:"small"})}),l(i,{children:"Print"})]}),e(t,{onClick:()=>n(k),children:[l(r,{children:l(u,{fontSize:"small"})}),l(i,{children:"Download as CSV"})]}),e(t,{onClick:()=>n(M),children:[l(r,{children:l(x,{fontSize:"small"})}),l(i,{children:"Download as Excel"})]})]})]})}export{g as DataTableExportMenu};