@oneblink/apps-react 5.3.0 → 5.3.1-beta.3

package/dist/components/CustomAccordion.d.ts

@@ -1,27 +1,21 @@
 /// <reference types="react" />
-export declare const CustomAccordion: import("@emotion/styled").StyledComponent<import("@mui/material").AccordionProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const CustomAccordionSummary: import("@emotion/styled").StyledComponent<{
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").AccordionSummaryClasses> | undefined;
-    expandIcon?: import("react").ReactNode;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+export declare const CustomAccordion: import("@emotion/styled").StyledComponent<{
+    children: NonNullable<import("react").ReactNode>;
+    classes?: Partial<import("@mui/material").AccordionClasses> | undefined;
+    defaultExpanded?: boolean | undefined;
     disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    disableGutters?: boolean | undefined;
+    expanded?: boolean | undefined;
+    onChange?: ((event: import("react").SyntheticEvent<Element, Event>, expanded: boolean) => void) | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    TransitionComponent?: import("react").JSXElementConstructor<import("@mui/material/transitions").TransitionProps & {
+        children?: import("react").ReactElement<any, any> | undefined;
+    }> | undefined;
+    TransitionProps?: import("@mui/material/transitions").TransitionProps | undefined;
+} & Omit<import("@mui/material").PaperOwnProps, "onChange" | "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "disabled" | "sx" | "onChange" | "elevation" | keyof import("@mui/material/OverridableComponent").CommonProps | "variant" | "disableGutters" | "square" | "defaultExpanded" | "expanded" | "TransitionComponent" | "TransitionProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const CustomAccordionSummary: import("@emotion/styled").StyledComponent<import("@mui/material").AccordionSummaryOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "children" | "disabled" | "sx" | "tabIndex" | "action" | keyof import("@mui/material/OverridableComponent").CommonProps | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "expandIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "className" | "style" | "children" | "disabled" | "sx" | "tabIndex" | "action" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "expandIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const CustomAccordionDetails: import("@emotion/styled").StyledComponent<import("@mui/material").AccordionDetailsProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/components/Lists.d.ts

@@ -9,17 +9,7 @@ export declare const UnorderedList: import("@emotion/styled").StyledComponent<im
 type ListProps = {
     spaced?: boolean;
 };
-export declare const ListItem: import("@emotion/styled").StyledComponent<Omit<import("@mui/system").SystemProps<Theme> & {
-    align?: "right" | "left" | "inherit" | "center" | "justify" | undefined;
-    children?: React.ReactNode;
-    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
-    gutterBottom?: boolean | undefined;
-    noWrap?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    sx?: import("@mui/material").SxProps<Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline", string>> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
+export declare const ListItem: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-}, "children" | ("p" | "top" | "right" | "bottom" | "left" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "sx" | "align" | keyof import("@mui/material/OverridableComponent").CommonProps | "gutterBottom" | "noWrap" | "paragraph" | "variant" | "variantMapping">, "ref"> & import("@mui/system").MUIStyledCommonProps<Theme> & ListProps, {}, {}>;
+}, "className" | "p" | "style" | "children" | "top" | "right" | "bottom" | "left" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "sx" | "align" | "classes" | "gutterBottom" | "noWrap" | "paragraph" | "variant" | "variantMapping">, "ref"> & import("@mui/system").MUIStyledCommonProps<Theme> & ListProps, {}, {}>;
 export {};

package/dist/form-elements/FormElementBarcodeScanner.js

@@ -1,18 +1,10 @@
 import * as React from 'react';
-import clsx from 'clsx';
-import jsQR from 'jsqr';
-import OnLoading from '../components/renderer/OnLoading';
+import { Html5QrcodeScanner } from 'html5-qrcode';
 import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
-import quaggaReader from '../services/barcode-readers/quagger.js';
 import useBooleanState from '../hooks/useBooleanState';
 import LookupButton from '../components/renderer/LookupButton';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-import { Sentry } from '@oneblink/apps';
 import useLookupNotification, { LookupNotificationContext, } from '../hooks/useLookupNotification';
-const MS_BETWEEN_IMAGE_PROCESSING = 10;
-const fadedSquareWidthInPixels = 200;
-const fadedSquareHeightInPixels = 150;
-const redLineHeightInPixels = 1;
 function FormElementBarcodeScanner({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
     const [isCameraOpen, startBarcodeScanner, stopBarcodeScanner] = useBooleanState(false);
     const [error, setError] = React.useState(null);
@@ -58,7 +50,7 @@ function FormElementBarcodeScanner({ id, element, value, onChange, validationMes
                     React.createElement("div", null,
                         React.createElement("h4", { className: "title is-4" }, "Whoops..."),
                         React.createElement("p", null, error.message))))),
-            isCameraOpen ? (React.createElement(BarcodeScanner, { element: element, onScan: handleScan, onClose: stopBarcodeScanner })) : (React.createElement("div", null,
+            isCameraOpen ? (React.createElement(BarcodeScanner, { id: `${id}==BARCODE_SCANNER`, onScan: handleScan, onClose: stopBarcodeScanner })) : (React.createElement("div", null,
                 React.createElement("div", { className: "field has-addons" },
                     React.createElement("div", { className: "control is-expanded has-icons-right" },
                         React.createElement("input", { type: "text", placeholder: element.placeholderValue, id: id, name: element.name, className: "input ob-input cypress-barcode-scanner-control has-margin-bottom-8", value: text, onChange: (e) => onChange(element, {
@@ -74,239 +66,34 @@ function FormElementBarcodeScanner({ id, element, value, onChange, validationMes
                 React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage))))));
 }
 export default React.memo(FormElementBarcodeScanner);
-function BarcodeScanner({ element, onScan, onClose }) {
-    const videoElementRef = React.useRef(null);
-    const figureElementRef = React.useRef(null);
-    const [{ isLoading = false, selectedDeviceId, error }, setState] = React.useState({
-        isLoading: true,
-        selectedDeviceId: undefined,
-        error: undefined,
-    });
-    const [camera, setCamera] = React.useState(null);
-    const setError = React.useCallback((error) => {
-        setState({
-            error,
-            isLoading: false,
-            selectedDeviceId: undefined,
-        });
-    }, []);
-    // Create timeout using $timeout outside of the scan function so
-    // so that we can cancel it when navigating away from screen
-    const scanImageForBarcode = React.useCallback((videoElement, waitInMS, options, checkStop) => {
-        const restrictedBarcodeTypes = element.restrictedBarcodeTypes || [];
-        // Using $timeout here instead of $interval as we dont know
-        // exactly how long each processing of the image will take.
-        setTimeout(async () => {
-            if (checkStop())
-                return;
-            const canvasElement = document.createElement('canvas');
-            canvasElement.width = options.sourceWidth;
-            canvasElement.height = options.sourceHeight;
-            const canvasContext = canvasElement.getContext('2d');
-            if (canvasContext) {
-                canvasContext.drawImage(videoElement, options.sourceX, options.sourceY, canvasElement.width, canvasElement.height, 0, 0, canvasElement.width, canvasElement.height);
-                if (!element.restrictBarcodeTypes ||
-                    (element.restrictedBarcodeTypes || []).indexOf('qr_reader') > -1) {
-                    const imageData = canvasContext.getImageData(0, 0, canvasElement.width, canvasElement.height);
-                    const code = jsQR(imageData.data, imageData.width, imageData.height, {
-                        inversionAttempts: 'dontInvert',
-                    });
-                    if (code) {
-                        return onScan(code.data);
-                    }
-                }
-            }
-            if (!element.restrictBarcodeTypes ||
-                !(restrictedBarcodeTypes.length === 1 &&
-                    restrictedBarcodeTypes[0] === 'qr_reader')) {
-                const base64Image = canvasElement.toDataURL('image/png');
-                const quaggaResult = await quaggaReader(base64Image, restrictedBarcodeTypes);
-                if (quaggaResult) {
-                    return onScan(quaggaResult);
-                }
-            }
-            if (checkStop())
-                return;
-            scanImageForBarcode(videoElement, MS_BETWEEN_IMAGE_PROCESSING, options, checkStop);
-        }, waitInMS);
-    }, [element.restrictBarcodeTypes, element.restrictedBarcodeTypes, onScan]);
-    const switchCamera = React.useCallback(() => {
-        if (!camera) {
-            return;
-        }
-        // We will just be rotating between the available camera.
-        const nextDeviceIndex = camera.availableDevices.findIndex((mediaDeviceInfo) => mediaDeviceInfo.deviceId === camera.activeDeviceId) + 1;
-        const nextDevice = camera.availableDevices[nextDeviceIndex] || camera.availableDevices[0];
-        setState({
-            error: undefined,
-            isLoading: true,
-            selectedDeviceId: nextDevice.deviceId,
-        });
-    }, [camera]);
+function BarcodeScanner({ id, onScan, onClose }) {
+    const [html5QrcodeScanner, setHtml5QrcodeScanner] = React.useState(null);
     React.useEffect(() => {
-        if (!videoElementRef.current) {
-            return;
-        }
-        const newCamera = new HTML5Camera(videoElementRef.current);
-        setCamera(newCamera);
+        const verbose = true;
+        const newHtml5QrcodeScanner = new Html5QrcodeScanner(id, {
+            fps: 10,
+            qrbox: {
+                width: 250,
+                height: 250,
+            },
+        }, verbose);
+        setHtml5QrcodeScanner(newHtml5QrcodeScanner);
         return () => {
-            newCamera.close();
+            newHtml5QrcodeScanner.clear();
         };
-    }, []);
+    }, [id]);
     React.useEffect(() => {
-        if (!camera ||
-            error ||
-            // If attempting to open the device that is currently open,
-            // we will not attempt to open again.
-            (selectedDeviceId && camera.activeDeviceId === selectedDeviceId)) {
-            return;
-        }
-        let ignore = false;
-        (async () => {
-            try {
-                const videoElement = videoElementRef.current;
-                const figureElement = figureElementRef.current;
-                if (!videoElement || !figureElement) {
-                    return;
-                }
-                console.log('Opening camera with:', selectedDeviceId || 'UNKNOWN');
-                await camera.open(selectedDeviceId);
-                if (ignore) {
-                    return;
-                }
-                setState({
-                    error: undefined,
-                    isLoading: false,
-                    selectedDeviceId,
-                });
-                // @ts-expect-error ???
-                const fadedSquareElement = figureElement.getElementsByClassName('ob-barcode-scanner__square')[0];
-                // @ts-expect-error ???
-                const redLineElement = figureElement.getElementsByClassName('ob-barcode-scanner__line')[0];
-                console.log('videoElement Width pixels', videoElement.clientWidth);
-                console.log('videoElement Height pixels', videoElement.clientHeight);
-                console.log('videoElement Width', videoElement.videoWidth);
-                console.log('videoElement Height', videoElement.videoHeight);
-                // Faded Square needs its values set in pixels
-                const fadedSquareLeftInPixels = (videoElement.clientWidth - fadedSquareWidthInPixels) / 2;
-                console.log('fadedSquareLeftInPixels', fadedSquareLeftInPixels);
-                const fadedSquareTopInPixels = (videoElement.clientHeight - fadedSquareHeightInPixels) / 2;
-                console.log('fadedSquareTopInPixels', fadedSquareTopInPixels);
-                fadedSquareElement.style.borderBottom = `${fadedSquareTopInPixels}px`;
-                fadedSquareElement.style.borderTop = `${fadedSquareTopInPixels}px`;
-                fadedSquareElement.style.borderLeft = `${fadedSquareLeftInPixels}px`;
-                fadedSquareElement.style.borderRight = `${fadedSquareLeftInPixels}px`;
-                fadedSquareElement.style.borderColor = 'rgba(0, 0, 0, 0.25)';
-                fadedSquareElement.style.borderStyle = 'solid';
-                redLineElement.style.height = `${redLineHeightInPixels}px`;
-                redLineElement.style.top = `${(videoElement.clientHeight - redLineHeightInPixels) / 2}px`;
-                redLineElement.style.left = `${fadedSquareLeftInPixels}px`;
-                redLineElement.style.right = `${fadedSquareLeftInPixels}px`;
-                // Need to calculate the actual width, which is not in pixels
-                const ratio = videoElement.videoWidth / videoElement.clientWidth;
-                console.log('pixel to video Ratio', ratio);
-                const left = ratio * fadedSquareLeftInPixels;
-                console.log('left in video measurement', left);
-                const top = ratio * fadedSquareTopInPixels;
-                console.log('top in video measurement', top);
-                const fadedSquareWidth = fadedSquareWidthInPixels * ratio;
-                console.log('red square in video measurement', fadedSquareWidth);
-                // Wait a little before scanning the first image
-                // to prevent image processing staring before
-                // camera is ready.
-                scanImageForBarcode(videoElement, 250, {
-                    sourceX: left,
-                    sourceY: top,
-                    sourceWidth: fadedSquareWidth,
-                    sourceHeight: fadedSquareWidth,
-                }, () => ignore);
-            }
-            catch (error) {
-                if (ignore) {
-                    return;
-                }
-                console.warn('Error while attempting to open camera', error);
-                Sentry.captureException(error);
-                switch (error.name) {
-                    case 'NotSupportedError': {
-                        setError(new Error('Your browser does not support accessing your camera. Please click "Cancel" below and type in the barcode value manually.'));
-                        break;
-                    }
-                    case 'NotAllowedError': {
-                        setError(new Error('Cannot scan for barcodes without granting the application access to the camera. Please click "Cancel" below to try again.'));
-                        break;
-                    }
-                    default: {
-                        setError(new Error('An unknown error has occurred, please click "Cancel" below to try again. If the problem persists, please contact support.'));
-                    }
-                }
-            }
-        })();
-        return () => {
-            ignore = true;
-        };
-    }, [camera, error, scanImageForBarcode, selectedDeviceId, setError]);
+        html5QrcodeScanner === null || html5QrcodeScanner === void 0 ? void 0 : html5QrcodeScanner.render(function onScanSuccess(decodedText, decodedResult) {
+            console.log(`Code matched = ${decodedText}`, decodedResult);
+            onScan(decodedText);
+        }, function onScanFailure() {
+            // do nothing and keep scanning
+        });
+    }, [html5QrcodeScanner, onScan]);
     return (React.createElement("div", null,
-        React.createElement("figure", { className: "ob-figure", ref: figureElementRef },
-            React.createElement("div", { className: "figure-content has-text-centered" },
-                isLoading && React.createElement(OnLoading, { small: true }),
-                !!error && (React.createElement("div", null,
-                    React.createElement("h4", { className: "title is-4" }, "Whoops..."),
-                    React.createElement("p", null, error.message))),
-                React.createElement("div", { className: clsx('is-relative', {
-                        'is-hidden': isLoading || error,
-                    }) },
-                    React.createElement("div", { className: "ob-barcode-scanner__square" }),
-                    React.createElement("div", { className: "ob-barcode-scanner__line" }),
-                    React.createElement("video", { ref: videoElementRef, autoPlay: true, playsInline: true, className: "ob-barcode-scanner__video" })))),
+        React.createElement("figure", { className: "ob-figure" },
+            React.createElement("div", { id: id })),
         React.createElement("div", { className: "buttons ob-buttons" },
-            React.createElement("button", { type: "button", className: "button ob-button ob-button__cancel is-light cypress-cancel-scan-barcode-button", onClick: onClose }, "Cancel"),
-            ((camera === null || camera === void 0 ? void 0 : camera.availableDevices.length) || 1) > 1 && (React.createElement("button", { type: "button", className: "button ob-button ob-button__switch-camera is-primary cypress-switch-camera-button", onClick: switchCamera }, "Switch Camera")))));
-}
-class HTML5Camera {
-    constructor(htmlVideoElement) {
-        this.htmlVideoElement = htmlVideoElement;
-        this.availableDevices = [];
-        this.mediaStream = undefined;
-    }
-    get activeDeviceId() {
-        var _a;
-        if (this.mediaStream) {
-            const [activeMediaStreamTrack] = this.mediaStream.getTracks();
-            return (_a = activeMediaStreamTrack === null || activeMediaStreamTrack === void 0 ? void 0 : activeMediaStreamTrack.getSettings()) === null || _a === void 0 ? void 0 : _a.deviceId;
-        }
-    }
-    async open(deviceId) {
-        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-            const error = new Error();
-            error.name = 'NotSupportedError';
-            throw error;
-        }
-        this.close();
-        const constraints = {
-            video: {
-                facingMode: deviceId ? undefined : 'environment',
-                deviceId: deviceId ? { exact: deviceId } : undefined,
-            },
-        };
-        const mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
-        this.mediaStream = mediaStream;
-        this.htmlVideoElement.srcObject = mediaStream;
-        if (!this.availableDevices.length) {
-            const availableDevices = await navigator.mediaDevices.enumerateDevices();
-            this.availableDevices = availableDevices.filter((mediaDeviceInfo) => mediaDeviceInfo.kind === 'videoinput' && !!mediaDeviceInfo.deviceId);
-        }
-        await new Promise((resolve) => this.htmlVideoElement.addEventListener('canplay', resolve, {
-            once: true,
-        }));
-    }
-    close() {
-        if (this.mediaStream) {
-            this.mediaStream.getTracks().forEach((track) => {
-                track.stop();
-            });
-            this.mediaStream = undefined;
-        }
-    }
+            React.createElement("button", { type: "button", className: "button ob-button ob-button__cancel is-light cypress-cancel-scan-barcode-button", onClick: onClose }, "Cancel"))));
 }
 //# sourceMappingURL=FormElementBarcodeScanner.js.map

package/dist/form-elements/FormElementBarcodeScanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementBarcodeScanner.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBarcodeScanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport jsQR from 'jsqr'\n\nimport OnLoading from '../components/renderer/OnLoading'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport quaggaReader from '../services/barcode-readers/quagger.js'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { Sentry } from '@oneblink/apps'\nimport useLookupNotification, {\n  LookupNotificationContext,\n} from '../hooks/useLookupNotification'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\n\nconst MS_BETWEEN_IMAGE_PROCESSING = 10\nconst fadedSquareWidthInPixels = 200\nconst fadedSquareHeightInPixels = 150\nconst redLineHeightInPixels = 1\n\ntype Props = {\n  id: string\n  element: FormTypes.BarcodeScannerElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementBarcodeScanner({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const [isCameraOpen, startBarcodeScanner, stopBarcodeScanner] =\n    useBooleanState(false)\n  const [error, setError] = React.useState<Error | null>(null)\n  const { onLookup } = useLookupNotification(value)\n  const handleScan = React.useCallback(\n    (newValue: string | undefined) => {\n      setIsDirty()\n      onChange(element, {\n        value: newValue,\n      })\n      stopBarcodeScanner()\n      onLookup()\n    },\n    [element, onChange, onLookup, setIsDirty, stopBarcodeScanner],\n  )\n\n  const openBarcodeScanner = React.useCallback(() => {\n    if (window.cordova) {\n      setError(null)\n      // @ts-expect-error ???\n      window.cordova.plugins.barcodeScanner.scan(\n        // @ts-expect-error ???\n        (result) => {\n          if (!result.cancelled) {\n            handleScan(result.text)\n          }\n        },\n        // @ts-expect-error ???\n        (error) => {\n          setError(\n            new Error(\n              `An error has occurred: \"${error}\". Please click \"Cancel\" below to try again. If the problem persists, please contact support.`,\n            ),\n          )\n        },\n        {\n          showFlipCameraButton: true,\n          showTorchButton: true,\n        },\n      )\n    } else {\n      startBarcodeScanner()\n    }\n  }, [handleScan, startBarcodeScanner])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  const text = typeof value === 'string' ? value : ''\n  return (\n    <div className=\"cypress-barcode-scanner-element\">\n      <FormElementLabelContainer\n        className=\"ob-barcode-scanner\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        {error && (\n          <figure className=\"ob-figure\">\n            <div className=\"figure-content has-text-centered\">\n              <div>\n                <h4 className=\"title is-4\">Whoops...</h4>\n                <p>{error.message}</p>\n              </div>\n            </div>\n          </figure>\n        )}\n\n        {isCameraOpen ? (\n          <BarcodeScanner\n            element={element}\n            onScan={handleScan}\n            onClose={stopBarcodeScanner}\n          />\n        ) : (\n          <div>\n            <div className=\"field has-addons\">\n              <div className=\"control is-expanded has-icons-right\">\n                <input\n                  type=\"text\"\n                  placeholder={element.placeholderValue}\n                  id={id}\n                  name={element.name}\n                  className=\"input ob-input cypress-barcode-scanner-control has-margin-bottom-8\"\n                  value={text}\n                  onChange={(e) =>\n                    onChange(element, {\n                      value: e.target.value || undefined,\n                    })\n                  }\n                  required={element.required}\n                  disabled={element.readOnly}\n                  onBlur={setIsDirty}\n                />\n                <span className=\"ob-input-icon icon is-small is-right\">\n                  <i className=\"material-icons is-size-5\">document_scanner</i>\n                </span>\n              </div>\n              {!!element.readOnly && !!value && (\n                <div className=\"control\">\n                  <CopyToClipboardButton\n                    className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                    text={text}\n                  />\n                </div>\n              )}\n              <LookupButton\n                isInputButton\n                value={value}\n                validationMessage={validationMessage}\n                lookupButtonConfig={element.lookupButton}\n              />\n            </div>\n\n            <button\n              type=\"button\"\n              className=\"button ob-button ob-button__open is-primary cypress-start-scan-barcode-button\"\n              disabled={element.readOnly}\n              onClick={openBarcodeScanner}\n            >\n              Scan Barcode\n            </button>\n          </div>\n        )}\n\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementBarcodeScanner)\n\ntype BarcodeScannerProps = {\n  element: FormTypes.BarcodeScannerElement\n  onScan: (barcode: string | undefined) => void\n  onClose: () => void\n}\n\nfunction BarcodeScanner({ element, onScan, onClose }: BarcodeScannerProps) {\n  const videoElementRef = React.useRef<HTMLVideoElement>(null)\n  const figureElementRef = React.useRef<HTMLDivElement>(null)\n\n  const [{ isLoading = false, selectedDeviceId, error }, setState] =\n    React.useState<{\n      isLoading: boolean\n      selectedDeviceId: string | undefined\n      error: Error | undefined\n    }>({\n      isLoading: true,\n      selectedDeviceId: undefined,\n      error: undefined,\n    })\n  const [camera, setCamera] = React.useState<HTML5Camera | null>(null)\n\n  const setError = React.useCallback((error: Error) => {\n    setState({\n      error,\n      isLoading: false,\n      selectedDeviceId: undefined,\n    })\n  }, [])\n\n  // Create timeout using $timeout outside of the scan function so\n  // so that we can cancel it when navigating away from screen\n  const scanImageForBarcode = React.useCallback(\n    (\n      videoElement: HTMLVideoElement,\n      waitInMS: number,\n      options: {\n        sourceX: number\n        sourceY: number\n        sourceWidth: number\n        sourceHeight: number\n      },\n      checkStop: () => boolean,\n    ) => {\n      const restrictedBarcodeTypes = element.restrictedBarcodeTypes || []\n      // Using $timeout here instead of $interval as we dont know\n      // exactly how long each processing of the image will take.\n      setTimeout(async () => {\n        if (checkStop()) return\n        const canvasElement = document.createElement('canvas')\n\n        canvasElement.width = options.sourceWidth\n        canvasElement.height = options.sourceHeight\n\n        const canvasContext = canvasElement.getContext('2d')\n        if (canvasContext) {\n          canvasContext.drawImage(\n            videoElement,\n            options.sourceX,\n            options.sourceY,\n            canvasElement.width,\n            canvasElement.height,\n            0,\n            0,\n            canvasElement.width,\n            canvasElement.height,\n          )\n\n          if (\n            !element.restrictBarcodeTypes ||\n            (element.restrictedBarcodeTypes || []).indexOf('qr_reader') > -1\n          ) {\n            const imageData = canvasContext.getImageData(\n              0,\n              0,\n              canvasElement.width,\n              canvasElement.height,\n            )\n\n            const code = jsQR(\n              imageData.data,\n              imageData.width,\n              imageData.height,\n              {\n                inversionAttempts: 'dontInvert',\n              },\n            )\n\n            if (code) {\n              return onScan(code.data)\n            }\n          }\n        }\n\n        if (\n          !element.restrictBarcodeTypes ||\n          !(\n            restrictedBarcodeTypes.length === 1 &&\n            restrictedBarcodeTypes[0] === 'qr_reader'\n          )\n        ) {\n          const base64Image = canvasElement.toDataURL('image/png')\n          const quaggaResult = await quaggaReader(\n            base64Image,\n            restrictedBarcodeTypes,\n          )\n          if (quaggaResult) {\n            return onScan(quaggaResult)\n          }\n        }\n\n        if (checkStop()) return\n\n        scanImageForBarcode(\n          videoElement,\n          MS_BETWEEN_IMAGE_PROCESSING,\n          options,\n          checkStop,\n        )\n      }, waitInMS)\n    },\n    [element.restrictBarcodeTypes, element.restrictedBarcodeTypes, onScan],\n  )\n\n  const switchCamera = React.useCallback(() => {\n    if (!camera) {\n      return\n    }\n\n    // We will just be rotating between the available camera.\n    const nextDeviceIndex =\n      camera.availableDevices.findIndex(\n        (mediaDeviceInfo) => mediaDeviceInfo.deviceId === camera.activeDeviceId,\n      ) + 1\n    const nextDevice =\n      camera.availableDevices[nextDeviceIndex] || camera.availableDevices[0]\n    setState({\n      error: undefined,\n      isLoading: true,\n      selectedDeviceId: nextDevice.deviceId,\n    })\n  }, [camera])\n\n  React.useEffect(() => {\n    if (!videoElementRef.current) {\n      return\n    }\n\n    const newCamera = new HTML5Camera(videoElementRef.current)\n    setCamera(newCamera)\n\n    return () => {\n      newCamera.close()\n    }\n  }, [])\n\n  React.useEffect(() => {\n    if (\n      !camera ||\n      error ||\n      // If attempting to open the device that is currently open,\n      // we will not attempt to open again.\n      (selectedDeviceId && camera.activeDeviceId === selectedDeviceId)\n    ) {\n      return\n    }\n\n    let ignore = false\n\n    ;(async () => {\n      try {\n        const videoElement = videoElementRef.current\n        const figureElement = figureElementRef.current\n        if (!videoElement || !figureElement) {\n          return\n        }\n\n        console.log('Opening camera with:', selectedDeviceId || 'UNKNOWN')\n        await camera.open(selectedDeviceId)\n\n        if (ignore) {\n          return\n        }\n\n        setState({\n          error: undefined,\n          isLoading: false,\n          selectedDeviceId,\n        })\n\n        // @ts-expect-error ???\n        const fadedSquareElement: HTMLDivElement =\n          figureElement.getElementsByClassName('ob-barcode-scanner__square')[0]\n        // @ts-expect-error ???\n        const redLineElement: HTMLDivElement =\n          figureElement.getElementsByClassName('ob-barcode-scanner__line')[0]\n        console.log('videoElement Width pixels', videoElement.clientWidth)\n        console.log('videoElement Height pixels', videoElement.clientHeight)\n        console.log('videoElement Width', videoElement.videoWidth)\n        console.log('videoElement Height', videoElement.videoHeight)\n\n        // Faded Square needs its values set in pixels\n        const fadedSquareLeftInPixels =\n          (videoElement.clientWidth - fadedSquareWidthInPixels) / 2\n        console.log('fadedSquareLeftInPixels', fadedSquareLeftInPixels)\n        const fadedSquareTopInPixels =\n          (videoElement.clientHeight - fadedSquareHeightInPixels) / 2\n        console.log('fadedSquareTopInPixels', fadedSquareTopInPixels)\n\n        fadedSquareElement.style.borderBottom = `${fadedSquareTopInPixels}px`\n        fadedSquareElement.style.borderTop = `${fadedSquareTopInPixels}px`\n        fadedSquareElement.style.borderLeft = `${fadedSquareLeftInPixels}px`\n        fadedSquareElement.style.borderRight = `${fadedSquareLeftInPixels}px`\n        fadedSquareElement.style.borderColor = 'rgba(0, 0, 0, 0.25)'\n        fadedSquareElement.style.borderStyle = 'solid'\n\n        redLineElement.style.height = `${redLineHeightInPixels}px`\n        redLineElement.style.top = `${\n          (videoElement.clientHeight - redLineHeightInPixels) / 2\n        }px`\n        redLineElement.style.left = `${fadedSquareLeftInPixels}px`\n        redLineElement.style.right = `${fadedSquareLeftInPixels}px`\n\n        // Need to calculate the actual width, which is not in pixels\n        const ratio = videoElement.videoWidth / videoElement.clientWidth\n        console.log('pixel to video Ratio', ratio)\n\n        const left = ratio * fadedSquareLeftInPixels\n        console.log('left in video measurement', left)\n        const top = ratio * fadedSquareTopInPixels\n        console.log('top in video measurement', top)\n\n        const fadedSquareWidth = fadedSquareWidthInPixels * ratio\n        console.log('red square in video measurement', fadedSquareWidth)\n\n        // Wait a little before scanning the first image\n        // to prevent image processing staring before\n        // camera is ready.\n        scanImageForBarcode(\n          videoElement,\n          250,\n          {\n            sourceX: left,\n            sourceY: top,\n            sourceWidth: fadedSquareWidth,\n            sourceHeight: fadedSquareWidth,\n          },\n          () => ignore,\n        )\n      } catch (error) {\n        if (ignore) {\n          return\n        }\n        console.warn('Error while attempting to open camera', error)\n        Sentry.captureException(error)\n        switch ((error as Error).name) {\n          case 'NotSupportedError': {\n            setError(\n              new Error(\n                'Your browser does not support accessing your camera. Please click \"Cancel\" below and type in the barcode value manually.',\n              ),\n            )\n            break\n          }\n          case 'NotAllowedError': {\n            setError(\n              new Error(\n                'Cannot scan for barcodes without granting the application access to the camera. Please click \"Cancel\" below to try again.',\n              ),\n            )\n            break\n          }\n          default: {\n            setError(\n              new Error(\n                'An unknown error has occurred, please click \"Cancel\" below to try again. If the problem persists, please contact support.',\n              ),\n            )\n          }\n        }\n      }\n    })()\n\n    return () => {\n      ignore = true\n    }\n  }, [camera, error, scanImageForBarcode, selectedDeviceId, setError])\n\n  return (\n    <div>\n      <figure className=\"ob-figure\" ref={figureElementRef}>\n        <div className=\"figure-content has-text-centered\">\n          {isLoading && <OnLoading small />}\n\n          {!!error && (\n            <div>\n              <h4 className=\"title is-4\">Whoops...</h4>\n              <p>{error.message}</p>\n            </div>\n          )}\n\n          <div\n            className={clsx('is-relative', {\n              'is-hidden': isLoading || error,\n            })}\n          >\n            <div className=\"ob-barcode-scanner__square\"></div>\n            <div className=\"ob-barcode-scanner__line\"></div>\n            <video\n              ref={videoElementRef}\n              autoPlay\n              playsInline\n              className=\"ob-barcode-scanner__video\"\n            />\n          </div>\n        </div>\n      </figure>\n\n      <div className=\"buttons ob-buttons\">\n        <button\n          type=\"button\"\n          className=\"button ob-button ob-button__cancel is-light cypress-cancel-scan-barcode-button\"\n          onClick={onClose}\n        >\n          Cancel\n        </button>\n        {(camera?.availableDevices.length || 1) > 1 && (\n          <button\n            type=\"button\"\n            className=\"button ob-button ob-button__switch-camera is-primary cypress-switch-camera-button\"\n            onClick={switchCamera}\n          >\n            Switch Camera\n          </button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nclass HTML5Camera {\n  availableDevices: MediaDeviceInfo[]\n  htmlVideoElement: HTMLVideoElement\n  mediaStream: MediaStream | undefined\n\n  constructor(htmlVideoElement: HTMLVideoElement) {\n    this.htmlVideoElement = htmlVideoElement\n    this.availableDevices = []\n    this.mediaStream = undefined\n  }\n\n  get activeDeviceId(): string | undefined {\n    if (this.mediaStream) {\n      const [activeMediaStreamTrack] = this.mediaStream.getTracks()\n      return activeMediaStreamTrack?.getSettings()?.deviceId\n    }\n  }\n\n  async open(deviceId?: string) {\n    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {\n      const error = new Error()\n      error.name = 'NotSupportedError'\n      throw error\n    }\n\n    this.close()\n\n    const constraints = {\n      video: {\n        facingMode: deviceId ? undefined : 'environment',\n        deviceId: deviceId ? { exact: deviceId } : undefined,\n      },\n    }\n    const mediaStream = await navigator.mediaDevices.getUserMedia(constraints)\n    this.mediaStream = mediaStream\n    this.htmlVideoElement.srcObject = mediaStream\n\n    if (!this.availableDevices.length) {\n      const availableDevices = await navigator.mediaDevices.enumerateDevices()\n      this.availableDevices = availableDevices.filter(\n        (mediaDeviceInfo) =>\n          mediaDeviceInfo.kind === 'videoinput' && !!mediaDeviceInfo.deviceId,\n      )\n    }\n\n    await new Promise((resolve) =>\n      this.htmlVideoElement.addEventListener('canplay', resolve, {\n        once: true,\n      }),\n    )\n  }\n\n  close() {\n    if (this.mediaStream) {\n      this.mediaStream.getTracks().forEach((track) => {\n        track.stop()\n      })\n      this.mediaStream = undefined\n    }\n  }\n}\n"]}
+{"version":3,"file":"FormElementBarcodeScanner.js","sourceRoot":"","sources":["../../src/form-elements/FormElementBarcodeScanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { Html5QrcodeScanner } from 'html5-qrcode'\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport useLookupNotification, {\n  LookupNotificationContext,\n} from '../hooks/useLookupNotification'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.BarcodeScannerElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementBarcodeScanner({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const [isCameraOpen, startBarcodeScanner, stopBarcodeScanner] =\n    useBooleanState(false)\n  const [error, setError] = React.useState<Error | null>(null)\n  const { onLookup } = useLookupNotification(value)\n  const handleScan = React.useCallback(\n    (newValue: string | undefined) => {\n      setIsDirty()\n      onChange(element, {\n        value: newValue,\n      })\n      stopBarcodeScanner()\n      onLookup()\n    },\n    [element, onChange, onLookup, setIsDirty, stopBarcodeScanner],\n  )\n\n  const openBarcodeScanner = React.useCallback(() => {\n    if (window.cordova) {\n      setError(null)\n      // @ts-expect-error ???\n      window.cordova.plugins.barcodeScanner.scan(\n        // @ts-expect-error ???\n        (result) => {\n          if (!result.cancelled) {\n            handleScan(result.text)\n          }\n        },\n        // @ts-expect-error ???\n        (error) => {\n          setError(\n            new Error(\n              `An error has occurred: \"${error}\". Please click \"Cancel\" below to try again. If the problem persists, please contact support.`,\n            ),\n          )\n        },\n        {\n          showFlipCameraButton: true,\n          showTorchButton: true,\n        },\n      )\n    } else {\n      startBarcodeScanner()\n    }\n  }, [handleScan, startBarcodeScanner])\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  const text = typeof value === 'string' ? value : ''\n  return (\n    <div className=\"cypress-barcode-scanner-element\">\n      <FormElementLabelContainer\n        className=\"ob-barcode-scanner\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        {error && (\n          <figure className=\"ob-figure\">\n            <div className=\"figure-content has-text-centered\">\n              <div>\n                <h4 className=\"title is-4\">Whoops...</h4>\n                <p>{error.message}</p>\n              </div>\n            </div>\n          </figure>\n        )}\n\n        {isCameraOpen ? (\n          <BarcodeScanner\n            id={`${id}==BARCODE_SCANNER`}\n            onScan={handleScan}\n            onClose={stopBarcodeScanner}\n          />\n        ) : (\n          <div>\n            <div className=\"field has-addons\">\n              <div className=\"control is-expanded has-icons-right\">\n                <input\n                  type=\"text\"\n                  placeholder={element.placeholderValue}\n                  id={id}\n                  name={element.name}\n                  className=\"input ob-input cypress-barcode-scanner-control has-margin-bottom-8\"\n                  value={text}\n                  onChange={(e) =>\n                    onChange(element, {\n                      value: e.target.value || undefined,\n                    })\n                  }\n                  required={element.required}\n                  disabled={element.readOnly}\n                  onBlur={setIsDirty}\n                />\n                <span className=\"ob-input-icon icon is-small is-right\">\n                  <i className=\"material-icons is-size-5\">document_scanner</i>\n                </span>\n              </div>\n              {!!element.readOnly && !!value && (\n                <div className=\"control\">\n                  <CopyToClipboardButton\n                    className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                    text={text}\n                  />\n                </div>\n              )}\n              <LookupButton\n                isInputButton\n                value={value}\n                validationMessage={validationMessage}\n                lookupButtonConfig={element.lookupButton}\n              />\n            </div>\n\n            <button\n              type=\"button\"\n              className=\"button ob-button ob-button__open is-primary cypress-start-scan-barcode-button\"\n              disabled={element.readOnly}\n              onClick={openBarcodeScanner}\n            >\n              Scan Barcode\n            </button>\n          </div>\n        )}\n\n        {isDisplayingValidationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementBarcodeScanner)\n\ntype BarcodeScannerProps = {\n  id: string\n  onScan: (barcode: string | undefined) => void\n  onClose: () => void\n}\n\nfunction BarcodeScanner({ id, onScan, onClose }: BarcodeScannerProps) {\n  const [html5QrcodeScanner, setHtml5QrcodeScanner] =\n    React.useState<Html5QrcodeScanner | null>(null)\n\n  React.useEffect(() => {\n    const verbose = true\n    const newHtml5QrcodeScanner = new Html5QrcodeScanner(\n      id,\n      {\n        fps: 10,\n        qrbox: {\n          width: 250,\n          height: 250,\n        },\n      },\n      verbose,\n    )\n    setHtml5QrcodeScanner(newHtml5QrcodeScanner)\n    return () => {\n      newHtml5QrcodeScanner.clear()\n    }\n  }, [id])\n\n  React.useEffect(() => {\n    html5QrcodeScanner?.render(\n      function onScanSuccess(decodedText, decodedResult) {\n        console.log(`Code matched = ${decodedText}`, decodedResult)\n        onScan(decodedText)\n      },\n      function onScanFailure() {\n        // do nothing and keep scanning\n      },\n    )\n  }, [html5QrcodeScanner, onScan])\n\n  return (\n    <div>\n      <figure className=\"ob-figure\">\n        <div id={id} />\n      </figure>\n      <div className=\"buttons ob-buttons\">\n        <button\n          type=\"button\"\n          className=\"button ob-button ob-button__cancel is-light cypress-cancel-scan-barcode-button\"\n          onClick={onClose}\n        >\n          Cancel\n        </button>\n      </div>\n    </div>\n  )\n}\n"]}

package/dist/styles.css

@@ -176,7 +176,8 @@ fieldset[disabled] .file-name, fieldset[disabled] .select select, .select fields
   top: 0;
 }
 
-/* Bulma Base */ /*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
+/* Bulma Base */
+/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
 html,
 body,
 p,
@@ -6029,8 +6030,8 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
 }
 .button.is-loading::after {
   position: absolute;
-  left: calc(50% - (1em * 0.5));
-  top: calc(50% - (1em * 0.5));
+  left: calc(50% - 1em * 0.5);
+  top: calc(50% - 1em * 0.5);
   position: absolute !important;
 }
 .button.is-static {
@@ -7328,7 +7329,7 @@ input[type=range].slider:not([orient=vertical]).has-output:disabled + output, in
 input[type=range].slider:not([orient=vertical]).has-output {
   display: inline-block;
   vertical-align: middle;
-  width: calc(100% - ( 4.2rem ));
+  width: calc(100% - (4.2rem));
 }
 input[type=range].slider:not([orient=vertical]).has-output + output {
   display: inline-block;
@@ -7447,7 +7448,7 @@ input[type=range].slider:disabled::-ms-thumb {
   transform: scale(1);
 }
 input[type=range].slider:not([orient=vertical]) {
-  min-height: calc(( 1rem + 2px ) * 1.25);
+  min-height: calc((1rem + 2px) * 1.25);
 }
 input[type=range].slider:not([orient=vertical])::-webkit-slider-runnable-track {
   height: 0.5rem;
@@ -7490,7 +7491,7 @@ input[type=range].slider[orient=vertical]::-webkit-slider-thumb {
   margin-left: -0.25rem;
 }
 input[type=range].slider.is-small:not([orient=vertical]) {
-  min-height: calc(( 0.75rem + 2px ) * 1.25);
+  min-height: calc((0.75rem + 2px) * 1.25);
 }
 input[type=range].slider.is-small:not([orient=vertical])::-webkit-slider-runnable-track {
   height: 0.375rem;
@@ -7533,7 +7534,7 @@ input[type=range].slider.is-small[orient=vertical]::-webkit-slider-thumb {
   margin-left: -0.1875rem;
 }
 input[type=range].slider.is-medium:not([orient=vertical]) {
-  min-height: calc(( 1.25rem + 2px ) * 1.25);
+  min-height: calc((1.25rem + 2px) * 1.25);
 }
 input[type=range].slider.is-medium:not([orient=vertical])::-webkit-slider-runnable-track {
   height: 0.625rem;
@@ -7576,7 +7577,7 @@ input[type=range].slider.is-medium[orient=vertical]::-webkit-slider-thumb {
   margin-left: -0.3125rem;
 }
 input[type=range].slider.is-large:not([orient=vertical]) {
-  min-height: calc(( 1.5rem + 2px ) * 1.25);
+  min-height: calc((1.5rem + 2px) * 1.25);
 }
 input[type=range].slider.is-large:not([orient=vertical])::-webkit-slider-runnable-track {
   height: 0.75rem;

package/dist/styles.scss

@@ -20,7 +20,7 @@ $size-9: 0.25rem;
 //
 // Bulma Variables
 //
-@import 'bulma/sass/utilities/_all';
+@import 'bulma/sass/utilities/_all.sass';
 
 //
 // Our Variables
@@ -31,8 +31,8 @@ $secondary: $grey-lighter;
 //
 // Bulma Styles
 //
-@import 'bulma/sass/base/_all';
-@import 'bulma/sass/helpers/_all';
+@import 'bulma/sass/base/_all.sass';
+@import 'bulma/sass/helpers/_all.sass';
 @import 'bulma/sass/layout/section.sass';
 @import 'bulma/sass/grid/columns.sass';
 

package/package.json

@@ -1,89 +1,88 @@
 {
   "name": "@oneblink/apps-react",
   "description": "Helper functions for OneBlink apps in ReactJS.",
-  "version": "5.3.0",
+  "version": "5.3.1-beta.3",
   "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
   "bugs": {
     "url": "https://github.com/oneblink/apps-react/issues"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
-    "@mui/icons-material": "^5.11.11",
-    "@oneblink/sdk-core": "^5.0.0-beta.2",
-    "@react-google-maps/api": "2.18.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.16",
+    "@oneblink/sdk-core": "^5.0.0",
+    "@react-google-maps/api": "2.19.2",
     "blueimp-load-image": "^5.16.0",
     "bulma": "^0.9.3",
     "bulma-slider": "2.0.4",
     "bulma-steps": "^2.2.1",
     "bulma-toast": "^2.4.1",
-    "clsx": "^1.2.1",
+    "clsx": "^2.0.0",
     "color": "^4.2.3",
     "copy-to-clipboard": "^3.3.3",
-    "date-fns": "^2.29.3",
+    "date-fns": "^2.30.0",
     "escape-string-regexp": "^5.0.0",
     "file-saver": "^2.0.5",
     "flatpickr": "^4.6.13",
-    "jsqr": "^1.4.0",
+    "html5-qrcode": "^2.3.8",
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "morph-expressions": "^1.1.1",
-    "quagga": "^0.12.1",
-    "query-string": "^7.1.1",
-    "react-google-recaptcha": "^2.1.0",
+    "query-string": "^8.1.0",
+    "react-google-recaptcha": "^3.1.0",
     "react-input-mask": "^2.0.4",
     "react-signature-canvas": "^1.0.6",
     "react-table": "^7.8.0",
-    "sanitize-html": "^2.10.0",
+    "sanitize-html": "^2.11.0",
     "use-resize-observer": "^9.1.0",
-    "uuid": "^9.0.0",
+    "uuid": "^9.0.1",
     "validate.js": "^0.13.1",
-    "xml2js": "^0.5.0"
+    "xml2js": "^0.6.2"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-env": "^7.23.2",
     "@microsoft/eslint-plugin-sdl": "^0.2.0",
-    "@mui/lab": "^5.0.0-alpha.135",
-    "@mui/material": "^5.10.1",
-    "@mui/x-date-pickers": "^6.9.1",
-    "@oneblink/apps": "^7.0.0-beta.2",
-    "@oneblink/release-cli": "^2.1.0",
+    "@mui/lab": "^5.0.0-alpha.152",
+    "@mui/material": "^5.14.17",
+    "@mui/x-date-pickers": "^6.18.0",
+    "@oneblink/apps": "^7.0.1-beta.2",
+    "@oneblink/release-cli": "^2.1.1",
     "@oneblink/types": "github:oneblink/types",
-    "@types/blueimp-load-image": "^5.16.0",
-    "@types/color": "^3.0.3",
-    "@types/file-saver": "^2.0.5",
-    "@types/filesystem": "^0.0.32",
+    "@types/blueimp-load-image": "^5.16.4",
+    "@types/color": "^3.0.5",
+    "@types/file-saver": "^2.0.6",
+    "@types/filesystem": "^0.0.34",
     "@types/jest": "^27.4.1",
-    "@types/lodash.clonedeep": "^4.5.7",
-    "@types/lodash.debounce": "^4.0.7",
-    "@types/lodash.throttle": "^4.1.7",
+    "@types/lodash.clonedeep": "^4.5.8",
+    "@types/lodash.debounce": "^4.0.8",
+    "@types/lodash.throttle": "^4.1.8",
     "@types/react": "^17.0.43",
-    "@types/react-google-recaptcha": "^2.1.5",
-    "@types/react-input-mask": "^3.0.2",
+    "@types/react-google-recaptcha": "^2.1.7",
+    "@types/react-input-mask": "^3.0.4",
     "@types/react-router-dom": "^5.3.3",
-    "@types/react-signature-canvas": "^1.0.2",
-    "@types/react-table": "^7.7.14",
-    "@types/sanitize-html": "^2.9.0",
-    "@types/ua-parser-js": "^0.7.36",
-    "@types/uuid": "^9.0.1",
-    "@types/xml2js": "^0.4.11",
-    "@typescript-eslint/eslint-plugin": "^5.57.0",
-    "@typescript-eslint/parser": "^5.57.0",
+    "@types/react-signature-canvas": "^1.0.4",
+    "@types/react-table": "^7.7.17",
+    "@types/sanitize-html": "^2.9.3",
+    "@types/ua-parser-js": "^0.7.38",
+    "@types/uuid": "^9.0.6",
+    "@types/xml2js": "^0.4.13",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
     "copyfiles": "^2.4.1",
-    "eslint": "^8.37.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint": "^8.53.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "fixpack": "^4.0.0",
     "jest": "^27.5.1",
-    "prettier": "^2.8.7",
-    "prettier-plugin-jsdoc": "^0.4.2",
+    "prettier": "^3.0.3",
+    "prettier-plugin-jsdoc": "^1.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
-    "sass": "^1.60.0",
+    "sass": "^1.69.5",
     "ts-jest": "^27.1.4",
     "tsc-watch": "^6.0.0",
     "typedoc": "^0.24.8",
@@ -93,8 +92,8 @@
     "doc": "docs"
   },
   "engines": {
-    "node": ">=18",
-    "npm": ">=8"
+    "node": ">=20",
+    "npm": ">=10"
   },
   "files": [
     "dist"
@@ -104,7 +103,7 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@mui/lab": "^5.0.0 || ^5.0.0-alpha.135",
+    "@mui/lab": "^5.0.0 || ^5.0.0-alpha.152",
     "@mui/material": "^5.6.1",
     "@mui/x-date-pickers": "^6.9.1",
     "@oneblink/apps": "*",