prime-ui-kit 0.18.0 → 0.20.0

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

@@ -5,14 +5,24 @@ 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;
-    /** Spoken name of the lock on a `getLocked` row of a list without `reorderable`. */
-    locked: string;
+    /** 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;
     /** Name of the totals row (`renderTotals`), shown in its first cell when that has no total. */
@@ -25,8 +35,8 @@ export type FieldListColumn = {
     /** Column heading, shown once above the rows; it names the field of this column in every row. */
     label: string;
     /**
-     * `fill` (default) shares the free width; `compact` fits an icon-only control (an icon Select,
-     * a swatch button, a checkbox); `xs` a number of a few digits (a share, a percent); `s` a short
+     * `fill` (default) shares the free width; `compact` is as wide as its widest control or heading
+     * (an icon Select, a swatch button, a checkbox); `xs` a number of a few digits (a share, a percent); `s` a short
      * value (a quantity, a code); `m` an amount or a date.
      */
     width?: FieldListColumnWidth;
@@ -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).
@@ -68,7 +82,7 @@ export type FieldListProps<T extends object> = Omit<FieldRootDomProps, "onChange
      */
     renderItem: (item: T, row: FieldListRow<T>) => React.ReactNode;
     /**
-     * The totals row under the rows: one node per column (a fragment), `null` where a column has none. The first cell without a total reads `labels.totals`, the row's group name.
+     * The totals row under the rows: one node per column (a fragment), `null` where none; each aligned as its column's field text. The first cell without a total reads `labels.totals`.
      */
     renderTotals?: (items: readonly 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: a lock in the lead column, no remove button, they hold their place 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 leading handle: 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;
     /**

package/dist/components/index.d.ts

@@ -40,8 +40,10 @@ export type { ConfirmDialogLabels, ConfirmDialogRootProps, ConfirmDialogTriggerP
 export { ConfirmDialog } from "./confirm-dialog/ConfirmDialog";
 export type { CrossfadeProps } from "./crossfade/Crossfade";
 export { Crossfade } from "./crossfade/Crossfade";
-export type { DataTableColumn, DataTableColumnsMenuProps, DataTableGroup, DataTableLabels, DataTableOrder, DataTableProps, DataTableRowClickEvent, DataTableSortState, } from "./data-table/DataTable";
+export type { DataTableColumn, DataTableGroup, DataTableLabels, DataTableOrder, DataTableProps, DataTableRowClickEvent, DataTableSortState, } from "./data-table/DataTable";
 export { DataTable } from "./data-table/DataTable";
+export type { DataTableColumnsMenuLabels, DataTableColumnsMenuProps, } from "./data-table/DataTableColumnsMenu";
+export { DataTableColumnsMenu } from "./data-table/DataTableColumnsMenu";
 export type { DatepickerLabels, DatepickerPanelProps, DatepickerPreset, DatepickerRange, DatepickerRootProps, WeekStart, } from "./datepicker/Datepicker";
 export { Datepicker, DEFAULT_DATEPICKER_PRESETS, datepickerPresets, formatDatepickerValue, formatDateValue, YEARLESS_YEAR, } from "./datepicker/Datepicker";
 export type { DescriptionListItemActionProps, DescriptionListItemProps, DescriptionListLabels, DescriptionListOrientation, DescriptionListRootProps, } from "./description-list/DescriptionList";

package/dist/components/kanban/Kanban.d.ts

@@ -141,6 +141,10 @@ export type KanbanRootProps<T> = Omit<React.HTMLAttributes<HTMLDivElement>, "chi
      * Columns show skeleton cards in the card geometry; the cards cross-fade in when it turns off.
      */
     loading?: boolean;
+    /**
+     * Placeholder columns a `loading` board draws while `columns` is empty (the stages are still loading); the columns fade in where they stood.
+     */
+    loadingColumns?: number;
     /**
      * Read-only board: no drag, no keyboard moves, no column grips; `onItemOpen` and `getItemHref` still open cards.
      */

package/dist/components/list/List.d.ts

@@ -11,7 +11,7 @@ export type ListRootProps = Omit<React.HTMLAttributes<HTMLUListElement>, "childr
      */
     size?: ControlSize;
     /**
-     * Rows reorder by a leading handle (drag, touch hold, Alt + ↑ / ↓): item `value` `id` goes before `beforeId` (`null` = last). Apply with `moveBefore`; a returned promise keeps the row busy, a rejection moves it back.
+     * Rows reorder by an end handle (drag, touch hold, Alt + ↑ / ↓): item `value` `id` goes before `beforeId` (`null` = last). Apply with `moveBefore`; a returned promise keeps the row busy, a rejection moves it back.
      */
     onReorder?: (id: string, beforeId: string | null) => void | Promise<void>;
     /**
@@ -90,14 +90,19 @@ declare namespace ListItemCount {
     var displayName: string;
 }
 export type ListItemActionsProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * `"end"` after the row element: a plain settings row, label first. `"start"` before it, in the DOM too: the on / off of a reorderable row reads first and the grip keeps the end.
+     */
+    side?: "start" | "end";
     ref?: React.Ref<HTMLDivElement>;
 };
 /**
- * The row's own controls (a Switch, a Dropdown with its icon Button, an icon Button): at the end of
- * the row, beside its button or link and never inside it, one tier below the row. The row's fills
+ * The row's own controls (a Switch, a Dropdown with its icon Button, an icon Button): beside its
+ * button or link and never inside it, one tier below the row — at its end, or leading it with
+ * `side="start"` (the on / off of a reorderable row, whose end edge is the grip's). The row's fills
  * cover them.
  */
-declare function ListItemActions({ className, ...rest }: ListItemActionsProps): import("react/jsx-runtime").JSX.Element;
+declare function ListItemActions({ side, className, ...rest }: ListItemActionsProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ListItemActions {
     var displayName: string;
 }

package/dist/components/scroll-container/ScrollContainer.d.ts

@@ -17,7 +17,7 @@ export type ScrollContainerProps = React.HTMLAttributes<HTMLElement> & {
      */
     axis?: ScrollContainerAxis;
     /**
-     * CSS `overscroll-behavior`; `contain` stops scroll chaining into the page.
+     * CSS `overscroll-behavior` along the region's own axes; `contain` stops scroll chaining into the page, a scroll across them still reaches the region around.
      */
     overscrollBehavior?: "auto" | "contain" | "none";
     /**