@oneblink/apps-react 2.3.0-beta.2 → 2.3.0-beta.3

package/dist/form-elements/FormElementCamera.js

@@ -1,228 +1,228 @@
-import * as React from 'react';
-import useBooleanState from '../hooks/useBooleanState';
-import downloadAttachment, { downloadFileLegacy, } from '../services/download-file';
-import OnLoading from '../components/renderer/OnLoading';
-import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-import drawTimestampOnCanvas from '../services/drawTimestampOnCanvas';
-import useAttachment from '../hooks/attachments/useAttachment';
-import AnnotationModal from '../components/renderer/AnnotationModal';
-import Modal from '../components/renderer/Modal';
-import { checkIfContentTypeIsImage, prepareNewAttachment, correctFileOrientation, } from '../services/attachments';
-import AttachmentStatus from '../components/renderer/attachments/AttachmentStatus';
-import { canvasToBlob, urlToBlobAsync } from '../services/blob-utils';
-import ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable';
-import ProgressBar from '../components/renderer/attachments/ProgressBar';
-import { Fade } from '@mui/material';
-function FormElementCamera({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
-    const [{ cameraError, isLoading }, setState] = React.useState({
-        isLoading: false,
-    });
-    const [isDirty, setIsDirty] = useBooleanState(false);
-    const [isAnnotating, setIsAnnotating, clearIsAnnotating] = useBooleanState(false);
-    const fileInputRef = React.useRef(null);
-    const clearImage = React.useCallback(() => {
-        onChange(element, undefined);
-    }, [element, onChange]);
-    const fileChange = React.useCallback(async (changeEvent) => {
-        if (!changeEvent.target || !changeEvent.target.files) {
-            return;
-        }
-        const file = changeEvent.target.files[0];
-        if (!file) {
-            return;
-        }
-        setState({
-            isLoading: true,
-        });
-        console.log('File selected event', file);
-        try {
-            if (!checkIfContentTypeIsImage(file.type)) {
-                throw new Error(`Invalid file type "${file.type}". Please select an image.`);
-            }
-            const result = await correctFileOrientation(file, element.includeTimestampWatermark ? drawTimestampOnCanvas : undefined);
-            if (result instanceof Blob) {
-                onChange(element, prepareNewAttachment(result, file.name, element));
-            }
-            else {
-                const blob = await canvasToBlob(result);
-                onChange(element, prepareNewAttachment(blob, file.name, element));
-            }
-            setIsDirty();
-            setState({
-                isLoading: false,
-            });
-        }
-        catch (error) {
-            setState({
-                isLoading: false,
-                cameraError: error,
-            });
-        }
-    }, [element, onChange, setIsDirty]);
-    const openCamera = React.useCallback(() => {
-        if (window.cordova && navigator.camera && navigator.camera.getPicture) {
-            setState({
-                isLoading: true,
-            });
-            navigator.camera.getPicture((base64Data) => {
-                urlToBlobAsync(`data:image/jpeg;base64,${base64Data}`)
-                    .then((blob) => {
-                    onChange(element, prepareNewAttachment(blob, 'photo.jpeg', element));
-                    setState({
-                        isLoading: false,
-                    });
-                })
-                    .catch((error) => {
-                    setState({
-                        cameraError: error,
-                        isLoading: false,
-                    });
-                });
-            }, (error) => {
-                console.warn('An error occurred while attempting to take a photo', error);
-                setState({
-                    isLoading: false,
-                    cameraError: error,
-                });
-            }, {
-                quality: 100,
-                destinationType: window.Camera.DestinationType.DATA_URL,
-                sourceType: window.Camera.PictureSourceType.CAMERA,
-                allowEdit: false,
-                encodingType: window.Camera.EncodingType.JPEG,
-                mediaType: window.Camera.MediaType.PICTURE,
-                correctOrientation: true,
-                saveToPhotoAlbum: false,
-                cameraDirection: window.Camera.Direction.BACK,
-            });
-        }
-        else if (fileInputRef.current) {
-            // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNIZED
-            fileInputRef.current.value = '';
-            fileInputRef.current.click();
-        }
-        else {
-            console.error('Could not find "input" element in Camera component template');
-        }
-    }, [element, onChange]);
-    const { isUploading, uploadErrorMessage, isLoadingImageUrl, imageUrl, loadImageUrlError, canDownload, progress, } = useAttachment(value, element, React.useCallback((id, attachment) => {
-        onChange(element, attachment);
-    }, [element, onChange]));
-    const handleDownload = React.useCallback(async () => {
-        if (typeof value === 'string') {
-            await downloadFileLegacy(value, id);
-        }
-        else if (value && value.type !== 'ERROR') {
-            await downloadAttachment(value);
-        }
-    }, [value, id]);
-    const handleSaveAnnotation = React.useCallback((annotationDataUri) => {
-        clearIsAnnotating();
-        if (typeof imageUrl !== 'string') {
-            return;
-        }
-        setState({
-            isLoading: true,
-        });
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        const image = new Image();
-        image.onload = function () {
-            canvas.width = image.width;
-            canvas.height = image.height;
-            ctx.drawImage(image, 0, 0);
-            const annotationImage = new Image();
-            annotationImage.onload = function () {
-                ctx.drawImage(annotationImage, 0, 0, canvas.width, canvas.height);
-                try {
-                    canvasToBlob(canvas)
-                        .then((blob) => {
-                        const attachment = prepareNewAttachment(blob, 'photo.png', element);
-                        onChange(element, attachment);
-                        setState({
-                            isLoading: false,
-                        });
-                    })
-                        .catch((error) => {
-                        setState({
-                            cameraError: error,
-                            isLoading: false,
-                        });
-                    });
-                }
-                catch (error) {
-                    setState({
-                        cameraError: error,
-                        isLoading: false,
-                    });
-                }
-            };
-            annotationImage.src = annotationDataUri;
-        };
-        image.setAttribute('crossorigin', 'anonymous');
-        image.src = imageUrl;
-    }, [clearIsAnnotating, element, imageUrl, onChange]);
-    const progressTooltipRef = React.useRef(null);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(FormElementLabelContainer, { className: "ob-camera", element: element, id: id, required: element.required },
-            React.createElement("div", { className: "control" },
-                (value || isLoading) && (React.createElement(React.Fragment, null,
-                    React.createElement("figure", { className: "ob-figure", ref: progressTooltipRef },
-                        React.createElement(DisplayImage, { isUploading: isUploading, uploadErrorMessage: uploadErrorMessage, isLoadingImageUrl: isLoadingImageUrl, imageUrl: imageUrl, loadImageUrlError: loadImageUrlError, isLoading: isLoading, element: element, onAnnotate: setIsAnnotating, canDownload: canDownload, progress: progress }),
-                        progressTooltipRef.current && (React.createElement(Fade, { in: isUploading },
-                            React.createElement("span", null,
-                                React.createElement(ProgressBar, { isShowing: isUploading, progress: progress, tooltipAnchorEl: progressTooltipRef.current }))))))),
-                React.createElement("input", { ref: fileInputRef, className: "ob-input ob-camera__input-hidden cypress-camera-control", type: "file", accept: "image/*", capture: "environment", id: id, name: element.name, required: element.required, disabled: element.readOnly, onChange: fileChange }),
-                React.createElement("div", { className: "buttons ob-buttons" }, value ? (React.createElement(React.Fragment, null,
-                    React.createElement("button", { type: "button", className: "button ob-button ob-button__clear is-light cypress-clear-camera", onClick: clearImage, disabled: element.readOnly || isLoading }, "Clear"),
-                    canDownload && (React.createElement("button", { type: "button", className: "button ob-button ob-button__download is-primary cypress-download-file-button", onClick: handleDownload },
-                        React.createElement("span", { className: "icon" },
-                            React.createElement("i", { className: "material-icons" }, "cloud_download")),
-                        React.createElement("span", null, "\u00A0Download"))))) : (React.createElement("button", { type: "button", className: "button ob-button ob-button__open is-primary cypress-open-camera", onClick: openCamera, disabled: element.readOnly || isLoading }, "Open Camera")))),
-            (isDirty || displayValidationMessage) && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
-                React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage)))),
-        isAnnotating && imageUrl && (React.createElement(AnnotationModal, { imageSrc: imageUrl, onClose: clearIsAnnotating, onSave: handleSaveAnnotation })),
-        cameraError && (React.createElement(Modal, { isOpen: true, title: "Whoops...", className: "cypress-error-modal", titleClassName: "cypress-error-title", actions: React.createElement("button", { type: "button", className: "button ob-button is-primary cypress-close-error-button", onClick: () => setState({ isLoading: false }) }, "Okay") },
-            React.createElement("p", null,
-                "An error occurred while attempting to take a photo. Please click",
-                ' ',
-                React.createElement("b", null, "Okay"),
-                " below to try again. If the problem persists, please contact support."),
-            React.createElement("div", { className: "content has-margin-top-6" },
-                React.createElement("blockquote", null, cameraError.toString()))))));
-}
-export default React.memo(FormElementCamera);
-const DisplayImage = React.memo(function DisplayImage({ uploadErrorMessage, isUploading, isLoadingImageUrl, imageUrl, loadImageUrlError, isLoading, element, onAnnotate, }) {
-    if (uploadErrorMessage) {
-        return (React.createElement("div", { className: "figure-content" },
-            React.createElement("h3", { className: "title is-3" }, "Upload Failed"),
-            React.createElement("p", null,
-                "Your photo failed to upload, please press the ",
-                React.createElement("b", null, "Clear"),
-                " button and try again.")));
-    }
-    if (loadImageUrlError) {
-        return (React.createElement("div", { className: "figure-content" },
-            React.createElement("h3", { className: "title is-3" }, "Preview Failed"),
-            React.createElement("p", null, loadImageUrlError.message)));
-    }
-    if (isLoadingImageUrl || isLoading) {
-        return (React.createElement("div", { className: "figure-content has-text-centered cypress-camera-loading-image" },
-            React.createElement(OnLoading, { small: true })));
-    }
-    if (imageUrl) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("span", { className: "ob-figure__status" },
-                React.createElement(AttachmentStatus, { isLoadingImageUrl: isLoadingImageUrl, loadImageUrlError: loadImageUrlError, isUploading: isUploading, imageUrl: imageUrl })),
-            React.createElement("img", { src: imageUrl, className: "cypress-camera-image ob-camera__img", crossOrigin: "anonymous" }),
-            React.createElement("button", { type: "button", className: "button is-primary ob-camera__annotate-button cypress-annotate-button", onClick: onAnnotate, disabled: element.readOnly },
-                React.createElement("span", { className: "icon" },
-                    React.createElement("i", { className: "material-icons" }, "brush")))));
-    }
-    return (React.createElement("div", { className: "figure-content" },
-        React.createElement(ImagePreviewUnavailable, null)));
-});
+import * as React from 'react';
+import useBooleanState from '../hooks/useBooleanState';
+import downloadAttachment, { downloadFileLegacy, } from '../services/download-file';
+import OnLoading from '../components/renderer/OnLoading';
+import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
+import drawTimestampOnCanvas from '../services/drawTimestampOnCanvas';
+import useAttachment from '../hooks/attachments/useAttachment';
+import AnnotationModal from '../components/renderer/AnnotationModal';
+import Modal from '../components/renderer/Modal';
+import { checkIfContentTypeIsImage, prepareNewAttachment, correctFileOrientation, } from '../services/attachments';
+import AttachmentStatus from '../components/renderer/attachments/AttachmentStatus';
+import { canvasToBlob, urlToBlobAsync } from '../services/blob-utils';
+import ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable';
+import ProgressBar from '../components/renderer/attachments/ProgressBar';
+import { Fade } from '@mui/material';
+function FormElementCamera({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
+    const [{ cameraError, isLoading }, setState] = React.useState({
+        isLoading: false,
+    });
+    const [isDirty, setIsDirty] = useBooleanState(false);
+    const [isAnnotating, setIsAnnotating, clearIsAnnotating] = useBooleanState(false);
+    const fileInputRef = React.useRef(null);
+    const clearImage = React.useCallback(() => {
+        onChange(element, undefined);
+    }, [element, onChange]);
+    const fileChange = React.useCallback(async (changeEvent) => {
+        if (!changeEvent.target || !changeEvent.target.files) {
+            return;
+        }
+        const file = changeEvent.target.files[0];
+        if (!file) {
+            return;
+        }
+        setState({
+            isLoading: true,
+        });
+        console.log('File selected event', file);
+        try {
+            if (!checkIfContentTypeIsImage(file.type)) {
+                throw new Error(`Invalid file type "${file.type}". Please select an image.`);
+            }
+            const result = await correctFileOrientation(file, element.includeTimestampWatermark ? drawTimestampOnCanvas : undefined);
+            if (result instanceof Blob) {
+                onChange(element, prepareNewAttachment(result, file.name, element));
+            }
+            else {
+                const blob = await canvasToBlob(result);
+                onChange(element, prepareNewAttachment(blob, file.name, element));
+            }
+            setIsDirty();
+            setState({
+                isLoading: false,
+            });
+        }
+        catch (error) {
+            setState({
+                isLoading: false,
+                cameraError: error,
+            });
+        }
+    }, [element, onChange, setIsDirty]);
+    const openCamera = React.useCallback(() => {
+        if (window.cordova && navigator.camera && navigator.camera.getPicture) {
+            setState({
+                isLoading: true,
+            });
+            navigator.camera.getPicture((base64Data) => {
+                urlToBlobAsync(`data:image/jpeg;base64,${base64Data}`)
+                    .then((blob) => {
+                    onChange(element, prepareNewAttachment(blob, 'photo.jpeg', element));
+                    setState({
+                        isLoading: false,
+                    });
+                })
+                    .catch((error) => {
+                    setState({
+                        cameraError: error,
+                        isLoading: false,
+                    });
+                });
+            }, (error) => {
+                console.warn('An error occurred while attempting to take a photo', error);
+                setState({
+                    isLoading: false,
+                    cameraError: error,
+                });
+            }, {
+                quality: 100,
+                destinationType: window.Camera.DestinationType.DATA_URL,
+                sourceType: window.Camera.PictureSourceType.CAMERA,
+                allowEdit: false,
+                encodingType: window.Camera.EncodingType.JPEG,
+                mediaType: window.Camera.MediaType.PICTURE,
+                correctOrientation: true,
+                saveToPhotoAlbum: false,
+                cameraDirection: window.Camera.Direction.BACK,
+            });
+        }
+        else if (fileInputRef.current) {
+            // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNIZED
+            fileInputRef.current.value = '';
+            fileInputRef.current.click();
+        }
+        else {
+            console.error('Could not find "input" element in Camera component template');
+        }
+    }, [element, onChange]);
+    const { isUploading, uploadErrorMessage, isLoadingImageUrl, imageUrl, loadImageUrlError, canDownload, progress, } = useAttachment(value, element, React.useCallback((id, attachment) => {
+        onChange(element, attachment);
+    }, [element, onChange]));
+    const handleDownload = React.useCallback(async () => {
+        if (typeof value === 'string') {
+            await downloadFileLegacy(value, id);
+        }
+        else if (value && value.type !== 'ERROR') {
+            await downloadAttachment(value);
+        }
+    }, [value, id]);
+    const handleSaveAnnotation = React.useCallback((annotationDataUri) => {
+        clearIsAnnotating();
+        if (typeof imageUrl !== 'string') {
+            return;
+        }
+        setState({
+            isLoading: true,
+        });
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+        const image = new Image();
+        image.onload = function () {
+            canvas.width = image.width;
+            canvas.height = image.height;
+            ctx.drawImage(image, 0, 0);
+            const annotationImage = new Image();
+            annotationImage.onload = function () {
+                ctx.drawImage(annotationImage, 0, 0, canvas.width, canvas.height);
+                try {
+                    canvasToBlob(canvas)
+                        .then((blob) => {
+                        const attachment = prepareNewAttachment(blob, 'photo.png', element);
+                        onChange(element, attachment);
+                        setState({
+                            isLoading: false,
+                        });
+                    })
+                        .catch((error) => {
+                        setState({
+                            cameraError: error,
+                            isLoading: false,
+                        });
+                    });
+                }
+                catch (error) {
+                    setState({
+                        cameraError: error,
+                        isLoading: false,
+                    });
+                }
+            };
+            annotationImage.src = annotationDataUri;
+        };
+        image.setAttribute('crossorigin', 'anonymous');
+        image.src = imageUrl;
+    }, [clearIsAnnotating, element, imageUrl, onChange]);
+    const progressTooltipRef = React.useRef(null);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(FormElementLabelContainer, { className: "ob-camera", element: element, id: id, required: element.required },
+            React.createElement("div", { className: "control" },
+                (value || isLoading) && (React.createElement(React.Fragment, null,
+                    React.createElement("figure", { className: "ob-figure", ref: progressTooltipRef },
+                        React.createElement(DisplayImage, { isUploading: isUploading, uploadErrorMessage: uploadErrorMessage, isLoadingImageUrl: isLoadingImageUrl, imageUrl: imageUrl, loadImageUrlError: loadImageUrlError, isLoading: isLoading, element: element, onAnnotate: setIsAnnotating, canDownload: canDownload, progress: progress }),
+                        progressTooltipRef.current && (React.createElement(Fade, { in: isUploading },
+                            React.createElement("span", null,
+                                React.createElement(ProgressBar, { isShowing: isUploading, progress: progress, tooltipAnchorEl: progressTooltipRef.current }))))))),
+                React.createElement("input", { ref: fileInputRef, className: "ob-input ob-camera__input-hidden cypress-camera-control", type: "file", accept: "image/*", capture: "environment", id: id, name: element.name, required: element.required, disabled: element.readOnly, onChange: fileChange }),
+                React.createElement("div", { className: "buttons ob-buttons" }, value ? (React.createElement(React.Fragment, null,
+                    React.createElement("button", { type: "button", className: "button ob-button ob-button__clear is-light cypress-clear-camera", onClick: clearImage, disabled: element.readOnly || isLoading }, "Clear"),
+                    canDownload && (React.createElement("button", { type: "button", className: "button ob-button ob-button__download is-primary cypress-download-file-button", onClick: handleDownload },
+                        React.createElement("span", { className: "icon" },
+                            React.createElement("i", { className: "material-icons" }, "cloud_download")),
+                        React.createElement("span", null, "\u00A0Download"))))) : (React.createElement("button", { type: "button", className: "button ob-button ob-button__open is-primary cypress-open-camera", onClick: openCamera, disabled: element.readOnly || isLoading }, "Open Camera")))),
+            (isDirty || displayValidationMessage) && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
+                React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage)))),
+        isAnnotating && imageUrl && (React.createElement(AnnotationModal, { imageSrc: imageUrl, onClose: clearIsAnnotating, onSave: handleSaveAnnotation })),
+        cameraError && (React.createElement(Modal, { isOpen: true, title: "Whoops...", className: "cypress-error-modal", titleClassName: "cypress-error-title", actions: React.createElement("button", { type: "button", className: "button ob-button is-primary cypress-close-error-button", onClick: () => setState({ isLoading: false }) }, "Okay") },
+            React.createElement("p", null,
+                "An error occurred while attempting to take a photo. Please click",
+                ' ',
+                React.createElement("b", null, "Okay"),
+                " below to try again. If the problem persists, please contact support."),
+            React.createElement("div", { className: "content has-margin-top-6" },
+                React.createElement("blockquote", null, cameraError.toString()))))));
+}
+export default React.memo(FormElementCamera);
+const DisplayImage = React.memo(function DisplayImage({ uploadErrorMessage, isUploading, isLoadingImageUrl, imageUrl, loadImageUrlError, isLoading, element, onAnnotate, }) {
+    if (uploadErrorMessage) {
+        return (React.createElement("div", { className: "figure-content" },
+            React.createElement("h3", { className: "title is-3" }, "Upload Failed"),
+            React.createElement("p", null,
+                "Your photo failed to upload, please press the ",
+                React.createElement("b", null, "Clear"),
+                " button and try again.")));
+    }
+    if (loadImageUrlError) {
+        return (React.createElement("div", { className: "figure-content" },
+            React.createElement("h3", { className: "title is-3" }, "Preview Failed"),
+            React.createElement("p", null, loadImageUrlError.message)));
+    }
+    if (isLoadingImageUrl || isLoading) {
+        return (React.createElement("div", { className: "figure-content has-text-centered cypress-camera-loading-image" },
+            React.createElement(OnLoading, { small: true })));
+    }
+    if (imageUrl) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("span", { className: "ob-figure__status" },
+                React.createElement(AttachmentStatus, { isLoadingImageUrl: isLoadingImageUrl, loadImageUrlError: loadImageUrlError, isUploading: isUploading, imageUrl: imageUrl })),
+            React.createElement("img", { src: imageUrl, className: "cypress-camera-image ob-camera__img", crossOrigin: "anonymous" }),
+            React.createElement("button", { type: "button", className: "button is-primary ob-camera__annotate-button cypress-annotate-button", onClick: onAnnotate, disabled: element.readOnly },
+                React.createElement("span", { className: "icon" },
+                    React.createElement("i", { className: "material-icons" }, "brush")))));
+    }
+    return (React.createElement("div", { className: "figure-content" },
+        React.createElement(ImagePreviewUnavailable, null)));
+});
 //# sourceMappingURL=FormElementCamera.js.map

package/dist/form-elements/FormElementCaptcha.d.ts

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
-declare type Props = {
-    element: FormTypes.CaptchaElement;
-    onChange: FormElementValueChangeHandler<string>;
-    displayValidationMessage: boolean;
-    validationMessage: string | undefined;
-};
-declare function FormElementCaptcha({ element, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementCaptcha>;
-export default _default;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+import { FormElementValueChangeHandler } from '../types/form';
+declare type Props = {
+    element: FormTypes.CaptchaElement;
+    onChange: FormElementValueChangeHandler<string>;
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+};
+declare function FormElementCaptcha({ element, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementCaptcha>;
+export default _default;

package/dist/form-elements/FormElementCaptcha.js

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import ReCAPTCHA from 'react-google-recaptcha';
-import useCaptchaSiteKey from '../hooks/useCaptchaSiteKey';
-function FormElementCaptcha({ element, onChange, validationMessage, displayValidationMessage, }) {
-    const captchaSiteKey = useCaptchaSiteKey();
-    return (React.createElement("div", { className: "cypress-captcha-element" },
-        React.createElement("div", { className: "ob-form__element ob-captcha" },
-            React.createElement(ReCAPTCHA, { sitekey: captchaSiteKey || '', onChange: (val) => {
-                    onChange(element, val || undefined);
-                }, className: "ob-input cypress-captcha-control" }),
-            displayValidationMessage && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
-                React.createElement("div", { className: "has-text-danger ob-error__text cypress-required cypress-validation-message" }, validationMessage))))));
-}
-export default React.memo(FormElementCaptcha);
+import * as React from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+import useCaptchaSiteKey from '../hooks/useCaptchaSiteKey';
+function FormElementCaptcha({ element, onChange, validationMessage, displayValidationMessage, }) {
+    const captchaSiteKey = useCaptchaSiteKey();
+    return (React.createElement("div", { className: "cypress-captcha-element" },
+        React.createElement("div", { className: "ob-form__element ob-captcha" },
+            React.createElement(ReCAPTCHA, { sitekey: captchaSiteKey || '', onChange: (val) => {
+                    onChange(element, val || undefined);
+                }, className: "ob-input cypress-captcha-control" }),
+            displayValidationMessage && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
+                React.createElement("div", { className: "has-text-danger ob-error__text cypress-required cypress-validation-message" }, validationMessage))))));
+}
+export default React.memo(FormElementCaptcha);
 //# sourceMappingURL=FormElementCaptcha.js.map

package/dist/form-elements/FormElementCheckBoxes.d.ts

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
-declare type Props = {
-    id: string;
-    element: FormTypes.CheckboxElement;
-    value: unknown;
-    onChange: FormElementValueChangeHandler<string[]>;
-    displayValidationMessage: boolean;
-    validationMessage: string | undefined;
-    conditionallyShownOptions: FormTypes.ChoiceElementOption[] | undefined;
-};
-declare function FormElementCheckboxes({ id, element, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptions, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormElementCheckboxes>;
-export default _default;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+import { FormElementValueChangeHandler } from '../types/form';
+declare type Props = {
+    id: string;
+    element: FormTypes.CheckboxElement;
+    value: unknown;
+    onChange: FormElementValueChangeHandler<string[]>;
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+    conditionallyShownOptions: FormTypes.ChoiceElementOption[] | undefined;
+};
+declare function FormElementCheckboxes({ id, element, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptions, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FormElementCheckboxes>;
+export default _default;