@nxgt/material 2.4.2 → 2.6.0

package/docs/troubleshooting.md

@@ -77,6 +77,7 @@ words in your error.
 **Runtime**
 
 - [`must be used within` / `must be used inside` (context providers)](#must-be-used-within--must-be-used-inside)
+- [`Camera components must be used inside <Camera>`](#camera-components-must-be-used-inside-camera)
 - [`Clipboard is not available`](#clipboard-is-not-available)
 - [`Upload failed with status 403`](#upload-failed-with-status-403)
 - [`Network error during upload`](#network-error-during-upload)
@@ -94,6 +95,7 @@ words in your error.
 - [A test no longer finds a chip's remove button by the exact name `Remove`](#a-test-no-longer-finds-a-chips-remove-button-by-the-exact-name-remove)
 - [A test no longer finds a pagination, breadcrumb or other built-in label by its English name](#a-test-no-longer-finds-a-pagination-breadcrumb-or-other-built-in-label-by-its-english-name)
 - [A test no longer finds an icon badge by role `button`, or an `Icon` named "Icon {name}" inside a button](#a-test-no-longer-finds-an-icon-badge-by-role-button-or-an-icon-named-icon-name-inside-a-button)
+- [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)
 - [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)
@@ -109,6 +111,7 @@ words in your error.
 - [`ConfirmDialog` buttons stay in English](#confirmdialog-buttons-stay-in-english)
 - [A `ConfirmationDialog` opened with `open` no longer closes](#a-confirmationdialog-opened-with-open-no-longer-closes)
 - [A menu item selected by `[data-variant=destructive]` stops matching](#a-menu-item-selected-by-data-variantdestructive-stops-matching)
+- [A `Stepper` step selected by `#step-N` stops matching](#a-stepper-step-selected-by-step-n-stops-matching)
 - [Keys typed right after opening a dialog, sheet or drawer land inside it](#keys-typed-right-after-opening-a-dialog-sheet-or-drawer-land-inside-it)
 
 **PDF reader**
@@ -135,6 +138,9 @@ words in your error.
 - [The zoom changes by itself while a long PDF is open](#the-zoom-changes-by-itself-while-a-long-pdf-is-open)
 - [A link in a PDF replaces the page the reader is on](#a-link-in-a-pdf-replaces-the-page-the-reader-is-on)
 - [`onPageChange` is not called when `initialPage` is past the end, or after a new file](#onpagechange-is-not-called-when-initialpage-is-past-the-end-or-after-a-new-file)
+- [`onPageChange` reports another page after opening on `initialPage`](#onpagechange-reports-another-page-after-opening-on-initialpage)
+- [`FilePreview` shows a file card with a Download link for a PDF](#filepreview-shows-a-file-card-with-a-download-link-for-a-pdf)
+- [`FilePreview` says "This file could not be previewed."](#filepreview-says-this-file-could-not-be-previewed)
 - [Reporting a bug](#reporting-a-bug)
 
 ---
@@ -1213,6 +1219,61 @@ function ActiveCount() {
 </FilterProvider>;
 ```
 
+### `Camera components must be used inside <Camera>`
+
+**When:** on render, from `useCamera()` or `useCameraContext()` called in a
+component of yours.
+**Why:** both read the context `Camera` provides to its own parts (the video,
+the capture button, the toggle). `Camera` renders those parts itself and takes
+no children, so no component of yours is ever below its provider: the hooks
+serve its internals, and throw anywhere else. A second copy of
+`@nxgt/material` gives the same message (see
+[Invalid hook call](#invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-component)).
+**Fix:** render `<Camera />` as it is, or build your own webcam UI on the
+helpers, which need no provider:
+
+```tsx
+import { capturePhotoFromVideo, isCameraSupported } from '@nxgt/material/components';
+import { useEffect, useRef, useState } from 'react';
+
+const SETTINGS = { resolution: { width: 1280, height: 720 }, quality: 0.9, format: 'jpeg' as const, mirror: false };
+
+export function Snapshot() {
+	const video = useRef<HTMLVideoElement>(null);
+	const [photo, setPhoto] = useState<string | null>(null);
+
+	useEffect(() => {
+		if (!isCameraSupported()) return;
+		let stream: MediaStream | undefined;
+		let cancelled = false;
+		const stop = (s: MediaStream) => s.getTracks().forEach((track) => track.stop());
+		navigator.mediaDevices.getUserMedia({ video: true }).then((s) => {
+			// Unmounted before the permission prompt resolved: release the camera.
+			if (cancelled) return stop(s);
+			stream = s;
+			if (video.current) video.current.srcObject = s;
+		});
+		return () => {
+			cancelled = true;
+			if (stream) stop(stream);
+		};
+	}, []);
+
+	const capture = () => {
+		const result = capturePhotoFromVideo(video.current, { isStreaming: true, captureSettings: SETTINGS });
+		if (result?.capturedImage) setPhoto(result.capturedImage);
+	};
+
+	return (
+		<>
+			<video ref={video} autoPlay playsInline muted />
+			<button type="button" onClick={capture}>Capture</button>
+			{photo && <img src={photo} alt="Captured" />}
+		</>
+	);
+}
+```
+
 ### `Clipboard is not available`
 
 **When:** calling `copyToClipboard(value)` on a page served over plain `http`
@@ -1629,6 +1690,33 @@ If you passed an `IconButton` as `ConfirmationDialog`'s `icon`, pass the glyph
 alone and style the badge with `iconProps={{ variant, color }}`: the dialog
 already wraps it in a badge, and yours is now a button inside a `<span>`.
 
+### A button named "Icon plus Add" is now named "Add"
+
+**When:** after upgrading to 2.5.0, `getByRole('button', { name: 'Icon plus Add' })`
+(or any name that starts with "Icon {name}") finds nothing, or a
+`getByRole('img', { name: 'Icon plus' })` inside a `Button` that also has text.
+**Why:** an `Icon` is named "Icon {name}" by default, and a `Button` takes its
+name from its content, so a `Button` holding an `Icon` and the text "Add" was
+announced "Icon plus Add". A `Button` with text, an `aria-label` or an
+`aria-labelledby` now hides an `Icon` inside it (`aria-hidden="true"`), as a
+named `IconButton` already did. A `Button` holding only an `Icon` still reads
+it, since that is the only name it has; give it an `aria-label` instead. Text
+a component produces from its props (a translation component) is not seen:
+pass the button an `aria-label` then. Text inside an `aria-hidden` element
+(a decorative count, `<span aria-hidden="true">3</span>`) does not name the
+button either, so beside it the `Icon` stays named.
+**Fix:** select the button by its text:
+
+```ts
+await page.getByRole('button', { name: 'Add' }).click();
+```
+
+and name an icon-only button yourself:
+
+```tsx
+<Button aria-label="Add"><Icon name="plus" /></Button>
+```
+
 ### `An invalid form control with name='…' is not focusable`
 
 **When:** submitting a form with an empty `required` `UploadField`, before
@@ -1930,6 +2018,30 @@ render `data-variant="error"`, and both use the `error` colour.
 [data-slot='menubar-item'][data-variant='error'] { font-weight: 600; }
 ```
 
+### A `Stepper` step selected by `#step-N` stops matching
+
+**When:** after upgrading to 2.5.0, a test or a stylesheet that targets a
+step by its id — `#step-0`, `page.locator('#step-1')`,
+`document.getElementById('step-2')` — finds nothing.
+**Why:** every `Stepper` gave its steps the same ids, `step-0`, `step-1`, …,
+so two steppers on one page produced duplicate ids, which is invalid HTML and
+breaks any `aria-*` reference to them. Each id is now prefixed with one
+unique to its stepper (React's `useId`). The steps are also an `<ol>` of
+`<li>` now, and the current one carries `aria-current="step"`. A selector
+written against the old markup, such as `div[data-slot="stepper-step"]`,
+stops matching too, since a step is now an `li`: drop the tag
+(`[data-slot="stepper-step"]`).
+**Fix:** select by `data-pw`, which did not change — `step-N`, or
+`<name>-step-N` when you passed `name`:
+
+```ts
+await page.locator('[data-pw="step-1"]').click();
+// with <Stepper name="checkout" … />
+await page.locator('[data-pw="checkout-step-1"]').click();
+// or the current step
+await expect(page.locator('[aria-current="step"]')).toContainText('Shipping');
+```
+
 ### Keys typed right after opening a dialog, sheet or drawer land inside it
 
 **When:** after upgrading, a test (or code of yours) that opens a `Dialog`,
@@ -2321,6 +2433,61 @@ before 2.2.0.
 to itself. Since 2.2.0 both are reported, once.
 **Fix:** update `@nxgt/material`. A page you kept in sync by hand can go.
 
+### `onPageChange` reports another page after opening on `initialPage`
+
+**When:** the reader opens on `initialPage` and, without the user scrolling,
+`onPageChange` reports another page, most often the last one, and the page field
+shows it. Seen on slow devices and busy machines, near the end of a
+document, with `@nxgt/material` 2.5.0 and earlier.
+**Why:** after placing the opening page, the reader ignored scrolling for
+only 150 ms. When the placement scroll landed later (a late frame), it was
+read as the user's, and at the end of the pages that is the last page.
+**Fix:** update `@nxgt/material`. The opening page now keeps the page number while
+the view stays on it; the user's own scroll, find in page or a screen
+reader moving the view still report the page they reach.
+
+### `FilePreview` shows a file card with a Download link for a PDF
+
+**When:** a PDF given to `FilePreview` shows its name, size and a Download
+link instead of the reader.
+**Why:** `FilePreview` imports `PdfReader` the first time it previews a PDF,
+and falls back to the file card when that import fails: the viewer's chunk
+could not be fetched (a deploy replaced the chunks the open page was built
+with, or a network error), or the bundle has no `react-pdf` and `pdfjs-dist` — they are
+dependencies of `@nxgt/material`, not optional peers, so this is a bundler
+configuration that left them out. Nothing is thrown; the next PDF previewed
+tries again.
+**Fix:** reload the page after a deploy; otherwise check that your bundler
+keeps `react-pdf` and `pdfjs-dist` and pdf.js's worker (see `PdfReader` in
+[Media & files](components/media-and-files.md#pdfreader)). The same file in a
+`PdfReader` of its own shows the underlying error. A PDF the reader loaded
+but cannot open (a corrupt or password-protected file, a URL that answers an
+error page) is different: the preview stays `ready` and `PdfReader` shows its
+own error inside it.
+
+### `FilePreview` says "This file could not be previewed."
+
+**When:** a `FilePreview` given a URL, or a file it cannot show, renders that
+message (and `onError` receives the error).
+**Why:** a text, JSON, CSV or Markdown URL is fetched with `fetch`: an HTTP
+error is a `FilePreviewHttpError` with its `status`, and a cross-origin URL
+without CORS headers is a `TypeError: Failed to fetch`. An image, video or
+audio file the browser cannot decode (a corrupt file, a codec the browser
+lacks, a URL that answers an error page) fails in its own element. A URL
+that is not `http(s):`, relative, `blob:`, or a `data:` URL of an image,
+video, audio file, plain text, CSV, Markdown, JSON or PDF (`javascript:`,
+`data:text/html`, and also a `data:` URL of XML, TSV or YAML, though
+`FilePreview` would show those kinds from a `Blob`) is refused before
+anything is linked, loaded or fetched: the error is a
+`FilePreviewUnsafeUrlError`, "Refused to preview a URL with an unsafe scheme", and there is no
+Download link.
+**Fix:** serve the file with `Access-Control-Allow-Origin` for your page's
+origin, or fetch it yourself (with your credentials) and pass the `Blob`;
+pass `type` when the server answers `application/octet-stream` for a file
+whose URL has no extension; pass a refused URL's file as a `Blob`, or from
+an `https:` URL. A text file larger than `maxTextBytes` is not an error: its
+beginning is shown, with "Showing the first … of this file." below.
+
 ---
 
 ## Reporting a bug

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "2.4.2",
+	"version": "2.6.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -113,7 +113,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.2.0",
+		"@nxgt/material-core": "^0.3.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",

package/dist/flowDiagram-KWPJA3E3-B8Isvcc5.js

@@ -1,17 +0,0 @@
-import "./src-CJ8DNrI1.js";
-import "./chunk-ZIGJFQKS-HDJ6e6OJ.js";
-import "./chunk-O7XYJQB3-C87zK8E5.js";
-import "./chunk-742MDFTN-nG_ROTnT.js";
-import "./chunk-MBY4JIJT-IA2XBafa.js";
-import "./chunk-7PRAP22T-DIiYRAce.js";
-import "./chunk-7INBJB4K-Dg64CbhT.js";
-import "./chunk-5DYCD2WN-Bqi3iL5i.js";
-import "./chunk-Z7XXMR3K-vh8Pvgr_.js";
-import "./chunk-GWA4HPMP-CmsxMX3A.js";
-import "./chunk-XXDRQBXY-Bq4sFnO2.js";
-import "./chunk-WEXAMYUT-C-QP0DFq.js";
-import "./chunk-UA2S7LBM-B0LGFGu3.js";
-import "./chunk-GNY47TPC-CxWZwDbp.js";
-import "./chunk-LNGE3PJU-DJjGTS7O.js";
-import { n as e } from "./chunk-7M6MHVWA-CPdb6LVf.js";
-export { e as diagram };

package/dist/isArrayLikeObject-CCJDO2RL.js

@@ -1,86 +0,0 @@
-import { m as e, x as t } from "./translator-Cfug7hC5.js";
-import { d as n } from "./_Uint8Array-DEXn42kj.js";
-//#region ../../node_modules/lodash-es/identity.js
-function r(e) {
-	return e;
-}
-//#endregion
-//#region ../../node_modules/lodash-es/_apply.js
-function i(e, t, n) {
-	switch (n.length) {
-		case 0: return e.call(t);
-		case 1: return e.call(t, n[0]);
-		case 2: return e.call(t, n[0], n[1]);
-		case 3: return e.call(t, n[0], n[1], n[2]);
-	}
-	return e.apply(t, n);
-}
-//#endregion
-//#region ../../node_modules/lodash-es/_shortOut.js
-var a = 800, o = 16, s = Date.now;
-function c(e) {
-	var t = 0, n = 0;
-	return function() {
-		var r = s(), i = o - (r - n);
-		if (n = r, i > 0) {
-			if (++t >= a) return arguments[0];
-		} else t = 0;
-		return e.apply(void 0, arguments);
-	};
-}
-//#endregion
-//#region ../../node_modules/lodash-es/constant.js
-function l(e) {
-	return function() {
-		return e;
-	};
-}
-//#endregion
-//#region ../../node_modules/lodash-es/_defineProperty.js
-var u = function() {
-	try {
-		var t = e(Object, "defineProperty");
-		return t({}, "", {}), t;
-	} catch {}
-}(), d = c(u ? function(e, t) {
-	return u(e, "toString", {
-		configurable: !0,
-		enumerable: !1,
-		value: l(t),
-		writable: !0
-	});
-} : r), f = Math.max;
-function p(e, t, n) {
-	return t = f(t === void 0 ? e.length - 1 : t, 0), function() {
-		for (var r = arguments, a = -1, o = f(r.length - t, 0), s = Array(o); ++a < o;) s[a] = r[t + a];
-		a = -1;
-		for (var c = Array(t + 1); ++a < t;) c[a] = r[a];
-		return c[t] = n(s), i(e, this, c);
-	};
-}
-//#endregion
-//#region ../../node_modules/lodash-es/_baseRest.js
-function m(e, t) {
-	return d(p(e, t, r), e + "");
-}
-//#endregion
-//#region ../../node_modules/lodash-es/_createBaseFor.js
-function h(e) {
-	return function(t, n, r) {
-		for (var i = -1, a = Object(t), o = r(t), s = o.length; s--;) {
-			var c = o[e ? s : ++i];
-			if (n(a[c], c, a) === !1) break;
-		}
-		return t;
-	};
-}
-//#endregion
-//#region ../../node_modules/lodash-es/_baseFor.js
-var g = h();
-//#endregion
-//#region ../../node_modules/lodash-es/isArrayLikeObject.js
-function _(e) {
-	return t(e) && n(e);
-}
-//#endregion
-export { d as a, r as c, p as i, g as n, u as o, m as r, l as s, _ as t };

package/dist/lib/components/ui/fields/slider/slider-ticks.d.ts

@@ -1 +0,0 @@
-export declare function tickValues(min: number, max: number, ticks: boolean | number, step?: number): number[];

package/dist/lib/components/ui/media/camera/camera.provider.d.ts

@@ -1,6 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { CameraContextValue } from './types';
-export declare const CameraContext: import('react').Context<CameraContextValue>;
-type CameraProviderProps = PropsWithChildren;
-export declare function CameraProvider({ children }: CameraProviderProps): import("react").JSX.Element;
-export {};

package/dist/lib/components/ui/media/camera/state/index.d.ts

@@ -1,2 +0,0 @@
-export * from './camera.slice';
-export * from './camera.store';

package/dist/lib/components/ui/media/camera/utils/index.d.ts

@@ -1 +0,0 @@
-export * from './camera.utils';