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

package/dist/components/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/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/attachments/Files.js.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +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);
+//# sourceMappingURL=ImagePreviewUnavailable.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,103 @@
+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

@@ -0,0 +1 @@
+{"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/FormStoreTableProvider.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-export declare function FormStoreTableProvider({ form, children, }: {
-    form: FormTypes.Form;
-    children: React.ReactNode;
-}): JSX.Element;
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+export declare function FormStoreTableProvider({ form, children, }: {
+    form: FormTypes.Form;
+    children: React.ReactNode;
+}): JSX.Element;

package/dist/components/formStore/FormStoreTableProvider.js

@@ -1,91 +1,91 @@
-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 useFormStoreTable from './table/useFormStoreTable';
-import { Button, Grid } from '@mui/material';
-import { Settings as SettingsIcon } from '@mui/icons-material';
-import useSubmissionIdValidationMessage, { validateIsUUID, } from '../../hooks/useSubmissionIdIsValid';
-import ErrorMessage from '../messages/ErrorMessage';
-import LoadingWithMessage from '../LoadingWithMessage';
-import NoResourcesYet from '../messages/NoResourcesYet';
-import FormStoreIcon from './display/FormStoreIcon';
-import { FormStoreTableContext } from './useFormStoreTableContext';
-export function FormStoreTableProvider({ form, children, }) {
-    var _a, _b;
-    const history = useHistory();
-    const { isLoading, loadError, records: formStoreRecords, onTryAgain, onRefresh, filters: parameters, onChangeFilters: onChangeParameters, } = useInfiniteScrollDataLoad({
-        limit: 50,
-        debounceSearchMs: 1000,
-        onDefaultFilters: React.useCallback((query) => {
-            let defaultParameters = {};
-            try {
-                if (typeof query.parameters === 'string') {
-                    defaultParameters = JSON.parse(query.parameters);
-                }
-            }
-            catch (error) {
-                console.warn('Could not parse filter as JSON', error);
-            }
-            if (!defaultParameters.sorting) {
-                defaultParameters.sorting = [
-                    { property: 'dateTimeSubmitted', direction: 'descending' },
-                ];
-            }
-            return defaultParameters;
-        }, []),
-        onSearch: React.useCallback(async (currentParameters, paging, abortSignal) => {
-            var _a;
-            // Exclude all search parameters if searching
-            // for a specific submission using an identifier
-            const filters = ((_a = currentParameters.filters) === null || _a === void 0 ? void 0 : _a.submissionId)
-                ? {
-                    submissionId: currentParameters.filters.submissionId,
-                }
-                : currentParameters.filters;
-            const result = await formStoreService.searchFormStoreRecords({
-                ...currentParameters,
-                paging,
-                formId: form.id,
-                filters,
-            }, abortSignal);
-            return {
-                records: result.formStoreRecords,
-                meta: result.meta,
-            };
-        }, [form.id]),
-        onValidateFilters: React.useCallback((currentParameters) => {
-            var _a, _b;
-            return validateIsUUID((_b = (_a = currentParameters.filters) === null || _a === void 0 ? void 0 : _a.submissionId) === null || _b === void 0 ? void 0 : _b.$eq);
-        }, []),
-    });
-    React.useEffect(() => {
-        history.replace({
-            search: querystring.stringify({
-                parameters: JSON.stringify(parameters),
-            }),
-        });
-    }, [history, parameters]);
-    const submissionIdValidationMessage = useSubmissionIdValidationMessage((_b = (_a = parameters.filters) === null || _a === void 0 ? void 0 : _a.submissionId) === null || _b === void 0 ? void 0 : _b.$eq);
-    const formStoreTable = useFormStoreTable({
-        formStoreRecords,
-        parameters,
-        onChangeParameters,
-        submissionIdValidationMessage,
-        form,
-        onRefresh,
-    });
-    return (React.createElement(FormStoreTableContext.Provider, { value: formStoreTable },
-        children,
-        formStoreTable.visibleColumns.length ? (React.createElement(React.Fragment, null, !formStoreRecords.length && !isLoading && !loadError && (React.createElement(NoResourcesYet, { IconComponent: FormStoreIcon, title: "No Records Found..." }, "There are no Submissions matching your filters.")))) : (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("div", { className: isLoading === 'INITIAL'
-                ? 'ob-form-store-loading-initial'
-                : 'ob-form-store-loading-more' },
-            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, { className: "ob-form-store-try-again-button", variant: "outlined", color: "primary", onClick: () => onTryAgain() }, "Try Again"))))));
-}
+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 useFormStoreTable from './table/useFormStoreTable';
+import { Button, Grid } from '@mui/material';
+import { Settings as SettingsIcon } from '@mui/icons-material';
+import useSubmissionIdValidationMessage, { validateIsUUID, } from '../../hooks/useSubmissionIdIsValid';
+import ErrorMessage from '../messages/ErrorMessage';
+import LoadingWithMessage from '../LoadingWithMessage';
+import NoResourcesYet from '../messages/NoResourcesYet';
+import FormStoreIcon from './display/FormStoreIcon';
+import { FormStoreTableContext } from './useFormStoreTableContext';
+export function FormStoreTableProvider({ form, children, }) {
+    var _a, _b;
+    const history = useHistory();
+    const { isLoading, loadError, records: formStoreRecords, onTryAgain, onRefresh, filters: parameters, onChangeFilters: onChangeParameters, } = useInfiniteScrollDataLoad({
+        limit: 50,
+        debounceSearchMs: 1000,
+        onDefaultFilters: React.useCallback((query) => {
+            let defaultParameters = {};
+            try {
+                if (typeof query.parameters === 'string') {
+                    defaultParameters = JSON.parse(query.parameters);
+                }
+            }
+            catch (error) {
+                console.warn('Could not parse filter as JSON', error);
+            }
+            if (!defaultParameters.sorting) {
+                defaultParameters.sorting = [
+                    { property: 'dateTimeSubmitted', direction: 'descending' },
+                ];
+            }
+            return defaultParameters;
+        }, []),
+        onSearch: React.useCallback(async (currentParameters, paging, abortSignal) => {
+            var _a;
+            // Exclude all search parameters if searching
+            // for a specific submission using an identifier
+            const filters = ((_a = currentParameters.filters) === null || _a === void 0 ? void 0 : _a.submissionId)
+                ? {
+                    submissionId: currentParameters.filters.submissionId,
+                }
+                : currentParameters.filters;
+            const result = await formStoreService.searchFormStoreRecords({
+                ...currentParameters,
+                paging,
+                formId: form.id,
+                filters,
+            }, abortSignal);
+            return {
+                records: result.formStoreRecords,
+                meta: result.meta,
+            };
+        }, [form.id]),
+        onValidateFilters: React.useCallback((currentParameters) => {
+            var _a, _b;
+            return validateIsUUID((_b = (_a = currentParameters.filters) === null || _a === void 0 ? void 0 : _a.submissionId) === null || _b === void 0 ? void 0 : _b.$eq);
+        }, []),
+    });
+    React.useEffect(() => {
+        history.replace({
+            search: querystring.stringify({
+                parameters: JSON.stringify(parameters),
+            }),
+        });
+    }, [history, parameters]);
+    const submissionIdValidationMessage = useSubmissionIdValidationMessage((_b = (_a = parameters.filters) === null || _a === void 0 ? void 0 : _a.submissionId) === null || _b === void 0 ? void 0 : _b.$eq);
+    const formStoreTable = useFormStoreTable({
+        formStoreRecords,
+        parameters,
+        onChangeParameters,
+        submissionIdValidationMessage,
+        form,
+        onRefresh,
+    });
+    return (React.createElement(FormStoreTableContext.Provider, { value: formStoreTable },
+        children,
+        formStoreTable.visibleColumns.length ? (React.createElement(React.Fragment, null, !formStoreRecords.length && !isLoading && !loadError && (React.createElement(NoResourcesYet, { IconComponent: FormStoreIcon, title: "No Records Found..." }, "There are no Submissions matching your filters.")))) : (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("div", { className: isLoading === 'INITIAL'
+                ? 'ob-form-store-loading-initial'
+                : 'ob-form-store-loading-more' },
+            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, { className: "ob-form-store-try-again-button", variant: "outlined", color: "primary", onClick: () => onTryAgain() }, "Try Again"))))));
+}
 //# sourceMappingURL=FormStoreTableProvider.js.map

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { Button } from '@mui/material';
-declare function OneBlinkFormStoreClearFiltersButton(props: React.ComponentProps<typeof Button>): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof OneBlinkFormStoreClearFiltersButton>;
-export default _default;
+import * as React from 'react';
+import { Button } from '@mui/material';
+declare function OneBlinkFormStoreClearFiltersButton(props: React.ComponentProps<typeof Button>): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof OneBlinkFormStoreClearFiltersButton>;
+export default _default;