prime-ui-kit 0.18.0 → 0.19.0

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

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

package/dist/color-picker.js

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

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

@@ -1,23 +1,19 @@
-import * as React from "react";
-import type { PositionAlign, PositionSide } from "../../hooks/usePosition";
-export type DataTableColumnsMenuProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children"> & {
-    /**
-     * Side of the trigger the menu opens on.
-     */
-    side?: PositionSide;
-    /**
-     * Alignment to the trigger. `auto` lines the panel up with the trigger edge that has more room beyond it; `start`, `center` or `end` fix it.
-     */
-    align?: PositionAlign;
-    /** The trigger button. */
-    ref?: React.Ref<HTMLButtonElement>;
+import { type ControlSize } from "../../internal/states";
+import type { DataTableLabels } from "./DataTable";
+import type { DataTableColumn } from "./types";
+type ColumnsMenuProps = {
+    /** Every column, hidden ones included, in table order. */
+    columns: DataTableColumn<never>[];
+    hidden: ReadonlySet<string>;
+    setHidden: (hidden: string[]) => void;
+    labels: DataTableLabels;
+    size: ControlSize;
 };
 /**
- * The column chooser of the table it sits in (put it into `toolbar`): a trigger button and a menu
- * with a check item per column and «Показать все». Writes the table's `hiddenColumns`; a column
- * with `hideable: false` stays checked and disabled, and the last visible column cannot be hidden.
+ * 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.
  */
-export declare function DataTableColumnsMenu({ side, align, ...rest }: DataTableColumnsMenuProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace DataTableColumnsMenu {
-    var displayName: string;
-}
+export declare function ColumnsMenu({ columns, hidden, setHidden, labels, size }: ColumnsMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,8 +1,6 @@
 import * as React from "react";
 import { type ControlSize } from "../../internal/states";
-import { DataTableColumnsMenu } from "./ColumnsMenu";
 import type { DataTableColumn, DataTableGroup, DataTableRowClickEvent, DataTableSortState } from "./types";
-export type { DataTableColumnsMenuProps } from "./ColumnsMenu";
 export type { DataTableColumn, DataTableGroup, DataTableOrder, DataTableRowClickEvent, DataTableSortState, } from "./types";
 /** System strings; `{from}`, `{to}`, `{total}`, `{label}`, `{count}`, `{group}` are replaced. */
 export type DataTableLabels = {
@@ -26,9 +24,9 @@ export type DataTableLabels = {
     expand: string;
     /** `aria-label` of the expand toggle of an expanded row. */
     collapse: string;
-    /** Text of the `DataTable.ColumnsMenu` trigger; `{shown}` and `{total}` are column counts. */
+    /** Name and tooltip of the column chooser (`columnsMenu`); `{shown}` and `{total}` are counts. */
     columns: string;
-    /** The `DataTable.ColumnsMenu` item that shows every column again. */
+    /** The column chooser item that shows every column again. */
     showAllColumns: string;
     /** `aria-label` of a row's drag handle (`onReorder`); `{label}` is `getRowLabel(row)`. */
     reorderRow: string;
@@ -50,7 +48,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. `DataTable.ColumnsMenu` in `toolbar` changes it.
+     * Ids of columns that are not rendered, controlled. A column with `hideable: false` stays. The column chooser (`columnsMenu`) changes it.
      */
     hiddenColumns?: string[];
     /**
@@ -58,9 +56,13 @@ export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "ch
      */
     defaultHiddenColumns?: string[];
     /**
-     * The hidden ids changed (`DataTable.ColumnsMenu`). The kit stores nothing: keep the list (local storage, the user's settings) and pass it back to restore the choice.
+     * The hidden ids changed (`columnsMenu`). The kit stores nothing: keep the list (local storage, the user's settings) and pass it back to restore the choice.
      */
     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`.
+     */
+    columnsMenu?: boolean;
     /**
      * Data; sorted in memory when a sort is set. With `source="server"` — the page (or the loaded batches) as the server returned it.
      */
@@ -93,6 +95,10 @@ export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "ch
      * The first visible column (with the selection and toggle columns) sticks while scrolling sideways; the start edge shadow falls from its end edge.
      */
     stickyFirstColumn?: boolean;
+    /**
+     * The last visible column (row actions) sticks to the end edge while scrolling sideways; the end edge shadow falls from its start edge.
+     */
+    stickyLastColumn?: boolean;
     /**
      * Stable row id (position by default; sub-rows too, `index` among siblings); selection, expansion and the enter animation of new rows are keyed by it. Pass it whenever sorting, selection or expansion is used.
      */
@@ -254,7 +260,7 @@ export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "ch
      */
     loadingRows?: number;
     /**
-     * Panel above the table (search, filters, bulk actions); stacks below 30rem of table width.
+     * 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.
      */
     toolbar?: React.ReactNode;
     /**
@@ -282,7 +288,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, rows, source, rowCount, size: sizeProp, className, showHeader, stickyHeader, stickyFirstColumn, 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 namespace DataTable {
-    var ColumnsMenu: typeof DataTableColumnsMenu;
-}
+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;

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

@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { ControlSize } from "../../internal/states";
 import type { DataTableColumn, DataTableSortState } from "./types";
 type HeadProps<Row> = {
@@ -6,6 +7,8 @@ type HeadProps<Row> = {
     sort: DataTableSortState;
     onSort: (columnId: string) => void;
     stickyFirstColumn: boolean;
+    /** The last visible column sticks to the end edge (with `stickyHeader`: the end corner). */
+    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. */
@@ -15,6 +18,10 @@ type HeadProps<Row> = {
     infoLabel: string;
     /** A leading column of row handles (`onReorder`). */
     reorderable?: boolean;
+    /** The column chooser trigger (`columnsMenu`), 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;
     selectAll?: {
         checked: boolean;
         indeterminate: boolean;
@@ -23,5 +30,5 @@ type HeadProps<Row> = {
         onToggle: () => void;
     };
 };
-export declare function Head<Row>({ columns, size, sort, onSort, stickyFirstColumn, stickyHeader, stickyCorner, expandEnabled, infoLabel, reorderable, selectAll, }: HeadProps<Row>): import("react/jsx-runtime").JSX.Element;
+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 {};

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

@@ -15,6 +15,10 @@ export type RowShared<Row> = {
     selectable: boolean;
     expandEnabled: boolean;
     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;
     striped: boolean;
     totalColumns: number;
     /**
@@ -93,10 +97,12 @@ type MeasureBodyProps<Row> = {
     expandEnabled: boolean;
     /** A leading column of row handles (`onReorder`). */
     reorderable: boolean;
+    /** A trailing cell under the head's column chooser. */
+    menuCell: 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, }: MeasureBodyProps<Row>): import("react/jsx-runtime").JSX.Element;
+export declare function MeasureBody<Row>({ rows, columns, selectable, expandEnabled, reorderable, menuCell, }: MeasureBodyProps<Row>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -10,6 +10,8 @@ type StateRowsProps<Row> = {
     expandEnabled: boolean;
     /** A leading column of row handles (`onReorder`). */
     reorderable?: boolean;
+    /** A trailing cell under the head's column chooser. */
+    menuCell: boolean;
     loadError: React.ReactNode;
     empty: React.ReactNode;
     emptyLabel: string;
@@ -20,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, 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, reorderable, menuCell, loadError, empty, emptyLabel, skeletonRows, }: StateRowsProps<Row>): import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];
 export {};

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

@@ -11,8 +11,8 @@ export type FieldListLabels = {
     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 the remove button of a `getLocked` row is off: its tooltip and description. */
+    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 +25,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;
@@ -64,11 +64,11 @@ 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()`.
+     * 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.
      */
     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;
     /**
@@ -84,11 +84,11 @@ export type FieldListProps<T extends object> = Omit<FieldRootDomProps, "onChange
      */
     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 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.
      */
     getLocked?: (item: T) => boolean;
     /**
-     * Rows move by a leading handle: drag, a touch hold, Alt + ↑ / ↓.
+     * Rows move by a handle at the row's end, after the remove button: drag, a touch hold, Alt + ↑ / ↓.
      */
     reorderable?: boolean;
     /**

package/dist/components/index.d.ts

@@ -40,7 +40,7 @@ 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 { DatepickerLabels, DatepickerPanelProps, DatepickerPreset, DatepickerRange, DatepickerRootProps, WeekStart, } from "./datepicker/Datepicker";
 export { Datepicker, DEFAULT_DATEPICKER_PRESETS, datepickerPresets, formatDatepickerValue, formatDateValue, YEARLESS_YEAR, } from "./datepicker/Datepicker";

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