@ssa-ui-kit/core 3.26.4 → 3.27.1

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

@@ -5,6 +5,8 @@ import { ControlledButtonProps } from '../Dropdown/types';
 export interface DropdownToggleProps extends CommonProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, ControlledButtonProps> {
     /** Emotion css prop forwarded to the underlying styled button */
     css?: Interpolation<Theme>;
+    /** Ref to the button, e.g. to return focus to it. */
+    ref?: React.Ref<HTMLButtonElement>;
     onClick: (e: React.MouseEvent<HTMLElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLButtonElement, Element>) => void;
     isOpen: boolean;

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

@@ -98,6 +98,27 @@ export type DropdownProps<P extends DropdownOptionProps> = {
      * matching the behaviour of previous versions.
      */
     width?: string | number;
+    /**
+     * Adds a search box above the open list. Typing filters the options by
+     * their text (case-insensitive, anywhere in the text); a group stays while
+     * any of its options match. Options whose `children` is markup are matched
+     * by their `textValue`. Selections outside the current search are kept.
+     *
+     * Focus moves to the search box on open and keeps driving the list: arrows
+     * move the highlight, Enter toggles, Escape clears the search, then closes.
+     * @default false
+     */
+    searchable?: boolean;
+    /**
+     * Placeholder and accessible name of the search box.
+     * @default 'Search'
+     */
+    searchPlaceholder?: string;
+    /**
+     * Shown in the list when nothing matches the search.
+     * @default 'No results found'
+     */
+    searchEmptyState?: React.ReactNode;
 };
 /**
  * Context value shared with child DropdownOption components via MultipleDropdownContext
@@ -127,4 +148,8 @@ export interface DropdownContextType<T extends DropdownOptionProps> {
      * Updates the highlighted option
      */
     setActiveValue?: (value: string | number | null) => void;
+    /** The list sits in the search card, which does the positioning. */
+    searchable?: boolean;
+    /** Shown when the list has no options. */
+    emptyState?: React.ReactNode;
 }

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';