@ssa-ui-kit/core 3.26.4 → 3.27.0

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

@@ -0,0 +1,79 @@
+import { DataTableProps } from './types';
+/**
+ * DataTable - A table driven by data: give it rows and column definitions
+ * and it renders, sorts and lays out the columns itself.
+ *
+ * Use it for interactive data tables. For a static table whose markup you
+ * want to write by hand, use `Table` and its row and cell components, which
+ * this is built from.
+ *
+ * ### Sorting
+ *
+ * Mark a column `sortable` and clicking its header reports a new sort through
+ * `onSortChange`: ascending first, then toggling. By default the table only
+ * reports it, expecting the server to send the rows back sorted, and passes
+ * the column's `sortKey` along for the request. Give the column a `sortFn` to
+ * sort the rows in the browser instead.
+ *
+ * ### Column layout
+ *
+ * Widths, frozen columns, order and hidden columns live in one
+ * `DataTableColumnState`, keyed by column id. Read it from
+ * `onColumnStateChange`, store it, and pass it back through
+ * `defaultColumnState` to remember a user's layout.
+ *
+ * With `reorderableColumns` the user can move columns, by dragging the grip
+ * in the header or from the header menu. A column only moves among columns
+ * frozen to the same edge, or among the unfrozen ones.
+ *
+ * ### Nested rows
+ *
+ * `getSubRows` nests rows under rows, to any depth, with an expand button
+ * per parent; `expandedRowIds` or `defaultExpanded` say which are open.
+ *
+ * ### Selection and hidden columns
+ *
+ * `selectionMode` adds a checkbox (or radio) column; the selection is a list
+ * of row ids, reported through `onSelectionChange`. `hideableColumns` adds
+ * "Hide column" to the header menu, and `DataTableColumnPicker` brings
+ * hidden columns back.
+ *
+ * @category Components
+ * @subcategory Data Display
+ *
+ * @example
+ * ```tsx
+ * const columns: DataTableColumn<Employee>[] = [
+ *   { id: 'name', header: 'Name', cell: (row) => row.name, sortable: true },
+ *   { id: 'role', header: 'Role', cell: (row) => row.role },
+ * ];
+ *
+ * <DataTable
+ *   data={employees}
+ *   columns={columns}
+ *   sort={sort}
+ *   onSortChange={(next, sortKey) => {
+ *     setSort(next);
+ *     refetch({ sortBy: sortKey, descending: next?.direction === 'desc' });
+ *   }}
+ *   isLoading={isFetching}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Resizable, freezable columns whose layout is remembered
+ * <DataTable
+ *   data={rows}
+ *   columns={columns}
+ *   resizableColumns
+ *   freezeControls
+ *   defaultColumnState={loadLayout()}
+ *   onColumnStateChange={saveLayout}
+ * />
+ * ```
+ *
+ * @see {@link Table} - the building blocks, for hand-written tables
+ */
+declare const DataTable: <Row>(props: DataTableProps<Row>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default DataTable;

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

@@ -0,0 +1,66 @@
+import { ReactNode } from 'react';
+import { DataTableColumn, DataTableColumnState } from './types';
+/**
+ * Props of {@link DataTableColumnPicker}.
+ *
+ * @example
+ * ```tsx
+ * <DataTableColumnPicker
+ *   columns={columns}
+ *   columnState={columnState}
+ *   onColumnStateChange={setColumnState}
+ * />
+ * ```
+ */
+export interface DataTableColumnPickerProps<Row> {
+    /** The same columns the table gets. */
+    columns: DataTableColumn<Row>[];
+    /** The table's column state, as passed to its `columnState`. */
+    columnState?: Partial<DataTableColumnState>;
+    /** Called with the whole new column state when a column is shown or hidden. */
+    onColumnStateChange: (columnState: DataTableColumnState) => void;
+    /**
+     * Text of the button that opens the list.
+     * @default 'Columns'
+     */
+    label?: ReactNode;
+    /** Class name of the button. */
+    className?: string;
+}
+/**
+ * DataTableColumnPicker - A button that opens a checklist of a
+ * {@link DataTable}'s columns, to show or hide each one.
+ *
+ * Place it wherever the page keeps its table controls, such as next to the
+ * filters, and share a controlled `columnState` between it and the table.
+ * Columns are listed in display order. Columns with `hideable: false` stay
+ * checked and cannot be cleared, and neither can the last one shown.
+ *
+ * @category Components
+ * @subcategory Data Display
+ *
+ * @example
+ * ```tsx
+ * const [columnState, setColumnState] = useState<Partial<DataTableColumnState>>({});
+ *
+ * <DataTableColumnPicker
+ *   columns={columns}
+ *   columnState={columnState}
+ *   onColumnStateChange={setColumnState}
+ * />
+ * <DataTable
+ *   data={rows}
+ *   columns={columns}
+ *   columnState={columnState}
+ *   onColumnStateChange={setColumnState}
+ * />
+ * ```
+ *
+ * @see {@link DataTable} - `hideableColumns` adds "Hide column" to its header menu
+ *
+ * @accessibility
+ * - The list is a multi-select listbox: arrows move, Space or Enter toggles
+ * - Escape closes it and returns focus to the button
+ */
+export declare const DataTableColumnPicker: <Row>({ columns, columnState, onColumnStateChange, label, className, }: DataTableColumnPickerProps<Row>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default DataTableColumnPicker;

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

@@ -0,0 +1,10 @@
+/** The empty header above the expand buttons. */
+export declare const ExpanderHeaderCell: () => import("@emotion/react/jsx-runtime").JSX.Element;
+interface ExpanderCellProps {
+    hasChildren: boolean;
+    isExpanded: boolean;
+    onToggle: () => void;
+}
+/** A row's expand/collapse button, or nothing for a row without children. */
+export declare const ExpanderCell: ({ hasChildren, isExpanded, onToggle, }: ExpanderCellProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+import { DataTableSelectionMode } from './types';
+interface SelectionHeaderCellProps {
+    mode: Exclude<DataTableSelectionMode, 'none'>;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    onToggle: () => void;
+}
+/** The header of the selection column: select-all, or a label for radios. */
+export declare const SelectionHeaderCell: ({ mode, checked, indeterminate, disabled, onToggle, }: SelectionHeaderCellProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+interface SelectionCellProps {
+    mode: Exclude<DataTableSelectionMode, 'none'>;
+    /** Groups the radios of one table. */
+    name: string;
+    rowId: string;
+    label: string;
+    checked: boolean;
+    /** Some of the rows below are selected, not all. */
+    indeterminate?: boolean;
+    disabled: boolean;
+    onChange: (checked: boolean) => void;
+}
+/** A row's checkbox or radio. */
+export declare const SelectionCell: ({ mode, name, rowId, label, checked, indeterminate, disabled, onChange, }: SelectionCellProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,4 @@
+export { default } from './DataTable';
+export { DataTableColumnPicker } from './DataTableColumnPicker';
+export type { DataTableColumnPickerProps } from './DataTableColumnPicker';
+export * from './types';

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

@@ -0,0 +1,47 @@
+import { Theme } from '@emotion/react';
+export declare const root: import("@emotion/react").SerializedStyles;
+/** A header button that looks like the header text it wraps. */
+export declare const sortButton: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const headerLabel: import("@emotion/react").SerializedStyles;
+/** Rows stay readable but plainly stale while a re-fetch is in flight. */
+export declare const busyBody: import("@emotion/react").SerializedStyles;
+export declare const clickableRow: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const stateCell: (theme: Theme) => import("@emotion/react").SerializedStyles;
+/**
+ * Every header cell. Relative so the grip, the menu and the drop line have
+ * something to sit against; a frozen header keeps its sticky position, whose
+ * rule in TableBase is the more specific one.
+ */
+export declare const header: (theme: Theme) => import("@emotion/react").SerializedStyles;
+/** Room on the right for the menu, so long header text never runs under it. */
+export declare const headerWithMenu: import("@emotion/react").SerializedStyles;
+/**
+ * Pinned to the right edge of the header, clear of the resize handle, so it
+ * lines up from column to column whatever the header text.
+ */
+export declare const headerMenu: import("@emotion/react").SerializedStyles;
+/**
+ * Sits in the cell's left padding, so showing it never moves the header
+ * text. Hidden until the header is hovered, like the column menu.
+ */
+export declare const grip: import("@emotion/react").SerializedStyles;
+/** The checkbox or radio column: narrow, its control centred. */
+export declare const selectionCell: import("@emotion/react").SerializedStyles;
+export declare const selectedRow: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const visuallyHidden: import("@emotion/react").SerializedStyles;
+/** The expand/collapse column. */
+export declare const expanderCell: import("@emotion/react").SerializedStyles;
+export declare const expanderButton: (theme: Theme) => import("@emotion/react").SerializedStyles;
+/**
+ * A row given a `background` by getRowProps. The colour arrives as a custom
+ * property, so every tinted row shares this one class whatever its colour.
+ * Layered over white: frozen cells must stay opaque. Hover and selection
+ * rules come later or weigh more, so they paint over it.
+ */
+export declare const tintedRow: import("@emotion/react").SerializedStyles;
+/** A row with children, as NestedTable draws its group rows. */
+export declare const parentRow: (theme: Theme) => import("@emotion/react").SerializedStyles;
+/** A tinted row with children: the row's tint over the parent grey. */
+export declare const tintedParentRow: (theme: Theme) => import("@emotion/react").SerializedStyles;
+/** A selected row with children: the selected tint over the parent grey. */
+export declare const selectedParentRow: (theme: Theme) => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,378 @@
+import { CSSProperties, KeyboardEvent, MouseEvent, ReactNode, Ref } from 'react';
+import { ColumnResizeMode } from '../Table/types';
+/** Direction of a {@link DataTableSort}. */
+export type DataTableSortDirection = 'asc' | 'desc';
+/**
+ * How many rows of a {@link DataTable} the user can select: `multiple` adds a
+ * checkbox column with a select-all checkbox, `single` a radio column.
+ */
+export type DataTableSelectionMode = 'none' | 'single' | 'multiple';
+/**
+ * Attributes a {@link DataTable} adds to one body row or cell, returned by
+ * `getRowProps` on the table or `getCellProps` on a column. For styling a row
+ * or cell from its data.
+ *
+ * @example
+ * ```ts
+ * getRowProps: (row) => ({
+ *   className: row.excluded ? 'excluded' : undefined,
+ *   background: row.awaitingReply ? 'rgba(242, 136, 142, 0.08)' : undefined,
+ * })
+ * ```
+ */
+export interface DataTableElementProps {
+    /** Added to the element's class names. */
+    className?: string;
+    /**
+     * Inline style of the element. On a row, a `background` here is hidden by
+     * the cells, which paint their own; use the `background` field instead.
+     */
+    style?: CSSProperties;
+    /**
+     * A colour painted over the cells, such as a translucent tint. Laid over
+     * white, so frozen cells stay opaque. On a row, the hover and selected
+     * states show over it; on a cell, it stays.
+     */
+    background?: string;
+    /** `data-*` attributes, for CSS or tests. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+}
+/**
+ * The column a {@link DataTable} is sorted by. One column at a time; `null`
+ * when the rows are in the order they were given.
+ */
+export interface DataTableSort {
+    /** `id` of the sorted column. */
+    columnId: string;
+    direction: DataTableSortDirection;
+}
+/**
+ * One column of a {@link DataTable}.
+ *
+ * @example
+ * ```tsx
+ * const columns: DataTableColumn<Employee>[] = [
+ *   { id: 'name', header: 'Name', cell: (row) => row.name, sortable: true },
+ *   { id: 'salary', header: 'Salary', cell: (row) => fmt(row.salary), align: 'right' },
+ * ];
+ * ```
+ */
+export interface DataTableColumn<Row> {
+    /**
+     * Stable, unique id. Column state (order, widths, frozen, hidden) and the
+     * sort refer to columns by it, so it must not change between renders.
+     */
+    id: string;
+    /** Header cell content. */
+    header: ReactNode;
+    /**
+     * Body cell content for a row. `rowIndex` is the row's position as shown,
+     * after sorting, not its index in `data`.
+     */
+    cell: (row: Row, rowIndex: number) => ReactNode;
+    /**
+     * Text alignment of the header and body cells.
+     * @default 'left'
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * Whether clicking the header sorts by this column.
+     * @default false
+     */
+    sortable?: boolean;
+    /**
+     * The name the server knows this column by, when it differs from `id`.
+     * Handed to `onSortChange` as its second argument.
+     * @default id
+     */
+    sortKey?: string;
+    /**
+     * Sorts the rows in the browser while this column is the sorted one.
+     * Without it, sorting only reports the new sort through `onSortChange` and
+     * the rows are expected to arrive sorted, which is right for server data.
+     *
+     * Compare ascending; the table reverses the result for `desc`.
+     *
+     * @example
+     * ```ts
+     * sortFn: (a, b) => a.name.localeCompare(b.name)
+     * ```
+     */
+    sortFn?: (a: Row, b: Row) => number;
+    /**
+     * Starting width in pixels, used until the user resizes the column or
+     * `columnState.widths` says otherwise. Columns without one are measured on
+     * first layout.
+     */
+    width?: number;
+    /**
+     * Narrowest the user can resize this column to, in pixels. Overrides the
+     * table's `minColumnWidth`.
+     */
+    minWidth?: number;
+    /**
+     * Widest the user can resize this column to, in pixels. Overrides the
+     * table's `maxColumnWidth`.
+     */
+    maxWidth?: number;
+    /**
+     * Class name, style, background or data attributes for this column's body
+     * cell in a given row, such as colouring a cell by its value. Header cells
+     * are not affected.
+     *
+     * @example
+     * ```ts
+     * getCellProps: (row) => ({ background: heatColor(row.score) })
+     * ```
+     */
+    getCellProps?: (row: Row, rowIndex: number) => DataTableElementProps;
+    /**
+     * Whether the user can resize this column, in a table with
+     * `resizableColumns`. Turn it off for actions or checkbox columns.
+     * @default true
+     */
+    resizable?: boolean;
+    /**
+     * Whether the header offers the freeze menu, in a table with
+     * `freezeControls`. The column can still be frozen through `columnState`.
+     * @default true
+     */
+    freezable?: boolean;
+    /**
+     * Whether the user can move this column, in a table with
+     * `reorderableColumns`. A column that cannot move keeps its place, and the
+     * others move past it.
+     * @default true
+     */
+    reorderable?: boolean;
+    /**
+     * Whether the user can hide this column, from its header menu in a table
+     * with `hideableColumns`, or from `DataTableColumnPicker`. The column can
+     * still be hidden through `columnState`.
+     * @default true
+     */
+    hideable?: boolean;
+}
+/**
+ * Everything about a {@link DataTable}'s columns the user can change, keyed
+ * by column id, so it survives columns being added, removed or reordered.
+ * Store it whole to remember a user's layout.
+ */
+export interface DataTableColumnState {
+    /**
+     * Column ids in display order. Columns missing from it follow, in the
+     * order of `columns`.
+     */
+    order: string[];
+    /** Width in pixels per column id. */
+    widths: Record<string, number>;
+    /** Column ids frozen to each edge. */
+    frozen: {
+        start: string[];
+        end: string[];
+    };
+    /** Ids of columns that are not shown. */
+    hidden: string[];
+}
+/**
+ * Props of {@link DataTable}.
+ *
+ * @example
+ * ```tsx
+ * <DataTable data={rows} columns={columns} />
+ * ```
+ */
+export interface DataTableProps<Row> {
+    /** Rows to show, in the order to show them unless a column sorts them. */
+    data: Row[];
+    /**
+     * Column definitions. Every `id` must be unique. Need not be memoised:
+     * the table only rebuilds its model when the columns' ids or sort settings
+     * change, and always renders with the latest `header` and `cell`.
+     */
+    columns: DataTableColumn<Row>[];
+    /**
+     * Stable id of a row, for rows whose id is not in an `id` field, such as
+     * `employeeId` or a key built from several fields. Rows are keyed by it
+     * and selection and expanded state refer to it.
+     *
+     * Without it, a row's own `id` (string or number) is used. Rows without
+     * either are keyed by position, children under their parent (`"2.0"`),
+     * which remounts cells whenever the order changes.
+     * @default (row) => String(row.id)
+     */
+    getRowId?: (row: Row, index: number) => string;
+    /**
+     * Column layout, for the controlled case. Partial values are filled in
+     * with defaults. Hold it in state and update it from
+     * `onColumnStateChange`.
+     */
+    columnState?: Partial<DataTableColumnState>;
+    /** Starting column layout, for the uncontrolled case. */
+    defaultColumnState?: Partial<DataTableColumnState>;
+    /**
+     * Called whenever the user changes the layout: on every frame of a resize
+     * drag, when moving or hiding a column, and when freezing or unfreezing. Not called for widths the table
+     * measures itself on first layout.
+     */
+    onColumnStateChange?: (columnState: DataTableColumnState) => void;
+    /**
+     * Lets the user resize columns by dragging the right edge of the header.
+     * @default false
+     */
+    resizableColumns?: boolean;
+    /**
+     * How a resize spends width. `fit` keeps the table's width: the resizable
+     * columns to the right share the change, in proportion to their widths.
+     * `expand` grows or shrinks the table instead, so it scrolls sideways.
+     * @default 'fit'
+     */
+    columnResizeMode?: ColumnResizeMode;
+    /**
+     * Narrowest a column can be resized to, in pixels. A column's own
+     * `minWidth` wins.
+     * @default 64
+     */
+    minColumnWidth?: number;
+    /**
+     * Widest a column can be resized to, in pixels. A column's own `maxWidth`
+     * wins. Unbounded when omitted.
+     */
+    maxColumnWidth?: number;
+    /**
+     * Gives every header a menu to freeze its column to either edge.
+     * @default false
+     */
+    freezeControls?: boolean;
+    /**
+     * Lets the user move columns: by dragging the grip at the left of the
+     * header, or with "Move left" and "Move right" in the header menu. A column
+     * moves only among columns frozen to the same edge, or among the unfrozen
+     * ones. The order is kept in `columnState.order`.
+     * @default false
+     */
+    reorderableColumns?: boolean;
+    /**
+     * Adds "Hide column" to the header menu. The last visible column cannot be
+     * hidden. Hidden columns are kept in `columnState.hidden`; bring them back
+     * with `DataTableColumnPicker`.
+     * @default false
+     */
+    hideableColumns?: boolean;
+    /**
+     * Keeps the header in view while the rows scroll. Give the table a height
+     * limit through `maxHeight`.
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /**
+     * Tallest the table gets before it scrolls vertically. Any CSS value.
+     * Unbounded when omitted, so only horizontal overflow scrolls.
+     */
+    maxHeight?: string | number;
+    /** Sorted column, for the controlled case. `null` for none. */
+    sort?: DataTableSort | null;
+    /** Starting sort, for the uncontrolled case. */
+    defaultSort?: DataTableSort | null;
+    /**
+     * Called when a sortable header is clicked. A column starts ascending and
+     * toggles between ascending and descending after that. The second argument
+     * is the column's `sortKey` (its `id` without one), ready for a request.
+     */
+    onSortChange?: (sort: DataTableSort | null, sortKey: string | null) => void;
+    /**
+     * Marks the table busy. Rows already shown stay, dimmed, so a re-fetch
+     * after sorting does not make the table jump; with no rows yet,
+     * `loadingState` is shown instead.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Shown in place of the rows while loading with none to show.
+     * @default 'Loading…'
+     */
+    loadingState?: ReactNode;
+    /**
+     * Shown in place of the rows when there are none.
+     * @default 'No results'
+     */
+    emptyState?: ReactNode;
+    /**
+     * Called when a row is clicked, or when Enter is pressed on a focused row;
+     * rows become focusable when this is set. Clicks on a button, link, input
+     * or menu inside the row keep their own behaviour.
+     *
+     * Screen readers do not announce a row as actionable, so also give the
+     * row a link or button in a cell when the action matters.
+     */
+    onRowClick?: (row: Row, event: MouseEvent<HTMLTableRowElement> | KeyboardEvent<HTMLTableRowElement>) => void;
+    /**
+     * Class name, style, background or data attributes for a body row, such as
+     * tinting rows that need attention. Each row also carries `data-row-id`.
+     *
+     * @example
+     * ```ts
+     * getRowProps: (row) => (row.excluded ? { className: 'excluded' } : {})
+     * ```
+     */
+    getRowProps?: (row: Row, rowIndex: number) => DataTableElementProps;
+    /**
+     * Children of a row, shown nested under it, to any depth. Rows with
+     * children get an expand button in a column at the start, and their own
+     * styling; children are indented. A sorted column sorts the children of
+     * each row among themselves.
+     *
+     * @example
+     * ```ts
+     * getSubRows: (team) => team.members
+     * ```
+     */
+    getSubRows?: (row: Row) => Row[] | undefined;
+    /** Ids of the expanded rows, for the controlled case. */
+    expandedRowIds?: string[];
+    /**
+     * Which rows start expanded, for the uncontrolled case: `true` for all,
+     * including rows that arrive later, or a list of ids.
+     * @default false
+     */
+    defaultExpanded?: boolean | string[];
+    /** Called with the ids of the expanded rows whenever the user changes them. */
+    onExpandedChange?: (expandedRowIds: string[]) => void;
+    /**
+     * Lets the user select rows: `multiple` adds a checkbox column whose header
+     * checkbox selects or clears the rows shown, `single` a radio column.
+     * With `getSubRows`, selecting a row selects everything under it, and a
+     * row with some of its children selected shows a partial check.
+     * Selection is kept as row ids (see `getRowId`), so rows selected on
+     * another page stay selected.
+     * @default 'none'
+     */
+    selectionMode?: DataTableSelectionMode;
+    /** Ids of the selected rows, for the controlled case. */
+    selectedRowIds?: string[];
+    /** Ids of the rows selected at first, for the uncontrolled case. */
+    defaultSelectedRowIds?: string[];
+    /** Called with the ids of the selected rows whenever the user changes them. */
+    onSelectionChange?: (selectedRowIds: string[]) => void;
+    /**
+     * Whether a row can be selected. Rows that cannot get a disabled checkbox
+     * and are skipped by the header checkbox.
+     *
+     * With `getSubRows`, a row that cannot be selected but has rows below it
+     * that can keeps an enabled checkbox, which selects those rows. Its own id
+     * is never in the selection, even when its checkbox shows checked.
+     */
+    isRowSelectable?: (row: Row) => boolean;
+    /**
+     * Accessible name of a row's selection checkbox, such as the person's
+     * name. Without it the row is named by its position.
+     * @default (row, rowIndex) => `Select row ${rowIndex + 1}`
+     */
+    getRowLabel?: (row: Row, rowIndex: number) => string;
+    /** Rendered below the table, such as `Pagination`. */
+    footer?: ReactNode;
+    /** Class name of the outer container. */
+    className?: string;
+    /** Forwarded to the `table` element. */
+    ref?: Ref<HTMLTableElement>;
+}

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

@@ -0,0 +1,31 @@
+import { PointerEvent, RefObject } from 'react';
+/** A drag in progress: the column held, and the column it would drop on. */
+export interface ColumnDrag {
+    id: string;
+    overId: string | null;
+}
+interface UseColumnReorderOptions {
+    tableRef: RefObject<HTMLTableElement | null>;
+    /** Whether `id` may be dropped where `targetId` is. */
+    canDrop: (id: string, targetId: string) => boolean;
+    onDrop: (id: string, targetId: string) => void;
+}
+/**
+ * Drag-to-reorder for header grips. The pointer is captured by the grip, and
+ * the drop target is whichever header cell is under it horizontally, so the
+ * pointer can wander above or below the header. Escape cancels.
+ *
+ * State changes only when the target does, not on every move, so a drag
+ * re-renders the table a handful of times rather than once per frame.
+ */
+export declare const useColumnReorder: ({ tableRef, canDrop, onDrop, }: UseColumnReorderOptions) => {
+    drag: ColumnDrag | null;
+    getGripProps: (id: string) => {
+        onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+        onPointerMove: (event: PointerEvent<HTMLElement>) => void;
+        onPointerUp: () => void;
+        onPointerCancel: () => void;
+        onLostPointerCapture: () => void;
+    };
+};
+export {};

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

@@ -0,0 +1,36 @@
+import { DataTableColumn, DataTableColumnState, DataTableSort } from './types';
+interface UseDataTableModelOptions<Row> {
+    data: Row[];
+    columns: DataTableColumn<Row>[];
+    getRowId?: (row: Row, index: number) => string;
+    getSubRows?: (row: Row) => Row[] | undefined;
+    /** Ids of the expanded rows, or `true` for all of them. */
+    expanded: true | string[];
+    columnState: DataTableColumnState;
+    sort: DataTableSort | null;
+}
+/** A visible row, in display order, with what rendering needs. */
+export interface DataTableModelRow<Row> {
+    id: string;
+    original: Row;
+    /** 0 for a top-level row, 1 for its children, and so on. */
+    depth: number;
+    hasChildren: boolean;
+    isExpanded: boolean;
+}
+/** Where a row sits in the tree, expanded or not. */
+export interface DataTableTreeNode<Row> {
+    original: Row;
+    parentId?: string;
+    childIds: string[];
+}
+/**
+ * Turns the public props into rows and columns in display order. The only
+ * place TanStack Table is used, so it never reaches the public API.
+ */
+export declare const useDataTableModel: <Row>({ data, columns, getRowId, getSubRows, expanded, columnState, sort, }: UseDataTableModelOptions<Row>) => {
+    visibleColumns: DataTableColumn<Row>[];
+    rows: DataTableModelRow<Row>[];
+    tree: Map<string, DataTableTreeNode<Row>>;
+};
+export {};