@ssa-ui-kit/core 3.26.4 → 3.27.0

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

@@ -0,0 +1,82 @@
+import { CSSProperties } from 'react';
+import { DataTableColumn, DataTableColumnState, DataTableElementProps, DataTableSort } from './types';
+/** Width of the checkbox or radio column, in pixels. */
+export declare const SELECTION_COLUMN_WIDTH = 48;
+/** Width of the expand/collapse column, in pixels. */
+export declare const EXPANDER_COLUMN_WIDTH = 36;
+/** Extra left padding of a nested row's first cell, per level. */
+export declare const NESTED_INDENT = 24;
+export declare const EMPTY_COLUMN_STATE: DataTableColumnState;
+/** Fills a partial column state in with defaults. */
+export declare const toColumnState: (value?: Partial<DataTableColumnState>) => DataTableColumnState;
+/**
+ * What the TanStack model depends on. Header and cell renderers are left out
+ * on purpose: they are read from the latest `columns` at render time, so an
+ * inline `columns` array does not rebuild the model on every render.
+ */
+export declare const getColumnsSignature: <Row>(columns: DataTableColumn<Row>[]) => string;
+/**
+ * The sort after a click on a sortable header: the same column flips
+ * direction, another column starts ascending.
+ */
+export declare const getNextSort: (current: DataTableSort | null, columnId: string) => DataTableSort;
+/** Whether a click landed on something inside a row with its own behaviour. */
+export declare const isInteractiveTarget: (target: EventTarget | null, row: HTMLElement) => boolean;
+/**
+ * Every column id in display order: `order` first, skipping unknown ids, then
+ * the rest in the order of `columns`. The same rule TanStack applies.
+ */
+export declare const getFullOrder: <Row>(columns: DataTableColumn<Row>[], order: string[]) => string[];
+/** Where a column sits while scrolling: frozen to an edge, or not. */
+export declare const getFreezeZone: (frozen: DataTableColumnState["frozen"], id: string) => "start" | "end" | "scroll";
+/**
+ * Moves column `id` to where `targetId` is, shifting the columns between.
+ * Only the slots `canMoveTo` accepts take part, so every other column keeps
+ * its position. Returns `null` when the target is not one of those slots.
+ */
+export declare const moveColumn: (order: string[], id: string, targetId: string, canMoveTo: (id: string) => boolean) => string[] | null;
+/** The nearest slot `canMoveTo` accepts on one side of column `id`. */
+export declare const getAdjacentColumn: (order: string[], id: string, side: "left" | "right", canMoveTo: (id: string) => boolean) => string | null;
+/** How a row's checkbox shows. */
+export type CheckState = 'checked' | 'partial' | 'unchecked';
+/**
+ * Cascading selection over a tree of rows. A row with selectable
+ * descendants is not selected for itself: it follows the leaves below it,
+ * checked when all are, partly when some are. Its id is in the selection
+ * exactly when it is checked, so the ids still name every selected row —
+ * unless `canSelect` rejects it: its checkbox still selects the rows below,
+ * but its own id is never in the selection.
+ *
+ * Ids not in the tree, such as rows on another page, are left alone.
+ */
+export declare const createSelectionTree: (tree: Map<string, {
+    parentId?: string;
+    childIds: string[];
+}>, canSelect: (id: string) => boolean) => {
+    rowState: (id: string, selected: Set<string>) => CheckState;
+    /** Whether the row has anything to select, itself or below. */
+    isSelectable: (id: string) => boolean;
+    allState: (selected: Set<string>) => CheckState;
+    toggleRow: (ids: string[], id: string, on: boolean) => string[];
+    toggleAll: (ids: string[], on: boolean) => string[];
+};
+/**
+ * A row's own `id` field as a row id, when it has a string or number one.
+ * What a table without `getRowId` keys its rows by.
+ */
+export declare const getOwnRowId: (row: unknown) => string | undefined;
+/**
+ * Turns what `getRowProps` returned into props for the row element. The
+ * `background` travels as a custom property for the `tintedRow` style, so it
+ * reaches the cells, which paint their own background over the row's.
+ */
+export declare const toRowElementProps: ({ background, style, ...rest }?: DataTableElementProps) => Omit<DataTableElementProps, "background"> & {
+    isTinted: boolean;
+};
+/**
+ * Turns what a column's `getCellProps` returned into props for the cell
+ * element. The table's own style, the nested indent, wins over the column's,
+ * so a cell style cannot flatten the tree. The `background` is inline, so it
+ * outlasts the row's hover and selected states.
+ */
+export declare const toCellElementProps: ({ background, style, ...rest }?: DataTableElementProps, ownStyle?: CSSProperties) => Omit<DataTableElementProps, "background">;

package/dist/components/NestedTable/WithNestedTableRow.d.ts

@@ -12,6 +12,10 @@ import { WithNestedTableRowProps } from './types';
  * and ignores `defaultCollapsed` — otherwise it could start collapsed with no
  * way to reopen it.
  *
+ * @deprecated Use `DataTable` with `getSubRows` instead: it nests rows from
+ * data, to any depth, with accessible expand buttons. `NestedTable` is
+ * removed in the next major release.
+ *
  * @category Components
  * @subcategory Data Display
  *

package/dist/components/NestedTable/components/NestedTable.d.ts

@@ -39,6 +39,10 @@ import { TableProps } from '../../Table/types';
  * opaque one — a translucent row would let scrolled content show through.
  * With resizing on, the table renders its own `colgroup`; drop any you had.
  *
+ * @deprecated Use `DataTable` with `getSubRows` instead: it nests rows from
+ * data, to any depth, with accessible expand buttons. `NestedTable` is
+ * removed in the next major release.
+ *
  * @category Components
  * @subcategory Data Display
  *

package/dist/components/NestedTable/components/NestedTableCell.d.ts

@@ -15,6 +15,10 @@ import { NestedTableCellBaseProps } from './NestedTableCellBase';
  * Borders and background are cleared so the group reads as one block; the row
  * supplies the shading.
  *
+ * @deprecated Use `DataTable` with `getSubRows` instead: it nests rows from
+ * data, to any depth, with accessible expand buttons. `NestedTable` is
+ * removed in the next major release.
+ *
  * @category Components
  * @subcategory Data Display
  *

package/dist/components/NestedTable/components/NestedTableCellHeader.d.ts

@@ -12,6 +12,10 @@ import { NestedTableCellHeaderProps } from '../types';
  * toggle column the row adds in front gets no handle or menu, and does not
  * count as a column — `0` is the first header cell you render.
  *
+ * @deprecated Use `DataTable` with `getSubRows` instead: it nests rows from
+ * data, to any depth, with accessible expand buttons. `NestedTable` is
+ * removed in the next major release.
+ *
  * @category Components
  * @subcategory Data Display
  *

package/dist/components/NestedTable/components/NestedTableRow.d.ts

@@ -17,6 +17,10 @@ import { HTMLAttributes } from 'react';
  * it collapses or expands the rest of the group. Later rows are the collapsible
  * body. A group holding only one row shows no toggle and never collapses.
  *
+ * @deprecated Use `DataTable` with `getSubRows` instead: it nests rows from
+ * data, to any depth, with accessible expand buttons. `NestedTable` is
+ * removed in the next major release.
+ *
  * @category Components
  * @subcategory Data Display
  *

package/dist/components/Table/ColumnFreezeMenu.d.ts

@@ -1,4 +1,14 @@
-import { ColumnFreezeMenuProps } from './types';
+import { ColumnFreezeMenuProps, ColumnId, FrozenColumns } from './types';
+/** Which edge a column is frozen to, if any. */
+export declare const getFrozenEdge: ({ start, end }: Required<FrozenColumns>, id: ColumnId) => "start" | "end" | null;
+/**
+ * The freeze actions for one column's header menu, each with the frozen
+ * columns it leads to. Shared by `ColumnFreezeMenu` and `DataTable`.
+ */
+export declare const getFreezeMenuItems: (frozen: Required<FrozenColumns>, id: ColumnId) => {
+    label: string;
+    next: Required<FrozenColumns>;
+}[];
 /**
  * ColumnFreezeMenu - The freeze/unfreeze menu in a table header cell
  *

package/dist/components/Table/ColumnMenu.d.ts

@@ -0,0 +1,30 @@
+import { Ref } from 'react';
+/** Where a column menu sits in its header cell. */
+export declare const ColumnMenuAnchor: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+/** One action of a {@link ColumnMenu}. */
+export interface ColumnMenuItem {
+    label: string;
+    onSelect: () => void;
+    disabled?: boolean;
+}
+interface ColumnMenuProps {
+    items: ColumnMenuItem[];
+    /** Accessible name of the menu. */
+    label: string;
+    /** Accessible name of the trigger button. */
+    triggerLabel: string;
+    /** Shows the lock icon, and keeps the trigger visible. */
+    frozen?: boolean;
+    ref?: Ref<HTMLSpanElement>;
+    className?: string;
+}
+/**
+ * The menu button of a table header cell: a trigger that shows on hover and
+ * opens a list of actions. `ColumnFreezeMenu` and `DataTable`'s column menu
+ * are both built on it.
+ */
+export declare const ColumnMenu: ({ items, label, triggerLabel, frozen, ref, className, }: ColumnMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table/Table.d.ts

@@ -23,10 +23,10 @@ import { TableProps } from './types';
  * it would have had anyway, then switches to `table-layout: fixed` and
  * truncates overflowing cell content with an ellipsis.
  *
- * By default a resize is a trade between two columns: the one to the right
- * gives up exactly what the dragged column gains, so the table stays the width
- * it was and nothing around it reflows. The last column has nothing to its
- * right to trade with, so it has no handle.
+ * By default a resize is paid for by the columns to the right: they give up
+ * what the dragged column gains, each in proportion to its width, so the table
+ * stays the width it was and nothing around it reflows. The last column has
+ * nothing to its right to trade with, so it has no handle.
  *
  * `columnResizeMode="expand"` opts into the other model — the table grows
  * with the dragged column and the others keep their widths — for tables that

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

@@ -3,9 +3,10 @@ import { CommonProps } from '../../types/emotion';
 /**
  * How a resize distributes width.
  *
- * - `fit` — the column to the right gives up what the dragged column gains, so
- *   the table's own width never changes. The last column cannot be dragged,
- *   having nothing to its right to trade with.
+ * - `fit` — the resizable columns to the right share out what the dragged
+ *   column gains or gives up, each in proportion to its width, so the table's
+ *   own width never changes. The last column cannot be dragged, having nothing
+ *   to its right to trade with.
  * - `expand` — the table grows and the other columns keep their widths, so the
  *   table needs a horizontally scrollable parent.
  */
@@ -41,8 +42,8 @@ export interface ColumnResizeOptions {
      */
     maxColumnWidth?: number;
     /**
-     * Whether a resize is paid for by the next column or by the table's own
-     * width. Defaults to `fit`, which keeps the table exactly as wide as it was
+     * Whether a resize is paid for by the columns to the right or by the
+     * table's own width. Defaults to `fit`, which keeps the table exactly as wide as it was
      * — surrounding layout never moves because a user dragged a column.
      *
      * Switch to `expand` when the table lives in its own scroll container and
@@ -218,7 +219,9 @@ export interface ColumnFreezeApi {
  * Props for the {@link Table} component.
  *
  * Every attribute of a `table` element, plus the column-resizing options that
- * `resizableColumns` turns on and the column-freezing options.
+ * `resizableColumns` turns on and the column-freezing options. The column
+ * options are deprecated: for tables with column features, use `DataTable`,
+ * which keeps them by column id.
  *
  * @example
  * ```tsx
@@ -239,6 +242,74 @@ export interface TableProps extends CommonProps, ColumnResizeOptions, ColumnFree
      * `columnResizeMode`.
      *
      * @default false
+     * @deprecated Use `DataTable`'s `resizableColumns` instead: it keeps
+     * widths by column id. Removed from `Table` in the next major release.
      */
     resizableColumns?: boolean;
+    /**
+     * Column widths in pixels, one per column, for the controlled case.
+     *
+     * @deprecated Use `DataTable`'s `columnState.widths`, keyed by column id instead. Removed from `Table` in the next major release.
+     */
+    columnWidths?: number[];
+    /**
+     * Starting column widths in pixels, for the uncontrolled case.
+     *
+     * @deprecated Use `DataTable`'s `defaultColumnState.widths` instead. Removed from `Table` in the next major release.
+     */
+    defaultColumnWidths?: number[];
+    /**
+     * Called on every width change, including each frame of a drag.
+     *
+     * @deprecated Use `DataTable`'s `onColumnStateChange` instead. Removed from `Table` in the next major release.
+     */
+    onColumnWidthsChange?: (columnWidths: number[]) => void;
+    /**
+     * Narrowest a column can be dragged, in pixels.
+     *
+     * @deprecated Use `DataTable`'s `minColumnWidth` instead. Removed from `Table` in the next major release.
+     */
+    minColumnWidth?: number;
+    /**
+     * Widest a column can be dragged, in pixels.
+     *
+     * @deprecated Use `DataTable`'s `maxColumnWidth` instead. Removed from `Table` in the next major release.
+     */
+    maxColumnWidth?: number;
+    /**
+     * Whether a resize is paid for by the columns to the right or by the table's own width.
+     *
+     * @deprecated Use `DataTable`'s `columnResizeMode` instead. Removed from `Table` in the next major release.
+     */
+    columnResizeMode?: ColumnResizeMode;
+    /**
+     * Columns frozen to each edge, for the controlled case.
+     *
+     * @deprecated Use `DataTable`'s `columnState.frozen` instead. Removed from `Table` in the next major release.
+     */
+    frozenColumns?: FrozenColumns;
+    /**
+     * Columns frozen to each edge to begin with.
+     *
+     * @deprecated Use `DataTable`'s `defaultColumnState.frozen` instead. Removed from `Table` in the next major release.
+     */
+    defaultFrozenColumns?: FrozenColumns;
+    /**
+     * Called whenever the user freezes or unfreezes columns.
+     *
+     * @deprecated Use `DataTable`'s `onColumnStateChange` instead. Removed from `Table` in the next major release.
+     */
+    onFrozenColumnsChange?: (frozenColumns: Required<FrozenColumns>) => void;
+    /**
+     * Gives every `TableCellHeader` a menu to freeze its column.
+     *
+     * @deprecated Use `DataTable`'s `freezeControls` instead. Removed from `Table` in the next major release.
+     */
+    freezeControls?: boolean;
+    /**
+     * Keeps the header row in view while the table scrolls vertically.
+     *
+     * @deprecated Use `DataTable`'s `stickyHeader` with `maxHeight` instead. Removed from `Table` in the next major release.
+     */
+    stickyHeader?: boolean;
 }

package/dist/components/TableCellHeader/TableCellHeader.d.ts

@@ -62,5 +62,5 @@ import { TableCellHeaderProps } from './types';
  * - Supports ARIA attributes via TableCellProps
  * - Better accessibility than using TableCell in headers
  */
-declare const TableCellHeader: ({ children, resizable, freezable, columnId, ...props }: React.PropsWithChildren<TableCellHeaderProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const TableCellHeader: ({ children, resizable, freezable, columnId, minWidth, maxWidth, ...props }: React.PropsWithChildren<TableCellHeaderProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default TableCellHeader;

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

@@ -32,11 +32,10 @@ export interface TableCellHeaderProps extends TableCellProps {
      * `resizableColumns`. Set it to `false` to pin a column — an actions or
      * checkbox column, typically — at a width the user cannot change.
      *
-     * In the default `fit` mode this also removes the handle from the column to
-     * its *left*, because that handle resizes by trading width with this one and
-     * would otherwise move a column the user was told they could not move. In
-     * `expand` mode nothing pays for a resize, so only this column's own handle
-     * goes.
+     * In the default `fit` mode this column also keeps its width when a column
+     * to its left is resized: the other columns to the right absorb the change,
+     * and a handle with no such column left is hidden. In `expand` mode nothing
+     * pays for a resize, so only this column's own handle goes.
      *
      * Ignored outside a resizable table.
      *
@@ -52,6 +51,16 @@ export interface TableCellHeaderProps extends TableCellProps {
      * @default true
      */
     freezable?: boolean;
+    /**
+     * Narrowest this column can be resized to, in pixels, inside a `Table` with
+     * `resizableColumns`. Overrides the table's `minColumnWidth`.
+     */
+    minWidth?: number;
+    /**
+     * Widest this column can be resized to, in pixels, inside a `Table` with
+     * `resizableColumns`. Overrides the table's `maxColumnWidth`.
+     */
+    maxWidth?: number;
     /**
      * Stable id for this column, used by `frozenColumns` on the `Table`. Give
      * every header one when the app can hide or reorder columns, so frozen

package/dist/components/index.d.ts

@@ -62,6 +62,8 @@ export { default as FormRadioGroup } from './FormRadioGroup';
 export * from './Filters';
 export * from './FiltersMultiSelect';
 export * as JsonSchema from './JsonSchemaForm';
+export { default as DataTable, DataTableColumnPicker } from './DataTable';
+export type { DataTableColumn, DataTableColumnPickerProps, DataTableColumnState, DataTableElementProps, DataTableProps, DataTableSelectionMode, DataTableSort, DataTableSortDirection, } from './DataTable';
 export { default as Table } from './Table';
 export { ColumnFreezeMenu, ColumnResizeHandle, useColumnFreezeContext, useColumnResize, useColumnResizeContext, } from './Table';
 export type { ColumnFreezeApi, ColumnFreezeMenuProps, ColumnFreezeOptions, ColumnId, ColumnResizeApi, ColumnResizeHandleProps, ColumnResizeMode, ColumnResizeOptions, FrozenColumns, ResizeHandleProps, TableProps, UseColumnResizeOptions, } from './Table';