@oneblink/apps-react 8.12.0-beta.3 → 8.12.0-beta.5

package/dist/components/ImageCropper/CropModal.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Area } from 'react-easy-crop';
+import { PercentCrop } from 'react-image-crop';
 declare function CropModal({ imageSrc, onClose, onSave, }: {
     imageSrc: string;
     onClose: () => void;
-    onSave: (imageArea: Area) => void;
+    onSave: (imageArea: PercentCrop) => void;
 }): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof CropModal>;
 export default _default;

package/dist/components/ImageCropper/CropModal.js

@@ -2,12 +2,12 @@ import * as React from 'react';
 import ImageCropper from '.';
 import scrollingService from '../../services/scrolling-service';
 function CropModal({ imageSrc, onClose, onSave, }) {
-    const [croppedAreaPixels, setCroppedAreaPixels] = React.useState(null);
+    const [croppedAreaPercent, setCroppedAreaPercent] = React.useState(null);
     const handleSaveCrop = React.useCallback(async () => {
-        if (!croppedAreaPixels)
+        if (!croppedAreaPercent)
             return;
-        onSave(croppedAreaPixels);
-    }, [croppedAreaPixels, onSave]);
+        onSave(croppedAreaPercent);
+    }, [croppedAreaPercent, onSave]);
     React.useEffect(() => {
         scrollingService.disableScrolling();
         return () => {
@@ -18,10 +18,10 @@ function CropModal({ imageSrc, onClose, onSave, }) {
         React.createElement("div", { className: "modal-background-faded" }),
         React.createElement("div", { className: "ob-crop ob-border-radius" },
             React.createElement("div", { className: "ob-crop__content ob-border-radius" },
-                React.createElement(ImageCropper, { imgSrc: imageSrc, onCropComplete: setCroppedAreaPixels })),
+                React.createElement(ImageCropper, { imgSrc: imageSrc, onCropComplete: setCroppedAreaPercent })),
             React.createElement("div", { className: "ob-annotation__buttons ob-annotation__buttons-actions" },
                 React.createElement("button", { type: "button", className: "button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-crop-cancel-button", onClick: onClose }, "Cancel"),
-                React.createElement("button", { type: "button", className: "button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-crop-save-button", disabled: !croppedAreaPixels, onClick: handleSaveCrop }, "Save")))));
+                React.createElement("button", { type: "button", className: "button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-crop-save-button", disabled: !croppedAreaPercent, onClick: handleSaveCrop }, "Save")))));
 }
 export default React.memo(CropModal);
 //# sourceMappingURL=CropModal.js.map

package/dist/components/ImageCropper/CropModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"CropModal.js","sourceRoot":"","sources":["../../../src/components/ImageCropper/CropModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,YAAY,MAAM,GAAG,CAAA;AAE5B,OAAO,gBAAgB,MAAM,kCAAkC,CAAA;AAE/D,SAAS,SAAS,CAAC,EACjB,QAAQ,EACR,OAAO,EACP,MAAM,GAKP;IACC,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAC9D,IAAI,CACL,CAAA;IAED,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAClD,IAAI,CAAC,iBAAiB;YAAE,OAAM;QAE9B,MAAM,CAAC,iBAAiB,CAAC,CAAA;IAC3B,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAA;IAE/B,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,gBAAgB,CAAC,gBAAgB,EAAE,CAAA;QAEnC,OAAO,GAAG,EAAE;YACV,gBAAgB,CAAC,eAAe,EAAE,CAAA;QACpC,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB;QAC9B,6BAAK,SAAS,EAAC,wBAAwB,GAAO;QAC9C,6BAAK,SAAS,EAAC,0BAA0B;YACvC,6BAAK,SAAS,EAAC,mCAAmC;gBAChD,oBAAC,YAAY,IACX,MAAM,EAAE,QAAQ,EAChB,cAAc,EAAE,oBAAoB,GACpC,CACE;YACN,6BAAK,SAAS,EAAC,uDAAuD;gBACpE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yGAAyG,EACnH,OAAO,EAAE,OAAO,aAGT;gBACT,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yGAAyG,EACnH,QAAQ,EAAE,CAAC,iBAAiB,EAC5B,OAAO,EAAE,cAAc,WAGhB,CACL,CACF,CACF,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport ImageCropper from '.'\nimport { Area } from 'react-easy-crop'\nimport scrollingService from '../../services/scrolling-service'\n\nfunction CropModal({\n  imageSrc,\n  onClose,\n  onSave,\n}: {\n  imageSrc: string\n  onClose: () => void\n  onSave: (imageArea: Area) => void\n}) {\n  const [croppedAreaPixels, setCroppedAreaPixels] = React.useState<Area | null>(\n    null,\n  )\n\n  const handleSaveCrop = React.useCallback(async () => {\n    if (!croppedAreaPixels) return\n\n    onSave(croppedAreaPixels)\n  }, [croppedAreaPixels, onSave])\n\n  React.useEffect(() => {\n    scrollingService.disableScrolling()\n\n    return () => {\n      scrollingService.enableScrolling()\n    }\n  }, [])\n\n  return (\n    <div className=\"modal is-active\">\n      <div className=\"modal-background-faded\"></div>\n      <div className=\"ob-crop ob-border-radius\">\n        <div className=\"ob-crop__content ob-border-radius\">\n          <ImageCropper\n            imgSrc={imageSrc}\n            onCropComplete={setCroppedAreaPixels}\n          />\n        </div>\n        <div className=\"ob-annotation__buttons ob-annotation__buttons-actions\">\n          <button\n            type=\"button\"\n            className=\"button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-crop-cancel-button\"\n            onClick={onClose}\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            className=\"button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-crop-save-button\"\n            disabled={!croppedAreaPixels}\n            onClick={handleSaveCrop}\n          >\n            Save\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default React.memo(CropModal)\n"]}
+{"version":3,"file":"CropModal.js","sourceRoot":"","sources":["../../../src/components/ImageCropper/CropModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,YAAY,MAAM,GAAG,CAAA;AAC5B,OAAO,gBAAgB,MAAM,kCAAkC,CAAA;AAG/D,SAAS,SAAS,CAAC,EACjB,QAAQ,EACR,OAAO,EACP,MAAM,GAKP;IACC,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAC/C,KAAK,CAAC,QAAQ,CAAqB,IAAI,CAAC,CAAA;IAE1C,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAClD,IAAI,CAAC,kBAAkB;YAAE,OAAM;QAE/B,MAAM,CAAC,kBAAkB,CAAC,CAAA;IAC5B,CAAC,EAAE,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC,CAAA;IAEhC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,gBAAgB,CAAC,gBAAgB,EAAE,CAAA;QAEnC,OAAO,GAAG,EAAE;YACV,gBAAgB,CAAC,eAAe,EAAE,CAAA;QACpC,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB;QAC9B,6BAAK,SAAS,EAAC,wBAAwB,GAAO;QAC9C,6BAAK,SAAS,EAAC,0BAA0B;YACvC,6BAAK,SAAS,EAAC,mCAAmC;gBAChD,oBAAC,YAAY,IACX,MAAM,EAAE,QAAQ,EAChB,cAAc,EAAE,qBAAqB,GACrC,CACE;YACN,6BAAK,SAAS,EAAC,uDAAuD;gBACpE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yGAAyG,EACnH,OAAO,EAAE,OAAO,aAGT;gBACT,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yGAAyG,EACnH,QAAQ,EAAE,CAAC,kBAAkB,EAC7B,OAAO,EAAE,cAAc,WAGhB,CACL,CACF,CACF,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport ImageCropper from '.'\nimport scrollingService from '../../services/scrolling-service'\nimport { PercentCrop } from 'react-image-crop'\n\nfunction CropModal({\n  imageSrc,\n  onClose,\n  onSave,\n}: {\n  imageSrc: string\n  onClose: () => void\n  onSave: (imageArea: PercentCrop) => void\n}) {\n  const [croppedAreaPercent, setCroppedAreaPercent] =\n    React.useState<PercentCrop | null>(null)\n\n  const handleSaveCrop = React.useCallback(async () => {\n    if (!croppedAreaPercent) return\n\n    onSave(croppedAreaPercent)\n  }, [croppedAreaPercent, onSave])\n\n  React.useEffect(() => {\n    scrollingService.disableScrolling()\n\n    return () => {\n      scrollingService.enableScrolling()\n    }\n  }, [])\n\n  return (\n    <div className=\"modal is-active\">\n      <div className=\"modal-background-faded\"></div>\n      <div className=\"ob-crop ob-border-radius\">\n        <div className=\"ob-crop__content ob-border-radius\">\n          <ImageCropper\n            imgSrc={imageSrc}\n            onCropComplete={setCroppedAreaPercent}\n          />\n        </div>\n        <div className=\"ob-annotation__buttons ob-annotation__buttons-actions\">\n          <button\n            type=\"button\"\n            className=\"button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-crop-cancel-button\"\n            onClick={onClose}\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            className=\"button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-crop-save-button\"\n            disabled={!croppedAreaPercent}\n            onClick={handleSaveCrop}\n          >\n            Save\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default React.memo(CropModal)\n"]}

package/dist/components/ImageCropper/index.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Area, CropperProps } from 'react-easy-crop';
-declare const _default: React.MemoExoticComponent<({ imgSrc, disabled, onCropComplete, outputAspectRatio, zoomWithScroll, cropperStyles, cropperHeight, }: {
+import { PercentCrop } from 'react-image-crop';
+import 'react-image-crop/src/ReactCrop.scss';
+export { PercentCrop };
+declare const _default: React.MemoExoticComponent<({ imgSrc, disabled, onCropComplete, outputAspectRatio, cropperHeight, }: {
     imgSrc: string;
     disabled?: boolean;
-    onCropComplete: (croppedAreaPixels: Area) => void;
+    onCropComplete: (croppedAreaPixels: PercentCrop) => void;
     outputAspectRatio?: number;
-    zoomWithScroll?: boolean;
-    cropperStyles?: CropperProps["style"];
     cropperHeight?: number;
 }) => React.JSX.Element>;
 export default _default;
@@ -14,8 +14,8 @@ export declare const getAspectRatio: ({ width, height, }: {
     width: number;
     height: number;
 }) => number;
-export declare const generateCroppedImageBlob: ({ croppedAreaPixels, imgSrc, size, fileType, }: {
-    croppedAreaPixels: Area;
+export declare const generateCroppedImageBlob: ({ croppedAreaPercent, imgSrc, size, fileType, }: {
+    croppedAreaPercent: PercentCrop;
     imgSrc: string;
     /**
      * If provided, the cropped image will be resized to the given size. If not

package/dist/components/ImageCropper/index.js

@@ -1,47 +1,65 @@
-import React, { memo, useMemo } from 'react';
-import Cropper from 'react-easy-crop';
-import { CropContainer, ZoomSlider, SLIDER_WHEEL_INTERVAL_VALUE, } from './resource-components';
-const defaultZoom = 1;
-const defaultCrop = { x: 0, y: 0 };
-const emptyFn = () => { };
-const ImageCropper = ({ imgSrc, disabled, onCropComplete, outputAspectRatio, zoomWithScroll, cropperStyles, cropperHeight, }) => {
-    const [crop, setCrop] = React.useState(defaultCrop);
-    const [zoom, setZoom] = React.useState(defaultZoom);
-    const [image, setImage] = React.useState(null);
-    React.useEffect(() => {
-        if (outputAspectRatio) {
-            // If we have a desired aspect ratio, we dont need to get it from the current image
+import React, { memo } from 'react';
+import ReactImageCrop from 'react-image-crop';
+import { CropContainer } from './resource-components';
+import 'react-image-crop/src/ReactCrop.scss';
+const defaultCrop = {
+    unit: '%',
+    height: 100,
+    width: 100,
+    x: 0,
+    y: 0,
+};
+const getDefaultCropFromAspectRatio = ({ outputAspectRatio, imageWidth, imageHeight, }) => {
+    const imageAspect = imageWidth / imageHeight;
+    // Compute the largest rectangle that fits within the image and matches the aspect ratio
+    let width;
+    let height;
+    if (imageAspect >= outputAspectRatio) {
+        // Image is wider than desired aspect: constrain width by the height
+        height = 100;
+        const widthInPixels = imageHeight * outputAspectRatio;
+        // as percent
+        width = (widthInPixels / imageWidth) * 100;
+    }
+    else {
+        // Image is taller/narrower than desired aspect: constrain height by the width
+        width = 100;
+        const heightInPixels = imageHeight * outputAspectRatio;
+        // as percent
+        height = (heightInPixels / imageHeight) * 100;
+    }
+    // Center the crop
+    const x = Math.round((100 - width) / 2);
+    const y = Math.round((100 - height) / 2);
+    return {
+        unit: '%',
+        width,
+        height,
+        x,
+        y,
+    };
+};
+const ImageCropper = ({ imgSrc, disabled, onCropComplete, outputAspectRatio, cropperHeight, }) => {
+    const [crop, setCrop] = React.useState(() => outputAspectRatio ? undefined : defaultCrop);
+    const handleSetCrop = React.useCallback((_, c) => {
+        setCrop(c);
+    }, []);
+    const handleCropComplete = React.useCallback((_, c) => {
+        onCropComplete(c);
+    }, [onCropComplete]);
+    const handleLoadImage = React.useCallback(({ currentTarget }) => {
+        if (!outputAspectRatio)
             return;
-        }
-        createImage(imgSrc)
-            .then(setImage)
-            .catch((error) => {
-            console.error('Error loading image to get aspect ratio for cropping', error);
-        });
-    }, [outputAspectRatio, imgSrc]);
-    const calculatedAspectRatio = useMemo(() => {
-        if (outputAspectRatio) {
-            return outputAspectRatio;
-        }
-        if (image) {
-            return getAspectRatio({
-                width: image.width,
-                height: image.height,
-            });
-        }
-    }, [outputAspectRatio, image]);
+        setCrop(getDefaultCropFromAspectRatio({
+            outputAspectRatio,
+            imageWidth: currentTarget.width,
+            imageHeight: currentTarget.height,
+        }));
+    }, [outputAspectRatio]);
     return (React.createElement("div", { className: "ob-cropper__container" },
         React.createElement(CropContainer, { className: "ob-cropper__cropper-wrapper", height: cropperHeight },
-            React.createElement(Cropper, { image: imgSrc, crop: crop, zoom: zoom, aspect: calculatedAspectRatio, onCropChange: disabled ? emptyFn : setCrop, onCropComplete: (...args) => {
-                    if (disabled) {
-                        return;
-                    }
-                    onCropComplete(args[1]);
-                }, onZoomChange: setZoom, zoomSpeed: SLIDER_WHEEL_INTERVAL_VALUE, zoomWithScroll: zoomWithScroll, classes: {
-                    containerClassName: 'ob-border-radius',
-                }, style: cropperStyles })),
-        React.createElement("div", { className: "ob-cropper__zoom-slider-wrapper" },
-            React.createElement(ZoomSlider, { value: zoom, setValue: setZoom, disabled: disabled }))));
+            React.createElement(ReactImageCrop, { crop: crop, aspect: outputAspectRatio, onChange: handleSetCrop, onComplete: handleCropComplete, disabled: disabled, className: "ob-cropper__cropper", ruleOfThirds: true, keepSelection: true },
+                React.createElement("img", { src: imgSrc, className: "ob-cropper__image", onLoad: handleLoadImage })))));
 };
 export default memo(ImageCropper);
 export const getAspectRatio = ({ width, height, }) => width / height;
@@ -58,9 +76,9 @@ const createImage = (url) => {
         return image;
     });
 };
-export const generateCroppedImageBlob = async ({ croppedAreaPixels, imgSrc, size, fileType, }) => {
-    var _a, _b, _c, _d;
-    if (!croppedAreaPixels || !imgSrc) {
+export const generateCroppedImageBlob = async ({ croppedAreaPercent, imgSrc, size, fileType, }) => {
+    var _a, _b;
+    if (!croppedAreaPercent || !imgSrc) {
         return null;
     }
     // Source image/canvas
@@ -79,26 +97,30 @@ export const generateCroppedImageBlob = async ({ croppedAreaPixels, imgSrc, size
     if (!croppedCtx) {
         return null;
     }
-    croppedCanvas.width = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : croppedAreaPixels.width;
-    croppedCanvas.height = (_b = size === null || size === void 0 ? void 0 : size.height) !== null && _b !== void 0 ? _b : croppedAreaPixels.height;
+    const widthPercentAsPixels = () => (image.width / 100) * croppedAreaPercent.width;
+    const heightPercentAsPixels = () => (image.height / 100) * croppedAreaPercent.height;
+    const sourceXPercentAsPixels = () => (image.width / 100) * croppedAreaPercent.x;
+    const sourceYPercentAsPixels = () => (image.height / 100) * croppedAreaPercent.y;
+    croppedCanvas.width = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : widthPercentAsPixels();
+    croppedCanvas.height = (_b = size === null || size === void 0 ? void 0 : size.height) !== null && _b !== void 0 ? _b : heightPercentAsPixels();
     // Draw the cropped source image onto the destination canvas
     croppedCtx.drawImage(canvas, 
     // source x
-    croppedAreaPixels.x, 
+    sourceXPercentAsPixels(), 
     // source y
-    croppedAreaPixels.y, 
+    sourceYPercentAsPixels(), 
     // source width
-    croppedAreaPixels.width, 
+    widthPercentAsPixels(), 
     // source height
-    croppedAreaPixels.height, 
+    heightPercentAsPixels(), 
     // destination x
     0, 
     // destination y
     0, 
     // destination width
-    (_c = size === null || size === void 0 ? void 0 : size.width) !== null && _c !== void 0 ? _c : croppedAreaPixels.width, 
+    croppedCanvas.width, 
     // destination height
-    (_d = size === null || size === void 0 ? void 0 : size.height) !== null && _d !== void 0 ? _d : croppedAreaPixels.height);
+    croppedCanvas.height);
     return new Promise((resolve) => {
         croppedCanvas.toBlob((file) => {
             resolve(file);

package/dist/components/ImageCropper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ImageCropper/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { memo, useMemo } from 'react'\nimport Cropper, { Area, Point, CropperProps } from 'react-easy-crop'\nimport {\n  CropContainer,\n  ZoomSlider,\n  SLIDER_WHEEL_INTERVAL_VALUE,\n} from './resource-components'\n\nconst defaultZoom = 1\nconst defaultCrop = { x: 0, y: 0 }\n\nconst emptyFn = () => {}\n\nconst ImageCropper = ({\n  imgSrc,\n  disabled,\n  onCropComplete,\n  outputAspectRatio,\n  zoomWithScroll,\n  cropperStyles,\n  cropperHeight,\n}: {\n  imgSrc: string\n  disabled?: boolean\n  onCropComplete: (croppedAreaPixels: Area) => void\n  outputAspectRatio?: number\n  zoomWithScroll?: boolean\n  cropperStyles?: CropperProps['style']\n  cropperHeight?: number\n}) => {\n  const [crop, setCrop] = React.useState<Point>(defaultCrop)\n  const [zoom, setZoom] = React.useState(defaultZoom)\n  const [image, setImage] = React.useState<HTMLImageElement | null>(null)\n\n  React.useEffect(() => {\n    if (outputAspectRatio) {\n      // If we have a desired aspect ratio, we dont need to get it from the current image\n      return\n    }\n    createImage(imgSrc)\n      .then(setImage)\n      .catch((error) => {\n        console.error(\n          'Error loading image to get aspect ratio for cropping',\n          error,\n        )\n      })\n  }, [outputAspectRatio, imgSrc])\n\n  const calculatedAspectRatio = useMemo(() => {\n    if (outputAspectRatio) {\n      return outputAspectRatio\n    }\n    if (image) {\n      return getAspectRatio({\n        width: image.width,\n        height: image.height,\n      })\n    }\n  }, [outputAspectRatio, image])\n\n  return (\n    <div className=\"ob-cropper__container\">\n      <CropContainer\n        className=\"ob-cropper__cropper-wrapper\"\n        height={cropperHeight}\n      >\n        <Cropper\n          image={imgSrc}\n          crop={crop}\n          zoom={zoom}\n          aspect={calculatedAspectRatio}\n          onCropChange={disabled ? emptyFn : setCrop}\n          onCropComplete={(...args) => {\n            if (disabled) {\n              return\n            }\n            onCropComplete(args[1])\n          }}\n          onZoomChange={setZoom}\n          zoomSpeed={SLIDER_WHEEL_INTERVAL_VALUE}\n          zoomWithScroll={zoomWithScroll}\n          classes={{\n            containerClassName: 'ob-border-radius',\n          }}\n          style={cropperStyles}\n        />\n      </CropContainer>\n      <div className=\"ob-cropper__zoom-slider-wrapper\">\n        <ZoomSlider value={zoom} setValue={setZoom} disabled={disabled} />\n      </div>\n    </div>\n  )\n}\n\nexport default memo(ImageCropper)\n\nexport const getAspectRatio = ({\n  width,\n  height,\n}: {\n  width: number\n  height: number\n}) => width / height\n\nconst createImage = (url: string): Promise<HTMLImageElement> => {\n  return new Promise((resolve, reject) => {\n    const image = new Image()\n    image.onload = () => {\n      resolve(image)\n    }\n    image.onerror = (error) => {\n      reject(error)\n    }\n    image.src = url\n    return image\n  })\n}\n\nexport const generateCroppedImageBlob = async ({\n  croppedAreaPixels,\n  imgSrc,\n  size,\n  fileType,\n}: {\n  croppedAreaPixels: Area\n  imgSrc: string\n  /**\n   * If provided, the cropped image will be resized to the given size. If not\n   * provided, the cropped image will be the same size as the cropped portion of\n   * the source image.\n   */\n  size?: {\n    width: number\n    height: number\n  }\n  fileType?: string\n}): Promise<Blob | null> => {\n  if (!croppedAreaPixels || !imgSrc) {\n    return null\n  }\n  // Source image/canvas\n  const image = await createImage(imgSrc)\n  const canvas = document.createElement('canvas')\n  const ctx = canvas.getContext('2d')\n  if (!ctx) {\n    return null\n  }\n  canvas.width = image.width\n  canvas.height = image.height\n  ctx.drawImage(image, 0, 0)\n\n  // Destination image/canvas\n  const croppedCanvas = document.createElement('canvas')\n  const croppedCtx = croppedCanvas.getContext('2d')\n  if (!croppedCtx) {\n    return null\n  }\n  croppedCanvas.width = size?.width ?? croppedAreaPixels.width\n  croppedCanvas.height = size?.height ?? croppedAreaPixels.height\n\n  // Draw the cropped source image onto the destination canvas\n  croppedCtx.drawImage(\n    canvas,\n    // source x\n    croppedAreaPixels.x,\n    // source y\n    croppedAreaPixels.y,\n    // source width\n    croppedAreaPixels.width,\n    // source height\n    croppedAreaPixels.height,\n    // destination x\n    0,\n    // destination y\n    0,\n    // destination width\n    size?.width ?? croppedAreaPixels.width,\n    // destination height\n    size?.height ?? croppedAreaPixels.height,\n  )\n\n  return new Promise((resolve) => {\n    croppedCanvas.toBlob((file) => {\n      resolve(file)\n    }, fileType)\n  })\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ImageCropper/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { memo } from 'react'\nimport ReactImageCrop, { Crop, PercentCrop } from 'react-image-crop'\nimport { CropContainer } from './resource-components'\nimport 'react-image-crop/src/ReactCrop.scss'\nexport { PercentCrop }\nconst defaultCrop: PercentCrop = {\n  unit: '%',\n  height: 100,\n  width: 100,\n  x: 0,\n  y: 0,\n}\n\nconst getDefaultCropFromAspectRatio = ({\n  outputAspectRatio,\n  imageWidth,\n  imageHeight,\n}: {\n  outputAspectRatio: number\n  imageWidth: number\n  imageHeight: number\n}): PercentCrop => {\n  const imageAspect = imageWidth / imageHeight\n\n  // Compute the largest rectangle that fits within the image and matches the aspect ratio\n  let width: number\n  let height: number\n  if (imageAspect >= outputAspectRatio) {\n    // Image is wider than desired aspect: constrain width by the height\n    height = 100\n    const widthInPixels = imageHeight * outputAspectRatio\n    // as percent\n    width = (widthInPixels / imageWidth) * 100\n  } else {\n    // Image is taller/narrower than desired aspect: constrain height by the width\n    width = 100\n    const heightInPixels = imageHeight * outputAspectRatio\n    // as percent\n    height = (heightInPixels / imageHeight) * 100\n  }\n\n  // Center the crop\n  const x = Math.round((100 - width) / 2)\n  const y = Math.round((100 - height) / 2)\n\n  return {\n    unit: '%',\n    width,\n    height,\n    x,\n    y,\n  }\n}\n\nconst ImageCropper = ({\n  imgSrc,\n  disabled,\n  onCropComplete,\n  outputAspectRatio,\n  cropperHeight,\n}: {\n  imgSrc: string\n  disabled?: boolean\n  onCropComplete: (croppedAreaPixels: PercentCrop) => void\n  outputAspectRatio?: number\n  cropperHeight?: number\n}) => {\n  const [crop, setCrop] = React.useState<Crop | undefined>(() =>\n    outputAspectRatio ? undefined : defaultCrop,\n  )\n\n  const handleSetCrop = React.useCallback((_, c: PercentCrop) => {\n    setCrop(c)\n  }, [])\n\n  const handleCropComplete = React.useCallback(\n    (_, c: PercentCrop) => {\n      onCropComplete(c)\n    },\n    [onCropComplete],\n  )\n\n  const handleLoadImage = React.useCallback(\n    ({ currentTarget }: React.SyntheticEvent<HTMLImageElement, Event>) => {\n      if (!outputAspectRatio) return\n      setCrop(\n        getDefaultCropFromAspectRatio({\n          outputAspectRatio,\n          imageWidth: currentTarget.width,\n          imageHeight: currentTarget.height,\n        }),\n      )\n    },\n    [outputAspectRatio],\n  )\n\n  return (\n    <div className=\"ob-cropper__container\">\n      <CropContainer\n        className=\"ob-cropper__cropper-wrapper\"\n        height={cropperHeight}\n      >\n        <ReactImageCrop\n          crop={crop}\n          aspect={outputAspectRatio}\n          onChange={handleSetCrop}\n          onComplete={handleCropComplete}\n          disabled={disabled}\n          className=\"ob-cropper__cropper\"\n          ruleOfThirds\n          keepSelection\n        >\n          <img\n            src={imgSrc}\n            className=\"ob-cropper__image\"\n            onLoad={handleLoadImage}\n          />\n        </ReactImageCrop>\n      </CropContainer>\n    </div>\n  )\n}\n\nexport default memo(ImageCropper)\n\nexport const getAspectRatio = ({\n  width,\n  height,\n}: {\n  width: number\n  height: number\n}) => width / height\n\nconst createImage = (url: string): Promise<HTMLImageElement> => {\n  return new Promise((resolve, reject) => {\n    const image = new Image()\n    image.onload = () => {\n      resolve(image)\n    }\n    image.onerror = (error) => {\n      reject(error)\n    }\n    image.src = url\n    return image\n  })\n}\n\nexport const generateCroppedImageBlob = async ({\n  croppedAreaPercent,\n  imgSrc,\n  size,\n  fileType,\n}: {\n  croppedAreaPercent: PercentCrop\n  imgSrc: string\n  /**\n   * If provided, the cropped image will be resized to the given size. If not\n   * provided, the cropped image will be the same size as the cropped portion of\n   * the source image.\n   */\n  size?: {\n    width: number\n    height: number\n  }\n  fileType?: string\n}): Promise<Blob | null> => {\n  if (!croppedAreaPercent || !imgSrc) {\n    return null\n  }\n  // Source image/canvas\n  const image = await createImage(imgSrc)\n  const canvas = document.createElement('canvas')\n  const ctx = canvas.getContext('2d')\n  if (!ctx) {\n    return null\n  }\n  canvas.width = image.width\n  canvas.height = image.height\n  ctx.drawImage(image, 0, 0)\n\n  // Destination image/canvas\n  const croppedCanvas = document.createElement('canvas')\n  const croppedCtx = croppedCanvas.getContext('2d')\n  if (!croppedCtx) {\n    return null\n  }\n\n  const widthPercentAsPixels = () =>\n    (image.width / 100) * croppedAreaPercent.width\n  const heightPercentAsPixels = () =>\n    (image.height / 100) * croppedAreaPercent.height\n\n  const sourceXPercentAsPixels = () =>\n    (image.width / 100) * croppedAreaPercent.x\n  const sourceYPercentAsPixels = () =>\n    (image.height / 100) * croppedAreaPercent.y\n\n  croppedCanvas.width = size?.width ?? widthPercentAsPixels()\n  croppedCanvas.height = size?.height ?? heightPercentAsPixels()\n\n  // Draw the cropped source image onto the destination canvas\n  croppedCtx.drawImage(\n    canvas,\n    // source x\n    sourceXPercentAsPixels(),\n    // source y\n    sourceYPercentAsPixels(),\n    // source width\n    widthPercentAsPixels(),\n    // source height\n    heightPercentAsPixels(),\n    // destination x\n    0,\n    // destination y\n    0,\n    // destination width\n    croppedCanvas.width,\n    // destination height\n    croppedCanvas.height,\n  )\n\n  return new Promise((resolve) => {\n    croppedCanvas.toBlob((file) => {\n      resolve(file)\n    }, fileType)\n  })\n}\n"]}

package/dist/components/ImageCropper/resource-components.d.ts

@@ -1,10 +1,3 @@
-import * as React from 'react';
 export declare const CropContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     height?: number;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SLIDER_WHEEL_INTERVAL_VALUE: number;
-export declare const ZoomSlider: ({ value, disabled, setValue, }: {
-    value: number;
-    disabled?: boolean;
-    setValue: (value: number) => void;
-}) => React.JSX.Element;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/ImageCropper/resource-components.js

@@ -1,30 +1,14 @@
-import { styled, Stack, IconButton, Slider } from '@mui/material';
-import MaterialIcon from '../MaterialIcon';
-import * as React from 'react';
+import { styled } from '@mui/material';
 export const CropContainer = styled('div', {
     shouldForwardProp: (prop) => prop !== 'height',
-})(({ height }) => ({
+})(({ height, theme }) => ({
     position: 'relative',
     width: '100%',
+    display: 'flex',
+    backdropFilter: 'brightness(0.5)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: theme.shape.borderRadius,
     ...(height ? { height } : { flex: 1 }),
 }));
-const SLIDER_STEP_INTERVAL_VALUE = 0.025;
-const SLIDER_MIN_VALUE = 1;
-const SLIDER_MAX_VALUE = 3;
-const SLIDER_BUTTON_INTERVAL_VALUE = SLIDER_STEP_INTERVAL_VALUE * 10;
-export const SLIDER_WHEEL_INTERVAL_VALUE = SLIDER_STEP_INTERVAL_VALUE * 6;
-export const ZoomSlider = ({ value, disabled = false, setValue, }) => {
-    return (React.createElement(Stack, { spacing: 2, direction: "row", alignItems: "center", justifyContent: "center", pt: 3 },
-        React.createElement(IconButton, { disabled: value === SLIDER_MIN_VALUE || disabled, onClick: () => {
-                const newValue = parseFloat((value - SLIDER_BUTTON_INTERVAL_VALUE).toFixed(3));
-                setValue(newValue < SLIDER_MIN_VALUE ? SLIDER_MIN_VALUE : newValue);
-            }, className: "ob-cropper__zoom-slider-minus-button" },
-            React.createElement(MaterialIcon, null, "remove")),
-        React.createElement(Slider, { "aria-label": "Image Zoom", value: value, min: SLIDER_MIN_VALUE, max: SLIDER_MAX_VALUE, step: SLIDER_STEP_INTERVAL_VALUE, onChange: (e, value) => typeof value === 'number' && setValue(value), disabled: disabled, className: "ob-cropper__zoom-slider" }),
-        React.createElement(IconButton, { disabled: value === SLIDER_MAX_VALUE || disabled, onClick: () => {
-                const newValue = parseFloat((value + SLIDER_BUTTON_INTERVAL_VALUE).toFixed(3));
-                setValue(newValue > SLIDER_MAX_VALUE ? SLIDER_MAX_VALUE : newValue);
-            }, className: "ob-cropper__zoom-slider-plus-button" },
-            React.createElement(MaterialIcon, null, "add"))));
-};
 //# sourceMappingURL=resource-components.js.map

package/dist/components/ImageCropper/resource-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"resource-components.js","sourceRoot":"","sources":["../../../src/components/ImageCropper/resource-components.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAC1C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,EAAE;IACzC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,QAAQ;CAC/C,CAAC,CAAsB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACvC,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;CACvC,CAAC,CAAC,CAAA;AAEH,MAAM,0BAA0B,GAAG,KAAK,CAAA;AACxC,MAAM,gBAAgB,GAAG,CAAC,CAAA;AAC1B,MAAM,gBAAgB,GAAG,CAAC,CAAA;AAC1B,MAAM,4BAA4B,GAAG,0BAA0B,GAAG,EAAE,CAAA;AACpE,MAAM,CAAC,MAAM,2BAA2B,GAAG,0BAA0B,GAAG,CAAC,CAAA;AAEzE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAKT,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,KAAK,IACJ,OAAO,EAAE,CAAC,EACV,SAAS,EAAC,KAAK,EACf,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,EAAE,EAAE,CAAC;QAEL,oBAAC,UAAU,IACT,QAAQ,EAAE,KAAK,KAAK,gBAAgB,IAAI,QAAQ,EAChD,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,QAAQ,GAAG,UAAU,CACzB,CAAC,KAAK,GAAG,4BAA4B,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAClD,CAAA;gBACD,QAAQ,CAAC,QAAQ,GAAG,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;YACrE,CAAC,EACD,SAAS,EAAC,sCAAsC;YAEhD,oBAAC,YAAY,iBAAsB,CACxB;QACb,oBAAC,MAAM,kBACM,YAAY,EACvB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,gBAAgB,EACrB,GAAG,EAAE,gBAAgB,EACrB,IAAI,EAAE,0BAA0B,EAChC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,OAAO,KAAK,KAAK,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,EACpE,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,yBAAyB,GACnC;QACF,oBAAC,UAAU,IACT,QAAQ,EAAE,KAAK,KAAK,gBAAgB,IAAI,QAAQ,EAChD,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,QAAQ,GAAG,UAAU,CACzB,CAAC,KAAK,GAAG,4BAA4B,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAClD,CAAA;gBACD,QAAQ,CAAC,QAAQ,GAAG,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;YACrE,CAAC,EACD,SAAS,EAAC,qCAAqC;YAE/C,oBAAC,YAAY,cAAmB,CACrB,CACP,CACT,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { styled, Stack, IconButton, Slider } from '@mui/material'\nimport MaterialIcon from '../MaterialIcon'\nimport * as React from 'react'\n\nexport const CropContainer = styled('div', {\n  shouldForwardProp: (prop) => prop !== 'height',\n})<{ height?: number }>(({ height }) => ({\n  position: 'relative',\n  width: '100%',\n  ...(height ? { height } : { flex: 1 }),\n}))\n\nconst SLIDER_STEP_INTERVAL_VALUE = 0.025\nconst SLIDER_MIN_VALUE = 1\nconst SLIDER_MAX_VALUE = 3\nconst SLIDER_BUTTON_INTERVAL_VALUE = SLIDER_STEP_INTERVAL_VALUE * 10\nexport const SLIDER_WHEEL_INTERVAL_VALUE = SLIDER_STEP_INTERVAL_VALUE * 6\n\nexport const ZoomSlider = ({\n  value,\n  disabled = false,\n  setValue,\n}: {\n  value: number\n  disabled?: boolean\n  setValue: (value: number) => void\n}) => {\n  return (\n    <Stack\n      spacing={2}\n      direction=\"row\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      pt={3}\n    >\n      <IconButton\n        disabled={value === SLIDER_MIN_VALUE || disabled}\n        onClick={() => {\n          const newValue = parseFloat(\n            (value - SLIDER_BUTTON_INTERVAL_VALUE).toFixed(3),\n          )\n          setValue(newValue < SLIDER_MIN_VALUE ? SLIDER_MIN_VALUE : newValue)\n        }}\n        className=\"ob-cropper__zoom-slider-minus-button\"\n      >\n        <MaterialIcon>remove</MaterialIcon>\n      </IconButton>\n      <Slider\n        aria-label=\"Image Zoom\"\n        value={value}\n        min={SLIDER_MIN_VALUE}\n        max={SLIDER_MAX_VALUE}\n        step={SLIDER_STEP_INTERVAL_VALUE}\n        onChange={(e, value) => typeof value === 'number' && setValue(value)}\n        disabled={disabled}\n        className=\"ob-cropper__zoom-slider\"\n      />\n      <IconButton\n        disabled={value === SLIDER_MAX_VALUE || disabled}\n        onClick={() => {\n          const newValue = parseFloat(\n            (value + SLIDER_BUTTON_INTERVAL_VALUE).toFixed(3),\n          )\n          setValue(newValue > SLIDER_MAX_VALUE ? SLIDER_MAX_VALUE : newValue)\n        }}\n        className=\"ob-cropper__zoom-slider-plus-button\"\n      >\n        <MaterialIcon>add</MaterialIcon>\n      </IconButton>\n    </Stack>\n  )\n}\n"]}
+{"version":3,"file":"resource-components.js","sourceRoot":"","sources":["../../../src/components/ImageCropper/resource-components.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAEtC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,EAAE;IACzC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,QAAQ;CAC/C,CAAC,CAAsB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC9C,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,iBAAiB;IACjC,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,YAAY;IACtC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;CACvC,CAAC,CAAC,CAAA","sourcesContent":["import { styled } from '@mui/material'\n\nexport const CropContainer = styled('div', {\n  shouldForwardProp: (prop) => prop !== 'height',\n})<{ height?: number }>(({ height, theme }) => ({\n  position: 'relative',\n  width: '100%',\n  display: 'flex',\n  backdropFilter: 'brightness(0.5)',\n  alignItems: 'center',\n  justifyContent: 'center',\n  borderRadius: theme.shape.borderRadius,\n  ...(height ? { height } : { flex: 1 }),\n}))\n"]}

package/dist/form-elements/FormElementCamera.js

@@ -181,7 +181,7 @@ function FormElementCamera({ id, element, value, onChange, validationMessage, di
             });
         }
     }, [attachmentUrl, clearIsAnnotating, element, onChange]);
-    const handleSaveCrop = React.useCallback(async (croppedAreaPixels) => {
+    const handleSaveCrop = React.useCallback(async (croppedAreaPercent) => {
         clearIsCropping();
         if (!attachmentUrl)
             return;
@@ -190,7 +190,7 @@ function FormElementCamera({ id, element, value, onChange, validationMessage, di
         });
         try {
             const croppedImage = await generateCroppedImageBlob({
-                croppedAreaPixels,
+                croppedAreaPercent,
                 imgSrc: attachmentUrl,
                 fileType: contentType,
             });

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementCamera.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCamera.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,eAAe,MAAM,0BAA0B,CAAA;AACtD,OAAO,kBAAkB,EAAE,EACzB,kBAAkB,GACnB,MAAM,2BAA2B,CAAA;AAClC,OAAO,SAAS,MAAM,kCAAkC,CAAA;AAExD,OAAO,yBAAyB,MAAM,kDAAkD,CAAA;AACxF,OAAO,qBAAqB,MAAM,mCAAmC,CAAA;AAErE,OAAO,aAAa,MAAM,oCAAoC,CAAA;AAC9D,OAAO,eAAe,EAAE,EACtB,4BAA4B,GAC7B,MAAM,wCAAwC,CAAA;AAC/C,OAAO,KAAK,MAAM,8BAA8B,CAAA;AAChD,OAAO,EACL,yBAAyB,EACzB,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,yBAAyB,CAAA;AAChC,OAAO,gBAAgB,MAAM,qDAAqD,CAAA;AAClF,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACrE,OAAO,uBAAuB,MAAM,4DAA4D,CAAA;AAEhG,OAAO,WAAW,MAAM,gDAAgD,CAAA;AACxE,OAAO,yBAAyB,MAAM,oCAAoC,CAAA;AAC1E,OAAO,YAAY,MAAM,4BAA4B,CAAA;AACrD,OAAO,4BAA4B,MAAM,qDAAqD,CAAA;AAC9F,OAAO,SAAS,MAAM,sCAAsC,CAAA;AAE5D,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAA;AAWrE,SAAS,iBAAiB,CAAC,EACzB,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,OAAO,EACP,UAAU,GACJ;IACN,MAAM,eAAe,GAAG,yBAAyB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;IAC9D,MAAM,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAG1D;QACD,SAAS,EAAE,KAAK;KACjB,CAAC,CAAA;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,EAAE,iBAAiB,CAAC,GACtD,eAAe,CAAC,KAAK,CAAC,CAAA;IACxB,MAAM,CAAC,UAAU,EAAE,aAAa,EAAE,eAAe,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAE3E,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAA;IAEzD,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,QAAQ,CAAC,OAAO,EAAE;YAChB,KAAK,EAAE,SAAS;SACjB,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEvB,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAClC,KAAK,EAAE,WAAgD,EAAE,EAAE;QACzD,IAAI,CAAC,WAAW,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YACrD,OAAM;QACR,CAAC;QAED,MAAM,IAAI,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;QACxC,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAM;QACR,CAAC;QAED,QAAQ,CAAC;YACP,SAAS,EAAE,IAAI;SAChB,CAAC,CAAA;QAEF,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAA;QACxC,IAAI,CAAC;YACH,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACf,MAAM,IAAI,KAAK,CAAC,kCAAkC,CAAC,CAAA;YACrD,CAAC;YAED,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC1C,MAAM,IAAI,KAAK,CACb,sBAAsB,IAAI,CAAC,IAAI,4BAA4B,CAC5D,CAAA;YACH,CAAC;YACD,MAAM,MAAM,GAAG,MAAM,sBAAsB,CACzC,IAAI,EACJ,OAAO,CAAC,yBAAyB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CACtE,CAAA;YAED,IAAI,MAAM,YAAY,IAAI,EAAE,CAAC;gBAC3B,QAAQ,CAAC,OAAO,EAAE;oBAChB,KAAK,EAAE,oBAAoB,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC;iBACxD,CAAC,CAAA;YACJ,CAAC;iBAAM,CAAC;gBACN,MAAM,IAAI,GAAG,MAAM,YAAY,CAAC,MAAM,CAAC,CAAA;gBACvC,QAAQ,CAAC,OAAO,EAAE;oBAChB,KAAK,EAAE,oBAAoB,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC;iBACtD,CAAC,CAAA;YACJ,CAAC;YAED,UAAU,EAAE,CAAA;YACZ,QAAQ,CAAC;gBACP,SAAS,EAAE,KAAK;aACjB,CAAC,CAAA;QACJ,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,QAAQ,CAAC;gBACP,SAAS,EAAE,KAAK;gBAChB,WAAW,EAAE,KAAc;aAC5B,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,EACD,CAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC,CAChC,CAAA;IACD,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,IAAI,MAAM,CAAC,OAAO,IAAI,SAAS,CAAC,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;YACtE,QAAQ,CAAC;gBACP,SAAS,EAAE,IAAI;aAChB,CAAC,CAAA;YACF,SAAS,CAAC,MAAM,CAAC,UAAU,CACzB,CAAC,UAAkB,EAAE,EAAE;gBACrB,cAAc,CAAC,0BAA0B,UAAU,EAAE,CAAC;qBACnD,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;oBACb,QAAQ,CAAC,OAAO,EAAE;wBAChB,KAAK,EAAE,oBAAoB,CAAC,IAAI,EAAE,YAAY,EAAE,OAAO,CAAC;qBACzD,CAAC,CAAA;oBACF,QAAQ,CAAC;wBACP,SAAS,EAAE,KAAK;qBACjB,CAAC,CAAA;gBACJ,CAAC,CAAC;qBACD,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;oBACf,QAAQ,CAAC;wBACP,WAAW,EAAE,KAAK;wBAClB,SAAS,EAAE,KAAK;qBACjB,CAAC,CAAA;gBACJ,CAAC,CAAC,CAAA;YACN,CAAC,EACD,CAAC,KAAY,EAAE,EAAE;gBACf,OAAO,CAAC,IAAI,CACV,oDAAoD,EACpD,KAAK,CACN,CAAA;gBACD,QAAQ,CAAC;oBACP,SAAS,EAAE,KAAK;oBAChB,WAAW,EAAE,KAAK;iBACnB,CAAC,CAAA;YACJ,CAAC,EACD;gBACE,OAAO,EAAE,GAAG;gBACZ,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,QAAQ;gBACvD,UAAU,EAAE,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC,MAAM;gBAClD,SAAS,EAAE,KAAK;gBAChB,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI;gBAC7C,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO;gBAC1C,kBAAkB,EAAE,IAAI;gBACxB,gBAAgB,EAAE,KAAK;gBACvB,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI;aAC9C,CACF,CAAA;QACH,CAAC;aAAM,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YAChC,mFAAmF;YACnF,YAAY,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAA;YAC/B,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;QAC9B,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,KAAK,CACX,6DAA6D,CAC9D,CAAA;QACH,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEvB,MAAM,EACJ,WAAW,EACX,kBAAkB,EAClB,sBAAsB,EACtB,aAAa,EACb,sBAAsB,EACtB,WAAW,EACX,QAAQ,EACR,WAAW,GACZ,GAAG,aAAa,CACf,KAAK,EACL,OAAO,EACP,KAAK,CAAC,WAAW,CACf,CAAC,EAAE,EAAE,UAAU,EAAE,EAAE;QACjB,QAAQ,CAAC,OAAO,EAAE;YAChB,KAAK,EAAE,UAAU;SAClB,CAAC,CAAA;IACJ,CAAC,EACD,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CACF,CAAA;IAED,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ;YAAE,OAAM;QAE/C,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;YACzC,OAAO,GAAG,EAAE;gBACV,QAAQ,CAAC,OAAO,EAAE;oBAChB,KAAK,EAAE;wBACL,IAAI,EAAE,KAAK;wBACX,GAAG,EAAE,KAAK,CAAC,GAAG;wBACd,IAAI,EAAE,KAAK,CAAC,IAAI;wBAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ;wBACxB,SAAS,EAAE,KAAK,CAAC,SAAS;qBAC3B;iBACF,CAAC,CAAA;YACJ,CAAC,CAAA;QACH,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;IAE9B,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAClD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,MAAM,kBAAkB,CAAC,KAAK,EAAE,EAAE,CAAC,CAAA;QACrC,CAAC;aAAM,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC3C,MAAM,kBAAkB,CAAC,KAAK,CAAC,CAAA;QACjC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAA;IAEf,MAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAC5C,KAAK,EAAE,iBAAyB,EAAE,EAAE;QAClC,iBAAiB,EAAE,CAAA;QAEnB,IAAI,OAAO,aAAa,KAAK,QAAQ,EAAE,CAAC;YACtC,OAAM;QACR,CAAC;QAED,QAAQ,CAAC;YACP,SAAS,EAAE,IAAI;SAChB,CAAC,CAAA;QACF,IAAI,CAAC;YACH,MAAM,IAAI,GAAG,MAAM,4BAA4B,CAAC;gBAC9C,iBAAiB;gBACjB,aAAa;aACd,CAAC,CAAA;YACF,QAAQ,CAAC;gBACP,SAAS,EAAE,KAAK;aACjB,CAAC,CAAA;YACF,IAAI,IAAI,EAAE,CAAC;gBACT,MAAM,UAAU,GAAG,oBAAoB,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,CAAC,CAAA;gBACnE,QAAQ,CAAC,OAAO,EAAE;oBAChB,KAAK,EAAE,UAAU;iBAClB,CAAC,CAAA;YACJ,CAAC;QACH,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,QAAQ,CAAC;gBACP,WAAW,EAAE,GAAY;gBACzB,SAAS,EAAE,KAAK;aACjB,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,EACD,CAAC,aAAa,EAAE,iBAAiB,EAAE,OAAO,EAAE,QAAQ,CAAC,CACtD,CAAA;IAED,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,KAAK,EAAE,iBAAuB,EAAE,EAAE;QAChC,eAAe,EAAE,CAAA;QACjB,IAAI,CAAC,aAAa;YAAE,OAAM;QAE1B,QAAQ,CAAC;YACP,SAAS,EAAE,IAAI;SAChB,CAAC,CAAA;QAEF,IAAI,CAAC;YACH,MAAM,YAAY,GAAG,MAAM,wBAAwB,CAAC;gBAClD,iBAAiB;gBACjB,MAAM,EAAE,aAAa;gBACrB,QAAQ,EAAE,WAAW;aACtB,CAAC,CAAA;YAEF,IAAI,CAAC,YAAY;gBAAE,MAAM,IAAI,KAAK,CAAC,uBAAuB,CAAC,CAAA;YAC3D,MAAM,UAAU,GAAG,oBAAoB,CACrC,YAAY,EACZ,WAAW,EACX,OAAO,CACR,CAAA;YACD,QAAQ,CAAC,OAAO,EAAE;gBAChB,KAAK,EAAE,UAAU;aAClB,CAAC,CAAA;YACF,QAAQ,CAAC;gBACP,SAAS,EAAE,KAAK;aACjB,CAAC,CAAA;QACJ,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,QAAQ,CAAC;gBACP,WAAW,EAAE,KAAc;gBAC3B,SAAS,EAAE,KAAK;aACjB,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,EACD,CAAC,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,CAAC,CACjE,CAAA;IAED,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC7D,OAAO,CACL;QACE,oBAAC,yBAAyB,IACxB,SAAS,EAAC,WAAW,EACrB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,OAAO,CAAC,QAAQ;YAE1B,6BAAK,SAAS,EAAC,SAAS;gBACrB,CAAC,KAAK,IAAI,SAAS,CAAC,IAAI,CACvB;oBACE,gCAAQ,SAAS,EAAC,WAAW,EAAC,GAAG,EAAE,kBAAkB;wBACnD,oBAAC,YAAY,IACX,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,kBAAkB,EACtC,sBAAsB,EAAE,sBAAsB,EAC9C,aAAa,EAAE,aAAa,EAC5B,sBAAsB,EAAE,sBAAsB,EAC9C,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,eAAe,EAC3B,MAAM,EAAE,aAAa,EACrB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,GAClB;wBACF,oBAAC,WAAW,IAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,GAAI,CACpD,CACR,CACJ;gBAED,+BACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAC,yDAAyD,EACnE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EAChB,OAAO,EAAC,aAAa,EACrB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,UAAU,mBACL,OAAO,CAAC,QAAQ,GAC/B;gBACF,6BAAK,SAAS,EAAC,oBAAoB,IAChC,KAAK,CAAC,CAAC,CAAC,CACP;oBACG,kBAAkB,IAAI,WAAW,IAAI,CACpC,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,sEAAsE,EAChF,OAAO,EAAE,WAAW,YAGb,CACV;oBACD,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,iEAAiE,EAC3E,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,SAAS,YAGhC;oBACR,WAAW,IAAI,CACd,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,8EAA8E,EACxF,OAAO,EAAE,cAAc;wBAEvB,8BAAM,SAAS,EAAC,MAAM;4BACpB,oBAAC,YAAY,yBAA8B,CACtC;wBACP,mDAA2B,CACpB,CACV,CACA,CACJ,CAAC,CAAC,CAAC,CACF,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,iEAAiE,EAC3E,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,SAAS,sBACrB,eAAe,EACjC,MAAM,EAAE,UAAU,kBAGX,CACV,CACG,CACF;YACL,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAC/D,oBAAC,4BAA4B,IAAC,OAAO,EAAE,iBAAiB,GAAI,CAC7D,CACyB;QAE3B,YAAY,IAAI,aAAa,IAAI,CAChC,oBAAC,eAAe,IACd,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,iBAAiB,EAC1B,MAAM,EAAE,oBAAoB,GAC5B,CACH;QAEA,UAAU,IAAI,aAAa,IAAI,CAC9B,oBAAC,SAAS,IACR,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,eAAe,EACxB,MAAM,EAAE,cAAc,GACtB,CACH;QAEA,WAAW,IAAI,CACd,oBAAC,KAAK,IACJ,MAAM,QACN,KAAK,EAAC,WAAW,EACjB,SAAS,EAAC,qBAAqB,EAC/B,cAAc,EAAC,qBAAqB,EACpC,OAAO,EACL,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,wDAAwD,EAClE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAC7C,SAAS,iBAGF;YAGX;;gBACmE,GAAG;gBACpE,sCAAW;wFAET;YAEJ,6BAAK,SAAS,EAAC,0BAA0B;gBACvC,wCAAa,WAAW,CAAC,QAAQ,EAAE,CAAc,CAC7C,CACA,CACT,CACA,CACJ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA;AAE5C,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,YAAY,CAAC,EACpD,kBAAkB,EAClB,WAAW,EACX,sBAAsB,EACtB,aAAa,EACb,sBAAsB,EACtB,SAAS,EACT,OAAO,EACP,UAAU,EACV,MAAM,EACN,QAAQ,GAOT;IACC,IAAI,kBAAkB,EAAE,CAAC;QACvB,OAAO,CACL,6BAAK,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO;YAC1C,4BAAI,SAAS,EAAC,YAAY,oBAAmB;YAC7C;;gBAC8C,uCAAY;;gBAAI,GAAG;gBAC/D,uCAAY;kCACV,CACA,CACP,CAAA;IACH,CAAC;IAED,IAAI,sBAAsB,EAAE,CAAC;QAC3B,OAAO,CACL,6BAAK,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO;YAC1C,4BAAI,SAAS,EAAC,YAAY,qBAAoB;YAC9C,+BAAI,sBAAsB,CAAC,OAAO,CAAK,CACnC,CACP,CAAA;IACH,CAAC;IAED,IAAI,sBAAsB,IAAI,SAAS,EAAE,CAAC;QACxC,OAAO,CACL,6BAAK,SAAS,EAAC,+DAA+D;YAC5E,oBAAC,SAAS,IAAC,KAAK,SAAG,CACf,CACP,CAAA;IACH,CAAC;IAED,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,CACL;YACE,8BAAM,SAAS,EAAC,mBAAmB;gBACjC,oBAAC,gBAAgB,IACf,sBAAsB,EAAE,sBAAsB,EAC9C,sBAAsB,EAAE,sBAAsB,EAC9C,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,GAClB,CACG;YACP,6BACE,GAAG,EAAE,aAAa,EAClB,SAAS,EAAC,qCAAqC,EAC/C,WAAW,EAAC,WAAW,EACvB,GAAG,EAAE,GAAG,OAAO,CAAC,KAAK,cAAc,GACnC;YACF,6BAAK,SAAS,EAAC,wBAAwB;gBACrC,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,8DAA8D,EACxE,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,OAAO,CAAC,QAAQ;oBAE1B,8BAAM,SAAS,EAAC,MAAM;wBACpB,oBAAC,YAAY,eAAoB,CAC5B,CACA;gBACT,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,sEAAsE,EAChF,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,OAAO,CAAC,QAAQ;oBAE1B,8BAAM,SAAS,EAAC,MAAM;wBACpB,oBAAC,YAAY,gBAAqB,CAC7B,CACA,CACL,CACL,CACJ,CAAA;IACH,CAAC;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO;QAC1C,oBAAC,uBAAuB,OAAG,CACvB,CACP,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import * as React from 'react'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport downloadAttachment, {\n  downloadFileLegacy,\n} from '../services/download-file'\nimport OnLoading from '../components/renderer/OnLoading'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport drawTimestampOnCanvas from '../services/drawTimestampOnCanvas'\nimport { FormElementBinaryStorageValue } from '../types/attachments'\nimport useAttachment from '../hooks/attachments/useAttachment'\nimport AnnotationModal, {\n  superimposeAnnotationOnImage,\n} from '../components/renderer/AnnotationModal'\nimport Modal from '../components/renderer/Modal'\nimport {\n  checkIfContentTypeIsImage,\n  prepareNewAttachment,\n  correctFileOrientation,\n} from '../services/attachments'\nimport AttachmentStatus from '../components/renderer/attachments/AttachmentStatus'\nimport { canvasToBlob, urlToBlobAsync } from '../services/blob-utils'\nimport ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport ProgressBar from '../components/renderer/attachments/ProgressBar'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\nimport CropModal from '../components/ImageCropper/CropModal'\nimport { Area } from 'react-easy-crop'\nimport { generateCroppedImageBlob } from '../components/ImageCropper'\n\ntype Props = {\n  id: string\n  element: FormTypes.CameraElement\n  value: FormElementBinaryStorageValue\n  onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementCamera({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const [{ cameraError, isLoading }, setState] = React.useState<{\n    isLoading: boolean\n    cameraError?: Error\n  }>({\n    isLoading: false,\n  })\n  const [isAnnotating, setIsAnnotating, clearIsAnnotating] =\n    useBooleanState(false)\n  const [isCropping, setIsCropping, clearIsCropping] = useBooleanState(false)\n\n  const fileInputRef = React.useRef<HTMLInputElement>(null)\n\n  const clearImage = React.useCallback(() => {\n    onChange(element, {\n      value: undefined,\n    })\n  }, [element, onChange])\n\n  const fileChange = React.useCallback(\n    async (changeEvent: React.ChangeEvent<HTMLInputElement>) => {\n      if (!changeEvent.target || !changeEvent.target.files) {\n        return\n      }\n\n      const file = changeEvent.target.files[0]\n      if (!file) {\n        return\n      }\n\n      setState({\n        isLoading: true,\n      })\n\n      console.log('File selected event', file)\n      try {\n        if (!file.size) {\n          throw new Error('You cannot upload an empty file.')\n        }\n\n        if (!checkIfContentTypeIsImage(file.type)) {\n          throw new Error(\n            `Invalid file type \"${file.type}\". Please select an image.`,\n          )\n        }\n        const result = await correctFileOrientation(\n          file,\n          element.includeTimestampWatermark ? drawTimestampOnCanvas : undefined,\n        )\n\n        if (result instanceof Blob) {\n          onChange(element, {\n            value: prepareNewAttachment(result, file.name, element),\n          })\n        } else {\n          const blob = await canvasToBlob(result)\n          onChange(element, {\n            value: prepareNewAttachment(blob, file.name, element),\n          })\n        }\n\n        setIsDirty()\n        setState({\n          isLoading: false,\n        })\n      } catch (error) {\n        setState({\n          isLoading: false,\n          cameraError: error as Error,\n        })\n      }\n    },\n    [element, onChange, setIsDirty],\n  )\n  const openCamera = React.useCallback(() => {\n    if (window.cordova && navigator.camera && navigator.camera.getPicture) {\n      setState({\n        isLoading: true,\n      })\n      navigator.camera.getPicture(\n        (base64Data: string) => {\n          urlToBlobAsync(`data:image/jpeg;base64,${base64Data}`)\n            .then((blob) => {\n              onChange(element, {\n                value: prepareNewAttachment(blob, 'photo.jpeg', element),\n              })\n              setState({\n                isLoading: false,\n              })\n            })\n            .catch((error) => {\n              setState({\n                cameraError: error,\n                isLoading: false,\n              })\n            })\n        },\n        (error: Error) => {\n          console.warn(\n            'An error occurred while attempting to take a photo',\n            error,\n          )\n          setState({\n            isLoading: false,\n            cameraError: error,\n          })\n        },\n        {\n          quality: 100,\n          destinationType: window.Camera.DestinationType.DATA_URL,\n          sourceType: window.Camera.PictureSourceType.CAMERA,\n          allowEdit: false,\n          encodingType: window.Camera.EncodingType.JPEG,\n          mediaType: window.Camera.MediaType.PICTURE,\n          correctOrientation: true,\n          saveToPhotoAlbum: false,\n          cameraDirection: window.Camera.Direction.BACK,\n        },\n      )\n    } else if (fileInputRef.current) {\n      // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNIZED\n      fileInputRef.current.value = ''\n      fileInputRef.current.click()\n    } else {\n      console.error(\n        'Could not find \"input\" element in Camera component template',\n      )\n    }\n  }, [element, onChange])\n\n  const {\n    isUploading,\n    uploadErrorMessage,\n    isLoadingAttachmentUrl,\n    attachmentUrl,\n    loadAttachmentUrlError,\n    canDownload,\n    progress,\n    contentType,\n  } = useAttachment(\n    value,\n    element,\n    React.useCallback(\n      (id, attachment) => {\n        onChange(element, {\n          value: attachment,\n        })\n      },\n      [element, onChange],\n    ),\n  )\n\n  const handleRetry = React.useMemo(() => {\n    if (!value || typeof value !== 'object') return\n\n    if (value.type === 'ERROR' && value.data) {\n      return () => {\n        onChange(element, {\n          value: {\n            type: 'NEW',\n            _id: value._id,\n            data: value.data,\n            fileName: value.fileName,\n            isPrivate: value.isPrivate,\n          },\n        })\n      }\n    }\n  }, [element, onChange, value])\n\n  const handleDownload = React.useCallback(async () => {\n    if (typeof value === 'string') {\n      await downloadFileLegacy(value, id)\n    } else if (value && value.type !== 'ERROR') {\n      await downloadAttachment(value)\n    }\n  }, [value, id])\n\n  const handleSaveAnnotation = React.useCallback(\n    async (annotationDataUri: string) => {\n      clearIsAnnotating()\n\n      if (typeof attachmentUrl !== 'string') {\n        return\n      }\n\n      setState({\n        isLoading: true,\n      })\n      try {\n        const blob = await superimposeAnnotationOnImage({\n          annotationDataUri,\n          attachmentUrl,\n        })\n        setState({\n          isLoading: false,\n        })\n        if (blob) {\n          const attachment = prepareNewAttachment(blob, 'photo.png', element)\n          onChange(element, {\n            value: attachment,\n          })\n        }\n      } catch (err) {\n        setState({\n          cameraError: err as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsAnnotating, element, onChange],\n  )\n\n  const handleSaveCrop = React.useCallback(\n    async (croppedAreaPixels: Area) => {\n      clearIsCropping()\n      if (!attachmentUrl) return\n\n      setState({\n        isLoading: true,\n      })\n\n      try {\n        const croppedImage = await generateCroppedImageBlob({\n          croppedAreaPixels,\n          imgSrc: attachmentUrl,\n          fileType: contentType,\n        })\n\n        if (!croppedImage) throw new Error('Cropped image is null')\n        const attachment = prepareNewAttachment(\n          croppedImage,\n          'photo.png',\n          element,\n        )\n        onChange(element, {\n          value: attachment,\n        })\n        setState({\n          isLoading: false,\n        })\n      } catch (error) {\n        setState({\n          cameraError: error as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsCropping, contentType, element, onChange],\n  )\n\n  const progressTooltipRef = React.useRef<HTMLDivElement>(null)\n  return (\n    <>\n      <FormElementLabelContainer\n        className=\"ob-camera\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        <div className=\"control\">\n          {(value || isLoading) && (\n            <>\n              <figure className=\"ob-figure\" ref={progressTooltipRef}>\n                <DisplayImage\n                  isUploading={isUploading}\n                  uploadErrorMessage={uploadErrorMessage}\n                  isLoadingAttachmentUrl={isLoadingAttachmentUrl}\n                  attachmentUrl={attachmentUrl}\n                  loadAttachmentUrlError={loadAttachmentUrlError}\n                  isLoading={isLoading}\n                  element={element}\n                  onAnnotate={setIsAnnotating}\n                  onCrop={setIsCropping}\n                  canDownload={canDownload}\n                  progress={progress}\n                />\n                <ProgressBar isShowing={isUploading} progress={progress} />\n              </figure>\n            </>\n          )}\n\n          <input\n            ref={fileInputRef}\n            className=\"ob-input ob-camera__input-hidden cypress-camera-control\"\n            type=\"file\"\n            accept=\"image/*\"\n            capture=\"environment\"\n            id={id}\n            name={element.name}\n            required={element.required}\n            disabled={element.readOnly}\n            onChange={fileChange}\n            aria-required={element.required}\n          />\n          <div className=\"buttons ob-buttons\">\n            {value ? (\n              <>\n                {uploadErrorMessage && handleRetry && (\n                  <button\n                    type=\"button\"\n                    className=\"button ob-button ob-button__retry is-light cypress-retry-file-button\"\n                    onClick={handleRetry}\n                  >\n                    Retry\n                  </button>\n                )}\n                <button\n                  type=\"button\"\n                  className=\"button ob-button ob-button__clear is-light cypress-clear-camera\"\n                  onClick={clearImage}\n                  disabled={element.readOnly || isLoading}\n                >\n                  Clear\n                </button>\n                {canDownload && (\n                  <button\n                    type=\"button\"\n                    className=\"button ob-button ob-button__download is-primary cypress-download-file-button\"\n                    onClick={handleDownload}\n                  >\n                    <span className=\"icon\">\n                      <MaterialIcon>cloud_download</MaterialIcon>\n                    </span>\n                    <span>&nbsp;Download</span>\n                  </button>\n                )}\n              </>\n            ) : (\n              <button\n                type=\"button\"\n                className=\"button ob-button ob-button__open is-primary cypress-open-camera\"\n                onClick={openCamera}\n                disabled={element.readOnly || isLoading}\n                aria-describedby={ariaDescribedby}\n                onBlur={setIsDirty}\n              >\n                Open Camera\n              </button>\n            )}\n          </div>\n        </div>\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n\n      {isAnnotating && attachmentUrl && (\n        <AnnotationModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsAnnotating}\n          onSave={handleSaveAnnotation}\n        />\n      )}\n\n      {isCropping && attachmentUrl && (\n        <CropModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsCropping}\n          onSave={handleSaveCrop}\n        />\n      )}\n\n      {cameraError && (\n        <Modal\n          isOpen\n          title=\"Whoops...\"\n          className=\"cypress-error-modal\"\n          titleClassName=\"cypress-error-title\"\n          actions={\n            <button\n              type=\"button\"\n              className=\"button ob-button is-primary cypress-close-error-button\"\n              onClick={() => setState({ isLoading: false })}\n              autoFocus\n            >\n              Okay\n            </button>\n          }\n        >\n          <p>\n            An error occurred while attempting to take a photo. Please click{' '}\n            <b>Okay</b> below to try again. If the problem persists, please\n            contact support.\n          </p>\n\n          <div className=\"content has-margin-top-6\">\n            <blockquote>{cameraError.toString()}</blockquote>\n          </div>\n        </Modal>\n      )}\n    </>\n  )\n}\n\nexport default React.memo(FormElementCamera)\n\nconst DisplayImage = React.memo(function DisplayImage({\n  uploadErrorMessage,\n  isUploading,\n  isLoadingAttachmentUrl,\n  attachmentUrl,\n  loadAttachmentUrlError,\n  isLoading,\n  element,\n  onAnnotate,\n  onCrop,\n  progress,\n}: Omit<ReturnType<typeof useAttachment>, 'contentType'> & {\n  element: FormTypes.CameraElement\n  isLoading: boolean\n  onAnnotate: () => void\n  onCrop: () => void\n  progress: number | undefined\n}) {\n  if (uploadErrorMessage) {\n    return (\n      <div className=\"figure-content\" role=\"alert\">\n        <h3 className=\"title is-3\">Upload Failed</h3>\n        <p>\n          Your photo failed to upload, please use the <b>Retry</b> or{' '}\n          <b>Clear</b> buttons below.\n        </p>\n      </div>\n    )\n  }\n\n  if (loadAttachmentUrlError) {\n    return (\n      <div className=\"figure-content\" role=\"alert\">\n        <h3 className=\"title is-3\">Preview Failed</h3>\n        <p>{loadAttachmentUrlError.message}</p>\n      </div>\n    )\n  }\n\n  if (isLoadingAttachmentUrl || isLoading) {\n    return (\n      <div className=\"figure-content has-text-centered cypress-camera-loading-image\">\n        <OnLoading small />\n      </div>\n    )\n  }\n\n  if (attachmentUrl) {\n    return (\n      <>\n        <span className=\"ob-figure__status\">\n          <AttachmentStatus\n            isLoadingAttachmentUrl={isLoadingAttachmentUrl}\n            loadAttachmentUrlError={loadAttachmentUrlError}\n            isUploading={isUploading}\n            attachmentUrl={attachmentUrl}\n            progress={progress}\n          />\n        </span>\n        <img\n          src={attachmentUrl}\n          className=\"cypress-camera-image ob-camera__img\"\n          crossOrigin=\"anonymous\"\n          alt={`${element.label}: Attachment`}\n        />\n        <div className=\"ob-image-file__actions\">\n          <button\n            type=\"button\"\n            className=\"button is-primary ob-camera__crop-button cypress-crop-button\"\n            onClick={onCrop}\n            disabled={element.readOnly}\n          >\n            <span className=\"icon\">\n              <MaterialIcon>crop</MaterialIcon>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            className=\"button is-primary ob-camera__annotate-button cypress-annotate-button\"\n            onClick={onAnnotate}\n            disabled={element.readOnly}\n          >\n            <span className=\"icon\">\n              <MaterialIcon>brush</MaterialIcon>\n            </span>\n          </button>\n        </div>\n      </>\n    )\n  }\n\n  return (\n    <div className=\"figure-content\" role=\"alert\">\n      <ImagePreviewUnavailable />\n    </div>\n  )\n})\n"]}
+{"version":3,"file":"FormElementCamera.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCamera.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\n\nimport useBooleanState from '../hooks/useBooleanState'\nimport downloadAttachment, {\n  downloadFileLegacy,\n} from '../services/download-file'\nimport OnLoading from '../components/renderer/OnLoading'\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport drawTimestampOnCanvas from '../services/drawTimestampOnCanvas'\nimport { FormElementBinaryStorageValue } from '../types/attachments'\nimport useAttachment from '../hooks/attachments/useAttachment'\nimport AnnotationModal, {\n  superimposeAnnotationOnImage,\n} from '../components/renderer/AnnotationModal'\nimport Modal from '../components/renderer/Modal'\nimport {\n  checkIfContentTypeIsImage,\n  prepareNewAttachment,\n  correctFileOrientation,\n} from '../services/attachments'\nimport AttachmentStatus from '../components/renderer/attachments/AttachmentStatus'\nimport { canvasToBlob, urlToBlobAsync } from '../services/blob-utils'\nimport ImagePreviewUnavailable from '../components/renderer/attachments/ImagePreviewUnavailable'\nimport { FormElementValueChangeHandler, IsDirtyProps } from '../types/form'\nimport ProgressBar from '../components/renderer/attachments/ProgressBar'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\nimport MaterialIcon from '../components/MaterialIcon'\nimport FormElementValidationMessage from '../components/renderer/FormElementValidationMessage'\nimport CropModal from '../components/ImageCropper/CropModal'\nimport { generateCroppedImageBlob } from '../components/ImageCropper'\nimport { PercentCrop } from 'react-image-crop'\n\ntype Props = {\n  id: string\n  element: FormTypes.CameraElement\n  value: FormElementBinaryStorageValue\n  onChange: FormElementValueChangeHandler<FormElementBinaryStorageValue>\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n} & IsDirtyProps\n\nfunction FormElementCamera({\n  id,\n  element,\n  value,\n  onChange,\n  validationMessage,\n  displayValidationMessage,\n  isDirty,\n  setIsDirty,\n}: Props) {\n  const ariaDescribedby = useElementAriaDescribedby(id, element)\n  const [{ cameraError, isLoading }, setState] = React.useState<{\n    isLoading: boolean\n    cameraError?: Error\n  }>({\n    isLoading: false,\n  })\n  const [isAnnotating, setIsAnnotating, clearIsAnnotating] =\n    useBooleanState(false)\n  const [isCropping, setIsCropping, clearIsCropping] = useBooleanState(false)\n\n  const fileInputRef = React.useRef<HTMLInputElement>(null)\n\n  const clearImage = React.useCallback(() => {\n    onChange(element, {\n      value: undefined,\n    })\n  }, [element, onChange])\n\n  const fileChange = React.useCallback(\n    async (changeEvent: React.ChangeEvent<HTMLInputElement>) => {\n      if (!changeEvent.target || !changeEvent.target.files) {\n        return\n      }\n\n      const file = changeEvent.target.files[0]\n      if (!file) {\n        return\n      }\n\n      setState({\n        isLoading: true,\n      })\n\n      console.log('File selected event', file)\n      try {\n        if (!file.size) {\n          throw new Error('You cannot upload an empty file.')\n        }\n\n        if (!checkIfContentTypeIsImage(file.type)) {\n          throw new Error(\n            `Invalid file type \"${file.type}\". Please select an image.`,\n          )\n        }\n        const result = await correctFileOrientation(\n          file,\n          element.includeTimestampWatermark ? drawTimestampOnCanvas : undefined,\n        )\n\n        if (result instanceof Blob) {\n          onChange(element, {\n            value: prepareNewAttachment(result, file.name, element),\n          })\n        } else {\n          const blob = await canvasToBlob(result)\n          onChange(element, {\n            value: prepareNewAttachment(blob, file.name, element),\n          })\n        }\n\n        setIsDirty()\n        setState({\n          isLoading: false,\n        })\n      } catch (error) {\n        setState({\n          isLoading: false,\n          cameraError: error as Error,\n        })\n      }\n    },\n    [element, onChange, setIsDirty],\n  )\n  const openCamera = React.useCallback(() => {\n    if (window.cordova && navigator.camera && navigator.camera.getPicture) {\n      setState({\n        isLoading: true,\n      })\n      navigator.camera.getPicture(\n        (base64Data: string) => {\n          urlToBlobAsync(`data:image/jpeg;base64,${base64Data}`)\n            .then((blob) => {\n              onChange(element, {\n                value: prepareNewAttachment(blob, 'photo.jpeg', element),\n              })\n              setState({\n                isLoading: false,\n              })\n            })\n            .catch((error) => {\n              setState({\n                cameraError: error,\n                isLoading: false,\n              })\n            })\n        },\n        (error: Error) => {\n          console.warn(\n            'An error occurred while attempting to take a photo',\n            error,\n          )\n          setState({\n            isLoading: false,\n            cameraError: error,\n          })\n        },\n        {\n          quality: 100,\n          destinationType: window.Camera.DestinationType.DATA_URL,\n          sourceType: window.Camera.PictureSourceType.CAMERA,\n          allowEdit: false,\n          encodingType: window.Camera.EncodingType.JPEG,\n          mediaType: window.Camera.MediaType.PICTURE,\n          correctOrientation: true,\n          saveToPhotoAlbum: false,\n          cameraDirection: window.Camera.Direction.BACK,\n        },\n      )\n    } else if (fileInputRef.current) {\n      // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNIZED\n      fileInputRef.current.value = ''\n      fileInputRef.current.click()\n    } else {\n      console.error(\n        'Could not find \"input\" element in Camera component template',\n      )\n    }\n  }, [element, onChange])\n\n  const {\n    isUploading,\n    uploadErrorMessage,\n    isLoadingAttachmentUrl,\n    attachmentUrl,\n    loadAttachmentUrlError,\n    canDownload,\n    progress,\n    contentType,\n  } = useAttachment(\n    value,\n    element,\n    React.useCallback(\n      (id, attachment) => {\n        onChange(element, {\n          value: attachment,\n        })\n      },\n      [element, onChange],\n    ),\n  )\n\n  const handleRetry = React.useMemo(() => {\n    if (!value || typeof value !== 'object') return\n\n    if (value.type === 'ERROR' && value.data) {\n      return () => {\n        onChange(element, {\n          value: {\n            type: 'NEW',\n            _id: value._id,\n            data: value.data,\n            fileName: value.fileName,\n            isPrivate: value.isPrivate,\n          },\n        })\n      }\n    }\n  }, [element, onChange, value])\n\n  const handleDownload = React.useCallback(async () => {\n    if (typeof value === 'string') {\n      await downloadFileLegacy(value, id)\n    } else if (value && value.type !== 'ERROR') {\n      await downloadAttachment(value)\n    }\n  }, [value, id])\n\n  const handleSaveAnnotation = React.useCallback(\n    async (annotationDataUri: string) => {\n      clearIsAnnotating()\n\n      if (typeof attachmentUrl !== 'string') {\n        return\n      }\n\n      setState({\n        isLoading: true,\n      })\n      try {\n        const blob = await superimposeAnnotationOnImage({\n          annotationDataUri,\n          attachmentUrl,\n        })\n        setState({\n          isLoading: false,\n        })\n        if (blob) {\n          const attachment = prepareNewAttachment(blob, 'photo.png', element)\n          onChange(element, {\n            value: attachment,\n          })\n        }\n      } catch (err) {\n        setState({\n          cameraError: err as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsAnnotating, element, onChange],\n  )\n\n  const handleSaveCrop = React.useCallback(\n    async (croppedAreaPercent: PercentCrop) => {\n      clearIsCropping()\n      if (!attachmentUrl) return\n\n      setState({\n        isLoading: true,\n      })\n\n      try {\n        const croppedImage = await generateCroppedImageBlob({\n          croppedAreaPercent,\n          imgSrc: attachmentUrl,\n          fileType: contentType,\n        })\n\n        if (!croppedImage) throw new Error('Cropped image is null')\n        const attachment = prepareNewAttachment(\n          croppedImage,\n          'photo.png',\n          element,\n        )\n        onChange(element, {\n          value: attachment,\n        })\n        setState({\n          isLoading: false,\n        })\n      } catch (error) {\n        setState({\n          cameraError: error as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsCropping, contentType, element, onChange],\n  )\n\n  const progressTooltipRef = React.useRef<HTMLDivElement>(null)\n  return (\n    <>\n      <FormElementLabelContainer\n        className=\"ob-camera\"\n        element={element}\n        id={id}\n        required={element.required}\n      >\n        <div className=\"control\">\n          {(value || isLoading) && (\n            <>\n              <figure className=\"ob-figure\" ref={progressTooltipRef}>\n                <DisplayImage\n                  isUploading={isUploading}\n                  uploadErrorMessage={uploadErrorMessage}\n                  isLoadingAttachmentUrl={isLoadingAttachmentUrl}\n                  attachmentUrl={attachmentUrl}\n                  loadAttachmentUrlError={loadAttachmentUrlError}\n                  isLoading={isLoading}\n                  element={element}\n                  onAnnotate={setIsAnnotating}\n                  onCrop={setIsCropping}\n                  canDownload={canDownload}\n                  progress={progress}\n                />\n                <ProgressBar isShowing={isUploading} progress={progress} />\n              </figure>\n            </>\n          )}\n\n          <input\n            ref={fileInputRef}\n            className=\"ob-input ob-camera__input-hidden cypress-camera-control\"\n            type=\"file\"\n            accept=\"image/*\"\n            capture=\"environment\"\n            id={id}\n            name={element.name}\n            required={element.required}\n            disabled={element.readOnly}\n            onChange={fileChange}\n            aria-required={element.required}\n          />\n          <div className=\"buttons ob-buttons\">\n            {value ? (\n              <>\n                {uploadErrorMessage && handleRetry && (\n                  <button\n                    type=\"button\"\n                    className=\"button ob-button ob-button__retry is-light cypress-retry-file-button\"\n                    onClick={handleRetry}\n                  >\n                    Retry\n                  </button>\n                )}\n                <button\n                  type=\"button\"\n                  className=\"button ob-button ob-button__clear is-light cypress-clear-camera\"\n                  onClick={clearImage}\n                  disabled={element.readOnly || isLoading}\n                >\n                  Clear\n                </button>\n                {canDownload && (\n                  <button\n                    type=\"button\"\n                    className=\"button ob-button ob-button__download is-primary cypress-download-file-button\"\n                    onClick={handleDownload}\n                  >\n                    <span className=\"icon\">\n                      <MaterialIcon>cloud_download</MaterialIcon>\n                    </span>\n                    <span>&nbsp;Download</span>\n                  </button>\n                )}\n              </>\n            ) : (\n              <button\n                type=\"button\"\n                className=\"button ob-button ob-button__open is-primary cypress-open-camera\"\n                onClick={openCamera}\n                disabled={element.readOnly || isLoading}\n                aria-describedby={ariaDescribedby}\n                onBlur={setIsDirty}\n              >\n                Open Camera\n              </button>\n            )}\n          </div>\n        </div>\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n      </FormElementLabelContainer>\n\n      {isAnnotating && attachmentUrl && (\n        <AnnotationModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsAnnotating}\n          onSave={handleSaveAnnotation}\n        />\n      )}\n\n      {isCropping && attachmentUrl && (\n        <CropModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsCropping}\n          onSave={handleSaveCrop}\n        />\n      )}\n\n      {cameraError && (\n        <Modal\n          isOpen\n          title=\"Whoops...\"\n          className=\"cypress-error-modal\"\n          titleClassName=\"cypress-error-title\"\n          actions={\n            <button\n              type=\"button\"\n              className=\"button ob-button is-primary cypress-close-error-button\"\n              onClick={() => setState({ isLoading: false })}\n              autoFocus\n            >\n              Okay\n            </button>\n          }\n        >\n          <p>\n            An error occurred while attempting to take a photo. Please click{' '}\n            <b>Okay</b> below to try again. If the problem persists, please\n            contact support.\n          </p>\n\n          <div className=\"content has-margin-top-6\">\n            <blockquote>{cameraError.toString()}</blockquote>\n          </div>\n        </Modal>\n      )}\n    </>\n  )\n}\n\nexport default React.memo(FormElementCamera)\n\nconst DisplayImage = React.memo(function DisplayImage({\n  uploadErrorMessage,\n  isUploading,\n  isLoadingAttachmentUrl,\n  attachmentUrl,\n  loadAttachmentUrlError,\n  isLoading,\n  element,\n  onAnnotate,\n  onCrop,\n  progress,\n}: Omit<ReturnType<typeof useAttachment>, 'contentType'> & {\n  element: FormTypes.CameraElement\n  isLoading: boolean\n  onAnnotate: () => void\n  onCrop: () => void\n  progress: number | undefined\n}) {\n  if (uploadErrorMessage) {\n    return (\n      <div className=\"figure-content\" role=\"alert\">\n        <h3 className=\"title is-3\">Upload Failed</h3>\n        <p>\n          Your photo failed to upload, please use the <b>Retry</b> or{' '}\n          <b>Clear</b> buttons below.\n        </p>\n      </div>\n    )\n  }\n\n  if (loadAttachmentUrlError) {\n    return (\n      <div className=\"figure-content\" role=\"alert\">\n        <h3 className=\"title is-3\">Preview Failed</h3>\n        <p>{loadAttachmentUrlError.message}</p>\n      </div>\n    )\n  }\n\n  if (isLoadingAttachmentUrl || isLoading) {\n    return (\n      <div className=\"figure-content has-text-centered cypress-camera-loading-image\">\n        <OnLoading small />\n      </div>\n    )\n  }\n\n  if (attachmentUrl) {\n    return (\n      <>\n        <span className=\"ob-figure__status\">\n          <AttachmentStatus\n            isLoadingAttachmentUrl={isLoadingAttachmentUrl}\n            loadAttachmentUrlError={loadAttachmentUrlError}\n            isUploading={isUploading}\n            attachmentUrl={attachmentUrl}\n            progress={progress}\n          />\n        </span>\n        <img\n          src={attachmentUrl}\n          className=\"cypress-camera-image ob-camera__img\"\n          crossOrigin=\"anonymous\"\n          alt={`${element.label}: Attachment`}\n        />\n        <div className=\"ob-image-file__actions\">\n          <button\n            type=\"button\"\n            className=\"button is-primary ob-camera__crop-button cypress-crop-button\"\n            onClick={onCrop}\n            disabled={element.readOnly}\n          >\n            <span className=\"icon\">\n              <MaterialIcon>crop</MaterialIcon>\n            </span>\n          </button>\n          <button\n            type=\"button\"\n            className=\"button is-primary ob-camera__annotate-button cypress-annotate-button\"\n            onClick={onAnnotate}\n            disabled={element.readOnly}\n          >\n            <span className=\"icon\">\n              <MaterialIcon>brush</MaterialIcon>\n            </span>\n          </button>\n        </div>\n      </>\n    )\n  }\n\n  return (\n    <div className=\"figure-content\" role=\"alert\">\n      <ImagePreviewUnavailable />\n    </div>\n  )\n})\n"]}

package/dist/form-elements/FormElementFile.js

@@ -57,7 +57,7 @@ const FormElementFile = ({ element, onRemove, file, onChange, disableUpload, ind
             });
         }
     }, [attachmentUrl, clearIsAnnotating, element, file, onChange]);
-    const handleSaveCrop = React.useCallback(async (croppedAreaPixels) => {
+    const handleSaveCrop = React.useCallback(async (croppedAreaPercent) => {
         if (!attachmentUrl || file.type)
             return;
         clearIsCropping();
@@ -66,7 +66,7 @@ const FormElementFile = ({ element, onRemove, file, onChange, disableUpload, ind
         });
         try {
             const croppedImage = await generateCroppedImageBlob({
-                croppedAreaPixels,
+                croppedAreaPercent,
                 imgSrc: attachmentUrl,
                 fileType: contentType,
             });

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

@@ -1 +1 @@
-{"version":3,"file":"FormElementFile.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFile.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport downloadAttachment from '../services/download-file'\nimport { FormTypes } from '@oneblink/types'\nimport useAttachment, { OnChange } from '../hooks/attachments/useAttachment'\nimport FileCard from '../components/renderer/attachments/FileCard'\nimport { attachmentsService } from '@oneblink/apps'\nimport useBooleanState from '../hooks/useBooleanState'\nimport CropModal from '../components/ImageCropper/CropModal'\nimport AnnotationModal, {\n  superimposeAnnotationOnImage,\n} from '../components/renderer/AnnotationModal'\nimport { Area } from 'react-easy-crop'\nimport { generateCroppedImageBlob } from '../components/ImageCropper'\nimport { prepareNewAttachment } from '../services/attachments'\nimport Modal from '../components/renderer/Modal'\n\ntype Props = {\n  element: FormTypes.FilesElement\n  /** If set to `undefined`, the remove button will be hidden */\n  onRemove: ((id: string) => void) | undefined\n  file: attachmentsService.Attachment\n  disableUpload: boolean\n  onChange: OnChange\n  index: number\n}\n\nconst FormElementFile = ({\n  element,\n  onRemove,\n  file,\n  onChange,\n  disableUpload,\n  index,\n}: Props) => {\n  const [isAnnotating, setIsAnnotating, clearIsAnnotating] =\n    useBooleanState(false)\n  const [isCropping, setIsCropping, clearIsCropping] = useBooleanState(false)\n  const [state, setState] = React.useState<{\n    isLoading: boolean\n    error?: Error\n  }>({\n    isLoading: false,\n    error: undefined,\n  })\n  const {\n    attachmentUrl,\n    contentType,\n    isUploading,\n    uploadErrorMessage,\n    isLoadingAttachmentUrl,\n    loadAttachmentUrlError,\n    isContentTypeImage,\n    canDownload,\n    progress,\n  } = useAttachment(file, element, onChange, disableUpload)\n\n  const handleRemove = React.useMemo(() => {\n    if (!onRemove) {\n      return\n    }\n    return () => {\n      if (!file.type) {\n        return onRemove(file.id)\n      }\n      return onRemove(file._id)\n    }\n  }, [file, onRemove])\n\n  const handleDownload = React.useCallback(async () => {\n    await downloadAttachment(file)\n  }, [file])\n\n  const handleAnnotate = React.useCallback(\n    async (annotationDataUri: string) => {\n      if (!attachmentUrl || file.type) return\n      clearIsAnnotating()\n\n      setState({\n        isLoading: true,\n      })\n\n      try {\n        const blob = await superimposeAnnotationOnImage({\n          annotationDataUri,\n          attachmentUrl,\n        })\n        setState({\n          isLoading: false,\n        })\n        if (!blob) return\n        const attachment = prepareNewAttachment(blob, file.fileName, element)\n        onChange(file.id, attachment)\n      } catch (error) {\n        setState({\n          error: error as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsAnnotating, element, file, onChange],\n  )\n  const handleSaveCrop = React.useCallback(\n    async (croppedAreaPixels: Area) => {\n      if (!attachmentUrl || file.type) return\n      clearIsCropping()\n\n      setState({\n        isLoading: true,\n      })\n\n      try {\n        const croppedImage = await generateCroppedImageBlob({\n          croppedAreaPixels,\n          imgSrc: attachmentUrl,\n          fileType: contentType,\n        })\n        setState({\n          isLoading: false,\n        })\n        if (!croppedImage) return\n        const attachment = prepareNewAttachment(\n          croppedImage,\n          file.fileName,\n          element,\n        )\n        onChange(file.id, attachment)\n      } catch (error) {\n        setState({\n          error: error as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsCropping, contentType, element, file, onChange],\n  )\n  const handleRetry = React.useMemo(() => {\n    if (file.type === 'ERROR' && file.data) {\n      return () => {\n        onChange(file._id, {\n          type: 'NEW',\n          _id: file._id,\n          data: file.data,\n          fileName: file.fileName,\n          isPrivate: file.isPrivate,\n        })\n      }\n    }\n  }, [file, onChange])\n\n  return (\n    <>\n      <FileCard\n        element={element}\n        isUploading={isUploading}\n        isUploadPaused={disableUpload}\n        uploadErrorMessage={uploadErrorMessage}\n        loadAttachmentUrlError={loadAttachmentUrlError}\n        isLoadingAttachmentUrl={isLoadingAttachmentUrl || state.isLoading}\n        attachmentUrl={attachmentUrl}\n        isContentTypeImage={isContentTypeImage}\n        fileName={file.fileName}\n        onDownload={canDownload ? handleDownload : undefined}\n        onRemove={handleRemove}\n        onRetry={handleRetry}\n        progress={progress}\n        index={index}\n        onAnnotate={isContentTypeImage ? setIsAnnotating : undefined}\n        onCrop={isContentTypeImage ? setIsCropping : undefined}\n      />\n      {isCropping && attachmentUrl && (\n        <CropModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsCropping}\n          onSave={handleSaveCrop}\n        />\n      )}\n      {isAnnotating && attachmentUrl && (\n        <AnnotationModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsAnnotating}\n          onSave={handleAnnotate}\n        />\n      )}\n      {state.error && (\n        <Modal\n          isOpen\n          title=\"Whoops...\"\n          className=\"cypress-error-modal\"\n          titleClassName=\"cypress-error-title\"\n          actions={\n            <button\n              type=\"button\"\n              className=\"button ob-button is-primary cypress-close-error-button\"\n              onClick={() => setState({ isLoading: false })}\n              autoFocus\n            >\n              Okay\n            </button>\n          }\n        >\n          <p>\n            An error occurred while attempting to edit an image. 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>{state.error.toString()}</blockquote>\n          </div>\n        </Modal>\n      )}\n    </>\n  )\n}\n\nexport default React.memo<Props>(FormElementFile)\n"]}
+{"version":3,"file":"FormElementFile.js","sourceRoot":"","sources":["../../src/form-elements/FormElementFile.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport downloadAttachment from '../services/download-file'\nimport { FormTypes } from '@oneblink/types'\nimport useAttachment, { OnChange } from '../hooks/attachments/useAttachment'\nimport FileCard from '../components/renderer/attachments/FileCard'\nimport { attachmentsService } from '@oneblink/apps'\nimport useBooleanState from '../hooks/useBooleanState'\nimport CropModal from '../components/ImageCropper/CropModal'\nimport AnnotationModal, {\n  superimposeAnnotationOnImage,\n} from '../components/renderer/AnnotationModal'\nimport { generateCroppedImageBlob } from '../components/ImageCropper'\nimport { prepareNewAttachment } from '../services/attachments'\nimport Modal from '../components/renderer/Modal'\nimport { PercentCrop } from 'react-image-crop'\n\ntype Props = {\n  element: FormTypes.FilesElement\n  /** If set to `undefined`, the remove button will be hidden */\n  onRemove: ((id: string) => void) | undefined\n  file: attachmentsService.Attachment\n  disableUpload: boolean\n  onChange: OnChange\n  index: number\n}\n\nconst FormElementFile = ({\n  element,\n  onRemove,\n  file,\n  onChange,\n  disableUpload,\n  index,\n}: Props) => {\n  const [isAnnotating, setIsAnnotating, clearIsAnnotating] =\n    useBooleanState(false)\n  const [isCropping, setIsCropping, clearIsCropping] = useBooleanState(false)\n  const [state, setState] = React.useState<{\n    isLoading: boolean\n    error?: Error\n  }>({\n    isLoading: false,\n    error: undefined,\n  })\n  const {\n    attachmentUrl,\n    contentType,\n    isUploading,\n    uploadErrorMessage,\n    isLoadingAttachmentUrl,\n    loadAttachmentUrlError,\n    isContentTypeImage,\n    canDownload,\n    progress,\n  } = useAttachment(file, element, onChange, disableUpload)\n\n  const handleRemove = React.useMemo(() => {\n    if (!onRemove) {\n      return\n    }\n    return () => {\n      if (!file.type) {\n        return onRemove(file.id)\n      }\n      return onRemove(file._id)\n    }\n  }, [file, onRemove])\n\n  const handleDownload = React.useCallback(async () => {\n    await downloadAttachment(file)\n  }, [file])\n\n  const handleAnnotate = React.useCallback(\n    async (annotationDataUri: string) => {\n      if (!attachmentUrl || file.type) return\n      clearIsAnnotating()\n\n      setState({\n        isLoading: true,\n      })\n\n      try {\n        const blob = await superimposeAnnotationOnImage({\n          annotationDataUri,\n          attachmentUrl,\n        })\n        setState({\n          isLoading: false,\n        })\n        if (!blob) return\n        const attachment = prepareNewAttachment(blob, file.fileName, element)\n        onChange(file.id, attachment)\n      } catch (error) {\n        setState({\n          error: error as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsAnnotating, element, file, onChange],\n  )\n  const handleSaveCrop = React.useCallback(\n    async (croppedAreaPercent: PercentCrop) => {\n      if (!attachmentUrl || file.type) return\n      clearIsCropping()\n\n      setState({\n        isLoading: true,\n      })\n\n      try {\n        const croppedImage = await generateCroppedImageBlob({\n          croppedAreaPercent,\n          imgSrc: attachmentUrl,\n          fileType: contentType,\n        })\n        setState({\n          isLoading: false,\n        })\n        if (!croppedImage) return\n        const attachment = prepareNewAttachment(\n          croppedImage,\n          file.fileName,\n          element,\n        )\n        onChange(file.id, attachment)\n      } catch (error) {\n        setState({\n          error: error as Error,\n          isLoading: false,\n        })\n      }\n    },\n    [attachmentUrl, clearIsCropping, contentType, element, file, onChange],\n  )\n  const handleRetry = React.useMemo(() => {\n    if (file.type === 'ERROR' && file.data) {\n      return () => {\n        onChange(file._id, {\n          type: 'NEW',\n          _id: file._id,\n          data: file.data,\n          fileName: file.fileName,\n          isPrivate: file.isPrivate,\n        })\n      }\n    }\n  }, [file, onChange])\n\n  return (\n    <>\n      <FileCard\n        element={element}\n        isUploading={isUploading}\n        isUploadPaused={disableUpload}\n        uploadErrorMessage={uploadErrorMessage}\n        loadAttachmentUrlError={loadAttachmentUrlError}\n        isLoadingAttachmentUrl={isLoadingAttachmentUrl || state.isLoading}\n        attachmentUrl={attachmentUrl}\n        isContentTypeImage={isContentTypeImage}\n        fileName={file.fileName}\n        onDownload={canDownload ? handleDownload : undefined}\n        onRemove={handleRemove}\n        onRetry={handleRetry}\n        progress={progress}\n        index={index}\n        onAnnotate={isContentTypeImage ? setIsAnnotating : undefined}\n        onCrop={isContentTypeImage ? setIsCropping : undefined}\n      />\n      {isCropping && attachmentUrl && (\n        <CropModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsCropping}\n          onSave={handleSaveCrop}\n        />\n      )}\n      {isAnnotating && attachmentUrl && (\n        <AnnotationModal\n          imageSrc={attachmentUrl}\n          onClose={clearIsAnnotating}\n          onSave={handleAnnotate}\n        />\n      )}\n      {state.error && (\n        <Modal\n          isOpen\n          title=\"Whoops...\"\n          className=\"cypress-error-modal\"\n          titleClassName=\"cypress-error-title\"\n          actions={\n            <button\n              type=\"button\"\n              className=\"button ob-button is-primary cypress-close-error-button\"\n              onClick={() => setState({ isLoading: false })}\n              autoFocus\n            >\n              Okay\n            </button>\n          }\n        >\n          <p>\n            An error occurred while attempting to edit an image. 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>{state.error.toString()}</blockquote>\n          </div>\n        </Modal>\n      )}\n    </>\n  )\n}\n\nexport default React.memo<Props>(FormElementFile)\n"]}

package/dist/hooks/useFormElementOptions.js

@@ -29,7 +29,8 @@ export default function useFormElementOptions({ element, value, onChange, condit
                 option,
                 submission: formSubmissionModel,
                 formElements: elements,
-                contextSubmission: parent === null || parent === void 0 ? void 0 : parent.formSubmissionModel,
+                contextSubmission: (parent === null || parent === void 0 ? void 0 : parent.formSubmissionModel) || {},
+                contextElements: (parent === null || parent === void 0 ? void 0 : parent.elements) || [],
                 taskContext,
                 userProfile: userProfileForInjectables,
             });

package/dist/hooks/useFormElementOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormElementOptions.js","sourceRoot":"","sources":["../../src/hooks/useFormElementOptions.ts"],"names":[],"mappings":"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","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n  UpdateFormElementsHandler,\n} from '../types/form'\nimport { useLoadDynamicOptionsEffect } from './useDynamicOptionsLoaderState'\nimport useFormSubmissionModel from './useFormSubmissionModelContext'\nimport processInjectableOption from '../services/injectableOptions'\nimport useTaskContext from './useTaskContext'\nimport useUserProfileForInjectables from './useUserProfileForInjectables'\n\nexport default function useFormElementOptions<T>({\n  element,\n  value,\n  onChange,\n  conditionallyShownOptionsElement,\n  onFilter,\n  onUpdateFormElements,\n}: {\n  element: FormTypes.FormElementWithOptions\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<T>\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n  onFilter?: (choiceElementOption: FormTypes.ChoiceElementOption) => boolean\n  onUpdateFormElements: UpdateFormElementsHandler\n}) {\n  const taskContext = useTaskContext()\n  const userProfileForInjectables = useUserProfileForInjectables()\n\n  const { formSubmissionModel, elements, parent } = useFormSubmissionModel()\n  const conditionallyShownOptions = conditionallyShownOptionsElement?.options\n  //options that are shown due to conditional logic\n  const shownOptions = React.useMemo<FormTypes.ChoiceElementOption[]>(() => {\n    if (!element.options) {\n      return []\n    }\n    if (!conditionallyShownOptions && !onFilter) {\n      return element.options\n    }\n    return element.options.filter((option) => {\n      return (\n        !conditionallyShownOptions ||\n        conditionallyShownOptions.some(({ id }) => id === option.id)\n      )\n    })\n  }, [conditionallyShownOptions, element.options, onFilter])\n\n  //\n  const withInjectedOptions = React.useMemo(() => {\n    return shownOptions.reduce<FormTypes.ChoiceElementOption[]>(\n      (memo, option) => {\n        const newOptions = processInjectableOption({\n          option,\n          submission: formSubmissionModel,\n          formElements: elements,\n          contextSubmission: parent?.formSubmissionModel,\n          taskContext,\n          userProfile: userProfileForInjectables,\n        })\n        memo.push(...newOptions)\n\n        return memo\n      },\n      [],\n    )\n  }, [\n    elements,\n    formSubmissionModel,\n    parent,\n    shownOptions,\n    taskContext,\n    userProfileForInjectables,\n  ])\n\n  //options that are shown based on conditional logic and user input\n  const filteredOptions = React.useMemo<FormTypes.ChoiceElementOption[]>(() => {\n    const reducedOptions = withInjectedOptions.filter(\n      (option) => !onFilter || (onFilter(option) && !option.displayAlways),\n    )\n    if (element.type === 'autocomplete') {\n      const alwaysShownOptions = withInjectedOptions.filter(\n        (option) => option.displayAlways,\n      )\n      reducedOptions.push(...alwaysShownOptions)\n    }\n    return reducedOptions\n  }, [withInjectedOptions, element.type, onFilter])\n\n  React.useEffect(() => {\n    if (\n      !element.options ||\n      conditionallyShownOptionsElement?.dependencyIsLoading\n    ) {\n      return\n    }\n\n    if (\n      typeof value === 'string' &&\n      !withInjectedOptions.some((option) => value === option.value)\n    ) {\n      onChange(element, {\n        value: undefined,\n      })\n      return\n    }\n\n    if (Array.isArray(value)) {\n      const newValue = value.filter((selectedValue) =>\n        withInjectedOptions.some((option) => selectedValue === option.value),\n      )\n      if (newValue.length !== value.length) {\n        const newValueArray = newValue.length ? newValue : undefined\n        onChange(element, {\n          value: newValueArray as T | undefined,\n        })\n      }\n    }\n  }, [\n    element,\n    shownOptions,\n    onChange,\n    value,\n    conditionallyShownOptionsElement?.dependencyIsLoading,\n    withInjectedOptions,\n  ])\n\n  useLoadDynamicOptionsEffect(element, onUpdateFormElements)\n\n  return filteredOptions\n}\n"]}
+{"version":3,"file":"useFormElementOptions.js","sourceRoot":"","sources":["../../src/hooks/useFormElementOptions.ts"],"names":[],"mappings":"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","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\nimport {\n  FormElementValueChangeHandler,\n  FormElementConditionallyShownElement,\n  UpdateFormElementsHandler,\n} from '../types/form'\nimport { useLoadDynamicOptionsEffect } from './useDynamicOptionsLoaderState'\nimport useFormSubmissionModel from './useFormSubmissionModelContext'\nimport processInjectableOption from '../services/injectableOptions'\nimport useTaskContext from './useTaskContext'\nimport useUserProfileForInjectables from './useUserProfileForInjectables'\n\nexport default function useFormElementOptions<T>({\n  element,\n  value,\n  onChange,\n  conditionallyShownOptionsElement,\n  onFilter,\n  onUpdateFormElements,\n}: {\n  element: FormTypes.FormElementWithOptions\n  value: unknown | undefined\n  onChange: FormElementValueChangeHandler<T>\n  conditionallyShownOptionsElement:\n    | FormElementConditionallyShownElement\n    | undefined\n  onFilter?: (choiceElementOption: FormTypes.ChoiceElementOption) => boolean\n  onUpdateFormElements: UpdateFormElementsHandler\n}) {\n  const taskContext = useTaskContext()\n  const userProfileForInjectables = useUserProfileForInjectables()\n\n  const { formSubmissionModel, elements, parent } = useFormSubmissionModel()\n  const conditionallyShownOptions = conditionallyShownOptionsElement?.options\n  //options that are shown due to conditional logic\n  const shownOptions = React.useMemo<FormTypes.ChoiceElementOption[]>(() => {\n    if (!element.options) {\n      return []\n    }\n    if (!conditionallyShownOptions && !onFilter) {\n      return element.options\n    }\n    return element.options.filter((option) => {\n      return (\n        !conditionallyShownOptions ||\n        conditionallyShownOptions.some(({ id }) => id === option.id)\n      )\n    })\n  }, [conditionallyShownOptions, element.options, onFilter])\n\n  //\n  const withInjectedOptions = React.useMemo(() => {\n    return shownOptions.reduce<FormTypes.ChoiceElementOption[]>(\n      (memo, option) => {\n        const newOptions = processInjectableOption({\n          option,\n          submission: formSubmissionModel,\n          formElements: elements,\n          contextSubmission: parent?.formSubmissionModel || {},\n          contextElements: parent?.elements || [],\n          taskContext,\n          userProfile: userProfileForInjectables,\n        })\n        memo.push(...newOptions)\n\n        return memo\n      },\n      [],\n    )\n  }, [\n    elements,\n    formSubmissionModel,\n    parent,\n    shownOptions,\n    taskContext,\n    userProfileForInjectables,\n  ])\n\n  //options that are shown based on conditional logic and user input\n  const filteredOptions = React.useMemo<FormTypes.ChoiceElementOption[]>(() => {\n    const reducedOptions = withInjectedOptions.filter(\n      (option) => !onFilter || (onFilter(option) && !option.displayAlways),\n    )\n    if (element.type === 'autocomplete') {\n      const alwaysShownOptions = withInjectedOptions.filter(\n        (option) => option.displayAlways,\n      )\n      reducedOptions.push(...alwaysShownOptions)\n    }\n    return reducedOptions\n  }, [withInjectedOptions, element.type, onFilter])\n\n  React.useEffect(() => {\n    if (\n      !element.options ||\n      conditionallyShownOptionsElement?.dependencyIsLoading\n    ) {\n      return\n    }\n\n    if (\n      typeof value === 'string' &&\n      !withInjectedOptions.some((option) => value === option.value)\n    ) {\n      onChange(element, {\n        value: undefined,\n      })\n      return\n    }\n\n    if (Array.isArray(value)) {\n      const newValue = value.filter((selectedValue) =>\n        withInjectedOptions.some((option) => selectedValue === option.value),\n      )\n      if (newValue.length !== value.length) {\n        const newValueArray = newValue.length ? newValue : undefined\n        onChange(element, {\n          value: newValueArray as T | undefined,\n        })\n      }\n    }\n  }, [\n    element,\n    shownOptions,\n    onChange,\n    value,\n    conditionallyShownOptionsElement?.dependencyIsLoading,\n    withInjectedOptions,\n  ])\n\n  useLoadDynamicOptionsEffect(element, onUpdateFormElements)\n\n  return filteredOptions\n}\n"]}

package/dist/index.d.ts

@@ -32,5 +32,5 @@ export { default as CalendarBookingsCancelForm } from './components/calendar-boo
 export { default as MultiFactorAuthentication } from './components/mfa/MultiFactorAuthentication';
 export { default as useMfa, MfaProvider, useUserMeetsMfaRequirement, } from './hooks/useMfa';
 export { default as DownloadableFiles } from './components/downloadable-files';
-export { default as ImageCropper, getAspectRatio, generateCroppedImageBlob, } from './components/ImageCropper';
+export { default as ImageCropper, getAspectRatio, generateCroppedImageBlob, PercentCrop, } from './components/ImageCropper';
 export * from './types/form';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export {\n  OneBlinkFormBaseProps,\n  OneBlinkFormControlledProps,\n  OneBlinkFormUncontrolled as OneBlinkForm,\n  OneBlinkFormControlled,\n} from './OneBlinkForm'\nexport { default as OneBlinkAutoSaveForm } from './OneBlinkAutoSaveForm'\nexport { default as OneBlinkReadOnlyForm } from './OneBlinkReadOnlyForm'\nexport { OneBlinkFormStoreProvider } from './components/formStore/OneBlinkFormStoreProvider'\nexport { default as OneBlinkFormStoreClearFiltersButton } from './components/formStore/OneBlinkFormStoreClearFiltersButton'\nexport { default as OneBlinkFormStoreColumnsButton } from './components/formStore/OneBlinkFormStoreColumnsButton'\nexport { default as OneBlinkFormStoreDownloadButton } from './components/formStore/OneBlinkFormStoreDownloadButton'\nexport { default as OneBlinkFormStoreRefreshButton } from './components/formStore/OneBlinkFormStoreRefreshButton'\nexport { default as OneBlinkFormStoreTable } from './components/formStore/OneBlinkFormStoreTable'\n\nexport { default as useIsMounted } from './hooks/useIsMounted'\nexport { default as useBooleanState } from './hooks/useBooleanState'\nexport { default as useNullableState } from './hooks/useNullableState'\nexport { default as useClickOutsideElement } from './hooks/useClickOutsideElement'\nexport {\n  default as useIsOffline,\n  IsOfflineContextProvider,\n} from './hooks/useIsOffline'\nexport { default as useLogin, UseLoginValue } from './hooks/useLogin'\nexport { default as useSignUp } from './hooks/useSignUp'\nexport {\n  default as useAuth,\n  AuthContextProvider,\n  AuthContextValue,\n} from './hooks/useAuth'\nexport {\n  default as usePendingSubmissions,\n  PendingSubmissionsContextProvider,\n  PendingSubmissionsContextValue,\n} from './hooks/usePendingSubmissions'\nexport {\n  default as useDrafts,\n  DraftsContextProvider,\n  DraftsContextValue,\n} from './hooks/useDrafts'\nexport {\n  default as useLoadDataState,\n  LoadDataState,\n} from './hooks/useLoadDataState'\nexport { default as useLoadResourcesState } from './hooks/useLoadResourcesState'\nexport { default as useLoadDataEffect } from './hooks/useLoadDataEffect'\nexport { default as useFormSubmissionState } from './hooks/useFormSubmissionState'\nexport { default as useFormSubmissionAutoSaveState } from './hooks/useFormSubmissionAutoSaveState'\nexport { default as useGoogleJsApiLoader } from './hooks/useGoogleJsApiLoader'\n\nexport { default as ProgressBar } from './components/renderer/ProgressBar'\nexport { default as PaymentReceipt } from './PaymentReceipt'\nexport { default as PaymentForm } from './components/payments/PaymentForm'\n\nexport { default as CalendarBookingsForm } from './components/calendar-bookings/CalendarBookingsForm'\nexport { default as CalendarBookingsRescheduleForm } from './components/calendar-bookings/CalendarBookingsReschedulingForm'\nexport { default as CalendarBookingsCancelForm } from './components/calendar-bookings/CalendarBookingsCancelForm'\n\nexport { default as MultiFactorAuthentication } from './components/mfa/MultiFactorAuthentication'\n\nexport {\n  default as useMfa,\n  MfaProvider,\n  useUserMeetsMfaRequirement,\n} from './hooks/useMfa'\n\nexport { default as DownloadableFiles } from './components/downloadable-files'\n\nexport {\n  default as ImageCropper,\n  getAspectRatio,\n  generateCroppedImageBlob,\n} from './components/ImageCropper'\n\nexport * from './types/form'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export {\n  OneBlinkFormBaseProps,\n  OneBlinkFormControlledProps,\n  OneBlinkFormUncontrolled as OneBlinkForm,\n  OneBlinkFormControlled,\n} from './OneBlinkForm'\nexport { default as OneBlinkAutoSaveForm } from './OneBlinkAutoSaveForm'\nexport { default as OneBlinkReadOnlyForm } from './OneBlinkReadOnlyForm'\nexport { OneBlinkFormStoreProvider } from './components/formStore/OneBlinkFormStoreProvider'\nexport { default as OneBlinkFormStoreClearFiltersButton } from './components/formStore/OneBlinkFormStoreClearFiltersButton'\nexport { default as OneBlinkFormStoreColumnsButton } from './components/formStore/OneBlinkFormStoreColumnsButton'\nexport { default as OneBlinkFormStoreDownloadButton } from './components/formStore/OneBlinkFormStoreDownloadButton'\nexport { default as OneBlinkFormStoreRefreshButton } from './components/formStore/OneBlinkFormStoreRefreshButton'\nexport { default as OneBlinkFormStoreTable } from './components/formStore/OneBlinkFormStoreTable'\n\nexport { default as useIsMounted } from './hooks/useIsMounted'\nexport { default as useBooleanState } from './hooks/useBooleanState'\nexport { default as useNullableState } from './hooks/useNullableState'\nexport { default as useClickOutsideElement } from './hooks/useClickOutsideElement'\nexport {\n  default as useIsOffline,\n  IsOfflineContextProvider,\n} from './hooks/useIsOffline'\nexport { default as useLogin, UseLoginValue } from './hooks/useLogin'\nexport { default as useSignUp } from './hooks/useSignUp'\nexport {\n  default as useAuth,\n  AuthContextProvider,\n  AuthContextValue,\n} from './hooks/useAuth'\nexport {\n  default as usePendingSubmissions,\n  PendingSubmissionsContextProvider,\n  PendingSubmissionsContextValue,\n} from './hooks/usePendingSubmissions'\nexport {\n  default as useDrafts,\n  DraftsContextProvider,\n  DraftsContextValue,\n} from './hooks/useDrafts'\nexport {\n  default as useLoadDataState,\n  LoadDataState,\n} from './hooks/useLoadDataState'\nexport { default as useLoadResourcesState } from './hooks/useLoadResourcesState'\nexport { default as useLoadDataEffect } from './hooks/useLoadDataEffect'\nexport { default as useFormSubmissionState } from './hooks/useFormSubmissionState'\nexport { default as useFormSubmissionAutoSaveState } from './hooks/useFormSubmissionAutoSaveState'\nexport { default as useGoogleJsApiLoader } from './hooks/useGoogleJsApiLoader'\n\nexport { default as ProgressBar } from './components/renderer/ProgressBar'\nexport { default as PaymentReceipt } from './PaymentReceipt'\nexport { default as PaymentForm } from './components/payments/PaymentForm'\n\nexport { default as CalendarBookingsForm } from './components/calendar-bookings/CalendarBookingsForm'\nexport { default as CalendarBookingsRescheduleForm } from './components/calendar-bookings/CalendarBookingsReschedulingForm'\nexport { default as CalendarBookingsCancelForm } from './components/calendar-bookings/CalendarBookingsCancelForm'\n\nexport { default as MultiFactorAuthentication } from './components/mfa/MultiFactorAuthentication'\n\nexport {\n  default as useMfa,\n  MfaProvider,\n  useUserMeetsMfaRequirement,\n} from './hooks/useMfa'\n\nexport { default as DownloadableFiles } from './components/downloadable-files'\n\nexport {\n  default as ImageCropper,\n  getAspectRatio,\n  generateCroppedImageBlob,\n  PercentCrop,\n} from './components/ImageCropper'\n\nexport * from './types/form'\n"]}

package/dist/services/injectableOptions.d.ts

@@ -1,11 +1,12 @@
 import { FormTypes, SubmissionTypes } from '@oneblink/types';
 import { MiscTypes } from '@oneblink/types';
 import { TaskContext } from '../hooks/useTaskContext';
-export default function processInjectableOption({ option, submission, formElements, contextSubmission, taskContext, userProfile, }: {
+export default function processInjectableOption({ option, submission, formElements, contextElements, contextSubmission, taskContext, userProfile, }: {
     option: FormTypes.ChoiceElementOption;
     submission: SubmissionTypes.S3SubmissionData['submission'];
     formElements: FormTypes.FormElement[];
-    contextSubmission?: SubmissionTypes.S3SubmissionData['submission'];
+    contextElements: FormTypes.FormElement[];
+    contextSubmission: SubmissionTypes.S3SubmissionData['submission'];
     taskContext: TaskContext;
     userProfile: MiscTypes.UserProfile | undefined;
 }): FormTypes.ChoiceElementOption[];

package/dist/services/injectableOptions.js

@@ -1,11 +1,11 @@
 import { submissionService, typeCastService } from '@oneblink/sdk-core';
 import { localisationService } from '@oneblink/apps';
 import { v4 as uuidv4 } from 'uuid';
-function processInjectableDynamicOption({ option: resource, submission: rootSubmission, formElements: rootFormElements, contextSubmission, ...params }) {
+function processInjectableDynamicOption({ option: resource, submission: rootSubmission, formElements: rootFormElements, contextElements, contextSubmission, ...params }) {
     return submissionService.processInjectablesInCustomResource({
         resource,
         submission: { ...rootSubmission, ...contextSubmission },
-        formElements: rootFormElements,
+        formElements: [...rootFormElements, ...contextElements],
         replaceRootInjectables(option, submission, formElements) {
             // Replace root level form element values
             const replaceableParams = {
@@ -42,7 +42,7 @@ function processInjectableDynamicOption({ option: resource, submission: rootSubm
         },
     });
 }
-export default function processInjectableOption({ option, submission, formElements, contextSubmission, taskContext, userProfile, }) {
+export default function processInjectableOption({ option, submission, formElements, contextElements, contextSubmission, taskContext, userProfile, }) {
     const options = processInjectableDynamicOption({
         option,
         submission,
@@ -50,6 +50,7 @@ export default function processInjectableOption({ option, submission, formElemen
         taskContext,
         userProfile,
         contextSubmission,
+        contextElements,
     });
     const generatedOptions = [];
     options.forEach(({ label, value }) => {
@@ -62,7 +63,7 @@ export default function processInjectableOption({ option, submission, formElemen
     });
     return generatedOptions;
 }
-function injectOptionsAcrossEntriesElements({ contextElements, elements, entries, taskContext, userProfile, }) {
+function injectOptionsAcrossEntriesElements({ contextElements, contextSubmission, elements, entries, taskContext, userProfile, }) {
     return elements.map((e) => {
         switch (e.type) {
             case 'page':
@@ -72,6 +73,7 @@ function injectOptionsAcrossEntriesElements({ contextElements, elements, entries
                     elements: injectOptionsAcrossEntriesElements({
                         // info elements on other pages/sections will need the parent definition
                         contextElements,
+                        contextSubmission,
                         elements: e.elements,
                         entries,
                         taskContext,
@@ -86,6 +88,7 @@ function injectOptionsAcrossEntriesElements({ contextElements, elements, entries
                         elements: injectOptionsAcrossEntriesElements({
                             // sub-forms do not have context of parent elements
                             contextElements: e.elements,
+                            contextSubmission,
                             elements: e.elements,
                             entries: entries.reduce((memo, entry) => {
                                 if (entry[e.name]) {
@@ -108,6 +111,7 @@ function injectOptionsAcrossEntriesElements({ contextElements, elements, entries
                     elements: injectOptionsAcrossEntriesElements({
                         // repeatable set entries may only know about elements within entry
                         contextElements,
+                        contextSubmission,
                         elements: e.elements,
                         entries: entries.reduce((memo, entry) => {
                             const nestedEntries = entry[e.name];
@@ -132,7 +136,9 @@ function injectOptionsAcrossEntriesElements({ contextElements, elements, entries
                                 const injected = processInjectableOption({
                                     option: o,
                                     submission,
+                                    contextSubmission,
                                     formElements: elements,
+                                    contextElements,
                                     taskContext,
                                     userProfile,
                                 });
@@ -157,6 +163,7 @@ export function injectOptionsAcrossAllElements({ submission, ...params }) {
     // labels for each available option to display the submission.
     return injectOptionsAcrossEntriesElements({
         ...params,
+        contextSubmission: submission,
         entries: [submission],
     });
 }

package/dist/services/injectableOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"injectableOptions.js","sourceRoot":"","sources":["../../src/services/injectableOptions.ts"],"names":[],"mappings":"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","sourcesContent":["import { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport { submissionService, typeCastService } from '@oneblink/sdk-core'\nimport { localisationService } from '@oneblink/apps'\nimport { v4 as uuidv4 } from 'uuid'\nimport { MiscTypes } from '@oneblink/types'\nimport { TaskContext } from '../hooks/useTaskContext'\ntype Option = Pick<FormTypes.ChoiceElementOption, 'value' | 'label'>\n\nfunction processInjectableDynamicOption({\n  option: resource,\n  submission: rootSubmission,\n  formElements: rootFormElements,\n  contextSubmission,\n  ...params\n}: {\n  option: Option\n  submission: SubmissionTypes.S3SubmissionData['submission']\n  formElements: FormTypes.FormElement[]\n  taskContext: TaskContext\n  userProfile: MiscTypes.UserProfile | undefined\n  contextSubmission?: SubmissionTypes.S3SubmissionData['submission']\n}): Map<string, Option> {\n  return submissionService.processInjectablesInCustomResource<Option>({\n    resource,\n    submission: { ...rootSubmission, ...contextSubmission },\n    formElements: rootFormElements,\n    replaceRootInjectables(option, submission, formElements) {\n      // Replace root level form element values\n      const replaceableParams: Parameters<\n        typeof localisationService.replaceInjectablesWithElementValues\n      >[1] = {\n        ...params,\n        submission,\n        formElements,\n        task: params.taskContext.task,\n        taskGroup: params.taskContext.taskGroup,\n        taskGroupInstance: params.taskContext.taskGroupInstance,\n        excludeNestedElements: true,\n      }\n      const {\n        text: label,\n        hadAllInjectablesReplaced: hadAllInjectablesReplacedInLabel,\n      } = localisationService.replaceInjectablesWithElementValues(\n        option.label,\n        replaceableParams,\n      )\n      if (!hadAllInjectablesReplacedInLabel) {\n        return\n      }\n\n      const {\n        text: value,\n        hadAllInjectablesReplaced: hadAllInjectablesReplacedInValue,\n      } = localisationService.replaceInjectablesWithElementValues(\n        option.value,\n        replaceableParams,\n      )\n      if (!hadAllInjectablesReplacedInValue) {\n        return\n      }\n\n      return [\n        label + ' ' + value,\n        value,\n        {\n          value,\n          label,\n        },\n      ]\n    },\n    prepareNestedInjectables(option, prepare) {\n      return {\n        value: prepare(option.value),\n        label: prepare(option.label),\n      }\n    },\n  })\n}\n\nexport default function processInjectableOption({\n  option,\n  submission,\n  formElements,\n  contextSubmission,\n  taskContext,\n  userProfile,\n}: {\n  option: FormTypes.ChoiceElementOption\n  submission: SubmissionTypes.S3SubmissionData['submission']\n  formElements: FormTypes.FormElement[]\n  contextSubmission?: SubmissionTypes.S3SubmissionData['submission']\n  taskContext: TaskContext\n  userProfile: MiscTypes.UserProfile | undefined\n}): FormTypes.ChoiceElementOption[] {\n  const options = processInjectableDynamicOption({\n    option,\n    submission,\n    formElements,\n    taskContext,\n    userProfile,\n    contextSubmission,\n  })\n\n  const generatedOptions: FormTypes.ChoiceElementOption[] = []\n\n  options.forEach(({ label, value }) => {\n    generatedOptions.push({\n      ...option,\n      id: options.size === 1 ? option.id : uuidv4(),\n      label,\n      value,\n    })\n  })\n\n  return generatedOptions\n}\n\nfunction injectOptionsAcrossEntriesElements({\n  contextElements,\n  elements,\n  entries,\n  taskContext,\n  userProfile,\n}: {\n  contextElements: FormTypes.FormElement[]\n  elements: FormTypes.FormElement[]\n  entries: SubmissionTypes.S3SubmissionData['submission'][]\n  taskContext: TaskContext\n  userProfile: MiscTypes.UserProfile | undefined\n}): FormTypes.FormElement[] {\n  return elements.map<FormTypes.FormElement>((e) => {\n    switch (e.type) {\n      case 'page':\n      case 'section': {\n        return {\n          ...e,\n          elements: injectOptionsAcrossEntriesElements({\n            // info elements on other pages/sections will need the parent definition\n            contextElements,\n            elements: e.elements,\n            entries,\n            taskContext,\n            userProfile,\n          }),\n        }\n      }\n      case 'form': {\n        if (Array.isArray(e.elements)) {\n          return {\n            ...e,\n            elements: injectOptionsAcrossEntriesElements({\n              // sub-forms do not have context of parent elements\n              contextElements: e.elements,\n              elements: e.elements,\n              entries: entries.reduce<\n                SubmissionTypes.S3SubmissionData['submission'][]\n              >((memo, entry) => {\n                if (entry[e.name]) {\n                  memo.push(\n                    entry[\n                      e.name\n                    ] as SubmissionTypes.S3SubmissionData['submission'],\n                  )\n                }\n                return memo\n              }, []),\n              taskContext,\n              userProfile,\n            }),\n          }\n        } else {\n          return e\n        }\n      }\n      case 'repeatableSet': {\n        return {\n          ...e,\n          elements: injectOptionsAcrossEntriesElements({\n            // repeatable set entries may only know about elements within entry\n            contextElements,\n            elements: e.elements,\n            entries: entries.reduce<\n              SubmissionTypes.S3SubmissionData['submission'][]\n            >((memo, entry) => {\n              const nestedEntries = entry[e.name]\n              if (Array.isArray(nestedEntries)) {\n                memo.push(\n                  ...(nestedEntries as SubmissionTypes.S3SubmissionData['submission'][]),\n                )\n              }\n              return memo\n            }, []),\n            taskContext,\n            userProfile,\n          }),\n        }\n      }\n      default: {\n        const optionsElement = typeCastService.formElements.toOptionsElement(e)\n        if (optionsElement) {\n          return {\n            ...optionsElement,\n            options: entries.reduce<FormTypes.ChoiceElementOption[]>(\n              (newOptions, submission) => {\n                optionsElement.options?.forEach((o) => {\n                  const injected = processInjectableOption({\n                    option: o,\n                    submission,\n                    formElements: elements,\n                    taskContext,\n                    userProfile,\n                  })\n\n                  newOptions.push(\n                    ...injected.filter((generatedOption) => {\n                      return !newOptions.some(\n                        (addedOption) =>\n                          addedOption.value === generatedOption.value,\n                      )\n                    }),\n                  )\n                })\n                return newOptions\n              },\n              [],\n            ),\n          }\n        }\n        return e\n      }\n    }\n  })\n}\n\nexport function injectOptionsAcrossAllElements({\n  submission,\n  ...params\n}: {\n  elements: FormTypes.FormElement[]\n  contextElements: FormTypes.FormElement[]\n  submission: SubmissionTypes.S3SubmissionData['submission']\n  taskContext: TaskContext\n  userProfile: MiscTypes.UserProfile | undefined\n}): FormTypes.FormElement[] {\n  // We iterate over entries as an array of submission objects because\n  // child elements of a repeatable set that have injected options\n  // need to include all of the injected options from the same elements\n  // in sibling entries within the set. Otherwise we will not have the\n  // labels for each available option to display the submission.\n  return injectOptionsAcrossEntriesElements({\n    ...params,\n    entries: [submission],\n  })\n}\n"]}
+{"version":3,"file":"injectableOptions.js","sourceRoot":"","sources":["../../src/services/injectableOptions.ts"],"names":[],"mappings":"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","sourcesContent":["import { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport { submissionService, typeCastService } from '@oneblink/sdk-core'\nimport { localisationService } from '@oneblink/apps'\nimport { v4 as uuidv4 } from 'uuid'\nimport { MiscTypes } from '@oneblink/types'\nimport { TaskContext } from '../hooks/useTaskContext'\ntype Option = Pick<FormTypes.ChoiceElementOption, 'value' | 'label'>\n\nfunction processInjectableDynamicOption({\n  option: resource,\n  submission: rootSubmission,\n  formElements: rootFormElements,\n  contextElements,\n  contextSubmission,\n  ...params\n}: {\n  option: Option\n  submission: SubmissionTypes.S3SubmissionData['submission']\n  formElements: FormTypes.FormElement[]\n  contextElements: FormTypes.FormElement[]\n  taskContext: TaskContext\n  userProfile: MiscTypes.UserProfile | undefined\n  contextSubmission?: SubmissionTypes.S3SubmissionData['submission']\n}): Map<string, Option> {\n  return submissionService.processInjectablesInCustomResource<Option>({\n    resource,\n    submission: { ...rootSubmission, ...contextSubmission },\n    formElements: [...rootFormElements, ...contextElements],\n    replaceRootInjectables(option, submission, formElements) {\n      // Replace root level form element values\n      const replaceableParams: Parameters<\n        typeof localisationService.replaceInjectablesWithElementValues\n      >[1] = {\n        ...params,\n        submission,\n        formElements,\n        task: params.taskContext.task,\n        taskGroup: params.taskContext.taskGroup,\n        taskGroupInstance: params.taskContext.taskGroupInstance,\n        excludeNestedElements: true,\n      }\n      const {\n        text: label,\n        hadAllInjectablesReplaced: hadAllInjectablesReplacedInLabel,\n      } = localisationService.replaceInjectablesWithElementValues(\n        option.label,\n        replaceableParams,\n      )\n      if (!hadAllInjectablesReplacedInLabel) {\n        return\n      }\n\n      const {\n        text: value,\n        hadAllInjectablesReplaced: hadAllInjectablesReplacedInValue,\n      } = localisationService.replaceInjectablesWithElementValues(\n        option.value,\n        replaceableParams,\n      )\n      if (!hadAllInjectablesReplacedInValue) {\n        return\n      }\n\n      return [\n        label + ' ' + value,\n        value,\n        {\n          value,\n          label,\n        },\n      ]\n    },\n    prepareNestedInjectables(option, prepare) {\n      return {\n        value: prepare(option.value),\n        label: prepare(option.label),\n      }\n    },\n  })\n}\n\nexport default function processInjectableOption({\n  option,\n  submission,\n  formElements,\n  contextElements,\n  contextSubmission,\n  taskContext,\n  userProfile,\n}: {\n  option: FormTypes.ChoiceElementOption\n  submission: SubmissionTypes.S3SubmissionData['submission']\n  formElements: FormTypes.FormElement[]\n  contextElements: FormTypes.FormElement[]\n  contextSubmission: SubmissionTypes.S3SubmissionData['submission']\n  taskContext: TaskContext\n  userProfile: MiscTypes.UserProfile | undefined\n}): FormTypes.ChoiceElementOption[] {\n  const options = processInjectableDynamicOption({\n    option,\n    submission,\n    formElements,\n    taskContext,\n    userProfile,\n    contextSubmission,\n    contextElements,\n  })\n\n  const generatedOptions: FormTypes.ChoiceElementOption[] = []\n\n  options.forEach(({ label, value }) => {\n    generatedOptions.push({\n      ...option,\n      id: options.size === 1 ? option.id : uuidv4(),\n      label,\n      value,\n    })\n  })\n  return generatedOptions\n}\n\nfunction injectOptionsAcrossEntriesElements({\n  contextElements,\n  contextSubmission,\n  elements,\n  entries,\n  taskContext,\n  userProfile,\n}: {\n  contextElements: FormTypes.FormElement[]\n  contextSubmission: SubmissionTypes.S3SubmissionData['submission']\n  elements: FormTypes.FormElement[]\n  entries: SubmissionTypes.S3SubmissionData['submission'][]\n  taskContext: TaskContext\n  userProfile: MiscTypes.UserProfile | undefined\n}): FormTypes.FormElement[] {\n  return elements.map<FormTypes.FormElement>((e) => {\n    switch (e.type) {\n      case 'page':\n      case 'section': {\n        return {\n          ...e,\n          elements: injectOptionsAcrossEntriesElements({\n            // info elements on other pages/sections will need the parent definition\n            contextElements,\n            contextSubmission,\n            elements: e.elements,\n            entries,\n            taskContext,\n            userProfile,\n          }),\n        }\n      }\n      case 'form': {\n        if (Array.isArray(e.elements)) {\n          return {\n            ...e,\n            elements: injectOptionsAcrossEntriesElements({\n              // sub-forms do not have context of parent elements\n              contextElements: e.elements,\n              contextSubmission,\n              elements: e.elements,\n              entries: entries.reduce<\n                SubmissionTypes.S3SubmissionData['submission'][]\n              >((memo, entry) => {\n                if (entry[e.name]) {\n                  memo.push(\n                    entry[\n                      e.name\n                    ] as SubmissionTypes.S3SubmissionData['submission'],\n                  )\n                }\n                return memo\n              }, []),\n              taskContext,\n              userProfile,\n            }),\n          }\n        } else {\n          return e\n        }\n      }\n      case 'repeatableSet': {\n        return {\n          ...e,\n          elements: injectOptionsAcrossEntriesElements({\n            // repeatable set entries may only know about elements within entry\n            contextElements,\n            contextSubmission,\n            elements: e.elements,\n            entries: entries.reduce<\n              SubmissionTypes.S3SubmissionData['submission'][]\n            >((memo, entry) => {\n              const nestedEntries = entry[e.name]\n              if (Array.isArray(nestedEntries)) {\n                memo.push(\n                  ...(nestedEntries as SubmissionTypes.S3SubmissionData['submission'][]),\n                )\n              }\n              return memo\n            }, []),\n            taskContext,\n            userProfile,\n          }),\n        }\n      }\n      default: {\n        const optionsElement = typeCastService.formElements.toOptionsElement(e)\n        if (optionsElement) {\n          return {\n            ...optionsElement,\n            options: entries.reduce<FormTypes.ChoiceElementOption[]>(\n              (newOptions, submission) => {\n                optionsElement.options?.forEach((o) => {\n                  const injected = processInjectableOption({\n                    option: o,\n                    submission,\n                    contextSubmission,\n                    formElements: elements,\n                    contextElements,\n                    taskContext,\n                    userProfile,\n                  })\n\n                  newOptions.push(\n                    ...injected.filter((generatedOption) => {\n                      return !newOptions.some(\n                        (addedOption) =>\n                          addedOption.value === generatedOption.value,\n                      )\n                    }),\n                  )\n                })\n                return newOptions\n              },\n              [],\n            ),\n          }\n        }\n        return e\n      }\n    }\n  })\n}\n\nexport function injectOptionsAcrossAllElements({\n  submission,\n  ...params\n}: {\n  elements: FormTypes.FormElement[]\n  contextElements: FormTypes.FormElement[]\n  submission: SubmissionTypes.S3SubmissionData['submission']\n  taskContext: TaskContext\n  userProfile: MiscTypes.UserProfile | undefined\n}): FormTypes.FormElement[] {\n  // We iterate over entries as an array of submission objects because\n  // child elements of a repeatable set that have injected options\n  // need to include all of the injected options from the same elements\n  // in sibling entries within the set. Otherwise we will not have the\n  // labels for each available option to display the submission.\n  return injectOptionsAcrossEntriesElements({\n    ...params,\n    contextSubmission: submission,\n    entries: [submission],\n  })\n}\n"]}

package/dist/styles/camera.scss

@@ -112,4 +112,16 @@
   height: 100%;
   display: flex;
   flex-direction: column;
+
+  .ob-cropper__cropper {
+    height: 100%;
+
+    .ReactCrop__child-wrapper {
+      height: 100%;
+
+      .ob-cropper__image {
+        max-height: 100%;
+      }
+    }
+  }
 }

package/dist/styles/modal.scss

@@ -1,6 +1,7 @@
 .modal {
   // Need this to make sure tool tips do not cover models
-  z-index: 100000;
+
+  z-index: 400;
 
   @media only screen and (max-width: $tablet) {
     padding: 0 $size-8;

package/dist/styles.css

@@ -7916,7 +7916,7 @@ button on-loading {
 }
 
 .modal {
-  z-index: 100000;
+  z-index: 400;
 }
 @media only screen and (max-width: 769px) {
   .modal {
@@ -8208,6 +8208,15 @@ button on-loading {
   display: flex;
   flex-direction: column;
 }
+.ob-cropper__container .ob-cropper__cropper {
+  height: 100%;
+}
+.ob-cropper__container .ob-cropper__cropper .ReactCrop__child-wrapper {
+  height: 100%;
+}
+.ob-cropper__container .ob-cropper__cropper .ReactCrop__child-wrapper .ob-cropper__image {
+  max-height: 100%;
+}
 
 .ob-quill-content > * {
   cursor: text;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oneblink/apps-react",
   "description": "Helper functions for OneBlink apps in ReactJS.",
-  "version": "8.12.0-beta.3",
+  "version": "8.12.0-beta.5",
   "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
   "bugs": {
     "url": "https://github.com/oneblink/apps-react/issues"
@@ -11,7 +11,7 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@nylas/react": "^1.3.1",
-    "@oneblink/sdk-core": "^8.9.0-beta.1",
+    "@oneblink/sdk-core": "^8.9.0-beta.2",
     "@react-google-maps/api": "2.19.2",
     "blueimp-load-image": "^5.16.0",
     "bulma": "^0.9.4",
@@ -32,8 +32,8 @@
     "morph-expressions": "^1.1.1",
     "qrcode.react": "^4.1.0",
     "query-string": "^8.1.0",
-    "react-easy-crop": "^5.5.0",
     "react-google-recaptcha": "^3.1.0",
+    "react-image-crop": "^11.0.10",
     "react-input-mask": "^2.0.4",
     "react-signature-canvas": "^1.0.6",
     "react-table": "^7.8.0",