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

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

@@ -1,14 +0,0 @@
-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/attachments/Files.js

@@ -1,27 +0,0 @@
-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/attachments/Files.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Files.js","sourceRoot":"","sources":["../../../src/components/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/attachments/ImagePreviewUnavailable.d.ts

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

package/dist/components/attachments/ImagePreviewUnavailable.js

@@ -1,12 +0,0 @@
-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/attachments/ImagePreviewUnavailable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ImagePreviewUnavailable.js","sourceRoot":"","sources":["../../../src/components/attachments/ImagePreviewUnavailable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,YAAY,MAAM,0BAA0B,CAAA;AAEnD,SAAS,uBAAuB;IAC9B,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAEhC,OAAO,CACL,0CACG,SAAS,CAAC,CAAC,CAAC,CACX;QACE,2BAAG,SAAS,EAAC,gEAAgE,eAEzE;QACJ,8HAGI,CACH,CACJ,CAAC,CAAC,CAAC,CACF;QACE,2BAAG,SAAS,EAAC,6DAA6D,kBAEtE;QACJ,kIAGI,CACH,CACJ,CACA,CACJ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport useIsOffline from '../../hooks/useIsOffline'\n\nfunction ImagePreviewUnavailable() {\n  const isOffline = useIsOffline()\n\n  return (\n    <>\n      {isOffline ? (\n        <>\n          <i className=\"material-icons has-text-warning icon-large has-margin-bottom-6\">\n            wifi_off\n          </i>\n          <p>\n            It looks like you&apos;re offline. Image preview will be available\n            when connectivity is restored.\n          </p>\n        </>\n      ) : (\n        <>\n          <i className=\"material-icons has-text-grey icon-large has-margin-bottom-6\">\n            attach_file\n          </i>\n          <p>\n            You do not have access to preview this image, however, it will be\n            included with your submission.\n          </p>\n        </>\n      )}\n    </>\n  )\n}\n\nexport default React.memo(ImagePreviewUnavailable)\n"]}

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

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

package/dist/components/attachments/UploadingAttachment.js

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { Tooltip } from '@mui/material';
-import useIsOffline from '../../hooks/useIsOffline';
-import OnLoading from '../OnLoading';
-function UploadingAttachment() {
-    const isOffline = useIsOffline();
-    return (React.createElement(Tooltip, { title: isOffline
-            ? 'Upload will start when you connect to the internet'
-            : 'Uploading' },
-        React.createElement("div", { className: "cypress-attachment-uploading" }, isOffline ? (React.createElement("i", { className: "material-icons has-text-warning" }, "wifi_off")) : (React.createElement(OnLoading, { tiny: true })))));
-}
-export default React.memo(UploadingAttachment);
-//# sourceMappingURL=UploadingAttachment.js.map

package/dist/components/attachments/UploadingAttachment.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"UploadingAttachment.js","sourceRoot":"","sources":["../../../src/components/attachments/UploadingAttachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,YAAY,MAAM,0BAA0B,CAAA;AACnD,OAAO,SAAS,MAAM,cAAc,CAAA;AAEpC,SAAS,mBAAmB;IAC1B,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAEhC,OAAO,CACL,oBAAC,OAAO,IACN,KAAK,EACH,SAAS;YACP,CAAC,CAAC,oDAAoD;YACtD,CAAC,CAAC,WAAW;QAGjB,6BAAK,SAAS,EAAC,8BAA8B,IAC1C,SAAS,CAAC,CAAC,CAAC,CACX,2BAAG,SAAS,EAAC,iCAAiC,eAAa,CAC5D,CAAC,CAAC,CAAC,CACF,oBAAC,SAAS,IAAC,IAAI,SAAG,CACnB,CACG,CACE,CACX,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Tooltip } from '@mui/material'\nimport useIsOffline from '../../hooks/useIsOffline'\nimport OnLoading from '../OnLoading'\n\nfunction UploadingAttachment() {\n  const isOffline = useIsOffline()\n\n  return (\n    <Tooltip\n      title={\n        isOffline\n          ? 'Upload will start when you connect to the internet'\n          : 'Uploading'\n      }\n    >\n      <div className=\"cypress-attachment-uploading\">\n        {isOffline ? (\n          <i className=\"material-icons has-text-warning\">wifi_off</i>\n        ) : (\n          <OnLoading tiny />\n        )}\n      </div>\n    </Tooltip>\n  )\n}\n\nexport default React.memo(UploadingAttachment)\n"]}

package/dist/components/formStore/ColumnsConfigurationButton.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { ColumnInstance } from 'react-table';
-import { Checkbox } from '@mui/material';
-import { SubmissionTypes } from '@oneblink/types';
-declare function ColumnsConfigurationButton({ allColumns, getToggleHideAllColumnsProps, }: {
-    allColumns: ColumnInstance<SubmissionTypes.FormStoreRecord>[];
-    getToggleHideAllColumnsProps: () => React.ComponentProps<typeof Checkbox>;
-}): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof ColumnsConfigurationButton>;
-export default _default;

package/dist/components/formStore/ColumnsConfigurationButton.js

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { Button, Checkbox, Dialog, DialogActions, DialogContent, DialogTitle, FormControlLabel, FormGroup, Typography, } from '@mui/material';
-import { Settings as SettingsIcon } from '@mui/icons-material';
-import useBooleanState from '../../hooks/useBooleanState';
-function ColumnsConfigurationButton({ allColumns, getToggleHideAllColumnsProps, }) {
-    const [isConfiguringColumns, showColumnConfiguration, hideColumnConfiguration,] = useBooleanState(false);
-    const toggleHideAllColumnsProps = getToggleHideAllColumnsProps();
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { startIcon: React.createElement(SettingsIcon, null), onClick: showColumnConfiguration, variant: "outlined" }, "Columns"),
-        React.createElement(Dialog, { open: isConfiguringColumns, maxWidth: "sm", fullWidth: true, onClose: hideColumnConfiguration },
-            React.createElement(DialogTitle, null, "Column Configuration"),
-            React.createElement(DialogContent, { dividers: true },
-                React.createElement(FormGroup, null,
-                    React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { ...toggleHideAllColumnsProps, indeterminate: !!toggleHideAllColumnsProps.indeterminate }), label: React.createElement("b", null, "Toggle All") }),
-                    allColumns.map((column) => {
-                        return (React.createElement(React.Fragment, { key: column.id },
-                            React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { ...column.getToggleHiddenProps() }), label: React.createElement(React.Fragment, null,
-                                    column.headerText,
-                                    column.tooltip && (React.createElement(Typography, { component: "span", color: "textSecondary" },
-                                        ' ',
-                                        "(",
-                                        column.tooltip,
-                                        ")"))) })));
-                    }))),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { onClick: hideColumnConfiguration, color: "primary", variant: "contained" }, "Done")))));
-}
-export default React.memo(ColumnsConfigurationButton);
-//# sourceMappingURL=ColumnsConfigurationButton.js.map

package/dist/components/formStore/ColumnsConfigurationButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColumnsConfigurationButton.js","sourceRoot":"","sources":["../../../src/components/formStore/ColumnsConfigurationButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,MAAM,EACN,QAAQ,EACR,MAAM,EACN,aAAa,EACb,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,UAAU,GACX,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,eAAe,MAAM,6BAA6B,CAAA;AAGzD,SAAS,0BAA0B,CAAC,EAClC,UAAU,EACV,4BAA4B,GAI7B;IACC,MAAM,CACJ,oBAAoB,EACpB,uBAAuB,EACvB,uBAAuB,EACxB,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAE1B,MAAM,yBAAyB,GAAG,4BAA4B,EAAE,CAAA;IAEhE,OAAO,CACL;QACE,oBAAC,MAAM,IACL,SAAS,EAAE,oBAAC,YAAY,OAAG,EAC3B,OAAO,EAAE,uBAAuB,EAChC,OAAO,EAAC,UAAU,cAGX;QACT,oBAAC,MAAM,IACL,IAAI,EAAE,oBAAoB,EAC1B,QAAQ,EAAC,IAAI,EACb,SAAS,QACT,OAAO,EAAE,uBAAuB;YAEhC,oBAAC,WAAW,+BAAmC;YAC/C,oBAAC,aAAa,IAAC,QAAQ;gBACrB,oBAAC,SAAS;oBACR,oBAAC,gBAAgB,IACf,OAAO,EACL,oBAAC,QAAQ,OACH,yBAAyB,EAC7B,aAAa,EAAE,CAAC,CAAC,yBAAyB,CAAC,aAAa,GACxD,EAEJ,KAAK,EAAE,4CAAiB,GACxB;oBACD,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;wBACzB,OAAO,CACL,oBAAC,KAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,MAAM,CAAC,EAAE;4BAC5B,oBAAC,gBAAgB,IACf,OAAO,EAAE,oBAAC,QAAQ,OAAK,MAAM,CAAC,oBAAoB,EAAE,GAAI,EACxD,KAAK,EACH;oCACG,MAAM,CAAC,UAAU;oCACjB,MAAM,CAAC,OAAO,IAAI,CACjB,oBAAC,UAAU,IAAC,SAAS,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe;wCAC/C,GAAG;;wCACF,MAAM,CAAC,OAAO;4CACL,CACd,CACA,GAEL,CACa,CAClB,CAAA;oBACH,CAAC,CAAC,CACQ,CACE;YAChB,oBAAC,aAAa;gBACZ,oBAAC,MAAM,IACL,OAAO,EAAE,uBAAuB,EAChC,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,WAAW,WAGZ,CACK,CACT,CACR,CACJ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { ColumnInstance } from 'react-table'\nimport {\n  Button,\n  Checkbox,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  FormControlLabel,\n  FormGroup,\n  Typography,\n} from '@mui/material'\nimport { Settings as SettingsIcon } from '@mui/icons-material'\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { SubmissionTypes } from '@oneblink/types'\n\nfunction ColumnsConfigurationButton({\n  allColumns,\n  getToggleHideAllColumnsProps,\n}: {\n  allColumns: ColumnInstance<SubmissionTypes.FormStoreRecord>[]\n  getToggleHideAllColumnsProps: () => React.ComponentProps<typeof Checkbox>\n}) {\n  const [\n    isConfiguringColumns,\n    showColumnConfiguration,\n    hideColumnConfiguration,\n  ] = useBooleanState(false)\n\n  const toggleHideAllColumnsProps = getToggleHideAllColumnsProps()\n\n  return (\n    <>\n      <Button\n        startIcon={<SettingsIcon />}\n        onClick={showColumnConfiguration}\n        variant=\"outlined\"\n      >\n        Columns\n      </Button>\n      <Dialog\n        open={isConfiguringColumns}\n        maxWidth=\"sm\"\n        fullWidth\n        onClose={hideColumnConfiguration}\n      >\n        <DialogTitle>Column Configuration</DialogTitle>\n        <DialogContent dividers>\n          <FormGroup>\n            <FormControlLabel\n              control={\n                <Checkbox\n                  {...toggleHideAllColumnsProps}\n                  indeterminate={!!toggleHideAllColumnsProps.indeterminate}\n                />\n              }\n              label={<b>Toggle All</b>}\n            />\n            {allColumns.map((column) => {\n              return (\n                <React.Fragment key={column.id}>\n                  <FormControlLabel\n                    control={<Checkbox {...column.getToggleHiddenProps()} />}\n                    label={\n                      <>\n                        {column.headerText}\n                        {column.tooltip && (\n                          <Typography component=\"span\" color=\"textSecondary\">\n                            {' '}\n                            ({column.tooltip})\n                          </Typography>\n                        )}\n                      </>\n                    }\n                  />\n                </React.Fragment>\n              )\n            })}\n          </FormGroup>\n        </DialogContent>\n        <DialogActions>\n          <Button\n            onClick={hideColumnConfiguration}\n            color=\"primary\"\n            variant=\"contained\"\n          >\n            Done\n          </Button>\n        </DialogActions>\n      </Dialog>\n    </>\n  )\n}\n\nexport default React.memo(ColumnsConfigurationButton)\n"]}

package/dist/components/formStore/DownloadSubmissionDataButton.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { Form } from '@oneblink/types/typescript/forms';
-import { ColumnInstance } from 'react-table';
-import { FormStoreRecord } from '@oneblink/types/typescript/submissions';
-import { formStoreService } from '@oneblink/apps';
-declare function DownloadSubmissionDataButton({ disabled, form, filters, visibleColumns, }: {
-    disabled: boolean;
-    form: Form;
-    filters?: formStoreService.FormStoreFilters;
-    visibleColumns: ColumnInstance<FormStoreRecord>[];
-}): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof DownloadSubmissionDataButton>;
-export default _default;

package/dist/components/formStore/DownloadSubmissionDataButton.js

@@ -1,45 +0,0 @@
-import * as React from 'react';
-import { Tooltip } from '@mui/material';
-import { LoadingButton } from '@mui/lab';
-import CsvIcon from '@mui/icons-material/Download';
-import ErrorSnackbar from '../ErrorSnackbar';
-import { formStoreService } from '@oneblink/apps';
-function DownloadSubmissionDataButton({ disabled, form, filters, visibleColumns, }) {
-    const [{ isDownloadingCsv, downloadingCsvError }, setState] = React.useState({
-        isDownloadingCsv: false,
-        downloadingCsvError: null,
-    });
-    const clearError = React.useCallback(() => {
-        setState({
-            isDownloadingCsv: false,
-            downloadingCsvError: null,
-        });
-    }, []);
-    const downloadCsv = React.useCallback(async () => {
-        setState({ isDownloadingCsv: true, downloadingCsvError: null });
-        try {
-            await formStoreService.exportFormStoreRecords(form.name, {
-                formId: form.id,
-                filters,
-                includeColumns: visibleColumns.map((visibleColumn) => visibleColumn.id),
-            });
-            setState({
-                isDownloadingCsv: false,
-                downloadingCsvError: null,
-            });
-        }
-        catch (error) {
-            setState({
-                isDownloadingCsv: false,
-                downloadingCsvError: error,
-            });
-        }
-    }, [form, filters, visibleColumns]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Tooltip, { title: "Download submission data as a CSV file" },
-            React.createElement(LoadingButton, { type: "button", loading: isDownloadingCsv, loadingPosition: "start", startIcon: React.createElement(CsvIcon, null), onClick: downloadCsv, color: "primary", variant: "outlined", disabled: disabled }, "Download")),
-        React.createElement(ErrorSnackbar, { open: !!downloadingCsvError, onClose: clearError },
-            React.createElement("span", { "data-cypress": "edit-dialog-error-message" }, downloadingCsvError && downloadingCsvError.message))));
-}
-export default React.memo(DownloadSubmissionDataButton);
-//# sourceMappingURL=DownloadSubmissionDataButton.js.map

package/dist/components/formStore/DownloadSubmissionDataButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DownloadSubmissionDataButton.js","sourceRoot":"","sources":["../../../src/components/formStore/DownloadSubmissionDataButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AACxC,OAAO,OAAO,MAAM,8BAA8B,CAAA;AAElD,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAG5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEjD,SAAS,4BAA4B,CAAC,EACpC,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,cAAc,GAMf;IACC,MAAM,CAAC,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAGzE;QACD,gBAAgB,EAAE,KAAK;QACvB,mBAAmB,EAAE,IAAI;KAC1B,CAAC,CAAA;IACF,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,QAAQ,CAAC;YACP,gBAAgB,EAAE,KAAK;YACvB,mBAAmB,EAAE,IAAI;SAC1B,CAAC,CAAA;IACJ,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAC/C,QAAQ,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC,CAAA;QAC/D,IAAI;YACF,MAAM,gBAAgB,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE;gBACvD,MAAM,EAAE,IAAI,CAAC,EAAE;gBACf,OAAO;gBACP,cAAc,EAAE,cAAc,CAAC,GAAG,CAChC,CAAC,aAA8C,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,CACrE;aACF,CAAC,CAAA;YACF,QAAQ,CAAC;gBACP,gBAAgB,EAAE,KAAK;gBACvB,mBAAmB,EAAE,IAAI;aAC1B,CAAC,CAAA;SACH;QAAC,OAAO,KAAK,EAAE;YACd,QAAQ,CAAC;gBACP,gBAAgB,EAAE,KAAK;gBACvB,mBAAmB,EAAE,KAAc;aACpC,CAAC,CAAA;SACH;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,CAAA;IAEnC,OAAO,CACL;QACE,oBAAC,OAAO,IAAC,KAAK,EAAC,wCAAwC;YACrD,oBAAC,aAAa,IACZ,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,gBAAgB,EACzB,eAAe,EAAC,OAAO,EACvB,SAAS,EAAE,oBAAC,OAAO,OAAG,EACtB,OAAO,EAAE,WAAW,EACpB,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,UAAU,EAClB,QAAQ,EAAE,QAAQ,eAGJ,CACR;QAEV,oBAAC,aAAa,IAAC,IAAI,EAAE,CAAC,CAAC,mBAAmB,EAAE,OAAO,EAAE,UAAU;YAC7D,8CAAmB,2BAA2B,IAC3C,mBAAmB,IAAI,mBAAmB,CAAC,OAAO,CAC9C,CACO,CACf,CACJ,CAAA;AACH,CAAC;AACD,eAAe,KAAK,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Tooltip } from '@mui/material'\nimport { LoadingButton } from '@mui/lab'\nimport CsvIcon from '@mui/icons-material/Download'\nimport { Form } from '@oneblink/types/typescript/forms'\nimport ErrorSnackbar from '../ErrorSnackbar'\nimport { ColumnInstance } from 'react-table'\nimport { FormStoreRecord } from '@oneblink/types/typescript/submissions'\nimport { formStoreService } from '@oneblink/apps'\n\nfunction DownloadSubmissionDataButton({\n  disabled,\n  form,\n  filters,\n  visibleColumns,\n}: {\n  disabled: boolean\n  form: Form\n  filters?: formStoreService.FormStoreFilters\n  visibleColumns: ColumnInstance<FormStoreRecord>[]\n}) {\n  const [{ isDownloadingCsv, downloadingCsvError }, setState] = React.useState<{\n    isDownloadingCsv: boolean\n    downloadingCsvError: Error | null\n  }>({\n    isDownloadingCsv: false,\n    downloadingCsvError: null,\n  })\n  const clearError = React.useCallback(() => {\n    setState({\n      isDownloadingCsv: false,\n      downloadingCsvError: null,\n    })\n  }, [])\n\n  const downloadCsv = React.useCallback(async () => {\n    setState({ isDownloadingCsv: true, downloadingCsvError: null })\n    try {\n      await formStoreService.exportFormStoreRecords(form.name, {\n        formId: form.id,\n        filters,\n        includeColumns: visibleColumns.map(\n          (visibleColumn: ColumnInstance<FormStoreRecord>) => visibleColumn.id,\n        ),\n      })\n      setState({\n        isDownloadingCsv: false,\n        downloadingCsvError: null,\n      })\n    } catch (error) {\n      setState({\n        isDownloadingCsv: false,\n        downloadingCsvError: error as Error,\n      })\n    }\n  }, [form, filters, visibleColumns])\n\n  return (\n    <>\n      <Tooltip title=\"Download submission data as a CSV file\">\n        <LoadingButton\n          type=\"button\"\n          loading={isDownloadingCsv}\n          loadingPosition=\"start\"\n          startIcon={<CsvIcon />}\n          onClick={downloadCsv}\n          color=\"primary\"\n          variant=\"outlined\"\n          disabled={disabled}\n        >\n          Download\n        </LoadingButton>\n      </Tooltip>\n\n      <ErrorSnackbar open={!!downloadingCsvError} onClose={clearError}>\n        <span data-cypress=\"edit-dialog-error-message\">\n          {downloadingCsvError && downloadingCsvError.message}\n        </span>\n      </ErrorSnackbar>\n    </>\n  )\n}\nexport default React.memo(DownloadSubmissionDataButton)\n"]}

package/dist/components/formStore/FormStore.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import { Form } from '@oneblink/types/typescript/forms';
-import { FormTypes } from '@oneblink/types';
-declare function FormStoreContainer({ form, formElements, }: {
-    form: Form;
-    formElements: FormTypes.FormElementWithName[];
-}): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormStoreContainer>;
-export default _default;

package/dist/components/formStore/FormStore.js

@@ -1,103 +0,0 @@
-import * as React from 'react';
-import { useHistory } from 'react-router-dom';
-import querystring from 'query-string';
-import { formStoreService } from '@oneblink/apps';
-import useInfiniteScrollDataLoad from '../../hooks/useInfiniteScrollDataLoad';
-import FormStoreTable from './table';
-import useFormStoreTable from './table/useFormStoreTable';
-import { Box, Button, Grid, Typography } from '@mui/material';
-import { FilterList as FilterIcon, Settings as SettingsIcon, Sync as SyncIcon, } from '@mui/icons-material';
-import useSubmissionIdValidationMessage, { validateIsUUID, } from '../../hooks/useSubmissionIdIsValid';
-import DownloadSubmissionDataButton from './DownloadSubmissionDataButton';
-import ColumnsConfigurationButton from './ColumnsConfigurationButton';
-import ErrorMessage from '../ErrorMessage';
-import LoadingWithMessage from '../LoadingWithMessage';
-import NoResourcesYet from '../NoResourcesYet';
-function FormStoreContainer({ form, formElements, }) {
-    var _a;
-    const history = useHistory();
-    const { isLoading, loadError, records: formStoreRecords, onTryAgain, onRefresh, filters, onChangeFilters, } = useInfiniteScrollDataLoad({
-        limit: 50,
-        debounceSearchMs: 1000,
-        onDefaultFilters: React.useCallback((query) => {
-            let filters = {};
-            try {
-                if (typeof query.filters === 'string') {
-                    filters = JSON.parse(query.filters);
-                }
-            }
-            catch (error) {
-                console.warn('Could not parse filter as JSON', error);
-            }
-            if (!filters.sorting) {
-                filters.sorting = [
-                    { property: 'dateTimeSubmitted', direction: 'descending' },
-                ];
-            }
-            return filters;
-        }, []),
-        onSearch: React.useCallback(async (filters, paging, abortSignal) => {
-            // Exclude all search parameters if searching
-            // for a specific submission using an identifier
-            const searchFilters = filters.submissionId
-                ? {
-                    submissionId: filters.submissionId,
-                }
-                : filters;
-            const result = await formStoreService.searchFormStoreRecords({
-                paging,
-                formId: form.id,
-                filters: searchFilters,
-            }, abortSignal);
-            return {
-                records: result.formStoreRecords,
-                meta: result.meta,
-            };
-        }, [form.id]),
-        onValidateFilters: React.useCallback((currentFilters) => {
-            var _a;
-            return validateIsUUID((_a = currentFilters.submissionId) === null || _a === void 0 ? void 0 : _a.$eq);
-        }, []),
-    });
-    React.useEffect(() => {
-        history.replace({
-            search: querystring.stringify({
-                filters: JSON.stringify(filters),
-            }),
-        });
-    }, [filters, history]);
-    const submissionIdValidationMessage = useSubmissionIdValidationMessage((_a = filters.submissionId) === null || _a === void 0 ? void 0 : _a.$eq);
-    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, allColumns, visibleColumns, getToggleHideAllColumnsProps, } = useFormStoreTable({
-        formStoreRecords,
-        filters,
-        onChangeFilters,
-        submissionIdValidationMessage,
-        form,
-        formElements,
-    });
-    return (React.createElement(Box, { padding: 2, paddingBottom: 16 },
-        React.createElement(Grid, { container: true, spacing: 2, alignItems: "center" },
-            React.createElement(Grid, { item: true, xs: true },
-                React.createElement(Typography, { variant: "h6" }, form === null || form === void 0 ? void 0 : form.name)),
-            React.createElement(Grid, { item: true, xs: false },
-                React.createElement(Button, { startIcon: React.createElement(FilterIcon, null), disabled: !Object.keys(filters).length, onClick: () => {
-                        onChangeFilters((currentFilters) => ({
-                            sorting: currentFilters.sorting,
-                        }), false);
-                    }, variant: "text" }, "Clear Filters")),
-            React.createElement(Grid, { item: true, xs: false },
-                React.createElement(ColumnsConfigurationButton, { allColumns: allColumns, getToggleHideAllColumnsProps: getToggleHideAllColumnsProps })),
-            React.createElement(Grid, { item: true, xs: false },
-                React.createElement(DownloadSubmissionDataButton, { disabled: false, form: form, filters: filters, visibleColumns: visibleColumns })),
-            React.createElement(Grid, { item: true, xs: false },
-                React.createElement(Button, { startIcon: React.createElement(SyncIcon, null), onClick: onRefresh, color: "primary", variant: "contained", disabled: !!submissionIdValidationMessage }, "Refresh")),
-            React.createElement(Grid, { item: true, xs: 12 },
-                visibleColumns.length ? (React.createElement(FormStoreTable, { isEmptyResults: !formStoreRecords.length && !isLoading && !loadError, getTableProps: getTableProps, getTableBodyProps: getTableBodyProps, headerGroups: headerGroups, rows: rows, prepareRow: prepareRow, onChangeFilters: onChangeFilters })) : (React.createElement(NoResourcesYet, { IconComponent: SettingsIcon, title: "No Columns Visible", gutterBottom: true }, "It looks like you have hidden all of the available columns. Please enable at least one column to view submissions.")),
-                isLoading && (React.createElement(LoadingWithMessage, { message: "Loading more records..." })),
-                loadError && (React.createElement(React.Fragment, null,
-                    React.createElement(ErrorMessage, { title: "Error Retrieving Submissions", gutterBottom: true, gutterTop: true }, loadError.message),
-                    React.createElement(Grid, { container: true, justifyContent: "center" },
-                        React.createElement(Button, { variant: "outlined", color: "primary", onClick: () => onTryAgain() }, "Try Again"))))))));
-}
-export default React.memo(FormStoreContainer);
-//# sourceMappingURL=FormStore.js.map

package/dist/components/formStore/FormStore.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormStore.js","sourceRoot":"","sources":["../../../src/components/formStore/FormStore.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { useHistory } from 'react-router-dom'\nimport querystring from 'query-string'\nimport { FormStoreRecord } from '@oneblink/types/typescript/submissions'\nimport { formStoreService } from '@oneblink/apps'\nimport useInfiniteScrollDataLoad from '../../hooks/useInfiniteScrollDataLoad'\nimport FormStoreTable from './table'\nimport useFormStoreTable from './table/useFormStoreTable'\nimport { Box, Button, Grid, Typography } from '@mui/material'\nimport {\n  FilterList as FilterIcon,\n  Settings as SettingsIcon,\n  Sync as SyncIcon,\n} from '@mui/icons-material'\nimport { Form } from '@oneblink/types/typescript/forms'\nimport useSubmissionIdValidationMessage, {\n  validateIsUUID,\n} from '../../hooks/useSubmissionIdIsValid'\nimport { FormTypes } from '@oneblink/types'\nimport DownloadSubmissionDataButton from './DownloadSubmissionDataButton'\nimport ColumnsConfigurationButton from './ColumnsConfigurationButton'\nimport ErrorMessage from '../ErrorMessage'\nimport LoadingWithMessage from '../LoadingWithMessage'\nimport NoResourcesYet from '../NoResourcesYet'\n\nfunction FormStoreContainer({\n  form,\n  formElements,\n}: {\n  form: Form\n  formElements: FormTypes.FormElementWithName[]\n}) {\n  const history = useHistory()\n  const {\n    isLoading,\n    loadError,\n    records: formStoreRecords,\n    onTryAgain,\n    onRefresh,\n    filters,\n    onChangeFilters,\n  } = useInfiniteScrollDataLoad<\n    formStoreService.FormStoreFilters,\n    FormStoreRecord\n  >({\n    limit: 50,\n    debounceSearchMs: 1000,\n    onDefaultFilters: React.useCallback((query) => {\n      let filters: formStoreService.FormStoreFilters = {}\n      try {\n        if (typeof query.filters === 'string') {\n          filters = JSON.parse(query.filters)\n        }\n      } catch (error) {\n        console.warn('Could not parse filter as JSON', error)\n      }\n      if (!filters.sorting) {\n        filters.sorting = [\n          { property: 'dateTimeSubmitted', direction: 'descending' },\n        ]\n      }\n      return filters\n    }, []),\n    onSearch: React.useCallback(\n      async (filters, paging, abortSignal) => {\n        // Exclude all search parameters if searching\n        // for a specific submission using an identifier\n        const searchFilters = filters.submissionId\n          ? {\n              submissionId: filters.submissionId,\n            }\n          : filters\n        const result = await formStoreService.searchFormStoreRecords(\n          {\n            paging,\n            formId: form.id,\n            filters: searchFilters,\n          },\n          abortSignal,\n        )\n        return {\n          records: result.formStoreRecords,\n          meta: result.meta,\n        }\n      },\n      [form.id],\n    ),\n    onValidateFilters: React.useCallback(\n      (currentFilters: formStoreService.FormStoreFilters) => {\n        return validateIsUUID(currentFilters.submissionId?.$eq)\n      },\n      [],\n    ),\n  })\n\n  React.useEffect(() => {\n    history.replace({\n      search: querystring.stringify({\n        filters: JSON.stringify(filters),\n      }),\n    })\n  }, [filters, history])\n\n  const submissionIdValidationMessage = useSubmissionIdValidationMessage(\n    filters.submissionId?.$eq,\n  )\n\n  const {\n    getTableProps,\n    getTableBodyProps,\n    headerGroups,\n    rows,\n    prepareRow,\n    allColumns,\n    visibleColumns,\n    getToggleHideAllColumnsProps,\n  } = useFormStoreTable({\n    formStoreRecords,\n    filters,\n    onChangeFilters,\n    submissionIdValidationMessage,\n    form,\n    formElements,\n  })\n\n  return (\n    <Box padding={2} paddingBottom={16}>\n      <Grid container spacing={2} alignItems=\"center\">\n        <Grid item xs={true}>\n          <Typography variant=\"h6\">{form?.name}</Typography>\n        </Grid>\n        <Grid item xs={false}>\n          <Button\n            startIcon={<FilterIcon />}\n            disabled={!Object.keys(filters).length}\n            onClick={() => {\n              onChangeFilters(\n                (currentFilters) => ({\n                  sorting: currentFilters.sorting,\n                }),\n                false,\n              )\n            }}\n            variant=\"text\"\n          >\n            Clear Filters\n          </Button>\n        </Grid>\n        <Grid item xs={false}>\n          <ColumnsConfigurationButton\n            allColumns={allColumns}\n            getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}\n          />\n        </Grid>\n        <Grid item xs={false}>\n          <DownloadSubmissionDataButton\n            disabled={false}\n            form={form}\n            filters={filters}\n            visibleColumns={visibleColumns}\n          />\n        </Grid>\n        <Grid item xs={false}>\n          <Button\n            startIcon={<SyncIcon />}\n            onClick={onRefresh}\n            color=\"primary\"\n            variant=\"contained\"\n            disabled={!!submissionIdValidationMessage}\n          >\n            Refresh\n          </Button>\n        </Grid>\n        <Grid item xs={12}>\n          {visibleColumns.length ? (\n            <FormStoreTable\n              isEmptyResults={\n                !formStoreRecords.length && !isLoading && !loadError\n              }\n              getTableProps={getTableProps}\n              getTableBodyProps={getTableBodyProps}\n              headerGroups={headerGroups}\n              rows={rows}\n              prepareRow={prepareRow}\n              onChangeFilters={onChangeFilters}\n            />\n          ) : (\n            <NoResourcesYet\n              IconComponent={SettingsIcon}\n              title=\"No Columns Visible\"\n              gutterBottom\n            >\n              It looks like you have hidden all of the available columns. Please\n              enable at least one column to view submissions.\n            </NoResourcesYet>\n          )}\n\n          {isLoading && (\n            <LoadingWithMessage message=\"Loading more records...\" />\n          )}\n\n          {loadError && (\n            <>\n              <ErrorMessage\n                title=\"Error Retrieving Submissions\"\n                gutterBottom\n                gutterTop\n              >\n                {loadError.message}\n              </ErrorMessage>\n              <Grid container justifyContent=\"center\">\n                <Button\n                  variant=\"outlined\"\n                  color=\"primary\"\n                  onClick={() => onTryAgain()}\n                >\n                  Try Again\n                </Button>\n              </Grid>\n            </>\n          )}\n        </Grid>\n      </Grid>\n    </Box>\n  )\n}\n\nexport default React.memo(FormStoreContainer)\n"]}

package/dist/components/formStore/table/index.d.ts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { TableInstance } from 'react-table';
-import { SubmissionTypes } from '@oneblink/types';
-import { OnChangeFilters } from '../../../hooks/useInfiniteScrollDataLoad';
-import { formStoreService } from '@oneblink/apps';
-declare type FormStoreTableInstance = TableInstance<SubmissionTypes.FormStoreRecord>;
-declare function FormStoreTable({ getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, isEmptyResults, onChangeFilters, }: {
-    getTableProps: FormStoreTableInstance['getTableProps'];
-    getTableBodyProps: FormStoreTableInstance['getTableBodyProps'];
-    headerGroups: FormStoreTableInstance['headerGroups'];
-    rows: FormStoreTableInstance['rows'];
-    prepareRow: FormStoreTableInstance['prepareRow'];
-    isEmptyResults: boolean;
-    onChangeFilters: OnChangeFilters<formStoreService.FormStoreFilters>;
-}): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof FormStoreTable>;
-export default _default;

package/dist/components/formStore/table/index.js

@@ -1,194 +0,0 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import { Box, Paper, TableContainer, Tooltip } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
-import { FilterList as FilterListIcon, Warning as WarningIcon, ArrowDownward as SortingIcon, } from '@mui/icons-material';
-import { IsHoveringProvider } from '../../../hooks/useIsHovering';
-import { NoResourcesYet } from '../../NoResourcesYet';
-import FormStoreIcon from '../display/FormStoreIcon';
-import HeaderCellMoreButton from './HeaderCellMoreButton';
-const useStyles = makeStyles((theme) => ({
-    tooltip: {
-        zIndex: theme.zIndex.drawer,
-    },
-    sortingIcon: {
-        transition: theme.transitions.create('transform'),
-    },
-    sortingIconDescending: {
-        transform: 'rotate(180deg)',
-    },
-    table: {
-        display: 'inline-block',
-        '& .tbody .tr:last-child .tc': {
-            borderBottom: 0,
-        },
-        '& .tc': {
-            padding: theme.spacing(1),
-            borderBottomColor: theme.palette.divider,
-            borderBottom: '1px solid',
-            display: 'flex',
-            alignItems: 'center',
-            '&.is-clickable': {
-                cursor: 'pointer',
-                transition: theme.transitions.create('transform'),
-                '&:hover': {
-                    backgroundColor: theme.palette.action.hover,
-                },
-            },
-        },
-        '& .td': {
-            position: 'relative',
-            borderRight: '1px solid',
-            borderRightColor: theme.palette.divider,
-            overflowX: 'hidden',
-            // minus 1 to cater for the border
-            minHeight: `${parseInt(theme.spacing(5.5)) - 1}px`,
-            '&.is-resizing': {
-                borderRightStyle: 'dashed',
-            },
-        },
-        '& .th': {
-            position: 'relative',
-            fontWeight: theme.typography.fontWeightBold,
-            paddingRight: 0,
-            '& .th-content': {
-                flex: 1,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                borderRight: '1px solid',
-                borderRightColor: theme.palette.divider,
-                paddingRight: theme.spacing(),
-                '& .th-label': {
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    '& .th-icon': {
-                        marginLeft: theme.spacing(),
-                    },
-                },
-            },
-            '& .resizer': {
-                display: 'inline-flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                borderWidth: 0,
-                borderLeftStyle: 'solid',
-                borderRightStyle: 'solid',
-                borderColor: theme.palette.divider,
-                paddingTop: theme.spacing(),
-                paddingBottom: theme.spacing(),
-                paddingRight: `calc(${theme.spacing(1)} + 1px)`,
-                position: 'absolute',
-                right: 0,
-                top: theme.spacing(0.5),
-                bottom: theme.spacing(0.5),
-                transform: `translateX(calc(${theme.spacing(0.5)} + 1px))`,
-                zIndex: 1,
-                // prevents from scrolling while dragging on touch devices
-                touchAction: 'none',
-                '&:hover': {
-                    borderWidth: '1px',
-                },
-                '&.is-resizing': {
-                    borderWidth: '1px',
-                    borderColor: theme.palette.grey[700],
-                },
-            },
-        },
-    },
-}));
-function FormStoreTable({ getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, isEmptyResults, onChangeFilters, }) {
-    const classes = useStyles();
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Paper, null,
-            React.createElement(TableContainer, null,
-                React.createElement("div", { className: classes.table, ...getTableProps() },
-                    React.createElement("div", { className: "thead" }, 
-                    // Loop over the header rows
-                    headerGroups.map((headerGroup) => (
-                    // Apply the header row props
-                    React.createElement("div", { ...headerGroup.getHeaderGroupProps(), className: "tr" }, 
-                    // Loop over the headers in each row
-                    headerGroup.headers.map((headerGroup) => {
-                        var _a, _b, _c, _d, _e;
-                        const sortingProperty = (_a = headerGroup.sorting) === null || _a === void 0 ? void 0 : _a.property;
-                        const sortingDirection = (_b = headerGroup.sorting) === null || _b === void 0 ? void 0 : _b.direction;
-                        return (React.createElement(Tooltip, { title: headerGroup.tooltip || '', arrow: true, key: headerGroup.id, classes: {
-                                popper: classes.tooltip,
-                            } },
-                            React.createElement("div", { className: clsx('th tc', {
-                                    'is-clickable': !!sortingProperty,
-                                }), onClick: sortingProperty
-                                    ? () => {
-                                        onChangeFilters((currentFilters) => {
-                                            switch (sortingDirection) {
-                                                case 'ascending': {
-                                                    return {
-                                                        ...currentFilters,
-                                                        sorting: [
-                                                            {
-                                                                property: sortingProperty,
-                                                                direction: 'descending',
-                                                            },
-                                                        ],
-                                                    };
-                                                }
-                                                case 'descending': {
-                                                    return {
-                                                        ...currentFilters,
-                                                        sorting: undefined,
-                                                    };
-                                                }
-                                                default: {
-                                                    return {
-                                                        ...currentFilters,
-                                                        sorting: [
-                                                            {
-                                                                property: sortingProperty,
-                                                                direction: 'ascending',
-                                                            },
-                                                        ],
-                                                    };
-                                                }
-                                            }
-                                        }, false);
-                                    }
-                                    : undefined, ...headerGroup.getHeaderProps() },
-                                React.createElement(IsHoveringProvider, { className: "th-content" },
-                                    React.createElement("div", { className: "th-label" },
-                                        React.createElement("span", null, headerGroup.headerText),
-                                        sortingDirection && (React.createElement(SortingIcon, { fontSize: "small", color: "primary", className: clsx('th-icon', classes.sortingIcon, {
-                                                [classes.sortingIconDescending]: sortingDirection === 'descending',
-                                            }) })),
-                                        ((_c = headerGroup.filter) === null || _c === void 0 ? void 0 : _c.isInvalid) ? (React.createElement(Tooltip, { title: ((_d = headerGroup.filter) === null || _d === void 0 ? void 0 : _d.validationMessage) ||
-                                                '' },
-                                            React.createElement(WarningIcon, { fontSize: "small", color: "error", className: "th-icon" }))) : ((_e = headerGroup.filter) === null || _e === void 0 ? void 0 : _e.value) ? (React.createElement(FilterListIcon, { fontSize: "small", color: "primary", className: "th-icon" })) : null),
-                                    React.createElement(HeaderCellMoreButton, { headerGroup: headerGroup, onHide: headerGroup.toggleHidden }),
-                                    React.createElement("div", { ...headerGroup.getResizerProps(), className: clsx('resizer', {
-                                            'is-resizing': headerGroup.isResizing,
-                                        }), onClick: (event) => {
-                                            event.stopPropagation();
-                                        } })))));
-                    }))))),
-                    !isEmptyResults ? (React.createElement("div", { ...getTableBodyProps(), className: "tbody" }, 
-                    // Loop over the table rows
-                    rows.map((row) => {
-                        // Prepare the row for display
-                        prepareRow(row);
-                        return (
-                        // Apply the row props
-                        React.createElement("div", { ...row.getRowProps(), className: "tr" }, 
-                        // Loop over the rows cells
-                        row.cells.map((cell) => {
-                            // Apply the cell props
-                            return (React.createElement(IsHoveringProvider, { ...cell.getCellProps(), className: clsx('td tc', {
-                                    'is-resizing': cell.column.isResizing,
-                                }) }, 
-                            // Render the cell contents
-                            cell.render('Cell')));
-                        })));
-                    }))) : (React.createElement(Box, { padding: 2 }))))),
-        isEmptyResults && (React.createElement(NoResourcesYet, { IconComponent: FormStoreIcon, title: "No Records Found..." }, "There are no Submissions matching your filters."))));
-}
-export default React.memo(FormStoreTable);
-//# sourceMappingURL=index.js.map