@nxgt/material 3.66.0 → 3.67.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nxgt/material
 
+## 3.67.0
+
+### Minor Changes
+
+- [#2079](https://github.com/softistx/nxgt-material/pull/2079) [`37b1427`](https://github.com/softistx/nxgt-material/commit/37b1427bfc7bc0438e2367f91b6d71ba117a8c16) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add `BackLink`: a link to the parent page, a ghost `LinkButton` with a leading arrow-left icon hidden from assistive tech and mirrored in right-to-left, named by its label ([#1694](https://github.com/softistx/nxgt-material/issues/1694)).
+
+- [#2076](https://github.com/softistx/nxgt-material/pull/2076) [`280a39a`](https://github.com/softistx/nxgt-material/commit/280a39a6ce85a8f638899094dcfa48ea7d901071) Thanks [@SteveGT96](https://github.com/SteveGT96)! - RowMenu: `useRowMenuFocus()` hands the focus back to a given row's trigger once an async action, a toast or a follow-up dialog is over. It returns a `focusRef` for the table and `focusRowMenu(rowId)`, which matches the row by id exactly (`getRowId`'s, written on the trigger by `rowMenuColumn` and by the new `RowMenu` `rowId` prop), never by label. `findRowMenuTrigger(rowId, scope?)` is exported too ([#2075](https://github.com/softistx/nxgt-material/issues/2075)). `focusRowMenu` answers `true` only when the trigger holds the focus, and claims it again for two frames if a dialog or a toast takes it. Vue: [#2077](https://github.com/softistx/nxgt-material/issues/2077).
+
 ## 3.66.0
 
 ### Minor Changes

package/README.md

@@ -547,6 +547,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-toolbar.webp" width="120" alt="Toolbar"> | [`Toolbar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#toolbar), `ToolbarButton`, `ToolbarToggle`, `ToolbarSeparator`, `ToolbarGroup`, `ToolbarToggleGroup`, `ToolbarToggleItem`, `ToolbarItemSlot`, `ToolbarMore`, `useToolbarEntry`, `useToolbarOverflow`, `useToolbarSpilled`, `useToolbarMoreAnchor`, `ToolbarPair` | A row of icon actions (WAI-ARIA toolbar): floating or docked, neutral or primary, comfortable or compact density, quiet, expressive or morph pressed look, rides above the phone keyboard, groups, choices and priorities spilling into More (a row or a column, with submenus, checkboxes and launched popovers and dialogs), `useToolbarOverflow` for a More of your own, your own controls and fields as items, hides on scroll. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-responsivebutton.webp" width="120" alt="ResponsiveButton"> | [`ResponsiveButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#responsivebutton) | Shows its label on desktop and collapses to icon-only on mobile, keeping the label for screen readers. | `ResponsiveButton` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-linkbutton.webp" width="120" alt="LinkButton"> | [`LinkButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#linkbutton), `IconLinkButton`, `ResponsiveLinkButton` | The button styles rendered as `react-router` links. | `LinkButton`, `IconLinkButton`, `ResponsiveLinkButton` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-backlink.webp" width="120" alt="BackLink"> | [`BackLink`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#backlink) | A ghost link to the parent page with a leading arrow, mirrored in right-to-left. | `BackLink` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-copybutton.webp" width="120" alt="CopyButton"> | [`CopyButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#copybutton), `CopyValue` | Copies a value to the clipboard and briefly shows a check mark. `CopyValue` displays the value next to the button. | `CopyButton`, `CopyValue` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-sharebutton.webp" width="120" alt="ShareButton"> | [`ShareButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#sharebutton) | Opens the system share sheet (`navigator.share`) and copies the link where there is none. | not yet |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-highlighttext.webp" width="120" alt="HighlightText"> | [`HighlightText`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#highlighttext) | Marks case-insensitive matches of a query inside a string (`splitMatch`). | `HighlightText` |
@@ -676,7 +677,7 @@ Not components: what the stylesheet gives any element.
 | --- | --- | --- | --- |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-datatable.webp" width="120" alt="DataTable"> | [`DataTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#datatable), `DataTableColumnHeader`, `DataTablePagination`, `DataTableServerFooter`, `DataTableViewOptions` | TanStack Table v9 with sorting, filtering, selection, expandable rows, pagination or load-more, column visibility, skeleton rows while loading and your own empty state — or one server page at a time, with controlled sorting and selection, cursor Previous / Next links and row links. On a phone it keeps its header row and scrolls sideways in a keyboard-reachable region; the page does not. Or cards and tiles instead of the table (`layout`, `renderCard`, `renderTile`), and `layout={{ phone: 'tiles', wide: 'table' }}` for tiles on a phone ([cards and tiles guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/cards-and-tiles.md)). Long lists render only the rows in view (`virtual`). | `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableServerFooter`, `DataTableViewOptions` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-servertable.webp" width="120" alt="ServerTable"> | [`ServerTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#servertable), `createSorting`, `tableFilters`, `defineFilterModel`, `parseFilterQuery`, `serializeFilterQuery`, `paramsFromQuery`, `serverPagination`… | A server-mode `DataTable` driven by the URL's search params, for any router: the Filter in its top band with the page's title (optional), description and actions, the sort, forward cursor paging, a selection reset on a new query, the empty page (a scene and an action for "nothing yet", the filters as removable chips), a compact band (`bandDensity`), icon-only Previous / Next (`pageControls`, 44px targets on a touch screen, focus kept while a page loads), actions that stay on the search's row on a phone (`bandActions`), a bulk bar that reserves no row until a selection, bulk actions with `appliesTo` that count and run only the selected rows they apply to (hidden at zero), an accessible `name`, a `max` rows with a notice, and `focusTrigger()` to give the focus back after a dialog, a `filterRef` to focus the Filter, a page past the last (rows deleted) that says so and links back to the first, an error state with Retry for a failed fetch (`error`, `onRetry`), and one count announced. | `ServerTable`, `createSorting`, `tableFilters`, `serverPagination` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-rowmenu.webp" width="120" alt="RowMenu"> | [`RowMenu`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#rowmenu), `RowMenuTrigger`, `rowMenuColumn` | A row's "..." button named after its row ("Actions for Ada"; 44px on touch, 36px with a mouse from `md`), its menu aligned to the end with the destructive item last and 44px items on touch, and a column helper for `DataTable` and `ServerTable` under a hidden but named "Actions" header; focus returns to the button, also from a dialog an item opened. | — |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-rowmenu.webp" width="120" alt="RowMenu"> | [`RowMenu`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#rowmenu), `RowMenuTrigger`, `rowMenuColumn` | A row's "..." button named after its row ("Actions for Ada"; 44px on touch, 36px with a mouse from `md`), its menu aligned to the end with the destructive item last and 44px items on touch, and a column helper for `DataTable` and `ServerTable` under a hidden but named "Actions" header; focus returns to the button, also from a dialog an item opened; `useRowMenuFocus()` / `focusRowMenu(rowId)` hands it back to one row's button after an async action, a toast or a later dialog. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-listempty.webp" width="120" alt="ListEmpty"> | [`ListEmpty`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#listempty) | A list's empty page: nothing yet (a title, or a scene, a line and an action), or nothing matches with what narrows it and a way out (a button or a link); its title is an `h2` (`headingLevel`). | `ListEmpty` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-pagefooter.webp" width="120" alt="PageFooter"> | [`PageFooter`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#pagefooter) | The page footer of a feed that is not a table (a list of cards, a news feed) under a `FilterBar`: the range ("21–40 of 134") and Previous / Next as real links built from the URL's cursor trail (`pageInfo`, `totalCount`, `params`; `totalCount` is optional: a feed with no total shows no range, only Previous / Next; `hideOnSinglePage` renders nothing when there is no previous and no next page), the same footer `ServerTable` draws, icon-only with `pageControls="icon"` (44px targets on a touch screen); an end with no page is a disabled button, `aria-disabled`. | `PageFooter` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-datagrid.webp" width="120" alt="DataGrid"> | [`DataGrid`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#datagrid) | An editable grid over `DataTable`'s columns: spreadsheet keys, a selected range, editors for text, numbers (with codes such as "abs"), options, dates and checkboxes, or your own; paste from Excel or Sheets, a fill handle that continues series, resizable, hideable and reorderable columns, undo, totals, and saving per cell, per row or in a batch with versions and conflicts ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/data-grid.md)). Long grids render only what is in view; on a phone it is a list of rows that open a panel. | — (later) |