@nxgt/material 3.52.0 → 3.53.0

package/docs/troubleshooting.md

@@ -273,6 +273,7 @@ words in your error.
 - [A `SwitchFormField` shows no validation message](#a-switchformfield-shows-no-validation-message)
 - [A `TimeFormField` shows its error on a desktop but not on a phone](#a-timeformfield-shows-its-error-on-a-desktop-but-not-on-a-phone)
 - [`setError(…, { shouldFocus: true })` or a failed submit does not focus the field](#seterror--shouldfocus-true--or-a-failed-submit-does-not-focus-the-field)
+- [`useFastForm` does not focus the first field](#usefastform-does-not-focus-the-first-field)
 - [`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)
@@ -4736,6 +4737,26 @@ open the section before calling `setError`.
 `PasswordFormField` or `OtpFormField` (Storybook: `Guides/Forms/Focus on
 error`, `Set Focus Password` and `Set Focus Otp`).
 
+### `useFastForm` does not focus the first field
+
+**When:** a form on `useFastForm(props, 'email')` opens and the focus stays
+where it was, or in a dialog it ends on the dialog instead of the field.
+**Why:** `useFastForm` calls `setFocus(first)`, which needs the field's `ref`:
+the field must be a `*FormField` of this form (or give `field.ref` to its
+control), and it must be mounted. The hook asks again each frame for about half
+a second, then gives up; it also stops at once when the focus moved, the
+user's own move included. A form whose hook stays mounted while its dialog is
+closed focuses only when `active` turns true.
+**Fix:** pass the dialog's `open` as the third argument, and make sure `first`
+names a mounted field:
+
+```tsx
+const form = useFastForm<Values>({ defaultValues }, 'email', open);
+```
+
+Storybook: `Guides/Forms/useFastForm`. See
+[forms](guides/forms.md#a-form-that-is-quick-to-fill).
+
 ### `touchedFields` stays empty after leaving a field, or `mode: 'onBlur'` never validates
 
 **When:** a `*FormField` keeps `formState.touchedFields` (and

package/lib/components/components.css

@@ -58,11 +58,7 @@
 @import "./ui/layout/app-shell/activity-backdrop-shapes.css";
 @import "./ui/layout/auth-card/auth-card-backdrop.css";
 /* DataTable cards and tiles: the item shell (hairline, tint, start bar, columns by the list's width). */
-@import "./ui/collections/data-table/data-table-items.css";
-@import "./ui/collections/data-table/data-table-items-compact.css";
-@import "./ui/collections/data-table/data-table-items-bar.css";
-@import "./ui/collections/data-table/data-table-items-forced.css";
-@import "./ui/collections/data-table/data-table-items-tiles.css";
+@import "./ui/collections/data-table/index.css";
 /* ServerTable's second header row on a phone: select-all, sort, Filters and the actions. */
 @import "./ui/collections/server-table/server-table-phone-row.css";
 /* Checkbox and Radio: the check that draws in, the dot that springs in, the state layer. */

package/lib/components/ui/actions/action-card/action-card-tile.css

@@ -76,7 +76,7 @@
 	 * wrapper dissolves so its children take the areas. */
 	.nxgt-action-card[data-size="tile"] {
 		grid-template-columns: minmax(0, 1fr) auto;
-		grid-template-areas: "title act" "status status" "desc desc" "meta meta";
+		grid-template-areas: "title act" "status status" "desc desc" "meta meta" "foot foot";
 		align-items: start;
 		/* A taller neighbour stretches the card: keep the rows at the top. */
 		align-content: start;
@@ -93,7 +93,8 @@
 			"icon title act"
 			". status status"
 			". desc desc"
-			". meta meta";
+			". meta meta"
+			". foot foot";
 	}
 	.nxgt-action-card[data-size="tile"] .nxgt-action-card-icon {
 		width: 36px;
@@ -119,6 +120,14 @@
 	.nxgt-action-card[data-size="tile"] .nxgt-action-card-meta {
 		grid-area: meta;
 	}
+	/* The footer: secondary links, above the stretched title link or button. */
+	.nxgt-action-card-footer {
+		grid-area: foot;
+		position: relative;
+		z-index: 1;
+		min-width: 0;
+		margin-top: 2px;
+	}
 	.nxgt-action-card[data-size="tile"][data-has-action]
 		.nxgt-action-card-action {
 		align-self: start;

package/lib/components/ui/collections/data-table/data-table-items-record.css

@@ -0,0 +1,27 @@
+/* The compact record row of a tile (`item.Row`, data-table-item-row.tsx): the
+ * dense row of ListTile inside the tile's shell. Direction "A Refined" for the
+ * shell; the row is 36px tall under a fine pointer and 44px under a coarse one
+ * (the link's `::after` covers the tile, so the whole tile is the target).
+ * The title is 13px medium like ListTile's `size="sm"`; a selected tile's
+ * title keeps the primary text of data-table-items.css. */
+@layer components {
+	[data-slot="data-table-tiles"]
+		> [data-slot="data-table-item"]:has([data-slot="data-table-record"]) {
+		min-height: 2.25rem;
+		padding-block: 0.375rem;
+	}
+	@media (pointer: coarse) {
+		[data-slot="data-table-tiles"]
+			> [data-slot="data-table-item"]:has([data-slot="data-table-record"]) {
+			min-height: 2.75rem;
+			/* The link's 44px box, centred on the title's first line, stays inside
+			 * the tile when the subtitle and the chips stack under it. */
+			padding-block: 0.75rem;
+		}
+	}
+	[data-slot="data-table-record"] [data-slot="data-table-item-title"] {
+		font-size: 0.8125rem;
+		font-weight: 500;
+		line-height: 1.4;
+	}
+}

package/lib/components/ui/collections/data-table/index.css

@@ -0,0 +1,14 @@
+/* DataTable cards and tiles, one file per role, in cascade order:
+ *
+ *   data-table-items.css          the item shell (hairline, tint, start bar, columns)
+ *   data-table-items-compact.css  compact cards
+ *   data-table-items-bar.css      the list bar
+ *   data-table-items-forced.css   forced colours
+ *   data-table-items-tiles.css    tiles: one column, one surface
+ *   data-table-items-record.css   the compact record row of a tile (item.Row) */
+@import "./data-table-items.css";
+@import "./data-table-items-compact.css";
+@import "./data-table-items-bar.css";
+@import "./data-table-items-forced.css";
+@import "./data-table-items-tiles.css";
+@import "./data-table-items-record.css";

package/package.json

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

package/dist/i18n-provider-BFNrM0Qu.js

@@ -1,45 +0,0 @@
-import { i as e, r as t, t as n } from "./stored-language-Cb9FMEwk.js";
-import { createContext as r, useCallback as i, useContext as a, useMemo as o, useState as s } from "react";
-import { jsx as c } from "react/jsx-runtime";
-//#region lib/i18n/i18n-provider.tsx
-var l = r(null);
-function u({ children: r, defaultLanguage: a = "en", storageKey: u = t, supportedLanguages: d = e, onLanguageChange: f, initialLanguage: p, resources: m }) {
-	let [h, g] = s(() => p && d.includes(p) ? p : n(u, a, d)), _ = i((e) => {
-		if (!d.includes(e)) {
-			console.warn(`[@nxgt/material] Unsupported language: "${e}".`);
-			return;
-		}
-		if (typeof localStorage < "u") try {
-			localStorage.setItem(u, e);
-		} catch {}
-		g(e), f?.(e);
-	}, [
-		u,
-		d,
-		f
-	]), v = o(() => ({
-		language: h,
-		changeLanguage: _,
-		supportedLanguages: d,
-		resources: m
-	}), [
-		h,
-		_,
-		d,
-		m
-	]);
-	return /* @__PURE__ */ c(l.Provider, {
-		value: v,
-		children: r
-	});
-}
-function d() {
-	let e = a(l);
-	if (!e) throw Error("useI18nContext must be used within an I18nProvider");
-	return e;
-}
-function f() {
-	return a(l);
-}
-//#endregion
-export { d as n, f as r, u as t };

package/dist/use-shape-morph-BKA_R5P5.js

@@ -1,35 +0,0 @@
-import { morph as e, morphAt as t, toSvgPath as n } from "@nxgt/material-core/shapes";
-import { useLayoutEffect as r, useRef as i } from "react";
-//#region lib/components/ui/display/shape/use-shape-morph.ts
-var a = .8, o = 14, s = o * Math.sqrt(1 - a * a);
-function c(e) {
-	let t = e / 1e3;
-	return 1 - Math.exp(-.8 * o * t) * (Math.cos(s * t) + a * o / s * Math.sin(s * t));
-}
-var l = () => typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-function u(a, o, s) {
-	let u = i(o);
-	r(() => {
-		let r = a.current, i = u.current;
-		if (!r || i === o || !s || l()) {
-			r && i !== o && r.setAttribute("d", n(o)), u.current = o;
-			return;
-		}
-		let d = e(i, o), f = n(o), p = 0, m = performance.now(), h = (e) => {
-			let i = e - m;
-			if (i >= 520) {
-				u.current = o, r.setAttribute("d", f);
-				return;
-			}
-			let a = t(d, c(i));
-			u.current = a, r.setAttribute("d", n(a)), p = requestAnimationFrame(h);
-		};
-		return r.setAttribute("d", n(d.from)), p = requestAnimationFrame(h), () => cancelAnimationFrame(p);
-	}, [
-		a,
-		o,
-		s
-	]);
-}
-//#endregion
-export { u as n, c as t };