@nxgt/material 3.42.0 → 3.43.0

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

@@ -17,7 +17,7 @@ either can be used alone.
 | <img src="../previews/data-table-filter-lists-servertable.webp" width="96" alt=""> | [ServerTable](#servertable) | A server-mode `DataTable` driven by the URL, with the Filter in its top band (a title and a description, or neither): sort, cursor paging, the empty page with a scene, an action and removable chips, one count announced |
 | <img src="../previews/data-table-filter-lists-rowmenu.webp" width="96" alt=""> | [RowMenu](#rowmenu) | A row's "..." button named after its row ("Actions for Ada"), its menu aligned to the end with the destructive item last, and `rowMenuColumn` to drop both in a table |
 | <img src="../previews/data-table-filter-lists-listempty.webp" width="96" alt=""> | [ListEmpty](#listempty) | A list's empty page: nothing yet, with a scene and an action, or nothing matches and the way out |
-| <img src="../previews/data-table-filter-lists-pagefooter.webp" width="96" alt=""> | [PageFooter](#pagefooter) | The page footer of a feed that is not a table (cards, a news feed) under a FilterBar: the range and Previous / Next as links from the URL's cursor trail, `pageControls="icon"` |
+| <img src="../previews/data-table-filter-lists-pagefooter.webp" width="96" alt=""> | [PageFooter](#pagefooter) | The page footer of a feed that is not a table (cards, a news feed) under a FilterBar: the range and Previous / Next as links from the URL's cursor trail, `pageControls="icon"`; no `totalCount` for a feed with no total (no range, Previous / Next only) |
 | <img src="../previews/data-table-filter-lists-datagrid.webp" width="96" alt=""> | [DataGrid](#datagrid) | An editable grid: spreadsheet keys, paste, a fill handle with series, undo, totals, saving with versions and conflicts (lazy ones fetch theirs on "Keep mine"), `onRefuse` for a refused paste or fill, row selection (`enableRowSelection`), and resizable, hideable and reorderable columns (`columnControls`, `columnLayout`, `DataGridColumnsMenu`) |
 | <img src="../previews/data-table-filter-lists-daygroupedlist.webp" width="96" alt=""> | [DayGroupedList](#daygroupedlist) | A list split by day under sticky Today / Yesterday / Earlier headings |
 | <img src="../previews/data-table-filter-lists-filter.webp" width="96" alt=""> | [Filter](#filter) | Schema-driven filters with chips, presets and persistence |
@@ -898,13 +898,24 @@ export default function Students() {
     Under `max` again, the button returns. On a phone an action in the bar
     shows the notice inline; one in the More menu is a disabled item whose
     notice is its description (`aria-describedby`), so it reads under its label.
-  - `onClick(ids, selection, rows, { trigger, focusTrigger })`: `trigger` is the
-    button the action started from (the "More" button for a More-menu item),
-    and `focusTrigger()` gives it the focus back, found again at call time, so
-    it works after a re-render. When the action is gone by then (its count fell
-    to 0, or past `max`) the focus goes to the next bulk action, else "More",
-    else the table's "Select all" (the table itself without one), never the
-    body. A handler that takes three parameters stays valid.
+  - `onClick(ids, selection, rows, { actionId, trigger, element, focusTrigger })`:
+    `focusTrigger()` gives the focus back to the action, found again in the
+    DOM when it is called by the stable key every bulk button carries,
+    `data-bulk-action="<id>"` (the More button carries `data-bulk-more`). It
+    works after the bar was drawn again (a resize, a rotation, the move
+    between the desktop toolbar and the phone's bar): the action's new button
+    gets the focus, and the More button when the action now sits in the More
+    menu. When the action is hidden by then (its count fell to 0, or past
+    `max`) the focus goes to the next bulk action, else "More", else the
+    table's "Select all" (the table itself without one), never the body.
+    `trigger` (and `element()`, the same as a function) is the action's
+    current button, or the More button, read when you read it: do not keep it
+    from the click, the node is disconnected after a redraw; use
+    `focusTrigger()`, and `actionId` is the key. A dialog opened from
+    `onClick` returns the focus to the button it was opened from by default,
+    which a redraw has disconnected: give it
+    `onCloseAutoFocus={(e) => { e.preventDefault(); ctx.focusTrigger(); }}`
+    as below. A handler that takes three parameters stays valid.
   ```tsx
   const [confirm, setConfirm] = useState<{ ids: string[]; focus: () => void } | null>(null);
   <ServerTable<Person>
@@ -921,6 +932,8 @@ export default function Students() {
       },
     ]}
   />
+  {/* A ConfirmDialog (or ConfirmationDialog, CustomDialog) takes the same
+      prop: onCloseAutoFocus={(e) => { e.preventDefault(); confirm?.focus(); }} */}
   <Dialog open={confirm != null} onOpenChange={(open) => !open && setConfirm(null)}>
     <DialogContent
       // Without this, the focus goes back to what Radix remembers, which is
@@ -1226,11 +1239,17 @@ import { FilterBar, PageFooter } from '@nxgt/material/components';
 
 Previous exists when the URL has a trail; Next when `pageInfo` has a next page and an `endCursor`. An end with no page is a disabled button with `aria-disabled`, not a link. Previous and Next are named "Previous" / "Next", or "Previous page" / "Next page" with `pageControls="icon"` (`material.table.pagination.*` keys, as the table's).
 
+A cursor feed whose API answers `pageInfo` and the items but no total (a news or notifications feed) leaves `totalCount` out: the footer shows no range (never a made-up total), only the controls, usually with `pageControls="icon"`, and still renders nothing for an empty first page.
+
+```tsx
+<PageFooter pageInfo={pageInfo} params={params} pageSize={20} count={items.length} pageControls="icon" />
+```
+
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `params` | `URLSearchParams` | — | the page's search params: the trail is read from them and every other param is kept in the hrefs |
 | `pageInfo` | `{ hasNextPage, endCursor? }` | — | the connection's page info |
-| `totalCount` | `number` | — | items matching the query across every page |
+| `totalCount` | `number` | — | items matching the query across every page; leave it out for a cursor feed with no total: no range, only the Previous / Next controls (Next disabled once `pageInfo.hasNextPage` is false) |
 | `pageSize` | `number` | — | items per page; it places the range from the trail |
 | `count` | `number` | `pageSize` | items on this page, for a short last page |
 | `pageHref` | `(params) => string` | ``?${params}`` | a page's href |

package/docs/components/feedback-and-status.md

@@ -226,6 +226,7 @@ function DeleteProject({ onDelete }: { onDelete: () => Promise<void> }) {
 | `lockOnRefusal` | `boolean` | `false` | once `onConfirm` has refused (thrown), the confirm button stays disabled while its error shows, so a retry that cannot succeed is not invited; Cancel stays enabled. The error clears when the dialog closes |
 | `confirmLabel` / `cancelLabel` | `string` | "Confirm" / "Cancel", translated (`material.confirm-dialog.confirm` / `.cancel`) | button text |
 | `cancelVariant` | `ButtonVariant` | `'tonal'` | the Cancel button's variant; `'outlined'` restores the earlier look |
+| `onCloseAutoFocus` | `(event: Event) => void` | — | called as the dialog closes, before the focus goes back; `event.preventDefault()` places it yourself, e.g. `ctx.focusTrigger()` of a `ServerTable` bulk action whose button a redraw replaced |
 
 On a phone (below 640 px) the footer stacks. A `destructive` dialog puts Cancel first and the destructive action last; a default one keeps the action on top.
 
@@ -234,7 +235,9 @@ it hands the focus back to what opened it, or to the menu's trigger when
 that was a `DropdownMenuItem` (gone by then); `Dialog`, `Sheet` and
 `Drawer` do the same.
 `ConfirmationDialog` is a `Dialog` and focuses its first control (its form
-field, or its first button).
+field, or its first button). `ConfirmDialog`, `ConfirmationDialog` and
+`CustomDialog` take `onCloseAutoFocus`: opened from a `ServerTable` bulk
+action, pass `onCloseAutoFocus={(e) => { e.preventDefault(); ctx.focusTrigger(); }}`.
 
 ![ConfirmationDialog](../previews/feedback-status-confirmationdialog.webp)
 
@@ -327,6 +330,7 @@ import { Atom } from 'lucide-react';
 | `title` / `description` | `ReactNode` | — | hidden when empty |
 | `footer` | `ReactNode` | — | after a separator; omitted when empty |
 | `open` / `onOpenChange` | Radix `Dialog` props | uncontrolled | control it from outside |
+| `onCloseAutoFocus` | `(event: Event) => void` | — | called as it closes, before the focus goes back; `event.preventDefault()` places it yourself |
 
 **Storybook:** `Feedback & status/CustomDialog` · **Vue:** `CustomDialog`
 

package/package.json

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