@nxgt/material 3.30.0 → 3.31.0

package/docs/components/form-fields.md

@@ -1044,11 +1044,42 @@ export function Zone() {
 | `value` | `string \| null` | `null` | an IANA identifier |
 | `onChange` | `(value: string \| null) => void` | — | `null` when cleared |
 | `timezones` | `readonly string[]` | `TIMEZONES` | restrict the list |
+| `now` | `Date \| string` | the rendering machine's clock | the instant every offset is read at |
+
+The offsets come from the clock of the machine that renders, so a page
+server-rendered just before a daylight-saving change and hydrated just after
+it (or a test that fixes the browser clock) shows "GMT+1" on one side and
+"GMT+2" on the other, and React reports a hydration mismatch. Pass the same
+`now` on both sides, read once in the loader; `TimezoneFormField` takes it too.
+
+```tsx
+import { TimezoneFormField } from '@nxgt/material/components';
+import type { Control } from 'react-hook-form';
+import { useLoaderData } from 'react-router';
+
+type Profile = { timeZone: string };
+
+export async function loader() {
+	return { now: new Date().toISOString() };
+}
+
+export function ZoneForm({ control }: { control: Control<Profile> }) {
+	const { now } = useLoaderData<typeof loader>();
+	return (
+		<TimezoneFormField
+			control={control}
+			name="timeZone"
+			label="Time zone"
+			now={now}
+		/>
+	);
+}
+```
 
 The helpers behind it are exported too: `TIMEZONES` (the default list),
-`timezoneOffset(zone, language?)` (the offset now, as the language writes
-it; `''` when the zone is unknown) and `timezoneLabel(zone, language?)`
-(the city and its offset in one string).
+`timezoneOffset(zone, language?, now?)` (the offset at `now`, else now, as the
+language writes it; `''` when the zone is unknown) and
+`timezoneLabel(zone, language?, now?)` (the city and its offset in one string).
 
 ```ts
 import { timezoneLabel, timezoneOffset } from '@nxgt/material/components';

package/package.json

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