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

package/dist/components/renderer/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/components/renderer/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAS,EAAE,EAAE;IACrD,OAAO,CACL,oBAAC,cAAc,IACb,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,aAAa,EACrB,KAAK,EAAE,QAAQ,GACf,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,WAAW,CAAC,CAAA","sourcesContent":["import { LinearProgress } from '@mui/material'\nimport * as React from 'react'\n\ninterface Props {\n  progress: number\n  className?: string\n}\n\nconst ProgressBar = ({ progress, className }: Props) => {\n  return (\n    <LinearProgress\n      className={className}\n      variant=\"determinate\"\n      value={progress}\n    />\n  )\n}\n\nexport default React.memo<Props>(ProgressBar)\n"]}

package/dist/components/renderer/ToggleAllCheckbox.d.ts

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { FormElementValueChangeHandler } from '../../types/form';
-interface Props {
-    id: string;
-    element: FormTypes.CheckboxElement | FormTypes.SelectElement;
-    options: FormTypes.ChoiceElementOption[];
-    selected: string[];
-    onChange: FormElementValueChangeHandler<string[]>;
-    disabled?: boolean;
-}
-declare const _default: React.NamedExoticComponent<Props>;
-export default _default;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+import { FormElementValueChangeHandler } from '../../types/form';
+interface Props {
+    id: string;
+    element: FormTypes.CheckboxElement | FormTypes.SelectElement;
+    options: FormTypes.ChoiceElementOption[];
+    selected: string[];
+    onChange: FormElementValueChangeHandler<string[]>;
+    disabled?: boolean;
+}
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/dist/components/renderer/ToggleAllCheckbox.js

@@ -1,27 +1,27 @@
-import * as React from 'react';
-import { Checkbox } from '@mui/material';
-const ToggleAllCheckbox = ({ id, element, options, selected, onChange, disabled, }) => {
-    const allSelected = React.useMemo(() => {
-        return options.every((option) => {
-            return selected.includes(option.value);
-        });
-    }, [options, selected]);
-    const handleToggleAll = React.useCallback((isSelectingAll) => {
-        if (isSelectingAll) {
-            onChange(element, options.map((opt) => opt.value));
-        }
-        else {
-            onChange(element, undefined);
-        }
-    }, [element, options, onChange]);
-    return (React.createElement("label", { className: "checkbox ob-checkbox__input-label cypress-checkbox-label", htmlFor: `${id}_select-all`, style: {
-            fontStyle: 'italic',
-            marginBottom: '1.25rem',
-        } },
-        React.createElement(Checkbox, { color: "default", classes: {
-                checked: 'ob-checkbox__input-checked',
-            }, className: "ob-checkbox__input cypress-checkbox-control", id: `${id}_select-all`, disableRipple: true, checked: allSelected, indeterminate: !!selected.length && !allSelected, onChange: (e) => handleToggleAll(e.target.checked), disabled: disabled }),
-        allSelected ? 'Deselect All' : 'Select All'));
-};
-export default React.memo(ToggleAllCheckbox);
+import * as React from 'react';
+import { Checkbox } from '@mui/material';
+const ToggleAllCheckbox = ({ id, element, options, selected, onChange, disabled, }) => {
+    const allSelected = React.useMemo(() => {
+        return options.every((option) => {
+            return selected.includes(option.value);
+        });
+    }, [options, selected]);
+    const handleToggleAll = React.useCallback((isSelectingAll) => {
+        if (isSelectingAll) {
+            onChange(element, options.map((opt) => opt.value));
+        }
+        else {
+            onChange(element, undefined);
+        }
+    }, [element, options, onChange]);
+    return (React.createElement("label", { className: "checkbox ob-checkbox__input-label cypress-checkbox-label", htmlFor: `${id}_select-all`, style: {
+            fontStyle: 'italic',
+            marginBottom: '1.25rem',
+        } },
+        React.createElement(Checkbox, { color: "default", classes: {
+                checked: 'ob-checkbox__input-checked',
+            }, className: "ob-checkbox__input cypress-checkbox-control", id: `${id}_select-all`, disableRipple: true, checked: allSelected, indeterminate: !!selected.length && !allSelected, onChange: (e) => handleToggleAll(e.target.checked), disabled: disabled }),
+        allSelected ? 'Deselect All' : 'Select All'));
+};
+export default React.memo(ToggleAllCheckbox);
 //# sourceMappingURL=ToggleAllCheckbox.js.map

package/dist/components/renderer/attachments/AttachmentStatus.d.ts

@@ -1,10 +1,10 @@
-import * as React from 'react';
-declare const _default: React.MemoExoticComponent<({ isUploading, isUploadPaused, uploadError, loadImageUrlError, isLoadingImageUrl, imageUrl, }: {
-    isUploading?: boolean | undefined;
-    isUploadPaused?: boolean | undefined;
-    uploadError?: Error | undefined;
-    loadImageUrlError?: Error | undefined;
-    isLoadingImageUrl?: boolean | undefined;
-    imageUrl: string | null | undefined;
-}) => JSX.Element>;
-export default _default;
+import * as React from 'react';
+declare const _default: React.MemoExoticComponent<({ isUploading, isUploadPaused, uploadError, loadImageUrlError, isLoadingImageUrl, imageUrl, }: {
+    isUploading?: boolean | undefined;
+    isUploadPaused?: boolean | undefined;
+    uploadError?: Error | undefined;
+    loadImageUrlError?: Error | undefined;
+    isLoadingImageUrl?: boolean | undefined;
+    imageUrl: string | null | undefined;
+}) => JSX.Element | null>;
+export default _default;

package/dist/components/renderer/attachments/AttachmentStatus.js

@@ -1,31 +1,37 @@
-import * as React from 'react';
-import { Tooltip } from '@mui/material';
-import UploadingAttachment from './UploadingAttachment';
-const AttachmentStatus = ({ isUploading, isUploadPaused, uploadError, loadImageUrlError, isLoadingImageUrl, imageUrl, }) => {
-    const tooltip = React.useMemo(() => {
-        if (isLoadingImageUrl && !imageUrl) {
-            return 'Attempting to load file preview. File is synced with submission.';
-        }
-        if (loadImageUrlError && !imageUrl) {
-            return 'File preview not available, however file is synced with submission.';
-        }
-        return 'Synced with submission.';
-    }, [imageUrl, isLoadingImageUrl, loadImageUrlError]);
-    if (uploadError) {
-        return (React.createElement(Tooltip, { title: uploadError.message },
-            React.createElement("span", { className: "attachment__status-wrapper" },
-                React.createElement("i", { className: "material-icons has-text-danger" }, "error"))));
-    }
-    if (isUploading) {
-        if (isUploadPaused) {
-            return (React.createElement("span", { className: "attachment__status-wrapper" },
-                React.createElement("i", { className: "material-icons" }, "pause")));
-        }
-        return React.createElement(UploadingAttachment, null);
-    }
-    return (React.createElement(Tooltip, { title: tooltip },
-        React.createElement("span", { className: "attachment__status-wrapper" },
-            React.createElement("i", { className: "material-icons has-text-success" }, "check_circle"))));
-};
-export default React.memo(AttachmentStatus);
+import * as React from 'react';
+import { Tooltip } from '@mui/material';
+import useIsOffline from '../../../hooks/useIsOffline';
+const AttachmentStatus = ({ isUploading, isUploadPaused, uploadError, loadImageUrlError, isLoadingImageUrl, imageUrl, }) => {
+    const isOffline = useIsOffline();
+    const tooltip = React.useMemo(() => {
+        if (isLoadingImageUrl && !imageUrl) {
+            return 'Attempting to load file preview. File is synced with submission.';
+        }
+        if (loadImageUrlError && !imageUrl) {
+            return 'File preview not available, however file is synced with submission.';
+        }
+        return 'Synced with submission.';
+    }, [imageUrl, isLoadingImageUrl, loadImageUrlError]);
+    if (uploadError) {
+        return (React.createElement(Tooltip, { title: uploadError.message },
+            React.createElement("span", { className: "attachment__status-wrapper" },
+                React.createElement("i", { className: "material-icons has-text-danger" }, "error"))));
+    }
+    if (isUploading) {
+        if (isUploadPaused) {
+            return (React.createElement("span", { className: "attachment__status-wrapper" },
+                React.createElement("i", { className: "material-icons" }, "pause")));
+        }
+        if (isOffline) {
+            return (React.createElement(Tooltip, { title: "Upload will start when you connect to the internet" },
+                React.createElement("div", { className: "cypress-attachment-uploading" },
+                    React.createElement("i", { className: "material-icons has-text-warning" }, "wifi_off"))));
+        }
+        return null;
+    }
+    return (React.createElement(Tooltip, { title: tooltip },
+        React.createElement("span", { className: "attachment__status-wrapper" },
+            React.createElement("i", { className: "material-icons has-text-success" }, "check_circle"))));
+};
+export default React.memo(AttachmentStatus);
 //# sourceMappingURL=AttachmentStatus.js.map

package/dist/components/renderer/attachments/AttachmentStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentStatus.js","sourceRoot":"","sources":["../../../../src/components/renderer/attachments/AttachmentStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AAEvD,MAAM,gBAAgB,GAAG,CAAC,EACxB,WAAW,EACX,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,GAQT,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,iBAAiB,IAAI,CAAC,QAAQ,EAAE;YAClC,OAAO,kEAAkE,CAAA;SAC1E;QACD,IAAI,iBAAiB,IAAI,CAAC,QAAQ,EAAE;YAClC,OAAO,qEAAqE,CAAA;SAC7E;QAED,OAAO,yBAAyB,CAAA;IAClC,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,CAAA;IAEpD,IAAI,WAAW,EAAE;QACf,OAAO,CACL,oBAAC,OAAO,IAAC,KAAK,EAAE,WAAW,CAAC,OAAO;YACjC,8BAAM,SAAS,EAAC,4BAA4B;gBAC1C,2BAAG,SAAS,EAAC,gCAAgC,YAAU,CAClD,CACC,CACX,CAAA;KACF;IAED,IAAI,WAAW,EAAE;QACf,IAAI,cAAc,EAAE;YAClB,OAAO,CACL,8BAAM,SAAS,EAAC,4BAA4B;gBAC1C,2BAAG,SAAS,EAAC,gBAAgB,YAAU,CAClC,CACR,CAAA;SACF;QACD,OAAO,oBAAC,mBAAmB,OAAG,CAAA;KAC/B;IAED,OAAO,CACL,oBAAC,OAAO,IAAC,KAAK,EAAE,OAAO;QACrB,8BAAM,SAAS,EAAC,4BAA4B;YAC1C,2BAAG,SAAS,EAAC,iCAAiC,mBAAiB,CAC1D,CACC,CACX,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Tooltip } from '@mui/material'\nimport UploadingAttachment from './UploadingAttachment'\n\nconst AttachmentStatus = ({\n  isUploading,\n  isUploadPaused,\n  uploadError,\n  loadImageUrlError,\n  isLoadingImageUrl,\n  imageUrl,\n}: {\n  isUploading?: boolean\n  isUploadPaused?: boolean\n  uploadError?: Error\n  loadImageUrlError?: Error\n  isLoadingImageUrl?: boolean\n  imageUrl: string | null | undefined\n}) => {\n  const tooltip = React.useMemo(() => {\n    if (isLoadingImageUrl && !imageUrl) {\n      return 'Attempting to load file preview. File is synced with submission.'\n    }\n    if (loadImageUrlError && !imageUrl) {\n      return 'File preview not available, however file is synced with submission.'\n    }\n\n    return 'Synced with submission.'\n  }, [imageUrl, isLoadingImageUrl, loadImageUrlError])\n\n  if (uploadError) {\n    return (\n      <Tooltip title={uploadError.message}>\n        <span className=\"attachment__status-wrapper\">\n          <i className=\"material-icons has-text-danger\">error</i>\n        </span>\n      </Tooltip>\n    )\n  }\n\n  if (isUploading) {\n    if (isUploadPaused) {\n      return (\n        <span className=\"attachment__status-wrapper\">\n          <i className=\"material-icons\">pause</i>\n        </span>\n      )\n    }\n    return <UploadingAttachment />\n  }\n\n  return (\n    <Tooltip title={tooltip}>\n      <span className=\"attachment__status-wrapper\">\n        <i className=\"material-icons has-text-success\">check_circle</i>\n      </span>\n    </Tooltip>\n  )\n}\n\nexport default React.memo(AttachmentStatus)\n"]}
+{"version":3,"file":"AttachmentStatus.js","sourceRoot":"","sources":["../../../../src/components/renderer/attachments/AttachmentStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,YAAY,MAAM,6BAA6B,CAAA;AAEtD,MAAM,gBAAgB,GAAG,CAAC,EACxB,WAAW,EACX,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,GAQT,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAEhC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,iBAAiB,IAAI,CAAC,QAAQ,EAAE;YAClC,OAAO,kEAAkE,CAAA;SAC1E;QACD,IAAI,iBAAiB,IAAI,CAAC,QAAQ,EAAE;YAClC,OAAO,qEAAqE,CAAA;SAC7E;QAED,OAAO,yBAAyB,CAAA;IAClC,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,CAAA;IAEpD,IAAI,WAAW,EAAE;QACf,OAAO,CACL,oBAAC,OAAO,IAAC,KAAK,EAAE,WAAW,CAAC,OAAO;YACjC,8BAAM,SAAS,EAAC,4BAA4B;gBAC1C,2BAAG,SAAS,EAAC,gCAAgC,YAAU,CAClD,CACC,CACX,CAAA;KACF;IAED,IAAI,WAAW,EAAE;QACf,IAAI,cAAc,EAAE;YAClB,OAAO,CACL,8BAAM,SAAS,EAAC,4BAA4B;gBAC1C,2BAAG,SAAS,EAAC,gBAAgB,YAAU,CAClC,CACR,CAAA;SACF;QACD,IAAI,SAAS,EAAE;YACb,OAAO,CACL,oBAAC,OAAO,IAAC,KAAK,EAAC,oDAAoD;gBACjE,6BAAK,SAAS,EAAC,8BAA8B;oBAC3C,2BAAG,SAAS,EAAC,iCAAiC,eAAa,CACvD,CACE,CACX,CAAA;SACF;QACD,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,oBAAC,OAAO,IAAC,KAAK,EAAE,OAAO;QACrB,8BAAM,SAAS,EAAC,4BAA4B;YAC1C,2BAAG,SAAS,EAAC,iCAAiC,mBAAiB,CAC1D,CACC,CACX,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Tooltip } from '@mui/material'\nimport useIsOffline from '../../../hooks/useIsOffline'\n\nconst AttachmentStatus = ({\n  isUploading,\n  isUploadPaused,\n  uploadError,\n  loadImageUrlError,\n  isLoadingImageUrl,\n  imageUrl,\n}: {\n  isUploading?: boolean\n  isUploadPaused?: boolean\n  uploadError?: Error\n  loadImageUrlError?: Error\n  isLoadingImageUrl?: boolean\n  imageUrl: string | null | undefined\n}) => {\n  const isOffline = useIsOffline()\n\n  const tooltip = React.useMemo(() => {\n    if (isLoadingImageUrl && !imageUrl) {\n      return 'Attempting to load file preview. File is synced with submission.'\n    }\n    if (loadImageUrlError && !imageUrl) {\n      return 'File preview not available, however file is synced with submission.'\n    }\n\n    return 'Synced with submission.'\n  }, [imageUrl, isLoadingImageUrl, loadImageUrlError])\n\n  if (uploadError) {\n    return (\n      <Tooltip title={uploadError.message}>\n        <span className=\"attachment__status-wrapper\">\n          <i className=\"material-icons has-text-danger\">error</i>\n        </span>\n      </Tooltip>\n    )\n  }\n\n  if (isUploading) {\n    if (isUploadPaused) {\n      return (\n        <span className=\"attachment__status-wrapper\">\n          <i className=\"material-icons\">pause</i>\n        </span>\n      )\n    }\n    if (isOffline) {\n      return (\n        <Tooltip title=\"Upload will start when you connect to the internet\">\n          <div className=\"cypress-attachment-uploading\">\n            <i className=\"material-icons has-text-warning\">wifi_off</i>\n          </div>\n        </Tooltip>\n      )\n    }\n    return null\n  }\n\n  return (\n    <Tooltip title={tooltip}>\n      <span className=\"attachment__status-wrapper\">\n        <i className=\"material-icons has-text-success\">check_circle</i>\n      </span>\n    </Tooltip>\n  )\n}\n\nexport default React.memo(AttachmentStatus)\n"]}

package/dist/components/renderer/attachments/FileCard.d.ts

@@ -1,18 +1,19 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-declare type Props = {
-    element: FormTypes.FilesElement;
-    isUploading?: boolean;
-    isUploadPaused?: boolean;
-    uploadErrorMessage?: string;
-    loadImageUrlError?: Error;
-    isLoadingImageUrl?: boolean;
-    fileName: string;
-    imageUrl: string | undefined | null;
-    onRemove: () => void;
-    onDownload?: () => void;
-    onRetry?: () => void;
-};
-declare function FileCard({ element, isUploading, isUploadPaused, uploadErrorMessage, loadImageUrlError, isLoadingImageUrl, imageUrl, fileName, onDownload, onRemove, onRetry, }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FileCard>;
-export default _default;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+declare type Props = {
+    element: FormTypes.FilesElement;
+    isUploading?: boolean;
+    isUploadPaused?: boolean;
+    uploadErrorMessage?: string;
+    loadImageUrlError?: Error;
+    isLoadingImageUrl?: boolean;
+    fileName: string;
+    imageUrl: string | undefined | null;
+    onRemove: () => void;
+    onDownload?: () => void;
+    onRetry?: () => void;
+    progress: undefined | number;
+};
+declare function FileCard({ element, isUploading, isUploadPaused, uploadErrorMessage, loadImageUrlError, isLoadingImageUrl, imageUrl, fileName, onDownload, onRemove, onRetry, progress, }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FileCard>;
+export default _default;

package/dist/components/renderer/attachments/FileCard.js

@@ -1,58 +1,61 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import useBooleanState from '../../../hooks/useBooleanState';
-import useClickOutsideElement from '../../../hooks/useClickOutsideElement';
-import FileCardContent from './FileCardContent';
-import AttachmentStatus from './AttachmentStatus';
-import { checkFileNameIsValid, checkFileNameExtensionIsValid, } from '../../../services/form-validation';
-function FileCard({ element, isUploading, isUploadPaused, uploadErrorMessage, loadImageUrlError, isLoadingImageUrl, imageUrl, fileName, onDownload, onRemove, onRetry, }) {
-    const dropDownRef = React.useRef(null);
-    const [isShowingMore, showMore, hideMore] = useBooleanState(false);
-    const uploadError = React.useMemo(() => {
-        if (!checkFileNameIsValid(element, fileName)) {
-            return new Error(`${fileName.split('.').pop()} files are not allowed`);
-        }
-        if (!checkFileNameExtensionIsValid(element, fileName)) {
-            return new Error(`${fileName} must have an extension`);
-        }
-        if (uploadErrorMessage) {
-            return new Error(uploadErrorMessage);
-        }
-    }, [element, fileName, uploadErrorMessage]);
-    useClickOutsideElement(dropDownRef, React.useCallback(() => {
-        if (isShowingMore) {
-            hideMore();
-        }
-    }, [hideMore, isShowingMore]));
-    return (React.createElement("div", { className: "column is-one-quarter" },
-        React.createElement("div", { className: "ob-files__box" },
-            React.createElement("div", { className: "ob-files__content" },
-                React.createElement(FileCardContent, { imageUrl: imageUrl })),
-            React.createElement("div", { className: clsx('dropdown is-right ob-files__menu', {
-                    'is-active': isShowingMore,
-                }), ref: dropDownRef },
-                React.createElement("div", { className: "dropdown-trigger" },
-                    React.createElement("button", { type: "button", className: "button ob-files__menu-button cypress-file-menu-button", "aria-haspopup": "true", "aria-controls": "dropdown-menu", onClick: isShowingMore ? hideMore : showMore },
-                        React.createElement("i", { className: "material-icons ob-files__menu-icon" }, "more_vert"))),
-                React.createElement("div", { className: "dropdown-menu", role: "menu" },
-                    React.createElement("div", { className: "dropdown-content" },
-                        onRetry && (React.createElement("a", { className: "dropdown-item cypress-file-retry-button", onClick: () => {
-                                hideMore();
-                                onRetry();
-                            } }, "Retry")),
-                        onDownload && (React.createElement("a", { className: "dropdown-item cypress-file-download-button", onClick: () => {
-                                hideMore();
-                                onDownload();
-                            } }, "Download")),
-                        React.createElement("a", { className: clsx('dropdown-item cypress-file-remove-button', {
-                                'ob-files__menu-remove-hidden': element.readOnly,
-                            }), onClick: () => {
-                                hideMore();
-                                onRemove();
-                            } }, "Remove")))),
-            React.createElement("div", { className: "ob-files__file-name is-size-6" },
-                React.createElement("span", { className: "ob-files__file-name-inner" }, fileName),
-                React.createElement(AttachmentStatus, { isUploading: isUploading, isUploadPaused: isUploadPaused, uploadError: uploadError, loadImageUrlError: loadImageUrlError, isLoadingImageUrl: isLoadingImageUrl, imageUrl: imageUrl })))));
-}
-export default React.memo(FileCard);
+import * as React from 'react';
+import clsx from 'clsx';
+import useBooleanState from '../../../hooks/useBooleanState';
+import useClickOutsideElement from '../../../hooks/useClickOutsideElement';
+import FileCardContent from './FileCardContent';
+import AttachmentStatus from './AttachmentStatus';
+import { checkFileNameIsValid, checkFileNameExtensionIsValid, } from '../../../services/form-validation';
+import ProgressBar from './ProgressBar';
+function FileCard({ element, isUploading, isUploadPaused, uploadErrorMessage, loadImageUrlError, isLoadingImageUrl, imageUrl, fileName, onDownload, onRemove, onRetry, progress, }) {
+    const dropDownRef = React.useRef(null);
+    const [isShowingMore, showMore, hideMore] = useBooleanState(false);
+    const uploadError = React.useMemo(() => {
+        if (!checkFileNameIsValid(element, fileName)) {
+            return new Error(`${fileName.split('.').pop()} files are not allowed`);
+        }
+        if (!checkFileNameExtensionIsValid(element, fileName)) {
+            return new Error(`${fileName} must have an extension`);
+        }
+        if (uploadErrorMessage) {
+            return new Error(uploadErrorMessage);
+        }
+    }, [element, fileName, uploadErrorMessage]);
+    useClickOutsideElement(dropDownRef, React.useCallback(() => {
+        if (isShowingMore) {
+            hideMore();
+        }
+    }, [hideMore, isShowingMore]));
+    const progressTooltipRef = React.useRef(null);
+    return (React.createElement("div", { className: "column is-one-quarter" },
+        React.createElement("div", { className: "ob-files__box" },
+            React.createElement("div", { className: "ob-files__content" },
+                React.createElement(FileCardContent, { imageUrl: imageUrl })),
+            React.createElement("div", { className: clsx('dropdown is-right ob-files__menu', {
+                    'is-active': isShowingMore,
+                }), ref: dropDownRef },
+                React.createElement("div", { className: "dropdown-trigger" },
+                    React.createElement("button", { type: "button", className: "button ob-files__menu-button cypress-file-menu-button", "aria-haspopup": "true", "aria-controls": "dropdown-menu", onClick: isShowingMore ? hideMore : showMore },
+                        React.createElement("i", { className: "material-icons ob-files__menu-icon" }, "more_vert"))),
+                React.createElement("div", { className: "dropdown-menu", role: "menu" },
+                    React.createElement("div", { className: "dropdown-content" },
+                        onRetry && (React.createElement("a", { className: "dropdown-item cypress-file-retry-button", onClick: () => {
+                                hideMore();
+                                onRetry();
+                            } }, "Retry")),
+                        onDownload && (React.createElement("a", { className: "dropdown-item cypress-file-download-button", onClick: () => {
+                                hideMore();
+                                onDownload();
+                            } }, "Download")),
+                        React.createElement("a", { className: clsx('dropdown-item cypress-file-remove-button', {
+                                'ob-files__menu-remove-hidden': element.readOnly,
+                            }), onClick: () => {
+                                hideMore();
+                                onRemove();
+                            } }, "Remove")))),
+            React.createElement("div", { className: "ob-files__file-name is-size-6", ref: progressTooltipRef },
+                React.createElement("span", { className: "ob-files__file-name-inner" }, fileName),
+                React.createElement(AttachmentStatus, { isUploading: isUploading, isUploadPaused: isUploadPaused, uploadError: uploadError, loadImageUrlError: loadImageUrlError, isLoadingImageUrl: isLoadingImageUrl, imageUrl: imageUrl }),
+                progressTooltipRef.current && (React.createElement(ProgressBar, { progress: progress, isShowing: !!isUploading, tooltipAnchorEl: progressTooltipRef.current }))))));
+}
+export default React.memo(FileCard);
 //# sourceMappingURL=FileCard.js.map

package/dist/components/renderer/attachments/FileCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileCard.js","sourceRoot":"","sources":["../../../../src/components/renderer/attachments/FileCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,eAAe,MAAM,gCAAgC,CAAA;AAC5D,OAAO,sBAAsB,MAAM,uCAAuC,CAAA;AAE1E,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,EACL,oBAAoB,EACpB,6BAA6B,GAC9B,MAAM,mCAAmC,CAAA;AAgB1C,SAAS,QAAQ,CAAC,EAChB,OAAO,EACP,WAAW,EACX,cAAc,EACd,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,OAAO,GACD;IACN,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IACtC,MAAM,CAAC,aAAa,EAAE,QAAQ,EAAE,QAAQ,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAElE,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrC,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,QAAQ,CAAC,EAAE;YAC5C,OAAO,IAAI,KAAK,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,wBAAwB,CAAC,CAAA;SACvE;QACD,IAAI,CAAC,6BAA6B,CAAC,OAAO,EAAE,QAAQ,CAAC,EAAE;YACrD,OAAO,IAAI,KAAK,CAAC,GAAG,QAAQ,yBAAyB,CAAC,CAAA;SACvD;QACD,IAAI,kBAAkB,EAAE;YACtB,OAAO,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAA;SACrC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAA;IAE3C,sBAAsB,CACpB,WAAW,EACX,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACrB,IAAI,aAAa,EAAE;YACjB,QAAQ,EAAE,CAAA;SACX;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAC9B,CAAA;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,uBAAuB;QACpC,6BAAK,SAAS,EAAC,eAAe;YAC5B,6BAAK,SAAS,EAAC,mBAAmB;gBAChC,oBAAC,eAAe,IAAC,QAAQ,EAAE,QAAQ,GAAI,CACnC;YACN,6BACE,SAAS,EAAE,IAAI,CAAC,kCAAkC,EAAE;oBAClD,WAAW,EAAE,aAAa;iBAC3B,CAAC,EACF,GAAG,EAAE,WAAW;gBAEhB,6BAAK,SAAS,EAAC,kBAAkB;oBAC/B,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,uDAAuD,mBACnD,MAAM,mBACN,eAAe,EAC7B,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;wBAE5C,2BAAG,SAAS,EAAC,oCAAoC,gBAAc,CACxD,CACL;gBACN,6BAAK,SAAS,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM;oBACxC,6BAAK,SAAS,EAAC,kBAAkB;wBAC9B,OAAO,IAAI,CACV,2BACE,SAAS,EAAC,yCAAyC,EACnD,OAAO,EAAE,GAAG,EAAE;gCACZ,QAAQ,EAAE,CAAA;gCACV,OAAO,EAAE,CAAA;4BACX,CAAC,YAGC,CACL;wBACA,UAAU,IAAI,CACb,2BACE,SAAS,EAAC,4CAA4C,EACtD,OAAO,EAAE,GAAG,EAAE;gCACZ,QAAQ,EAAE,CAAA;gCACV,UAAU,EAAE,CAAA;4BACd,CAAC,eAGC,CACL;wBACD,2BACE,SAAS,EAAE,IAAI,CAAC,0CAA0C,EAAE;gCAC1D,8BAA8B,EAAE,OAAO,CAAC,QAAQ;6BACjD,CAAC,EACF,OAAO,EAAE,GAAG,EAAE;gCACZ,QAAQ,EAAE,CAAA;gCACV,QAAQ,EAAE,CAAA;4BACZ,CAAC,aAGC,CACA,CACF,CACF;YAEN,6BAAK,SAAS,EAAC,+BAA+B;gBAC5C,8BAAM,SAAS,EAAC,2BAA2B,IAAE,QAAQ,CAAQ;gBAC7D,oBAAC,gBAAgB,IACf,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,iBAAiB,EAAE,iBAAiB,EACpC,QAAQ,EAAE,QAAQ,GAClB,CACE,CACF,CACF,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport useBooleanState from '../../../hooks/useBooleanState'\nimport useClickOutsideElement from '../../../hooks/useClickOutsideElement'\nimport { FormTypes } from '@oneblink/types'\nimport FileCardContent from './FileCardContent'\nimport AttachmentStatus from './AttachmentStatus'\nimport {\n  checkFileNameIsValid,\n  checkFileNameExtensionIsValid,\n} from '../../../services/form-validation'\n\ntype Props = {\n  element: FormTypes.FilesElement\n  isUploading?: boolean\n  isUploadPaused?: boolean\n  uploadErrorMessage?: string\n  loadImageUrlError?: Error\n  isLoadingImageUrl?: boolean\n  fileName: string\n  imageUrl: string | undefined | null\n  onRemove: () => void\n  onDownload?: () => void\n  onRetry?: () => void\n}\n\nfunction FileCard({\n  element,\n  isUploading,\n  isUploadPaused,\n  uploadErrorMessage,\n  loadImageUrlError,\n  isLoadingImageUrl,\n  imageUrl,\n  fileName,\n  onDownload,\n  onRemove,\n  onRetry,\n}: Props) {\n  const dropDownRef = React.useRef(null)\n  const [isShowingMore, showMore, hideMore] = useBooleanState(false)\n\n  const uploadError = React.useMemo(() => {\n    if (!checkFileNameIsValid(element, fileName)) {\n      return new Error(`${fileName.split('.').pop()} files are not allowed`)\n    }\n    if (!checkFileNameExtensionIsValid(element, fileName)) {\n      return new Error(`${fileName} must have an extension`)\n    }\n    if (uploadErrorMessage) {\n      return new Error(uploadErrorMessage)\n    }\n  }, [element, fileName, uploadErrorMessage])\n\n  useClickOutsideElement(\n    dropDownRef,\n    React.useCallback(() => {\n      if (isShowingMore) {\n        hideMore()\n      }\n    }, [hideMore, isShowingMore]),\n  )\n\n  return (\n    <div className=\"column is-one-quarter\">\n      <div className=\"ob-files__box\">\n        <div className=\"ob-files__content\">\n          <FileCardContent imageUrl={imageUrl} />\n        </div>\n        <div\n          className={clsx('dropdown is-right ob-files__menu', {\n            'is-active': isShowingMore,\n          })}\n          ref={dropDownRef}\n        >\n          <div className=\"dropdown-trigger\">\n            <button\n              type=\"button\"\n              className=\"button ob-files__menu-button cypress-file-menu-button\"\n              aria-haspopup=\"true\"\n              aria-controls=\"dropdown-menu\"\n              onClick={isShowingMore ? hideMore : showMore}\n            >\n              <i className=\"material-icons ob-files__menu-icon\">more_vert</i>\n            </button>\n          </div>\n          <div className=\"dropdown-menu\" role=\"menu\">\n            <div className=\"dropdown-content\">\n              {onRetry && (\n                <a\n                  className=\"dropdown-item cypress-file-retry-button\"\n                  onClick={() => {\n                    hideMore()\n                    onRetry()\n                  }}\n                >\n                  Retry\n                </a>\n              )}\n              {onDownload && (\n                <a\n                  className=\"dropdown-item cypress-file-download-button\"\n                  onClick={() => {\n                    hideMore()\n                    onDownload()\n                  }}\n                >\n                  Download\n                </a>\n              )}\n              <a\n                className={clsx('dropdown-item cypress-file-remove-button', {\n                  'ob-files__menu-remove-hidden': element.readOnly,\n                })}\n                onClick={() => {\n                  hideMore()\n                  onRemove()\n                }}\n              >\n                Remove\n              </a>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"ob-files__file-name is-size-6\">\n          <span className=\"ob-files__file-name-inner\">{fileName}</span>\n          <AttachmentStatus\n            isUploading={isUploading}\n            isUploadPaused={isUploadPaused}\n            uploadError={uploadError}\n            loadImageUrlError={loadImageUrlError}\n            isLoadingImageUrl={isLoadingImageUrl}\n            imageUrl={imageUrl}\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default React.memo(FileCard)\n"]}
+{"version":3,"file":"FileCard.js","sourceRoot":"","sources":["../../../../src/components/renderer/attachments/FileCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport useBooleanState from '../../../hooks/useBooleanState'\nimport useClickOutsideElement from '../../../hooks/useClickOutsideElement'\nimport { FormTypes } from '@oneblink/types'\nimport FileCardContent from './FileCardContent'\nimport AttachmentStatus from './AttachmentStatus'\nimport {\n  checkFileNameIsValid,\n  checkFileNameExtensionIsValid,\n} from '../../../services/form-validation'\nimport ProgressBar from './ProgressBar'\n\ntype Props = {\n  element: FormTypes.FilesElement\n  isUploading?: boolean\n  isUploadPaused?: boolean\n  uploadErrorMessage?: string\n  loadImageUrlError?: Error\n  isLoadingImageUrl?: boolean\n  fileName: string\n  imageUrl: string | undefined | null\n  onRemove: () => void\n  onDownload?: () => void\n  onRetry?: () => void\n  progress: undefined | number\n}\n\nfunction FileCard({\n  element,\n  isUploading,\n  isUploadPaused,\n  uploadErrorMessage,\n  loadImageUrlError,\n  isLoadingImageUrl,\n  imageUrl,\n  fileName,\n  onDownload,\n  onRemove,\n  onRetry,\n  progress,\n}: Props) {\n  const dropDownRef = React.useRef(null)\n  const [isShowingMore, showMore, hideMore] = useBooleanState(false)\n\n  const uploadError = React.useMemo(() => {\n    if (!checkFileNameIsValid(element, fileName)) {\n      return new Error(`${fileName.split('.').pop()} files are not allowed`)\n    }\n    if (!checkFileNameExtensionIsValid(element, fileName)) {\n      return new Error(`${fileName} must have an extension`)\n    }\n    if (uploadErrorMessage) {\n      return new Error(uploadErrorMessage)\n    }\n  }, [element, fileName, uploadErrorMessage])\n\n  useClickOutsideElement(\n    dropDownRef,\n    React.useCallback(() => {\n      if (isShowingMore) {\n        hideMore()\n      }\n    }, [hideMore, isShowingMore]),\n  )\n\n  const progressTooltipRef = React.useRef<HTMLDivElement>(null)\n  return (\n    <div className=\"column is-one-quarter\">\n      <div className=\"ob-files__box\">\n        <div className=\"ob-files__content\">\n          <FileCardContent imageUrl={imageUrl} />\n        </div>\n        <div\n          className={clsx('dropdown is-right ob-files__menu', {\n            'is-active': isShowingMore,\n          })}\n          ref={dropDownRef}\n        >\n          <div className=\"dropdown-trigger\">\n            <button\n              type=\"button\"\n              className=\"button ob-files__menu-button cypress-file-menu-button\"\n              aria-haspopup=\"true\"\n              aria-controls=\"dropdown-menu\"\n              onClick={isShowingMore ? hideMore : showMore}\n            >\n              <i className=\"material-icons ob-files__menu-icon\">more_vert</i>\n            </button>\n          </div>\n          <div className=\"dropdown-menu\" role=\"menu\">\n            <div className=\"dropdown-content\">\n              {onRetry && (\n                <a\n                  className=\"dropdown-item cypress-file-retry-button\"\n                  onClick={() => {\n                    hideMore()\n                    onRetry()\n                  }}\n                >\n                  Retry\n                </a>\n              )}\n              {onDownload && (\n                <a\n                  className=\"dropdown-item cypress-file-download-button\"\n                  onClick={() => {\n                    hideMore()\n                    onDownload()\n                  }}\n                >\n                  Download\n                </a>\n              )}\n              <a\n                className={clsx('dropdown-item cypress-file-remove-button', {\n                  'ob-files__menu-remove-hidden': element.readOnly,\n                })}\n                onClick={() => {\n                  hideMore()\n                  onRemove()\n                }}\n              >\n                Remove\n              </a>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"ob-files__file-name is-size-6\" ref={progressTooltipRef}>\n          <span className=\"ob-files__file-name-inner\">{fileName}</span>\n          <AttachmentStatus\n            isUploading={isUploading}\n            isUploadPaused={isUploadPaused}\n            uploadError={uploadError}\n            loadImageUrlError={loadImageUrlError}\n            isLoadingImageUrl={isLoadingImageUrl}\n            imageUrl={imageUrl}\n          />\n          {progressTooltipRef.current && (\n            <ProgressBar\n              progress={progress}\n              isShowing={!!isUploading}\n              tooltipAnchorEl={progressTooltipRef.current}\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default React.memo(FileCard)\n"]}

package/dist/components/renderer/attachments/FileCardContent.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-declare const _default: React.MemoExoticComponent<({ imageUrl, }: {
-    imageUrl: string | null | undefined;
-}) => JSX.Element>;
-export default _default;
+import * as React from 'react';
+declare const _default: React.MemoExoticComponent<({ imageUrl, }: {
+    imageUrl: string | null | undefined;
+}) => JSX.Element>;
+export default _default;

package/dist/components/renderer/attachments/FileCardContent.js

@@ -1,11 +1,11 @@
-import * as React from 'react';
-const FileCardContent = ({ imageUrl, }) => {
-    if (imageUrl) {
-        return (React.createElement("div", { className: "ob-files__content-image" },
-            React.createElement("img", { className: "ob-files__image", src: imageUrl })));
-    }
-    return (React.createElement("div", { className: "ob-files__content-file has-text-centered" },
-        React.createElement("i", { className: "material-icons icon-large ob-files__attach-icon has-text-grey" }, "attach_file")));
-};
-export default React.memo(FileCardContent);
+import * as React from 'react';
+const FileCardContent = ({ imageUrl, }) => {
+    if (imageUrl) {
+        return (React.createElement("div", { className: "ob-files__content-image" },
+            React.createElement("img", { className: "ob-files__image", src: imageUrl })));
+    }
+    return (React.createElement("div", { className: "ob-files__content-file has-text-centered" },
+        React.createElement("i", { className: "material-icons icon-large ob-files__attach-icon has-text-grey" }, "attach_file")));
+};
+export default React.memo(FileCardContent);
 //# sourceMappingURL=FileCardContent.js.map

package/dist/components/renderer/attachments/Files.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+declare function Files<T>({ id, element, isDirty, attachments, validationMessage, displayValidationMessage, onAddFiles, onRenderAttachment, }: {
+    id: string;
+    element: FormTypes.FilesElement;
+    isDirty: boolean;
+    attachments: T[];
+    displayValidationMessage: boolean;
+    validationMessage: string | undefined;
+    onAddFiles: (files: File[]) => void;
+    onRenderAttachment: (attachment: T, index: number) => React.ReactNode;
+}): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Files>;
+export default _default;

package/dist/components/renderer/attachments/Files.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import FormElementLabelContainer from '../FormElementLabelContainer';
+function Files({ id, element, isDirty, attachments, validationMessage, displayValidationMessage, onAddFiles, onRenderAttachment, }) {
+    const inputRef = React.useRef(null);
+    const handleAdd = React.useCallback(() => {
+        if (!inputRef.current)
+            return;
+        // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNISED
+        inputRef.current.value = '';
+        inputRef.current.click();
+    }, []);
+    return (React.createElement("div", { className: "cypress-files-element" },
+        React.createElement(FormElementLabelContainer, { className: "ob-files", element: element, id: id, required: !!element.minEntries },
+            React.createElement("input", { ref: inputRef, type: "file", name: element.name, id: id, className: "file-input ob-input", multiple: element.maxEntries !== 1, disabled: element.readOnly, onChange: (event) => onAddFiles(event.target.files ? Array.from(event.target.files) : []) }),
+            React.createElement("div", { className: "control cypress-files-control" },
+                React.createElement("div", { className: "columns is-multiline" },
+                    attachments.map(onRenderAttachment),
+                    !element.readOnly &&
+                        (!element.maxEntries ||
+                            attachments.length < element.maxEntries) && (React.createElement("div", { className: "column is-one-quarter" },
+                        React.createElement("button", { type: "button", className: "button ob-files__add-new-button", onClick: handleAdd },
+                            React.createElement("i", { className: "material-icons icon-x-large" }, "add")))))),
+            (isDirty || displayValidationMessage) && !!validationMessage && (React.createElement("div", { role: "alert", className: "has-margin-top-8" },
+                React.createElement("div", { className: "has-text-danger ob-error__text cypress-validation-message" }, validationMessage))))));
+}
+export default React.memo(Files);
+//# sourceMappingURL=Files.js.map

package/dist/components/renderer/attachments/Files.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Files.js","sourceRoot":"","sources":["../../../../src/components/renderer/attachments/Files.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,yBAAyB,MAAM,8BAA8B,CAAA;AAEpE,SAAS,KAAK,CAAI,EAChB,EAAE,EACF,OAAO,EACP,OAAO,EACP,WAAW,EACX,iBAAiB,EACjB,wBAAwB,EACxB,UAAU,EACV,kBAAkB,GAUnB;IACC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAA;IAErD,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACvC,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAM;QAC7B,mFAAmF;QACnF,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAA;QAC3B,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,6BAAK,SAAS,EAAC,uBAAuB;QACpC,oBAAC,yBAAyB,IACxB,SAAS,EAAC,UAAU,EACpB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU;YAE9B,+BACE,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,EAAE,EAAE,EAAE,EACN,SAAS,EAAC,qBAAqB,EAC/B,QAAQ,EAAE,OAAO,CAAC,UAAU,KAAK,CAAC,EAClC,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAClB,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,GAEtE;YACF,6BAAK,SAAS,EAAC,+BAA+B;gBAC5C,6BAAK,SAAS,EAAC,sBAAsB;oBAClC,WAAW,CAAC,GAAG,CAAC,kBAAkB,CAAC;oBACnC,CAAC,OAAO,CAAC,QAAQ;wBAChB,CAAC,CAAC,OAAO,CAAC,UAAU;4BAClB,WAAW,CAAC,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,IAAI,CAC5C,6BAAK,SAAS,EAAC,uBAAuB;wBACpC,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,iCAAiC,EAC3C,OAAO,EAAE,SAAS;4BAElB,2BAAG,SAAS,EAAC,6BAA6B,UAAQ,CAC3C,CACL,CACP,CACC,CACF;YAEL,CAAC,OAAO,IAAI,wBAAwB,CAAC,IAAI,CAAC,CAAC,iBAAiB,IAAI,CAC/D,6BAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB;gBAC5C,6BAAK,SAAS,EAAC,2DAA2D,IACvE,iBAAiB,CACd,CACF,CACP,CACyB,CACxB,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA","sourcesContent":["import * as React from 'react'\n\nimport { FormTypes } from '@oneblink/types'\nimport FormElementLabelContainer from '../FormElementLabelContainer'\n\nfunction Files<T>({\n  id,\n  element,\n  isDirty,\n  attachments,\n  validationMessage,\n  displayValidationMessage,\n  onAddFiles,\n  onRenderAttachment,\n}: {\n  id: string\n  element: FormTypes.FilesElement\n  isDirty: boolean\n  attachments: T[]\n  displayValidationMessage: boolean\n  validationMessage: string | undefined\n  onAddFiles: (files: File[]) => void\n  onRenderAttachment: (attachment: T, index: number) => React.ReactNode\n}) {\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  const handleAdd = React.useCallback(() => {\n    if (!inputRef.current) return\n    // RESET HTML FILE INPUT VALUE SO FILES PREVIOUSLY ADDED AND REMOVED ARE RECOGNISED\n    inputRef.current.value = ''\n    inputRef.current.click()\n  }, [])\n\n  return (\n    <div className=\"cypress-files-element\">\n      <FormElementLabelContainer\n        className=\"ob-files\"\n        element={element}\n        id={id}\n        required={!!element.minEntries}\n      >\n        <input\n          ref={inputRef}\n          type=\"file\"\n          name={element.name}\n          id={id}\n          className=\"file-input ob-input\"\n          multiple={element.maxEntries !== 1}\n          disabled={element.readOnly}\n          onChange={(event) =>\n            onAddFiles(event.target.files ? Array.from(event.target.files) : [])\n          }\n        />\n        <div className=\"control cypress-files-control\">\n          <div className=\"columns is-multiline\">\n            {attachments.map(onRenderAttachment)}\n            {!element.readOnly &&\n              (!element.maxEntries ||\n                attachments.length < element.maxEntries) && (\n                <div className=\"column is-one-quarter\">\n                  <button\n                    type=\"button\"\n                    className=\"button ob-files__add-new-button\"\n                    onClick={handleAdd}\n                  >\n                    <i className=\"material-icons icon-x-large\">add</i>\n                  </button>\n                </div>\n              )}\n          </div>\n        </div>\n\n        {(isDirty || displayValidationMessage) && !!validationMessage && (\n          <div role=\"alert\" className=\"has-margin-top-8\">\n            <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n              {validationMessage}\n            </div>\n          </div>\n        )}\n      </FormElementLabelContainer>\n    </div>\n  )\n}\n\nexport default React.memo(Files)\n"]}

package/dist/components/renderer/attachments/ImagePreviewUnavailable.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
-declare function ImagePreviewUnavailable(): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof ImagePreviewUnavailable>;
-export default _default;
+import * as React from 'react';
+declare function ImagePreviewUnavailable(): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ImagePreviewUnavailable>;
+export default _default;

package/dist/components/renderer/attachments/ImagePreviewUnavailable.js

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import useIsOffline from '../../../hooks/useIsOffline';
-function ImagePreviewUnavailable() {
-    const isOffline = useIsOffline();
-    return (React.createElement(React.Fragment, null, isOffline ? (React.createElement(React.Fragment, null,
-        React.createElement("i", { className: "material-icons has-text-warning icon-large has-margin-bottom-6" }, "wifi_off"),
-        React.createElement("p", null, "It looks like you're offline. Image preview will be available when connectivity is restored."))) : (React.createElement(React.Fragment, null,
-        React.createElement("i", { className: "material-icons has-text-grey icon-large has-margin-bottom-6" }, "attach_file"),
-        React.createElement("p", null, "You do not have access to preview this image, however, it will be included with your submission.")))));
-}
-export default React.memo(ImagePreviewUnavailable);
+import * as React from 'react';
+import useIsOffline from '../../../hooks/useIsOffline';
+function ImagePreviewUnavailable() {
+    const isOffline = useIsOffline();
+    return (React.createElement(React.Fragment, null, isOffline ? (React.createElement(React.Fragment, null,
+        React.createElement("i", { className: "material-icons has-text-warning icon-large has-margin-bottom-6" }, "wifi_off"),
+        React.createElement("p", null, "It looks like you're offline. Image preview will be available when connectivity is restored."))) : (React.createElement(React.Fragment, null,
+        React.createElement("i", { className: "material-icons has-text-grey icon-large has-margin-bottom-6" }, "attach_file"),
+        React.createElement("p", null, "You do not have access to preview this image, however, it will be included with your submission.")))));
+}
+export default React.memo(ImagePreviewUnavailable);
 //# sourceMappingURL=ImagePreviewUnavailable.js.map

package/dist/components/renderer/attachments/ProgressBar.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface Props {
+    progress: number | undefined;
+    isShowing: boolean;
+    tooltipAnchorEl?: HTMLDivElement;
+}
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

package/dist/components/renderer/attachments/ProgressBar.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Tooltip, Fade } from '@mui/material';
+import ProgressBar from '../ProgressBar';
+import useBooleanState from '../../../hooks/useBooleanState';
+const AttachmentProgressBar = ({ progress, isShowing, tooltipAnchorEl, }) => {
+    const [tooltipIsOpen, openTooltip, closeTooltip] = useBooleanState(false);
+    React.useEffect(() => {
+        if (tooltipAnchorEl && isShowing) {
+            console.log('Applying tooltip events...');
+            tooltipAnchorEl.onmouseenter = openTooltip;
+            tooltipAnchorEl.onmouseleave = closeTooltip;
+        }
+        if (!isShowing) {
+            closeTooltip();
+        }
+        return () => {
+            if (tooltipAnchorEl) {
+                console.log('Removing tooltip events...');
+                tooltipAnchorEl.onmouseenter = null;
+                tooltipAnchorEl.onmouseleave = null;
+            }
+        };
+    }, [closeTooltip, isShowing, openTooltip, tooltipAnchorEl]);
+    return (React.createElement(Fade, { in: isShowing },
+        React.createElement("span", null,
+            React.createElement("div", { className: "ob-progress__attachment-wrapper" },
+                React.createElement(Tooltip, { title: typeof progress === 'number'
+                        ? `Attachment upload progress: ${Math.round(progress)}%`
+                        : '', open: tooltipIsOpen },
+                    React.createElement("span", { className: "ob-progress__attachment-tooltip-element" })),
+                React.createElement(ProgressBar, { className: "ob-progress__attachment-bar", progress: progress || 0 })))));
+};
+export default React.memo(AttachmentProgressBar);
+//# sourceMappingURL=ProgressBar.js.map

package/dist/components/renderer/attachments/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../../src/components/renderer/attachments/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,eAAe,MAAM,gCAAgC,CAAA;AAQ5D,MAAM,qBAAqB,GAAG,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,eAAe,GACT,EAAE,EAAE;IACV,MAAM,CAAC,aAAa,EAAE,WAAW,EAAE,YAAY,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IACzE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,eAAe,IAAI,SAAS,EAAE;YAChC,OAAO,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAA;YACzC,eAAe,CAAC,YAAY,GAAG,WAAW,CAAA;YAC1C,eAAe,CAAC,YAAY,GAAG,YAAY,CAAA;SAC5C;QACD,IAAI,CAAC,SAAS,EAAE;YACd,YAAY,EAAE,CAAA;SACf;QACD,OAAO,GAAG,EAAE;YACV,IAAI,eAAe,EAAE;gBACnB,OAAO,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAA;gBACzC,eAAe,CAAC,YAAY,GAAG,IAAI,CAAA;gBACnC,eAAe,CAAC,YAAY,GAAG,IAAI,CAAA;aACpC;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,CAAC,CAAC,CAAA;IAC3D,OAAO,CACL,oBAAC,IAAI,IAAC,EAAE,EAAE,SAAS;QACjB;YACE,6BAAK,SAAS,EAAC,iCAAiC;gBAC9C,oBAAC,OAAO,IACN,KAAK,EACH,OAAO,QAAQ,KAAK,QAAQ;wBAC1B,CAAC,CAAC,+BAA+B,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG;wBACxD,CAAC,CAAC,EAAE,EAER,IAAI,EAAE,aAAa;oBAEnB,8BAAM,SAAS,EAAC,yCAAyC,GAAG,CACpD;gBACV,oBAAC,WAAW,IACV,SAAS,EAAC,6BAA6B,EACvC,QAAQ,EAAE,QAAQ,IAAI,CAAC,GACvB,CACE,CACD,CACF,CACR,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,qBAAqB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Tooltip, Fade } from '@mui/material'\nimport ProgressBar from '../ProgressBar'\nimport useBooleanState from '../../../hooks/useBooleanState'\n\ninterface Props {\n  progress: number | undefined\n  isShowing: boolean\n  tooltipAnchorEl?: HTMLDivElement\n}\n\nconst AttachmentProgressBar = ({\n  progress,\n  isShowing,\n  tooltipAnchorEl,\n}: Props) => {\n  const [tooltipIsOpen, openTooltip, closeTooltip] = useBooleanState(false)\n  React.useEffect(() => {\n    if (tooltipAnchorEl && isShowing) {\n      console.log('Applying tooltip events...')\n      tooltipAnchorEl.onmouseenter = openTooltip\n      tooltipAnchorEl.onmouseleave = closeTooltip\n    }\n    if (!isShowing) {\n      closeTooltip()\n    }\n    return () => {\n      if (tooltipAnchorEl) {\n        console.log('Removing tooltip events...')\n        tooltipAnchorEl.onmouseenter = null\n        tooltipAnchorEl.onmouseleave = null\n      }\n    }\n  }, [closeTooltip, isShowing, openTooltip, tooltipAnchorEl])\n  return (\n    <Fade in={isShowing}>\n      <span>\n        <div className=\"ob-progress__attachment-wrapper\">\n          <Tooltip\n            title={\n              typeof progress === 'number'\n                ? `Attachment upload progress: ${Math.round(progress)}%`\n                : ''\n            }\n            open={tooltipIsOpen}\n          >\n            <span className=\"ob-progress__attachment-tooltip-element\" />\n          </Tooltip>\n          <ProgressBar\n            className=\"ob-progress__attachment-bar\"\n            progress={progress || 0}\n          />\n        </div>\n      </span>\n    </Fade>\n  )\n}\n\nexport default React.memo<Props>(AttachmentProgressBar)\n"]}

package/dist/components/renderer/attachments/UploadingAttachment.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
-declare function UploadingAttachment(): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof UploadingAttachment>;
-export default _default;
+import * as React from 'react';
+declare function UploadingAttachment(): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof UploadingAttachment>;
+export default _default;