@nxgt/material 3.52.0 → 3.53.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +28 -0
- package/README.md +5 -4
- package/dist/{async-slice-BGtmF3K5.js → async-slice-DDSsekfm.js} +2 -2
- package/dist/{button-Ct0KRBsN.js → button-Ct8DSLVv.js} +1 -1
- package/dist/charts.js +1064 -932
- package/dist/{chip-Ca1SEd70.js → chip-BzoNsd-W.js} +2 -2
- package/dist/{code-editor-DtwRhK8B.js → code-editor-DsLQeiZc.js} +6 -6
- package/dist/code-editor.js +5 -5
- package/dist/{code-language-items-CEclGxhA.js → code-language-items-4zXlIEZ0.js} +2 -2
- package/dist/components/components.css +1 -5
- package/dist/components/ui/actions/action-card/action-card-tile.css +11 -2
- package/dist/components/ui/collections/data-table/data-table-items-record.css +27 -0
- package/dist/components/ui/collections/data-table/index.css +14 -0
- package/dist/{components-CzELzsOi.js → components-DZPMvc1w.js} +15976 -15821
- package/dist/components.js +26 -26
- package/dist/{dialog-BIy04Hpd.js → dialog-DwPmwmA3.js} +4 -4
- package/dist/dnd.js +1 -1
- package/dist/draw-animate.js +1 -1
- package/dist/{dropdown-menu-B0Kd8x3G.js → dropdown-menu-CDN6Nqx6.js} +1 -1
- package/dist/editor.js +9 -9
- package/dist/{empty-state-CKxORwFE.js → empty-state-Bb9W9did.js} +2 -2
- package/dist/{escape-owner-BGKjiglh.js → escape-owner-DI_lg2ID.js} +1 -1
- package/dist/{field-blur-Dz1zPaYK.js → field-blur-BcJH8H9B.js} +1 -1
- package/dist/{field-blur-context-1T6GkSNc.js → field-blur-context-Dg1nwWOV.js} +1 -1
- package/dist/hooks.js +2 -2
- package/dist/{hover-card-BwQ9IRxa.js → hover-card-Qse4gnop.js} +2 -2
- package/dist/i18n-provider-DlVPS58N.js +79 -0
- package/dist/i18n.js +5 -5
- package/dist/{icon-badge-D5Ns7ndZ.js → icon-badge-DVPBQOKe.js} +3 -3
- package/dist/{icon-button-VzdqY_Tv.js → icon-button-C3wDxsh6.js} +12 -12
- package/dist/lib/components/ui/actions/action-card/action-card-semantics.d.ts +17 -1
- package/dist/lib/components/ui/actions/action-card/action-card.d.ts +16 -2
- package/dist/lib/components/ui/actions/action-card/partials/action-card-text.d.ts +6 -2
- package/dist/lib/components/ui/actions/action-card/partials/action-card-title-button.d.ts +15 -1
- package/dist/lib/components/ui/actions/action-card/partials/action-card-trail.d.ts +2 -1
- package/dist/lib/components/ui/collections/data-grid/columns/column-codec.d.ts +3 -3
- package/dist/lib/components/ui/collections/data-grid/columns/column-edit.d.ts +5 -5
- package/dist/lib/components/ui/collections/data-grid/columns/row-meta.d.ts +22 -0
- package/dist/lib/components/ui/collections/data-grid/grid-meta.d.ts +10 -3
- package/dist/lib/components/ui/collections/data-table/data-table.d.ts +1 -1
- package/dist/lib/components/ui/collections/data-table/layout-types.d.ts +27 -0
- package/dist/lib/components/ui/collections/data-table/partials/layouts/data-table-item-context.d.ts +2 -0
- package/dist/lib/components/ui/collections/data-table/partials/layouts/data-table-item-row.d.ts +8 -0
- package/dist/lib/components/ui/collections/data-table/types.d.ts +1 -1
- package/dist/lib/components/ui/collections/filter/bar/filter-bar-classes.d.ts +7 -2
- package/dist/lib/components/ui/collections/server-table/partials/server-table-band-classes.d.ts +5 -0
- package/dist/lib/components/ui/display/list-tile/internal.d.ts +1 -0
- package/dist/lib/components/ui/display/list-tile/partials/list-tile-dense-text.d.ts +28 -0
- package/dist/lib/components/ui/feedback/toast/toast-text.d.ts +7 -0
- package/dist/lib/components/ui/fields/contacts/placeholders.d.ts +1 -1
- package/dist/lib/components/ui/forms/index.d.ts +2 -0
- package/dist/lib/components/ui/forms/use-fast-form.d.ts +25 -0
- package/dist/lib/components/ui/forms/use-focus-on-refusal.d.ts +14 -0
- package/dist/lib/components/ui/layout/app-shell/activity-content-aside.d.ts +3 -1
- package/dist/lib/components/ui/layout/app-shell/activity-content.d.ts +10 -1
- package/dist/lib/components/ui/selection/switcher/partials/switcher-trigger.d.ts +3 -1
- package/dist/lib/components/ui/selection/switcher/switcher.d.ts +1 -1
- package/dist/lib/components/ui/selection/switcher/types.d.ts +7 -0
- package/dist/lib/components/ui/widgets/native-charts/core/reference-text.d.ts +14 -6
- package/dist/lib/components/ui/widgets/native-charts/core/reference.d.ts +57 -10
- package/dist/lib/components/ui/widgets/native-charts/core/types.d.ts +13 -5
- package/dist/lib/components/ui/widgets/native-charts/hooks/chart-model-types.d.ts +3 -2
- package/dist/lib/components/ui/widgets/native-charts/index.d.ts +1 -1
- package/dist/lib/components/ui/widgets/native-charts/line-chart/line-chart-types.d.ts +6 -1
- package/dist/lib/components/ui/widgets/native-charts/line-chart/partials/reference-marks.d.ts +1 -1
- package/dist/lib/i18n/material-resources-registry.d.ts +21 -0
- package/dist/lib/i18n/resources/en/en.d.ts +4 -0
- package/dist/lib/i18n/resources/en/material.json.d.ts +5 -1
- package/dist/lib/i18n/resources/fr/fr.d.ts +4 -0
- package/dist/lib/i18n/resources/fr/material.json.d.ts +5 -1
- package/dist/lib/i18n/resources/resources.d.ts +8 -0
- package/dist/lib/i18n/translator.d.ts +1 -1
- package/dist/lib.js +1 -1
- package/dist/main.js +43 -43
- package/dist/map.js +8 -8
- package/dist/material.css +1 -1
- package/dist/pdf-reader.js +1 -1
- package/dist/print.js +2 -2
- package/dist/{public-D-J3nZFm.js → public-BoVE0ffh.js} +9 -9
- package/dist/{rich-code-block-Ig0ERAa2.js → rich-code-block-DAUM7Yh_.js} +5 -5
- package/dist/{sortable-provider-DfPkSN90.js → sortable-provider-BLXsGE_0.js} +2 -2
- package/dist/{spinner-KQb3YuR_.js → spinner-Rg4PnBPH.js} +1 -1
- package/dist/{stored-language-Cb9FMEwk.js → stored-language-B1lJMPbR.js} +10 -2
- package/dist/theme-picker.js +2 -2
- package/dist/{theme-toggle-BY-SpsFV.js → theme-toggle-jVdxF_mc.js} +1 -1
- package/dist/{toolbar-items-30w9rG5h.js → toolbar-items-BFY_hns5.js} +4 -4
- package/dist/{translate-material-BPl8TQLg.js → translate-material-q-JNxP1m.js} +2 -2
- package/dist/{translator-BnQXtpSZ.js → translator-BU1o3_l9.js} +1 -1
- package/dist/{use-chat-composer-BSKJRYMB.js → use-chat-composer-DGbDuIUa.js} +3758 -3716
- package/dist/{use-heading-spy-BgXA8uz6.js → use-heading-spy-CP63sAcS.js} +1 -1
- package/dist/{use-material-translation-ByM3gD9R.js → use-material-translation-nNF8fUXz.js} +2 -2
- package/dist/use-shape-morph-DXdy2X5g.js +35 -0
- package/docs/components/buttons-and-actions.md +30 -1
- package/docs/components/data-table-filter-and-lists.md +2 -2
- package/docs/components/navigation-and-layout.md +1 -0
- package/docs/components/rich-widgets.md +2 -1
- package/docs/components/selection-and-choice.md +20 -0
- package/docs/guides/app-shell.md +22 -0
- package/docs/guides/cards-and-tiles.md +40 -4
- package/docs/guides/charts.md +30 -2
- package/docs/guides/data-grid.md +42 -2
- package/docs/guides/forms.md +35 -0
- package/docs/guides/i18n.md +6 -2
- package/docs/roadmap.md +84 -684
- package/docs/troubleshooting.md +21 -0
- package/lib/components/components.css +1 -5
- package/lib/components/ui/actions/action-card/action-card-tile.css +11 -2
- package/lib/components/ui/collections/data-table/data-table-items-record.css +27 -0
- package/lib/components/ui/collections/data-table/index.css +14 -0
- package/package.json +1 -1
- package/dist/i18n-provider-BFNrM0Qu.js +0 -45
- package/dist/use-shape-morph-BKA_R5P5.js +0 -35
package/docs/roadmap.md
CHANGED
|
@@ -6,6 +6,19 @@ version they shipped in, and planned entries may name the major they target.
|
|
|
6
6
|
|
|
7
7
|
## Now
|
|
8
8
|
|
|
9
|
+
- **Toast texts follow app translations** — the toast presets read the
|
|
10
|
+
app's `I18nProvider` `resources`, so an override under `material.*`
|
|
11
|
+
changes their wording ([#1855](https://github.com/softistx/nxgt-material/issues/1855)).
|
|
12
|
+
- **Smaller, easier-to-read components** — the library's own source is kept
|
|
13
|
+
to files under 200 lines and functions under 80, so a component is quicker to
|
|
14
|
+
read and to fix ([#1865](https://github.com/softistx/nxgt-material/issues/1865)).
|
|
15
|
+
- **DataGrid: one column, several kinds of row** — `meta.rowEditor(row)` picks
|
|
16
|
+
the built-in editor from the row, and `meta.options` and
|
|
17
|
+
`meta.number.decimals` take the row, so a result column can be a bounded
|
|
18
|
+
number, a pick among the row's own options or a text
|
|
19
|
+
([#1892](https://github.com/softistx/nxgt-material/issues/1892),
|
|
20
|
+
[guide](guides/data-grid.md#one-column-several-kinds-of-row)).
|
|
21
|
+
|
|
9
22
|
- **Dense pages on large screens** — a record's page shows more on a 1440 or
|
|
10
23
|
1920 px screen instead of stretching the same fields. `DescriptionList` lays
|
|
11
24
|
a record's fields in `auto-fill` columns (`minItem`, `maxColumns`, a `meta`
|
|
@@ -137,84 +150,91 @@ version they shipped in, and planned entries may name the major they target.
|
|
|
137
150
|
|
|
138
151
|
## Next
|
|
139
152
|
|
|
153
|
+
- **Dark cards that separate from the page ground** — in dark mode, cards
|
|
154
|
+
stand out from the page instead of blending into it ([#1676](https://github.com/softistx/nxgt-material/issues/1676)).
|
|
155
|
+
- **FilterBar "Add a filter" stays on its row** — the button no longer wraps
|
|
156
|
+
alone onto a second row on a desktop screen ([#1752](https://github.com/softistx/nxgt-material/issues/1752)).
|
|
157
|
+
|
|
140
158
|
- **`ButtonGroup` standard look by default, and the old `Typography` names
|
|
141
159
|
removed (4.0)** — `ButtonGroup`'s Material 3 Expressive look (`look="standard"`)
|
|
142
160
|
becomes the default, with `look="legacy"` to keep the original group. The
|
|
143
161
|
fifteen deprecated `Typography` variants (`huge-*`, `headline-larger`,
|
|
144
162
|
`headline-large`... `caption`) are removed in favour of the type scale's
|
|
145
163
|
names, once the other component families read the scale
|
|
146
|
-
([Typography](components/primitives.md#typography)).
|
|
164
|
+
([Typography](components/primitives.md#typography)). Tracked in [#1872](https://github.com/softistx/nxgt-material/issues/1872).
|
|
147
165
|
|
|
148
166
|
- **IconButton: `round` or `square` like Button** — a `shape` of `round` or
|
|
149
167
|
`square` on `IconButton`, with the same press morph, beside the expressive
|
|
150
|
-
shape names it takes today.
|
|
168
|
+
shape names it takes today ([#1450](https://github.com/softistx/nxgt-material/issues/1450)).
|
|
151
169
|
|
|
152
170
|
- **DataGrid: row selection on phones** — the phone list gets the selection
|
|
153
171
|
control the grid has with `enableRowSelection`: a checkbox per item and a
|
|
154
|
-
select-all, with the same `rowSelection` state.
|
|
172
|
+
select-all, with the same `rowSelection` state. Tracked in [#1873](https://github.com/softistx/nxgt-material/issues/1873).
|
|
155
173
|
- **Players that take children** — `MediaPlayer` and `AudioPlayer` accept
|
|
156
174
|
children rendered inside the player's provider, so `MediaTranscript` and
|
|
157
175
|
`useMediaPlayer` work next to a player without a `MediaPlayerHost`
|
|
158
176
|
([#1023](https://github.com/softistx/nxgt-material/issues/1023)).
|
|
159
177
|
- **Connected date and time pickers** — the calendar or time picker of a
|
|
160
|
-
date or time field opens connected to the field, as a `Select` list does
|
|
178
|
+
date or time field opens connected to the field, as a `Select` list does
|
|
179
|
+
([#1870](https://github.com/softistx/nxgt-material/issues/1870)).
|
|
161
180
|
- **Your own tiptap and ProseMirror classes in custom features** — a subpath
|
|
162
181
|
re-exporting the editor's own tiptap and ProseMirror classes, so a custom
|
|
163
182
|
feature can use `instanceof` and build nodes with the editor's copy
|
|
164
|
-
(additive).
|
|
183
|
+
(additive). Tracked in [#1874](https://github.com/softistx/nxgt-material/issues/1874).
|
|
165
184
|
- **The built-in toolbars on `Toolbar`** — `DataTable`, `PdfReader`,
|
|
166
185
|
`Calendar` and the notifications panel get one tab stop
|
|
167
186
|
and arrow keys (the WAI-ARIA toolbar pattern), the shared look and overflow
|
|
168
|
-
into a More menu.
|
|
169
|
-
- **DataGrid
|
|
170
|
-
the grid,
|
|
171
|
-
|
|
172
|
-
headers, conditional tints and comments on cells.
|
|
187
|
+
into a More menu. Tracked in [#1875](https://github.com/softistx/nxgt-material/issues/1875).
|
|
188
|
+
- **DataGrid: rows, finding and richer cells** — add and delete rows, filters
|
|
189
|
+
inside the grid, find and replace, more cell types, grouped headers,
|
|
190
|
+
conditional tints and comments on cells ([#1877](https://github.com/softistx/nxgt-material/issues/1877)).
|
|
173
191
|
- **Segmented `Progress`** — a steps variant of the bar, for a quiz or a
|
|
174
|
-
wizard: one segment per step, filled as the user moves through
|
|
192
|
+
wizard: one segment per step, filled as the user moves through
|
|
193
|
+
([#1868](https://github.com/softistx/nxgt-material/issues/1868)).
|
|
175
194
|
- **Upload components in the Progress style** — `FileList`,
|
|
176
195
|
`NetworkUploadField` and `S3UploadField` redesigned like the Progress upload
|
|
177
|
-
example: a file tile with the name and percent above a wavy bar
|
|
196
|
+
example: a file tile with the name and percent above a wavy bar
|
|
197
|
+
([#1869](https://github.com/softistx/nxgt-material/issues/1869)).
|
|
178
198
|
- **PDFs generated without React** — a framework-free engine on pdfkit replaces
|
|
179
199
|
`@react-pdf/renderer`, so a document renders the same in React, Vue, Node, Bun
|
|
180
200
|
and the browser. One data API, `definePdfDocument`, everywhere (the `Print*`
|
|
181
201
|
JSX components leave later, see Later). Output is tagged for
|
|
182
202
|
accessibility (PDF/UA), archival (PDF/A-3) and electronic invoicing (Factur-X,
|
|
183
|
-
EN 16931). It also brings the items below.
|
|
203
|
+
EN 16931). It also brings the items below. Tracked in [#1878](https://github.com/softistx/nxgt-material/issues/1878); tagged output also [#1468](https://github.com/softistx/nxgt-material/issues/1468).
|
|
184
204
|
- **Your brand on the page** — a print theme whose defaults follow the screen
|
|
185
205
|
theme, and your own font files registered in one call (the font half ships:
|
|
186
206
|
`registerPdfFont` and `theme.fonts` on the current renderer; the library
|
|
187
|
-
bundles no fonts).
|
|
207
|
+
bundles no fonts). Tracked in [#1878](https://github.com/softistx/nxgt-material/issues/1878).
|
|
188
208
|
- **QR codes, barcodes and charts in a PDF** — pass the value or the chart
|
|
189
|
-
options and get vector output, no data URL to prepare.
|
|
209
|
+
options and get vector output, no data URL to prepare. Tracked in [#1878](https://github.com/softistx/nxgt-material/issues/1878).
|
|
190
210
|
- **Rich text and Markdown in a PDF** — the rich-text editor's content and
|
|
191
|
-
Markdown rendered as PDF headings, paragraphs, lists, tables and links.
|
|
211
|
+
Markdown rendered as PDF headings, paragraphs, lists, tables and links. Tracked in [#1878](https://github.com/softistx/nxgt-material/issues/1878).
|
|
192
212
|
- **A live preview inside `PdfReader`** — `PdfReader` takes a document and
|
|
193
|
-
renders it itself, refreshing a moment after its data stops changing.
|
|
213
|
+
renders it itself, refreshing a moment after its data stops changing. Tracked in [#1878](https://github.com/softistx/nxgt-material/issues/1878).
|
|
194
214
|
- **Test helpers for generated PDFs** — read a generated PDF's text, page count
|
|
195
|
-
and metadata in a unit test, without a browser.
|
|
215
|
+
and metadata in a unit test, without a browser. Tracked in [#1878](https://github.com/softistx/nxgt-material/issues/1878).
|
|
196
216
|
- **Archive-ready PDFs** — PDF/A-3 output through one option (the PDF/A-1/2/3
|
|
197
217
|
marker ships already through `conformance` on the current renderer), for invoices and
|
|
198
|
-
records that must be kept.
|
|
218
|
+
records that must be kept. Tracked in [#1878](https://github.com/softistx/nxgt-material/issues/1878).
|
|
199
219
|
- **Electronic invoices (Factur-X)** — an invoice PDF that carries its
|
|
200
220
|
machine-readable data (EN 16931), built on archive-ready PDFs and the
|
|
201
|
-
invoice template, for e-invoicing mandates such as France's.
|
|
221
|
+
invoice template, for e-invoicing mandates such as France's. Tracked in [#1878](https://github.com/softistx/nxgt-material/issues/1878).
|
|
202
222
|
- **A PDF reader that annotates and fills forms** — the redesigned
|
|
203
223
|
`PdfReader` (see Now) gains the rest of its plan: viewers add their own
|
|
204
224
|
annotations (highlight, underline, pen, note, text, eraser), held as JSON in
|
|
205
225
|
`value` / `onChange` and exportable into the PDF; fill AcroForms; hear the
|
|
206
226
|
text read aloud; or switch to a reflowed text mode. Annotation export loads
|
|
207
227
|
`pdf-lib` only when used. The same reader in `@nxgt/material-vue` is not
|
|
208
|
-
planned until requested.
|
|
209
|
-
- **Dark-mode previews** — each component preview also shown in
|
|
210
|
-
so you can check contrast without running it.
|
|
211
|
-
- **Previews that
|
|
212
|
-
|
|
213
|
-
|
|
228
|
+
planned until requested. Tracked in [#1878](https://github.com/softistx/nxgt-material/issues/1878).
|
|
229
|
+
- **Dark-mode previews** — each component preview in the docs is also shown in
|
|
230
|
+
the dark theme, so you can check contrast without running it ([#1866](https://github.com/softistx/nxgt-material/issues/1866)).
|
|
231
|
+
- **Previews that match the component** — the picture in the docs is always the
|
|
232
|
+
component you install, because a changed story cannot ship with its old
|
|
233
|
+
preview ([#1867](https://github.com/softistx/nxgt-material/issues/1867)).
|
|
214
234
|
- **`ViewTabs`: saved views over the filter bar** — tabs of saved filters
|
|
215
235
|
("All", "My students") with a count each, using the filter bar's `counts`
|
|
216
236
|
slot; the bar's `views` slot is planned with it. They are meant to replace
|
|
217
|
-
the legacy `FilterPresets`.
|
|
237
|
+
the legacy `FilterPresets`. Tracked in [#1876](https://github.com/softistx/nxgt-material/issues/1876).
|
|
218
238
|
|
|
219
239
|
## Later
|
|
220
240
|
|
|
@@ -330,6 +350,39 @@ version they shipped in, and planned entries may name the major they target.
|
|
|
330
350
|
|
|
331
351
|
## Shipped
|
|
332
352
|
|
|
353
|
+
- **Compact `ServerTable` tiles** — `renderTile` shows a compact `ListTile`
|
|
354
|
+
record row (`size="sm"` with chips) through `item.Row` ([#1766](https://github.com/softistx/nxgt-material/issues/1766)).
|
|
355
|
+
- **A compact `Switcher` trigger, `size="compact"`** — an icon-only round
|
|
356
|
+
button sized for the app bar's `titleAfter` slot, where the title already
|
|
357
|
+
names the current item; the chosen option stays in its accessible name and
|
|
358
|
+
tooltip ([#1789](https://github.com/softistx/nxgt-material/issues/1789)).
|
|
359
|
+
|
|
360
|
+
- **Toast and translation overrides, `I18nProvider` `resources`** (3.52.0) —
|
|
361
|
+
`I18nProvider` takes `resources`, the app's `mergeResources(...)` result,
|
|
362
|
+
and components read their `material.*` words from it, so an app
|
|
363
|
+
translation changes the wording, except the toast presets and the close
|
|
364
|
+
label ([#1855](https://github.com/softistx/nxgt-material/issues/1855)) ([#1840](https://github.com/softistx/nxgt-material/issues/1840)).
|
|
365
|
+
- **Fixes for empty and unstable cases** (3.52.0) — `Description` with only
|
|
366
|
+
`children` renders them ([#1641](https://github.com/softistx/nxgt-material/issues/1641)); `ChangeHistory` draws no empty
|
|
367
|
+
list for an entry without `changes` ([#1648](https://github.com/softistx/nxgt-material/issues/1648)); `useColumnHelpers`
|
|
368
|
+
keeps `columnHelper` stable across renders ([#1644](https://github.com/softistx/nxgt-material/issues/1644)); after a
|
|
369
|
+
throttled "Resend" the code field of `StepUpDialog` and `VerificationCode`
|
|
370
|
+
takes the focus.
|
|
371
|
+
- **A scroll cue that stays inside its tabs** (3.52.0) — the scroll cue of an
|
|
372
|
+
overflowing `TabsList` is clipped to the list and no longer takes taps aimed
|
|
373
|
+
at the content under it on a phone ([#1824](https://github.com/softistx/nxgt-material/issues/1824)).
|
|
374
|
+
- **A selection band on `ServerTable`** (3.51.0) — with `bulkActions` and
|
|
375
|
+
`filter`, the first selected row turns the filter band into a selection bar
|
|
376
|
+
in place: "N selected", the bulk actions and a tonal "Cancel"
|
|
377
|
+
([#1718](https://github.com/softistx/nxgt-material/issues/1718)). A backdrop shape no longer flashes behind body text on a
|
|
378
|
+
reload ([#1720](https://github.com/softistx/nxgt-material/issues/1720)).
|
|
379
|
+
- **`StepUpDialog` `onRetry`** (3.50.0) — the dialog tells the app when the
|
|
380
|
+
user retries ([#1831](https://github.com/softistx/nxgt-material/issues/1831)). `PageFooter` takes `hideOnSinglePage`;
|
|
381
|
+
`IconButton` and `RowMenuTrigger` take a `label`; `effectiveConditions` and
|
|
382
|
+
`splitFilterErrors` are re-exported for a server loader; the touch hit areas
|
|
383
|
+
of `static` close buttons, a quick `switch` filter and the no-match state of
|
|
384
|
+
a filtered `ServerTable` are fixed.
|
|
385
|
+
|
|
333
386
|
- **A status board of tiles** (3.49.0) — `ActionCard` gains `status` (a soft badge line),
|
|
334
387
|
`meta` (one line, its tooltip only while clipped), a trailing `action` (a
|
|
335
388
|
`RowMenu`, an `IconButton`) outside the press surface, and `variant="tile"`
|
|
@@ -351,7 +404,7 @@ version they shipped in, and planned entries may name the major they target.
|
|
|
351
404
|
[Filter errors](components/data-table-filter-and-lists.md#filter-bar) ·
|
|
352
405
|
[Troubleshooting](troubleshooting.md)
|
|
353
406
|
|
|
354
|
-
- **Stepper and Timeline, expressive** — both have a new look by default, with
|
|
407
|
+
- **Stepper and Timeline, expressive** (3.47.0) — both have a new look by default, with
|
|
355
408
|
the same props. `Stepper` shows the current step as a cookie, a completed one
|
|
356
409
|
as a circle with a check and a failed one in the error container, joined by
|
|
357
410
|
thick tracks that fill with a spring; below `sm` a header card ("Step 3 of
|
|
@@ -365,7 +418,7 @@ version they shipped in, and planned entries may name the major they target.
|
|
|
365
418
|
twin is a `vue` issue.
|
|
366
419
|
[Stepper](components/navigation-and-layout.md#stepper) ·
|
|
367
420
|
[Timeline](components/data-display.md#timeline)
|
|
368
|
-
- **Two-step verification** — the pieces every app rebuilt for a one-time
|
|
421
|
+
- **Two-step verification** (3.46.0) — the pieces every app rebuilt for a one-time
|
|
369
422
|
code. `VerificationCode` is the form (app or e-mailed code, "Use a recovery
|
|
370
423
|
code", resend, wrong with the tries left, expired, busy, locked, throttled
|
|
371
424
|
with `retryAfter`: Resend waits, and waits again if it is answered throttled
|
|
@@ -381,7 +434,7 @@ version they shipped in, and planned entries may name the major they target.
|
|
|
381
434
|
[VerificationCode](components/form-fields.md#verificationcode) ·
|
|
382
435
|
[StepUpDialog](components/feedback-and-status.md#stepupdialog) ·
|
|
383
436
|
[EnrolmentCard](components/data-display.md#enrolmentcard)
|
|
384
|
-
- **One filter model: defaults, a scope, a refusal, `FilterBar`** — a filter
|
|
437
|
+
- **One filter model: defaults, a scope, a refusal, `FilterBar`** (3.28.0) — a filter
|
|
385
438
|
field says what an absent value means and what role it plays, so a list can
|
|
386
439
|
start narrowed and a page can keep a value the user never clears.
|
|
387
440
|
`default` (values, or `'page'` with `defaults` from the loader) is shown but
|
|
@@ -397,658 +450,5 @@ version they shipped in, and planned entries may name the major they target.
|
|
|
397
450
|
[A field's default](components/data-table-filter-and-lists.md#a-fields-default) ·
|
|
398
451
|
[A scope field](components/data-table-filter-and-lists.md#a-scope-field) ·
|
|
399
452
|
[Server lists in the URL](guides/server-lists-url.md)
|
|
400
|
-
- **Display polish** — `Badge` is a status badge: a 20 px pill with the
|
|
401
|
-
`label-sm` text and no hover, a `soft` variant (the tone's container under
|
|
402
|
-
the tone's text, 4.5:1) and a `tone` prop for `soft` and `outlined`, taking
|
|
403
|
-
your own tones too; `CountBadge` keeps its own size. `ListTile` with an
|
|
404
|
-
`href` ends with a discreet chevron (`chevron={false}` opts out). `StatCard`
|
|
405
|
-
gets a compact `size="sm"` tile and `EntityHeader` a `stats` prop that shows
|
|
406
|
-
figures as these tiles. `Banner` takes `Alert`'s look. A footer `MenuItem`
|
|
407
|
-
can be `display: 'icon'`, a round icon-only button with a tooltip, 44 px on
|
|
408
|
-
a touch screen; the rail's active label is drawn in a darker primary so it
|
|
409
|
-
reads 4.5:1 on every theme preset. `breadcrumb={false}` hides the trail, and
|
|
410
|
-
so does a trail whose crumbs all render `null` (#1475). `Combobox` rows are
|
|
411
|
-
touch-sized on a touch screen (#1474). The backdrop's shapes are hidden while
|
|
412
|
-
they lie over the page's text or controls, never moved (#1478). Nothing
|
|
413
|
-
changes in core. React only; the
|
|
414
|
-
Vue port is a `vue` issue. Ships in 3.12.0.
|
|
415
|
-
([Data display](components/data-display.md),
|
|
416
|
-
[App shell](guides/app-shell.md))
|
|
417
|
-
|
|
418
|
-
- **Buttons and the type scale in Material 3 Expressive** — `Typography` takes
|
|
419
|
-
the Material 3 scale (`display`, `headline`, `title`, `body`, `label`, each
|
|
420
|
-
`lg`, `md` and `sm`, plus `emphasized`) as Tailwind tokens: `text-title-md`
|
|
421
|
-
and `text-title-md-em` are utilities, and an app or a zone retunes a step
|
|
422
|
-
with CSS variables. The former variants are deprecated aliases (their sizes
|
|
423
|
-
changed) and the bare `h1` to `h6` read the scale. `Button` gains the `xl`
|
|
424
|
-
(56 px) and `2xl` (96 px) sizes, `shape` `round` or `square` with a spring
|
|
425
|
-
press morph, and `selected` (a toggle with an inverted shape and a solid
|
|
426
|
-
fill); every button has a 2 px focus outline, a neutral disabled look and a
|
|
427
|
-
44 px hit area on a coarse pointer. `IconButton` gets `size` `xs` to `xl`
|
|
428
|
-
and `width` `narrow`, `default` or `wide`, on Button's look and the shared
|
|
429
|
-
toggle fill. `ButtonGroup` gets `look="standard"` (the pressed button widens,
|
|
430
|
-
its neighbours give the width back) and a `size` its buttons share. Nothing
|
|
431
|
-
changes in core. React only; the Vue port is a `vue` issue. 3.11.0.
|
|
432
|
-
([Buttons & actions](components/buttons-and-actions.md),
|
|
433
|
-
[Typography](components/primitives.md#typography),
|
|
434
|
-
[Type scale](guides/theming.md#type-scale))
|
|
435
|
-
|
|
436
|
-
- **Icon backgrounds, celestial presets and illustrations** — `Background
|
|
437
|
-
preset="icons"` draws a pattern of icons from the packs, `iconStyle` taking
|
|
438
|
-
one style or a list and `iconMotif` choosing the layout.
|
|
439
|
-
`IconSpritesProvider` serves the Font Awesome sprites from your own base (the
|
|
440
|
-
package ships none). Four celestial presets (`eclipse`, `meteor-shower`,
|
|
441
|
-
`ringed-planet`, `northern-lights`) and a `sky` overlay join the
|
|
442
|
-
backgrounds. `Illustration` draws 12 base scenes, and the health and
|
|
443
|
-
education sets (10 scenes each) come from their own subpaths,
|
|
444
|
-
`@nxgt/material/illustrations/health` and
|
|
445
|
-
`@nxgt/material/illustrations/education`; `IllustrationDefaults` sets the
|
|
446
|
-
look once for a subtree. A theme can name an icon motif, and the theme
|
|
447
|
-
picker's tile shows it. The teal preset's success hue is fixed (#1411).
|
|
448
|
-
React only. 3.9.0. ([Icon motifs](guides/icon-motifs.md))
|
|
449
|
-
|
|
450
|
-
- **Themes** (in the next prerelease) — 14 ready-made themes (Lavande, the
|
|
451
|
-
default, then Océan, Forêt, Ambre, Ardoise, Corail, Menthe, Prune, Sable,
|
|
452
|
-
Slate, Pink, Bleu mono, Blue moon and Teal) as stylesheets,
|
|
453
|
-
`@import "@nxgt/material/themes/<name>.css"` after `styles.css`, each with
|
|
454
|
-
light and dark and each also usable on a single element: `[data-nxgt-theme]`
|
|
455
|
-
makes a zone that paints its own text. `NxgtThemeProvider`, `NxgtTheme` and
|
|
456
|
-
`useThemeContext` in `@nxgt/material/themes` hold the registry and the
|
|
457
|
-
persisted choice; `useTheme()` gains `themeName` and `setThemeName`, shared
|
|
458
|
-
across components and tabs and hydration-safe. `Background` and
|
|
459
|
-
`ActivityLayout` take the theme's background, and `ThemePicker`
|
|
460
|
-
(`@nxgt/material/theme-picker`, with its opt-in `theme-picker.css`) is a
|
|
461
|
-
radiogroup of theme tiles beside the light / dark / system control. Define
|
|
462
|
-
your own with `defineTheme()` from one to three seed colours: the Vite
|
|
463
|
-
plugin's `themes` option (or the `nxgt-theme` command) writes the CSS and
|
|
464
|
-
typings and adds the boot script. The page is white in light and a shared
|
|
465
|
-
night in dark for every theme (`neutrals: 'tinted'` brings back a tinted
|
|
466
|
-
page). `Background` also draws a `moon` preset.
|
|
467
|
-
Four behaviour changes: a wrapper that overrides `--color-*` no longer
|
|
468
|
-
recolours utilities (set `--primary`, or use a theme), `ActivityLayout`
|
|
469
|
-
`backdrop={false}` now draws a plain page, `class="dark"`, `data-theme="dark"`
|
|
470
|
-
or a token such as `--primary:` on a sub-element now recolours the utilities
|
|
471
|
-
below it, and the default page is white in light and a shared night in dark
|
|
472
|
-
(see above). React only; the Vue port is on the Vue roadmap.
|
|
473
|
-
([Theming](guides/theming.md#themes), [Themes for your app](guides/themes.md))
|
|
474
|
-
|
|
475
|
-
- **44 `Background` presets, and 22 motif shapes** — `Background` from
|
|
476
|
-
`@nxgt/material/backgrounds` draws six light presets (`rays`, `halo`,
|
|
477
|
-
`plasma`, `glass`, `ripples`, `blobs`), six geometry presets (`hexagons`,
|
|
478
|
-
`circuit`, `graph-paper`, `checker`, `diagonal-checker`, `chevrons`), four
|
|
479
|
-
textures discreet enough under body text (`paper`, `linen`, `concrete`,
|
|
480
|
-
`marble`) and eight illustrated line-art scenes (`school`, `night-sky`,
|
|
481
|
-
`bubbles`, `leaves`, `science`, `music`, `travel`, `sport`), beside the
|
|
482
|
-
existing ones. The motif shapes grow from seven to 22 (`MOTIF_SHAPES_ALL`:
|
|
483
|
-
`star`, `heart`, `hexagon`, `diamond`, `wave`, `zigzag`, `spiral` and eight
|
|
484
|
-
Material 3 Expressive shapes such as `m3-flower`); the default stays the
|
|
485
|
-
first seven, so existing backgrounds draw as before. The textures and the
|
|
486
|
-
scenes cap `vivid` at the default intensity so body text stays readable.
|
|
487
|
-
Every preset follows `tone`, `intensity` and the theme, is seeded where
|
|
488
|
-
random, and moves only with `animated`. React only. 3.4.0.
|
|
489
|
-
([Backgrounds guide](guides/backgrounds.md))
|
|
490
|
-
|
|
491
|
-
- **Tailwind 4 animation API** — `animate-*` classes in `styles.css`, pure CSS
|
|
492
|
-
and completed by Tailwind IntelliSense, with the Material 3 Expressive
|
|
493
|
-
springs and durations by default: entrances and exits (fade, slide, scale,
|
|
494
|
-
pop, blur, flip, rotate, expand and collapse), attention seekers, loops and
|
|
495
|
-
ambient motion (a skeleton `shimmer`, `marquee`, `float`…), stagger on a
|
|
496
|
-
parent (`animate-stagger-100`, from `sibling-index()` or your own `--nx-anim-index`), text
|
|
497
|
-
reveals, scroll-driven animation in native CSS (`animate-on-view`,
|
|
498
|
-
`animate-scroll-progress`) and appear/disappear for popovers, dialogs and the
|
|
499
|
-
`hidden` class. One set of modifiers tunes them all: duration, delay, ease,
|
|
500
|
-
repeat, direction, fill and distance. Under reduced motion an entrance is a
|
|
501
|
-
150ms fade and attention, loops and scroll do not run. It sits next to
|
|
502
|
-
`tw-animate-css` and Tailwind's own `animate-spin`, `animate-pulse`,
|
|
503
|
-
`animate-bounce` and `animate-ping`, which it leaves alone. React only. The
|
|
504
|
-
Storybook catalogue has a searchable Overview.
|
|
505
|
-
([Animations](guides/animations.md))
|
|
506
|
-
|
|
507
|
-
- **3.0: React 19.3, a route transition, and the 2.x deprecations removed** —
|
|
508
|
-
React 19.3 and React Router 8.5 are required peers. `ActivityLayout` animates
|
|
509
|
-
route changes with React's `<ViewTransition>`, on by default
|
|
510
|
-
(`routeTransition`, `false` to opt out); the browser-only parts, `clientOnly()`
|
|
511
|
-
and a few hidden inputs, bail out with `use(browser())`, so the server HTML
|
|
512
|
-
carries a client-render marker; and the Gallery's tile-to-lightbox morph
|
|
513
|
-
runs on React's `<ViewTransition>` too. Removed, each with its replacement in
|
|
514
|
-
[Migrating to 3.0](guides/migrating-to-3.md): the Nivo charts (use
|
|
515
|
-
`@nxgt/material/charts`); `CodeEditor`, `CodeDiff` and the Moonlight helpers
|
|
516
|
-
from the barrels (use `@nxgt/material/code-editor`); `StxPlayer` and
|
|
517
|
-
`VideoPlayer` (use `MediaPlayer` and `AudioPlayer`); the classic `PdfReader`
|
|
518
|
-
and its parts; `SelectChipField` and `SelectCardField` and their
|
|
519
|
-
`*FormField`s (use `ChipGroupField` and `ChoiceCardGroup`); `EmptyState`'s
|
|
520
|
-
`variant` (`kind` defaults to `empty`; use `ErrorState` for errors);
|
|
521
|
-
`SplitButton`'s legacy props; `ContactItem`, `OpeningHoursItem` and
|
|
522
|
-
`OpeningHoursSchema`; `CountryField`'s `singleDisplay="chip"`; `Switch`'s
|
|
523
|
-
`data-filed`; `entry="button"` of the date and time fields and
|
|
524
|
-
`TimePicker`'s `variant="inputs"`; and `ComboboxEmpty` without `items`.
|
|
525
|
-
- **Native charts** — `@nxgt/material/charts` draws line, area, bar, pie,
|
|
526
|
-
donut, gauge, radial bar, funnel, heat map, radar, scatter and a combo chart
|
|
527
|
-
(bars, areas and lines on one or two axes) in SVG, with no chart library.
|
|
528
|
-
Each is one tab stop with arrow-key point navigation and a live status, has
|
|
529
|
-
a screen-reader summary, a "View data" table, a hide/isolate legend,
|
|
530
|
-
`patterns` so colour is never the only cue, `onPointClick`, and series
|
|
531
|
-
colours held to 3:1 marks and 4.5:1 labels in both themes. The line, area,
|
|
532
|
-
bar and combo charts add `zoom` (a mini overview with a window and two
|
|
533
|
-
slider handles) and a phone scroll that opens on the latest point. The
|
|
534
|
-
light `--chart-4` is now a purple. Client-only, like `/editor`.
|
|
535
|
-
([Charts](guides/charts.md))
|
|
536
|
-
- **Reference bands, thresholds and point tones on the line chart** — `bands`
|
|
537
|
-
shade a range of the value axis, `thresholds` draw labelled lines, and
|
|
538
|
-
`pointTone` rings the values that need a word (`toneLabels` gives the words).
|
|
539
|
-
The words reach the tooltip, the live status, the summary (values outside a
|
|
540
|
-
band, tone counts) and a tone column of "View data"; the axis grows to hold
|
|
541
|
-
them and a zoom window keeps them right.
|
|
542
|
-
([Reading values against a reference](guides/charts.md#reading-values-against-a-reference))
|
|
543
|
-
|
|
544
|
-
- **The page's title in the app bar, a text breadcrumb root and the tenant in the menu** —
|
|
545
|
-
a route's `handle.title` (a node, or a function of the match like
|
|
546
|
-
`handle.breadcrumb`; the deepest match wins) puts the page's title in the app
|
|
547
|
-
bar: it is in the server HTML, it is the page's one `<h1>`, it is truncated
|
|
548
|
-
with its full text as the `title` tooltip when cut off, and `ActivityContent`
|
|
549
|
-
drops its own title while the bar has one (see [the page's title in the app
|
|
550
|
-
bar](guides/app-shell.md#the-pages-title-in-the-app-bar)). The title has a
|
|
551
|
-
stable `id` and `tabIndex={-1}`, `<main>` is labelled by it, and
|
|
552
|
-
`usePageTitleFocus()` focuses it after a navigation. `handle.titleAfter` (or the
|
|
553
|
-
`titleAfter` prop) puts a node, such as a record's `Switcher`, right after the
|
|
554
|
-
title outside its `h1`, and `headerContext` a small tenant line after it from
|
|
555
|
-
`md` up (see [a slot after the
|
|
556
|
-
title](guides/app-shell.md#a-slot-after-the-title)).
|
|
557
|
-
`breadcrumbRoot` on `ActivityLayout` (`root` on `AppBreadcrumb`) puts a text
|
|
558
|
-
root crumb, resolved through the router's basename, in place of the home
|
|
559
|
-
icon; and `context` on `ActivityLayout`, `AppHeader` and `AppSidebar` shows
|
|
560
|
-
the tenant's name at the top of the phone's menu sheet, above the brand.
|
|
561
|
-
|
|
562
|
-
- **PeriodCards** — consecutive date ranges, such as a
|
|
563
|
-
school year's terms or sprints, as cards: the period that holds today is
|
|
564
|
-
marked ("Current" and `aria-current="date"`), each card can be a link over
|
|
565
|
-
its whole area, a footer keeps its own buttons, and the cards fill as many
|
|
566
|
-
14rem columns as fit (one on a phone). Its state and range text are in
|
|
567
|
-
`@nxgt/material-core/periods`.
|
|
568
|
-
Shipped in 2.41.0.
|
|
569
|
-
|
|
570
|
-
- **Choice fields** — `ChipGroupField` and
|
|
571
|
-
`ChoiceCardGroup`: one choice or several as chips or cards, a real radio
|
|
572
|
-
group or group of checkboxes with one Tab stop, arrow keys, `max` with a
|
|
573
|
-
reason, and 44px boxes on a touch screen. `OptionTile` takes the refined
|
|
574
|
-
look (a tint, a start bar and a bold title when chosen), and
|
|
575
|
-
`CheckboxGroup` and `RadioGroup` take a working `orientation`. The shared
|
|
576
|
-
rules are in `@nxgt/material-core/choice-group`.
|
|
577
|
-
Shipped in 2.41.0.
|
|
578
|
-
|
|
579
|
-
- **Material 3 Expressive editors and toolbars** — `Toolbar` gains
|
|
580
|
-
`selectedLook="morph"`: a pressed tool fills with the primary colour and
|
|
581
|
-
widens into a pill, groups are connected, and overflow keeps room for the
|
|
582
|
-
widening so pressing never folds a tool into More. `shape="round" | "pill"`
|
|
583
|
-
picks the form per item, and an `IconButton` toggle morphs the same way. The
|
|
584
|
-
quiet look is now a tonal pill. The editor presets take
|
|
585
|
-
`look="expressive"` by default (`look="classic"` opts out): a floating pill
|
|
586
|
-
and an Insert FAB offering the `/` menu's blocks on `DocumentEditor`, a
|
|
587
|
-
vertical pill on the page layout's rail, a tonal head on `CompactEditor` and
|
|
588
|
-
its form fields, connected tools and a squircle Send on `RichChatComposer`,
|
|
589
|
-
and sans headings and a tonal sheet. `PdfReader` defaults to the expressive
|
|
590
|
-
look as well, and `RichTextViewer` takes an opt-in `look="expressive"` to
|
|
591
|
-
match the sheet. A dark code block stays readable under a nested `.dark`.
|
|
592
|
-
Shipped in 2.40.0; a visual change for apps that keep the defaults.
|
|
593
|
-
React only for now. [Rich widgets](components/rich-widgets.md),
|
|
594
|
-
[Toolbar](components/buttons-and-actions.md#toolbar)
|
|
595
|
-
|
|
596
|
-
- **Refined selection controls** — `Checkbox` and `Radio` draw their check and
|
|
597
|
-
dot in with a round state layer (the radio is 20px, like the box); `Switch`
|
|
598
|
-
is a 52x32 track with a thumb that grows and carries a check, with an opt-in
|
|
599
|
-
`thumbIcons`; `Slider` has a thin masked track, a bar handle, stop dots and a
|
|
600
|
-
value bubble (`formatValue`, `valueBubble`, `inverted`), and `size="large"`
|
|
601
|
-
with an `icon` for a volume or a brightness. Menus, `Select`, `Combobox`,
|
|
602
|
-
`Command`, the phone country menu, `Switcher` and the filter presets draw the
|
|
603
|
-
same animated check and dot. Checkbox helper text is announced through
|
|
604
|
-
`aria-describedby`, and the items of an invalid group show the error border.
|
|
605
|
-
Shipped in 2.38.0. React only for now. [Form fields](components/form-fields.md#slider),
|
|
606
|
-
[selection](components/selection-and-choice.md#checkbox)
|
|
607
|
-
|
|
608
|
-
- **Tone tokens** — every tone now has a readable
|
|
609
|
-
text colour (`--secondary-text`, `--success-text`, …), an opaque container
|
|
610
|
-
(`--success-container`, …) and an on-colour, and `data-tone` hands a
|
|
611
|
-
component the four values it needs (`--nxgt-tone`, `-on`, `-container`,
|
|
612
|
-
`-text`). Your own tone needs only `--nxgt-tone`; the others are derived.
|
|
613
|
-
`Shape`, `Fab`, `Avatar`, `StatCard` and the metric cards follow, with app
|
|
614
|
-
tones. A calm zone (`data-density="calm"` on any container) fades the decorative
|
|
615
|
-
tints inside it (shapes, avatar fallbacks, StatCards, the metric rank
|
|
616
|
-
badge), with `data-density="expressive"` to opt back in; status chips and
|
|
617
|
-
selection keep their colour. A coloured tonal `Chip` reads as a status (a
|
|
618
|
-
stronger container, the label in the tone's text colour), and the active
|
|
619
|
-
entry of the sidebar and the rail is drawn with tokens a theme can set
|
|
620
|
-
(`--sidebar-active`, `-hover`, `-foreground`).
|
|
621
|
-
[Guide](guides/theming.md#tones)
|
|
622
|
-
Shipped in 2.38.0.
|
|
623
|
-
- **A redesigned `PdfReader`** — `PdfReader` from the new
|
|
624
|
-
`@nxgt/material/pdf-reader` draws pages with pdf.js directly (no `react-pdf`),
|
|
625
|
-
a window of pages at a time: a docked header, a floating page pill, a rail
|
|
626
|
-
and a panel with thumbnails, outline and search, `embedded`, `dialog`,
|
|
627
|
-
`page` and `fullscreen` modes, single and two-page layouts (with a cover,
|
|
628
|
-
and right to left), and `configurePdfReader` for pdf.js's worker and assets.
|
|
629
|
-
Since 3.0 `/components` exports it as `PdfReader` and the classic react-pdf
|
|
630
|
-
reader is removed.
|
|
631
|
-
[Guide](guides/pdf-reader.md)
|
|
632
|
-
Shipped in 2.38.0.
|
|
633
|
-
- **DataGrid row selection and keyboard and touch resize** — `enableRowSelection` adds a leading column with a checkbox per
|
|
634
|
-
row and a select-all, with the selection controlled or kept by the grid and
|
|
635
|
-
the count announced. Alt+Left and Alt+Right resize a header's column from
|
|
636
|
-
the keyboard, a touch screen gets a grip on the active header, and the
|
|
637
|
-
frozen edge is a stronger line. [Guide](guides/data-grid.md#row-selection)
|
|
638
|
-
Shipped in 2.38.0.
|
|
639
|
-
- **One media player, video and audio** — `MediaPlayer` plays video or audio
|
|
640
|
-
with captions, chapters, a transcript that follows the playback, thumbnails on
|
|
641
|
-
hover, a playlist with shuffle and repeat, and resume where the viewer left
|
|
642
|
-
off; `AudioPlayer` is an audio card or list row with a waveform.
|
|
643
|
-
`MediaPlayerHost` keeps sound and video going across routes, docked in a bar
|
|
644
|
-
or floating as `MediaPlayerMini`; `MediaPlayerLightbox` opens a video over
|
|
645
|
-
the page; `MediaTranscript` lays the transcript out where you want it.
|
|
646
|
-
Streams play through `@nxgt/material/media-hls` (an optional `hls.js` peer,
|
|
647
|
-
loaded only when a stream needs it), with a quality menu. It runs under a
|
|
648
|
-
strict CSP and is built for WCAG 2.2 AA, with a full keyboard.
|
|
649
|
-
`StxPlayer` and `VideoPlayer` were removed in 3.0
|
|
650
|
-
([migrating](guides/migrating-to-3.md#stxplayer-and-videoplayer)). 2.38.0.
|
|
651
|
-
([Media players](guides/media.md))
|
|
652
|
-
- **The filter bar: `Filter variant="bar"` and `"facets"`** — a query-driven
|
|
653
|
-
list filter: the search, the active filters as chips, dashed quick-filter
|
|
654
|
-
pills and toggles, "Add filter" (field, operator, value), locked conditions
|
|
655
|
-
with a lock and no remove button, a facets panel beside the list
|
|
656
|
-
(`variant="facets"`: collapsible FacetGroups sharing the bar's state), and a
|
|
657
|
-
bottom sheet with staged apply and a "Show 24 results" count on a phone. All
|
|
658
|
-
18 field types (numbers, sliders, dates and times with relative presets,
|
|
659
|
-
server-searched autocompletes, custom fields) edit in every surface. The
|
|
660
|
-
query is plain data (`query`, `defaultQuery`, `onQueryChange`) that a route's
|
|
661
|
-
loader parses and the page writes back with the URL codec in
|
|
662
|
-
`@nxgt/material-core/filter`; `/` and `F` shortcuts you can turn off;
|
|
663
|
-
one live region tells the settled count. The older `Filter` variants and
|
|
664
|
-
`FilterChips` still work, now deprecated. Shipped in 2.37.0.
|
|
665
|
-
[Filter bar](components/data-table-filter-and-lists.md#filter-bar) ·
|
|
666
|
-
[Server lists in the URL](guides/server-lists-url.md)
|
|
667
|
-
- **A server list driven by the URL: `ServerTable`** — a server-mode `DataTable` with the filter bar in its top band beside the page's optional title, its description line and its actions, the query, sort and cursor in the URL for any router, the empty page listing the filters as removable chips (and, for "nothing yet", a scene and an action), and one count announced. Shipped in 2.37.0.
|
|
668
|
-
- **LocalizedTextFields** — one text in several
|
|
669
|
-
languages: a fieldset with an input per language, the default as a
|
|
670
|
-
placeholder with a reset button, `lang` and `dir` on each input, an error
|
|
671
|
-
per language and for the group, and a record value with no key for an empty
|
|
672
|
-
language. `primaryLanguages` keeps the main languages in view and folds the
|
|
673
|
-
rest under "Other languages", which opens itself on an error. With
|
|
674
|
-
`LocalizedTextFormField` for React Hook Form.
|
|
675
|
-
Not in material-vue yet (#969).
|
|
676
|
-
[Guide](components/form-fields.md#localizedtextfields)
|
|
677
|
-
Shipped in 2.37.0.
|
|
678
|
-
- **Your own tiptap and ProseMirror classes in custom features** — `@nxgt/material/editor/pm` re-exports the editor's own
|
|
679
|
-
tiptap and ProseMirror (`Extension`, `Node`, `Plugin`, `PluginKey`,
|
|
680
|
-
`TextSelection`, `Fragment`, `DecorationSet`...), so a custom feature's
|
|
681
|
-
`instanceof` checks and the nodes it builds agree with the editor. It shares
|
|
682
|
-
the editor's code instead of shipping a second copy (additive).
|
|
683
|
-
[Guide](components/rich-widgets.md#a-custom-feature)
|
|
684
|
-
Shipped in 2.36.0.
|
|
685
|
-
- **A modern rich text editor** — `DocumentEditor` from
|
|
686
|
-
`@nxgt/material/editor`, a client-only entry built on composable parts, a
|
|
687
|
-
`useEditor` hook and feature kits you pick from, with a toolbar on `Toolbar`
|
|
688
|
-
that folds what does not fit into "More". `layout="page"` is a sheet on a
|
|
689
|
-
tinted surface with a tool rail, comments in the margin and a Write / Preview
|
|
690
|
-
/ Markdown switch. It reads and writes HTML, JSON and Markdown;
|
|
691
|
-
`RichTextViewer` shows a saved document on the server;
|
|
692
|
-
`CompactEditor` and `RichChatComposer` serve a comment or a chat message.
|
|
693
|
-
Blocks move by a drag handle, with an outline, focus mode and find and
|
|
694
|
-
replace; images and files upload through your `onUpload`; an `onAssist`
|
|
695
|
-
function adds an AI assistant; comments are stored by your adapter; and
|
|
696
|
-
several people edit one document through a Yjs provider you supply.
|
|
697
|
-
`RichTextEditor` is rebuilt on the same engine and is deprecated
|
|
698
|
-
([migration](components/rich-widgets.md#migrating-from-richtexteditor)). 2.35.0.
|
|
699
|
-
([DocumentEditor](components/rich-widgets.md#documenteditor), [Formats](components/rich-widgets.md#formats), [RichTextViewer](components/rich-widgets.md#richtextviewer), [CompactEditor](components/rich-widgets.md#compacteditor), [Navigation](components/rich-widgets.md#navigating-a-long-document), [Upload](components/rich-widgets.md#uploading-media), [Assistant](components/rich-widgets.md#assistant-ai-hooks), [Comments](components/rich-widgets.md#comments), [Collaboration](components/rich-widgets.md#collaboration))
|
|
700
|
-
- **Gallery and Carousel, Material 3 Expressive** — every `Gallery` preset
|
|
701
|
-
gets the Material 3 look with no API change (softer corners that round on
|
|
702
|
-
hover, a spring press, a picked or current tile marked by a tint, a start bar
|
|
703
|
-
and a check badge, a visible focus ring, motion that stops under reduced
|
|
704
|
-
motion); then carousel formats (multi-browse, hero, uncontained,
|
|
705
|
-
full screen) with indicators and an accessible autoplay, in `Carousel` and in
|
|
706
|
-
`Gallery`; `quilted` and `woven` layouts; tiles in Material shapes (opt-in `galleries.css`;
|
|
707
|
-
without it the `xl` corner); and a
|
|
708
|
-
lightbox with swipe-to-close, pinch zoom and a filmstrip. Motion and corner
|
|
709
|
-
tokens come with it. 2.34.0.
|
|
710
|
-
([Theming](guides/theming.md#motion-and-shape-tokens), [Gallery](components/media-and-files.md#gallery-lightboxgallery-minigallery), [Carousel](components/media-and-files.md#carousel))
|
|
711
|
-
- **Progress in Material 3 Expressive style** — `Progress` and `CircularProgress`
|
|
712
|
-
redesigned: a rounded stroke, a gap, the track and a stop dot; opt-in `wavy`;
|
|
713
|
-
`thickness`, eight `tone`s and a `buffer`; values that move on a spring and
|
|
714
|
-
Material 3's indeterminate motion; server markup with no `style` attribute.
|
|
715
|
-
`Progress`'s `pulse` and `asChild`, and `CircularProgress`'s `variant`
|
|
716
|
-
(now `tone`), `strokeWidth`, `circleStrokeWidth`, `progressStrokeWidth` and
|
|
717
|
-
`shape` are deprecated, still accepted
|
|
718
|
-
([Progress](components/feedback-and-status.md#progress)).
|
|
719
|
-
Shipped in 2.33.0.
|
|
720
|
-
- **DataGrid, wave 1: fill handle and column layout** — drag a cell's corner to copy or to continue a series, as
|
|
721
|
-
Excel does (1, 2 gives 3, 4; "Devoir 1" gives "Devoir 2"; dates by the day,
|
|
722
|
-
month or year), double-click it to fill down, or press Ctrl/Cmd+D and
|
|
723
|
-
Ctrl/Cmd+R. Columns resize, hide and reorder from the header, with menu
|
|
724
|
-
items for the keyboard and touch, a `DataGridColumnsMenu` for your toolbar,
|
|
725
|
-
and a layout that is plain JSON your app persists. Column 0 and columns with
|
|
726
|
-
`lockPosition` keep their place. [Guide](guides/data-grid.md)
|
|
727
|
-
Shipped in 2.33.0.
|
|
728
|
-
- **Expressive shapes** — `Shape` draws any of Material 3 Expressive's 35
|
|
729
|
-
shapes (and a squircle) as a backdrop, an icon container or a mask for a
|
|
730
|
-
photo, in eight tones and three variants, with an optical fit and a morph on
|
|
731
|
-
a spring. `LoadingIndicator` is Material 3 Expressive's loading indicator, a
|
|
732
|
-
shape morphing while it turns with no script. `Avatar` and `IconButton` take
|
|
733
|
-
a `shape`; an `IconButton` that changes shape morphs, for a selected state.
|
|
734
|
-
All of it is SVG, drawn on the server as in the browser, with no `style`
|
|
735
|
-
attribute. Built on `@nxgt/material-core/shapes`.
|
|
736
|
-
- **DataGrid** — an editable grid for data that is typed, pasted and saved:
|
|
737
|
-
spreadsheet keys and a selected range, editors for text, numbers (with codes
|
|
738
|
-
such as "abs"), options, dates and checkboxes, or your own, paste from Excel
|
|
739
|
-
and Google Sheets, a fill, undo and redo, totals that follow unsaved edits,
|
|
740
|
-
and saving per cell, per row or in a batch, with the version each value was
|
|
741
|
-
read at so that two people editing one cell are told. Long grids render only
|
|
742
|
-
what is in view, a phone gets a list of rows that open a panel, and a strict
|
|
743
|
-
Content Security Policy works. 2.29.0.
|
|
744
|
-
([DataGrid guide](guides/data-grid.md))
|
|
745
|
-
- **Background presets** — `Background` from `@nxgt/material/backgrounds` draws
|
|
746
|
-
twenty presets: the gradient and the grain, the light family (`mesh`,
|
|
747
|
-
`aurora`, `spotlight`, `bokeh`), the geometry family (`isometric`,
|
|
748
|
-
`blueprint`, `dots`, `stripes`, `low-poly`, `topography`, `waves`) and the
|
|
749
|
-
motif presets (`shapes`, `confetti-grid`, `constellation`, `halftone`,
|
|
750
|
-
`truchet`, `floating`, `scatter-icons`), driven by the `motif` prop (`shapes`,
|
|
751
|
-
`density`, `size`, `rotate`, `shapeFill`, `opacitySpread`). All of it is plain CSS and
|
|
752
|
-
seeded SVG, so a strict CSP and SSR accept it; `animated` is opt-in and
|
|
753
|
-
pauses when hidden or under reduced motion. 2.28.0.
|
|
754
|
-
([Backgrounds guide](guides/backgrounds.md))
|
|
755
|
-
- **Empty and error states that look designed** — `EmptyState` with its
|
|
756
|
-
`kind` (`empty`, `search`, `not-found`, `unauthorized`) and a new
|
|
757
|
-
`ErrorState` (`generic`, `offline`, `maintenance`), each in two sizes
|
|
758
|
-
(`default`, `compact`), with in-house inline SVG illustrations or your own in
|
|
759
|
-
`illustration`. `ErrorState` is a `role="alert"` with a Retry action and
|
|
760
|
-
collapsible technical details. The `DataTable` default (your `empty` prop
|
|
761
|
-
still replaces it, and `emptyFiltered` covers a filter that hides every row),
|
|
762
|
-
`CommandEmpty`, the gallery, the kanban board, chat and the other built-in
|
|
763
|
-
empty states use them, and `PdfReader` shows an `EmptyState` or an
|
|
764
|
-
`ErrorState` with Retry when there is no document or it fails to load.
|
|
765
|
-
`variant` still works and is deprecated. 2.24.0.
|
|
766
|
-
([EmptyState](components/feedback-and-status.md#emptystate),
|
|
767
|
-
[ErrorState](components/feedback-and-status.md#errorstate))
|
|
768
|
-
- **Background presets, the base** — `Background` from `@nxgt/material/backgrounds`,
|
|
769
|
-
a superset of the one in `/components`: `preset` (`gradient` or `grain`),
|
|
770
|
-
`tone`, `intensity`, `animated` (drifts, and pauses while the page is hidden,
|
|
771
|
-
the background is off screen or the user prefers reduced motion), `grain`,
|
|
772
|
-
`seed` and `fill`. The SVG is built from plain data, so the server and the
|
|
773
|
-
client render the same markup and a strict CSP accepts it. The stylesheets
|
|
774
|
-
(`backgrounds.css`, `backgrounds/<preset>.css`) are opt-in.
|
|
775
|
-
|
|
776
|
-
- **One Vite plugin for the whole setup** — `nxgtMaterial()` from
|
|
777
|
-
`@nxgt/material/vite` and `@nxgt/material-vue/vite` (one implementation in
|
|
778
|
-
`@nxgt/material-core/vite`) wires the library into a Vite app, each part on
|
|
779
|
-
by default and each switchable off; the helpers that existed before stay
|
|
780
|
-
exported ([Vite plugin guide](guides/vite-plugin.md), and the migration guide moves a hand-written setup over). You get:
|
|
781
|
-
- `csp`: `mode: 'hash'` (default) writes the sha256 of every inline script
|
|
782
|
-
and style to `dist/.vite/nxgt-csp.json` with the header, or `mode: 'nonce'`
|
|
783
|
-
leaves a placeholder for `applyCspNonce`; zod's jitless script; a
|
|
784
|
-
Report-Only header on the dev server. `createCspNonce()`, `cspPolicy()`
|
|
785
|
-
and `cspHash()` ship in `@nxgt/material-core/csp`.
|
|
786
|
-
- `fonts`: `katex` (fonts stay files) and `sans: 'inter'` (self-hosted Inter).
|
|
787
|
-
- `styles`: a build that fails with the exact fix when the stylesheet import
|
|
788
|
-
or React's `@source` line is missing.
|
|
789
|
-
- `pdf`: pdfkit's standard fonts handled by the same plugin, with
|
|
790
|
-
`bundle: true` for an SSR server with no `node_modules`. The Nuxt module
|
|
791
|
-
calls `nxgtMaterial()` with the same `fonts`, `styles` and `pdf` options
|
|
792
|
-
(`pdf.bundleStandardFonts` is deprecated for `pdf.bundle`) and adds zod's
|
|
793
|
-
jitless script to the head on request; its CSP stays `nuxt-security`'s.
|
|
794
|
-
- `NonceProvider`'s `nonce` is optional on the client (a client-only app gets the
|
|
795
|
-
page's nonce from its first render; a hydrated app passes it on both sides).
|
|
796
|
-
Shipped in 2.24.0.
|
|
797
|
-
|
|
798
|
-
- **The app's brand, a header title and an account menu** — the app shell
|
|
799
|
-
takes the app's `logo` and `name`: the logo alone in the collapsed rail,
|
|
800
|
-
named by the app's name and shown as its tooltip, the logo and the name side
|
|
801
|
-
by side expanded and in the phone's menu sheet, which now shows `brand` too;
|
|
802
|
-
`headerTitle`, the context the app is in, right after the phone's menu
|
|
803
|
-
button and truncated when long; and `AccountMenu`, the avatar button named
|
|
804
|
-
"Account menu, <name>" that opens the account's name and e-mail, the app's
|
|
805
|
-
links and a busy-aware Sign out (`onSignOut`).
|
|
806
|
-
|
|
807
|
-
- **Rows a user adds, removes and reorders** — `RepeatableGroup` and
|
|
808
|
-
`RepeatableGroupFormField` over the form library's field array: rows from
|
|
809
|
-
`renderRow`, a list for assistive tech, Remove and move buttons named after
|
|
810
|
-
the row ("Remove period 2"), `max` and `min`, an empty state, focus that
|
|
811
|
-
follows each change, polite announcements, and the array's own error under
|
|
812
|
-
the rows. One column on a phone. 2.19.0. `removable` and
|
|
813
|
-
`removeDisabledReason` keep a row that cannot be removed, its Remove button
|
|
814
|
-
`aria-disabled` and described by the reason.
|
|
815
|
-
|
|
816
|
-
- **Signed-out pages and two-step verification** — `AuthCard`, the frame of a
|
|
817
|
-
sign-in page (one `main`, the card's title its `h1`, a status or alert
|
|
818
|
-
notice, safe-area padding); `EnrolmentSecret`, a TOTP enrolment's QR code,
|
|
819
|
-
app link and key grouped by four; `RecoveryCodes`, one-time codes to copy,
|
|
820
|
-
download or print alone, with an "I have saved these codes" confirmation
|
|
821
|
-
(`saved` / `onSavedChange`) an app's router guard can follow. 2.17.0.
|
|
822
|
-
- **Focus after a change, one submit at a time, errors worded by code** —
|
|
823
|
-
`useFocusOnMount` focuses the heading of what replaced the content the user
|
|
824
|
-
acted on; `useSubmitOnce` drops a double click or a second Enter until the
|
|
825
|
-
request ends; `useCodeResolver` words a zod schema's errors in the page's
|
|
826
|
-
language, a refinement's `params.code` in the app's own words. 2.17.0.
|
|
827
|
-
- **Long forms in titled sections** — `FormSection`: a heading (an `h2`, or
|
|
828
|
-
the level `titleAs` names), a description and actions, its fields in the form
|
|
829
|
-
grid's columns and one column on a phone, a rule between sections, and a
|
|
830
|
-
group a screen reader announces by its title. 2.17.0.
|
|
831
|
-
- **A strict Content Security Policy** — a page that sends `script-src` with a
|
|
832
|
-
nonce and no `'unsafe-eval'`, and `style-src-elem` with a nonce and no
|
|
833
|
-
`'unsafe-inline'`, runs every component with no violation report:
|
|
834
|
-
`NonceProvider` forwards the nonce to each component, the CSS the
|
|
835
|
-
dependencies inject is in the stylesheet, zod is external and its schemas are
|
|
836
|
-
built on first use, and the KaTeX fonts are files. The
|
|
837
|
-
[Content Security Policy guide](guides/csp.md) has the policy. 2.14.0.
|
|
838
|
-
- **An `Autocomplete` that searches a server** — `onSearch`, `debounceMs`, `minQueryLength`, `filter`, `loading`, `searchError`: a
|
|
839
|
-
debounced search with an `AbortSignal` whose stale responses are dropped,
|
|
840
|
-
a polite "Loading…" / "N results" announcement, and local matching that
|
|
841
|
-
ignores accents ("e" finds "École"). 2.12.0.
|
|
842
|
-
- **Toast actions that work everywhere** — `toasts.success(message, { action })`
|
|
843
|
-
and every other preset take sonner's own call shape and keep their action,
|
|
844
|
-
and a dialog a toast's action opens keeps the focus, then gives it back to
|
|
845
|
-
where it was before the toast. 2.10.0.
|
|
846
|
-
|
|
847
|
-
- **Tabs in two looks** — `underline`, the new default, whose bar slides to
|
|
848
|
-
the active tab, and a neutral `segmented` pill; a list that scrolls
|
|
849
|
-
sideways on a phone instead of widening the page, right-to-left, a visible
|
|
850
|
-
focus ring, labels that read 4.5:1 in both themes, and an indicator that
|
|
851
|
-
stops sliding under `prefers-reduced-motion`. `bar` and `line` still work,
|
|
852
|
-
as deprecated aliases of `underline` and `segmented`. 2.9.0.
|
|
853
|
-
|
|
854
|
-
- **Accessible by default** — error text in its own `--error-text` colour that
|
|
855
|
-
reads 4.5:1 in both themes, the empty part of sliders and meters in a
|
|
856
|
-
`--track` colour that reads 3:1, buttons, badges and status colours that
|
|
857
|
-
reach WCAG contrast, animations that honour `prefers-reduced-motion`, the
|
|
858
|
-
page behind a modal layer made `inert`, focus on the first invalid field
|
|
859
|
-
after a failed submit, Escape that reaches the layer below while one
|
|
860
|
-
closes, and a `Toaster` at the top of a phone whose toasts a tap does not
|
|
861
|
-
pause and whose actions work over a dialog. 2.8.0.
|
|
862
|
-
- **Fits a phone** — `DataTable` with no height cap by default (`maxHeight`
|
|
863
|
-
when it should scroll in a box), a header row at every width, and wide
|
|
864
|
-
columns that scroll sideways in one region a keyboard can reach; a `Button`
|
|
865
|
-
never wider than its container (a long label ends in "…", or wraps with
|
|
866
|
-
`wrap`); `OtpField` slots that shrink to fit a narrow card. 2.8.0.
|
|
867
|
-
- **App shell links, landmarks and scrolling** — menu entries that are real
|
|
868
|
-
links (middle-click, before hydration, `aria-current="page"`, your router's
|
|
869
|
-
link through `linkComponent`), one `<main>` landmark, and a shell
|
|
870
|
-
that lets the document scroll, with `scroll="container"` for a full-height
|
|
871
|
-
screen. 2.8.0.
|
|
872
|
-
- **DataTable server-side data** — hand the table one page from your loader
|
|
873
|
-
(`manual`): no client paging or sorting, controlled sorting and selection by
|
|
874
|
-
row id (`sorting`, `rowSelection`, `getRowId`), a footer with "41–60 of 133"
|
|
875
|
-
and Previous / Next as links that work with no JavaScript (`pagination`,
|
|
876
|
-
`DataTableServerFooter`, `footer`), and rows that link to their page
|
|
877
|
-
(`getRowHref`, `onRowClick`, `linkComponent`). 2.7.0.
|
|
878
|
-
- **TreeSelectField** — pick one or several items from a tree inside a form
|
|
879
|
-
field, as chips when several, with an optional filter that keeps each match
|
|
880
|
-
under its ancestors (`TreeSelectField`, `TreeSelectFormField`). 2.6.0.
|
|
881
|
-
- **DateRangeField presets and time** — one-click ranges such as Today, Last 7
|
|
882
|
-
days and This month, or your own, beside the calendar (`presets`), and a time
|
|
883
|
-
of day on each end of the range (`withTime`). 2.6.0.
|
|
884
|
-
- **FilePreview** — preview a file picked by its type, in one component: an
|
|
885
|
-
image, a PDF in `PdfReader`, a video or audio file, the text of a text, JSON,
|
|
886
|
-
CSV or Markdown file, or a card with a download link for anything else
|
|
887
|
-
(`FilePreview`, `onError`). Safe on a server. 2.6.0.
|
|
888
|
-
- **Spinner `light` colour renders** — a `Spinner` with `color="light"` shows
|
|
889
|
-
its light ring, for loading states on dark or coloured surfaces. 2.5.0.
|
|
890
|
-
- **Range filters announce their field name** — the slider thumbs and the
|
|
891
|
-
`Min`/`Max` inputs of a `slider-range` or `number-range` filter are named
|
|
892
|
-
after the field, so a screen reader says which range is changing. 2.5.0.
|
|
893
|
-
- **Alert keeps long content inside** — a long title, description or unbroken
|
|
894
|
-
string wraps inside the `Alert` instead of running past its edge. 2.5.0.
|
|
895
|
-
- **Stepper: unique ids, announced steps and truncated titles** — two steppers
|
|
896
|
-
on one page no longer share ids, a screen reader hears which step is current
|
|
897
|
-
and whether each is done or in error, and a long step title truncates. 2.5.0.
|
|
898
|
-
- **Layouts that hold long content** — `ListTile`, `StatCard` and `Banner`
|
|
899
|
-
keep long titles, values and actions inside their box instead of overflowing.
|
|
900
|
-
2.5.0.
|
|
901
|
-
- **The same exports as `@nxgt/material-vue`** — `Camera`, `NativeSelect`, the
|
|
902
|
-
`InputOTP` parts, `PaginationFirst` and `PaginationLast`, `TableEmpty`,
|
|
903
|
-
`DialogScrollContent` and `ToastAction`, `Button`'s sizes, and the
|
|
904
|
-
`RadioGroupField`, `SliderField` and `SwitchField` names, so code moves
|
|
905
|
-
between the two libraries without renaming. 2.5.0.
|
|
906
|
-
- **DataTable loading and empty states** — skeleton rows while the data loads
|
|
907
|
-
(the rows already shown stay in place, dimmed, during a refresh), the table
|
|
908
|
-
announced as busy, and your own content when there are no rows, told
|
|
909
|
-
whether a filter emptied it. 2.5.0.
|
|
910
|
-
- **PDFs from a Next.js route handler in one line of config** —
|
|
911
|
-
`withNxgtPrint(nextConfig)` from `@nxgt/material/next` adds what `/print`
|
|
912
|
-
needs to `next.config.ts` — the library in `serverExternalPackages`, and
|
|
913
|
-
pdfkit's fonts in the `output: 'standalone'` trace wherever your package
|
|
914
|
-
manager installed them — merged with your own config. 2.4.0.
|
|
915
|
-
([printing](guides/printing.md#nextjs-serverexternalpackages-and-output-standalone))
|
|
916
|
-
- **One copy of the framework-free code, shared with `@nxgt/material-vue`** —
|
|
917
|
-
the PDF document model and renderer, the print formatters, the PDF file
|
|
918
|
-
helpers, `PdfReader`'s page geometry, scroll spy and search, the
|
|
919
|
-
`CurrencyField` decimals, the fields' blur rule and `pdfkitStandardFonts()`
|
|
920
|
-
now come from `@nxgt/material-core`, which your install adds on its own.
|
|
921
|
-
Every entry exports the same names with the same types, so nothing changes
|
|
922
|
-
in your imports; a server bundled without `node_modules` bundles
|
|
923
|
-
`@nxgt/material-core` too. 2.3.0.
|
|
924
|
-
([troubleshooting](troubleshooting.md#cannot-find-package-nxgtmaterial-core))
|
|
925
|
-
- **Forms that validate on blur, and a lighter map entry** — every
|
|
926
|
-
`*FormField` marks its field touched when focus leaves it, so
|
|
927
|
-
`mode: 'onBlur'` and `'onTouched'` work; `@nxgt/material/map` no longer loads
|
|
928
|
-
the rest of the library (about 0.4 MiB of static imports instead of 5.5 MiB).
|
|
929
|
-
2.2.0. ([forms](guides/forms.md#touched-on-blur))
|
|
930
|
-
- **Accessible names, ids and focus across the catalogue** — every field is
|
|
931
|
-
named by its label and says it is required on the element a screen reader
|
|
932
|
-
lands on (the input, the picker's `combobox`, the slider thumbs, the group),
|
|
933
|
-
with the asterisk drawn by CSS, so in no name or label text; groups are named
|
|
934
|
-
by their question and describe their error instead of carrying `aria-invalid`
|
|
935
|
-
where ARIA does not allow it; ids are generated rather than taken from a
|
|
936
|
-
field's `name` or an option's `value`, so two forms on one page no longer
|
|
937
|
-
collide; icon buttons, crumbs, carousel arrows, codes and the camera have
|
|
938
|
-
names; and a dialog, sheet or drawer takes focus when it opens and gives it
|
|
939
|
-
back when it closes. 2.2.0.
|
|
940
|
-
([upgrading](getting-started.md#220-ids-names-and-aria-invalid-moved))
|
|
941
|
-
- **PdfReader, turned pages and a steady zoom** — a page the PDF turns
|
|
942
|
-
(`/Rotate`) shows the right way up, the fit zoom settles once when the
|
|
943
|
-
document opens instead of moving while you read, `onPageChange` also reports
|
|
944
|
-
the page the reader moves to itself, links to websites open in a new tab
|
|
945
|
-
(`externalLinkTarget`), the toolbar's tooltips show in fullscreen, the
|
|
946
|
-
password field has a name, and a layout of your own opens bytes without
|
|
947
|
-
detaching them. 2.2.0. ([PdfReader](components/media-and-files.md#pdfreader))
|
|
948
|
-
- **One document model for React and Vue** — `@nxgt/material/print` renders
|
|
949
|
-
documents written as plain data (`pdfDocument` and its builders,
|
|
950
|
-
`definePdfDocument` templates, `dataTable` from column definitions) alongside
|
|
951
|
-
the JSX components, and `@nxgt/material-vue/pdf` (0.22.0) renders the same
|
|
952
|
-
model, so a template renders the same pages in both libraries (experimental:
|
|
953
|
-
the model may still change in a minor release). 2.2.0.
|
|
954
|
-
([printing](guides/printing.md#documents-as-data))
|
|
955
|
-
- **One call to a PDF file** — `downloadPdf` and `openPdf` in the browser (a
|
|
956
|
-
blocked tab falls back to a download), `usePdfFile` for a preview that keeps
|
|
957
|
-
up with its data, `pdfResponse` for a server route on Node or Bun, and
|
|
958
|
-
`renderPdfBlob`, `renderPdfBuffer` and `renderPdfStream` for the file
|
|
959
|
-
itself, so you never touch `@react-pdf/renderer`'s output API or leak an
|
|
960
|
-
object URL. They also render documents written as plain data with
|
|
961
|
-
`pdfDocument` and its builders (experimental). 2.2.0.
|
|
962
|
-
([printing](guides/printing.md#rendering-the-document))
|
|
963
|
-
- **Tables from columns and rows** — `PrintDataTable` takes `columns` (label,
|
|
964
|
-
width, alignment, formatter, total) and `rows`, stripes them, keeps each row
|
|
965
|
-
whole, repeats the header on each page it crosses and closes with a totals
|
|
966
|
-
row; `PrintKeyValue` prints one record as label and value pairs and
|
|
967
|
-
`PrintMetric` a figure with its change. The `PrintTable` blocks you already
|
|
968
|
-
use keep working as they are. 2.2.0.
|
|
969
|
-
([printing](guides/printing.md#tables-from-columns-and-rows))
|
|
970
|
-
- **A page shell with page numbers** — `PrintDocument` sets page size,
|
|
971
|
-
orientation, margins and metadata, repeats your header and footer on every
|
|
972
|
-
page, prints "Page 2 of 5" in the document's language and can add a
|
|
973
|
-
watermark; `PrintHeader` takes a logo image. 2.2.0.
|
|
974
|
-
([printing](guides/printing.md#the-page-shell-printdocument))
|
|
975
|
-
- **`Stepper` without the SSR warning** — `Stepper` answers its screen-width
|
|
976
|
-
question on the server like the other responsive components, so SSR logs
|
|
977
|
-
stay clean and a desktop hydrates its server HTML without a mismatch.
|
|
978
|
-
`TimeField`'s OK button follows the language. 2.2.0.
|
|
979
|
-
([SSR](guides/ssr.md#hydration))
|
|
980
|
-
- **A PDF viewer that opens any source** — `PdfReader` opens a `Blob`, a
|
|
981
|
-
`File`, an `ArrayBuffer` or a `Uint8Array` as well as a URL, or a URL with
|
|
982
|
-
request headers (`{ url, httpHeaders }`), without reloading on every render;
|
|
983
|
-
its zoom menu works from the keyboard and in fullscreen. 2.2.0.
|
|
984
|
-
([PdfReader](components/media-and-files.md#pdfreader))
|
|
985
|
-
- **Amounts and dates in your locale** — `formatAmount` and `formatDate` take a
|
|
986
|
-
locale and time zone, use each currency's own decimals (`{ fractionDigits: 2
|
|
987
|
-
}` keeps two) and keep a date-only value on its day; `useFormatters()` binds
|
|
988
|
-
them to the `I18nProvider` language and `createFormatters()` to a locale you
|
|
989
|
-
pass, so a document rendered on a server reads like the screen. 2.2.0.
|
|
990
|
-
([printing](guides/printing.md#formatamount-and-formatdate))
|
|
991
|
-
- **More built-in labels follow the language** — calendar navigation,
|
|
992
|
-
the data table's selection checkboxes, filter presets and
|
|
993
|
-
`Min`/`Max`, the spinner, scroll-to-top, upload `Retry`/`Remove`, the map's
|
|
994
|
-
`You are here` and zoom buttons, icon-only close buttons, and the editor's
|
|
995
|
-
slash menu (searchable in either language), font names and table alignment;
|
|
996
|
-
then the filter's empty state and chips, breadcrumb and pagination names,
|
|
997
|
-
`MessageCard`'s "Unread", the upload field's replace button and errors, the
|
|
998
|
-
editor's placeholder and emoji buttons, `CircularProgress`, `StxPlayer`,
|
|
999
|
-
`PaneLayoutPane`'s sheet title, `JsonViewer`'s "Empty JSON" and
|
|
1000
|
-
`TimePicker`'s AM/PM. 2.2.0.
|
|
1001
|
-
([i18n](guides/i18n.md#the-material-namespace))
|
|
1002
|
-
- **PdfReader fixes** — downloads finish in every browser and take the file name
|
|
1003
|
-
you give instead of `document.pdf`, a protected PDF asks for its password and
|
|
1004
|
-
says when it is wrong, Escape closes the search bar before the dialog around
|
|
1005
|
-
the reader, `onPageChange` reports a page inside the document, A4 and
|
|
1006
|
-
landscape pages fit the width or the page, search counts matches on pages you
|
|
1007
|
-
have not scrolled to yet, the page number follows scrolling, the reader opens
|
|
1008
|
-
on `initialPage`, and your editor no longer shows `PdfReader` as deprecated.
|
|
1009
|
-
2.2.0.
|
|
1010
|
-
- **Form wrappers honour your `disabled` and `helperText`** — every
|
|
1011
|
-
`*FormField` follows one rule: disabled when you pass `disabled` or the form
|
|
1012
|
-
disables it, and your `helperText` shows until there is an error. Composite
|
|
1013
|
-
fields (contacts, opening hours, attributes) show array-level errors. 2.2.0.
|
|
1014
|
-
- **Formatted i18n fallbacks** — without an `I18nProvider`, components show
|
|
1015
|
-
`Step 01` or `3 items`, not raw `{step}` placeholders. 2.2.0.
|
|
1016
|
-
- **Server-safe `zodLocaleError`** — English Zod messages in the English
|
|
1017
|
-
bundle, no throw on a server or with blocked storage, and your own
|
|
1018
|
-
`storageKey`, language and translator. 2.2.0.
|
|
1019
|
-
- **One shared theme** — every `useTheme()` reads one store, so code blocks and
|
|
1020
|
-
editors follow a toggle straight away, and `ThemeToggle` no longer flashes the
|
|
1021
|
-
server's guess while hydrating. 2.2.0.
|
|
1022
|
-
- **Declaration files that always resolve** — a packed or linked build types
|
|
1023
|
-
`react` like the npm one, instead of as `any`. 2.2.0.
|
|
1024
|
-
- **Component documentation with previews** — every component has an entry with
|
|
1025
|
-
a picture of how it renders, an example that compiles and the options that
|
|
1026
|
-
matter, under the same twelve categories in the README and `docs/`. A forms
|
|
1027
|
-
guide covers React Hook Form, Zod, composite values and server errors. 2.2.0.
|
|
1028
|
-
- **`@nxgt/material/map`** — the leaflet map, markers, location field and
|
|
1029
|
-
`useGeolocation` as an entry of this package, with leaflet as optional peers.
|
|
1030
|
-
2.1.0.
|
|
1031
|
-
- **`formatAmount` and `formatDate` on the main entry** — no need to import the
|
|
1032
|
-
print entry for two `Intl` helpers. 2.1.0.
|
|
1033
|
-
- **Print as its own entry** — `@nxgt/material/print`, PDF dependencies as
|
|
1034
|
-
optional peers, and `pdfkitStandardFonts()` for Vite. 2.0.0.
|
|
1035
|
-
- **No phantom self-dependency** — installing the package no longer adds a
|
|
1036
|
-
second copy of it to your lockfile. 1.16.6.
|
|
1037
|
-
- **Importable in any node process** — `import '@nxgt/material'` no longer
|
|
1038
|
-
throws at server boot. 1.16.5.
|
|
1039
|
-
- **Gallery lightbox fits the viewport** — media is fitted instead of cropped.
|
|
1040
|
-
1.16.4.
|
|
1041
|
-
- **Uniform gallery tiles** — media cropped to one aspect, restyled carousel
|
|
1042
|
-
controls. 1.16.3.
|
|
1043
|
-
- **Mention list closes on select** — in the chat composer. 1.16.2.
|
|
1044
|
-
- **Modern emoji picker** — refreshed picker, with stories for emoji, mentions,
|
|
1045
|
-
chat and markdown. 1.16.1.
|
|
1046
|
-
- **`MentionList`** — mention suggestions with local search, for chat and the
|
|
1047
|
-
rich text editor. 1.16.0.
|
|
1048
|
-
- **Range filters in generated filter forms** — slider ranges and number ranges
|
|
1049
|
-
rendered by the schema-driven filter fields: a `Filter` schema field with
|
|
1050
|
-
`type: 'slider-range'` or `'number-range'` renders a two-thumb slider or a
|
|
1051
|
-
`Min`/`Max` pair. 1.0.0.
|
|
1052
|
-
([filters](components/data-table-filter-and-lists.md))
|
|
1053
453
|
|
|
1054
|
-
Older releases:
|
|
454
|
+
Older releases: every earlier entry is in the [CHANGELOG](../CHANGELOG.md).
|