@oneblink/apps-react 2.10.0-beta.2 → 2.10.0-beta.4

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 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 } from '../types/form'\nimport ProgressBar from '../components/renderer/attachments/ProgressBar'\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}\n\nfunction FormElementCamera({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const [{ cameraError, isLoading }, setState] = React.useState<{\n    isLoading: boolean\n    cameraError?: Error\n  }>({\n    isLoading: false,\n  })\n  const [isDirty, setIsDirty] = useBooleanState(false)\n  const [isAnnotating, setIsAnnotating, clearIsAnnotating] =\n    useBooleanState(false)\n  const fileInputRef = React.useRef<HTMLInputElement>(null)\n\n  const clearImage = React.useCallback(() => {\n    onChange(element, undefined)\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 (!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, prepareNewAttachment(result, file.name, element))\n        } else {\n          const blob = await canvasToBlob(result)\n          onChange(element, prepareNewAttachment(blob, file.name, element))\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(\n                element,\n                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    isLoadingImageUrl,\n    imageUrl,\n    loadImageUrlError,\n    canDownload,\n    progress,\n  } = useAttachment(\n    value,\n    element,\n    React.useCallback(\n      (id, attachment) => {\n        onChange(element, attachment)\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          type: 'NEW',\n          _id: value._id,\n          data: value.data,\n          fileName: value.fileName,\n          isPrivate: value.isPrivate,\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    (annotationDataUri: string) => {\n      clearIsAnnotating()\n\n      if (typeof imageUrl !== 'string') {\n        return\n      }\n\n      setState({\n        isLoading: true,\n      })\n\n      const canvas = document.createElement('canvas')\n      const ctx = canvas.getContext('2d')\n      if (!ctx) {\n        return\n      }\n\n      const image = new Image()\n      image.onload = function () {\n        canvas.width = image.width\n        canvas.height = image.height\n\n        ctx.drawImage(image, 0, 0)\n\n        const annotationImage = new Image()\n        annotationImage.onload = function () {\n          ctx.drawImage(annotationImage, 0, 0, canvas.width, canvas.height)\n\n          try {\n            canvasToBlob(canvas)\n              .then((blob) => {\n                const attachment = prepareNewAttachment(\n                  blob,\n                  'photo.png',\n                  element,\n                )\n                onChange(element, attachment)\n                setState({\n                  isLoading: false,\n                })\n              })\n              .catch((error) => {\n                setState({\n                  cameraError: error,\n                  isLoading: false,\n                })\n              })\n          } catch (error) {\n            setState({\n              cameraError: error as Error,\n              isLoading: false,\n            })\n          }\n        }\n        annotationImage.src = annotationDataUri\n      }\n      image.setAttribute('crossorigin', 'anonymous')\n      image.src = imageUrl\n    },\n    [clearIsAnnotating, element, imageUrl, 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                  isLoadingImageUrl={isLoadingImageUrl}\n                  imageUrl={imageUrl}\n                  loadImageUrlError={loadImageUrlError}\n                  isLoading={isLoading}\n                  element={element}\n                  onAnnotate={setIsAnnotating}\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          />\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                      <i className=\"material-icons\">cloud_download</i>\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              >\n                Open Camera\n              </button>\n            )}\n          </div>\n        </div>\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n\n      {isAnnotating && imageUrl && (\n        <AnnotationModal\n          imageSrc={imageUrl}\n          onClose={clearIsAnnotating}\n          onSave={handleSaveAnnotation}\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            >\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  isLoadingImageUrl,\n  imageUrl,\n  loadImageUrlError,\n  isLoading,\n  element,\n  onAnnotate,\n  progress,\n}: ReturnType<typeof useAttachment> & {\n  element: FormTypes.CameraElement\n  isLoading: boolean\n  onAnnotate: () => void\n  progress: number | undefined\n}) {\n  if (uploadErrorMessage) {\n    return (\n      <div className=\"figure-content\">\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 (loadImageUrlError) {\n    return (\n      <div className=\"figure-content\">\n        <h3 className=\"title is-3\">Preview Failed</h3>\n        <p>{loadImageUrlError.message}</p>\n      </div>\n    )\n  }\n\n  if (isLoadingImageUrl || 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 (imageUrl) {\n    return (\n      <>\n        <span className=\"ob-figure__status\">\n          <AttachmentStatus\n            isLoadingImageUrl={isLoadingImageUrl}\n            loadImageUrlError={loadImageUrlError}\n            isUploading={isUploading}\n            imageUrl={imageUrl}\n            progress={progress}\n          />\n        </span>\n        <img\n          src={imageUrl}\n          className=\"cypress-camera-image ob-camera__img\"\n          crossOrigin=\"anonymous\"\n        />\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            <i className=\"material-icons\">brush</i>\n          </span>\n        </button>\n      </>\n    )\n  }\n\n  return (\n    <div className=\"figure-content\">\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 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'\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 [{ 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 fileInputRef = React.useRef<HTMLInputElement>(null)\n\n  const clearImage = React.useCallback(() => {\n    onChange(element, undefined)\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 (!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, prepareNewAttachment(result, file.name, element))\n        } else {\n          const blob = await canvasToBlob(result)\n          onChange(element, prepareNewAttachment(blob, file.name, element))\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(\n                element,\n                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    isLoadingImageUrl,\n    imageUrl,\n    loadImageUrlError,\n    canDownload,\n    progress,\n  } = useAttachment(\n    value,\n    element,\n    React.useCallback(\n      (id, attachment) => {\n        onChange(element, attachment)\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          type: 'NEW',\n          _id: value._id,\n          data: value.data,\n          fileName: value.fileName,\n          isPrivate: value.isPrivate,\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    (annotationDataUri: string) => {\n      clearIsAnnotating()\n\n      if (typeof imageUrl !== 'string') {\n        return\n      }\n\n      setState({\n        isLoading: true,\n      })\n\n      const canvas = document.createElement('canvas')\n      const ctx = canvas.getContext('2d')\n      if (!ctx) {\n        return\n      }\n\n      const image = new Image()\n      image.onload = function () {\n        canvas.width = image.width\n        canvas.height = image.height\n\n        ctx.drawImage(image, 0, 0)\n\n        const annotationImage = new Image()\n        annotationImage.onload = function () {\n          ctx.drawImage(annotationImage, 0, 0, canvas.width, canvas.height)\n\n          try {\n            canvasToBlob(canvas)\n              .then((blob) => {\n                const attachment = prepareNewAttachment(\n                  blob,\n                  'photo.png',\n                  element,\n                )\n                onChange(element, attachment)\n                setState({\n                  isLoading: false,\n                })\n              })\n              .catch((error) => {\n                setState({\n                  cameraError: error,\n                  isLoading: false,\n                })\n              })\n          } catch (error) {\n            setState({\n              cameraError: error as Error,\n              isLoading: false,\n            })\n          }\n        }\n        annotationImage.src = annotationDataUri\n      }\n      image.setAttribute('crossorigin', 'anonymous')\n      image.src = imageUrl\n    },\n    [clearIsAnnotating, element, imageUrl, 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                  isLoadingImageUrl={isLoadingImageUrl}\n                  imageUrl={imageUrl}\n                  loadImageUrlError={loadImageUrlError}\n                  isLoading={isLoading}\n                  element={element}\n                  onAnnotate={setIsAnnotating}\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          />\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                      <i className=\"material-icons\">cloud_download</i>\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              >\n                Open Camera\n              </button>\n            )}\n          </div>\n        </div>\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n\n      {isAnnotating && imageUrl && (\n        <AnnotationModal\n          imageSrc={imageUrl}\n          onClose={clearIsAnnotating}\n          onSave={handleSaveAnnotation}\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            >\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  isLoadingImageUrl,\n  imageUrl,\n  loadImageUrlError,\n  isLoading,\n  element,\n  onAnnotate,\n  progress,\n}: ReturnType<typeof useAttachment> & {\n  element: FormTypes.CameraElement\n  isLoading: boolean\n  onAnnotate: () => void\n  progress: number | undefined\n}) {\n  if (uploadErrorMessage) {\n    return (\n      <div className=\"figure-content\">\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 (loadImageUrlError) {\n    return (\n      <div className=\"figure-content\">\n        <h3 className=\"title is-3\">Preview Failed</h3>\n        <p>{loadImageUrlError.message}</p>\n      </div>\n    )\n  }\n\n  if (isLoadingImageUrl || 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 (imageUrl) {\n    return (\n      <>\n        <span className=\"ob-figure__status\">\n          <AttachmentStatus\n            isLoadingImageUrl={isLoadingImageUrl}\n            loadImageUrlError={loadImageUrlError}\n            isUploading={isUploading}\n            imageUrl={imageUrl}\n            progress={progress}\n          />\n        </span>\n        <img\n          src={imageUrl}\n          className=\"cypress-camera-image ob-camera__img\"\n          crossOrigin=\"anonymous\"\n        />\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            <i className=\"material-icons\">brush</i>\n          </span>\n        </button>\n      </>\n    )\n  }\n\n  return (\n    <div className=\"figure-content\">\n      <ImagePreviewUnavailable />\n    </div>\n  )\n})\n"]}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FormTypes, CivicaTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
+import { FormElementValueChangeHandler, IsDirtyProps } from '../types/form';
 declare type Props = {
     formId: number;
     id: string;
@@ -9,7 +9,7 @@ declare type Props = {
     displayValidationMessage: boolean;
     validationMessage: string | undefined;
     onChange: FormElementValueChangeHandler<CivicaTypes.CivicaStreetName>;
-};
-declare function FormElementCivicaStreetName({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, }: Props): JSX.Element;
+} & IsDirtyProps;
+declare function FormElementCivicaStreetName({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementCivicaStreetName>;
 export default _default;

package/dist/form-elements/FormElementCivicaStreetName.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { formService } from '@oneblink/apps';
 import AutocompleteDropdown from '../components/renderer/AutocompleteDropdown';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-function FormElementCivicaStreetName({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, }) {
+function FormElementCivicaStreetName({ formId, id, element, value, displayValidationMessage, validationMessage, onChange, isDirty, setIsDirty, }) {
     const [label, setLabel] = React.useState('');
     const [error, setError] = React.useState();
     const handleSearch = React.useCallback(async (searchTerm, abortSignal) => {
@@ -31,7 +31,7 @@ function FormElementCivicaStreetName({ formId, id, element, value, displayValida
     }, [value]);
     return (React.createElement("div", { className: "cypress-civica-street-name-element" },
         React.createElement(FormElementLabelContainer, { className: "ob-civica-street-name ob-autocomplete", element: element, id: id, required: element.required },
-            React.createElement(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 })),
+            React.createElement(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 })),
         error && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
             React.createElement("div", { className: "has-text-danger ob-error__text cypress-civica-street-name-error-message" }, error.toString())))));
 }

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,gBAAgB,CAAA;AAE5C,OAAO,oBAAoB,MAAM,6CAA6C,CAAA;AAC9E,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAcxF,SAAS,2BAA2B,CAAC,EACnC,MAAM,EACN,EAAE,EACF,OAAO,EACP,KAAK,EACL,wBAAwB,EACxB,iBAAiB,EACjB,QAAQ,GACF;IACN,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,WAAW,EAAE,EAAE;QACxC,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,UAAU,CAAC,CAAA;IAC/B,CAAC,EACD,CAAC,QAAQ,EAAE,OAAO,CAAC,CACpB,CAAA;IAED,wEAAwE;IACxE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,KAAK,EAAE;YACT,MAAM,QAAQ,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,CAAA;YACvC,IAAI,KAAK,KAAK,QAAQ,EAAE;gBACtB,QAAQ,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAA;aACzB;SACF;QACD,uDAAuD;IACzD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CACL,6BAAK,SAAS,EAAC,oCAAoC;QACjD,oBAAC,yBAAyB,IACxB,SAAS,EAAC,uCAAuC,EACjD,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,oBAAC,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,GACtB,CACwB;QAE3B,KAAK,IAAI,CACR,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;YAC5C,6BAAK,SAAS,EAAC,yEAAyE,IACrF,KAAK,CAAC,QAAQ,EAAE,CACb,CACF,CACP,CACG,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { formService } from '@oneblink/apps'\n\nimport AutocompleteDropdown from '../components/renderer/AutocompleteDropdown'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormTypes, CivicaTypes } from '@oneblink/types'\nimport { FormElementValueChangeHandler } from '../types/form'\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}\n\nfunction FormElementCivicaStreetName({\n  formId,\n  id,\n  element,\n  value,\n  displayValidationMessage,\n  validationMessage,\n  onChange,\n}: Props) {\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) => {\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, streetData)\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        />\n      </FormElementLabelContainer>\n\n      {error && (\n        <div role=\"alert\" className=\"has-margin-top-8\">\n          <div className=\"has-text-danger ob-error__text cypress-civica-street-name-error-message\">\n            {error.toString()}\n          </div>\n        </div>\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 '@oneblink/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'\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} & IsDirtyProps\n\nfunction FormElementCivicaStreetName({\n  formId,\n  id,\n  element,\n  value,\n  displayValidationMessage,\n  validationMessage,\n  onChange,\n  isDirty,\n  setIsDirty,\n}: Props) {\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) => {\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, streetData)\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        />\n      </FormElementLabelContainer>\n\n      {error && (\n        <div role=\"alert\" className=\"has-margin-top-8\">\n          <div className=\"has-text-danger ob-error__text cypress-civica-street-name-error-message\">\n            {error.toString()}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default React.memo(FormElementCivicaStreetName)\n"]}

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler, FormElementConditionallyShownElement } from '../types/form';
+import { FormElementValueChangeHandler, FormElementConditionallyShownElement, IsDirtyProps } from '../types/form';
 import { attachmentsService } from '@oneblink/apps';
-interface Props {
+interface Props extends IsDirtyProps {
     id: string;
     element: FormTypes.ComplianceElement;
     value: unknown;
@@ -17,6 +17,6 @@ export interface Value {
     notes?: string;
     files?: attachmentsService.Attachment[];
 }
-declare function FormElementCompliance({ id, element, value, onChange, conditionallyShownOptionsElement, validationMessage, displayValidationMessage, isEven, }: Props): JSX.Element;
+declare function FormElementCompliance({ id, element, value, onChange, conditionallyShownOptionsElement, validationMessage, displayValidationMessage, isEven, isDirty, setIsDirty, }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementCompliance>;
 export default _default;

package/dist/form-elements/FormElementCompliance.js

@@ -2,7 +2,6 @@ import * as React from 'react';
 import clsx from 'clsx';
 import FormElementOptions from '../components/renderer/FormElementOptions';
 import useFormElementOptions from '../hooks/useFormElementOptions';
-import useBooleanState from '../hooks/useBooleanState';
 import useToggleComplianceChildren from '../hooks/useToggleComplianceChildren';
 import OptionButton from './OptionButton';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
@@ -16,7 +15,7 @@ const baseElement = {
     required: false,
     requiresAllConditionallyShowPredicates: false,
 };
-function FormElementCompliance({ id, element, value, onChange, conditionallyShownOptionsElement, validationMessage, displayValidationMessage, isEven, }) {
+function FormElementCompliance({ id, element, value, onChange, conditionallyShownOptionsElement, validationMessage, displayValidationMessage, isEven, isDirty, setIsDirty, }) {
     const typedValue = value;
     const notesElement = React.useMemo(() => ({
         ...baseElement,
@@ -94,7 +93,6 @@ function FormElementCompliance({ id, element, value, onChange, conditionallyShow
     }, [element, onChange]);
     const [isShowingNotes, toggleIsShowingNotes] = useToggleComplianceChildren(element, !!(typedValue === null || typedValue === void 0 ? void 0 : typedValue.notes), handleNotesChange);
     const [isShowingFiles, toggleIsShowingFiles] = useToggleComplianceChildren(element, !!(typedValue === null || typedValue === void 0 ? void 0 : typedValue.files), handleFilesChange);
-    const [isDirty, setIsDirty] = useBooleanState(false);
     const filteredOptions = useFormElementOptions({
         element,
         value: typedValue === null || typedValue === void 0 ? void 0 : typedValue.value,
@@ -122,9 +120,9 @@ function FormElementCompliance({ id, element, value, onChange, conditionallyShow
                     React.createElement(ComplianceButton, { isActive: isShowingNotes, icon: "notes", onClick: toggleIsShowingNotes, disabled: element.readOnly || !(typedValue === null || typedValue === void 0 ? void 0 : typedValue.value) }, "Notes"),
                     React.createElement(ComplianceButton, { isActive: isShowingFiles, icon: "perm_media", onClick: toggleIsShowingFiles, disabled: element.readOnly || !(typedValue === null || typedValue === void 0 ? void 0 : typedValue.value) }, "Media")),
                 isShowingNotes && (React.createElement("div", { className: "ob-compliance-child-element" },
-                    React.createElement(FormElementTextarea, { id: `${id}-notes`, onChange: handleNotesChange, displayValidationMessage: false, validationMessage: undefined, value: typedValue === null || typedValue === void 0 ? void 0 : typedValue.notes, element: notesElement }))),
+                    React.createElement(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 }))),
                 isShowingFiles && (React.createElement("div", { className: "ob-compliance-child-element" },
-                    React.createElement(FormElementFiles, { id: `${id}-files`, onChange: handleFilesChange, displayValidationMessage: false, validationMessage: undefined, value: typedValue === null || typedValue === void 0 ? void 0 : typedValue.files, element: filesElement })))))));
+                    React.createElement(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 })))))));
 }
 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 useBooleanState from '../hooks/useBooleanState'\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} from '../types/form'\nimport { attachmentsService } from '@oneblink/apps'\n\ninterface Props {\n  id: string\n  element: FormTypes.ComplianceElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<Value>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n  isEven?: boolean\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\nfunction FormElementCompliance({\n  id,\n  element,\n  value,\n  onChange,\n  conditionallyShownOptionsElement,\n  validationMessage,\n  displayValidationMessage,\n  isEven,\n}: Props) {\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    }),\n    [element.id, element.name, element.readOnly],\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, v) => {\n      onChange(fe, (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    },\n    [onChange],\n  )\n  const handleNotesChange = React.useCallback<\n    React.ComponentProps<typeof FormElementTextarea>['onChange']\n  >(\n    (fe, v) => {\n      onChange(element, (existingValue) => {\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    },\n    [element, onChange],\n  )\n  const handleFilesChange = React.useCallback<\n    React.ComponentProps<typeof FormElementFiles>['onChange']\n  >(\n    (fe, v) => {\n      onChange(element, (existingValue) => {\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    },\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 [isDirty, setIsDirty] = useBooleanState(false)\n\n  const filteredOptions = useFormElementOptions({\n    element,\n    value: typedValue?.value,\n    onChange: handleValueChange,\n    conditionallyShownOptionsElement,\n  })\n\n  return (\n    <div className=\"cypress-compliance-element\">\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 className=\"buttons ob-buttons ob-buttons-radio cypress-radio-button-group\">\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                        handleValueChange(element, option.value)\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                    />\n                  </div>\n                )\n              })}\n            </div>\n          </FormElementOptions>\n          {(isDirty || displayValidationMessage) && !!validationMessage && (\n            <div role=\"alert\" className=\"has-margin-top-8\">\n              <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n                {validationMessage}\n              </div>\n            </div>\n          )}\n          <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              />\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              />\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} from '../types/form'\nimport { attachmentsService } from '@oneblink/apps'\n\ninterface Props extends IsDirtyProps {\n  id: string\n  element: FormTypes.ComplianceElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<Value>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n  isEven?: boolean\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\nfunction FormElementCompliance({\n  id,\n  element,\n  value,\n  onChange,\n  conditionallyShownOptionsElement,\n  validationMessage,\n  displayValidationMessage,\n  isEven,\n  isDirty,\n  setIsDirty,\n}: Props) {\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    }),\n    [element.id, element.name, element.readOnly],\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, v) => {\n      onChange(fe, (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    },\n    [onChange],\n  )\n  const handleNotesChange = React.useCallback<\n    React.ComponentProps<typeof FormElementTextarea>['onChange']\n  >(\n    (fe, v) => {\n      onChange(element, (existingValue) => {\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    },\n    [element, onChange],\n  )\n  const handleFilesChange = React.useCallback<\n    React.ComponentProps<typeof FormElementFiles>['onChange']\n  >(\n    (fe, v) => {\n      onChange(element, (existingValue) => {\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    },\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  })\n\n  return (\n    <div className=\"cypress-compliance-element\">\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 className=\"buttons ob-buttons ob-buttons-radio cypress-radio-button-group\">\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                        handleValueChange(element, option.value)\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                    />\n                  </div>\n                )\n              })}\n            </div>\n          </FormElementOptions>\n          {(isDirty || displayValidationMessage) && !!validationMessage && (\n            <div role=\"alert\" className=\"has-margin-top-8\">\n              <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n                {validationMessage}\n              </div>\n            </div>\n          )}\n          <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              />\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"]}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
+import { FormElementValueChangeHandler, IsDirtyProps } from '../types/form';
 declare type Props = {
     id: string;
     element: FormTypes.DateElement;
@@ -8,7 +8,7 @@ declare type Props = {
     onChange: FormElementValueChangeHandler<string>;
     displayValidationMessage: boolean;
     validationMessage: string | undefined;
-};
-declare function FormElementDate({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
+} & IsDirtyProps;
+declare function FormElementDate({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementDate>;
 export default _default;

package/dist/form-elements/FormElementDate.js

@@ -2,13 +2,11 @@ import * as React from 'react';
 import { localisationService } from '@oneblink/apps';
 import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
 import useFlatpickr from '../hooks/useFlatpickr';
-import useBooleanState from '../hooks/useBooleanState';
 import LookupButton from '../components/renderer/LookupButton';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import { generateDate, parseDateValue } from '../services/generate-default-data';
-function FormElementDate({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
+function FormElementDate({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
     const htmlDivElementRef = React.useRef(null);
-    const [isDirty, setIsDirty] = useBooleanState(false);
     const flatpickrOptions = React.useMemo(() => {
         const opts = {
             altInput: true,

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementDate.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDate.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useFlatpickr, { FlatpickrOptions } from '../hooks/useFlatpickr'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { generateDate, parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.DateElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n}\n\nfunction FormElementDate({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const htmlDivElementRef = React.useRef<HTMLDivElement>(null)\n\n  const [isDirty, setIsDirty] = useBooleanState(false)\n\n  const flatpickrOptions = React.useMemo(() => {\n    const opts: FlatpickrOptions = {\n      altInput: true,\n      dateFormat: 'Y-m-d',\n      altFormat: localisationService.getFlatpickrFormats().shortDate,\n      allowInput: true,\n      altInputClass: 'input ob-input cypress-date-control',\n      minDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: element.fromDateDaysOffset,\n        value: element.fromDate,\n      }),\n      maxDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: element.toDateDaysOffset,\n        value: element.toDate,\n      }),\n      defaultDate: undefined,\n      allowInvalidPreload: true,\n      onClose: setIsDirty,\n    }\n\n    return opts\n  }, [\n    element.fromDate,\n    element.fromDateDaysOffset,\n    element.toDate,\n    element.toDateDaysOffset,\n    setIsDirty,\n  ])\n\n  const handleChange = React.useCallback(\n    (newValue) => onChange(element, newValue),\n    [element, onChange],\n  )\n\n  useFlatpickr(\n    {\n      id,\n      value,\n      onChange: handleChange,\n      dateOnly: true,\n    },\n    flatpickrOptions,\n    htmlDivElementRef,\n  )\n\n  const text = React.useMemo(() => {\n    if (typeof value === 'string') {\n      const date = generateDate({\n        daysOffset: undefined,\n        value,\n        dateOnly: true,\n      })\n      if (date) {\n        return localisationService.formatDate(date)\n      }\n    }\n    return null\n  }, [value])\n\n  return (\n    <div className=\"cypress-date-element\" ref={htmlDivElementRef}>\n      <FormElementLabelContainer\n        className=\"ob-date\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded has-icons-right\">\n            <input\n              type=\"date\"\n              id={id}\n              name={element.name}\n              placeholder={element.placeholderValue}\n              disabled={element.readOnly}\n              className=\"input ob-input\"\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <i className=\"material-icons is-size-5\">event</i>\n            </span>\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n          />\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementDate)\n"]}
+{"version":3,"file":"FormElementDate.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAkC,MAAM,uBAAuB,CAAA;AACtE,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAYhF,SAAS,eAAe,CAAC,EACvB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,GACJ;IACN,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE5D,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,MAAM,IAAI,GAAqB;YAC7B,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,OAAO;YACnB,SAAS,EAAE,mBAAmB,CAAC,mBAAmB,EAAE,CAAC,SAAS;YAC9D,UAAU,EAAE,IAAI;YAChB,aAAa,EAAE,qCAAqC;YACpD,OAAO,EAAE,cAAc,CAAC;gBACtB,QAAQ,EAAE,KAAK;gBACf,UAAU,EAAE,OAAO,CAAC,kBAAkB;gBACtC,KAAK,EAAE,OAAO,CAAC,QAAQ;aACxB,CAAC;YACF,OAAO,EAAE,cAAc,CAAC;gBACtB,QAAQ,EAAE,KAAK;gBACf,UAAU,EAAE,OAAO,CAAC,gBAAgB;gBACpC,KAAK,EAAE,OAAO,CAAC,MAAM;aACtB,CAAC;YACF,WAAW,EAAE,SAAS;YACtB,mBAAmB,EAAE,IAAI;YACzB,OAAO,EAAE,UAAU;SACpB,CAAA;QAED,OAAO,IAAI,CAAA;IACb,CAAC,EAAE;QACD,OAAO,CAAC,QAAQ;QAChB,OAAO,CAAC,kBAAkB;QAC1B,OAAO,CAAC,MAAM;QACd,OAAO,CAAC,gBAAgB;QACxB,UAAU;KACX,CAAC,CAAA;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,EACzC,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CAAA;IAED,YAAY,CACV;QACE,EAAE;QACF,KAAK;QACL,QAAQ,EAAE,YAAY;QACtB,QAAQ,EAAE,IAAI;KACf,EACD,gBAAgB,EAChB,iBAAiB,CAClB,CAAA;IAED,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC9B,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,MAAM,IAAI,GAAG,YAAY,CAAC;gBACxB,UAAU,EAAE,SAAS;gBACrB,KAAK;gBACL,QAAQ,EAAE,IAAI;aACf,CAAC,CAAA;YACF,IAAI,IAAI,EAAE;gBACR,OAAO,mBAAmB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;aAC5C;SACF;QACD,OAAO,IAAI,CAAA;IACb,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CACL,6BAAK,SAAS,EAAC,sBAAsB,EAAC,GAAG,EAAE,iBAAiB;QAC1D,oBAAC,yBAAyB,IACxB,SAAS,EAAC,SAAS,EACnB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,6BAAK,SAAS,EAAC,kBAAkB;gBAC/B,6BAAK,SAAS,EAAC,qCAAqC;oBAClD,+BACE,IAAI,EAAC,MAAM,EACX,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,SAAS,EAAC,gBAAgB,GAC1B;oBACF,8BAAM,SAAS,EAAC,sCAAsC;wBACpD,2BAAG,SAAS,EAAC,0BAA0B,YAAU,CAC5C,CACH;gBACL,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,IAAI,CAC/B,6BAAK,SAAS,EAAC,SAAS;oBACtB,oBAAC,qBAAqB,IACpB,SAAS,EAAC,oEAAoE,EAC9E,IAAI,EAAE,IAAI,GACV,CACE,CACP;gBACD,oBAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,GACpC,CACE;YAEL,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAC/D,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACF,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useFlatpickr, { FlatpickrOptions } from '../hooks/useFlatpickr'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { generateDate, parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.DateElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementDate({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const htmlDivElementRef = React.useRef<HTMLDivElement>(null)\n\n  const flatpickrOptions = React.useMemo(() => {\n    const opts: FlatpickrOptions = {\n      altInput: true,\n      dateFormat: 'Y-m-d',\n      altFormat: localisationService.getFlatpickrFormats().shortDate,\n      allowInput: true,\n      altInputClass: 'input ob-input cypress-date-control',\n      minDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: element.fromDateDaysOffset,\n        value: element.fromDate,\n      }),\n      maxDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: element.toDateDaysOffset,\n        value: element.toDate,\n      }),\n      defaultDate: undefined,\n      allowInvalidPreload: true,\n      onClose: setIsDirty,\n    }\n\n    return opts\n  }, [\n    element.fromDate,\n    element.fromDateDaysOffset,\n    element.toDate,\n    element.toDateDaysOffset,\n    setIsDirty,\n  ])\n\n  const handleChange = React.useCallback(\n    (newValue) => onChange(element, newValue),\n    [element, onChange],\n  )\n\n  useFlatpickr(\n    {\n      id,\n      value,\n      onChange: handleChange,\n      dateOnly: true,\n    },\n    flatpickrOptions,\n    htmlDivElementRef,\n  )\n\n  const text = React.useMemo(() => {\n    if (typeof value === 'string') {\n      const date = generateDate({\n        daysOffset: undefined,\n        value,\n        dateOnly: true,\n      })\n      if (date) {\n        return localisationService.formatDate(date)\n      }\n    }\n    return null\n  }, [value])\n\n  return (\n    <div className=\"cypress-date-element\" ref={htmlDivElementRef}>\n      <FormElementLabelContainer\n        className=\"ob-date\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded has-icons-right\">\n            <input\n              type=\"date\"\n              id={id}\n              name={element.name}\n              placeholder={element.placeholderValue}\n              disabled={element.readOnly}\n              className=\"input ob-input\"\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <i className=\"material-icons is-size-5\">event</i>\n            </span>\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n          />\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementDate)\n"]}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
+import { FormElementValueChangeHandler, IsDirtyProps } from '../types/form';
 declare type Props = {
     id: string;
     element: FormTypes.DateTimeElement;
@@ -8,7 +8,7 @@ declare type Props = {
     onChange: FormElementValueChangeHandler<string>;
     displayValidationMessage: boolean;
     validationMessage: string | undefined;
-};
-declare function FormElementDateTime({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
+} & IsDirtyProps;
+declare function FormElementDateTime({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementDateTime>;
 export default _default;

package/dist/form-elements/FormElementDateTime.js

@@ -2,13 +2,11 @@ import * as React from 'react';
 import { localisationService } from '@oneblink/apps';
 import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
 import useFlatpickr from '../hooks/useFlatpickr';
-import useBooleanState from '../hooks/useBooleanState';
 import LookupButton from '../components/renderer/LookupButton';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
 import { parseDateValue } from '../services/generate-default-data';
-function FormElementDateTime({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
+function FormElementDateTime({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
     const htmlDivElementRef = React.useRef(null);
-    const [isDirty, setIsDirty] = useBooleanState(false);
     const flatpickrOptions = React.useMemo(() => {
         const opts = {
             altInput: true,

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementDateTime.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDateTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useFlatpickr, { FlatpickrOptions } from '../hooks/useFlatpickr'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.DateTimeElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n}\n\nfunction FormElementDateTime({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const htmlDivElementRef = React.useRef<HTMLDivElement>(null)\n\n  const [isDirty, setIsDirty] = useBooleanState(false)\n\n  const flatpickrOptions = React.useMemo(() => {\n    const opts: FlatpickrOptions = {\n      altInput: true,\n      dateFormat: 'Y-m-dTH:i:S',\n      altFormat: localisationService.getFlatpickrFormats().shortDateTime,\n      allowInput: false,\n      altInputClass: 'input ob-input cypress-date-time-control',\n      minDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: element.fromDateDaysOffset,\n        value: element.fromDate,\n      }),\n      maxDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: element.toDateDaysOffset,\n        value: element.toDate,\n      }),\n      defaultDate: undefined,\n      enableTime: true,\n      allowInvalidPreload: true,\n      onClose: setIsDirty,\n    }\n\n    return opts\n  }, [\n    element.fromDate,\n    element.fromDateDaysOffset,\n    element.toDate,\n    element.toDateDaysOffset,\n    setIsDirty,\n  ])\n\n  const handleChange = React.useCallback(\n    (newValue) => onChange(element, newValue),\n    [element, onChange],\n  )\n\n  useFlatpickr(\n    {\n      id,\n      value,\n      onChange: handleChange,\n    },\n    flatpickrOptions,\n    htmlDivElementRef,\n  )\n\n  const text = React.useMemo(() => {\n    if (typeof value !== 'string') {\n      return null\n    }\n    return localisationService.formatDatetime(new Date(value))\n  }, [value])\n\n  return (\n    <div className=\"cypress-datetime-element\" ref={htmlDivElementRef}>\n      <FormElementLabelContainer\n        className=\"ob-datetime\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded has-icons-right\">\n            <input\n              type=\"datetime-local\"\n              id={id}\n              name={element.name}\n              placeholder={element.placeholderValue}\n              disabled={element.readOnly}\n              className=\"input ob-input\"\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <i className=\"material-icons is-size-5\">date_range</i>\n            </span>\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n          />\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementDateTime)\n"]}
+{"version":3,"file":"FormElementDateTime.js","sourceRoot":"","sources":["../../src/form-elements/FormElementDateTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { localisationService } from '@oneblink/apps'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useFlatpickr, { FlatpickrOptions } from '../hooks/useFlatpickr'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { parseDateValue } from '../services/generate-default-data'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.DateTimeElement\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementDateTime({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const htmlDivElementRef = React.useRef<HTMLDivElement>(null)\n\n  const flatpickrOptions = React.useMemo(() => {\n    const opts: FlatpickrOptions = {\n      altInput: true,\n      dateFormat: 'Y-m-dTH:i:S',\n      altFormat: localisationService.getFlatpickrFormats().shortDateTime,\n      allowInput: false,\n      altInputClass: 'input ob-input cypress-date-time-control',\n      minDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: element.fromDateDaysOffset,\n        value: element.fromDate,\n      }),\n      maxDate: parseDateValue({\n        dateOnly: false,\n        daysOffset: element.toDateDaysOffset,\n        value: element.toDate,\n      }),\n      defaultDate: undefined,\n      enableTime: true,\n      allowInvalidPreload: true,\n      onClose: setIsDirty,\n    }\n\n    return opts\n  }, [\n    element.fromDate,\n    element.fromDateDaysOffset,\n    element.toDate,\n    element.toDateDaysOffset,\n    setIsDirty,\n  ])\n\n  const handleChange = React.useCallback(\n    (newValue) => onChange(element, newValue),\n    [element, onChange],\n  )\n\n  useFlatpickr(\n    {\n      id,\n      value,\n      onChange: handleChange,\n    },\n    flatpickrOptions,\n    htmlDivElementRef,\n  )\n\n  const text = React.useMemo(() => {\n    if (typeof value !== 'string') {\n      return null\n    }\n    return localisationService.formatDatetime(new Date(value))\n  }, [value])\n\n  return (\n    <div className=\"cypress-datetime-element\" ref={htmlDivElementRef}>\n      <FormElementLabelContainer\n        className=\"ob-datetime\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded has-icons-right\">\n            <input\n              type=\"datetime-local\"\n              id={id}\n              name={element.name}\n              placeholder={element.placeholderValue}\n              disabled={element.readOnly}\n              className=\"input ob-input\"\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <i className=\"material-icons is-size-5\">date_range</i>\n            </span>\n          </div>\n          {!!element.readOnly && !!text && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n          />\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementDateTime)\n"]}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../types/form';
+import { FormElementValueChangeHandler, IsDirtyProps } from '../types/form';
 declare type Props = {
     id: string;
     element: FormTypes.EmailElement;
@@ -8,7 +8,7 @@ declare type Props = {
     onChange: FormElementValueChangeHandler<string>;
     displayValidationMessage: boolean;
     validationMessage: string | undefined;
-};
-declare function FormElementEmail({ id, element, value, onChange, validationMessage, displayValidationMessage, }: Props): JSX.Element;
+} & IsDirtyProps;
+declare function FormElementEmail({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementEmail>;
 export default _default;

package/dist/form-elements/FormElementEmail.js

@@ -1,10 +1,8 @@
 import * as React from 'react';
 import CopyToClipboardButton from '../components/renderer/CopyToClipboardButton';
-import useBooleanState from '../hooks/useBooleanState';
 import LookupButton from '../components/renderer/LookupButton';
 import FormElementLabelContainer from '../components/renderer/FormElementLabelContainer';
-function FormElementEmail({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
-    const [isDirty, setIsDirty] = useBooleanState(false);
+function FormElementEmail({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
     const text = typeof value === 'string' ? value : '';
     return (React.createElement("div", { className: "cypress-email-element" },
         React.createElement(FormElementLabelContainer, { className: "ob-email", id: id, element: element, required: element.required },

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementEmail.js","sourceRoot":"","sources":["../../src/form-elements/FormElementEmail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,eAAe,MAAM,0BAA0B,CAAA;AACtD,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAYxF,SAAS,gBAAgB,CAAC,EACxB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,GAClB;IACN,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAEpD,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IACnD,OAAO,CACL,6BAAK,SAAS,EAAC,uBAAuB;QACpC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,UAAU,EACpB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,6BAAK,SAAS,EAAC,kBAAkB;gBAC/B,6BAAK,SAAS,EAAC,qCAAqC;oBAClD,+BACE,IAAI,EAAC,OAAO,EACZ,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,sCAAsC,EAChD,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS,CAAC,EAC/D,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,MAAM,EAAE,UAAU,GAClB;oBACF,8BAAM,SAAS,EAAC,sCAAsC;wBACpD,2BAAG,SAAS,EAAC,0BAA0B,YAAU,CAC5C,CACH;gBACL,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,CAChC,6BAAK,SAAS,EAAC,SAAS;oBACtB,oBAAC,qBAAqB,IACpB,SAAS,EAAC,oEAAoE,EAC9E,IAAI,EAAE,IAAI,GACV,CACE,CACP;gBACD,oBAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,GACpC,CACE;YAEL,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAC/D,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACF,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport useBooleanState from '../hooks/useBooleanState'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.EmailElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n}\n\nfunction FormElementEmail({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n}: Props) {\n  const [isDirty, setIsDirty] = useBooleanState(false)\n\n  const text = typeof value === 'string' ? value : ''\n  return (\n    <div className=\"cypress-email-element\">\n      <FormElementLabelContainer\n        className=\"ob-email\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded has-icons-right\">\n            <input\n              type=\"email\"\n              placeholder={element.placeholderValue}\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-email-control\"\n              value={text}\n              onChange={(e) => onChange(element, e.target.value || undefined)}\n              required={element.required}\n              disabled={element.readOnly}\n              onBlur={setIsDirty}\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <i className=\"material-icons is-size-5\">email</i>\n            </span>\n          </div>\n          {!!element.readOnly && !!value && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n          />\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementEmail)\n"]}
+{"version":3,"file":"FormElementEmail.js","sourceRoot":"","sources":["../../src/form-elements/FormElementEmail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,qBAAqB,MAAM,8CAA8C,CAAA;AAChF,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAE9D,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AAYxF,SAAS,gBAAgB,CAAC,EACxB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,GACJ;IACN,MAAM,IAAI,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IACnD,OAAO,CACL,6BAAK,SAAS,EAAC,uBAAuB;QACpC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,UAAU,EACpB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,6BAAK,SAAS,EAAC,kBAAkB;gBAC/B,6BAAK,SAAS,EAAC,qCAAqC;oBAClD,+BACE,IAAI,EAAC,OAAO,EACZ,WAAW,EAAE,OAAO,CAAC,gBAAgB,EACrC,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,SAAS,EAAC,sCAAsC,EAChD,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,SAAS,CAAC,EAC/D,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,MAAM,EAAE,UAAU,GAClB;oBACF,8BAAM,SAAS,EAAC,sCAAsC;wBACpD,2BAAG,SAAS,EAAC,0BAA0B,YAAU,CAC5C,CACH;gBACL,CAAC,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,CAChC,6BAAK,SAAS,EAAC,SAAS;oBACtB,oBAAC,qBAAqB,IACpB,SAAS,EAAC,oEAAoE,EAC9E,IAAI,EAAE,IAAI,GACV,CACE,CACP;gBACD,oBAAC,YAAY,IACX,aAAa,QACb,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,GACpC,CACE;YAEL,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAC/D,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACF,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\n\nimport CopyToClipboardButton from '../components/renderer/CopyToClipboardButton'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\n\ntype Props = {\n  id: string\n  element: FormTypes.EmailElement\n  value: unknown\n  onChange: FormElementValueChangeHandler<string>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementEmail({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const text = typeof value === 'string' ? value : ''\n  return (\n    <div className=\"cypress-email-element\">\n      <FormElementLabelContainer\n        className=\"ob-email\"\n        id={id}\n        element={element}\n        required={element.required}\n      >\n        <div className=\"field has-addons\">\n          <div className=\"control is-expanded has-icons-right\">\n            <input\n              type=\"email\"\n              placeholder={element.placeholderValue}\n              id={id}\n              name={element.name}\n              className=\"input ob-input cypress-email-control\"\n              value={text}\n              onChange={(e) => onChange(element, e.target.value || undefined)}\n              required={element.required}\n              disabled={element.readOnly}\n              onBlur={setIsDirty}\n            />\n            <span className=\"ob-input-icon icon is-small is-right\">\n              <i className=\"material-icons is-size-5\">email</i>\n            </span>\n          </div>\n          {!!element.readOnly && !!value && (\n            <div className=\"control\">\n              <CopyToClipboardButton\n                className=\"button is-input-addon copy-button cypress-copy-to-clipboard-button\"\n                text={text}\n              />\n            </div>\n          )}\n          <LookupButton\n            isInputButton\n            value={value}\n            validationMessage={validationMessage}\n          />\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(FormElementEmail)\n"]}

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

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { FormTypes } from '@oneblink/types';
 import { attachmentsService } from '@oneblink/apps';
-import { FormElementValueChangeHandler } from '../types/form';
+import { FormElementValueChangeHandler, IsDirtyProps } from '../types/form';
 export declare function stringifyAttachments(value: attachmentsService.Attachment[] | undefined): string;
-declare function FormElementFiles({ id, element, value, onChange, validationMessage, displayValidationMessage, }: {
+declare function FormElementFiles({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }: {
     id: string;
     element: FormTypes.FilesElement;
     value?: attachmentsService.Attachment[];
     onChange: FormElementValueChangeHandler<attachmentsService.Attachment[]>;
     displayValidationMessage: boolean;
     validationMessage: string | undefined;
-}): JSX.Element;
+} & IsDirtyProps): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementFiles>;
 export default _default;

package/dist/form-elements/FormElementFiles.js

@@ -9,8 +9,8 @@ export function stringifyAttachments(value) {
     }
     return '';
 }
-function FormElementFiles({ id, element, value, onChange, validationMessage, displayValidationMessage, }) {
-    const { isDirty, addAttachments, removeAttachment, changeAttachment } = useAttachments(element, onChange);
+function FormElementFiles({ id, element, value, onChange, validationMessage, displayValidationMessage, isDirty, setIsDirty, }) {
+    const { addAttachments, removeAttachment, changeAttachment } = useAttachments(element, onChange, setIsDirty);
     const inputRef = React.useRef(null);
     const handleAdd = React.useCallback(() => {
         if (!inputRef.current)