@acronis-platform/ui-react 5.3.0 → 5.3.1

package/dist/llms/data-table.md

@@ -47,7 +47,7 @@ optional row expansion, column resizing, and sticky (pinned) columns.
 | `DataTableColumnHeader`   | A sortable column header — single-click toggle (↑/↓/↕). Use in a column's `header`.                                                                                                                                                       |
 | `DataTableToolbar`        | Search box + per-column filters + applied-filter chips. Takes a `table` instance.                                                                                                                                                         |
 | `DataTablePagination`     | Selection count, rows-per-page, page controls. Takes a `table`.                                                                                                                                                                           |
-| `DataTableViewOptions`    | Column-visibility menu (a thin TanStack adapter over the `TableViewOptions` primitive). Pass `iconOnly` for the cog trigger that belongs in the trailing settings column.                                                                 |
+| `DataTableViewOptions`    | Searchable, categorized column-visibility menu (a thin TanStack adapter over `TableViewOptions`). Pass `iconOnly` for the cog trigger in the trailing settings column.                                                                    |
 | `DataTableExpandTrigger`  | A chevron toggle wired to a row's expansion state, placed inside a column's `cell` render function.                                                                                                                                       |
 | `DataTableBulkActionsBar` | A selection-aware bar above the grid: the consumer's bulk actions in a `<fieldset>` disabled until a selection is active, plus the selection summary and a Deselect control (or `loadedLabel` when nothing is selected). Takes a `table`. |
 | `isBulkSelectionActive`   | The single predicate for the bulk-selection threshold (one or more rows selected). Pass it to `TableActionsCell`'s `bulkSelectionActive` rather than re-deriving it.                                                                      |
@@ -96,10 +96,15 @@ from it too (see **Server-driven usage** below).
   `columnResizing`). Pass `onColumnSizingChange` to persist widths.
 - **Sticky (pinned) columns** — set `meta.pin: 'left' | 'right'` on a
   `ColumnDef`. DataTable drives TanStack's native column-pinning and renders the
-  column as `position: sticky` cells with an opaque row background.
+  column as `position: sticky` cells with an opaque row background. The built-in
+  trailing settings/actions column is pinned right by default.
 - **Wrapping columns** — set `meta.wrap: true` on a `ColumnDef` to let that
-  column's header and cell content wrap onto multiple lines instead of
-  truncating, mirroring the `Table` primitives' `wrap` prop.
+  column's header and cell content drop the fixed row height and wrap onto
+  multiple lines, mirroring the `Table` primitives' `wrap` prop.
+- **Visibility labels and categories** — set `meta.label` for the text shown in
+  the visibility dropdown and `meta.category` to group related columns under a
+  labelled section with a Show all action. Labels fall back to a string header,
+  then the column id.
 - **Expandable column** — put a `DataTableExpandTrigger` in a column's `cell`
   render function so the expand affordance sits in a real column instead of a
   whole-row click. It reads `row.getCanExpand()` / `getIsExpanded()` and calls
@@ -164,10 +169,15 @@ as `children` of the toolbar for per-column filtering.
 | `renderRowActions` | `(row: Row<TData>) => ReactNode` | — | no | Renders the content of a row's overflow-actions menu (e.g. Edit/Delete items), opened from the ellipsis trigger in the trailing action column. Omit to render that row without a trigger — the 48px column is still reserved. Suppressed (like the trigger itself) while a bulk selection is active, per `TableActionsCell`. |
 | `rowActionsLabel` | `string` | `'Row actions'` | no | Accessible name of a row's overflow-actions trigger. Override to localize. |
 | `columnSettingsLabel` | `string` | — | no | Accessible name of the action column's column-visibility trigger. Override to localize; falls through to the view-options part's own default ("Column settings") when omitted. |
+| `columnSearchPlaceholder` | `string` | `'Search columns'` | no | Placeholder and accessible name of the built-in column-visibility search field. Override to localize. |
+| `showAllColumnsLabel` | `ReactNode` | `'Show all'` | no | Visible label of each category action that reveals every hidden column in that category. Override to localize. |
+| `noColumnsFoundLabel` | `ReactNode` | `'No columns found.'` | no | Empty state shown when the column-visibility search has no matches. Override to localize. |
 | `headerHints` | `Partial<DataTableHeaderHints>` | `{ sort: { label: 'Sort column', action: 'Click' }, reorder: { label: 'Reorder column', action: 'Drag' }, resize: { label: 'Resize column', action: 'Drag border' } }` | no | Copy of the tooltip shown while a header cell is hovered/focused — one `{ label, action }` line per capability that column actually has (`sort` / `reorder` / `resize`). Merged over the defaults, so any subset can be overridden to localize; a column with no capability shows no tooltip at all. |
 | `bulkSelectionActive` | `boolean` | `false` | no | On the `TableActionsCell` part — suppress this row's actions because a *bulk* selection is in play. The cell still reserves its 48px column but renders no children and no hover/press tint. Pass `isBulkSelectionActive(table)` (exported alongside DataTable) rather than re-deriving the threshold: **one or more rows selected**, including exactly one. |
 | `meta.pin` | `'left' | 'right'` | — | no | Set on a `ColumnDef.meta` (not a DataTable prop) — pins the column to a table edge. DataTable drives TanStack's native column-pinning and renders the column as `position: sticky` cells with an opaque row background. |
-| `meta.wrap` | `boolean` | — | no | Set on a `ColumnDef.meta` (not a DataTable prop) — allows a column's header and cell content to wrap onto multiple lines instead of truncating, mirroring the `Table` primitives' `wrap` prop. |
+| `meta.wrap` | `boolean` | — | no | Set on a `ColumnDef.meta` (not a DataTable prop) — allows a column's header and cell content to wrap onto multiple lines and drop the fixed row height, mirroring the `Table` primitives' `wrap` prop. |
+| `meta.label` | `string` | — | no | Human-readable label shown for the column in the visibility dropdown. Falls back to a string header and then the column id. |
+| `meta.category` | `string` | — | no | Optional visibility-dropdown category. Columns with the same value are grouped under a labelled section with a per-category Show all action. |
 | `children` | `ReactNode` | — | no | On DataTableToolbar — filter fields rendered inside a `FilterSearchFilters` popover (wire each to a column via `useFilterSearchFilters()` keyed by column id). When provided, the toolbar renders the filter popover plus a `FilterSearchAppliedFilters` chip row below it. |
 | `filtersLabel` | `ReactNode` | `'Filters'` | no | On DataTableToolbar — label for the filters trigger button. |
 | `getFilterChipLabel` | `(key: string, value: unknown) => ReactNode` | — | no | On DataTableToolbar — formats an applied-filter chip's label (defaults to "<id>: <value>"). |
@@ -293,11 +303,27 @@ Scenario: Sort a column in a single click
 
 ```gherkin
 Scenario: Hide a column
-  Given the toolbar's view-options menu
+  Given the view-options menu opened from the trailing settings cog
   When the user unchecks the column
   Then that column is removed from the grid
 ```
 
+```gherkin
+Scenario: Search and group visible columns
+  Given columns with meta.label and meta.category values
+  When the user opens the trailing settings cog
+  Then the visibility menu uses the metadata labels and groups matching categories
+  When the user searches
+  Then only matching column labels remain in the internally scrolling popup
+```
+
+```gherkin
+Scenario: Reveal a category
+  Given a category with multiple hidden columns
+  When the user activates that category's Show all action
+  Then every hidden column in that category becomes visible
+```
+
 ```gherkin
 Scenario: Filter via the toolbar
   Given a DataTableToolbar with searchKey="email"
@@ -394,7 +420,7 @@ Scenario: Sticky (pinned) columns
 ```gherkin
 Scenario: Wrapping columns
   Given a column with meta.wrap = true
-  Then that column's header and cell content wrap onto multiple lines instead of truncating
+  Then that column's header and cell content drop the fixed row height and wrap onto multiple lines
 ```
 
 ```gherkin

package/dist/llms/table.md

@@ -73,21 +73,21 @@ sort and URL-synced state.
 
 ## Parts
 
-| Part                | Element   | Purpose                                                                                                                     |
-| ------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------- |
-| `Table`             | `table`   | The table, in a horizontally scrollable container.                                                                          |
-| `TableHeader`       | `thead`   | Column-header section.                                                                                                      |
-| `TableBody`         | `tbody`   | Data rows section.                                                                                                          |
-| `TableFooter`       | `tfoot`   | Summary section with a top divider.                                                                                         |
-| `TableRow`          | `tr`      | A row; `selected` applies the active state.                                                                                 |
-| `TableHead`         | `th`      | Column header; `sortable` + `sortDirection` + `onSort`; `wrap`.                                                             |
-| `TableCell`         | `td`      | A data cell; `wrap` lets it grow to fit multi-line content.                                                                 |
-| `TableSelectCell`   | `td`/`th` | 32px leading selection cell for a `Checkbox`; `header` renders the select-all `th`.                                         |
-| `TableActionsCell`  | `td`      | 48px trailing cell for a row's overflow trigger; owns the hover/press tint and focus ring.                                  |
-| `TableSettingsCell` | `th`      | 48px trailing header cell for the column-settings trigger.                                                                  |
-| `TableCaption`      | `caption` | Optional caption below the table.                                                                                           |
-| `TablePagination`   | `div`     | Plain-prop pagination bar (no TanStack dependency).                                                                         |
-| `TableViewOptions`  | `div`     | Show/hide-columns dropdown driven by a plain columns array. `iconOnly` gives the cog trigger that fits `TableSettingsCell`. |
+| Part                | Element   | Purpose                                                                                                                                                                                   |
+| ------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Table`             | `table`   | The table, in a horizontally scrollable container.                                                                                                                                        |
+| `TableHeader`       | `thead`   | Column-header section.                                                                                                                                                                    |
+| `TableBody`         | `tbody`   | Data rows section.                                                                                                                                                                        |
+| `TableFooter`       | `tfoot`   | Summary section with a top divider.                                                                                                                                                       |
+| `TableRow`          | `tr`      | A row; `selected` applies the active state.                                                                                                                                               |
+| `TableHead`         | `th`      | Column header; `sortable` + `sortDirection` + `onSort`; `wrap`.                                                                                                                           |
+| `TableCell`         | `td`      | A data cell; `wrap` lets it grow to fit multi-line content.                                                                                                                               |
+| `TableSelectCell`   | `td`/`th` | 32px leading selection cell for a `Checkbox`; `header` renders the select-all `th`.                                                                                                       |
+| `TableActionsCell`  | `td`      | 48px trailing cell for a row's overflow trigger; owns the hover/press tint and focus ring.                                                                                                |
+| `TableSettingsCell` | `th`      | 48px trailing header cell for the column-settings trigger.                                                                                                                                |
+| `TableCaption`      | `caption` | Optional caption below the table.                                                                                                                                                         |
+| `TablePagination`   | `div`     | Plain-prop pagination bar (no TanStack dependency).                                                                                                                                       |
+| `TableViewOptions`  | `div`     | Searchable, internally scrolling show/hide-columns dropdown. Optional `category` values create labelled sections with per-category Show all actions; `iconOnly` fits `TableSettingsCell`. |
 
 ## Hooks
 
@@ -132,7 +132,7 @@ const { sortedData, getSortDirection, toggleSort } = useSortState({ data });
   Name
 </TableHead>
 
-// Wrappable cell — grows to fit multi-line content instead of truncating
+// Wrappable cell — drops the fixed row height and grows to fit multi-line content
 <TableCell wrap>{longDescription}</TableCell>
 
 // Header row — select-all cell leading, column-settings cell trailing
@@ -142,7 +142,11 @@ const { sortedData, getSortDirection, toggleSort } = useSortState({ data });
   </TableSelectCell>
   <TableHead>Name</TableHead>
   <TableSettingsCell>
-    <TableViewOptions iconOnly columns={columns} onToggle={toggleColumn} />
+    <TableViewOptions
+      iconOnly
+      columns={columns}
+      onToggle={toggleColumn}
+    />
   </TableSettingsCell>
 </TableRow>
 
@@ -176,7 +180,7 @@ const { sortedData, getSortDirection, toggleSort } = useSortState({ data });
 | `selected` | `boolean` | `false` | no | On a row — marks it selected (active row token + `data-state="selected"`). |
 | `sortable` | `boolean` | `false` | no | On a column header — renders a focusable sort affordance and exposes `aria-sort`. |
 | `sort-direction` | `'asc' | 'desc' | false` | `false` | no | On a sortable column header — the current sort direction (`false` = sortable but unsorted). Drives the sort icon and `aria-sort`. |
-| `wrap` | `boolean` | `false` | no | On a cell or column header — allow the content to wrap onto multiple lines (`whitespace-normal`) and drop the fixed row height so the cell grows to fit multi-line content instead of truncating. |
+| `wrap` | `boolean` | `false` | no | On a cell or column header — allow the content to wrap onto multiple lines (`whitespace-normal`) and drop the fixed row height so the cell grows to fit multi-line content. Default cells retain native table auto-layout; truncation is opt-in through a constrained cell or class. |
 | `header` | `boolean` | `false` | no | On the select-cell — render the header's select-all cell (`<th>`) instead of a row's selection cell (`<td>`). |
 | `bulk-selection-active` | `boolean` | `false` | no | On the actions-cell — suppress this row's actions because a *bulk* selection is in play: the cell keeps its 48px column (so the grid doesn't reflow) but renders no children and no hover/press tint. The threshold is one or more rows being selected — a single selected row is already a bulk selection and loses its row actions. With a TanStack table, pass `isBulkSelectionActive(table)` (from the data-table part) instead of re-deriving it. |
 | `page-index` | `number` | — | yes | On the pagination part — the zero-based index of the current page. |
@@ -185,7 +189,7 @@ const { sortedData, getSortDirection, toggleSort } = useSortState({ data });
 | `page-size-options` | `number[]` | `[10, 20, 30, 40, 50]` | no | On the pagination part — the page-size options offered in the rows-per-page select. |
 | `total-rows` | `number` | — | no | On the pagination part — total rows across all pages (drives the summary text). |
 | `selected-rows` | `number` | — | no | On the pagination part — number of currently selected rows (drives the selection summary text). |
-| `columns` | `{ id: string; label: string; hidden: boolean }[]` | — | yes | On the view-options part — the toggleable columns and their current visibility. |
+| `columns` | `{ id: string; label: string; hidden: boolean; category?: string }[]` | — | yes | On the view-options part — the toggleable columns and their current visibility. Columns with the same optional category render in a labelled section with a per-category action that reveals every hidden column. |
 | `rows-per-page-label` | `string` | `'Rows per page'` | no | On the pagination part — label of the rows-per-page select (also its accessible name). Override to localize. |
 | `first-page-label` | `string` | `'Go to first page'` | no | On the pagination part — accessible name of the first-page control. |
 | `previous-page-label` | `string` | `'Go to previous page'` | no | On the pagination part — accessible name of the previous-page control. |
@@ -196,7 +200,9 @@ const { sortedData, getSortDirection, toggleSort } = useSortState({ data });
 | `trigger-label` | `ReactNode` | `'View'` | no | On the view-options part — the trigger button label. Ignored when `icon-only` is set. |
 | `icon-only` | `boolean` | `false` | no | On the view-options part — render the trigger as a cog-only icon button instead of a labelled button: the shape that fits the 48px `TableSettingsCell` column. |
 | `trigger-aria-label` | `string` | `'Column settings'` | no | On the view-options part — accessible name of the `icon-only` trigger. Override to localize. |
-| `menu-label` | `ReactNode` | `'Toggle columns'` | no | On the view-options part — the dropdown heading. |
+| `search-placeholder` | `string` | `'Search columns'` | no | On the view-options part — placeholder and accessible name of the in-dropdown column filter. Override to localize. |
+| `show-all-label` | `ReactNode` | `'Show all'` | no | On the view-options part — visible label of each category action that reveals every hidden column in that category. Its accessible name also includes the category label. |
+| `no-results-label` | `ReactNode` | `'No columns found.'` | no | On the view-options part — empty state shown when no column label matches the search query. Override to localize. |
 
 ## Events
 
@@ -311,7 +317,7 @@ Scenario: A wrapping cell grows the row
   Given a TableCell (or TableHead) with wrap = true holding multi-line content
   When it renders
   Then it uses whitespace-normal and drops the fixed row height
-  And the row grows to fit the content instead of truncating it
+  And the row grows to fit the content
 ```
 
 ### Pagination (TablePagination)
@@ -345,12 +351,36 @@ Scenario: Selection summary
 
 ```gherkin
 Scenario: Toggling column visibility
-  Given a TableViewOptions with a { id, label, hidden }[] of columns
+  Given a TableViewOptions with a { id, label, hidden, category? }[] of columns
   When the user toggles a column's checkbox in the dropdown
   Then the toggle event fires with that column's id
   And the consumer updates the column's hidden flag
 ```
 
+```gherkin
+Scenario: Searching columns
+  Given an open TableViewOptions
+  When the user types into the column search field
+  Then only columns whose labels contain the query remain
+  And an overridable empty state renders when no labels match
+```
+
+```gherkin
+Scenario: Categorized columns
+  Given columns sharing a category
+  Then they render in a group programmatically named by that category
+  And the category's Show all action is also named with the category
+  When the user activates Show all
+  Then the toggle event fires once for every hidden column in that category
+```
+
+```gherkin
+Scenario: A long column list scrolls inside the dropdown
+  Given the open column list is taller than the available viewport height
+  Then the 300px dropdown is capped to the available height
+  And the dropdown itself scrolls vertically
+```
+
 ```gherkin
 Scenario: The icon-only trigger fits the settings cell
   Given a TableViewOptions with icon-only = true
@@ -425,7 +455,10 @@ headers natively. Use the parts as their elements intend.
   items; each row shows a presentational checkbox box beside the column name and
   the row itself carries `role="menuitemcheckbox"` + `aria-checked`. The trigger
   has a visible "View" label, or — with `iconOnly` — is a cog-only icon button
-  named by `triggerAriaLabel` (default "Column settings").
+  named by `triggerAriaLabel` (default "Column settings"). Each categorized
+  group is named by its visible heading, and each repeated Show all action
+  combines its localized visible label with that category so assistive
+  technology can distinguish the actions.
 
 ## Contrast
 

package/dist/llms.txt

@@ -1,6 +1,6 @@
 # Acronis UI Kit for React — LLM Reference
 
-> `@acronis-platform/ui-react` v5.3.0
+> `@acronis-platform/ui-react` v5.3.1
 
 Machine-readable component reference compiled from framework-agnostic specs.
 Each entry links to a self-contained markdown file with props, behavior,

package/dist/src/components/ui/data-table/data-table-view-options.d.ts

@@ -1,6 +1,6 @@
 import { Table } from '@tanstack/react-table';
 import { TableViewOptionsProps } from '../table';
-interface DataTableViewOptionsProps<TData> extends Pick<TableViewOptionsProps, 'triggerLabel' | 'iconOnly' | 'triggerAriaLabel'> {
+interface DataTableViewOptionsProps<TData> extends Pick<TableViewOptionsProps, 'triggerLabel' | 'iconOnly' | 'triggerAriaLabel' | 'searchPlaceholder' | 'showAllLabel' | 'noResultsLabel'> {
     table: Table<TData>;
 }
 export declare function DataTableViewOptions<TData>({ table, ...triggerProps }: DataTableViewOptionsProps<TData>): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ui/data-table/data-table.d.ts

@@ -9,6 +9,10 @@ declare module '@tanstack/react-table' {
          * row height); mirrors the `Table` primitives' `wrap` prop on TableHead/TableCell.
          */
         wrap?: boolean;
+        /** Label shown for this column in the visibility dropdown. */
+        label?: string;
+        /** Optional visibility-dropdown category for this column. */
+        category?: string;
     }
 }
 export declare function getPinnedStyle<TData>(column: Column<TData, unknown>): CSSProperties | undefined;
@@ -237,6 +241,12 @@ interface DataTableOwnProps<TData> {
      * Override to localize.
      */
     columnSettingsLabel?: string;
+    /** Placeholder and accessible name of the column-visibility search field. */
+    columnSearchPlaceholder?: string;
+    /** Label of the per-category action that reveals every column. */
+    showAllColumnsLabel?: ReactNode;
+    /** Empty state shown when the column search has no matches. */
+    noColumnsFoundLabel?: ReactNode;
     /**
      * Copy of the tooltip shown while a header cell is hovered/focused — one
      * line per capability that column actually has (sort/reorder/resize).
@@ -246,5 +256,5 @@ interface DataTableOwnProps<TData> {
     headerHints?: Partial<DataTableHeaderHints>;
 }
 export type DataTableProps<TData, TValue = unknown> = DataTableOwnProps<TData> & DataTableDataSourceProps<TData, TValue>;
-export declare function DataTable<TData, TValue = unknown>({ columns, data, table: externalTable, getRowCanExpand, renderExpandedRow, striped, bordered, highlightCurrentRow, skeleton, skeletonRows, enableColumnResizing, onColumnSizingChange, enableColumnReordering, columnOrder: controlledColumnOrder, onColumnOrderChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, rowSelection: controlledRowSelection, onRowSelectionChange, manualSorting, sorting: controlledSorting, onSortingChange, renderRow, renderEmptyState, paginationMode, onLoadMore, loadMoreRootMargin, hasNextPage, resizeColumnLabel, emptyLabel, isLoadingMore, hideActionColumn, renderRowActions, rowActionsLabel, columnSettingsLabel, headerHints, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData, TValue = unknown>({ columns, data, table: externalTable, getRowCanExpand, renderExpandedRow, striped, bordered, highlightCurrentRow, skeleton, skeletonRows, enableColumnResizing, onColumnSizingChange, enableColumnReordering, columnOrder: controlledColumnOrder, onColumnOrderChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, rowSelection: controlledRowSelection, onRowSelectionChange, manualSorting, sorting: controlledSorting, onSortingChange, renderRow, renderEmptyState, paginationMode, onLoadMore, loadMoreRootMargin, hasNextPage, resizeColumnLabel, emptyLabel, isLoadingMore, hideActionColumn, renderRowActions, rowActionsLabel, columnSettingsLabel, columnSearchPlaceholder, showAllColumnsLabel, noColumnsFoundLabel, headerHints, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/ui/data-table/data-table.docs.d.ts

@@ -152,6 +152,12 @@ export interface DataTableProps {
     rowActionsLabel?: string;
     /** Accessible name of the action column's column-visibility trigger. */
     columnSettingsLabel?: string;
+    /** Placeholder and accessible name of the column-visibility search field. */
+    columnSearchPlaceholder?: string;
+    /** Label of the per-category action that reveals every column. */
+    showAllColumnsLabel?: ReactNode;
+    /** Empty state shown when the column search has no matches. */
+    noColumnsFoundLabel?: ReactNode;
     /**
      * Copy of the tooltip shown while a header cell is hovered/focused — one
      * `{ label, action }` line per capability that column actually has. Merged

package/dist/src/components/ui/table/table-view-options.d.ts

@@ -6,6 +6,8 @@ export interface TableColumnVisibility {
     label: string;
     /** Whether the column is currently hidden. */
     hidden: boolean;
+    /** Optional section name used to group related columns in the dropdown. */
+    category?: string;
 }
 export interface TableViewOptionsProps {
     /** The toggleable columns and their current visibility. */
@@ -21,8 +23,14 @@ export interface TableViewOptionsProps {
     iconOnly?: boolean;
     /** Accessible name of the `iconOnly` trigger. Override to localize. */
     triggerAriaLabel?: string;
+    /** Placeholder and accessible name of the column filter. */
+    searchPlaceholder?: string;
+    /** Label of the action that reveals every column in a category. */
+    showAllLabel?: React.ReactNode;
+    /** Empty state shown when no column matches the search query. */
+    noResultsLabel?: React.ReactNode;
 }
-declare function TableViewOptions({ columns, onToggle, triggerLabel, iconOnly, triggerAriaLabel, }: TableViewOptionsProps): import("react/jsx-runtime").JSX.Element;
+declare function TableViewOptions({ columns, onToggle, triggerLabel, iconOnly, triggerAriaLabel, searchPlaceholder, showAllLabel, noResultsLabel, }: TableViewOptionsProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TableViewOptions {
     var displayName: string;
 }