@nxgt/material 3.68.0 → 3.71.0

package/docs/troubleshooting.md

@@ -66,6 +66,7 @@ words in your error.
 - [A Button's label overflows a card on a phone](#a-buttons-label-overflows-a-card-on-a-phone)
 - [A ResponsiveButton no longer shows its tooltip next to its visible label](#a-responsivebutton-no-longer-shows-its-tooltip-next-to-its-visible-label)
 - [An input now has `placeholder=" "` in the DOM](#an-input-now-has-placeholder--in-the-dom)
+- ["Select all" runs under the sort, "Filters" or the actions in a cards or tiles list on a phone](#select-all-runs-under-the-sort-filters-or-the-actions-in-a-cards-or-tiles-list-on-a-phone)
 - [A dialog or sheet scrolls, or clips a child, after upgrading](#a-dialog-or-sheet-scrolls-or-clips-a-child-after-upgrading)
 - [A form's fields no longer scroll in their own box after upgrading](#a-forms-fields-no-longer-scroll-in-their-own-box-after-upgrading)
 - [My activity content lost its side padding, or the rail's entries moved up](#my-activity-content-lost-its-side-padding-or-the-rails-entries-moved-up)
@@ -1427,6 +1428,18 @@ your own through `className`. With `asChild`, put the label in a `<span>` (on a
 </Button>
 ```
 
+### "Select all" runs under the sort, "Filters" or the actions in a cards or tiles list on a phone
+
+**When:** below 768px, a `ServerTable` in `cards` or `tiles` with `filter` and
+`actions` draws "Select all" over the sort menu and "Filters (N)" when an action
+has a long label ("Add a measurement unit").
+**Why:** up to 3.70.0, the label of row 2 neither shrank nor truncated, and the
+end group (sort, "Filters (N)", actions) never gave up its width.
+**Fix:** update. The "Select all" text now ends in "…" (the box keeps its name,
+"Select all on this page"), and an end group too wide for the row wraps to its
+own line under it. Until then, use a `Fab` for the create action on phones, or
+a short or icon-only label.
+
 ### A dialog or sheet scrolls, or clips a child, after upgrading
 
 **When:** after upgrading, a tall `DialogContent`, `AlertDialogContent` or
@@ -2128,6 +2141,12 @@ settles, with `focusRef` on the table. It matches the row by id, not by label.
 See "Handing the focus back to a row" in
 [RowMenu](components/data-table-filter-and-lists.md#handing-the-focus-back-to-a-row).
 
+### A `RecordActionsMenu` or `ConfirmDialog` refusal shows no action, or its link reloads the page
+
+**When:** `send` rejects (or a `ConfirmDialog`'s `onConfirm` throws) with an error that should offer a link, but the dialog or toast shows only the message; or the link of a toast action reloads the whole app.
+**Why:** only an `ActionRefusal` carries an action (a plain `Error`, or a rethrown copy of its message, does not). A toast's `href` is a plain navigation (`window.location.assign`), since a toast is outside your router.
+**Fix:** reject with `new ActionRefusal(message, { action: { label, href } })` and keep it as thrown (do not wrap it in another `Error`). For a client-side navigation use `action: { label, onAction: () => navigate(...) }`. A `ConfirmDialog` renders it by default; a `refusal` prop of your own replaces that rendering, so it must show the details and the action itself. See [ConfirmDialog](components/feedback-and-status.md#confirmdialog) and [RecordActionsMenu](components/data-table-filter-and-lists.md#recordactionsmenu).
+
 ### A `ConfirmationDialog` reopened with new content blocks clicks
 
 **When:** a `ConfirmationDialog` or a `ConfirmDialog` (or a `Dialog`,
@@ -3649,6 +3668,26 @@ fill is now left empty, and the title stays centred.
 <PrintHeader title="Invoice" logoText="LOGO" />
 ```
 
+### A `keepTogether` block is cut off at the bottom of the page
+
+**When:** the console shows `Node of type VIEW can't wrap between pages and
+it's bigger than available page height` and the rows of a `PrintSection` or
+a `section` / `stack` with `keepTogether` run past the page edge.
+**Why:** react-pdf keeps a block whole with `wrap={false}` and cannot split
+one taller than a page, nor measure it ahead.
+**Fix:** for a document as data, render it with `renderPdfBuffer`,
+`renderPdfBlob`, `renderPdfStream`, `downloadPdf` or `pdfResponse`: they
+measure each `keepTogether` block and let a too-tall one break normally. For a
+`<PrintSection keepTogether>` in a `PrintDocument`, or your own call to
+`renderPdfElement`, remove `keepTogether` from blocks that can outgrow a page,
+or resolve the document first:
+
+```ts
+import { resolveKeepTogether } from '@nxgt/material-core/pdf/render';
+
+const element = renderPdfElement(await resolveKeepTogether(doc));
+```
+
 ### French amounts print with a slash, as in `1/234,50`
 
 **When:** before 2.2.0, `formatAmount(1234.5, 'EUR', { locale: 'fr-FR' })`
@@ -4675,7 +4714,12 @@ expect(await within(button.parentElement!).findByRole('status')).toHaveTextConte
 error)`. The status may be any non-2xx.
 **Why:** the storage rejected the `PUT` to the presigned URL. For `403` the
 usual causes are an expired URL, or a `Content-Type` that differs from the
-one the URL was signed with.
+one the URL was signed with. With a presigned POST target, the policy refused
+the file (size, content type, expiry) and the message names the S3 code when
+it is readable, such as `Upload failed with status 400 (EntityTooLarge)`.
+The field shows it translated (`material.upload.error-status`, `error-status-code`);
+`error.message` in `onError` stays English, and `error` is an `UploadError`
+(`kind`, `status`, `code`).
 **Fix:**
 
 ```ts
@@ -4690,12 +4734,14 @@ const getPresignedUrl = async (file: File) => {
 
 **When:** an `S3UploadField` upload fails immediately. The browser console
 shows a CORS error for the storage host.
-**Why:** the browser blocked the cross-origin `PUT`. The bucket's CORS rules
-do not allow your origin, the `PUT` method, or the headers you send.
+**Why:** the browser blocked the cross-origin `PUT` (or `POST` with a presigned
+POST target). The bucket's CORS rules do not allow your origin, the method, or
+the headers you send; a `Content-Security-Policy` without the bucket host in
+`connect-src` fails the same way.
 **Fix:**
 
 ```json
-[{ "AllowedOrigins": ["https://app.example.com"], "AllowedMethods": ["PUT"], "AllowedHeaders": ["*"] }]
+[{ "AllowedOrigins": ["https://app.example.com"], "AllowedMethods": ["PUT", "POST"], "AllowedHeaders": ["*"] }]
 ```
 
 Apply it on the bucket, with your own origin.
@@ -5135,7 +5181,7 @@ such as `getByRole('navigation', { name: 'pagination' })`,
 | `No filters available`, `+2 more` | `Aucun filtre disponible`, `+2 de plus` | `filter.empty`, `filter.more` |
 | `Yes` / `No`, `From 5`, `Until …`, `Up to 9` (filter chips) | `Oui` / `Non`, `À partir de 5`, `Jusqu'au …`, `Jusqu'à 9` | `filter.value.*` |
 | `Unread` (`MessageCard`) | `Non lu` | `cards.unread` |
-| `Replace {name}`, `Upload failed` | `Remplacer {name}`, `Échec de l'envoi` | `upload.replace-named`, `upload.failed` |
+| `Replace {name}`, `Remove {name}`, `Upload failed` | `Remplacer {name}`, `Supprimer {name}`, `Échec de l'envoi` | `upload.replace-named`, `upload.remove-named`, `upload.failed` |
 | `File type not accepted`, `File exceeds maximum size of …`, `Maximum of 3 files reached` | `Type de fichier non accepté`, `Le fichier dépasse la taille maximale de …`, `Maximum de 3 fichiers atteint` | `upload.invalid-type`, `upload.too-large`, `upload.max-files` |
 | `Write something …`, `Insert {name} emoji` (editor) | `Écrire quelque chose…`, `Insérer l'emoji {name}` | `rich-text-editor.placeholder`, `rich-text-editor.insert-emoji` |
 | `Progress: 40%` | `Progression : 40 %` | `circular-progress.label` |
@@ -7741,8 +7787,13 @@ one. The usual sources are the components listed in
 [the guide](guides/csp.md#style-elements-the-components-inject).
 `ScrollArea`, `Select`, `RichTextEditor` and the scroll lock of dialogs and
 sheets take the nonce from `NonceProvider`, and report this when the app has
-none (or gives it another nonce than the header's). A `<style>` in mermaid's
-SVG is a [known gap](guides/csp.md#known-gaps). `Toaster`, `Drawer`,
+none (or gives it another nonce than the header's). Mermaid and KaTeX
+need none of this on a client render
+([Markdown under a strict CSP](guides/csp.md#markdown-katex-mermaid-and-code-under-a-strict-csp));
+the two left are a server-rendered page with math (KaTeX's `style` attributes
+need `style-src-attr 'unsafe-inline'`) and the `<style>` cytoscape adds to
+`<head>` for mermaid's mindmap and architecture diagrams.
+`Toaster`, `Drawer`,
 `InputOTP`, `ImageCropper`, `Spinner` and `PdfReader` create none: their CSS is in the stylesheet, so if one of them looks unstyled, the
 app imports neither `styles.css` nor `dist/material.css`.
 **Fix:** for `style-src-attr`, allow attributes: they cannot be nonced.
@@ -7763,10 +7814,6 @@ import { NonceProvider } from '@nxgt/material';
 </NonceProvider>;
 ```
 
-For a mermaid diagram, serve that route with `'unsafe-inline'` in
-`style-src-elem` instead of the nonce (a nonce in the same directive makes
-browsers ignore `'unsafe-inline'`).
-
 Once a page has a header-delivered CSP, browsers blank the `nonce` attribute, so React's development build may warn of an attribute mismatch when it hydrates a server-rendered `<style nonce>`. The warning is harmless.
 
 ### `Refused to load the font 'data:font/woff2…' because it violates the following Content Security Policy directive: "font-src 'self'"`

package/lib/components/ui/collections/server-table/server-table-phone-row.css

@@ -187,3 +187,9 @@
 		gap: 0.75rem;
 	}
 }
+/* A wide action (#2168): the actions may shrink within the row, so a long
+ * label ends in "..." (the button's own ellipsis) instead of overflowing. */
+[data-slot="server-table-phone-row-end"] > [data-slot="server-table-actions"] {
+	flex-shrink: 1;
+	min-width: 0;
+}

package/lib/components/ui/display/code/code-moonlight.css

@@ -1,3 +1,40 @@
+/* The scheme's colours as custom properties on the block: classes of the
+   stylesheet, never an inline `style` (strict CSP). Same values as
+   moonlight-tokens.ts; code-block-scheme.test.ts keeps them equal. */
+[data-slot="code-block"][data-scheme="dark"] {
+	--code-bg: #222436;
+	--code-fg: #c8d3f5;
+	--code-comment: #7a88cf;
+	--code-blue: #82aaff;
+	--code-cyan: #86e1fc;
+	--code-green: #c3e88d;
+	--code-orange: #ff966c;
+	--code-yellow: #ffc777;
+	--code-red: #ff757f;
+	--code-magenta: #c099ff;
+	--code-pink: #fca7ea;
+	--code-selection: #2f334d;
+}
+
+[data-slot="code-block"][data-scheme="light"] {
+	--code-bg: #f5f7ff;
+	--code-fg: #383a51;
+	--code-comment: #7a88cf;
+	--code-blue: #3e68d7;
+	--code-cyan: #0b8ec2;
+	--code-green: #4db380;
+	--code-orange: #c44c22;
+	--code-yellow: #ac8300;
+	--code-red: #c53b40;
+	--code-magenta: #7a5af5;
+	--code-pink: #b04d9a;
+	--code-selection: #d4daf0;
+}
+
+[data-slot="code-block"] [data-code-scroll] {
+	max-height: var(--code-max-height, none);
+}
+
 [data-slot="code-block"] {
 	background: var(--code-bg);
 	color: var(--code-fg);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.68.0",
+	"version": "3.71.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -372,7 +372,7 @@
 		"docs:previews": "rm -rf node_modules/.cache/nxgt-preview-free/missing && NXGT_PREVIEW_FREE=1 vitest run --project previews && bun .storybook/preview-free-report.ts"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.45.1",
+		"@nxgt/material-core": "^0.46.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",