@oneblink/apps-react 12.0.0 → 13.0.0-beta.2

package/dist/form-elements/FormElementCamera.js

@@ -18,7 +18,7 @@ import MaterialIcon from '../components/MaterialIcon';
 import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
 import CropModal from '../components/ImageCropper/CropModal';
 import { generateCroppedImageBlob } from '../components/ImageCropper';
-function FormElementCamera({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
+function FormElementCamera({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const [{ cameraError, isLoading }, setState] = React.useState({
         isLoading: false,
@@ -213,10 +213,10 @@ function FormElementCamera({ id, element, value, onChange, validationMessage, di
         }
     }, [attachmentUrl, clearIsCropping, contentType, element, onChange]);
     const progressTooltipRef = React.useRef(null);
-    return (_jsxs(_Fragment, { children: [_jsxs(FormElementLabelContainer, { className: "ob-camera", element: element, id: id, required: element.required, children: [_jsxs("div", { className: "control", children: [(value || isLoading) && (_jsx(_Fragment, { children: _jsxs("figure", { className: "ob-figure", ref: progressTooltipRef, children: [_jsx(DisplayImage, { isUploading: isUploading, uploadErrorMessage: uploadErrorMessage, isLoadingAttachmentUrl: isLoadingAttachmentUrl, attachmentUrl: attachmentUrl, loadAttachmentUrlError: loadAttachmentUrlError, isLoading: isLoading, element: element, onAnnotate: setIsAnnotating, onCrop: setIsCropping, canDownload: canDownload, progress: progress }), _jsx(ProgressBar, { isShowing: isUploading, progress: progress })] }) })), _jsx("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, "aria-required": element.required }), _jsx("div", { className: "buttons ob-buttons", children: value ? (_jsxs(_Fragment, { children: [uploadErrorMessage && handleRetry && (_jsx("button", { type: "button", className: "button ob-button ob-button__retry is-light cypress-retry-file-button", onClick: handleRetry, children: "Retry" })), _jsx("button", { type: "button", className: "button ob-button ob-button__clear is-light cypress-clear-camera", onClick: clearImage, disabled: element.readOnly || isLoading, children: "Clear" }), canDownload && (_jsxs("button", { type: "button", className: "button ob-button ob-button__download is-primary cypress-download-file-button", onClick: handleDownload, children: [_jsx("span", { className: "icon", children: _jsx(MaterialIcon, { children: "cloud_download" }) }), _jsx("span", { children: "\u00A0Download" })] }))] })) : (_jsx("button", { type: "button", className: "button ob-button ob-button__open is-primary cypress-open-camera", onClick: openCamera, disabled: element.readOnly || isLoading, "aria-describedby": ariaDescribedby, onBlur: setIsDirty, children: "Open Camera" })) })] }), (isDirty || displayValidationMessage) && !!validationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }), isAnnotating && attachmentUrl && (_jsx(AnnotationModal, { imageSrc: attachmentUrl, onClose: clearIsAnnotating, onSave: handleSaveAnnotation })), isCropping && attachmentUrl && (_jsx(CropModal, { imageSrc: attachmentUrl, onClose: clearIsCropping, onSave: handleSaveCrop })), cameraError && (_jsxs(Modal, { isOpen: true, title: "Whoops...", className: "cypress-error-modal", titleClassName: "cypress-error-title", actions: _jsx("button", { type: "button", className: "button ob-button is-primary cypress-close-error-button", onClick: () => setState({ isLoading: false }), autoFocus: true, children: "Okay" }), children: [_jsxs("p", { children: ["An error occurred while attempting to take a photo. Please click", ' ', _jsx("b", { children: "Okay" }), " below to try again. If the problem persists, please contact support."] }), _jsx("div", { className: "content has-margin-top-6", children: _jsx("blockquote", { children: cameraError.toString() }) })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(FormElementLabelContainer, { className: "ob-camera", element: element, id: id, required: element.required, children: [_jsxs("div", { className: "control", children: [(value || isLoading) && (_jsx(_Fragment, { children: _jsxs("figure", { className: "ob-figure", ref: progressTooltipRef, children: [_jsx(DisplayImage, { isUploading: isUploading, uploadErrorMessage: uploadErrorMessage, isLoadingAttachmentUrl: isLoadingAttachmentUrl, attachmentUrl: attachmentUrl, loadAttachmentUrlError: loadAttachmentUrlError, isLoading: isLoading, element: element, readOnly: readOnly, onAnnotate: setIsAnnotating, onCrop: setIsCropping, canDownload: canDownload, progress: progress }), _jsx(ProgressBar, { isShowing: isUploading, progress: progress })] }) })), _jsx("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: readOnly, onChange: fileChange, "aria-required": element.required }), _jsx("div", { className: "buttons ob-buttons", children: value ? (_jsxs(_Fragment, { children: [uploadErrorMessage && handleRetry && (_jsx("button", { type: "button", className: "button ob-button ob-button__retry is-light cypress-retry-file-button", onClick: handleRetry, children: "Retry" })), _jsx("button", { type: "button", className: "button ob-button ob-button__clear is-light cypress-clear-camera", onClick: clearImage, disabled: readOnly || isLoading, children: "Clear" }), canDownload && (_jsxs("button", { type: "button", className: "button ob-button ob-button__download is-primary cypress-download-file-button", onClick: handleDownload, children: [_jsx("span", { className: "icon", children: _jsx(MaterialIcon, { children: "cloud_download" }) }), _jsx("span", { children: "\u00A0Download" })] }))] })) : (_jsx("button", { type: "button", className: "button ob-button ob-button__open is-primary cypress-open-camera", onClick: openCamera, disabled: readOnly || isLoading, "aria-describedby": ariaDescribedby, onBlur: setIsDirty, children: "Open Camera" })) })] }), (isDirty || displayValidationMessage) && !!validationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }), isAnnotating && attachmentUrl && (_jsx(AnnotationModal, { imageSrc: attachmentUrl, onClose: clearIsAnnotating, onSave: handleSaveAnnotation })), isCropping && attachmentUrl && (_jsx(CropModal, { imageSrc: attachmentUrl, onClose: clearIsCropping, onSave: handleSaveCrop })), cameraError && (_jsxs(Modal, { isOpen: true, title: "Whoops...", className: "cypress-error-modal", titleClassName: "cypress-error-title", actions: _jsx("button", { type: "button", className: "button ob-button is-primary cypress-close-error-button", onClick: () => setState({ isLoading: false }), autoFocus: true, children: "Okay" }), children: [_jsxs("p", { children: ["An error occurred while attempting to take a photo. Please click", ' ', _jsx("b", { children: "Okay" }), " below to try again. If the problem persists, please contact support."] }), _jsx("div", { className: "content has-margin-top-6", children: _jsx("blockquote", { children: cameraError.toString() }) })] }))] }));
 }
 export default React.memo(FormElementCamera);
-const DisplayImage = React.memo(function DisplayImage({ uploadErrorMessage, isUploading, isLoadingAttachmentUrl, attachmentUrl, loadAttachmentUrlError, isLoading, element, onAnnotate, onCrop, progress, }) {
+const DisplayImage = React.memo(function DisplayImage({ uploadErrorMessage, isUploading, isLoadingAttachmentUrl, attachmentUrl, loadAttachmentUrlError, isLoading, element, readOnly, onAnnotate, onCrop, progress, }) {
     if (uploadErrorMessage) {
         return (_jsxs("div", { className: "figure-content", role: "alert", children: [_jsx("h3", { className: "title is-3", children: "Upload Failed" }), _jsxs("p", { children: ["Your photo failed to upload, please use the ", _jsx("b", { children: "Retry" }), " or", ' ', _jsx("b", { children: "Clear" }), " buttons below."] })] }));
     }
@@ -227,7 +227,7 @@ const DisplayImage = React.memo(function DisplayImage({ uploadErrorMessage, isUp
         return (_jsx("div", { className: "figure-content has-text-centered cypress-camera-loading-image", children: _jsx(OnLoading, { small: true }) }));
     }
     if (attachmentUrl) {
-        return (_jsxs(_Fragment, { children: [_jsx("span", { className: "ob-figure__status", children: _jsx(AttachmentStatus, { isLoadingAttachmentUrl: isLoadingAttachmentUrl, loadAttachmentUrlError: loadAttachmentUrlError, isUploading: isUploading, attachmentUrl: attachmentUrl, progress: progress }) }), _jsx("img", { src: attachmentUrl, className: "cypress-camera-image ob-camera__img", crossOrigin: "anonymous", alt: `${element.label}: Attachment` }), _jsxs("div", { className: "ob-image-file__actions", children: [_jsx("button", { type: "button", className: "button is-primary ob-camera__crop-button cypress-crop-button", onClick: onCrop, disabled: element.readOnly, children: _jsx("span", { className: "icon", children: _jsx(MaterialIcon, { children: "crop" }) }) }), _jsx("button", { type: "button", className: "button is-primary ob-camera__annotate-button cypress-annotate-button", onClick: onAnnotate, disabled: element.readOnly, children: _jsx("span", { className: "icon", children: _jsx(MaterialIcon, { children: "brush" }) }) })] })] }));
+        return (_jsxs(_Fragment, { children: [_jsx("span", { className: "ob-figure__status", children: _jsx(AttachmentStatus, { isLoadingAttachmentUrl: isLoadingAttachmentUrl, loadAttachmentUrlError: loadAttachmentUrlError, isUploading: isUploading, attachmentUrl: attachmentUrl, progress: progress }) }), _jsx("img", { src: attachmentUrl, className: "cypress-camera-image ob-camera__img", crossOrigin: "anonymous", alt: `${element.label}: Attachment` }), _jsxs("div", { className: "ob-image-file__actions", children: [_jsx("button", { type: "button", className: "button is-primary ob-camera__crop-button cypress-crop-button", onClick: onCrop, disabled: readOnly, children: _jsx("span", { className: "icon", children: _jsx(MaterialIcon, { children: "crop" }) }) }), _jsx("button", { type: "button", className: "button is-primary ob-camera__annotate-button cypress-annotate-button", onClick: onAnnotate, disabled: readOnly, children: _jsx("span", { className: "icon", children: _jsx(MaterialIcon, { children: "brush" }) }) })] })] }));
     }
     return (_jsx("div", { className: "figure-content", role: "alert", children: _jsx(ImagePreviewUnavailable, {}) }));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementCamera.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCamera.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport downloadAttachment, {\n  downloadFileLegacy,\n} from '../services/download-file'\nimport OnLoading from '../components/renderer/OnLoading'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport drawTimestampOnCanvas from '../services/drawTimestampOnCanvas'\nimport { FormElementBinaryStorageValue } from '../types/attachments'\nimport useAttachment from '../hooks/attachments/useAttachment'\nimport AnnotationModal, {\n  superimposeAnnotationOnImage,\n} from '../components/renderer/AnnotationModal'\nimport Modal from '../components/renderer/Modal'\nimport {\n  checkIfContentTypeIsImage,\n  prepareNewAttachment,\n  correctFileOrientation,\n} from '../services/attachments'\nimport AttachmentStatus from '../components/renderer/attachments/AttachmentStatus'\nimport { canvasToBlob, urlToBlobAsync } from '../services/blob-utils'\nimport ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport ProgressBar from '../components/renderer/attachments/ProgressBar'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\nimport CropModal from '../components/ImageCropper/CropModal'\nimport { generateCroppedImageBlob } from '../components/ImageCropper'\nimport { PercentCrop } from 'react-image-crop'\n\ntype Props = {\n  id: string\n  element: FormTypes.CameraElement\n  value: FormElementBinaryStorageValue\n  onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementCamera({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const [{ cameraError, isLoading }, setState] = React.useState<{\n    isLoading: boolean\n    cameraError?: Error\n  }>({\n    isLoading: false,\n  })\n  const [isAnnotating, setIsAnnotating, clearIsAnnotating] =\n    useBooleanState(false)\n  const [isCropping, setIsCropping, clearIsCropping] = useBooleanState(false)\n\n  const fileInputRef = React.useRef<HTMLInputElement>(null)\n\n  const clearImage = React.useCallback(() => {\n    onChange(element, {\n      value: undefined,\n    })\n  }, [element, onChange])\n\n  const fileChange = React.useCallback(\n    async (changeEvent: React.ChangeEvent<HTMLInputElement>) => {\n      if (!changeEvent.target || !changeEvent.target.files) {\n        return\n      }\n\n      const file = changeEvent.target.files[0]\n      if (!file) {\n        return\n      }\n\n      setState({\n        isLoading: true,\n      })\n\n      console.log('File selected event', file)\n      try {\n        if (!file.size) {\n          throw new Error('You cannot upload an empty file.')\n        }\n\n        if (!checkIfContentTypeIsImage(file.type)) {\n          throw new Error(\n            `Invalid file type \"${file.type}\". Please select an image.`,\n          )\n        }\n        const result = await correctFileOrientation(\n          file,\n          element.includeTimestampWatermark ? drawTimestampOnCanvas : undefined,\n        )\n\n        if (result instanceof Blob) {\n          onChange(element, {\n            value: prepareNewAttachment(result, file.name, element),\n          })\n        } else {\n          const blob = await canvasToBlob(result)\n          onChange(element, {\n            value: prepareNewAttachment(blob, file.name, element),\n          })\n        }\n\n        setIsDirty()\n        setState({\n          isLoading: false,\n        })\n      } catch (error) {\n        setState({\n          isLoading: false,\n          cameraError: error as Error,\n        })\n      }\n    },\n    [element, onChange, setIsDirty],\n  )\n  const openCamera = React.useCallback(() => {\n    if (window.cordova && navigator.camera && navigator.camera.getPicture) {\n      setState({\n        isLoading: true,\n      })\n      navigator.camera.getPicture(\n        (base64Data: string) => {\n          urlToBlobAsync(`data:image/jpeg;base64,${base64Data}`)\n            .then((blob) => {\n              onChange(element, {\n                value: prepareNewAttachment(blob, 'photo.jpeg', element),\n              })\n              setState({\n                isLoading: false,\n              })\n            })\n            .catch((error) => {\n              setState({\n                cameraError: error,\n                isLoading: false,\n              })\n            })\n        },\n        (error: Error) => {\n          console.warn(\n            'An error occurred while attempting to take a photo',\n            error,\n          )\n          setState({\n            isLoading: false,\n            cameraError: error,\n          })\n        },\n        {\n          quality: 100,\n          destinationType: window.Camera.DestinationType.DATA_URL,\n          sourceType: window.Camera.PictureSourceType.CAMERA,\n          allowEdit: false,\n          encodingType: window.Camera.EncodingType.JPEG,\n          mediaType: window.Camera.MediaType.PICTURE,\n          correctOrientation: true,\n          saveToPhotoAlbum: false,\n          cameraDirection: window.Camera.Direction.BACK,\n        },\n      )\n    } else if (fileInputRef.current) {\n      // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNIZED\n      fileInputRef.current.value = ''\n      fileInputRef.current.click()\n    } else {\n      console.error(\n        'Could not find \"input\" element in Camera component template',\n      )\n    }\n  }, [element, onChange])\n\n  const {\n    isUploading,\n    uploadErrorMessage,\n    isLoadingAttachmentUrl,\n    attachmentUrl,\n    loadAttachmentUrlError,\n    canDownload,\n    progress,\n    contentType,\n  } = useAttachment(\n    value,\n    element,\n    React.useCallback(\n      (id, attachment) => {\n        onChange(element, {\n          value: attachment,\n        })\n      },\n      [element, onChange],\n    ),\n  )\n\n  const handleRetry = React.useMemo(() => {\n    if (!value || typeof value !== 'object') return\n\n    if (value.type === 'ERROR' && value.data) {\n      return () => {\n        onChange(element, {\n          value: {\n            type: 'NEW',\n            _id: value._id,\n            data: value.data,\n            fileName: value.fileName,\n            isPrivate: value.isPrivate,\n          },\n        })\n      }\n    }\n  }, [element, onChange, value])\n\n  const handleDownload = React.useCallback(async () => {\n    if (typeof value === 'string') {\n      await downloadFileLegacy(value, id)\n    } else if (value && value.type !== 'ERROR') {\n      await downloadAttachment(value)\n    }\n  }, [value, id])\n\n  const handleSaveAnnotation = React.useCallback(\n    async (annotationDataUri: string) => {\n      clearIsAnnotating()\n\n      if (typeof attachmentUrl !== 'string') {\n        return\n      }\n\n      setState({\n        isLoading: true,\n      })\n      try {\n        const blob = await superimposeAnnotationOnImage({\n          annotationDataUri,\n          attachmentUrl,\n        })\n        setState({\n          isLoading: false,\n        })\n        if (blob) {\n          const attachment = prepareNewAttachment(blob, 'photo.png', element)\n          onChange(element, {\n            value: attachment,\n          })\n        }\n      } catch (err) {\n        setState({\n          cameraError: err as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsAnnotating, element, onChange],\n  )\n\n  const handleSaveCrop = React.useCallback(\n    async (croppedAreaPercent: PercentCrop) => {\n      clearIsCropping()\n      if (!attachmentUrl) return\n\n      setState({\n        isLoading: true,\n      })\n\n      try {\n        const croppedImage = await generateCroppedImageBlob({\n          croppedAreaPercent,\n          imgSrc: attachmentUrl,\n          fileType: contentType,\n        })\n\n        if (!croppedImage) throw new Error('Cropped image is null')\n        const attachment = prepareNewAttachment(\n          croppedImage,\n          'photo.png',\n          element,\n        )\n        onChange(element, {\n          value: attachment,\n        })\n        setState({\n          isLoading: false,\n        })\n      } catch (error) {\n        setState({\n          cameraError: error as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsCropping, contentType, element, onChange],\n  )\n\n  const progressTooltipRef = React.useRef<HTMLDivElement>(null)\n  return (\n    <>\n      <FormElementLabelContainer\n        className=\"ob-camera\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        <div className=\"control\">\n          {(value || isLoading) && (\n            <>\n              <figure className=\"ob-figure\" ref={progressTooltipRef}>\n                <DisplayImage\n                  isUploading={isUploading}\n                  uploadErrorMessage={uploadErrorMessage}\n                  isLoadingAttachmentUrl={isLoadingAttachmentUrl}\n                  attachmentUrl={attachmentUrl}\n                  loadAttachmentUrlError={loadAttachmentUrlError}\n                  isLoading={isLoading}\n                  element={element}\n                  onAnnotate={setIsAnnotating}\n                  onCrop={setIsCropping}\n                  canDownload={canDownload}\n                  progress={progress}\n                />\n                <ProgressBar isShowing={isUploading} progress={progress} />\n              </figure>\n            </>\n          )}\n\n          <input\n            ref={fileInputRef}\n            className=\"ob-input ob-camera__input-hidden cypress-camera-control\"\n            type=\"file\"\n            accept=\"image/*\"\n            capture=\"environment\"\n            id={id}\n            name={element.name}\n            required={element.required}\n            disabled={element.readOnly}\n            onChange={fileChange}\n            aria-required={element.required}\n          />\n          <div className=\"buttons ob-buttons\">\n            {value ? (\n              <>\n                {uploadErrorMessage && handleRetry && (\n                  <button\n                    type=\"button\"\n                    className=\"button ob-button ob-button__retry is-light cypress-retry-file-button\"\n                    onClick={handleRetry}\n                  >\n                    Retry\n                  </button>\n                )}\n                <button\n                  type=\"button\"\n                  className=\"button ob-button ob-button__clear is-light cypress-clear-camera\"\n                  onClick={clearImage}\n                  disabled={element.readOnly || isLoading}\n                >\n                  Clear\n                </button>\n                {canDownload && (\n                  <button\n                    type=\"button\"\n                    className=\"button ob-button ob-button__download is-primary cypress-download-file-button\"\n                    onClick={handleDownload}\n                  >\n                    <span className=\"icon\">\n                      <MaterialIcon>cloud_download</MaterialIcon>\n                    </span>\n                    <span>&nbsp;Download</span>\n                  </button>\n                )}\n              </>\n            ) : (\n              <button\n                type=\"button\"\n                className=\"button ob-button ob-button__open is-primary cypress-open-camera\"\n                onClick={openCamera}\n                disabled={element.readOnly || isLoading}\n                aria-describedby={ariaDescribedby}\n                onBlur={setIsDirty}\n              >\n                Open Camera\n              </button>\n            )}\n          </div>\n        </div>\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n\n      {isAnnotating && attachmentUrl && (\n        <AnnotationModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsAnnotating}\n          onSave={handleSaveAnnotation}\n        />\n      )}\n\n      {isCropping && attachmentUrl && (\n        <CropModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsCropping}\n          onSave={handleSaveCrop}\n        />\n      )}\n\n      {cameraError && (\n        <Modal\n          isOpen\n          title=\"Whoops...\"\n          className=\"cypress-error-modal\"\n          titleClassName=\"cypress-error-title\"\n          actions={\n            <button\n              type=\"button\"\n              className=\"button ob-button is-primary cypress-close-error-button\"\n              onClick={() => setState({ isLoading: false })}\n              autoFocus\n            >\n              Okay\n            </button>\n          }\n        >\n          <p>\n            An error occurred while attempting to take a photo. Please click{' '}\n            <b>Okay</b> below to try again. If the problem persists, please\n            contact support.\n          </p>\n\n          <div className=\"content has-margin-top-6\">\n            <blockquote>{cameraError.toString()}</blockquote>\n          </div>\n        </Modal>\n      )}\n    </>\n  )\n}\n\nexport default React.memo(FormElementCamera)\n\nconst DisplayImage = React.memo(function DisplayImage({\n  uploadErrorMessage,\n  isUploading,\n  isLoadingAttachmentUrl,\n  attachmentUrl,\n  loadAttachmentUrlError,\n  isLoading,\n  element,\n  onAnnotate,\n  onCrop,\n  progress,\n}: Omit<ReturnType<typeof useAttachment>, 'contentType'> & {\n  element: FormTypes.CameraElement\n  isLoading: boolean\n  onAnnotate: () => void\n  onCrop: () => void\n  progress: number | undefined\n}) {\n  if (uploadErrorMessage) {\n    return (\n      <div className=\"figure-content\" role=\"alert\">\n        <h3 className=\"title is-3\">Upload Failed</h3>\n        <p>\n          Your photo failed to upload, please use the <b>Retry</b> or{' '}\n          <b>Clear</b> buttons below.\n        </p>\n      </div>\n    )\n  }\n\n  if (loadAttachmentUrlError) {\n    return (\n      <div className=\"figure-content\" role=\"alert\">\n        <h3 className=\"title is-3\">Preview Failed</h3>\n        <p>{loadAttachmentUrlError.message}</p>\n      </div>\n    )\n  }\n\n  if (isLoadingAttachmentUrl || isLoading) {\n    return (\n      <div className=\"figure-content has-text-centered cypress-camera-loading-image\">\n        <OnLoading small />\n      </div>\n    )\n  }\n\n  if (attachmentUrl) {\n    return (\n      <>\n        <span className=\"ob-figure__status\">\n          <AttachmentStatus\n            isLoadingAttachmentUrl={isLoadingAttachmentUrl}\n            loadAttachmentUrlError={loadAttachmentUrlError}\n            isUploading={isUploading}\n            attachmentUrl={attachmentUrl}\n            progress={progress}\n          />\n        </span>\n        <img\n          src={attachmentUrl}\n          className=\"cypress-camera-image ob-camera__img\"\n          crossOrigin=\"anonymous\"\n          alt={`${element.label}: Attachment`}\n        />\n        <div className=\"ob-image-file__actions\">\n          <button\n            type=\"button\"\n            className=\"button is-primary ob-camera__crop-button cypress-crop-button\"\n            onClick={onCrop}\n            disabled={element.readOnly}\n          >\n            <span className=\"icon\">\n              <MaterialIcon>crop</MaterialIcon>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            className=\"button is-primary ob-camera__annotate-button cypress-annotate-button\"\n            onClick={onAnnotate}\n            disabled={element.readOnly}\n          >\n            <span className=\"icon\">\n              <MaterialIcon>brush</MaterialIcon>\n            </span>\n          </button>\n        </div>\n      </>\n    )\n  }\n\n  return (\n    <div className=\"figure-content\" role=\"alert\">\n      <ImagePreviewUnavailable />\n    </div>\n  )\n})\n"]}
+{"version":3,"file":"FormElementCamera.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCamera.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport downloadAttachment, {\n  downloadFileLegacy,\n} from '../services/download-file'\nimport OnLoading from '../components/renderer/OnLoading'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport drawTimestampOnCanvas from '../services/drawTimestampOnCanvas'\nimport { FormElementBinaryStorageValue } from '../types/attachments'\nimport useAttachment from '../hooks/attachments/useAttachment'\nimport AnnotationModal, {\n  superimposeAnnotationOnImage,\n} from '../components/renderer/AnnotationModal'\nimport Modal from '../components/renderer/Modal'\nimport {\n  checkIfContentTypeIsImage,\n  prepareNewAttachment,\n  correctFileOrientation,\n} from '../services/attachments'\nimport AttachmentStatus from '../components/renderer/attachments/AttachmentStatus'\nimport { canvasToBlob, urlToBlobAsync } from '../services/blob-utils'\nimport ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport ProgressBar from '../components/renderer/attachments/ProgressBar'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\nimport CropModal from '../components/ImageCropper/CropModal'\nimport { generateCroppedImageBlob } from '../components/ImageCropper'\nimport { PercentCrop } from 'react-image-crop'\n\ntype Props = {\n  id: string\n  element: FormTypes.CameraElement\n  readOnly: boolean\n  value: FormElementBinaryStorageValue\n  onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementCamera({\n  id,\n  element,\n  readOnly,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const [{ cameraError, isLoading }, setState] = React.useState<{\n    isLoading: boolean\n    cameraError?: Error\n  }>({\n    isLoading: false,\n  })\n  const [isAnnotating, setIsAnnotating, clearIsAnnotating] =\n    useBooleanState(false)\n  const [isCropping, setIsCropping, clearIsCropping] = useBooleanState(false)\n\n  const fileInputRef = React.useRef<HTMLInputElement>(null)\n\n  const clearImage = React.useCallback(() => {\n    onChange(element, {\n      value: undefined,\n    })\n  }, [element, onChange])\n\n  const fileChange = React.useCallback(\n    async (changeEvent: React.ChangeEvent<HTMLInputElement>) => {\n      if (!changeEvent.target || !changeEvent.target.files) {\n        return\n      }\n\n      const file = changeEvent.target.files[0]\n      if (!file) {\n        return\n      }\n\n      setState({\n        isLoading: true,\n      })\n\n      console.log('File selected event', file)\n      try {\n        if (!file.size) {\n          throw new Error('You cannot upload an empty file.')\n        }\n\n        if (!checkIfContentTypeIsImage(file.type)) {\n          throw new Error(\n            `Invalid file type \"${file.type}\". Please select an image.`,\n          )\n        }\n        const result = await correctFileOrientation(\n          file,\n          element.includeTimestampWatermark ? drawTimestampOnCanvas : undefined,\n        )\n\n        if (result instanceof Blob) {\n          onChange(element, {\n            value: prepareNewAttachment(result, file.name, element),\n          })\n        } else {\n          const blob = await canvasToBlob(result)\n          onChange(element, {\n            value: prepareNewAttachment(blob, file.name, element),\n          })\n        }\n\n        setIsDirty()\n        setState({\n          isLoading: false,\n        })\n      } catch (error) {\n        setState({\n          isLoading: false,\n          cameraError: error as Error,\n        })\n      }\n    },\n    [element, onChange, setIsDirty],\n  )\n  const openCamera = React.useCallback(() => {\n    if (window.cordova && navigator.camera && navigator.camera.getPicture) {\n      setState({\n        isLoading: true,\n      })\n      navigator.camera.getPicture(\n        (base64Data: string) => {\n          urlToBlobAsync(`data:image/jpeg;base64,${base64Data}`)\n            .then((blob) => {\n              onChange(element, {\n                value: prepareNewAttachment(blob, 'photo.jpeg', element),\n              })\n              setState({\n                isLoading: false,\n              })\n            })\n            .catch((error) => {\n              setState({\n                cameraError: error,\n                isLoading: false,\n              })\n            })\n        },\n        (error: Error) => {\n          console.warn(\n            'An error occurred while attempting to take a photo',\n            error,\n          )\n          setState({\n            isLoading: false,\n            cameraError: error,\n          })\n        },\n        {\n          quality: 100,\n          destinationType: window.Camera.DestinationType.DATA_URL,\n          sourceType: window.Camera.PictureSourceType.CAMERA,\n          allowEdit: false,\n          encodingType: window.Camera.EncodingType.JPEG,\n          mediaType: window.Camera.MediaType.PICTURE,\n          correctOrientation: true,\n          saveToPhotoAlbum: false,\n          cameraDirection: window.Camera.Direction.BACK,\n        },\n      )\n    } else if (fileInputRef.current) {\n      // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNIZED\n      fileInputRef.current.value = ''\n      fileInputRef.current.click()\n    } else {\n      console.error(\n        'Could not find \"input\" element in Camera component template',\n      )\n    }\n  }, [element, onChange])\n\n  const {\n    isUploading,\n    uploadErrorMessage,\n    isLoadingAttachmentUrl,\n    attachmentUrl,\n    loadAttachmentUrlError,\n    canDownload,\n    progress,\n    contentType,\n  } = useAttachment(\n    value,\n    element,\n    React.useCallback(\n      (id, attachment) => {\n        onChange(element, {\n          value: attachment,\n        })\n      },\n      [element, onChange],\n    ),\n  )\n\n  const handleRetry = React.useMemo(() => {\n    if (!value || typeof value !== 'object') return\n\n    if (value.type === 'ERROR' && value.data) {\n      return () => {\n        onChange(element, {\n          value: {\n            type: 'NEW',\n            _id: value._id,\n            data: value.data,\n            fileName: value.fileName,\n            isPrivate: value.isPrivate,\n          },\n        })\n      }\n    }\n  }, [element, onChange, value])\n\n  const handleDownload = React.useCallback(async () => {\n    if (typeof value === 'string') {\n      await downloadFileLegacy(value, id)\n    } else if (value && value.type !== 'ERROR') {\n      await downloadAttachment(value)\n    }\n  }, [value, id])\n\n  const handleSaveAnnotation = React.useCallback(\n    async (annotationDataUri: string) => {\n      clearIsAnnotating()\n\n      if (typeof attachmentUrl !== 'string') {\n        return\n      }\n\n      setState({\n        isLoading: true,\n      })\n      try {\n        const blob = await superimposeAnnotationOnImage({\n          annotationDataUri,\n          attachmentUrl,\n        })\n        setState({\n          isLoading: false,\n        })\n        if (blob) {\n          const attachment = prepareNewAttachment(blob, 'photo.png', element)\n          onChange(element, {\n            value: attachment,\n          })\n        }\n      } catch (err) {\n        setState({\n          cameraError: err as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsAnnotating, element, onChange],\n  )\n\n  const handleSaveCrop = React.useCallback(\n    async (croppedAreaPercent: PercentCrop) => {\n      clearIsCropping()\n      if (!attachmentUrl) return\n\n      setState({\n        isLoading: true,\n      })\n\n      try {\n        const croppedImage = await generateCroppedImageBlob({\n          croppedAreaPercent,\n          imgSrc: attachmentUrl,\n          fileType: contentType,\n        })\n\n        if (!croppedImage) throw new Error('Cropped image is null')\n        const attachment = prepareNewAttachment(\n          croppedImage,\n          'photo.png',\n          element,\n        )\n        onChange(element, {\n          value: attachment,\n        })\n        setState({\n          isLoading: false,\n        })\n      } catch (error) {\n        setState({\n          cameraError: error as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsCropping, contentType, element, onChange],\n  )\n\n  const progressTooltipRef = React.useRef<HTMLDivElement>(null)\n  return (\n    <>\n      <FormElementLabelContainer\n        className=\"ob-camera\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        <div className=\"control\">\n          {(value || isLoading) && (\n            <>\n              <figure className=\"ob-figure\" ref={progressTooltipRef}>\n                <DisplayImage\n                  isUploading={isUploading}\n                  uploadErrorMessage={uploadErrorMessage}\n                  isLoadingAttachmentUrl={isLoadingAttachmentUrl}\n                  attachmentUrl={attachmentUrl}\n                  loadAttachmentUrlError={loadAttachmentUrlError}\n                  isLoading={isLoading}\n                  element={element}\n                  readOnly={readOnly}\n                  onAnnotate={setIsAnnotating}\n                  onCrop={setIsCropping}\n                  canDownload={canDownload}\n                  progress={progress}\n                />\n                <ProgressBar isShowing={isUploading} progress={progress} />\n              </figure>\n            </>\n          )}\n\n          <input\n            ref={fileInputRef}\n            className=\"ob-input ob-camera__input-hidden cypress-camera-control\"\n            type=\"file\"\n            accept=\"image/*\"\n            capture=\"environment\"\n            id={id}\n            name={element.name}\n            required={element.required}\n            disabled={readOnly}\n            onChange={fileChange}\n            aria-required={element.required}\n          />\n          <div className=\"buttons ob-buttons\">\n            {value ? (\n              <>\n                {uploadErrorMessage && handleRetry && (\n                  <button\n                    type=\"button\"\n                    className=\"button ob-button ob-button__retry is-light cypress-retry-file-button\"\n                    onClick={handleRetry}\n                  >\n                    Retry\n                  </button>\n                )}\n                <button\n                  type=\"button\"\n                  className=\"button ob-button ob-button__clear is-light cypress-clear-camera\"\n                  onClick={clearImage}\n                  disabled={readOnly || isLoading}\n                >\n                  Clear\n                </button>\n                {canDownload && (\n                  <button\n                    type=\"button\"\n                    className=\"button ob-button ob-button__download is-primary cypress-download-file-button\"\n                    onClick={handleDownload}\n                  >\n                    <span className=\"icon\">\n                      <MaterialIcon>cloud_download</MaterialIcon>\n                    </span>\n                    <span>&nbsp;Download</span>\n                  </button>\n                )}\n              </>\n            ) : (\n              <button\n                type=\"button\"\n                className=\"button ob-button ob-button__open is-primary cypress-open-camera\"\n                onClick={openCamera}\n                disabled={readOnly || isLoading}\n                aria-describedby={ariaDescribedby}\n                onBlur={setIsDirty}\n              >\n                Open Camera\n              </button>\n            )}\n          </div>\n        </div>\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n\n      {isAnnotating && attachmentUrl && (\n        <AnnotationModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsAnnotating}\n          onSave={handleSaveAnnotation}\n        />\n      )}\n\n      {isCropping && attachmentUrl && (\n        <CropModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsCropping}\n          onSave={handleSaveCrop}\n        />\n      )}\n\n      {cameraError && (\n        <Modal\n          isOpen\n          title=\"Whoops...\"\n          className=\"cypress-error-modal\"\n          titleClassName=\"cypress-error-title\"\n          actions={\n            <button\n              type=\"button\"\n              className=\"button ob-button is-primary cypress-close-error-button\"\n              onClick={() => setState({ isLoading: false })}\n              autoFocus\n            >\n              Okay\n            </button>\n          }\n        >\n          <p>\n            An error occurred while attempting to take a photo. Please click{' '}\n            <b>Okay</b> below to try again. If the problem persists, please\n            contact support.\n          </p>\n\n          <div className=\"content has-margin-top-6\">\n            <blockquote>{cameraError.toString()}</blockquote>\n          </div>\n        </Modal>\n      )}\n    </>\n  )\n}\n\nexport default React.memo(FormElementCamera)\n\nconst DisplayImage = React.memo(function DisplayImage({\n  uploadErrorMessage,\n  isUploading,\n  isLoadingAttachmentUrl,\n  attachmentUrl,\n  loadAttachmentUrlError,\n  isLoading,\n  element,\n  readOnly,\n  onAnnotate,\n  onCrop,\n  progress,\n}: Omit<ReturnType<typeof useAttachment>, 'contentType'> & {\n  element: FormTypes.CameraElement\n  readOnly: boolean\n  isLoading: boolean\n  onAnnotate: () => void\n  onCrop: () => void\n  progress: number | undefined\n}) {\n  if (uploadErrorMessage) {\n    return (\n      <div className=\"figure-content\" role=\"alert\">\n        <h3 className=\"title is-3\">Upload Failed</h3>\n        <p>\n          Your photo failed to upload, please use the <b>Retry</b> or{' '}\n          <b>Clear</b> buttons below.\n        </p>\n      </div>\n    )\n  }\n\n  if (loadAttachmentUrlError) {\n    return (\n      <div className=\"figure-content\" role=\"alert\">\n        <h3 className=\"title is-3\">Preview Failed</h3>\n        <p>{loadAttachmentUrlError.message}</p>\n      </div>\n    )\n  }\n\n  if (isLoadingAttachmentUrl || isLoading) {\n    return (\n      <div className=\"figure-content has-text-centered cypress-camera-loading-image\">\n        <OnLoading small />\n      </div>\n    )\n  }\n\n  if (attachmentUrl) {\n    return (\n      <>\n        <span className=\"ob-figure__status\">\n          <AttachmentStatus\n            isLoadingAttachmentUrl={isLoadingAttachmentUrl}\n            loadAttachmentUrlError={loadAttachmentUrlError}\n            isUploading={isUploading}\n            attachmentUrl={attachmentUrl}\n            progress={progress}\n          />\n        </span>\n        <img\n          src={attachmentUrl}\n          className=\"cypress-camera-image ob-camera__img\"\n          crossOrigin=\"anonymous\"\n          alt={`${element.label}: Attachment`}\n        />\n        <div className=\"ob-image-file__actions\">\n          <button\n            type=\"button\"\n            className=\"button is-primary ob-camera__crop-button cypress-crop-button\"\n            onClick={onCrop}\n            disabled={readOnly}\n          >\n            <span className=\"icon\">\n              <MaterialIcon>crop</MaterialIcon>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            className=\"button is-primary ob-camera__annotate-button cypress-annotate-button\"\n            onClick={onAnnotate}\n            disabled={readOnly}\n          >\n            <span className=\"icon\">\n              <MaterialIcon>brush</MaterialIcon>\n            </span>\n          </button>\n        </div>\n      </>\n    )\n  }\n\n  return (\n    <div className=\"figure-content\" role=\"alert\">\n      <ImagePreviewUnavailable />\n    </div>\n  )\n})\n"]}

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

@@ -4,6 +4,7 @@ import { FormElementValueChangeHandler, FormElementConditionallyShownElement, Is
 type Props = {
     id: string;
     element: FormTypes.CheckboxElement;
+    readOnly: boolean;
     value: unknown;
     onChange: FormElementValueChangeHandler<string[]>;
     displayValidationMessage: boolean;
@@ -11,6 +12,6 @@ type Props = {
     conditionallyShownOptionsElement: FormElementConditionallyShownElement | undefined;
     onUpdateFormElements: UpdateFormElementsHandler;
 } & IsDirtyProps;
-declare function FormElementCheckboxes({ id, element, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptionsElement, onUpdateFormElements, isDirty, setIsDirty, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function FormElementCheckboxes({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptionsElement, onUpdateFormElements, isDirty, setIsDirty, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementCheckboxes>;
 export default _default;

package/dist/form-elements/FormElementCheckBoxes.js

@@ -11,7 +11,7 @@ import ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox';
 import { LookupNotificationContext } from '../hooks/useLookupNotification';
 import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
-function FormElementCheckboxes({ id, element, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptionsElement, onUpdateFormElements, isDirty, setIsDirty, }) {
+function FormElementCheckboxes({ id, element, readOnly, value, onChange, validationMessage, displayValidationMessage, conditionallyShownOptionsElement, onUpdateFormElements, isDirty, setIsDirty, }) {
     var _a;
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const selectedValues = React.useMemo(() => {
@@ -68,9 +68,9 @@ function FormElementCheckboxes({ id, element, value, onChange, validationMessage
     });
     const { isLookingUp } = React.useContext(LookupNotificationContext);
     const isDisplayingValidationMessage = (displayValidationMessage || isDirty) && !!validationMessage && !isLookingUp;
-    return (_jsx("div", { className: "cypress-checkbox-element", children: _jsxs(FormElementLabelContainer, { className: "ob-checkbox", id: id, element: element, required: element.required || !!element.requiredAll, children: [_jsxs(FormElementOptions, { options: element.options, conditionallyShownOptionsElement: conditionallyShownOptionsElement, children: [element.canToggleAll && (_jsx(ToggleAllCheckbox, { id: id, element: element, options: filteredOptions, selected: selectedValues, disabled: element.readOnly, onChange: onChange })), element.buttons ? (_jsx("div", { className: "buttons ob-buttons ob-buttons-radio", role: "group", "aria-labelledby": `${id}-label`, "aria-describedby": ariaDescribedby, children: filteredOptions.map((option, index) => {
+    return (_jsx("div", { className: "cypress-checkbox-element", children: _jsxs(FormElementLabelContainer, { className: "ob-checkbox", id: id, element: element, required: element.required || !!element.requiredAll, children: [_jsxs(FormElementOptions, { options: element.options, conditionallyShownOptionsElement: conditionallyShownOptionsElement, children: [element.canToggleAll && (_jsx(ToggleAllCheckbox, { id: id, element: element, options: filteredOptions, selected: selectedValues, disabled: readOnly, onChange: onChange })), element.buttons ? (_jsx("div", { className: "buttons ob-buttons ob-buttons-radio", role: "group", "aria-labelledby": `${id}-label`, "aria-describedby": ariaDescribedby, children: filteredOptions.map((option, index) => {
                                 const isSelected = selectedValues.includes(option.value);
-                                return (_jsx("div", { className: "ob-button-radio-container", children: _jsx(OptionButton, { element: element, option: option, isSelected: isSelected, onClick: () => changeValues(option.value, isSelected), className: clsx('button ob-button ob-button__input ob-checkbox__button cypress-checkbox-button-control', {
+                                return (_jsx("div", { className: "ob-button-radio-container", children: _jsx(OptionButton, { readOnly: readOnly, option: option, isSelected: isSelected, onClick: () => changeValues(option.value, isSelected), className: clsx('button ob-button ob-button__input ob-checkbox__button cypress-checkbox-button-control', {
                                             'is-primary': isSelected,
                                             'is-light': !isSelected,
                                         }), "aria-describedby": ariaDescribedby, onBlur: () => {
@@ -82,7 +82,7 @@ function FormElementCheckboxes({ id, element, value, onChange, validationMessage
                                 const isSelected = selectedValues.includes(option.value);
                                 return (_jsx("div", { className: "control", children: _jsxs("label", { className: "checkbox ob-checkbox__input-label cypress-checkbox-label", htmlFor: `${id}_${option.value}`, children: [_jsx(Checkbox, { color: "primary", className: "ob-checkbox__input cypress-checkbox-control", classes: {
                                                     checked: 'ob-checkbox__input-checked',
-                                                }, value: option.value, id: `${id}_${option.value}`, checked: isSelected, onChange: () => changeValues(option.value, isSelected), disabled: element.readOnly, edge: "start", inputProps: {
+                                                }, value: option.value, id: `${id}_${option.value}`, checked: isSelected, onChange: () => changeValues(option.value, isSelected), disabled: readOnly, edge: "start", inputProps: {
                                                     'aria-describedby': ariaDescribedby,
                                                 }, onBlur: () => {
                                                     if (index === filteredOptions.length - 1) {

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementCheckBoxes.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCheckBoxes.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Checkbox } from '@mui/material'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n  IsDirtyProps,\n  UpdateFormElementsHandler,\n} from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.CheckboxElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string[]>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n  onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\nfunction FormElementCheckboxes({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  conditionallyShownOptionsElement,\n  onUpdateFormElements,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const selectedValues = React.useMemo(() => {\n    if (!Array.isArray(value)) return []\n    return value\n  }, [value])\n\n  // Need to use a `useEffect` to update the `isDirty` state, because it cannot be done from\n  // inside the below `setState` callback function since it runs from inside another component\n  React.useEffect(() => {\n    if (isDirty) return\n\n    if (\n      // If the element requires a single selection and has a value\n      (element.required && !!selectedValues.length) ||\n      // or all options are selected and requiredAll is true\n      (element.requiredAll && selectedValues.length === element.options?.length)\n    ) {\n      setIsDirty()\n    }\n  }, [\n    element.options?.length,\n    element.required,\n    element.requiredAll,\n    isDirty,\n    selectedValues.length,\n    setIsDirty,\n  ])\n\n  const changeValues = React.useCallback(\n    (toggledValue: string, hasSelectedValue: boolean) => {\n      onChange(element, {\n        value: (existingValue) => {\n          if (hasSelectedValue) {\n            const newValue = (existingValue || []).filter(\n              (existingValue) => existingValue !== toggledValue,\n            )\n            if (newValue.length) {\n              return newValue\n            }\n          } else {\n            const newValue = Array.isArray(existingValue)\n              ? [...existingValue]\n              : []\n            newValue.push(toggledValue)\n            return newValue\n          }\n        },\n      })\n    },\n    [element, onChange],\n  )\n\n  const filteredOptions = useFormElementOptions({\n    element,\n    value,\n    onChange,\n    conditionallyShownOptionsElement,\n    onUpdateFormElements,\n  })\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (displayValidationMessage || isDirty) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-checkbox-element\">\n      <FormElementLabelContainer\n        className=\"ob-checkbox\"\n        id={id}\n        element={element}\n        required={element.required || !!element.requiredAll}\n      >\n        <FormElementOptions\n          options={element.options}\n          conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n        >\n          {element.canToggleAll && (\n            <ToggleAllCheckbox\n              id={id}\n              element={element}\n              options={filteredOptions}\n              selected={selectedValues}\n              disabled={element.readOnly}\n              onChange={onChange}\n            />\n          )}\n          {element.buttons ? (\n            <div\n              className=\"buttons ob-buttons ob-buttons-radio\"\n              role=\"group\"\n              aria-labelledby={`${id}-label`}\n              aria-describedby={ariaDescribedby}\n            >\n              {filteredOptions.map((option, index) => {\n                const isSelected = selectedValues.includes(option.value)\n                return (\n                  <div className=\"ob-button-radio-container\" key={option.value}>\n                    <OptionButton\n                      element={element}\n                      option={option}\n                      isSelected={isSelected}\n                      onClick={() => changeValues(option.value, isSelected)}\n                      className={clsx(\n                        'button ob-button ob-button__input ob-checkbox__button cypress-checkbox-button-control',\n                        {\n                          'is-primary': isSelected,\n                          'is-light': !isSelected,\n                        },\n                      )}\n                      aria-describedby={ariaDescribedby}\n                      onBlur={() => {\n                        if (index === filteredOptions.length - 1) {\n                          setIsDirty()\n                        }\n                      }}\n                    />\n                  </div>\n                )\n              })}\n            </div>\n          ) : (\n            <div\n              role=\"group\"\n              className=\"ob-checkbox-container\"\n              aria-labelledby={`${id}-label`}\n              aria-describedby={ariaDescribedby}\n            >\n              {filteredOptions.map((option, index) => {\n                const isSelected = selectedValues.includes(option.value)\n                return (\n                  <div className=\"control\" key={index}>\n                    <label\n                      className=\"checkbox ob-checkbox__input-label cypress-checkbox-label\"\n                      htmlFor={`${id}_${option.value}`}\n                    >\n                      <Checkbox\n                        color=\"primary\"\n                        className=\"ob-checkbox__input cypress-checkbox-control\"\n                        classes={{\n                          checked: 'ob-checkbox__input-checked',\n                        }}\n                        value={option.value}\n                        id={`${id}_${option.value}`}\n                        checked={isSelected}\n                        onChange={() => changeValues(option.value, isSelected)}\n                        disabled={element.readOnly}\n                        edge=\"start\"\n                        inputProps={{\n                          'aria-describedby': ariaDescribedby,\n                        }}\n                        onBlur={() => {\n                          if (index === filteredOptions.length - 1) {\n                            setIsDirty()\n                          }\n                        }}\n                      />{' '}\n                      {option.label}\n                    </label>\n                  </div>\n                )\n              })}\n            </div>\n          )}\n\n          <LookupButton\n            hasMarginTop\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n            overrideRequiredMessage={undefined}\n          />\n        </FormElementOptions>\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementCheckboxes)\n"]}
+{"version":3,"file":"FormElementCheckBoxes.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCheckBoxes.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Checkbox } from '@mui/material'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n  IsDirtyProps,\n  UpdateFormElementsHandler,\n} from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  id: string\n  element: FormTypes.CheckboxElement\n  readOnly: boolean\n  value: unknown\n  onChange: FormElementValueChangeHandler<string[]>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n  onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\nfunction FormElementCheckboxes({\n  id,\n  element,\n  readOnly,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  conditionallyShownOptionsElement,\n  onUpdateFormElements,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const selectedValues = React.useMemo(() => {\n    if (!Array.isArray(value)) return []\n    return value\n  }, [value])\n\n  // Need to use a `useEffect` to update the `isDirty` state, because it cannot be done from\n  // inside the below `setState` callback function since it runs from inside another component\n  React.useEffect(() => {\n    if (isDirty) return\n\n    if (\n      // If the element requires a single selection and has a value\n      (element.required && !!selectedValues.length) ||\n      // or all options are selected and requiredAll is true\n      (element.requiredAll && selectedValues.length === element.options?.length)\n    ) {\n      setIsDirty()\n    }\n  }, [\n    element.options?.length,\n    element.required,\n    element.requiredAll,\n    isDirty,\n    selectedValues.length,\n    setIsDirty,\n  ])\n\n  const changeValues = React.useCallback(\n    (toggledValue: string, hasSelectedValue: boolean) => {\n      onChange(element, {\n        value: (existingValue) => {\n          if (hasSelectedValue) {\n            const newValue = (existingValue || []).filter(\n              (existingValue) => existingValue !== toggledValue,\n            )\n            if (newValue.length) {\n              return newValue\n            }\n          } else {\n            const newValue = Array.isArray(existingValue)\n              ? [...existingValue]\n              : []\n            newValue.push(toggledValue)\n            return newValue\n          }\n        },\n      })\n    },\n    [element, onChange],\n  )\n\n  const filteredOptions = useFormElementOptions({\n    element,\n    value,\n    onChange,\n    conditionallyShownOptionsElement,\n    onUpdateFormElements,\n  })\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (displayValidationMessage || isDirty) && !!validationMessage && !isLookingUp\n\n  return (\n    <div className=\"cypress-checkbox-element\">\n      <FormElementLabelContainer\n        className=\"ob-checkbox\"\n        id={id}\n        element={element}\n        required={element.required || !!element.requiredAll}\n      >\n        <FormElementOptions\n          options={element.options}\n          conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n        >\n          {element.canToggleAll && (\n            <ToggleAllCheckbox\n              id={id}\n              element={element}\n              options={filteredOptions}\n              selected={selectedValues}\n              disabled={readOnly}\n              onChange={onChange}\n            />\n          )}\n          {element.buttons ? (\n            <div\n              className=\"buttons ob-buttons ob-buttons-radio\"\n              role=\"group\"\n              aria-labelledby={`${id}-label`}\n              aria-describedby={ariaDescribedby}\n            >\n              {filteredOptions.map((option, index) => {\n                const isSelected = selectedValues.includes(option.value)\n                return (\n                  <div className=\"ob-button-radio-container\" key={option.value}>\n                    <OptionButton\n                      readOnly={readOnly}\n                      option={option}\n                      isSelected={isSelected}\n                      onClick={() => changeValues(option.value, isSelected)}\n                      className={clsx(\n                        'button ob-button ob-button__input ob-checkbox__button cypress-checkbox-button-control',\n                        {\n                          'is-primary': isSelected,\n                          'is-light': !isSelected,\n                        },\n                      )}\n                      aria-describedby={ariaDescribedby}\n                      onBlur={() => {\n                        if (index === filteredOptions.length - 1) {\n                          setIsDirty()\n                        }\n                      }}\n                    />\n                  </div>\n                )\n              })}\n            </div>\n          ) : (\n            <div\n              role=\"group\"\n              className=\"ob-checkbox-container\"\n              aria-labelledby={`${id}-label`}\n              aria-describedby={ariaDescribedby}\n            >\n              {filteredOptions.map((option, index) => {\n                const isSelected = selectedValues.includes(option.value)\n                return (\n                  <div className=\"control\" key={index}>\n                    <label\n                      className=\"checkbox ob-checkbox__input-label cypress-checkbox-label\"\n                      htmlFor={`${id}_${option.value}`}\n                    >\n                      <Checkbox\n                        color=\"primary\"\n                        className=\"ob-checkbox__input cypress-checkbox-control\"\n                        classes={{\n                          checked: 'ob-checkbox__input-checked',\n                        }}\n                        value={option.value}\n                        id={`${id}_${option.value}`}\n                        checked={isSelected}\n                        onChange={() => changeValues(option.value, isSelected)}\n                        disabled={readOnly}\n                        edge=\"start\"\n                        inputProps={{\n                          'aria-describedby': ariaDescribedby,\n                        }}\n                        onBlur={() => {\n                          if (index === filteredOptions.length - 1) {\n                            setIsDirty()\n                          }\n                        }}\n                      />{' '}\n                      {option.label}\n                    </label>\n                  </div>\n                )\n              })}\n            </div>\n          )}\n\n          <LookupButton\n            hasMarginTop\n            value={value}\n            validationMessage={validationMessage}\n            lookupButtonConfig={element.lookupButton}\n            overrideRequiredMessage={undefined}\n          />\n        </FormElementOptions>\n\n        {isDisplayingValidationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementCheckboxes)\n"]}

package/dist/form-elements/FormElementCivicaNameRecord.js

@@ -47,7 +47,7 @@ function FormElementCivicaNameRecord({ element, ...props }) {
             abortController.abort();
         };
     }, [props.formId]);
-    return _jsx(FormElementForm, { element: formElement, ...props });
+    return (_jsx(FormElementForm, { element: formElement, readOnlyOverrideChildren: true, ...props }));
 }
 export default React.memo(FormElementCivicaNameRecord);
 //# sourceMappingURL=FormElementCivicaNameRecord.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementCivicaNameRecord.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCivicaNameRecord.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,OAAO,eAA0B,MAAM,mBAAmB,CAAA;AAC1D,OAAO,gCAAgC,MAAM,8CAA8C,CAAA;AAE3F,SAAS,2BAA2B,CAAC,EACnC,OAAO,EACP,GAAG,KAAK,EAGT;IACC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAIrC;QACD,SAAS,EAAE,IAAI;KAChB,CAAC,CAAA;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAA4B,GAAG,EAAE;QAChE,OAAO;YACL,EAAE,EAAE,OAAO,CAAC,EAAE;YACd,iBAAiB,EAAE,KAAK;YACxB,sCAAsC,EAAE,KAAK;YAC7C,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,OAAO,CAAC,IAAI;YAClB,MAAM,EAAE,GAAG;YACX,QAAQ,EAAE,gCAAgC,CACxC,OAAO,EACP,KAAK,CAAC,gBAAgB,CACvB;SACF,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAA;IAErC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ,CAAC;YACP,SAAS,EAAE,IAAI;SAChB,CAAC,CAAA;QACF,MAAM,eAAe,GAAG,IAAI,eAAe,EAAE,CAAA;QAE7C,MAAM,OAAO,GAAG,KAAK,IAAI,EAAE;YACzB,IAAI,CAAC;gBACH,MAAM,KAAK,GAAG,MAAM,WAAW,CAAC,mBAAmB,CACjD,KAAK,CAAC,MAAM,EACZ,eAAe,CAAC,MAAM,CACvB,CAAA;gBACD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;oBACpC,QAAQ,CAAC;wBACP,SAAS,EAAE,KAAK;wBAChB,gBAAgB,EAAE,KAAK;qBACxB,CAAC,CAAA;gBACJ,CAAC;YACH,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;oBACpC,QAAQ,CAAC;wBACP,SAAS,EAAE,KAAK;wBAChB,SAAS,EAAE,KAAc;qBAC1B,CAAC,CAAA;gBACJ,CAAC;YACH,CAAC;QACH,CAAC,CAAA;QACD,OAAO,EAAE,CAAA;QAET,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,KAAK,EAAE,CAAA;QACzB,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAElB,OAAO,KAAC,eAAe,IAAC,OAAO,EAAE,WAAW,KAAM,KAAK,GAAI,CAAA;AAC7D,CAAC;AACD,eAAe,KAAK,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { formService } from '../apps'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementForm, { Props } from './FormElementForm'\nimport generateCivicaNameRecordElements from '../services/generateCivicaNameRecordElements'\n\nfunction FormElementCivicaNameRecord({\n  element,\n  ...props\n}: Omit<Props, 'element'> & {\n  element: FormTypes.CivicaNameRecordElement\n}) {\n  const [state, setState] = React.useState<{\n    isLoading: boolean\n    titleCodeOptions?: FormTypes.ChoiceElementOption[]\n    loadError?: Error\n  }>({\n    isLoading: true,\n  })\n\n  const formElement = React.useMemo<FormTypes.FormFormElement>(() => {\n    return {\n      id: element.id,\n      conditionallyShow: false,\n      requiresAllConditionallyShowPredicates: false,\n      type: 'form',\n      name: element.name,\n      formId: NaN,\n      elements: generateCivicaNameRecordElements(\n        element,\n        state.titleCodeOptions,\n      ),\n    }\n  }, [element, state.titleCodeOptions])\n\n  React.useEffect(() => {\n    setState({\n      isLoading: true,\n    })\n    const abortController = new AbortController()\n\n    const request = async () => {\n      try {\n        const items = await formService.getCivicaTitleCodes(\n          props.formId,\n          abortController.signal,\n        )\n        if (!abortController.signal.aborted) {\n          setState({\n            isLoading: false,\n            titleCodeOptions: items,\n          })\n        }\n      } catch (error) {\n        if (!abortController.signal.aborted) {\n          setState({\n            isLoading: false,\n            loadError: error as Error,\n          })\n        }\n      }\n    }\n    request()\n\n    return () => {\n      abortController.abort()\n    }\n  }, [props.formId])\n\n  return <FormElementForm element={formElement} {...props} />\n}\nexport default React.memo(FormElementCivicaNameRecord)\n"]}
+{"version":3,"file":"FormElementCivicaNameRecord.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCivicaNameRecord.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,OAAO,eAA0B,MAAM,mBAAmB,CAAA;AAC1D,OAAO,gCAAgC,MAAM,8CAA8C,CAAA;AAE3F,SAAS,2BAA2B,CAAC,EACnC,OAAO,EACP,GAAG,KAAK,EAGT;IACC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAIrC;QACD,SAAS,EAAE,IAAI;KAChB,CAAC,CAAA;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAA4B,GAAG,EAAE;QAChE,OAAO;YACL,EAAE,EAAE,OAAO,CAAC,EAAE;YACd,iBAAiB,EAAE,KAAK;YACxB,sCAAsC,EAAE,KAAK;YAC7C,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,OAAO,CAAC,IAAI;YAClB,MAAM,EAAE,GAAG;YACX,QAAQ,EAAE,gCAAgC,CACxC,OAAO,EACP,KAAK,CAAC,gBAAgB,CACvB;SACF,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAA;IAErC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ,CAAC;YACP,SAAS,EAAE,IAAI;SAChB,CAAC,CAAA;QACF,MAAM,eAAe,GAAG,IAAI,eAAe,EAAE,CAAA;QAE7C,MAAM,OAAO,GAAG,KAAK,IAAI,EAAE;YACzB,IAAI,CAAC;gBACH,MAAM,KAAK,GAAG,MAAM,WAAW,CAAC,mBAAmB,CACjD,KAAK,CAAC,MAAM,EACZ,eAAe,CAAC,MAAM,CACvB,CAAA;gBACD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;oBACpC,QAAQ,CAAC;wBACP,SAAS,EAAE,KAAK;wBAChB,gBAAgB,EAAE,KAAK;qBACxB,CAAC,CAAA;gBACJ,CAAC;YACH,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;oBACpC,QAAQ,CAAC;wBACP,SAAS,EAAE,KAAK;wBAChB,SAAS,EAAE,KAAc;qBAC1B,CAAC,CAAA;gBACJ,CAAC;YACH,CAAC;QACH,CAAC,CAAA;QACD,OAAO,EAAE,CAAA;QAET,OAAO,GAAG,EAAE;YACV,eAAe,CAAC,KAAK,EAAE,CAAA;QACzB,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAElB,OAAO,CACL,KAAC,eAAe,IACd,OAAO,EAAE,WAAW,EACpB,wBAAwB,WACpB,KAAK,GACT,CACH,CAAA;AACH,CAAC;AACD,eAAe,KAAK,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { formService } from '../apps'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementForm, { Props } from './FormElementForm'\nimport generateCivicaNameRecordElements from '../services/generateCivicaNameRecordElements'\n\nfunction FormElementCivicaNameRecord({\n  element,\n  ...props\n}: Omit<Props, 'element'> & {\n  element: FormTypes.CivicaNameRecordElement\n}) {\n  const [state, setState] = React.useState<{\n    isLoading: boolean\n    titleCodeOptions?: FormTypes.ChoiceElementOption[]\n    loadError?: Error\n  }>({\n    isLoading: true,\n  })\n\n  const formElement = React.useMemo<FormTypes.FormFormElement>(() => {\n    return {\n      id: element.id,\n      conditionallyShow: false,\n      requiresAllConditionallyShowPredicates: false,\n      type: 'form',\n      name: element.name,\n      formId: NaN,\n      elements: generateCivicaNameRecordElements(\n        element,\n        state.titleCodeOptions,\n      ),\n    }\n  }, [element, state.titleCodeOptions])\n\n  React.useEffect(() => {\n    setState({\n      isLoading: true,\n    })\n    const abortController = new AbortController()\n\n    const request = async () => {\n      try {\n        const items = await formService.getCivicaTitleCodes(\n          props.formId,\n          abortController.signal,\n        )\n        if (!abortController.signal.aborted) {\n          setState({\n            isLoading: false,\n            titleCodeOptions: items,\n          })\n        }\n      } catch (error) {\n        if (!abortController.signal.aborted) {\n          setState({\n            isLoading: false,\n            loadError: error as Error,\n          })\n        }\n      }\n    }\n    request()\n\n    return () => {\n      abortController.abort()\n    }\n  }, [props.formId])\n\n  return (\n    <FormElementForm\n      element={formElement}\n      readOnlyOverrideChildren\n      {...props}\n    />\n  )\n}\nexport default React.memo(FormElementCivicaNameRecord)\n"]}

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

@@ -5,12 +5,13 @@ type Props = {
     formId: number;
     id: string;
     element: FormTypes.CivicaStreetNameElement;
+    readOnly: boolean;
     value: CivicaTypes.CivicaStreetName | undefined;
     displayValidationMessage: boolean;
     validationMessage: string | undefined;
     onChange: FormElementValueChangeHandler<CivicaTypes.CivicaStreetName>;
     autocompleteAttributes?: string;
 } & IsDirtyProps;
-declare function FormElementCivicaStreetName({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function FormElementCivicaStreetName({ formId, id, element, readOnly, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, autocompleteAttributes, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementCivicaStreetName>;
 export default _default;

package/dist/form-elements/FormElementCivicaStreetName.js

@@ -5,7 +5,7 @@ import AutocompleteDropdown from '../components/renderer/AutocompleteDropdown';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import useElementAriaDescribedby from '../hooks/useElementAriaDescribedby';
 import FormElementValidationMessage from '../components/renderer/FormElementValidationMessage';
-function FormElementCivicaStreetName({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, autocompleteAttributes, }) {
+function FormElementCivicaStreetName({ formId, id, element, readOnly, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, autocompleteAttributes, }) {
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const [label, setLabel] = React.useState('');
     const [error, setError] = React.useState();
@@ -35,7 +35,7 @@ function FormElementCivicaStreetName({ formId, id, element, value, displayValida
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
-    return (_jsxs("div", { className: "cypress-civica-street-name-element", children: [_jsx(FormElementLabelContainer, { className: "ob-civica-street-name ob-autocomplete", element: element, id: id, required: element.required, children: _jsx(AutocompleteDropdown, { id: id, label: label, disabled: element.readOnly, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: handleChange, hasError: !!error, onChangeLabel: setLabel, searchDebounceMs: 750, searchMinCharacters: 4, onSearch: handleSearch, isDirty: isDirty, setIsDirty: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes }) }), error && (_jsx(FormElementValidationMessage, { message: error.toString(), className: "cypress-civica-street-name-error-message" }))] }));
+    return (_jsxs("div", { className: "cypress-civica-street-name-element", children: [_jsx(FormElementLabelContainer, { className: "ob-civica-street-name ob-autocomplete", element: element, id: id, required: element.required, children: _jsx(AutocompleteDropdown, { id: id, label: label, disabled: readOnly, placeholder: element.placeholderValue, required: element.required, value: value, validationMessage: validationMessage, displayValidationMessage: displayValidationMessage, onChangeValue: handleChange, hasError: !!error, onChangeLabel: setLabel, searchDebounceMs: 750, searchMinCharacters: 4, onSearch: handleSearch, isDirty: isDirty, setIsDirty: setIsDirty, "aria-describedby": ariaDescribedby, autoComplete: autocompleteAttributes }) }), error && (_jsx(FormElementValidationMessage, { message: error.toString(), className: "cypress-civica-street-name-error-message" }))] }));
 }
 export default React.memo(FormElementCivicaStreetName);
 //# sourceMappingURL=FormElementCivicaStreetName.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementCivicaStreetName.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCivicaStreetName.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,OAAO,oBAAoB,MAAM,6CAA6C,CAAA;AAC9E,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAGxF,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,4BAA4B,MAAM,qDAAqD,CAAA;AAa9F,SAAS,2BAA2B,CAAC,EACnC,MAAM,EACN,EAAE,EACF,OAAO,EACP,KAAK,EACL,wBAAwB,EACxB,iBAAiB,EACjB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,sBAAsB,GAChB;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;IAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAqB,CAAA;IAE7D,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,KAAK,EAAE,UAAkB,EAAE,WAAwB,EAAE,EAAE;QACrD,QAAQ,CAAC,SAAS,CAAC,CAAA;QACnB,MAAM,OAAO,GAAG,MAAM,WAAW,CAAC,uBAAuB,CACvD,MAAM,EACN;YACE,MAAM,EAAE,UAAU;SACnB,EACD,WAAW,CACZ,CAAA;QACD,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;YACzC,KAAK,EAAE,UAAU,CAAC,gBAAgB,IAAI,KAAK,CAAC,QAAQ,EAAE;YACtD,KAAK,EAAE,UAAU,CAAC,eAAe,IAAI,KAAK,CAAC,QAAQ,EAAE;YACrD,IAAI,EAAE,UAAU;SACjB,CAAC,CAAC,CAAA;IACL,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAA;IAED,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,KAAK,EACH,QAA4B,EAC5B,UAAyC,EACzC,EAAE;QACF,QAAQ,CAAC,OAAO,EAAE;YAChB,KAAK,EAAE,UAAU;SAClB,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,QAAQ,EAAE,OAAO,CAAC,CACpB,CAAA;IAED,wEAAwE;IACxE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,QAAQ,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,CAAA;YACvC,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;gBACvB,QAAQ,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAA;YAC1B,CAAC;QACH,CAAC;QACD,uDAAuD;IACzD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CACL,eAAK,SAAS,EAAC,oCAAoC,aACjD,KAAC,yBAAyB,IACxB,SAAS,EAAC,uCAAuC,EACjD,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,OAAO,CAAC,QAAQ,YAE1B,KAAC,oBAAoB,IACnB,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,wBAAwB,EAAE,wBAAwB,EAClD,aAAa,EAAE,YAAY,EAC3B,QAAQ,EAAE,CAAC,CAAC,KAAK,EACjB,aAAa,EAAE,QAAQ,EACvB,gBAAgB,EAAE,GAAG,EACrB,mBAAmB,EAAE,CAAC,EACtB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,sBACJ,eAAe,EACjC,YAAY,EAAE,sBAAsB,GACpC,GACwB,EAE3B,KAAK,IAAI,CACR,KAAC,4BAA4B,IAC3B,OAAO,EAAE,KAAK,CAAC,QAAQ,EAAE,EACzB,SAAS,EAAC,0CAA0C,GACpD,CACH,IACG,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { formService } from '../apps'\n\nimport AutocompleteDropdown from '../components/renderer/AutocompleteDropdown'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormTypes, CivicaTypes } from '@oneblink/types'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  formId: number\n  id: string\n  element: FormTypes.CivicaStreetNameElement\n  value: CivicaTypes.CivicaStreetName | undefined\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  onChange: FormElementValueChangeHandler<CivicaTypes.CivicaStreetName>\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementCivicaStreetName({\n  formId,\n  id,\n  element,\n  value,\n  displayValidationMessage,\n  validationMessage,\n  onChange,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const [label, setLabel] = React.useState('')\n  const [error, setError] = React.useState<Error | undefined>()\n\n  const handleSearch = React.useCallback(\n    async (searchTerm: string, abortSignal: AbortSignal) => {\n      setError(undefined)\n      const results = await formService.searchCivicaStreetNames(\n        formId,\n        {\n          search: searchTerm,\n        },\n        abortSignal,\n      )\n      return results.map((suggestion, index) => ({\n        value: suggestion.formattedAccount || index.toString(),\n        label: suggestion.formattedStreet || index.toString(),\n        data: suggestion,\n      }))\n    },\n    [formId],\n  )\n\n  const handleChange = React.useCallback(\n    async (\n      streetId: string | undefined,\n      streetData?: CivicaTypes.CivicaStreetName,\n    ) => {\n      onChange(element, {\n        value: streetData,\n      })\n    },\n    [onChange, element],\n  )\n\n  // Ensure the label is set if the value is set outside of this component\n  React.useEffect(() => {\n    if (value) {\n      const newLabel = value?.formattedStreet\n      if (label !== newLabel) {\n        setLabel(newLabel || '')\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value])\n\n  return (\n    <div className=\"cypress-civica-street-name-element\">\n      <FormElementLabelContainer\n        className=\"ob-civica-street-name ob-autocomplete\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        <AutocompleteDropdown\n          id={id}\n          label={label}\n          disabled={element.readOnly}\n          placeholder={element.placeholderValue}\n          required={element.required}\n          value={value}\n          validationMessage={validationMessage}\n          displayValidationMessage={displayValidationMessage}\n          onChangeValue={handleChange}\n          hasError={!!error}\n          onChangeLabel={setLabel}\n          searchDebounceMs={750}\n          searchMinCharacters={4}\n          onSearch={handleSearch}\n          isDirty={isDirty}\n          setIsDirty={setIsDirty}\n          aria-describedby={ariaDescribedby}\n          autoComplete={autocompleteAttributes}\n        />\n      </FormElementLabelContainer>\n\n      {error && (\n        <FormElementValidationMessage\n          message={error.toString()}\n          className=\"cypress-civica-street-name-error-message\"\n        />\n      )}\n    </div>\n  )\n}\n\nexport default React.memo(FormElementCivicaStreetName)\n"]}
+{"version":3,"file":"FormElementCivicaStreetName.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCivicaStreetName.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { formService } from '../apps'\n\nimport AutocompleteDropdown from '../components/renderer/AutocompleteDropdown'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormTypes, CivicaTypes } from '@oneblink/types'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ntype Props = {\n  formId: number\n  id: string\n  element: FormTypes.CivicaStreetNameElement\n  readOnly: boolean\n  value: CivicaTypes.CivicaStreetName | undefined\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  onChange: FormElementValueChangeHandler<CivicaTypes.CivicaStreetName>\n  autocompleteAttributes?: string\n} & IsDirtyProps\n\nfunction FormElementCivicaStreetName({\n  formId,\n  id,\n  element,\n  readOnly,\n  value,\n  displayValidationMessage,\n  validationMessage,\n  onChange,\n  isDirty,\n  setIsDirty,\n  autocompleteAttributes,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const [label, setLabel] = React.useState('')\n  const [error, setError] = React.useState<Error | undefined>()\n\n  const handleSearch = React.useCallback(\n    async (searchTerm: string, abortSignal: AbortSignal) => {\n      setError(undefined)\n      const results = await formService.searchCivicaStreetNames(\n        formId,\n        {\n          search: searchTerm,\n        },\n        abortSignal,\n      )\n      return results.map((suggestion, index) => ({\n        value: suggestion.formattedAccount || index.toString(),\n        label: suggestion.formattedStreet || index.toString(),\n        data: suggestion,\n      }))\n    },\n    [formId],\n  )\n\n  const handleChange = React.useCallback(\n    async (\n      streetId: string | undefined,\n      streetData?: CivicaTypes.CivicaStreetName,\n    ) => {\n      onChange(element, {\n        value: streetData,\n      })\n    },\n    [onChange, element],\n  )\n\n  // Ensure the label is set if the value is set outside of this component\n  React.useEffect(() => {\n    if (value) {\n      const newLabel = value?.formattedStreet\n      if (label !== newLabel) {\n        setLabel(newLabel || '')\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value])\n\n  return (\n    <div className=\"cypress-civica-street-name-element\">\n      <FormElementLabelContainer\n        className=\"ob-civica-street-name ob-autocomplete\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        <AutocompleteDropdown\n          id={id}\n          label={label}\n          disabled={readOnly}\n          placeholder={element.placeholderValue}\n          required={element.required}\n          value={value}\n          validationMessage={validationMessage}\n          displayValidationMessage={displayValidationMessage}\n          onChangeValue={handleChange}\n          hasError={!!error}\n          onChangeLabel={setLabel}\n          searchDebounceMs={750}\n          searchMinCharacters={4}\n          onSearch={handleSearch}\n          isDirty={isDirty}\n          setIsDirty={setIsDirty}\n          aria-describedby={ariaDescribedby}\n          autoComplete={autocompleteAttributes}\n        />\n      </FormElementLabelContainer>\n\n      {error && (\n        <FormElementValidationMessage\n          message={error.toString()}\n          className=\"cypress-civica-street-name-error-message\"\n        />\n      )}\n    </div>\n  )\n}\n\nexport default React.memo(FormElementCivicaStreetName)\n"]}

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

@@ -5,6 +5,7 @@ import { attachmentsService } from '../apps';
 interface Props extends IsDirtyProps {
     id: string;
     element: FormTypes.ComplianceElement;
+    readOnly: boolean;
     value: unknown;
     onChange: NestedFormElementValueChangeHandler<Value>;
     displayValidationMessage: boolean;
@@ -19,6 +20,6 @@ export interface Value {
     files?: attachmentsService.Attachment[];
 }
 export declare function stringifyComplianceValue(value: unknown): string;
-declare function FormElementCompliance({ id, element, value, onChange, conditionallyShownOptionsElement, validationMessage, displayValidationMessage, isEven, onUpdateFormElements, isDirty, setIsDirty, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function FormElementCompliance({ id, element, readOnly, value, onChange, conditionallyShownOptionsElement, validationMessage, displayValidationMessage, isEven, onUpdateFormElements, isDirty, setIsDirty, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementCompliance>;
 export default _default;

package/dist/form-elements/FormElementCompliance.js

@@ -26,27 +26,20 @@ export function stringifyComplianceValue(value) {
     const selectedValue = value.value;
     return typeof selectedValue === 'string' ? selectedValue : '';
 }
-function FormElementCompliance({ id, element, value, onChange, conditionallyShownOptionsElement, validationMessage, displayValidationMessage, isEven, onUpdateFormElements, isDirty, setIsDirty, }) {
+function FormElementCompliance({ id, element, readOnly, value, onChange, conditionallyShownOptionsElement, validationMessage, displayValidationMessage, isEven, onUpdateFormElements, isDirty, setIsDirty, }) {
     var _a;
     const ariaDescribedby = useElementAriaDescribedby(id, element);
     const typedValue = value;
     const notesElement = React.useMemo(() => ({
         ...baseElement,
-        readOnly: element.readOnly,
         id: `${element.id}-notes`,
         label: 'Notes',
         name: `${element.name}_notes`,
         type: 'textarea',
         autocompleteAttributes: element.autocompleteAttributes,
-    }), [
-        element.autocompleteAttributes,
-        element.id,
-        element.name,
-        element.readOnly,
-    ]);
+    }), [element.autocompleteAttributes, element.id, element.name]);
     const filesElement = React.useMemo(() => ({
         ...baseElement,
-        readOnly: element.readOnly,
         id: `${element.id}-files`,
         label: 'Media',
         name: `${element.name}_files`,
@@ -55,7 +48,7 @@ function FormElementCompliance({ id, element, value, onChange, conditionallyShow
         minEntries: undefined,
         restrictFileTypes: false,
         storageType: element.storageType,
-    }), [element.id, element.name, element.readOnly, element.storageType]);
+    }), [element.id, element.name, element.storageType]);
     const handleValueChange = React.useCallback((fe, { value: v }) => {
         onChange(fe, {
             value: (existingValue) => {
@@ -139,7 +132,7 @@ function FormElementCompliance({ id, element, value, onChange, conditionallyShow
     const isDisplayingValidationMessage = (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp;
     return (_jsx("div", { className: "cypress-compliance-element", "aria-labelledby": `${id}-label`, "aria-describedby": ariaDescribedby, role: "region", children: _jsx(FormElementLabelContainer, { className: `ob-compliance ${!isEven ? 'even' : 'odd'}`, id: id, element: element, required: element.required, children: _jsxs("div", { className: "ob-compliance__container", children: [_jsx(FormElementOptions, { options: element.options, conditionallyShownOptionsElement: conditionallyShownOptionsElement, children: _jsx("div", { className: "buttons ob-buttons ob-buttons-radio cypress-radio-button-group", role: "group", "aria-labelledby": `${id}-label`, "aria-describedby": ariaDescribedby, children: filteredOptions.map((option) => {
                                 const isSelected = (typedValue === null || typedValue === void 0 ? void 0 : typedValue.value) === option.value;
-                                return (_jsx("div", { className: "ob-button-radio-container", children: _jsx(OptionButton, { element: element, option: option, isSelected: isSelected, onClick: () => {
+                                return (_jsx("div", { className: "ob-button-radio-container", children: _jsx(OptionButton, { readOnly: readOnly, option: option, isSelected: isSelected, onClick: () => {
                                             setIsDirty();
                                             if (!isSelected) {
                                                 handleValueChange(element, {
@@ -150,7 +143,7 @@ function FormElementCompliance({ id, element, value, onChange, conditionallyShow
                                             'is-primary': isSelected,
                                             'is-light': !isSelected,
                                         }), "aria-describedby": ariaDescribedby }) }, option.value));
-                            }) }) }), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage })), _jsxs("div", { className: "buttons ob-buttons ob-buttons-compliance cypress-compliance-button-group", children: [_jsx(ComplianceButton, { isActive: isShowingNotes, icon: "notes", onClick: toggleIsShowingNotes, disabled: element.readOnly || !(typedValue === null || typedValue === void 0 ? void 0 : typedValue.value), children: "Notes" }), _jsx(ComplianceButton, { isActive: isShowingFiles, icon: "perm_media", onClick: toggleIsShowingFiles, disabled: element.readOnly || !(typedValue === null || typedValue === void 0 ? void 0 : typedValue.value), children: "Media" })] }), isShowingNotes && (_jsx("div", { className: "ob-compliance-child-element", children: _jsx(FormElementTextarea, { id: `${id}-notes`, onChange: handleNotesChange, displayValidationMessage: false, validationMessage: undefined, value: typedValue === null || typedValue === void 0 ? void 0 : typedValue.notes, element: notesElement, isDirty: isDirty, setIsDirty: setIsDirty, autocompleteAttributes: (_a = notesElement.autocompleteAttributes) === null || _a === void 0 ? void 0 : _a.join(' ') }) })), isShowingFiles && (_jsx("div", { className: "ob-compliance-child-element", children: _jsx(FormElementFiles, { id: `${id}-files`, onChange: handleFilesChange, displayValidationMessage: false, validationMessage: undefined, value: typedValue === null || typedValue === void 0 ? void 0 : typedValue.files, element: filesElement, isDirty: isDirty, setIsDirty: setIsDirty }) }))] }) }) }));
+                            }) }) }), isDisplayingValidationMessage && (_jsx(FormElementValidationMessage, { message: validationMessage })), _jsxs("div", { className: "buttons ob-buttons ob-buttons-compliance cypress-compliance-button-group", children: [_jsx(ComplianceButton, { isActive: isShowingNotes, icon: "notes", onClick: toggleIsShowingNotes, disabled: readOnly || !(typedValue === null || typedValue === void 0 ? void 0 : typedValue.value), children: "Notes" }), _jsx(ComplianceButton, { isActive: isShowingFiles, icon: "perm_media", onClick: toggleIsShowingFiles, disabled: readOnly || !(typedValue === null || typedValue === void 0 ? void 0 : typedValue.value), children: "Media" })] }), isShowingNotes && (_jsx("div", { className: "ob-compliance-child-element", children: _jsx(FormElementTextarea, { id: `${id}-notes`, onChange: handleNotesChange, displayValidationMessage: false, validationMessage: undefined, value: typedValue === null || typedValue === void 0 ? void 0 : typedValue.notes, element: notesElement, readOnly: readOnly, isDirty: isDirty, setIsDirty: setIsDirty, autocompleteAttributes: (_a = notesElement.autocompleteAttributes) === null || _a === void 0 ? void 0 : _a.join(' ') }) })), isShowingFiles && (_jsx("div", { className: "ob-compliance-child-element", children: _jsx(FormElementFiles, { id: `${id}-files`, onChange: handleFilesChange, displayValidationMessage: false, validationMessage: undefined, value: typedValue === null || typedValue === void 0 ? void 0 : typedValue.files, element: filesElement, readOnly: readOnly, isDirty: isDirty, setIsDirty: setIsDirty }) }))] }) }) }));
 }
 export default React.memo(FormElementCompliance);
 //# sourceMappingURL=FormElementCompliance.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementCompliance.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCompliance.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport useToggleComplianceChildren from '../hooks/useToggleComplianceChildren'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ComplianceButton from './ComplianceButton'\nimport FormElementFiles from './FormElementFiles'\nimport FormElementTextarea from './FormElementTextarea'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n  IsDirtyProps,\n  NestedFormElementValueChangeHandler,\n  UpdateFormElementsHandler,\n} from '../types/form'\nimport { attachmentsService } from '../apps'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ninterface Props extends IsDirtyProps {\n  id: string\n  element: FormTypes.ComplianceElement\n  value: unknown\n  onChange: NestedFormElementValueChangeHandler<Value>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n  isEven?: boolean\n  onUpdateFormElements: UpdateFormElementsHandler\n}\n\nexport interface Value {\n  value?: string\n  notes?: string\n  files?: attachmentsService.Attachment[]\n}\n\nconst baseElement = {\n  conditionallyShow: false,\n  isDataLookup: false,\n  isElementLookup: false,\n  required: false,\n  requiresAllConditionallyShowPredicates: false,\n}\n\nexport function stringifyComplianceValue(value: unknown): string {\n  if (!value) {\n    return ''\n  }\n  const selectedValue = (value as { value: unknown }).value\n  return typeof selectedValue === 'string' ? selectedValue : ''\n}\n\nfunction FormElementCompliance({\n  id,\n  element,\n  value,\n  onChange,\n  conditionallyShownOptionsElement,\n  validationMessage,\n  displayValidationMessage,\n  isEven,\n  onUpdateFormElements,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const typedValue = value as Value | undefined\n\n  const notesElement = React.useMemo<FormTypes.TextareaElement>(\n    () => ({\n      ...baseElement,\n      readOnly: element.readOnly,\n      id: `${element.id}-notes`,\n      label: 'Notes',\n      name: `${element.name}_notes`,\n      type: 'textarea',\n      autocompleteAttributes: element.autocompleteAttributes,\n    }),\n    [\n      element.autocompleteAttributes,\n      element.id,\n      element.name,\n      element.readOnly,\n    ],\n  )\n  const filesElement = React.useMemo<FormTypes.FilesElement>(\n    () => ({\n      ...baseElement,\n      readOnly: element.readOnly,\n      id: `${element.id}-files`,\n      label: 'Media',\n      name: `${element.name}_files`,\n      type: 'files',\n      maxEntries: undefined,\n      minEntries: undefined,\n      restrictFileTypes: false,\n      storageType: element.storageType,\n    }),\n    [element.id, element.name, element.readOnly, element.storageType],\n  )\n\n  const handleValueChange = React.useCallback<\n    FormElementValueChangeHandler<string>\n  >(\n    (fe, { value: v }) => {\n      onChange(fe, {\n        value: (existingValue: Value | undefined) => {\n          let newValue = undefined\n          if (typeof v === 'function') {\n            newValue = v(existingValue ? existingValue.value : undefined)\n          } else {\n            newValue = v\n          }\n          if (!newValue) {\n            return\n          }\n          return {\n            ...existingValue,\n            value: newValue,\n          }\n        },\n        executedLookups: undefined,\n        sectionState: undefined,\n      })\n    },\n    [onChange],\n  )\n  const handleNotesChange = React.useCallback<\n    React.ComponentProps<typeof FormElementTextarea>['onChange']\n  >(\n    (fe, { value: v }) => {\n      onChange(element, {\n        value: (existingValue: Value | undefined) => {\n          if (!existingValue) {\n            return\n          }\n          let newNotes = undefined\n          if (typeof v === 'function') {\n            newNotes = v(existingValue.notes)\n          } else {\n            newNotes = v\n          }\n          return {\n            ...existingValue,\n            notes: newNotes,\n          }\n        },\n        // Preserve the executed lookups state to indicate the\n        // lookup does not need to be executed again if the notes change.\n        executedLookups: (executedLookups) => executedLookups,\n        sectionState: undefined,\n      })\n    },\n    [element, onChange],\n  )\n  const handleFilesChange = React.useCallback<\n    React.ComponentProps<typeof FormElementFiles>['onChange']\n  >(\n    (fe, { value: v }) => {\n      onChange(element, {\n        value: (existingValue: Value | undefined) => {\n          if (!existingValue) {\n            return\n          }\n          let newFiles = undefined\n          if (typeof v === 'function') {\n            newFiles = v(existingValue.files)\n          } else {\n            newFiles = v\n          }\n          return {\n            ...existingValue,\n            files: newFiles && newFiles.length ? newFiles : undefined,\n          }\n        },\n        // Preserve the executed lookups state to indicate the\n        // lookup does not need to be executed again if the files change.\n        executedLookups: (executedLookups) => executedLookups,\n        sectionState: undefined,\n      })\n    },\n    [element, onChange],\n  )\n\n  const [isShowingNotes, toggleIsShowingNotes] = useToggleComplianceChildren(\n    element,\n    !!typedValue?.notes,\n    handleNotesChange,\n  )\n  const [isShowingFiles, toggleIsShowingFiles] = useToggleComplianceChildren(\n    element,\n    !!typedValue?.files,\n    handleFilesChange,\n  )\n\n  const filteredOptions = useFormElementOptions({\n    element,\n    value: typedValue?.value,\n    onChange: handleValueChange,\n    conditionallyShownOptionsElement,\n    onUpdateFormElements,\n  })\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div\n      className=\"cypress-compliance-element\"\n      aria-labelledby={`${id}-label`}\n      aria-describedby={ariaDescribedby}\n      role=\"region\"\n    >\n      <FormElementLabelContainer\n        className={`ob-compliance ${!isEven ? 'even' : 'odd'}`}\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"ob-compliance__container\">\n          <FormElementOptions\n            options={element.options}\n            conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n          >\n            <div\n              className=\"buttons ob-buttons ob-buttons-radio cypress-radio-button-group\"\n              role=\"group\"\n              aria-labelledby={`${id}-label`}\n              aria-describedby={ariaDescribedby}\n            >\n              {filteredOptions.map((option) => {\n                const isSelected = typedValue?.value === option.value\n                return (\n                  <div className=\"ob-button-radio-container\" key={option.value}>\n                    <OptionButton\n                      element={element}\n                      option={option}\n                      isSelected={isSelected}\n                      onClick={() => {\n                        setIsDirty()\n                        if (!isSelected) {\n                          handleValueChange(element, {\n                            value: option.value,\n                          })\n                        }\n                      }}\n                      className={clsx(\n                        'button ob-button ob-button__input ob-radio__button cypress-radio-button-control',\n                        {\n                          'is-primary': isSelected,\n                          'is-light': !isSelected,\n                        },\n                      )}\n                      aria-describedby={ariaDescribedby}\n                    />\n                  </div>\n                )\n              })}\n            </div>\n          </FormElementOptions>\n          {isDisplayingValidationMessage && (\n            <FormElementValidationMessage message={validationMessage} />\n          )}\n          <div className=\"buttons ob-buttons ob-buttons-compliance cypress-compliance-button-group\">\n            <ComplianceButton\n              isActive={isShowingNotes}\n              icon=\"notes\"\n              onClick={toggleIsShowingNotes}\n              disabled={element.readOnly || !typedValue?.value}\n            >\n              Notes\n            </ComplianceButton>\n            <ComplianceButton\n              isActive={isShowingFiles}\n              icon=\"perm_media\"\n              onClick={toggleIsShowingFiles}\n              disabled={element.readOnly || !typedValue?.value}\n            >\n              Media\n            </ComplianceButton>\n          </div>\n          {isShowingNotes && (\n            <div className=\"ob-compliance-child-element\">\n              <FormElementTextarea\n                id={`${id}-notes`}\n                onChange={handleNotesChange}\n                displayValidationMessage={false}\n                validationMessage={undefined}\n                value={typedValue?.notes}\n                element={notesElement}\n                isDirty={isDirty}\n                setIsDirty={setIsDirty}\n                autocompleteAttributes={notesElement.autocompleteAttributes?.join(\n                  ' ',\n                )}\n              />\n            </div>\n          )}\n          {isShowingFiles && (\n            <div className=\"ob-compliance-child-element\">\n              <FormElementFiles\n                id={`${id}-files`}\n                onChange={handleFilesChange}\n                displayValidationMessage={false}\n                validationMessage={undefined}\n                value={typedValue?.files}\n                element={filesElement}\n                isDirty={isDirty}\n                setIsDirty={setIsDirty}\n              />\n            </div>\n          )}\n        </div>\n      </FormElementLabelContainer>\n    </div>\n  )\n}\nexport default React.memo(FormElementCompliance)\n"]}
+{"version":3,"file":"FormElementCompliance.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCompliance.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport useToggleComplianceChildren from '../hooks/useToggleComplianceChildren'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ComplianceButton from './ComplianceButton'\nimport FormElementFiles from './FormElementFiles'\nimport FormElementTextarea from './FormElementTextarea'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n  IsDirtyProps,\n  NestedFormElementValueChangeHandler,\n  UpdateFormElementsHandler,\n} from '../types/form'\nimport { attachmentsService } from '../apps'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\n\ninterface Props extends IsDirtyProps {\n  id: string\n  element: FormTypes.ComplianceElement\n  readOnly: boolean\n  value: unknown\n  onChange: NestedFormElementValueChangeHandler<Value>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n  isEven?: boolean\n  onUpdateFormElements: UpdateFormElementsHandler\n}\n\nexport interface Value {\n  value?: string\n  notes?: string\n  files?: attachmentsService.Attachment[]\n}\n\nconst baseElement = {\n  conditionallyShow: false,\n  isDataLookup: false,\n  isElementLookup: false,\n  required: false,\n  requiresAllConditionallyShowPredicates: false,\n}\n\nexport function stringifyComplianceValue(value: unknown): string {\n  if (!value) {\n    return ''\n  }\n  const selectedValue = (value as { value: unknown }).value\n  return typeof selectedValue === 'string' ? selectedValue : ''\n}\n\nfunction FormElementCompliance({\n  id,\n  element,\n  readOnly,\n  value,\n  onChange,\n  conditionallyShownOptionsElement,\n  validationMessage,\n  displayValidationMessage,\n  isEven,\n  onUpdateFormElements,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const typedValue = value as Value | undefined\n\n  const notesElement = React.useMemo<FormTypes.TextareaElement>(\n    () => ({\n      ...baseElement,\n      id: `${element.id}-notes`,\n      label: 'Notes',\n      name: `${element.name}_notes`,\n      type: 'textarea',\n      autocompleteAttributes: element.autocompleteAttributes,\n    }),\n    [element.autocompleteAttributes, element.id, element.name],\n  )\n  const filesElement = React.useMemo<FormTypes.FilesElement>(\n    () => ({\n      ...baseElement,\n      id: `${element.id}-files`,\n      label: 'Media',\n      name: `${element.name}_files`,\n      type: 'files',\n      maxEntries: undefined,\n      minEntries: undefined,\n      restrictFileTypes: false,\n      storageType: element.storageType,\n    }),\n    [element.id, element.name, element.storageType],\n  )\n\n  const handleValueChange = React.useCallback<\n    FormElementValueChangeHandler<string>\n  >(\n    (fe, { value: v }) => {\n      onChange(fe, {\n        value: (existingValue: Value | undefined) => {\n          let newValue = undefined\n          if (typeof v === 'function') {\n            newValue = v(existingValue ? existingValue.value : undefined)\n          } else {\n            newValue = v\n          }\n          if (!newValue) {\n            return\n          }\n          return {\n            ...existingValue,\n            value: newValue,\n          }\n        },\n        executedLookups: undefined,\n        sectionState: undefined,\n      })\n    },\n    [onChange],\n  )\n  const handleNotesChange = React.useCallback<\n    React.ComponentProps<typeof FormElementTextarea>['onChange']\n  >(\n    (fe, { value: v }) => {\n      onChange(element, {\n        value: (existingValue: Value | undefined) => {\n          if (!existingValue) {\n            return\n          }\n          let newNotes = undefined\n          if (typeof v === 'function') {\n            newNotes = v(existingValue.notes)\n          } else {\n            newNotes = v\n          }\n          return {\n            ...existingValue,\n            notes: newNotes,\n          }\n        },\n        // Preserve the executed lookups state to indicate the\n        // lookup does not need to be executed again if the notes change.\n        executedLookups: (executedLookups) => executedLookups,\n        sectionState: undefined,\n      })\n    },\n    [element, onChange],\n  )\n  const handleFilesChange = React.useCallback<\n    React.ComponentProps<typeof FormElementFiles>['onChange']\n  >(\n    (fe, { value: v }) => {\n      onChange(element, {\n        value: (existingValue: Value | undefined) => {\n          if (!existingValue) {\n            return\n          }\n          let newFiles = undefined\n          if (typeof v === 'function') {\n            newFiles = v(existingValue.files)\n          } else {\n            newFiles = v\n          }\n          return {\n            ...existingValue,\n            files: newFiles && newFiles.length ? newFiles : undefined,\n          }\n        },\n        // Preserve the executed lookups state to indicate the\n        // lookup does not need to be executed again if the files change.\n        executedLookups: (executedLookups) => executedLookups,\n        sectionState: undefined,\n      })\n    },\n    [element, onChange],\n  )\n\n  const [isShowingNotes, toggleIsShowingNotes] = useToggleComplianceChildren(\n    element,\n    !!typedValue?.notes,\n    handleNotesChange,\n  )\n  const [isShowingFiles, toggleIsShowingFiles] = useToggleComplianceChildren(\n    element,\n    !!typedValue?.files,\n    handleFilesChange,\n  )\n\n  const filteredOptions = useFormElementOptions({\n    element,\n    value: typedValue?.value,\n    onChange: handleValueChange,\n    conditionallyShownOptionsElement,\n    onUpdateFormElements,\n  })\n\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n  const isDisplayingValidationMessage =\n    (isDirty || displayValidationMessage) && !!validationMessage && !isLookingUp\n\n  return (\n    <div\n      className=\"cypress-compliance-element\"\n      aria-labelledby={`${id}-label`}\n      aria-describedby={ariaDescribedby}\n      role=\"region\"\n    >\n      <FormElementLabelContainer\n        className={`ob-compliance ${!isEven ? 'even' : 'odd'}`}\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"ob-compliance__container\">\n          <FormElementOptions\n            options={element.options}\n            conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n          >\n            <div\n              className=\"buttons ob-buttons ob-buttons-radio cypress-radio-button-group\"\n              role=\"group\"\n              aria-labelledby={`${id}-label`}\n              aria-describedby={ariaDescribedby}\n            >\n              {filteredOptions.map((option) => {\n                const isSelected = typedValue?.value === option.value\n                return (\n                  <div className=\"ob-button-radio-container\" key={option.value}>\n                    <OptionButton\n                      readOnly={readOnly}\n                      option={option}\n                      isSelected={isSelected}\n                      onClick={() => {\n                        setIsDirty()\n                        if (!isSelected) {\n                          handleValueChange(element, {\n                            value: option.value,\n                          })\n                        }\n                      }}\n                      className={clsx(\n                        'button ob-button ob-button__input ob-radio__button cypress-radio-button-control',\n                        {\n                          'is-primary': isSelected,\n                          'is-light': !isSelected,\n                        },\n                      )}\n                      aria-describedby={ariaDescribedby}\n                    />\n                  </div>\n                )\n              })}\n            </div>\n          </FormElementOptions>\n          {isDisplayingValidationMessage && (\n            <FormElementValidationMessage message={validationMessage} />\n          )}\n          <div className=\"buttons ob-buttons ob-buttons-compliance cypress-compliance-button-group\">\n            <ComplianceButton\n              isActive={isShowingNotes}\n              icon=\"notes\"\n              onClick={toggleIsShowingNotes}\n              disabled={readOnly || !typedValue?.value}\n            >\n              Notes\n            </ComplianceButton>\n            <ComplianceButton\n              isActive={isShowingFiles}\n              icon=\"perm_media\"\n              onClick={toggleIsShowingFiles}\n              disabled={readOnly || !typedValue?.value}\n            >\n              Media\n            </ComplianceButton>\n          </div>\n          {isShowingNotes && (\n            <div className=\"ob-compliance-child-element\">\n              <FormElementTextarea\n                id={`${id}-notes`}\n                onChange={handleNotesChange}\n                displayValidationMessage={false}\n                validationMessage={undefined}\n                value={typedValue?.notes}\n                element={notesElement}\n                readOnly={readOnly}\n                isDirty={isDirty}\n                setIsDirty={setIsDirty}\n                autocompleteAttributes={notesElement.autocompleteAttributes?.join(\n                  ' ',\n                )}\n              />\n            </div>\n          )}\n          {isShowingFiles && (\n            <div className=\"ob-compliance-child-element\">\n              <FormElementFiles\n                id={`${id}-files`}\n                onChange={handleFilesChange}\n                displayValidationMessage={false}\n                validationMessage={undefined}\n                value={typedValue?.files}\n                element={filesElement}\n                readOnly={readOnly}\n                isDirty={isDirty}\n                setIsDirty={setIsDirty}\n              />\n            </div>\n          )}\n        </div>\n      </FormElementLabelContainer>\n    </div>\n  )\n}\nexport default React.memo(FormElementCompliance)\n"]}