@nxgt/material 3.22.0 → 3.23.0

package/docs/components/data-table-filter-and-lists.md

@@ -122,6 +122,7 @@ table enables, for typing your own column defs.
 | `getRowHref` | `(row) => string \| undefined` | — | the first data cell links to the row's page; a click elsewhere on the row follows it |
 | `onRowClick` | `(row, event) => void` | — | a click on the row (not on a control); alone (without `getRowHref`), it makes the row focusable and Enter calls it |
 | `linkComponent` | `ComponentType<{ href, className?, children?, rel?, 'aria-label'?, onClick? }>` | `<a>` | the link for `getRowHref` and the page links: wrap your router's. It must forward `className` and `ref` (the past-end page's "Back to the first page" is a `Button asChild` over it) |
+| `reserveActions` | `boolean` | `true` | with `actions` and a `select` column: keep the toolbar's 68px band while nothing is selected, so the bar does not push the rows down; `false` keeps none and the bar arrives on the first selection (`ServerTable` passes `false`) |
 | `focusable` | `boolean` | `true` with `actions`, else `false` | the `<table>` (or the list of cards or tiles) takes the focus by script (`tabindex="-1"`, never a tab stop): where the focus goes once the control that had it is gone. When the selection is cleared and the focused control went with it (a bulk action's button), the table takes the focus instead of the page's body ([focus after a bulk action](#focus-after-a-bulk-action)); `false` turns both off |
 | `tableRef` | `Ref<HTMLTableElement>` | — | the `<table>`, to focus it yourself (with `focusable`); `controls.focusTable()` does the same from a toolbar slot. It stays `null` while the layout is a list (`cards`, `tiles`, or the phone side of `{ phone, wide }`): use `focusRef` |
 | `focusRef` | `Ref<HTMLElement>` | — | the element `focusable` moves the focus to, whichever the layout: the `<table>`, or the list of cards |
@@ -273,6 +274,18 @@ wide screen; on a phone the extra lines still push them down).
 />
 ```
 
+### Focus while paging
+
+A page control that has the focus keeps it while the next page loads: a link
+(or a button) stays the same element, `aria-disabled`, dimmed, and a click on
+it does nothing, instead of being swapped for a disabled button (which drops the
+focus to `<body>`, #1609). When a control really goes (Next on the last page),
+the focus moves to its counterpart, or to the pagination `<nav>`
+(`tabindex="-1"`, never a tab stop) when neither is left. A focus or a pointer
+press elsewhere is never pulled back. The footer's selected count is a polite
+status, so the first selection is announced ("1 row selected") when its bar
+shows up.
+
 ### Focus after a bulk action
 
 When a bulk action clears the selection, its buttons unmount and the focus
@@ -387,7 +400,10 @@ same minimum height once they do — so the "Delete selected" that appears on
 the first selection does not push the tapped row down. The reserved height
 is one row of default-size buttons (`h-9`); taller or wrapping actions still
 grow the toolbar. Without the `select` column, or without `actions`, no band
-is kept above the table.
+is kept above the table. `reserveActions={false}` keeps none either: the bar
+arrives on the first selection with a short grow (none under reduced motion),
+and the rows move down by its height. `ServerTable` passes `false`, so its
+bulk bar leaves no empty row under the band while nothing is selected.
 
 ```tsx
 <DataTable
@@ -868,7 +884,8 @@ Its props are `ServerTableProps<T>`; `filter` is a `ServerTableFilter`,
 | `description` | `ReactNode` | — | a muted line under the `title`, or alone above the band's controls without one; the `actions` stay at the band's end |
 | `actions` | `ReactNode` | — | the page's actions, at the band's end |
 | `bandDensity` | `'comfortable' \| 'compact'` | `'comfortable'` | `'compact'` halves the room above the band (16px to 8px) and under it (12px to 6px), for a list under a sticky app bar and a breadcrumb; the controls keep their size (the Filter's own `density` is the controls') |
-| `pageControls` | `'labelled' \| 'icon'` | `'labelled'` | the footer's Previous / Next: `'icon'` is icon-only, with a tooltip and the names "Previous page" / "Next page" (`DataTable`'s default is unchanged) |
+| `pageControls` | `'labelled' \| 'icon'` | `'labelled'` | the footer's Previous / Next: `'icon'` is icon-only, with a tooltip and the names "Previous page" / "Next page" (`DataTable`'s default is unchanged); on a coarse pointer the icon controls are 44x44 boxes (still painted 32px) |
+| `bandActions` | `'stacked' \| 'inline'` | `'stacked'` | with `filter`, where `actions` sit below 768px: `'stacked'` gives them a row above the search; `'inline'` keeps them on the search's row (the search takes the room left), for a lone icon action such as a "+". An action wider than 3.5rem wraps under the search. From 768px both are the same |
 | `filterRef` | `Ref<ServerTableFilterHandle>` | — | with `filter`: `filterRef.current.focus()` focuses the Filter's first control, the search, else the first quick filter, "Add filter" or "Filters (N)" the width shows |
 | `sorting` | `createSorting(…)` | — | headers sorted from the URL |
 | `filters` | `tableFilters(model)` | — | without `filter`: "nothing matches" and its clear |
@@ -883,6 +900,11 @@ Its props are `ServerTableProps<T>`; `filter` is a `ServerTableFilter`,
 | `resultsLabel` | `(count) => string` | "N results" | without `filter`: what the list's region says. The page past the last has its own words: `material.server-table.past-end`, `past-end-hint`, `first-page` and `past-end-status` |
 | `className` | `string` | — | on the list's surface |
 
+```tsx
+// A lone icon action stays on the search's row on a phone.
+<ServerTable {...props} filter={{ model }} bandActions="inline" actions={<IconButton aria-label="New" tooltip="New"><Icon name="plus" /></IconButton>} />
+```
+
 **Where the focus goes.** After "Clear" on an empty page, or the last chip
 removed, the focus returns to the Filter's search; a bar without one falls to
 its first shown control (a quick filter, "Add filter", or "Filters (N)" on a

package/docs/troubleshooting.md

@@ -356,6 +356,8 @@ words in your error.
 - [A `ServerTable` search shows older text, or a write is lost, over a slow router](#a-servertable-search-shows-older-text-or-a-write-is-lost-over-a-slow-router)
 - [`ListEmpty`'s title is now a heading](#listempty-title-is-now-a-heading)
 - [`ServerTable` keeps showing the empty page or the old rows after a failed fetch](#servertable-keeps-showing-the-empty-page-or-the-old-rows-after-a-failed-fetch)
+- [The focus falls to `<body>` after Previous / Next on a `ServerTable`](#the-focus-falls-to-body-after-previous--next-on-a-servertable)
+- [An empty gap under the `ServerTable` band while nothing is selected](#an-empty-gap-under-the-servertable-band-while-nothing-is-selected)
 - [The focus falls to the page after a `DataTable` bulk action](#the-focus-falls-to-the-page-after-a-datatable-bulk-action)
 - [A test's `getByText('No data available')` finds two elements after a change](#a-tests-getbytextno-data-available-finds-two-elements-after-a-change)
 - [`` [@nxgt/material] DataTable: `virtual` needs `maxHeight`; the rows are not virtualized. ``](#nxgtmaterial-datatable-virtual-needs-maxheight-the-rows-are-not-virtualized)
@@ -6502,6 +6504,23 @@ const columns = [{ accessorKey: 'name', header: NameHeader }];
 **Why:** `ServerTable` cannot tell a failed fetch from an empty answer: `error` was never passed, or it was passed and never cleared (`null`) when the next answer landed, so the failure stays on screen.
 **Fix:** pass `error` while the fetch has failed, with `onRetry`, and set it back to `null` as soon as the next answer lands. See [ServerTable](components/data-table-filter-and-lists.md#servertable).
 
+### The focus falls to `<body>` after Previous / Next on a `ServerTable`
+
+Versions before `reserveActions` landed swapped a page link for a disabled
+button while the next page loaded, which dropped the focus to `<body>`
+(always on a phone's tiles). Upgrade: the control now stays, `aria-disabled`,
+and the focus moves to its counterpart when one goes (Next on the last page).
+See [Focus while paging](components/data-table-filter-and-lists.md#focus-while-paging).
+A custom `linkComponent` must render an element that can take the focus (an
+`<a href>`).
+
+### An empty gap under the `ServerTable` band while nothing is selected
+
+Versions before `reserveActions` reserved the toolbar's 68px (`header-placeholder`) for the
+bulk actions. `ServerTable` now reserves nothing. On `DataTable` itself the
+default is still `reserveActions` `true`: pass `reserveActions={false}` to get
+the same.
+
 ### The focus falls to the page after a `DataTable` bulk action
 
 **When:** a bulk action clears the selection, its buttons unmount, and the next Tab starts from the top of the page.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.22.0",
+	"version": "3.23.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"