prime-ui-kit 0.19.0 → 0.20.1

package/dist/chunks/{chunk-ZTZ2ML2B.js → chunk-4KONMO7Z.js}

@@ -23,7 +23,7 @@ import {
   useInheritedDisabled,
   useLabels,
   useOpenState
-} from "./chunk-RZNGLELR.js";
+} from "./chunk-3PY52JP3.js";
 import {
   cx,
   useHostTier

package/dist/color-picker.js

@@ -4,8 +4,8 @@ import {
   ColorField,
   ColorPicker,
   parseColor
-} from "./chunks/chunk-ZTZ2ML2B.js";
-import "./chunks/chunk-RZNGLELR.js";
+} from "./chunks/chunk-4KONMO7Z.js";
+import "./chunks/chunk-3PY52JP3.js";
 import "./chunks/chunk-QFHE5GKW.js";
 export {
   ColorField,

package/dist/components/data-table/ColumnsMenu.d.ts

@@ -1,19 +1,45 @@
-import { type ControlSize } from "../../internal/states";
+import * as React from "react";
+import type { ControlSize } from "../../internal/states";
 import type { DataTableLabels } from "./DataTable";
 import type { DataTableColumn } from "./types";
+type Column = DataTableColumn<never>;
+/** The strings of the column chooser, in the table's `labels` and in `DataTableColumnsMenu`. */
+export type DataTableColumnsMenuLabels = Pick<DataTableLabels, "columns" | "showColumns" | "showAllColumns" | "resetColumnOrder" | "reorderColumn">;
+/** The chooser reorders columns too (`columnOrder`). */
+export type ColumnsMenuReorder = {
+    /** Columns that hold their place: a lock instead of the grip. */
+    locked: ReadonlySet<string>;
+    onReorder: (id: string, beforeId: string | null) => void;
+    /** Back to the order of `columns`; null while that is the order. */
+    reset: (() => void) | null;
+};
 type ColumnsMenuProps = {
     /** Every column, hidden ones included, in table order. */
-    columns: DataTableColumn<never>[];
+    columns: Column[];
     hidden: ReadonlySet<string>;
     setHidden: (hidden: string[]) => void;
-    labels: DataTableLabels;
+    reorder: ColumnsMenuReorder | null;
+    labels: DataTableColumnsMenuLabels;
+    /** The tier of the trigger and the menu. */
     size: ControlSize;
+    /**
+     * `icon`: the icon-only ghost trigger in the head of the row-actions column (`columnsMenu`);
+     * `button`: the labelled soft trigger with the count of shown columns, for the page's tools.
+     */
+    trigger: "icon" | "button";
+    /** The labelled trigger's own attributes, class and ref (`DataTableColumnsMenu`). */
+    triggerProps?: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+        ref?: React.Ref<HTMLButtonElement>;
+    };
 };
+/** Columns that hold their place in the chooser: `reorderable: false` and the row actions. */
+export declare function lockedInChooser(columns: readonly Column[]): Set<string>;
 /**
- * The column chooser of the table (`columnsMenu`), drawn in its header row: an icon-only ghost
- * Button one tier below the table, named and tipped by `labels.columns`, opening a Dropdown with a
- * check item per column and «Показать все». A column with `hideable: false` stays checked and
- * disabled, and the last visible column cannot be hidden.
+ * The column chooser: a trigger (`trigger`) opening a Dropdown with a «Показывать» group of check
+ * items, one per column, and «Показать все». A column with `hideable: false` stays checked and
+ * disabled, and the last visible column cannot be hidden. With `reorder` the items are a
+ * Dnd.Sortable list: a grip ends each item (a lock on a column that holds its place), Alt + ↑ / ↓ on
+ * the focused item moves it, and «Исходный порядок» puts the order of `columns` back.
  */
-export declare function ColumnsMenu({ columns, hidden, setHidden, labels, size }: ColumnsMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColumnsMenu({ columns, hidden, setHidden, reorder, labels, size, trigger, triggerProps, }: ColumnsMenuProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/data-table/DataTable.d.ts

@@ -26,8 +26,14 @@ export type DataTableLabels = {
     collapse: string;
     /** Name and tooltip of the column chooser (`columnsMenu`); `{shown}` and `{total}` are counts. */
     columns: string;
+    /** The heading of the column chooser's list of columns. */
+    showColumns: string;
     /** The column chooser item that shows every column again. */
     showAllColumns: string;
+    /** The column chooser item that puts the order of `columns` back (`columnOrder`). */
+    resetColumnOrder: string;
+    /** `aria-label` of a column's grip in the column chooser (`columnOrder`); `{label}` is its header. */
+    reorderColumn: string;
     /** `aria-label` of a row's drag handle (`onReorder`); `{label}` is `getRowLabel(row)`. */
     reorderRow: string;
     /** Tooltip of the handles while the table is sorted by a column (reordering is off). */
@@ -48,7 +54,7 @@ export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "ch
      */
     columns: DataTableColumn<Row>[];
     /**
-     * Ids of columns that are not rendered, controlled. A column with `hideable: false` stays. The column chooser (`columnsMenu`) changes it.
+     * Ids of columns that are not rendered, controlled. A column with `hideable: false` stays. The column chooser (`columnsMenu`, `DataTableColumnsMenu`) changes it.
      */
     hiddenColumns?: string[];
     /**
@@ -60,7 +66,19 @@ export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "ch
      */
     onHiddenColumnsChange?: (hiddenColumns: string[]) => void;
     /**
-     * The column chooser at the end of the header row: in the head cell of a trailing row-actions column (`hideHeader`), else in a cell of its own; sticks with `stickyLastColumn`. Needs `showHeader`.
+     * Column ids in screen order, hidden ones keeping their place, controlled. Any prop of this triad makes columns reorder: a header drag (the body stays until the drop), Alt + ← / → on a header, grips in the column chooser.
+     */
+    columnOrder?: string[];
+    /**
+     * Initial column order, uncontrolled; `[]` — the order of `columns`, reorderable.
+     */
+    defaultColumnOrder?: string[];
+    /**
+     * The order changed: a header dropped, a keyboard move, a chooser grip or «Исходный порядок». The kit stores nothing: keep it with `hiddenColumns` and pass it back.
+     */
+    onColumnOrderChange?: (columnOrder: string[]) => void;
+    /**
+     * The column chooser in the head of the row-actions column (the last one, `hideHeader`); reorders with `columnOrder`. Without that column it renders nothing and warns: use `DataTableColumnsMenu` in the page's tools.
      */
     columnsMenu?: boolean;
     /**
@@ -224,9 +242,13 @@ export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "ch
      */
     onSelectedChange?: (selected: React.Key[]) => void;
     /**
-     * Rows reorder by a leading handle column. Row `id` goes in front of `beforeId` (`null` = last); apply it with `moveBefore`, return a promise to save. Off while sorted by a column.
+     * Rows reorder (by a grip, see `reorderHandle`). Row `id` goes in front of `beforeId` (`null` = last); apply it with `moveBefore`, return a promise to save. Off while sorted by a column.
      */
     onReorder?: (id: React.Key, beforeId: React.Key | null) => void | Promise<void>;
+    /**
+     * Where a row is picked up (`onReorder`): `end` — a grip ends the row; `start` — a grip column leads it; `row` — no grip, the whole row is carried and takes Alt + ↑ / ↓ itself.
+     */
+    reorderHandle?: "start" | "end" | "row";
     /**
      * Sub-rows rendered under the parent with the same columns, indented by depth.
      */
@@ -260,9 +282,13 @@ export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "ch
      */
     loadingRows?: number;
     /**
-     * Panel above the table for several controls of the table itself (bulk actions on the selected rows, a table-local search with filters); stacks below 30rem of table width.
+     * The table's own tools row — search, filter, `DataTableColumnsMenu`, a view, bulk actions; two or more, unwrapped. Laid out as `Page.Tools`: the search takes the free room, the rest keep their width at the end.
      */
     toolbar?: React.ReactNode;
+    /**
+     * The applied filters (`SmartFilter.Chips`) on a line under the `toolbar`, gone while empty; `SmartFilter.Root` wraps the DataTable.
+     */
+    toolbarChips?: React.ReactNode;
     /**
      * Group key of a row: each group gets a header row and its own `<tbody>`. Groups keep the order in which they first appear in `rows`; a sort orders the rows inside each group; a group split by paging repeats its header.
      */
@@ -288,4 +314,4 @@ export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "ch
      */
     onCollapsedGroupsChange?: (collapsedGroups: (string | number)[]) => void;
 };
-export declare function DataTable<Row>({ columns: allColumns, hiddenColumns, defaultHiddenColumns, onHiddenColumnsChange, columnsMenu, rows, source, rowCount, size: sizeProp, className, showHeader, stickyHeader, stickyFirstColumn, stickyLastColumn, getRowKey, getRowHref, onRowClick, isRowClickable, loading, empty, labels: labelsProp, rowDividers, columnDividers, sort, defaultSort, onSortChange, paging, page, defaultPage, onPageChange, pageSize, infiniteBatchSize, hasMore, loadingMore, onLoadMore, scrollHeight, fullWidth, highlightRowOnHover, highlightColumnOnHover, striped, getRowLabel, selectable, selected, defaultSelected, onSelectedChange, onReorder, getRowChildren, renderExpanded, isRowExpandable, expanded, defaultExpanded, onExpandedChange, loadError, loadingRows, toolbar, getRowGroup, renderGroupHeader, stickyGroupHeaders, collapsedGroups, defaultCollapsedGroups, onCollapsedGroupsChange, ref, ...rest }: DataTableProps<Row>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<Row>({ columns: allColumns, hiddenColumns, defaultHiddenColumns, onHiddenColumnsChange, columnOrder, defaultColumnOrder, onColumnOrderChange, columnsMenu, rows, source, rowCount, size: sizeProp, className, showHeader, stickyHeader, stickyFirstColumn, stickyLastColumn, getRowKey, getRowHref, onRowClick, isRowClickable, loading, empty, labels: labelsProp, rowDividers, columnDividers, sort, defaultSort, onSortChange, paging, page, defaultPage, onPageChange, pageSize, infiniteBatchSize, hasMore, loadingMore, onLoadMore, scrollHeight, fullWidth, highlightRowOnHover, highlightColumnOnHover, striped, getRowLabel, selectable, selected, defaultSelected, onSelectedChange, onReorder, reorderHandle, getRowChildren, renderExpanded, isRowExpandable, expanded, defaultExpanded, onExpandedChange, loadError, loadingRows, toolbar, toolbarChips, getRowGroup, renderGroupHeader, stickyGroupHeaders, collapsedGroups, defaultCollapsedGroups, onCollapsedGroupsChange, ref, ...rest }: DataTableProps<Row>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-table/DataTableColumnsMenu.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+import type { ControlSize } from "../../internal/states";
+import { type DataTableColumnsMenuLabels } from "./ColumnsMenu";
+import type { DataTableColumn } from "./types";
+export type { DataTableColumnsMenuLabels } from "./ColumnsMenu";
+export type DataTableColumnsMenuProps<Row> = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type"> & {
+    /**
+     * The table's `columns`, in the order of the code.
+     */
+    columns: DataTableColumn<Row>[];
+    /**
+     * The ids the table hides: the same list its `hiddenColumns` reads.
+     */
+    hiddenColumns: string[];
+    /**
+     * A column was shown or hidden, or «Показать все».
+     */
+    onHiddenColumnsChange: (hiddenColumns: string[]) => void;
+    /**
+     * The table's `columnOrder`.
+     */
+    columnOrder?: string[];
+    /**
+     * Turns the items into a sortable list (a grip, Alt + ↑ / ↓) with «Исходный порядок»; the new order of every column.
+     */
+    onColumnOrderChange?: (columnOrder: string[]) => void;
+    /**
+     * Tier of the trigger and the menu.
+     */
+    size?: ControlSize;
+    /**
+     * The chooser's strings: `columns`, `showColumns`, `showAllColumns`, `resetColumnOrder`, `reorderColumn`.
+     */
+    labels?: Partial<DataTableColumnsMenuLabels>;
+    ref?: React.Ref<HTMLButtonElement>;
+};
+/**
+ * The column chooser of a DataTable that has no row-actions column to hold it: a labelled soft
+ * Button with the count of shown columns, for the page's tools, bound to the same state the table
+ * reads (`hiddenColumns`, and `columnOrder` when the columns reorder).
+ */
+export declare function DataTableColumnsMenu<Row>({ columns, hiddenColumns, onHiddenColumnsChange, columnOrder, onColumnOrderChange, size: sizeProp, labels: labelsProp, ...triggerProps }: DataTableColumnsMenuProps<Row>): import("react/jsx-runtime").JSX.Element;
+export declare namespace DataTableColumnsMenu {
+    var displayName: string;
+}

package/dist/components/data-table/Head.d.ts

@@ -1,6 +1,12 @@
 import * as React from "react";
 import type { ControlSize } from "../../internal/states";
 import type { DataTableColumn, DataTableSortState } from "./types";
+/** Columns that reorder by their headers (`columnOrder`): the head row is a `Dnd.Sortable`. */
+export type HeadColumnReorder = {
+    /** Columns that hold their place: their headers carry nothing, no column moves past them. */
+    locked: ReadonlySet<string>;
+    onReorder: (id: string, beforeId: string | null) => void;
+};
 type HeadProps<Row> = {
     columns: DataTableColumn<Row>[];
     size: ControlSize;
@@ -11,17 +17,17 @@ type HeadProps<Row> = {
     stickyLastColumn: boolean;
     /** The head sticks to the top of the scroller. */
     stickyHeader: boolean;
-    /** Sticky head and first column: the leading head cells stick to both edges. */
-    stickyCorner: boolean;
     expandEnabled: boolean;
     /** Name of the info glyph of a column with a `description`. */
     infoLabel: string;
-    /** A leading column of row handles (`onReorder`). */
-    reorderable?: boolean;
-    /** The column chooser trigger (`columnsMenu`), or null. */
+    /** A leading column of row grips (`reorderHandle="start"`). */
+    gripStart: boolean;
+    /** The column chooser trigger (`columnsMenu`) for the row-actions head cell, or null. */
     columnsMenu: React.ReactNode;
-    /** The chooser stands in a cell of its own at the end; else in the row-actions head cell. */
-    menuCell: boolean;
+    /** A trailing utility cell ends the row: the head of the end grips' column. */
+    endCell: boolean;
+    /** Header grips (`columnOrder`); null when columns keep their order. */
+    reorder: HeadColumnReorder | null;
     selectAll?: {
         checked: boolean;
         indeterminate: boolean;
@@ -30,5 +36,5 @@ type HeadProps<Row> = {
         onToggle: () => void;
     };
 };
-export declare function Head<Row>({ columns, size, sort, onSort, stickyFirstColumn, stickyLastColumn, stickyHeader, stickyCorner, expandEnabled, infoLabel, reorderable, columnsMenu, menuCell, selectAll, }: HeadProps<Row>): import("react/jsx-runtime").JSX.Element;
+export declare function Head<Row>({ columns, size, sort, onSort, stickyFirstColumn, stickyLastColumn, stickyHeader, expandEnabled, infoLabel, gripStart, columnsMenu, endCell, reorder, selectAll, }: HeadProps<Row>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/data-table/Row.d.ts

@@ -17,8 +17,8 @@ export type RowShared<Row> = {
     stickyFirstColumn: boolean;
     /** The last visible column sticks to the end edge (row actions). */
     stickyLastColumn: boolean;
-    /** A trailing cell under the head's column chooser (`columnsMenu` with no row-actions column). */
-    menuCell: boolean;
+    /** A trailing utility cell ends every row: the row grip (`reorderHandle="end"`). */
+    endCell: boolean;
     striped: boolean;
     totalColumns: number;
     /**
@@ -33,7 +33,7 @@ export type RowShared<Row> = {
     scaleDomains: Map<string, [number, number]>;
     selection: RowSelectionHandlers;
     toggleExpanded: (key: React.Key) => void;
-    /** Row reordering (`onReorder`): a handle column and sortable rows; null without it. */
+    /** Row reordering (`onReorder`): sortable rows with a grip cell or a row grip; null without it. */
     reorder: RowReorderShared | null;
 };
 type DataTableRowProps<Row> = {
@@ -95,14 +95,14 @@ type MeasureBodyProps<Row> = {
     columns: DataTableColumn<Row>[];
     selectable: boolean;
     expandEnabled: boolean;
-    /** A leading column of row handles (`onReorder`). */
-    reorderable: boolean;
-    /** A trailing cell under the head's column chooser. */
-    menuCell: boolean;
+    /** A leading column of row grips (`reorderHandle="start"`). */
+    gripStart: boolean;
+    /** A trailing utility cell (the end grip, the column chooser). */
+    endCell: boolean;
 };
 /**
  * Sub-rows of collapsed rows and rows of collapsed groups, laid out invisibly so the columns are
  * already as wide as they will be once a row or group opens; never shown or reachable.
  */
-export declare function MeasureBody<Row>({ rows, columns, selectable, expandEnabled, reorderable, menuCell, }: MeasureBodyProps<Row>): import("react/jsx-runtime").JSX.Element;
+export declare function MeasureBody<Row>({ rows, columns, selectable, expandEnabled, gripStart, endCell, }: MeasureBodyProps<Row>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/data-table/StateRows.d.ts

@@ -8,10 +8,10 @@ type StateRowsProps<Row> = {
     totalColumns: number;
     selectable: boolean;
     expandEnabled: boolean;
-    /** A leading column of row handles (`onReorder`). */
-    reorderable?: boolean;
-    /** A trailing cell under the head's column chooser. */
-    menuCell: boolean;
+    /** A leading column of row grips (`reorderHandle="start"`). */
+    gripStart: boolean;
+    /** A trailing utility cell (the end grip, the column chooser). */
+    endCell: boolean;
     loadError: React.ReactNode;
     empty: React.ReactNode;
     emptyLabel: string;
@@ -22,5 +22,5 @@ type StateRowsProps<Row> = {
  * in a sticky box of the visible width, so a wide table centres it in the viewport, not across
  * every column.
  */
-export declare function StateRows<Row>({ state, columns, size, totalColumns, selectable, expandEnabled, reorderable, menuCell, loadError, empty, emptyLabel, skeletonRows, }: StateRowsProps<Row>): import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];
+export declare function StateRows<Row>({ state, columns, size, totalColumns, selectable, expandEnabled, gripStart, endCell, loadError, empty, emptyLabel, skeletonRows, }: StateRowsProps<Row>): import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];
 export {};

package/dist/components/data-table/columnOrder.d.ts

@@ -0,0 +1,14 @@
+/**
+ * `columns` in the order of `order`. An id `order` does not list (a column added to the code later)
+ * stands right after the column that precedes it in `columns`, so a saved order never hides it;
+ * ids of columns that are gone are skipped.
+ */
+export declare function orderColumns<C extends {
+    id: string;
+}>(columns: readonly C[], order: readonly string[]): C[];
+/**
+ * The order of every column (hidden ones too) once the visible column `id` stands in front of the
+ * visible column `before` — or right after the last visible one when `before` is null, so a hidden
+ * column after it keeps its slot; `null` when that would shift a column that holds its place.
+ */
+export declare function placeColumn(order: readonly string[], visible: readonly string[], id: string, before: string | null, locked: ReadonlySet<string>): string[] | null;

package/dist/components/data-table/reorder.d.ts

@@ -2,6 +2,8 @@ import * as React from "react";
 import type { FlatRow } from "./rows";
 /** What every row needs to know about reordering (part of the rows' shared props). */
 export type RowReorderShared = {
+    /** Where a row is picked up: a grip cell leading or ending it, or the row itself. */
+    handle: "start" | "end" | "row";
     /** The table is sorted by a column: the manual order is not what is on screen. */
     locked: boolean;
     /** `aria-label` of a row's handle; `{label}` is `getRowLabel(row)`. */
@@ -14,6 +16,8 @@ type Entry<Row> = {
     index: number;
 };
 export type RowReorderOptions<Row> = {
+    /** `reorderHandle`: a grip cell at the start or the end of a row, or the whole row. */
+    handle: "start" | "end" | "row";
     onReorder: ((id: React.Key, beforeId: React.Key | null) => void | Promise<void>) | undefined;
     /** Expandable rows (sub-rows, detail panels) do not reorder: a row would leave its children. */
     expandEnabled: boolean;
@@ -47,6 +51,8 @@ type ReorderBodyProps<Row> = {
     entries: Entry<Row>[];
     /** First index of the run among the rows on screen. */
     start: number;
+    /** Only a row's grip picks it up (`reorderHandle` `start` / `end`); else the whole row. */
+    handle: boolean;
     locked: boolean;
     onReorder: (id: string, beforeId: string | null) => void | Promise<void>;
     getRowLabel: ((row: Row) => string) | undefined;
@@ -55,8 +61,11 @@ type ReorderBodyProps<Row> = {
     header?: React.ReactNode;
     className?: string | undefined;
 };
-/** A `<tbody>` whose rows reorder: Dnd's sortable list in its table-rows mode, by the handle only. */
-export declare function ReorderBody<Row>({ entries, start, locked, onReorder, getRowLabel, renderRow, header, className, }: ReorderBodyProps<Row>): import("react/jsx-runtime").JSX.Element;
+/**
+ * A `<tbody>` whose rows reorder: Dnd's sortable list in its table-rows mode, by the grip only, or
+ * by the whole row (`reorderHandle="row"`: the row is the keyboard target and the drag source).
+ */
+export declare function ReorderBody<Row>({ entries, start, handle, locked, onReorder, getRowLabel, renderRow, header, className, }: ReorderBodyProps<Row>): import("react/jsx-runtime").JSX.Element;
 /** The drag session the rows need; it joins one the app already has above the table. */
 export declare function ReorderRoot({ enabled, children, }: {
     enabled: boolean;
@@ -72,7 +81,7 @@ type RowElementProps = Omit<React.ComponentProps<"tr">, "ref"> & {
  * A body row's `<tr>`; in a reorderable table, a sortable item rendered as that `<tr>` (it needs no
  * DOM id: only expandable rows are pointed at, and those do not reorder).
  */
-export declare function RowElement({ reorder, rowKey, rowRef, id, children, ...rest }: RowElementProps): import("react/jsx-runtime").JSX.Element;
+export declare function RowElement({ reorder, rowKey, rowRef, id, tabIndex, children, ...rest }: RowElementProps): import("react/jsx-runtime").JSX.Element;
 type HandleCellProps = {
     reorder: RowReorderShared;
     rowLabel: string | undefined;
@@ -81,8 +90,9 @@ type HandleCellProps = {
     wrap?: (node: React.ReactNode) => React.ReactNode;
 };
 /**
- * The leading cell of a reorderable row: the grip (Alt + ↑ / ↓ from the keyboard; busy while the
- * owner saves this row's move) and, while the table is sorted, a disabled grip that says why.
+ * The grip cell of a reorderable row, leading or ending it (`reorderHandle`): the grip (Alt + ↑ / ↓
+ * from the keyboard; busy while the owner saves this row's move) and, while the table is sorted, a
+ * disabled grip that says why.
  */
 export declare function ReorderHandleCell({ reorder, rowLabel, className, wrap }: HandleCellProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/data-table/types.d.ts

@@ -54,6 +54,11 @@ export type DataTableColumn<Row> = {
      * key column that names the row — it stays even when its id is listed.
      */
     hideable?: boolean;
+    /**
+     * The column can move when columns reorder (`columnOrder`). Default `true`; `false` holds its
+     * place: it never moves and no column moves past it.
+     */
+    reorderable?: boolean;
     /**
      * Heatmap: each cell is shaded by its numeric value (`sortAccessor`, else `accessor`) on the
      * five-step chart scale (`--prime-color-chart-scale-1…5`); the value itself stays in the cell.

package/dist/components/data-table/useFrozenColumns.d.ts

@@ -8,8 +8,12 @@ import * as React from "react";
  * (`col[data-grow]`) keep taking the free width.
  */
 export declare function useFrozenColumns(tableRef: React.RefObject<HTMLTableElement | null>, rootRef: React.RefObject<HTMLDivElement | null>, 
-/** Changes with the column set: widths start from scratch. */
-columnsKey: string, 
+/**
+ * One key per `<col>`, in order. A new set of columns starts the widths from scratch; the same
+ * set in another order (columns that changed places, a carried column's gap) keeps every
+ * column's width and only moves it, so nothing reflows while columns reorder.
+ */
+slots: readonly string[], 
 /** Changes with the rendered rows: widths widen when content no longer fits. */
 rowsKey: unknown, 
 /** Real rows are on screen (not loading, empty or error). */

package/dist/components/datepicker/DatepickerPanel.d.ts

@@ -39,7 +39,7 @@ export type CalendarOptions = {
      */
     months?: 1 | 2;
     /**
-     * Preset column (`range` only): `DEFAULT_DATEPICKER_PRESETS` or picks from `datepickerPresets`; a row above the calendar when narrow.
+     * Preset column (`range` only): `DEFAULT_DATEPICKER_PRESETS` (ends with «Всё время») or picks from `datepickerPresets`; a row above the calendar when narrow.
      */
     presets?: DatepickerPreset[] | false;
     /**

package/dist/components/dnd/Dnd.d.ts

@@ -108,15 +108,15 @@ export type DndSortableProps<T> = Omit<React.HTMLAttributes<HTMLElement>, "child
      */
     empty?: React.ReactNode;
     /**
-     * Root element; `ul` / `ol` render items as `li`, `tbody` as table rows `tr` (the gap is a row across every column, the carried copy keeps every cell's width).
+     * Root element; `ul` / `ol` render items as `li`, `tbody` as rows `tr` (a gap row, a one-row copy), `tr` as head cells `th` with `axis="x"` (cells keep their columns, the gap glides among them).
      */
-    as?: "div" | "ul" | "ol" | "tbody";
+    as?: "div" | "ul" | "ol" | "tbody" | "tr";
     /**
      * Accessible name of the list.
      */
     "aria-label"?: string;
     /**
-     * Content in front of the items that never moves and takes no drop position: the heading row of a group in a `tbody`.
+     * Content in front of the items that never moves and takes no drop position: the heading row of a group in a `tbody`, the leading cells of a head row.
      */
     header?: React.ReactNode;
     /**
@@ -146,6 +146,10 @@ export type DndSortableItemProps = {
      * Holds its place: it does not move and nothing is put where it would shift it. Its `Dnd.Handle` turns into a lock. A pinned first row, a system column.
      */
     locked?: boolean;
+    /**
+     * Without `handle`: a press on a control inside picks the item up too once it travels (a finger: holds); a click stays the control's. A table header whose sort button fills it.
+     */
+    dragFromControls?: boolean;
     /**
      * The row look: fill, radius, padding.
      */
@@ -155,12 +159,12 @@ export type DndSortableItemProps = {
      */
     children?: React.ReactNode;
     ref?: React.Ref<HTMLElement>;
-} & Omit<React.HTMLAttributes<HTMLElement>, "id">;
+} & Omit<React.HTMLAttributes<HTMLElement>, "id"> & Pick<React.ThHTMLAttributes<HTMLTableCellElement>, "scope">;
 /**
  * One item of a `Dnd.Sortable`. Renders `li` inside `ul` / `ol`, `tr` inside `tbody`, `div` otherwise.
  * The item is the keyboard target (a `div` one is a named `button`), or with `handle` its grip is.
  */
-declare function DndSortableItem({ id, disabled: itemDisabled, locked, className, children, onPointerDown, onKeyDown, onDragStart, ref, ...rest }: DndSortableItemProps): import("react/jsx-runtime").JSX.Element;
+declare function DndSortableItem({ id, disabled: itemDisabled, locked, dragFromControls, className, children, onPointerDown, onKeyDown, onDragStart, ref, ...rest }: DndSortableItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace DndSortableItem {
     var displayName: string;
 }

package/dist/components/dnd/inPlaceRow.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Shifts the cells of `row` while `draggingId` is carried and the gap stands in front of
+ * `gapBefore`. A drop (the order changed) takes the shifts off in the same frame the cells take
+ * their new places, which are the places they were drawn at (each column keeps its width); a
+ * cancel glides them back.
+ */
+export declare function useInPlaceShift(row: HTMLElement | null, order: readonly string[], draggingId: string | null, gapBefore: string | null | undefined): void;

package/dist/components/dnd/useDragSource.d.ts

@@ -1,6 +1,8 @@
 import * as React from "react";
 import type { DragItem, DragOutcome } from "./dragSession";
 import type { Point, Rect } from "./geometry";
+/** Set by `Dnd.SortableItem dragFromControls`: a press on a control inside picks the item up too. */
+export declare const DRAG_FROM_CONTROLS = "data-dnd-drag-controls";
 export type DragSourceItem<TData> = {
     id: string;
     data: TData;

package/dist/components/dnd/useSortableList.d.ts

@@ -31,6 +31,11 @@ export type SortableListOptions = {
     canDrop?: ((id: string) => DropVerdict) | undefined;
     /** Only a press on a `[data-dnd-handle]` element starts a drag. */
     handleOnly?: boolean | undefined;
+    /**
+     * The items keep their places in the layout while one is carried (the cells of a table's head
+     * row stay in their columns): the host shifts them aside itself, nothing glides here mid-drag.
+     */
+    inPlace?: boolean | undefined;
 };
 export type SortableItemProps = DragSourceProps & {
     "data-lifted"?: true | undefined;

package/dist/components/field-list/FieldList.d.ts

@@ -5,13 +5,23 @@ import type { ControlSize } from "../../internal/states";
 export type FieldListLabels = {
     /** `aria-label` of a row's remove button; `{row}` is the row's name. */
     remove: string;
-    /** `aria-label` of a row's drag handle (`reorderable`); `{row}` is the row's name. */
+    /** `aria-label` of a row's drag handle; `{row}` is the row's name. */
     reorder: string;
+    /** `aria-label` of a row's actions menu button (`rowActions="menu"`); `{row}` is the row's name. */
+    actions: string;
+    /** Menu item that moves the row one place up. */
+    moveUp: string;
+    /** Menu item that moves the row one place down. */
+    moveDown: string;
+    /** Menu item that removes the row. */
+    removeItem: string;
+    /** Announced after a move from the menu or its keys; `{row}`, `{position}`, `{total}`. */
+    moved: string;
     /** Name of a row without `getLabel` text; `{index}` counts from 1. */
     row: string;
     /** Name of a row with `getLabel` text; `{label}` is that text. */
     namedRow: string;
-    /** Why the remove button of a `getLocked` row is off: its tooltip and description. */
+    /** Why a pinned row cannot be removed: the tooltip of its remove button, the note in its menu. */
     lockedReason: string;
     /** Text beside the disabled add button once the list holds `max` rows; `{max}` is the limit. */
     maxReached: string;
@@ -42,6 +52,10 @@ export type FieldListRow<T> = {
     /** Takes the row out of the list (the row's remove button does the same). */
     remove: () => void;
 };
+/** How a row offers its remove and its moves. */
+export type FieldListRowActions = "buttons" | "menu";
+/** The look of the list: on a fill of its own, or on the host surface. */
+export type FieldListVariant = "plain" | "surface";
 export type FieldListProps<T extends object> = Omit<FieldRootDomProps, "onChange"> & {
     /**
      * The rows (controlled).
@@ -64,7 +78,7 @@ export type FieldListProps<T extends object> = Omit<FieldRootDomProps, "onChange
      */
     columns: readonly FieldListColumn[];
     /**
-     * The cells of a row, one element per column (a fragment): kit fields without `label`. `row` has `index`, `update(patch)` and `remove()`. In one column the remove is the field's last segment.
+     * The cells of a row, one element per column (a fragment): kit fields without `label`. `row` has `index`, `update(patch)` and `remove()`.
      */
     renderItem: (item: T, row: FieldListRow<T>) => React.ReactNode;
     /**
@@ -80,17 +94,25 @@ export type FieldListProps<T extends object> = Omit<FieldRootDomProps, "onChange
      */
     addLabel?: string;
     /**
-     * The row's own text (its title field) for the remove button, the handle and drag announcements; else the row number.
+     * The row's own text (its title field) for the remove button, the handle, the menu button and move announcements; else the row number.
      */
     getLabel?: (item: T) => string;
     /**
-     * Pinned rows: the remove button stays in its place, off, its tooltip says why (`labels.lockedReason`); with `reorderable` a lock takes the handle's place and the row holds it while others move.
+     * Pinned rows: the remove stays in its place, off, and says why (`labels.lockedReason`); with `reorderable` a lock takes the handle's place and the row holds it. In the menu every item is off.
      */
     getLocked?: (item: T) => boolean;
     /**
-     * Rows move by a handle at the row's end, after the remove button: drag, a touch hold, Alt + ↑ / ↓.
+     * Rows move: with `rowActions="buttons"` by a handle that ends the row, after the remove button (drag, a touch hold, Alt + ↑ / ↓); with `"menu"` by its items «Выше» and «Ниже» and Alt + ↑ / ↓ on the menu button.
      */
     reorderable?: boolean;
+    /**
+     * How a row offers its actions: `buttons` — a remove button «×» and, with `reorderable`, the handle after it; `menu` — one «⋯» button whose menu moves the row up or down and removes it.
+     */
+    rowActions?: FieldListRowActions;
+    /**
+     * Look of the list: `plain` — the rows on the host surface; `surface` — the rows on a fill of their own, one step up the surface ladder, with side padding.
+     */
+    variant?: FieldListVariant;
     /**
      * The fewest rows: at this count the remove buttons are disabled.
      */
@@ -116,7 +138,7 @@ export type FieldListProps<T extends object> = Omit<FieldRootDomProps, "onChange
      */
     error?: React.ReactNode;
     /**
-     * Disables every field, handle and button; a disabled `Fieldset` around it sets it too.
+     * Disables every field, handle, button and menu button; a disabled `Fieldset` around it sets it too.
      */
     disabled?: boolean;
     /**
@@ -129,12 +151,12 @@ export type FieldListProps<T extends object> = Omit<FieldRootDomProps, "onChange
     labels?: Partial<FieldListLabels>;
 };
 /**
- * An editable list of records of the same shape: one row per record, the column headings shown
- * once above the rows, a remove button per row, an add button under them, an optional handle to
- * reorder and pinned rows. In a narrow container the rows stack into blocks and each field shows
- * its own label.
+ * An editable list of records of the same shape: one row per record on one grid, the column
+ * headings shown once above the rows, the row's actions at its end (a remove button and a handle,
+ * or one menu), an add button under them and pinned rows. In a narrow container a row keeps its
+ * first fields and its actions on one line and puts the rest under them, each with its label.
  */
-export declare function FieldList<T extends object>({ value: valueProp, defaultValue, onValueChange, getId, columns, renderItem, renderTotals, createItem, addLabel, getLabel, getLocked, reorderable, min, max, label, hint, hintTone, error, disabled: disabledProp, size: sizeProp, labels: labelsProp, className, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: FieldListProps<T>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare function FieldList<T extends object>({ value: valueProp, defaultValue, onValueChange, getId, columns, renderItem, renderTotals, createItem, addLabel, getLabel, getLocked, reorderable, rowActions, variant, min, max, label, hint, hintTone, error, disabled: disabledProp, size: sizeProp, labels: labelsProp, className, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: FieldListProps<T>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export declare namespace FieldList {
     var displayName: string;
 }

package/dist/components/gantt/Gantt.d.ts

@@ -122,7 +122,7 @@ export type GanttProps<Row, Bar extends GanttBar = GanttBar> = Omit<React.HTMLAt
      */
     empty?: React.ReactNode;
     /**
-     * Content at the start of the toolbar (title, filters, a primary action); the zoom and «Сегодня» sit at its end.
+     * Content at the start of the toolbar (title, a legend, filters), kept together in the free room; «Сегодня» and the zoom keep their width at its end, and on a narrow chart they take the next line, the zoom filling it.
      */
     toolbar?: React.ReactNode;
     /**