@ssa-ui-kit/core 3.23.1 → 3.24.1

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

@@ -97,6 +97,12 @@ export interface UseColumnResizeOptions extends ColumnResizeOptions {
 export interface ColumnResizeApi {
     /** Current width of each column, in pixels. Empty until measured. */
     columnWidths: number[];
+    /**
+     * Positions of the columns the table added on its own, such as the toggle
+     * column of a `NestedTable`. In `fit` mode they keep their width exactly,
+     * and only the other columns share out any space the table has to spare.
+     */
+    fixedColumns: number[];
     /** Attach to the `table` element so the hook can measure its columns. */
     tableRef: RefObject<HTMLTableElement | null>;
     /** Whether a drag is in progress. */
@@ -119,11 +125,100 @@ export interface ColumnResizeApi {
     /** Builds the props for the drag handle of a given column. */
     getResizeHandleProps: (index: number) => ResizeHandleProps;
 }
+/**
+ * Identifies a table column: the `columnId` of its `TableCellHeader`, or its
+ * zero-based position when the header has none. Ids are compared as strings,
+ * so `3` and `'3'` are the same column.
+ */
+export type ColumnId = string | number;
+/**
+ * Which columns of a {@link Table} are frozen, and to which edge.
+ *
+ * A frozen column stays where it is until scrolling would take it out of view;
+ * from then on it sticks to its edge and the columns between it and the edge
+ * slide underneath. Several frozen columns on one edge stack up in column
+ * order.
+ *
+ * Give the header cells a `columnId` so the frozen state follows the column
+ * when the app hides or reorders columns; without one, a column is
+ * identified by its position.
+ *
+ * @example
+ * ```tsx
+ * const frozen: FrozenColumns = { start: ['name', 'status'], end: ['actions'] };
+ * ```
+ */
+export interface FrozenColumns {
+    /**
+     * Columns that stick to the left edge.
+     * @default []
+     */
+    start?: ColumnId[];
+    /**
+     * Columns that stick to the right edge.
+     * @default []
+     */
+    end?: ColumnId[];
+}
+/** Which columns, by position, are frozen to each edge, in column order. */
+export interface FrozenColumnIndices {
+    start: number[];
+    end: number[];
+}
+/** Options for freezing columns and the header row of a `Table`. */
+export interface ColumnFreezeOptions {
+    /**
+     * Columns frozen to each edge. Passing this prop puts freezing into
+     * controlled mode — hold the value in state and update it from
+     * `onFrozenColumnsChange`, or the header controls will have no effect.
+     */
+    frozenColumns?: FrozenColumns;
+    /** Columns frozen to each edge to begin with, for the uncontrolled case. */
+    defaultFrozenColumns?: FrozenColumns;
+    /**
+     * Called whenever the user freezes or unfreezes columns from the header
+     * controls. Always receives both lists.
+     */
+    onFrozenColumnsChange?: (frozenColumns: Required<FrozenColumns>) => void;
+    /**
+     * Gives every `TableCellHeader` a menu to freeze its column to either edge,
+     * or unfreeze it. Independent of `frozenColumns` — a table can have frozen
+     * columns without letting the user change them.
+     *
+     * @default false
+     */
+    freezeControls?: boolean;
+    /**
+     * Keeps the header row in view while the table scrolls vertically. Needs a
+     * scroll container with a height limit, such as `TableContainer` with
+     * `maxHeight`.
+     *
+     * @default false
+     */
+    stickyHeader?: boolean;
+}
+/** Props for {@link ColumnFreezeMenu}. */
+export interface ColumnFreezeMenuProps {
+    /**
+     * The column the menu freezes. Defaults to the `data-column-id` of the
+     * header cell it sits in, or that cell's position.
+     */
+    columnId?: ColumnId;
+}
+/** What the freezing context hands to header cells. */
+export interface ColumnFreezeApi {
+    /** Current frozen columns, both lists always present. */
+    frozenColumns: Required<FrozenColumns>;
+    /** Replaces the frozen columns and notifies `onFrozenColumnsChange`. */
+    setFrozenColumns: (frozenColumns: Required<FrozenColumns>) => void;
+    /** Whether header cells should render the freeze menu. */
+    freezeControls: boolean;
+}
 /**
  * Props for the {@link Table} component.
  *
  * Every attribute of a `table` element, plus the column-resizing options that
- * `resizableColumns` turns on.
+ * `resizableColumns` turns on and the column-freezing options.
  *
  * @example
  * ```tsx
@@ -132,7 +227,7 @@ export interface ColumnResizeApi {
  * </Table>
  * ```
  */
-export interface TableProps extends CommonProps, ColumnResizeOptions, TableHTMLAttributes<HTMLTableElement> {
+export interface TableProps extends CommonProps, ColumnResizeOptions, ColumnFreezeOptions, TableHTMLAttributes<HTMLTableElement> {
     /**
      * Lets columns be resized by dragging the right edge of each header cell.
      *

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

@@ -0,0 +1,21 @@
+import { ColumnId } from './types';
+/** The cells that define the column grid — the first header row, or row one. */
+export declare const getHeaderCells: (table: HTMLTableElement | null) => HTMLTableCellElement[];
+/**
+ * Marks a structural column the table adds on its own, such as the toggle
+ * column `NestedTableRow` puts in front of every row. It has no id of its own,
+ * is skipped when columns are numbered, and freezes to the start only when the
+ * column right after it does.
+ */
+export declare const EXPANDER_ATTR = "data-column-expander";
+export declare const isExpanderCell: (cell: HTMLTableCellElement) => boolean;
+/**
+ * The id each cell answers to: its `columnId`, else its position counting only
+ * the columns the app itself rendered. `null` for expander cells.
+ */
+export declare const getColumnKeys: (cells: HTMLTableCellElement[]) => (string | null)[];
+/**
+ * The id of the column a header cell belongs to: its `columnId`, else its
+ * position as a number. `null` for an expander. See getColumnKeys.
+ */
+export declare const getColumnIdOf: (cell: HTMLTableCellElement) => ColumnId | null;

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

@@ -54,6 +54,7 @@ import { TableCellHeaderProps } from './types';
  * @see {@link TableCell} - Data cell component (use in TableBody)
  * @see {@link TableBody} - Body section component
  * @see {@link ColumnResizeHandle} - the handle rendered inside resizable headers
+ * @see {@link ColumnFreezeMenu} - the menu rendered when the table has `freezeControls`
  *
  * @accessibility
  * - Semantic HTML th element (renders as th)
@@ -61,5 +62,5 @@ import { TableCellHeaderProps } from './types';
  * - Supports ARIA attributes via TableCellProps
  * - Better accessibility than using TableCell in headers
  */
-declare const TableCellHeader: ({ children, resizable, ...props }: React.PropsWithChildren<TableCellHeaderProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const TableCellHeader: ({ children, resizable, freezable, columnId, ...props }: React.PropsWithChildren<TableCellHeaderProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default TableCellHeader;

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

@@ -1,4 +1,5 @@
 import { TableCellProps } from '../TableCell/types';
+import { ColumnId } from '../Table/types';
 /**
  * Props for the TableCellHeader component
  *
@@ -42,4 +43,20 @@ export interface TableCellHeaderProps extends TableCellProps {
      * @default true
      */
     resizable?: boolean;
+    /**
+     * Whether this header cell offers the freeze menu inside a `Table` with
+     * `freezeControls`. Set it to `false` for columns the user should not
+     * freeze, such as a checkbox column. The app can still freeze it through
+     * `frozenColumns`.
+     *
+     * @default true
+     */
+    freezable?: boolean;
+    /**
+     * 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
+     * state follows the column rather than its position. Without it the column
+     * is identified by its zero-based position.
+     */
+    columnId?: ColumnId;
 }

package/dist/components/TableContainer/TableContainer.d.ts

@@ -0,0 +1,50 @@
+import { TableContainerProps } from './types';
+/**
+ * TableContainer - The scroll area around a table
+ *
+ * Caps the table at the width of its parent and, with `maxHeight`, at a
+ * height, scrolling whatever does not fit. It is what frozen columns and a
+ * sticky header stick to, but it is just as useful around a plain wide
+ * table.
+ *
+ * It draws the white, 20px-rounded card the table sits on, so the scrollbars
+ * stay inside the card. Override the look with `css` or `className`.
+ *
+ * @category Components
+ * @subcategory Data Display
+ *
+ * @example
+ * ```tsx
+ * // A wide table that scrolls sideways
+ * <TableContainer>
+ *   <Table>{children}</Table>
+ * </TableContainer>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Frozen first column and header in a 480px-tall scroll area
+ * <TableContainer maxHeight={480}>
+ *   <Table stickyHeader defaultFrozenColumns={{ start: [0] }} freezeControls>
+ *     {children}
+ *   </Table>
+ * </TableContainer>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // A different card
+ * <TableContainer css={{ borderRadius: 8, background: 'transparent' }}>
+ *   <Table>{children}</Table>
+ * </TableContainer>
+ * ```
+ *
+ * @see {@link Table} - `frozenColumns`, `freezeControls` and `stickyHeader`
+ *
+ * @accessibility
+ * - A plain `div`; give it `tabIndex={0}`, a `role="region"` and an
+ *   `aria-label` when the table has no focusable content, so keyboard users
+ *   can still scroll it
+ */
+declare const TableContainer: import("react").ForwardRefExoticComponent<TableContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TableContainer;

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

@@ -0,0 +1,2 @@
+export { default } from './TableContainer';
+export type { TableContainerProps } from './types';

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

@@ -0,0 +1,21 @@
+import { CSSProperties, HTMLAttributes } from 'react';
+import { CommonProps } from '../../types/emotion';
+/**
+ * Props for the {@link TableContainer} component.
+ *
+ * @example
+ * ```tsx
+ * <TableContainer maxHeight={480}>
+ *   <Table stickyHeader>{children}</Table>
+ * </TableContainer>
+ * ```
+ */
+export interface TableContainerProps extends CommonProps, HTMLAttributes<HTMLDivElement> {
+    /**
+     * Tallest the container gets before the table scrolls vertically. Any CSS
+     * value: a number of pixels, `'60vh'`, or `'100%'` to fill a parent that
+     * has a height of its own. Unbounded when omitted, so only horizontal
+     * overflow scrolls.
+     */
+    maxHeight?: CSSProperties['maxHeight'];
+}

package/dist/components/index.d.ts

@@ -57,11 +57,13 @@ export * from './Filters';
 export * from './FiltersMultiSelect';
 export * as JsonSchema from './JsonSchemaForm';
 export { default as Table } from './Table';
-export { ColumnResizeHandle, useColumnResize, useColumnResizeContext, } from './Table';
-export type { ColumnResizeApi, ColumnResizeHandleProps, ColumnResizeMode, ColumnResizeOptions, ResizeHandleProps, TableProps, UseColumnResizeOptions, } 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';
 export { default as TableBody } from './TableBody';
 export { default as TableCell } from './TableCell';
 export { default as TableCellHeader } from './TableCellHeader';
+export { default as TableContainer } from './TableContainer';
+export type { TableContainerProps } from './TableContainer';
 export * from './TableFilters';
 export { default as TableHead } from './TableHead';
 export { default as TableRow } from './TableRow';
@@ -105,6 +107,8 @@ export * from './Charts';
 export * from './ImageItem';
 export * from './Carousel';
 export type * from './Carousel/types';
+export * from './Calendar';
+export type * from './Calendar/types';
 export { default as ResponsiveImage } from './ResponsiveImage';
 export * from './ResponsiveImage';
 export type * from './ResponsiveImage/types';