@ryuzaki13/react-foundation-ui 1.11.2 → 1.12.0

package/README.md

@@ -149,6 +149,42 @@ import "@ryuzaki13/react-foundation-ui/styles.css";
 
 Для `accent` точная форма содержит `content`, `surface` и `border`. Для статуса обязательна карта `text` с `base`; `hover` и `active` имеют последовательные fallback. Карта `fill` и её поля опциональны, а `border` может отдельно задать `base`, `hover`, `active` и `focus`. Такой контракт позволяет переносить существующие темы без аппроксимации цветов и при этом сохраняет все новые semantic-токены foundation UI.
 
+## Сканирование штрихкодов
+
+Subpath `@ryuzaki13/react-foundation-ui/barcode-scanner` предоставляет одноразовый модальный сканер для browser-only React-приложений. Он запрашивает камеру только после монтирования, отдаёт первый распознанный код, освобождает `MediaStream` перед закрытием и показывает локализованные ошибки с повторным запуском.
+
+```tsx
+import { useState } from "react";
+
+import {
+	BarcodeScannerDialog,
+	type BarcodeScanResult
+} from "@ryuzaki13/react-foundation-ui/barcode-scanner";
+
+export function BarcodeField() {
+	const [opened, setOpened] = useState(false);
+	const [result, setResult] = useState<BarcodeScanResult | null>(null);
+
+	return (
+		<>
+			<button type="button" onClick={() => setOpened(true)}>
+				Сканировать
+			</button>
+			{opened ? (
+				<BarcodeScannerDialog
+					formats={["ean_13", "ean_8", "upc_a", "upc_e", "code_128", "qr_code"]}
+					onDetected={setResult}
+					onClose={() => setOpened(false)}
+				/>
+			) : null}
+			{result ? <output>{result.value}</output> : null}
+		</>
+	);
+}
+```
+
+Пакет сам устанавливает `@yudiel/react-qr-scanner` и согласованную с ним версию `zxing_reader.wasm`. `prepareZXingModule` автоматически направляет полифилл на asset host-сборки, поэтому сканер не обращается к CDN. Host-сборка PWA должна добавлять `wasm` в precache. Камера доступна только в secure context: HTTPS либо `localhost`.
+
 ## Просмотр изображений
 
 `ImageViewer` из точечного entrypoint `@ryuzaki13/react-foundation-ui/image` предоставляет controlled lightbox для одного изображения или галереи. Реализация использует Yet Another React Lightbox как внутренний runtime, но наружу публикует только foundation-контракты `ImageViewerImage`, `ImageViewerFeatures`, `ImageViewerLabels` и `ImageViewerStyle`.

package/dist/barcode-scanner/BarcodeScannerDialog.d.ts

@@ -0,0 +1,46 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { Scanner, type IScannerError } from "@yudiel/react-qr-scanner";
+type ScannerFormats = NonNullable<ComponentProps<typeof Scanner>["formats"]>;
+export type BarcodeScannerFormat = ScannerFormats[number];
+export type BarcodeScannerErrorKind = IScannerError["kind"];
+export type BarcodeScannerError = Readonly<IScannerError>;
+export type BarcodeScanResult = {
+    readonly value: string;
+    readonly format: string;
+};
+export type BarcodeScannerControls = {
+    readonly finder?: boolean;
+    readonly torch?: boolean;
+    readonly zoom?: boolean;
+};
+export type BarcodeScannerDialogProps = {
+    /** Вызывается один раз для первого распознанного кода. */
+    readonly onDetected: (result: BarcodeScanResult) => void;
+    /** Закрывает пользовательский сценарий и вызывается также после успешного сканирования. */
+    readonly onClose: () => void;
+    /** Получает исходную типизированную ошибку камеры для диагностики host-приложения. */
+    readonly onError?: (error: BarcodeScannerError) => void;
+    /** Ограничивает распознавание нужными форматами и уменьшает ложные совпадения. */
+    readonly formats?: readonly BarcodeScannerFormat[];
+    /** Настройки предпочитаемой камеры и разрешения видеопотока. */
+    readonly constraints?: MediaTrackConstraints;
+    /** Встроенные элементы управления сканера. */
+    readonly controls?: BarcodeScannerControls;
+    /** Звуковое подтверждение или URL собственного звука. */
+    readonly sound?: boolean | string;
+    /** Закрывает камеру при сворачивании вкладки или установленной PWA. */
+    readonly closeWhenDocumentHidden?: boolean;
+    readonly title?: string;
+    readonly hint?: ReactNode;
+    readonly retryLabel?: string;
+    readonly errorMessages?: Partial<Record<BarcodeScannerErrorKind, string>>;
+    readonly className?: string;
+};
+/**
+ * Одноразовый сканер штрихкодов в модальном окне. Компонент монтируется только
+ * после явного действия пользователя, освобождает MediaStream до закрытия и
+ * сохраняет ссылку на поток на случай, если дочерний Scanner уже очистил ref.
+ */
+export declare function BarcodeScannerDialog({ onDetected, onClose, onError, formats, constraints, controls, sound, closeWhenDocumentHidden, title, hint, retryLabel, errorMessages, className }: BarcodeScannerDialogProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=BarcodeScannerDialog.d.ts.map

package/dist/barcode-scanner/BarcodeScannerDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarcodeScannerDialog.d.ts","sourceRoot":"","sources":["../../src/barcode-scanner/BarcodeScannerDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4C,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtG,OAAO,EAAsB,OAAO,EAAyB,KAAK,aAAa,EAAuB,MAAM,0BAA0B,CAAC;AAkBvI,KAAK,cAAc,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;AAE7E,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;AAC1D,MAAM,MAAM,uBAAuB,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;AAC5D,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAE1D,MAAM,MAAM,iBAAiB,GAAG;IAC/B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACpC,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACvC,0DAA0D;IAC1D,QAAQ,CAAC,UAAU,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACzD,2FAA2F;IAC3F,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,sFAAsF;IACtF,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACxD,kFAAkF;IAClF,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAC;IACnD,gEAAgE;IAChE,QAAQ,CAAC,WAAW,CAAC,EAAE,qBAAqB,CAAC;IAC7C,8CAA8C;IAC9C,QAAQ,CAAC,QAAQ,CAAC,EAAE,sBAAsB,CAAC;IAC3C,yDAAyD;IACzD,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAClC,uEAAuE;IACvE,QAAQ,CAAC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAC3C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC,CAAC;IAC1E,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAiCF;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACpC,UAAU,EACV,OAAO,EACP,OAAO,EACP,OAAwB,EACxB,WAAgC,EAChC,QAA0B,EAC1B,KAAa,EACb,uBAA8B,EAC9B,KAAgC,EAChC,IAA0C,EAC1C,UAAwB,EACxB,aAAa,EACb,SAAS,EACT,EAAE,yBAAyB,+BA+G3B"}

package/dist/barcode-scanner/index.d.ts

@@ -0,0 +1,3 @@
+export { BarcodeScannerDialog } from "./BarcodeScannerDialog";
+export type { BarcodeScanResult, BarcodeScannerControls, BarcodeScannerDialogProps, BarcodeScannerError, BarcodeScannerErrorKind, BarcodeScannerFormat } from "./BarcodeScannerDialog";
+//# sourceMappingURL=index.d.ts.map

package/dist/barcode-scanner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/barcode-scanner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EACX,iBAAiB,EACjB,sBAAsB,EACtB,yBAAyB,EACzB,mBAAmB,EACnB,uBAAuB,EACvB,oBAAoB,EACpB,MAAM,wBAAwB,CAAC"}

package/dist/barcode-scanner/index.js

@@ -0,0 +1,135 @@
+import { n as e } from "../chunks/button-BaUlN-nt.js";
+import { n as t, r as n } from "../chunks/modal-BGAi96zR.js";
+import { useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Scanner as l, prepareZXingModule as u } from "@yudiel/react-qr-scanner";
+import d from "zxing-wasm/reader/zxing_reader.wasm?url";
+var f = {
+	root: "-bko3o",
+	viewport: "K0Pwy-",
+	scanner: "mXbD4L",
+	video: "o-ELdM",
+	error: "yEOcB8",
+	hint: "Nhg42b"
+};
+//#endregion
+//#region src/barcode-scanner/BarcodeScannerDialog.tsx
+u({ overrides: { locateFile: (e, t) => e.endsWith(".wasm") ? d : `${t}${e}` } });
+var p = [
+	"ean_13",
+	"ean_8",
+	"upc_a",
+	"upc_e",
+	"code_128"
+], m = {
+	facingMode: { ideal: "environment" },
+	width: { ideal: 1280 },
+	height: { ideal: 720 }
+}, h = {
+	finder: !0,
+	torch: !0,
+	zoom: !0
+}, g = {
+	"permission-denied": "Доступ к камере запрещён. Разрешите его в настройках сайта.",
+	"no-camera": "На устройстве не найдена камера.",
+	"in-use": "Камера уже используется другим приложением или вкладкой.",
+	overconstrained: "Камера не поддерживает запрошенные параметры.",
+	"insecure-context": "Для работы камеры необходим HTTPS.",
+	unsupported: "Этот браузер не поддерживает доступ к камере.",
+	aborted: "Запуск камеры был прерван.",
+	security: "Доступ к камере заблокирован политикой безопасности.",
+	"type-error": "Переданы некорректные параметры камеры.",
+	unknown: "Не удалось запустить сканер."
+};
+function _(e) {
+	e?.getTracks().forEach((e) => e.stop());
+}
+function v({ onDetected: u, onClose: d, onError: v, formats: y = p, constraints: b = m, controls: x = h, sound: S = !1, closeWhenDocumentHidden: C = !0, title: w = "Сканирование штрихкода", hint: T = "Расположите штрихкод внутри рамки", retryLabel: E = "Повторить", errorMessages: D, className: O }) {
+	let k = a(null), A = a(null), j = a(!1), [M, N] = o(null), P = r(() => {
+		_(k.current?.getStream() ?? A.current), A.current = null;
+	}, []), F = r(() => {
+		P(), d();
+	}, [d, P]);
+	i(() => {
+		if (M) return;
+		let e = 0, t = () => {
+			let n = k.current?.getStream();
+			if (n) {
+				A.current = n;
+				return;
+			}
+			e = window.requestAnimationFrame(t);
+		};
+		return e = window.requestAnimationFrame(t), () => {
+			window.cancelAnimationFrame(e), _(A.current), A.current = null;
+		};
+	}, [M]), i(() => {
+		if (!C) return;
+		let e = () => {
+			document.visibilityState === "hidden" && F();
+		};
+		return document.addEventListener("visibilitychange", e), () => document.removeEventListener("visibilitychange", e);
+	}, [F, C]);
+	let I = r((e) => {
+		let t = e[0];
+		!t || j.current || (j.current = !0, P(), u({
+			value: t.rawValue,
+			format: t.format
+		}), d());
+	}, [
+		d,
+		u,
+		P
+	]), L = r((e) => {
+		P(), N(e), v?.(e);
+	}, [v, P]);
+	function R() {
+		j.current = !1, N(null);
+	}
+	let z = O ? `${f.root} ${O}` : f.root, B = M ? D?.[M.kind] ?? g[M.kind] : null;
+	return /* @__PURE__ */ s(t, {
+		isOpen: !0,
+		onClose: F,
+		size: "xl",
+		title: w,
+		children: /* @__PURE__ */ s(n, { children: /* @__PURE__ */ c("section", {
+			className: z,
+			"aria-label": w,
+			children: [/* @__PURE__ */ s("div", {
+				className: f.viewport,
+				children: M ? /* @__PURE__ */ c("div", {
+					className: f.error,
+					children: [/* @__PURE__ */ s("p", {
+						role: "alert",
+						children: B
+					}), /* @__PURE__ */ s(e, {
+						type: "button",
+						variant: "infoOutline",
+						onClick: R,
+						children: E
+					})]
+				}) : /* @__PURE__ */ s(l, {
+					ref: k,
+					formats: [...y],
+					constraints: b,
+					allowMultiple: !1,
+					sound: S,
+					components: x,
+					classNames: {
+						container: f.scanner,
+						video: f.video
+					},
+					onScan: I,
+					onError: L
+				})
+			}), !M && T ? /* @__PURE__ */ s("p", {
+				className: f.hint,
+				children: T
+			}) : null]
+		}) })
+	});
+}
+//#endregion
+export { v as BarcodeScannerDialog };
+
+//# sourceMappingURL=index.js.map

package/dist/barcode-scanner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/barcode-scanner/BarcodeScannerDialog.module.scss","../../src/barcode-scanner/BarcodeScannerDialog.tsx"],"sourcesContent":[".root {\n\tdisplay: grid;\n\tgap: var(--space-md);\n\tmin-inline-size: 0;\n}\n\n.viewport {\n\tposition: relative;\n\toverflow: hidden;\n\tinline-size: 100%;\n\taspect-ratio: 4 / 3;\n\tborder: var(--border);\n\tborder-radius: var(--radius-md);\n\tbackground: #000;\n}\n\n.scanner,\n.video {\n\tinline-size: 100%;\n\tblock-size: 100%;\n}\n\n.video {\n\tobject-fit: cover;\n}\n\n.error {\n\tdisplay: grid;\n\tplace-content: center;\n\tjustify-items: center;\n\tgap: var(--space-md);\n\tmin-block-size: 100%;\n\tpadding: var(--space-lg);\n\tbackground: var(--surface-0);\n\tcolor: var(--content-0);\n\ttext-align: center;\n\n\tp {\n\t\tmargin: 0;\n\t}\n}\n\n.hint {\n\tmargin: 0;\n\tcolor: var(--content-1);\n\tfont-size: var(--font-size-sm);\n\ttext-align: center;\n}\n","import { useCallback, useEffect, useRef, useState, type ComponentProps, type ReactNode } from \"react\";\n\nimport { prepareZXingModule, Scanner, type IDetectedBarcode, type IScannerError, type IScannerHandle } from \"@yudiel/react-qr-scanner\";\nimport zxingReaderWasmUrl from \"zxing-wasm/reader/zxing_reader.wasm?url\";\n\nimport { Button } from \"../button\";\nimport { Modal, ModalContent } from \"../modal\";\n\nimport styles from \"./BarcodeScannerDialog.module.scss\";\n\n/**\n * Полифилл должен получать WASM из npm-артефакта foundation UI, чтобы первое\n * сканирование не зависело от доступности внешнего CDN и работало в PWA offline.\n */\nprepareZXingModule({\n\toverrides: {\n\t\tlocateFile: (path: string, prefix: string) => (path.endsWith(\".wasm\") ? zxingReaderWasmUrl : `${prefix}${path}`)\n\t}\n});\n\ntype ScannerFormats = NonNullable<ComponentProps<typeof Scanner>[\"formats\"]>;\n\nexport type BarcodeScannerFormat = ScannerFormats[number];\nexport type BarcodeScannerErrorKind = IScannerError[\"kind\"];\nexport type BarcodeScannerError = Readonly<IScannerError>;\n\nexport type BarcodeScanResult = {\n\treadonly value: string;\n\treadonly format: string;\n};\n\nexport type BarcodeScannerControls = {\n\treadonly finder?: boolean;\n\treadonly torch?: boolean;\n\treadonly zoom?: boolean;\n};\n\nexport type BarcodeScannerDialogProps = {\n\t/** Вызывается один раз для первого распознанного кода. */\n\treadonly onDetected: (result: BarcodeScanResult) => void;\n\t/** Закрывает пользовательский сценарий и вызывается также после успешного сканирования. */\n\treadonly onClose: () => void;\n\t/** Получает исходную типизированную ошибку камеры для диагностики host-приложения. */\n\treadonly onError?: (error: BarcodeScannerError) => void;\n\t/** Ограничивает распознавание нужными форматами и уменьшает ложные совпадения. */\n\treadonly formats?: readonly BarcodeScannerFormat[];\n\t/** Настройки предпочитаемой камеры и разрешения видеопотока. */\n\treadonly constraints?: MediaTrackConstraints;\n\t/** Встроенные элементы управления сканера. */\n\treadonly controls?: BarcodeScannerControls;\n\t/** Звуковое подтверждение или URL собственного звука. */\n\treadonly sound?: boolean | string;\n\t/** Закрывает камеру при сворачивании вкладки или установленной PWA. */\n\treadonly closeWhenDocumentHidden?: boolean;\n\treadonly title?: string;\n\treadonly hint?: ReactNode;\n\treadonly retryLabel?: string;\n\treadonly errorMessages?: Partial<Record<BarcodeScannerErrorKind, string>>;\n\treadonly className?: string;\n};\n\nconst defaultFormats = [\"ean_13\", \"ean_8\", \"upc_a\", \"upc_e\", \"code_128\"] satisfies BarcodeScannerFormat[];\n\nconst defaultConstraints = {\n\tfacingMode: { ideal: \"environment\" },\n\twidth: { ideal: 1280 },\n\theight: { ideal: 720 }\n} satisfies MediaTrackConstraints;\n\nconst defaultControls = {\n\tfinder: true,\n\ttorch: true,\n\tzoom: true\n} satisfies BarcodeScannerControls;\n\nconst defaultErrorMessages = {\n\t\"permission-denied\": \"Доступ к камере запрещён. Разрешите его в настройках сайта.\",\n\t\"no-camera\": \"На устройстве не найдена камера.\",\n\t\"in-use\": \"Камера уже используется другим приложением или вкладкой.\",\n\toverconstrained: \"Камера не поддерживает запрошенные параметры.\",\n\t\"insecure-context\": \"Для работы камеры необходим HTTPS.\",\n\tunsupported: \"Этот браузер не поддерживает доступ к камере.\",\n\taborted: \"Запуск камеры был прерван.\",\n\tsecurity: \"Доступ к камере заблокирован политикой безопасности.\",\n\t\"type-error\": \"Переданы некорректные параметры камеры.\",\n\tunknown: \"Не удалось запустить сканер.\"\n} satisfies Record<BarcodeScannerErrorKind, string>;\n\nfunction stopMediaStream(stream: MediaStream | null | undefined) {\n\tstream?.getTracks().forEach((track) => track.stop());\n}\n\n/**\n * Одноразовый сканер штрихкодов в модальном окне. Компонент монтируется только\n * после явного действия пользователя, освобождает MediaStream до закрытия и\n * сохраняет ссылку на поток на случай, если дочерний Scanner уже очистил ref.\n */\nexport function BarcodeScannerDialog({\n\tonDetected,\n\tonClose,\n\tonError,\n\tformats = defaultFormats,\n\tconstraints = defaultConstraints,\n\tcontrols = defaultControls,\n\tsound = false,\n\tcloseWhenDocumentHidden = true,\n\ttitle = \"Сканирование штрихкода\",\n\thint = \"Расположите штрихкод внутри рамки\",\n\tretryLabel = \"Повторить\",\n\terrorMessages,\n\tclassName\n}: BarcodeScannerDialogProps) {\n\tconst scannerRef = useRef<IScannerHandle>(null);\n\tconst streamRef = useRef<MediaStream | null>(null);\n\tconst handledRef = useRef(false);\n\tconst [error, setError] = useState<BarcodeScannerError | null>(null);\n\n\tconst stopCamera = useCallback(() => {\n\t\tstopMediaStream(scannerRef.current?.getStream() ?? streamRef.current);\n\t\tstreamRef.current = null;\n\t}, []);\n\n\tconst closeScanner = useCallback(() => {\n\t\tstopCamera();\n\t\tonClose();\n\t}, [onClose, stopCamera]);\n\n\tuseEffect(() => {\n\t\tif (error) return;\n\n\t\tlet frameId = 0;\n\t\tconst rememberStream = () => {\n\t\t\tconst stream = scannerRef.current?.getStream();\n\t\t\tif (stream) {\n\t\t\t\tstreamRef.current = stream;\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tframeId = window.requestAnimationFrame(rememberStream);\n\t\t};\n\n\t\tframeId = window.requestAnimationFrame(rememberStream);\n\n\t\treturn () => {\n\t\t\twindow.cancelAnimationFrame(frameId);\n\t\t\tstopMediaStream(streamRef.current);\n\t\t\tstreamRef.current = null;\n\t\t};\n\t}, [error]);\n\n\tuseEffect(() => {\n\t\tif (!closeWhenDocumentHidden) return;\n\n\t\tconst handleVisibilityChange = () => {\n\t\t\tif (document.visibilityState === \"hidden\") closeScanner();\n\t\t};\n\n\t\tdocument.addEventListener(\"visibilitychange\", handleVisibilityChange);\n\t\treturn () => document.removeEventListener(\"visibilitychange\", handleVisibilityChange);\n\t}, [closeScanner, closeWhenDocumentHidden]);\n\n\tconst handleScan = useCallback(\n\t\t(detectedCodes: IDetectedBarcode[]) => {\n\t\t\tconst detectedCode = detectedCodes[0];\n\t\t\tif (!detectedCode || handledRef.current) return;\n\n\t\t\thandledRef.current = true;\n\t\t\tstopCamera();\n\t\t\tonDetected({ value: detectedCode.rawValue, format: detectedCode.format });\n\t\t\tonClose();\n\t\t},\n\t\t[onClose, onDetected, stopCamera]\n\t);\n\n\tconst handleError = useCallback(\n\t\t(scannerError: IScannerError) => {\n\t\t\tstopCamera();\n\t\t\tsetError(scannerError);\n\t\t\tonError?.(scannerError);\n\t\t},\n\t\t[onError, stopCamera]\n\t);\n\n\tfunction retryScanning() {\n\t\thandledRef.current = false;\n\t\tsetError(null);\n\t}\n\n\tconst rootClassName = className ? `${styles.root} ${className}` : styles.root;\n\tconst visibleErrorMessage = error ? (errorMessages?.[error.kind] ?? defaultErrorMessages[error.kind]) : null;\n\n\treturn (\n\t\t<Modal isOpen onClose={closeScanner} size=\"xl\" title={title}>\n\t\t\t<ModalContent>\n\t\t\t\t<section className={rootClassName} aria-label={title}>\n\t\t\t\t\t<div className={styles.viewport}>\n\t\t\t\t\t\t{error ? (\n\t\t\t\t\t\t\t<div className={styles.error}>\n\t\t\t\t\t\t\t\t<p role=\"alert\">{visibleErrorMessage}</p>\n\t\t\t\t\t\t\t\t<Button type=\"button\" variant=\"infoOutline\" onClick={retryScanning}>\n\t\t\t\t\t\t\t\t\t{retryLabel}\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Scanner\n\t\t\t\t\t\t\t\tref={scannerRef}\n\t\t\t\t\t\t\t\tformats={[...formats]}\n\t\t\t\t\t\t\t\tconstraints={constraints}\n\t\t\t\t\t\t\t\tallowMultiple={false}\n\t\t\t\t\t\t\t\tsound={sound}\n\t\t\t\t\t\t\t\tcomponents={controls}\n\t\t\t\t\t\t\t\tclassNames={{ container: styles.scanner, video: styles.video }}\n\t\t\t\t\t\t\t\tonScan={handleScan}\n\t\t\t\t\t\t\t\tonError={handleError}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{!error && hint ? <p className={styles.hint}>{hint}</p> : null}\n\t\t\t\t</section>\n\t\t\t</ModalContent>\n\t\t</Modal>\n\t);\n}\n"],"mappings":"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"}