@ssa-ui-kit/core 3.26.3 → 3.27.0

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/Typeahead/Typeahead.context.d.ts

@@ -26,7 +26,7 @@ export declare const TypeaheadContext: React.Context<{
     error: import("react-hook-form").FieldError | import("react-hook-form").Merge<import("react-hook-form").FieldError, import("react-hook-form").FieldErrorsImpl<any>> | undefined;
     placeholder: string | null | undefined;
     listId: string;
-    menuItems: import("..").ContextMenuItem<import("./types").TypeaheadValue>[];
+    menuItems: import("..").ContextMenuEntry<import("./types").TypeaheadValue>[];
     activeValue: import("./types").TypeaheadValue | null;
     setActiveValue: React.Dispatch<React.SetStateAction<import("./types").TypeaheadValue | null>>;
     inputAriaProps: {

package/dist/components/Typeahead/Typeahead.d.ts

@@ -172,4 +172,4 @@ import { TypeaheadProps } from './types';
  *
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
  */
-export declare const Typeahead: ({ name, label, labelBadge, value, defaultValue, selectedItems, defaultSelectedItems, isOpen, disabled, isDisabled, isMultiple, singleLine, children, className, startIcon, endIcon, error, success, helperText, validationSchema, placeholder, startIconClassName, endIconClassName, popoverClassName, optionsClassName, wrapperClassName, filterOptions, autoSelect, allowCustomValues, width, onChange, onEmptyChange, onClearAll, onRemoveSelectedClick, renderOption, }: TypeaheadProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Typeahead: ({ name, label, labelBadge, value, defaultValue, selectedItems, defaultSelectedItems, isOpen, disabled, isDisabled, isMultiple, singleLine, children, className, startIcon, endIcon, error, success, helperText, validationSchema, placeholder, startIconClassName, endIconClassName, popoverClassName, optionsClassName, wrapperClassName, filterOptions, autoSelect, searchByGroup, allowCustomValues, width, onChange, onEmptyChange, onClearAll, onRemoveSelectedClick, renderOption, }: TypeaheadProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Typeahead/components/TypeaheadOptionGroup.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+/** Props of {@link TypeaheadOptionGroup}. */
+export interface TypeaheadOptionGroupProps {
+    /** Group title. Not selectable and skipped by keyboard navigation. */
+    label: ReactNode;
+    /**
+     * Plain-text form of `label`, matched against the input when the Typeahead
+     * has `searchByGroup`. Defaults to `label` when that is a string or number.
+     */
+    textValue?: string;
+    /**
+     * Unique per Typeahead. Defaults to the group's position among the
+     * Typeahead's children.
+     */
+    id?: string;
+    /** The group's `TypeaheadOption`s. */
+    children?: ReactNode;
+}
+/**
+ * TypeaheadOptionGroup - A titled section of options inside `Typeahead`.
+ *
+ * Wrap `TypeaheadOption` children in it to show them under a title; groups are
+ * separated by a divider. Filtering applies to the options inside, and a group
+ * with no matching options is hidden along with its title. With the
+ * Typeahead's `searchByGroup`, a group whose title matches is shown whole.
+ * Read by the
+ * Typeahead rather than rendered as written, so it only works as a direct
+ * child of the Typeahead (or of a fragment there).
+ *
+ * @example
+ * ```tsx
+ * <Typeahead name="city" label="City">
+ *   <TypeaheadOptionGroup label="Europe">
+ *     <TypeaheadOption value="kyiv" label="Kyiv" />
+ *     <TypeaheadOption value="paris" label="Paris" />
+ *   </TypeaheadOptionGroup>
+ *   <TypeaheadOptionGroup label="Asia">
+ *     <TypeaheadOption value="tokyo" label="Tokyo" />
+ *   </TypeaheadOptionGroup>
+ * </Typeahead>
+ * ```
+ */
+export declare const TypeaheadOptionGroup: ({ children, }: TypeaheadOptionGroupProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -4,5 +4,6 @@ export * from './TypeaheadTrigger';
 export * from './TypeaheadItem';
 export * from './TypeaheadOptions';
 export * from './TypeaheadOption';
+export * from './TypeaheadOptionGroup';
 export * from './TypeaheadFocusTrap';
 export * from './NoOptions';

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

@@ -3,5 +3,6 @@ export * from './types';
 export { useTypeaheadContext } from './Typeahead.context';
 export * from './components/TypeaheadOptions';
 export * from './components/TypeaheadOption';
+export * from './components/TypeaheadOptionGroup';
 export * from './components/TypeaheadItem';
 export * from './utils';

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

@@ -180,6 +180,14 @@ export interface TypeaheadProps {
      * @default true
      */
     autoSelect?: boolean;
+    /**
+     * Also match the input against `TypeaheadOptionGroup` titles. A group whose
+     * title matches is shown with all of its options; otherwise only its
+     * matching options are shown, as usual. A title that is not a string or
+     * number is matched through the group's `textValue`.
+     * @default false
+     */
+    searchByGroup?: boolean;
     /**
      * Allow adding custom values not in the options list.
      * When true, the current input is shown as the first dropdown option (highlighted)
@@ -221,7 +229,7 @@ export interface TypeaheadProps {
  * Props used by the useTypeahead hook
  * Internal type that picks specific props from TypeaheadProps
  */
-export type UseTypeaheadProps = Pick<TypeaheadProps, 'selectedItems' | 'defaultSelectedItems' | 'isDisabled' | 'children' | 'isMultiple' | 'singleLine' | 'onChange' | 'onClearAll' | 'onRemoveSelectedClick' | 'onEmptyChange' | 'renderOption' | 'isOpen' | 'className' | 'startIcon' | 'endIcon' | 'startIconClassName' | 'endIconClassName' | 'name' | 'validationSchema' | 'error' | 'success' | 'placeholder' | 'filterOptions' | 'autoSelect' | 'allowCustomValues' | 'label'>;
+export type UseTypeaheadProps = Pick<TypeaheadProps, 'selectedItems' | 'defaultSelectedItems' | 'isDisabled' | 'children' | 'isMultiple' | 'singleLine' | 'onChange' | 'onClearAll' | 'onRemoveSelectedClick' | 'onEmptyChange' | 'renderOption' | 'isOpen' | 'className' | 'startIcon' | 'endIcon' | 'startIconClassName' | 'endIconClassName' | 'name' | 'validationSchema' | 'error' | 'success' | 'placeholder' | 'filterOptions' | 'autoSelect' | 'searchByGroup' | 'allowCustomValues' | 'label'>;
 /**
  * Props for TypeaheadOptions container component
  */

package/dist/components/Typeahead/useTypeahead.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { OpenChangeReason } from '@floating-ui/react';
-import { ContextMenuItem } from '../ContextMenu';
+import { ContextMenuEntry } from '../ContextMenu';
 import { TypeaheadOptionProps, TypeaheadValue, UseTypeaheadProps } from './types';
 type HandleChangeParams = {
     value?: string | number;
     shouldClose?: boolean;
     resetInput?: boolean;
 };
-export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems: providedSelectedItems, defaultSelectedItems, isDisabled, isMultiple, singleLine, children, className, startIcon, endIcon, startIconClassName, endIconClassName, validationSchema, error, success, placeholder, filterOptions, autoSelect, allowCustomValues, onChange, onClearAll, onRemoveSelectedClick, onEmptyChange, renderOption, label, }: UseTypeaheadProps) => {
+export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems: providedSelectedItems, defaultSelectedItems, isDisabled, isMultiple, singleLine, children, className, startIcon, endIcon, startIconClassName, endIconClassName, validationSchema, error, success, placeholder, filterOptions, autoSelect, searchByGroup, allowCustomValues, onChange, onClearAll, onRemoveSelectedClick, onEmptyChange, renderOption, label, }: UseTypeaheadProps) => {
     isOpen: boolean;
     isDisabled: boolean | undefined;
     optionsWithKey: Record<string | number, TypeaheadOptionProps>;
@@ -32,7 +32,7 @@ export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems: p
     error: import("react-hook-form").FieldError | import("react-hook-form").Merge<import("react-hook-form").FieldError, import("react-hook-form").FieldErrorsImpl<any>> | undefined;
     placeholder: string | null | undefined;
     listId: string;
-    menuItems: ContextMenuItem<TypeaheadValue>[];
+    menuItems: ContextMenuEntry<TypeaheadValue>[];
     activeValue: TypeaheadValue | null;
     setActiveValue: React.Dispatch<React.SetStateAction<TypeaheadValue | null>>;
     inputAriaProps: {

package/dist/components/index.d.ts

@@ -32,6 +32,8 @@ export type * from './Dropdown/types';
 export { default as DropdownArrow } from './DropdownArrow';
 export { default as DropdownBase } from './DropdownBase';
 export { default as DropdownOption } from './DropdownOption';
+export { default as DropdownOptionGroup } from './DropdownOptionGroup';
+export type { DropdownOptionGroupProps } from './DropdownOptionGroup';
 export { default as DropdownOptions } from './DropdownOptions';
 export type { DropdownOptionProps } from './DropdownOptions';
 export { default as DropdownToggle } from './DropdownToggle';
@@ -60,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';