@nxgt/material 2.14.0 → 2.15.0

package/dist/{usecaseDiagram-POWQR4AR-CzGOd4ic.js → usecaseDiagram-POWQR4AR-XW5of8Kj.js}

@@ -8,11 +8,11 @@ import "./chunk-7PRAP22T-0C6_H8Li.js";
 import { a as g, i as _, o as v, r as y } from "./chunk-J5ZVWO5B-DmRRmhon.js";
 import "./chunk-7INBJB4K-k-I67NSP.js";
 import "./chunk-5DYCD2WN-Cd1zazNp.js";
-import "./chunk-Z7XXMR3K-BzO1efzA.js";
+import "./chunk-Z7XXMR3K-0DGn7Rxi.js";
 import { t as ee } from "./chunk-XXDRQBXY-dKXxu_aj.js";
 import { t as te } from "./chunk-WEXAMYUT-CbFOhEve.js";
 import "./chunk-UA2S7LBM-ChuksCDg.js";
-import { r as ne, t as re } from "./chunk-GNY47TPC-CGgBmY0O.js";
+import { r as ne, t as re } from "./chunk-GNY47TPC-BWB3R7nr.js";
 //#region ../../node_modules/chevrotain/node_modules/lodash-es/_freeGlobal.js
 var ie = typeof global == "object" && global && global.Object === Object && global, ae = typeof self == "object" && self && self.Object === Object && self, b = ie || ae || Function("return this")(), oe = b.Symbol, se = Object.prototype, ce = se.hasOwnProperty, le = se.toString, ue = oe ? oe.toStringTag : void 0;
 function de(e) {

package/dist/{xychartDiagram-PMCCYNJV-Bh_1zZoW.js → xychartDiagram-PMCCYNJV-DTV6AzhO.js}

@@ -1,4 +1,4 @@
-import { at as e, rt as t, st as n } from "./components-qTUjhFuo.js";
+import { at as e, rt as t, st as n } from "./components-B-xPQ6XX.js";
 import { n as r } from "./src-CsLQInsN.js";
 import { i } from "./chunk-ZIGJFQKS-9VXArDKF.js";
 import { n as a } from "./chunk-Y2CYZVJY-BAad7w_K.js";

package/docs/components/date-and-time.md

@@ -88,6 +88,8 @@ CalendarContrast).
 
 Labelled trigger that opens a calendar popover, with an optional time picker.
 
+The trigger writes the date in the field's `locale`, else the `I18nProvider` language, else English.
+
 ```tsx
 import { DateField } from '@nxgt/material/components';
 import { useState } from 'react';
@@ -146,6 +148,8 @@ calendar is labelled by the trigger, so named by the label.
 
 From / to range picked in a popover calendar, with presets and times.
 
+The trigger writes each date in the field's `locale`, else the `I18nProvider` language, else English.
+
 ```tsx
 import { type DateRange, DateRangeField } from '@nxgt/material/components';
 import { useState } from 'react';
@@ -288,6 +292,8 @@ second day is picked.
 
 Opens a `TimePicker` in a popover, or in a dialog on mobile.
 
+The trigger writes the time in the `I18nProvider` language, else English.
+
 ```tsx
 import { TimeField } from '@nxgt/material/components';
 import { useState } from 'react';

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

@@ -310,9 +310,11 @@ import { Button, EmptyState } from '@nxgt/material/components';
 | --- | --- | --- | --- |
 | `variant` | `'not-found' \| 'unauthorized' \| 'generic' \| 'empty' \| 'offline' \| 'search' \| 'maintenance'` | `'generic'` | preset icon, well colour, title and description |
 | `icon` | `ReactNode` | the preset's | replaces the icon |
-| `title` / `description` | `ReactNode` | the preset's (translated) | replace the preset text |
+| `title` / `description` | `ReactNode` | the preset's (translated) | replace the preset text; see below |
 | `action` | `ReactNode` | — | shown under the text |
 
+The preset's description is the companion of its title: with your own `title` and no `description`, no description is rendered. Pass `description` to keep a line under your own title.
+
 **Storybook:** `Feedback & status/EmptyState` · **Vue:** `EmptyState`
 
 ---

package/docs/components/primitives.md

@@ -176,9 +176,17 @@ import { Typography } from '@nxgt/material/components';
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `variant` | `'huge-large' \| 'huge-medium' \| 'huge-small' \| 'headline-larger' \| 'headline-large' \| 'headline-medium' \| 'headline-small' \| 'title-large' \| 'title-medium' \| 'title-small' \| 'body-medium' \| 'body-small' \| 'caption' \| 'normal'` | `'normal'` | size and weight; `caption` is also muted |
+| `as` | an intrinsic tag name (`keyof JSX.IntrinsicElements`) | `'div'` | the element to render, keeping the variant, e.g. `as="h2"` or `as="span"` |
+| `asChild` | `boolean` | `false` | merge the classes onto the single child instead of rendering an element |
 
-It renders a `<div>`; the variants are also exported as `typographyVariants`
-for use on your own elements.
+It renders a `<div>` unless `as` or `asChild` says otherwise:
+
+```tsx
+<Typography as="span" variant="title-small">Inline</Typography>
+<Typography asChild variant="body-medium"><a href="/docs">Docs</a></Typography>
+```
+
+The variants are also exported as `typographyVariants` for use on your own elements.
 
 **Storybook:** `Primitives/Typography` · **Vue:** `Typography`
 

package/docs/guides/i18n.md

@@ -449,6 +449,8 @@ and dates shown to a user, `useFormatters()` (`formatAmount`, `formatDate`)
 prints what the PDF builders print, with the decimals `CurrencyField` shows. See
 [helpers](helpers.md#nxgtmaterialhooks).
 
+The trigger of a `DateField`, `DateRangeField` or `TimeField` follows the same language (a `DateField`'s own `locale` wins): `01/09/2028` on a French page, `09/01/2028` in English.
+
 ## Reference
 
 Everything `@nxgt/material/i18n` exports is listed in

package/docs/troubleshooting.md

@@ -123,6 +123,7 @@ words in your error.
 - [A test that finds a chip by `aria-selected` or `getByRole('option')` no longer finds it](#a-test-that-finds-a-chip-by-aria-selected-or-getbyroleoption-no-longer-finds-it)
 - [The `ref` of a `SelectChipField` focuses nothing](#the-ref-of-a-selectchipfield-focuses-nothing)
 - [`touchedFields` stays empty after leaving a field, or `mode: 'onBlur'` never validates](#touchedfields-stays-empty-after-leaving-a-field-or-mode-onblur-never-validates)
+- ["Required" shows as soon as the calendar opens, or while a date is being picked](#required-shows-as-soon-as-the-calendar-opens-or-while-a-date-is-being-picked)
 - [`TypeError: values.map is not a function` (a `SliderFormField`)](#typeerror-valuesmap-is-not-a-function)
 - [An end-to-end test no longer finds `aria-expanded` on a `ResponsiveButton`](#an-end-to-end-test-no-longer-finds-aria-expanded-on-a-responsivebutton)
 - [A multi-step form reopens at a later step](#a-multi-step-form-reopens-at-a-later-step)
@@ -135,6 +136,7 @@ words in your error.
 - [A button named "Icon plus Add" is now named "Add"](#a-button-named-icon-plus-add-is-now-named-add)
 - [`An invalid form control with name='…' is not focusable` (an `UploadField`)](#an-invalid-form-control-with-name-is-not-focusable)
 - [A `DateField` or `DateRangeField` with `disabled` still opens](#a-datefield-or-daterangefield-with-disabled-still-opens)
+- [The date field shows MM/DD/YYYY on a French page](#the-date-field-shows-mmddyyyy-on-a-french-page)
 - [An `id`, `aria-describedby` or `data-testid` on a `DateField`, `DateRangeField` or `TimeField` is not on the trigger](#an-id-aria-describedby-or-data-testid-on-a-datefield-daterangefield-or-timefield-is-not-on-the-trigger)
 - [A test no longer finds the label or helper text inside a date or time picker's trigger](#a-test-no-longer-finds-the-label-or-helper-text-inside-a-date-or-time-pickers-trigger)
 - [A test no longer finds a `DurationField` input by the field's label, or a `Slider`'s `aria-label` on its root](#a-test-no-longer-finds-a-durationfield-input-by-the-fields-label-or-a-sliders-aria-label-on-its-root)
@@ -2261,6 +2263,24 @@ For a field of your own, pass `field.onBlur` to the control that loses focus:
 What counts as leaving, per kind of field:
 [forms](guides/forms.md#touched-on-blur).
 
+### "Required" shows as soon as the calendar opens, or while a date is being picked
+
+**When:** a `DateFormField` or `DateRangeFormField` that is empty and required,
+in a form with `mode: 'onTouched'` or `'onBlur'`, shows its error (and
+`touchedFields` flips) after the user changes the month, opens the year view
+or goes to today, before any date is chosen. 2.14.0 and earlier.
+
+**Why:** `Calendar` gave `react-day-picker` new `Nav`, `CaptionLabel` and
+`MonthGrid` components each time the month or the view changed. The button that
+had focus was unmounted, focus fell to the page, and the field, which is
+touched when focus leaves it and its popover, took that for leaving.
+
+**Fix:** upgrade to 2.15.0 or later. Until then, validate on
+submit (`mode: 'onSubmit'`) or hide the message until the popover is closed.
+From that version, opening, moving in the calendar, Escape and picking leave
+the field untouched; it is touched when the popover closes without a value by a
+click outside, or when the trigger loses focus with the popover closed.
+
 ### `TypeError: values.map is not a function`
 
 **When:** a `SliderFormField` with one thumb crashes (in `SliderReadout`) as
@@ -2565,6 +2585,27 @@ react-day-picker's day rule, so `true` meant "every day".
 The same release moves `id`, `aria-describedby` and `data-*` to the trigger:
 see the next entry.
 
+### The date field shows MM/DD/YYYY on a French page
+
+**When:** a `DateField`, `DateFormField`, `DateRangeField` or `DateRangeFormField` (and a `TimeField`, which shows `2:30 PM` instead of `14:30`) under a French
+`I18nProvider` shows 1 September 2028 as `09/01/2028` in its trigger, while the
+calendar inside it is in French. No error is printed.
+**Why:** the trigger formatted the date without a locale, so it was always
+English (`MM/DD/YYYY`), whatever the language of the page.
+**Fix:** upgrade: the trigger now writes the date (and the time, for a
+`TimeField` or a `DateRangeField` with `withTime`) in the language of the
+calendar: the field's own `locale`, else the `I18nProvider` language, else
+English. Mount the provider above the field:
+
+```tsx
+<I18nProvider initialLanguage="fr">
+  <DateField label="Livraison" value={value} onValueChange={setValue} />
+</I18nProvider>
+```
+
+With no provider, or in English, the output is unchanged (`09/01/2028`). The
+document's `<html lang>` and the browser's language are not read.
+
 ### An `id`, `aria-describedby` or `data-testid` on a `DateField`, `DateRangeField` or `TimeField` is not on the trigger
 
 **When:** before 2.2.0: `getByTestId` finds the calendar (and only while the

package/package.json

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