@oneblink/apps-react 8.14.0 → 9.0.0-beta.10

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

@@ -1 +1 @@
-{"version":3,"file":"OneBlinkFormStoreColumnsButton.js","sourceRoot":"","sources":["../../../src/components/formStore/OneBlinkFormStoreColumnsButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport {\n  Alert,\n  AlertTitle,\n  Box,\n  Button,\n  Checkbox,\n  Collapse,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  Divider,\n  FormControlLabel,\n  FormGroup,\n  Grid,\n  IconButton,\n  Typography,\n} from '@mui/material'\nimport useBooleanState from '../../hooks/useBooleanState'\nimport useFormStoreTableContext from './useFormStoreTableContext'\nimport { ListItem, UnorderedList } from '../Lists'\nimport MaterialIcon from '../MaterialIcon'\n\nfunction OneBlinkFormStoreColumnsButton(\n  props: React.ComponentProps<typeof Button>,\n) {\n  const {\n    getToggleHideAllColumnsProps,\n    allColumns,\n    parameters,\n    onChangeParameters,\n  } = useFormStoreTableContext()\n  const [\n    isConfiguringColumns,\n    showColumnConfiguration,\n    hideColumnConfiguration,\n  ] = useBooleanState(false)\n  const [isHelpOpen, , , toggleHelp] = useBooleanState(false)\n\n  const toggleHideAllColumnsProps = getToggleHideAllColumnsProps()\n\n  const hasRepeatableSets = React.useMemo(\n    () =>\n      parameters.unwindRepeatableSets ||\n      allColumns.some((c) => c.formElementType === 'repeatableSet'),\n    [allColumns, parameters.unwindRepeatableSets],\n  )\n\n  return (\n    <>\n      <Button\n        className=\"ob-form-store-columns-button\"\n        startIcon={<MaterialIcon>settings</MaterialIcon>}\n        onClick={showColumnConfiguration}\n        // eslint-disable-next-line react/no-children-prop\n        children={<>Columns</>}\n        {...props}\n      />\n      <Dialog\n        open={isConfiguringColumns}\n        maxWidth=\"sm\"\n        fullWidth\n        onClose={hideColumnConfiguration}\n      >\n        <DialogTitle>Column Configuration</DialogTitle>\n        <DialogContent dividers>\n          {hasRepeatableSets && (\n            <>\n              <Grid container>\n                <Grid item>\n                  <FormGroup>\n                    <FormControlLabel\n                      control={\n                        <Checkbox checked={!!parameters.unwindRepeatableSets} />\n                      }\n                      onChange={(e, checked) => {\n                        onChangeParameters(\n                          (currentParameters) => ({\n                            ...currentParameters,\n                            sorting: checked\n                              ? currentParameters.sorting\n                              : [\n                                  {\n                                    property: 'dateTimeSubmitted',\n                                    direction: 'descending',\n                                  },\n                                ],\n                            unwindRepeatableSets: checked,\n                          }),\n                          false,\n                        )\n                      }}\n                      label=\"Output a row per repeatable set entry\"\n                    />\n                  </FormGroup>\n                </Grid>\n                <Grid item>\n                  <IconButton onClick={toggleHelp}>\n                    <MaterialIcon>help</MaterialIcon>\n                  </IconButton>\n                </Grid>\n              </Grid>\n              <Collapse in={isHelpOpen}>\n                <Alert severity=\"info\">\n                  <AlertTitle>When this setting is enabled:</AlertTitle>\n                  <UnorderedList>\n                    <ListItem>\n                      Repeatable set columns will be expanded and create\n                      duplicate rows per entry\n                    </ListItem>\n                    <ListItem>\n                      Columns inside repeatable set entries can be sorted and\n                      filtered\n                    </ListItem>\n                    <ListItem>\n                      Columns inside repeatable set entries will be included in\n                      the CSV download\n                    </ListItem>\n                  </UnorderedList>\n                </Alert>\n              </Collapse>\n              <Box marginY={2}>\n                <Divider />\n              </Box>\n            </>\n          )}\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\n/**\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo(OneBlinkFormStoreColumnsButton)\n"]}
+{"version":3,"file":"OneBlinkFormStoreColumnsButton.js","sourceRoot":"","sources":["../../../src/components/formStore/OneBlinkFormStoreColumnsButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,KAAK,EACL,UAAU,EACV,GAAG,EACH,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,aAAa,EACb,aAAa,EACb,WAAW,EACX,OAAO,EACP,gBAAgB,EAChB,SAAS,EACT,IAAI,EACJ,UAAU,EACV,UAAU,GACX,MAAM,eAAe,CAAA;AACtB,OAAO,eAAe,MAAM,6BAA6B,CAAA;AACzD,OAAO,wBAAwB,MAAM,4BAA4B,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAClD,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAE1C,SAAS,8BAA8B,CACrC,KAA0C;IAE1C,MAAM,EACJ,iBAAiB,EACjB,UAAU,EACV,kBAAkB,EAClB,oCAAoC,EACpC,sBAAsB,EACtB,qBAAqB,GACtB,GAAG,wBAAwB,EAAE,CAAA;IAC9B,MAAM,CACJ,oBAAoB,EACpB,uBAAuB,EACvB,uBAAuB,EACxB,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAC1B,MAAM,CAAC,UAAU,EAAE,AAAD,EAAG,AAAD,EAAG,UAAU,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAA;IAE3D,MAAM,UAAU,GAAG,iBAAiB,EAAE,CAAA;IAEtC,MAAM,iBAAiB,GAAG,KAAK,CAAC,OAAO,CACrC,GAAG,EAAE,CACH,UAAU,CAAC,oBAAoB;QAC/B,UAAU,CAAC,IAAI,CACb,CAAC,CAAC,EAAE,EAAE,WAAC,OAAA,CAAA,MAAA,CAAC,CAAC,SAAS,CAAC,IAAI,0CAAE,eAAe,MAAK,eAAe,CAAA,EAAA,CAC7D,EACH,CAAC,UAAU,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAC9C,CAAA;IAED,OAAO,CACL,8BACE,KAAC,MAAM,IACL,SAAS,EAAC,8BAA8B,EACxC,SAAS,EAAE,KAAC,YAAY,2BAAwB,EAChD,OAAO,EAAE,uBAAuB,KAC5B,KAAK,wBAGF,EACT,MAAC,MAAM,IACL,IAAI,EAAE,oBAAoB,EAC1B,QAAQ,EAAC,IAAI,EACb,SAAS,QACT,OAAO,EAAE,uBAAuB,aAEhC,KAAC,WAAW,uCAAmC,EAC/C,MAAC,aAAa,IAAC,QAAQ,mBACpB,iBAAiB,IAAI,CACpB,8BACE,MAAC,IAAI,IAAC,SAAS,mBACb,KAAC,IAAI,cACH,KAAC,SAAS,cACR,KAAC,gBAAgB,IACf,OAAO,EACL,KAAC,QAAQ,IAAC,OAAO,EAAE,CAAC,CAAC,UAAU,CAAC,oBAAoB,GAAI,EAE1D,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE;4DACvB,kBAAkB,CAChB,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;gEACtB,GAAG,iBAAiB;gEACpB,OAAO,EAAE,OAAO;oEACd,CAAC,CAAC,iBAAiB,CAAC,OAAO;oEAC3B,CAAC,CAAC;wEACE;4EACE,QAAQ,EAAE,mBAAmB;4EAC7B,SAAS,EAAE,YAAY;yEACxB;qEACF;gEACL,oBAAoB,EAAE,OAAO;6DAC9B,CAAC,EACF,KAAK,CACN,CAAA;wDACH,CAAC,EACD,KAAK,EAAC,uCAAuC,GAC7C,GACQ,GACP,EACP,KAAC,IAAI,cACH,KAAC,UAAU,IAAC,OAAO,EAAE,UAAU,YAC7B,KAAC,YAAY,uBAAoB,GACtB,GACR,IACF,EACP,KAAC,QAAQ,IAAC,EAAE,EAAE,UAAU,YACtB,MAAC,KAAK,IAAC,QAAQ,EAAC,MAAM,aACpB,KAAC,UAAU,gDAA2C,EACtD,MAAC,aAAa,eACZ,KAAC,QAAQ,8FAGE,EACX,KAAC,QAAQ,mFAGE,EACX,KAAC,QAAQ,6FAGE,IACG,IACV,GACC,EACX,KAAC,GAAG,IAAC,OAAO,EAAE,CAAC,YACb,KAAC,OAAO,KAAG,GACP,IACL,CACJ,EACD,MAAC,SAAS,eACR,KAAC,gBAAgB,IACf,OAAO,EACL,KAAC,QAAQ,IACP,QAAQ,EAAE,oCAAoC,EAAE,EAChD,OAAO,EAAE,sBAAsB,EAAE,EACjC,aAAa,EAAE,qBAAqB,EAAE,CAAC,MAAM,GAAG,CAAC,GACjD,EAEJ,KAAK,EAAE,qCAAiB,GACxB,EACD,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;;wCACzB,OAAO,CACL,KAAC,KAAK,CAAC,QAAQ,cACb,KAAC,gBAAgB,IACf,OAAO,EACL,KAAC,QAAQ,IACP,OAAO,EAAE,MAAM,CAAC,YAAY,EAAE,EAC9B,QAAQ,EAAE,MAAM,CAAC,0BAA0B,EAAE,GAC7C,EAEJ,KAAK,EACH,8BACG,MAAM,CAAC,SAAS,CAAC,MAAM,EACvB,CAAA,MAAA,MAAM,CAAC,SAAS,CAAC,IAAI,0CAAE,OAAO,KAAI,CACjC,MAAC,UAAU,IAAC,SAAS,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,aAC/C,GAAG,OACF,MAAA,MAAM,CAAC,SAAS,CAAC,IAAI,0CAAE,OAAO,SACrB,CACd,IACA,GAEL,IAnBiB,MAAM,CAAC,EAAE,CAoBb,CAClB,CAAA;oCACH,CAAC,CAAC,IACQ,IACE,EAChB,KAAC,aAAa,cACZ,KAAC,MAAM,IACL,OAAO,EAAE,uBAAuB,EAChC,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,WAAW,qBAGZ,GACK,IACT,IACR,CACJ,CAAA;AACH,CAAC;AAED;;;;GAIG;AACH,eAAe,KAAK,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport {\n  Alert,\n  AlertTitle,\n  Box,\n  Button,\n  Checkbox,\n  Collapse,\n  Dialog,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  Divider,\n  FormControlLabel,\n  FormGroup,\n  Grid,\n  IconButton,\n  Typography,\n} from '@mui/material'\nimport useBooleanState from '../../hooks/useBooleanState'\nimport useFormStoreTableContext from './useFormStoreTableContext'\nimport { ListItem, UnorderedList } from '../Lists'\nimport MaterialIcon from '../MaterialIcon'\n\nfunction OneBlinkFormStoreColumnsButton(\n  props: React.ComponentProps<typeof Button>,\n) {\n  const {\n    getAllFlatColumns,\n    parameters,\n    onChangeParameters,\n    getToggleAllColumnsVisibilityHandler,\n    getIsAllColumnsVisible,\n    getVisibleFlatColumns,\n  } = useFormStoreTableContext()\n  const [\n    isConfiguringColumns,\n    showColumnConfiguration,\n    hideColumnConfiguration,\n  ] = useBooleanState(false)\n  const [isHelpOpen, , , toggleHelp] = useBooleanState(false)\n\n  const allColumns = getAllFlatColumns()\n\n  const hasRepeatableSets = React.useMemo(\n    () =>\n      parameters.unwindRepeatableSets ||\n      allColumns.some(\n        (c) => c.columnDef.meta?.formElementType === 'repeatableSet',\n      ),\n    [parameters.unwindRepeatableSets, allColumns],\n  )\n\n  return (\n    <>\n      <Button\n        className=\"ob-form-store-columns-button\"\n        startIcon={<MaterialIcon>settings</MaterialIcon>}\n        onClick={showColumnConfiguration}\n        {...props}\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          {hasRepeatableSets && (\n            <>\n              <Grid container>\n                <Grid>\n                  <FormGroup>\n                    <FormControlLabel\n                      control={\n                        <Checkbox checked={!!parameters.unwindRepeatableSets} />\n                      }\n                      onChange={(e, checked) => {\n                        onChangeParameters(\n                          (currentParameters) => ({\n                            ...currentParameters,\n                            sorting: checked\n                              ? currentParameters.sorting\n                              : [\n                                  {\n                                    property: 'dateTimeSubmitted',\n                                    direction: 'descending',\n                                  },\n                                ],\n                            unwindRepeatableSets: checked,\n                          }),\n                          false,\n                        )\n                      }}\n                      label=\"Output a row per repeatable set entry\"\n                    />\n                  </FormGroup>\n                </Grid>\n                <Grid>\n                  <IconButton onClick={toggleHelp}>\n                    <MaterialIcon>help</MaterialIcon>\n                  </IconButton>\n                </Grid>\n              </Grid>\n              <Collapse in={isHelpOpen}>\n                <Alert severity=\"info\">\n                  <AlertTitle>When this setting is enabled:</AlertTitle>\n                  <UnorderedList>\n                    <ListItem>\n                      Repeatable set columns will be expanded and create\n                      duplicate rows per entry\n                    </ListItem>\n                    <ListItem>\n                      Columns inside repeatable set entries can be sorted and\n                      filtered\n                    </ListItem>\n                    <ListItem>\n                      Columns inside repeatable set entries will be included in\n                      the CSV download\n                    </ListItem>\n                  </UnorderedList>\n                </Alert>\n              </Collapse>\n              <Box marginY={2}>\n                <Divider />\n              </Box>\n            </>\n          )}\n          <FormGroup>\n            <FormControlLabel\n              control={\n                <Checkbox\n                  onChange={getToggleAllColumnsVisibilityHandler()}\n                  checked={getIsAllColumnsVisible()}\n                  indeterminate={getVisibleFlatColumns().length > 0}\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={\n                      <Checkbox\n                        checked={column.getIsVisible()}\n                        onChange={column.getToggleVisibilityHandler()}\n                      />\n                    }\n                    label={\n                      <>\n                        {column.columnDef.header}\n                        {column.columnDef.meta?.tooltip && (\n                          <Typography component=\"span\" color=\"textSecondary\">\n                            {' '}\n                            ({column.columnDef.meta?.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\n/**\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo(OneBlinkFormStoreColumnsButton)\n"]}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { LoadingButton } from '@mui/lab';
-declare function OneBlinkFormStoreDownloadButton(props: React.ComponentProps<typeof LoadingButton>): React.JSX.Element;
+import { Button } from '@mui/material';
+declare function OneBlinkFormStoreDownloadButton(props: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
 /**
  * @param props
  * @returns

package/dist/components/formStore/OneBlinkFormStoreDownloadButton.js

@@ -1,12 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { Tooltip, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, } from '@mui/material';
-import { LoadingButton } from '@mui/lab';
 import ErrorSnackbar from '../ErrorSnackbar';
-import { formStoreService } from '@oneblink/apps';
+import { formStoreService } from '../../apps';
 import useFormStoreTableContext from './useFormStoreTableContext';
 import MaterialIcon from '../MaterialIcon';
 function OneBlinkFormStoreDownloadButton(props) {
-    const { visibleColumns, parameters, form } = useFormStoreTableContext();
+    const { getVisibleFlatColumns, parameters, form } = useFormStoreTableContext();
     const [{ isDownloadingCsv, isPromptingDownloadCsv, downloadingCsvError }, setState,] = React.useState({
         isDownloadingCsv: false,
         isPromptingDownloadCsv: false,
@@ -27,7 +27,7 @@ function OneBlinkFormStoreDownloadButton(props) {
         try {
             await formStoreService.exportFormStoreRecords(form.name, {
                 formId: form.id,
-                includeColumns: visibleColumns.map((visibleColumn) => visibleColumn.id),
+                includeColumns: getVisibleFlatColumns().map((visibleColumn) => visibleColumn.id),
                 ...parameters,
             });
             setState((currentState) => ({
@@ -43,10 +43,10 @@ function OneBlinkFormStoreDownloadButton(props) {
                 downloadingCsvError: error,
             }));
         }
-    }, [form, parameters, visibleColumns]);
+    }, [form, parameters, getVisibleFlatColumns]);
     const promptDownloadCsv = React.useCallback(() => {
         if (!parameters.unwindRepeatableSets &&
-            visibleColumns.some((c) => c.formElementType === 'repeatableSet')) {
+            getVisibleFlatColumns().some((c) => { var _a; return ((_a = c.columnDef.meta) === null || _a === void 0 ? void 0 : _a.formElementType) === 'repeatableSet'; })) {
             setState((currentState) => ({
                 ...currentState,
                 downloadingCsvError: null,
@@ -55,33 +55,14 @@ function OneBlinkFormStoreDownloadButton(props) {
             return;
         }
         downloadCsv();
-    }, [downloadCsv, parameters.unwindRepeatableSets, visibleColumns]);
+    }, [downloadCsv, parameters.unwindRepeatableSets, getVisibleFlatColumns]);
     const cancelPromptDownloadCsv = React.useCallback(() => {
         setState((currentState) => ({
             ...currentState,
             isPromptingDownloadCsv: false,
         }));
     }, []);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Tooltip, { title: "Download submission data as a CSV file" },
-            React.createElement(LoadingButton, { className: "ob-form-store-download-csv-button", type: "button", loading: isDownloadingCsv, loadingPosition: "start", startIcon: React.createElement(MaterialIcon, null, "download"), onClick: promptDownloadCsv, 
-                // eslint-disable-next-line react/no-children-prop
-                children: React.createElement(React.Fragment, null, "Download"), ...props })),
-        React.createElement(ErrorSnackbar, { open: !!downloadingCsvError, onClose: clearError },
-            React.createElement("span", { "data-cypress": "edit-dialog-error-message" }, downloadingCsvError && downloadingCsvError.message)),
-        React.createElement(Dialog, { open: isPromptingDownloadCsv, maxWidth: "sm", fullWidth: true, onClose: cancelPromptDownloadCsv },
-            React.createElement(DialogTitle, null, "Column Configuration"),
-            React.createElement(DialogContent, null,
-                React.createElement(DialogContentText, null,
-                    "Repeatable set columns will not be included in the export unless the",
-                    ' ',
-                    React.createElement("b", null, "Output a row per repeatable set entry"),
-                    " option is turned on under ",
-                    React.createElement("b", null, "Column Configuration"),
-                    ".")),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { onClick: cancelPromptDownloadCsv, variant: "text" }, "Cancel"),
-                React.createElement(Button, { onClick: downloadCsv, startIcon: React.createElement(MaterialIcon, null, "download"), color: "primary", variant: "contained" }, "Download")))));
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "Download submission data as a CSV file", children: _jsx(Button, { className: "ob-form-store-download-csv-button", type: "button", loading: isDownloadingCsv, loadingPosition: "start", startIcon: _jsx(MaterialIcon, { children: "download" }), onClick: promptDownloadCsv, ...props, children: "Download" }) }), _jsx(ErrorSnackbar, { open: !!downloadingCsvError, onClose: clearError, children: _jsx("span", { "data-cypress": "edit-dialog-error-message", children: downloadingCsvError && downloadingCsvError.message }) }), _jsxs(Dialog, { open: isPromptingDownloadCsv, maxWidth: "sm", fullWidth: true, onClose: cancelPromptDownloadCsv, children: [_jsx(DialogTitle, { children: "Column Configuration" }), _jsx(DialogContent, { children: _jsxs(DialogContentText, { children: ["Repeatable set columns will not be included in the export unless the", ' ', _jsx("b", { children: "Output a row per repeatable set entry" }), " option is turned on under ", _jsx("b", { children: "Column Configuration" }), "."] }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: cancelPromptDownloadCsv, variant: "text", children: "Cancel" }), _jsx(Button, { onClick: downloadCsv, startIcon: _jsx(MaterialIcon, { children: "download" }), color: "primary", variant: "contained", children: "Download" })] })] })] }));
 }
 /**
  * @param props

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

@@ -1 +1 @@
-{"version":3,"file":"OneBlinkFormStoreDownloadButton.js","sourceRoot":"","sources":["../../../src/components/formStore/OneBlinkFormStoreDownloadButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,OAAO,EACP,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,MAAM,GACP,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AACxC,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAG5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,wBAAwB,MAAM,4BAA4B,CAAA;AACjE,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAE1C,SAAS,+BAA+B,CACtC,KAAiD;IAEjD,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,wBAAwB,EAAE,CAAA;IACvE,MAAM,CACJ,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,EACjE,QAAQ,EACT,GAAG,KAAK,CAAC,QAAQ,CAIf;QACD,gBAAgB,EAAE,KAAK;QACvB,sBAAsB,EAAE,KAAK;QAC7B,mBAAmB,EAAE,IAAI;KAC1B,CAAC,CAAA;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,QAAQ,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YAC1B,GAAG,YAAY;YACf,mBAAmB,EAAE,IAAI;SAC1B,CAAC,CAAC,CAAA;IACL,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;QAC/C,QAAQ,CAAC;YACP,sBAAsB,EAAE,KAAK;YAC7B,gBAAgB,EAAE,IAAI;YACtB,mBAAmB,EAAE,IAAI;SAC1B,CAAC,CAAA;QACF,IAAI,CAAC;YACH,MAAM,gBAAgB,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE;gBACvD,MAAM,EAAE,IAAI,CAAC,EAAE;gBACf,cAAc,EAAE,cAAc,CAAC,GAAG,CAChC,CAAC,aAA8C,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,CACrE;gBACD,GAAG,UAAU;aACd,CAAC,CAAA;YACF,QAAQ,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;gBAC1B,GAAG,YAAY;gBACf,gBAAgB,EAAE,KAAK;gBACvB,mBAAmB,EAAE,IAAI;aAC1B,CAAC,CAAC,CAAA;QACL,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,QAAQ,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;gBAC1B,GAAG,YAAY;gBACf,gBAAgB,EAAE,KAAK;gBACvB,mBAAmB,EAAE,KAAc;aACpC,CAAC,CAAC,CAAA;QACL,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC,CAAA;IAEtC,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC/C,IACE,CAAC,UAAU,CAAC,oBAAoB;YAChC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,KAAK,eAAe,CAAC,EACjE,CAAC;YACD,QAAQ,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;gBAC1B,GAAG,YAAY;gBACf,mBAAmB,EAAE,IAAI;gBACzB,sBAAsB,EAAE,IAAI;aAC7B,CAAC,CAAC,CAAA;YACH,OAAM;QACR,CAAC;QACD,WAAW,EAAE,CAAA;IACf,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC,oBAAoB,EAAE,cAAc,CAAC,CAAC,CAAA;IAElE,MAAM,uBAAuB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACrD,QAAQ,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YAC1B,GAAG,YAAY;YACf,sBAAsB,EAAE,KAAK;SAC9B,CAAC,CAAC,CAAA;IACL,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL;QACE,oBAAC,OAAO,IAAC,KAAK,EAAC,wCAAwC;YACrD,oBAAC,aAAa,IACZ,SAAS,EAAC,mCAAmC,EAC7C,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,gBAAgB,EACzB,eAAe,EAAC,OAAO,EACvB,SAAS,EAAE,oBAAC,YAAY,mBAAwB,EAChD,OAAO,EAAE,iBAAiB;gBAC1B,kDAAkD;gBAClD,QAAQ,EAAE,qDAAa,KACnB,KAAK,GACT,CACM;QAEV,oBAAC,aAAa,IAAC,IAAI,EAAE,CAAC,CAAC,mBAAmB,EAAE,OAAO,EAAE,UAAU;YAC7D,8CAAmB,2BAA2B,IAC3C,mBAAmB,IAAI,mBAAmB,CAAC,OAAO,CAC9C,CACO;QAEhB,oBAAC,MAAM,IACL,IAAI,EAAE,sBAAsB,EAC5B,QAAQ,EAAC,IAAI,EACb,SAAS,QACT,OAAO,EAAE,uBAAuB;YAEhC,oBAAC,WAAW,+BAAmC;YAC/C,oBAAC,aAAa;gBACZ,oBAAC,iBAAiB;;oBACqD,GAAG;oBACxE,uEAA4C;;oBACtC,sDAA2B;wBACf,CACN;YAChB,oBAAC,aAAa;gBACZ,oBAAC,MAAM,IAAC,OAAO,EAAE,uBAAuB,EAAE,OAAO,EAAC,MAAM,aAE/C;gBACT,oBAAC,MAAM,IACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,oBAAC,YAAY,mBAAwB,EAChD,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,WAAW,eAGZ,CACK,CACT,CACR,CACJ,CAAA;AACH,CAAC;AAED;;;;GAIG;AACH,eAAe,KAAK,CAAC,IAAI,CAAC,+BAA+B,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport {\n  Tooltip,\n  Dialog,\n  DialogTitle,\n  DialogContent,\n  DialogContentText,\n  DialogActions,\n  Button,\n} from '@mui/material'\nimport { LoadingButton } from '@mui/lab'\nimport ErrorSnackbar from '../ErrorSnackbar'\nimport { ColumnInstance } from 'react-table'\nimport { FormStoreRecord } from '@oneblink/types/typescript/submissions'\nimport { formStoreService } from '@oneblink/apps'\nimport useFormStoreTableContext from './useFormStoreTableContext'\nimport MaterialIcon from '../MaterialIcon'\n\nfunction OneBlinkFormStoreDownloadButton(\n  props: React.ComponentProps<typeof LoadingButton>,\n) {\n  const { visibleColumns, parameters, form } = useFormStoreTableContext()\n  const [\n    { isDownloadingCsv, isPromptingDownloadCsv, downloadingCsvError },\n    setState,\n  ] = React.useState<{\n    isDownloadingCsv: boolean\n    isPromptingDownloadCsv: boolean\n    downloadingCsvError: Error | null\n  }>({\n    isDownloadingCsv: false,\n    isPromptingDownloadCsv: false,\n    downloadingCsvError: null,\n  })\n\n  const clearError = React.useCallback(() => {\n    setState((currentState) => ({\n      ...currentState,\n      downloadingCsvError: null,\n    }))\n  }, [])\n\n  const downloadCsv = React.useCallback(async () => {\n    setState({\n      isPromptingDownloadCsv: false,\n      isDownloadingCsv: true,\n      downloadingCsvError: null,\n    })\n    try {\n      await formStoreService.exportFormStoreRecords(form.name, {\n        formId: form.id,\n        includeColumns: visibleColumns.map(\n          (visibleColumn: ColumnInstance<FormStoreRecord>) => visibleColumn.id,\n        ),\n        ...parameters,\n      })\n      setState((currentState) => ({\n        ...currentState,\n        isDownloadingCsv: false,\n        downloadingCsvError: null,\n      }))\n    } catch (error) {\n      setState((currentState) => ({\n        ...currentState,\n        isDownloadingCsv: false,\n        downloadingCsvError: error as Error,\n      }))\n    }\n  }, [form, parameters, visibleColumns])\n\n  const promptDownloadCsv = React.useCallback(() => {\n    if (\n      !parameters.unwindRepeatableSets &&\n      visibleColumns.some((c) => c.formElementType === 'repeatableSet')\n    ) {\n      setState((currentState) => ({\n        ...currentState,\n        downloadingCsvError: null,\n        isPromptingDownloadCsv: true,\n      }))\n      return\n    }\n    downloadCsv()\n  }, [downloadCsv, parameters.unwindRepeatableSets, visibleColumns])\n\n  const cancelPromptDownloadCsv = React.useCallback(() => {\n    setState((currentState) => ({\n      ...currentState,\n      isPromptingDownloadCsv: false,\n    }))\n  }, [])\n\n  return (\n    <>\n      <Tooltip title=\"Download submission data as a CSV file\">\n        <LoadingButton\n          className=\"ob-form-store-download-csv-button\"\n          type=\"button\"\n          loading={isDownloadingCsv}\n          loadingPosition=\"start\"\n          startIcon={<MaterialIcon>download</MaterialIcon>}\n          onClick={promptDownloadCsv}\n          // eslint-disable-next-line react/no-children-prop\n          children={<>Download</>}\n          {...props}\n        />\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      <Dialog\n        open={isPromptingDownloadCsv}\n        maxWidth=\"sm\"\n        fullWidth\n        onClose={cancelPromptDownloadCsv}\n      >\n        <DialogTitle>Column Configuration</DialogTitle>\n        <DialogContent>\n          <DialogContentText>\n            Repeatable set columns will not be included in the export unless the{' '}\n            <b>Output a row per repeatable set entry</b> option is turned on\n            under <b>Column Configuration</b>.\n          </DialogContentText>\n        </DialogContent>\n        <DialogActions>\n          <Button onClick={cancelPromptDownloadCsv} variant=\"text\">\n            Cancel\n          </Button>\n          <Button\n            onClick={downloadCsv}\n            startIcon={<MaterialIcon>download</MaterialIcon>}\n            color=\"primary\"\n            variant=\"contained\"\n          >\n            Download\n          </Button>\n        </DialogActions>\n      </Dialog>\n    </>\n  )\n}\n\n/**\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo(OneBlinkFormStoreDownloadButton)\n"]}
+{"version":3,"file":"OneBlinkFormStoreDownloadButton.js","sourceRoot":"","sources":["../../../src/components/formStore/OneBlinkFormStoreDownloadButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport {\n  Tooltip,\n  Dialog,\n  DialogTitle,\n  DialogContent,\n  DialogContentText,\n  DialogActions,\n  Button,\n} from '@mui/material'\nimport ErrorSnackbar from '../ErrorSnackbar'\nimport { formStoreService } from '../../apps'\nimport useFormStoreTableContext from './useFormStoreTableContext'\nimport MaterialIcon from '../MaterialIcon'\n\nfunction OneBlinkFormStoreDownloadButton(\n  props: React.ComponentProps<typeof Button>,\n) {\n  const { getVisibleFlatColumns, parameters, form } = useFormStoreTableContext()\n  const [\n    { isDownloadingCsv, isPromptingDownloadCsv, downloadingCsvError },\n    setState,\n  ] = React.useState<{\n    isDownloadingCsv: boolean\n    isPromptingDownloadCsv: boolean\n    downloadingCsvError: Error | null\n  }>({\n    isDownloadingCsv: false,\n    isPromptingDownloadCsv: false,\n    downloadingCsvError: null,\n  })\n\n  const clearError = React.useCallback(() => {\n    setState((currentState) => ({\n      ...currentState,\n      downloadingCsvError: null,\n    }))\n  }, [])\n\n  const downloadCsv = React.useCallback(async () => {\n    setState({\n      isPromptingDownloadCsv: false,\n      isDownloadingCsv: true,\n      downloadingCsvError: null,\n    })\n    try {\n      await formStoreService.exportFormStoreRecords(form.name, {\n        formId: form.id,\n        includeColumns: getVisibleFlatColumns().map(\n          (visibleColumn) => visibleColumn.id,\n        ),\n        ...parameters,\n      })\n      setState((currentState) => ({\n        ...currentState,\n        isDownloadingCsv: false,\n        downloadingCsvError: null,\n      }))\n    } catch (error) {\n      setState((currentState) => ({\n        ...currentState,\n        isDownloadingCsv: false,\n        downloadingCsvError: error as Error,\n      }))\n    }\n  }, [form, parameters, getVisibleFlatColumns])\n\n  const promptDownloadCsv = React.useCallback(() => {\n    if (\n      !parameters.unwindRepeatableSets &&\n      getVisibleFlatColumns().some(\n        (c) => c.columnDef.meta?.formElementType === 'repeatableSet',\n      )\n    ) {\n      setState((currentState) => ({\n        ...currentState,\n        downloadingCsvError: null,\n        isPromptingDownloadCsv: true,\n      }))\n      return\n    }\n    downloadCsv()\n  }, [downloadCsv, parameters.unwindRepeatableSets, getVisibleFlatColumns])\n\n  const cancelPromptDownloadCsv = React.useCallback(() => {\n    setState((currentState) => ({\n      ...currentState,\n      isPromptingDownloadCsv: false,\n    }))\n  }, [])\n\n  return (\n    <>\n      <Tooltip title=\"Download submission data as a CSV file\">\n        <Button\n          className=\"ob-form-store-download-csv-button\"\n          type=\"button\"\n          loading={isDownloadingCsv}\n          loadingPosition=\"start\"\n          startIcon={<MaterialIcon>download</MaterialIcon>}\n          onClick={promptDownloadCsv}\n          {...props}\n        >\n          Download\n        </Button>\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      <Dialog\n        open={isPromptingDownloadCsv}\n        maxWidth=\"sm\"\n        fullWidth\n        onClose={cancelPromptDownloadCsv}\n      >\n        <DialogTitle>Column Configuration</DialogTitle>\n        <DialogContent>\n          <DialogContentText>\n            Repeatable set columns will not be included in the export unless the{' '}\n            <b>Output a row per repeatable set entry</b> option is turned on\n            under <b>Column Configuration</b>.\n          </DialogContentText>\n        </DialogContent>\n        <DialogActions>\n          <Button onClick={cancelPromptDownloadCsv} variant=\"text\">\n            Cancel\n          </Button>\n          <Button\n            onClick={downloadCsv}\n            startIcon={<MaterialIcon>download</MaterialIcon>}\n            color=\"primary\"\n            variant=\"contained\"\n          >\n            Download\n          </Button>\n        </DialogActions>\n      </Dialog>\n    </>\n  )\n}\n\n/**\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo(OneBlinkFormStoreDownloadButton)\n"]}

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

@@ -10,4 +10,4 @@ export declare const FormStoreElementsContext: React.Context<FormStoreElementsCo
 export declare function OneBlinkFormStoreProvider({ form, children, }: {
     form: FormTypes.Form;
     children: React.ReactNode;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/formStore/OneBlinkFormStoreProvider.js

@@ -1,7 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import LoadingWithMessage from '../LoadingWithMessage';
 import ErrorMessage from '../messages/ErrorMessage';
-import { formStoreService } from '@oneblink/apps';
+import { formStoreService } from '../../apps';
 import useLoadDataState from '../../hooks/useLoadDataState';
 import { FormStoreTableProvider } from './FormStoreTableProvider';
 export const FormStoreElementsContext = React.createContext([]);
@@ -16,13 +17,11 @@ export function OneBlinkFormStoreProvider({ form, children, }) {
     }, [form.id]);
     const [formStoreDefinitionState, onTryAgain] = useLoadDataState(fetchFormStoreDefinition);
     if (formStoreDefinitionState.status === 'LOADING') {
-        return React.createElement(LoadingWithMessage, null);
+        return _jsx(LoadingWithMessage, {});
     }
     if (formStoreDefinitionState.status === 'ERROR') {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(ErrorMessage, { title: "Error Retrieving Form Definition", gutterTop: true, onTryAgain: onTryAgain }, formStoreDefinitionState.error.message)));
+        return (_jsx(_Fragment, { children: _jsx(ErrorMessage, { title: "Error Retrieving Form Definition", gutterTop: true, onTryAgain: onTryAgain, children: formStoreDefinitionState.error.message }) }));
     }
-    return (React.createElement(FormStoreElementsContext.Provider, { value: formStoreDefinitionState.result.formElements },
-        React.createElement(FormStoreTableProvider, { form: form }, children)));
+    return (_jsx(FormStoreElementsContext.Provider, { value: formStoreDefinitionState.result.formElements, children: _jsx(FormStoreTableProvider, { form: form, children: children }) }));
 }
 //# sourceMappingURL=OneBlinkFormStoreProvider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"OneBlinkFormStoreProvider.js","sourceRoot":"","sources":["../../../src/components/formStore/OneBlinkFormStoreProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,kBAAkB,MAAM,uBAAuB,CAAA;AACtD,OAAO,YAAY,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,gBAAgB,MAAM,8BAA8B,CAAA;AAE3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAIjE,MAAM,CAAC,MAAM,wBAAwB,GACnC,KAAK,CAAC,aAAa,CAAgC,EAAE,CAAC,CAAA;AAExD;;;;GAIG;AACH,MAAM,UAAU,yBAAyB,CAAC,EACxC,IAAI,EACJ,QAAQ,GAIT;IACC,MAAM,wBAAwB,GAAG,KAAK,CAAC,WAAW,CAChD,CAAC,WAAyB,EAAE,EAAE;QAC5B,OAAO,gBAAgB,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,CAAA;IACtE,CAAC,EACD,CAAC,IAAI,CAAC,EAAE,CAAC,CACV,CAAA;IACD,MAAM,CAAC,wBAAwB,EAAE,UAAU,CAAC,GAAG,gBAAgB,CAC7D,wBAAwB,CACzB,CAAA;IAED,IAAI,wBAAwB,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;QAClD,OAAO,oBAAC,kBAAkB,OAAG,CAAA;IAC/B,CAAC;IAED,IAAI,wBAAwB,CAAC,MAAM,KAAK,OAAO,EAAE,CAAC;QAChD,OAAO,CACL;YACE,oBAAC,YAAY,IACX,KAAK,EAAC,kCAAkC,EACxC,SAAS,QACT,UAAU,EAAE,UAAU,IAErB,wBAAwB,CAAC,KAAK,CAAC,OAAO,CAC1B,CACd,CACJ,CAAA;IACH,CAAC;IAED,OAAO,CACL,oBAAC,wBAAwB,CAAC,QAAQ,IAChC,KAAK,EAAE,wBAAwB,CAAC,MAAM,CAAC,YAAY;QAEnD,oBAAC,sBAAsB,IAAC,IAAI,EAAE,IAAI,IAAG,QAAQ,CAA0B,CACrC,CACrC,CAAA;AACH,CAAC","sourcesContent":["import * as React from 'react'\nimport LoadingWithMessage from '../LoadingWithMessage'\nimport ErrorMessage from '../messages/ErrorMessage'\nimport { formStoreService } from '@oneblink/apps'\nimport useLoadDataState from '../../hooks/useLoadDataState'\nimport { FormTypes } from '@oneblink/types'\nimport { FormStoreTableProvider } from './FormStoreTableProvider'\n\nexport type FormStoreElementsContextValue = FormTypes.FormElementWithName[]\n\nexport const FormStoreElementsContext =\n  React.createContext<FormStoreElementsContextValue>([])\n\n/**\n * @param props\n * @returns\n * @group Components\n */\nexport function OneBlinkFormStoreProvider({\n  form,\n  children,\n}: {\n  form: FormTypes.Form\n  children: React.ReactNode\n}) {\n  const fetchFormStoreDefinition = React.useCallback(\n    (abortSignal?: AbortSignal) => {\n      return formStoreService.getFormStoreDefinition(form.id, abortSignal)\n    },\n    [form.id],\n  )\n  const [formStoreDefinitionState, onTryAgain] = useLoadDataState(\n    fetchFormStoreDefinition,\n  )\n\n  if (formStoreDefinitionState.status === 'LOADING') {\n    return <LoadingWithMessage />\n  }\n\n  if (formStoreDefinitionState.status === 'ERROR') {\n    return (\n      <>\n        <ErrorMessage\n          title=\"Error Retrieving Form Definition\"\n          gutterTop\n          onTryAgain={onTryAgain}\n        >\n          {formStoreDefinitionState.error.message}\n        </ErrorMessage>\n      </>\n    )\n  }\n\n  return (\n    <FormStoreElementsContext.Provider\n      value={formStoreDefinitionState.result.formElements}\n    >\n      <FormStoreTableProvider form={form}>{children}</FormStoreTableProvider>\n    </FormStoreElementsContext.Provider>\n  )\n}\n"]}
+{"version":3,"file":"OneBlinkFormStoreProvider.js","sourceRoot":"","sources":["../../../src/components/formStore/OneBlinkFormStoreProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,kBAAkB,MAAM,uBAAuB,CAAA;AACtD,OAAO,YAAY,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAC7C,OAAO,gBAAgB,MAAM,8BAA8B,CAAA;AAE3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAIjE,MAAM,CAAC,MAAM,wBAAwB,GACnC,KAAK,CAAC,aAAa,CAAgC,EAAE,CAAC,CAAA;AAExD;;;;GAIG;AACH,MAAM,UAAU,yBAAyB,CAAC,EACxC,IAAI,EACJ,QAAQ,GAIT;IACC,MAAM,wBAAwB,GAAG,KAAK,CAAC,WAAW,CAChD,CAAC,WAAyB,EAAE,EAAE;QAC5B,OAAO,gBAAgB,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,CAAA;IACtE,CAAC,EACD,CAAC,IAAI,CAAC,EAAE,CAAC,CACV,CAAA;IACD,MAAM,CAAC,wBAAwB,EAAE,UAAU,CAAC,GAAG,gBAAgB,CAC7D,wBAAwB,CACzB,CAAA;IAED,IAAI,wBAAwB,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;QAClD,OAAO,KAAC,kBAAkB,KAAG,CAAA;IAC/B,CAAC;IAED,IAAI,wBAAwB,CAAC,MAAM,KAAK,OAAO,EAAE,CAAC;QAChD,OAAO,CACL,4BACE,KAAC,YAAY,IACX,KAAK,EAAC,kCAAkC,EACxC,SAAS,QACT,UAAU,EAAE,UAAU,YAErB,wBAAwB,CAAC,KAAK,CAAC,OAAO,GAC1B,GACd,CACJ,CAAA;IACH,CAAC;IAED,OAAO,CACL,KAAC,wBAAwB,CAAC,QAAQ,IAChC,KAAK,EAAE,wBAAwB,CAAC,MAAM,CAAC,YAAY,YAEnD,KAAC,sBAAsB,IAAC,IAAI,EAAE,IAAI,YAAG,QAAQ,GAA0B,GACrC,CACrC,CAAA;AACH,CAAC","sourcesContent":["import * as React from 'react'\nimport LoadingWithMessage from '../LoadingWithMessage'\nimport ErrorMessage from '../messages/ErrorMessage'\nimport { formStoreService } from '../../apps'\nimport useLoadDataState from '../../hooks/useLoadDataState'\nimport { FormTypes } from '@oneblink/types'\nimport { FormStoreTableProvider } from './FormStoreTableProvider'\n\nexport type FormStoreElementsContextValue = FormTypes.FormElementWithName[]\n\nexport const FormStoreElementsContext =\n  React.createContext<FormStoreElementsContextValue>([])\n\n/**\n * @param props\n * @returns\n * @group Components\n */\nexport function OneBlinkFormStoreProvider({\n  form,\n  children,\n}: {\n  form: FormTypes.Form\n  children: React.ReactNode\n}) {\n  const fetchFormStoreDefinition = React.useCallback(\n    (abortSignal?: AbortSignal) => {\n      return formStoreService.getFormStoreDefinition(form.id, abortSignal)\n    },\n    [form.id],\n  )\n  const [formStoreDefinitionState, onTryAgain] = useLoadDataState(\n    fetchFormStoreDefinition,\n  )\n\n  if (formStoreDefinitionState.status === 'LOADING') {\n    return <LoadingWithMessage />\n  }\n\n  if (formStoreDefinitionState.status === 'ERROR') {\n    return (\n      <>\n        <ErrorMessage\n          title=\"Error Retrieving Form Definition\"\n          gutterTop\n          onTryAgain={onTryAgain}\n        >\n          {formStoreDefinitionState.error.message}\n        </ErrorMessage>\n      </>\n    )\n  }\n\n  return (\n    <FormStoreElementsContext.Provider\n      value={formStoreDefinitionState.result.formElements}\n    >\n      <FormStoreTableProvider form={form}>{children}</FormStoreTableProvider>\n    </FormStoreElementsContext.Provider>\n  )\n}\n"]}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Button } from '@mui/material';
-declare function OneBlinkFormStoreRefreshButton(props: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function OneBlinkFormStoreRefreshButton(props: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
 /**
  * @param props
  * @returns

package/dist/components/formStore/OneBlinkFormStoreRefreshButton.js

@@ -1,12 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { Button } from '@mui/material';
 import useFormStoreTableContext from './useFormStoreTableContext';
 import MaterialIcon from '../MaterialIcon';
 function OneBlinkFormStoreRefreshButton(props) {
     const { onRefresh, submissionIdValidationMessage } = useFormStoreTableContext();
-    return (React.createElement(Button, { className: "ob-form-store-refresh-button", startIcon: React.createElement(MaterialIcon, null, "sync"), onClick: onRefresh, color: "primary", variant: "contained", disabled: !!submissionIdValidationMessage, 
-        // eslint-disable-next-line react/no-children-prop
-        children: React.createElement(React.Fragment, null, "Refresh"), ...props }));
+    return (_jsx(Button, { className: "ob-form-store-refresh-button", startIcon: _jsx(MaterialIcon, { children: "sync" }), onClick: onRefresh, color: "primary", variant: "contained", disabled: !!submissionIdValidationMessage, children: _jsx(_Fragment, { children: "Refresh" }), ...props }));
 }
 /**
  * @param props

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

@@ -1 +1 @@
-{"version":3,"file":"OneBlinkFormStoreRefreshButton.js","sourceRoot":"","sources":["../../../src/components/formStore/OneBlinkFormStoreRefreshButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,wBAAwB,MAAM,4BAA4B,CAAA;AACjE,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAE1C,SAAS,8BAA8B,CACrC,KAA0C;IAE1C,MAAM,EAAE,SAAS,EAAE,6BAA6B,EAAE,GAChD,wBAAwB,EAAE,CAAA;IAC5B,OAAO,CACL,oBAAC,MAAM,IACL,SAAS,EAAC,8BAA8B,EACxC,SAAS,EAAE,oBAAC,YAAY,eAAoB,EAC5C,OAAO,EAAE,SAAS,EAClB,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,CAAC,CAAC,6BAA6B;QACzC,kDAAkD;QAClD,QAAQ,EAAE,oDAAY,KAClB,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED;;;;GAIG;AACH,eAAe,KAAK,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Button } from '@mui/material'\nimport useFormStoreTableContext from './useFormStoreTableContext'\nimport MaterialIcon from '../MaterialIcon'\n\nfunction OneBlinkFormStoreRefreshButton(\n  props: React.ComponentProps<typeof Button>,\n) {\n  const { onRefresh, submissionIdValidationMessage } =\n    useFormStoreTableContext()\n  return (\n    <Button\n      className=\"ob-form-store-refresh-button\"\n      startIcon={<MaterialIcon>sync</MaterialIcon>}\n      onClick={onRefresh}\n      color=\"primary\"\n      variant=\"contained\"\n      disabled={!!submissionIdValidationMessage}\n      // eslint-disable-next-line react/no-children-prop\n      children={<>Refresh</>}\n      {...props}\n    />\n  )\n}\n\n/**\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo(OneBlinkFormStoreRefreshButton)\n"]}
+{"version":3,"file":"OneBlinkFormStoreRefreshButton.js","sourceRoot":"","sources":["../../../src/components/formStore/OneBlinkFormStoreRefreshButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,wBAAwB,MAAM,4BAA4B,CAAA;AACjE,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAE1C,SAAS,8BAA8B,CACrC,KAA0C;IAE1C,MAAM,EAAE,SAAS,EAAE,6BAA6B,EAAE,GAChD,wBAAwB,EAAE,CAAA;IAC5B,OAAO,CACL,KAAC,MAAM,IACL,SAAS,EAAC,8BAA8B,EACxC,SAAS,EAAE,KAAC,YAAY,uBAAoB,EAC5C,OAAO,EAAE,SAAS,EAClB,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,CAAC,CAAC,6BAA6B,EAEzC,QAAQ,EAAE,wCAAY,KAClB,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED;;;;GAIG;AACH,eAAe,KAAK,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Button } from '@mui/material'\nimport useFormStoreTableContext from './useFormStoreTableContext'\nimport MaterialIcon from '../MaterialIcon'\n\nfunction OneBlinkFormStoreRefreshButton(\n  props: React.ComponentProps<typeof Button>,\n) {\n  const { onRefresh, submissionIdValidationMessage } =\n    useFormStoreTableContext()\n  return (\n    <Button\n      className=\"ob-form-store-refresh-button\"\n      startIcon={<MaterialIcon>sync</MaterialIcon>}\n      onClick={onRefresh}\n      color=\"primary\"\n      variant=\"contained\"\n      disabled={!!submissionIdValidationMessage}\n       \n      children={<>Refresh</>}\n      {...props}\n    />\n  )\n}\n\n/**\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo(OneBlinkFormStoreRefreshButton)\n"]}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare function OneBlinkFormStoreTable(): React.JSX.Element | null;
+declare function OneBlinkFormStoreTable(): import("react/jsx-runtime").JSX.Element | null;
 /**
  * @returns
  * @group Components

package/dist/components/formStore/OneBlinkFormStoreTable.js

@@ -1,6 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled, Tooltip } from '@mui/material';
+import { flexRender } from '@tanstack/react-table';
 import { IsHoveringProvider } from '../../hooks/useIsHovering';
 import HeaderCellMoreButton from './table/HeaderCellMoreButton';
 import useFormStoreTableContext from './useFormStoreTableContext';
@@ -77,6 +79,7 @@ const Table = styled('div')(({ theme }) => ({
             top: theme.spacing(0.5),
             bottom: theme.spacing(0.5),
             transform: `translateX(calc(${theme.spacing(0.5)} + 1px))`,
+            cursor: 'col-resize',
             zIndex: 1,
             // prevents from scrolling while dragging on touch devices
             touchAction: 'none',
@@ -90,106 +93,137 @@ const Table = styled('div')(({ theme }) => ({
         },
     },
 }));
+const HeaderRow = styled('div')(() => ({
+    display: 'flex',
+}));
+const CellRow = styled('div')(() => ({
+    display: 'flex',
+}));
 function OneBlinkFormStoreTable() {
-    const { getTableProps, getTableBodyProps, headerGroups: [parentHeaderGroup], rows, prepareRow, onChangeParameters, } = useFormStoreTableContext();
+    const { getHeaderGroups, getCoreRowModel, getFlatHeaders, getState, onChangeParameters, } = useFormStoreTableContext();
+    const [parentHeaderGroup] = getHeaderGroups();
+    const rows = getCoreRowModel().rows;
+    const columnSizingInfo = getState().columnSizingInfo;
+    const columnSizing = getState().columnSizing;
+    /**
+     * Pinched from
+     * https://tanstack.com/table/latest/docs/framework/react/examples/column-resizing-performant
+     * Instead of calling `column.getSize()` on every render for every header and
+     * especially every data cell (very expensive), we will calculate all column
+     * sizes at once at the root table level in a useMemo and pass the column
+     * sizes down as CSS variables to the <table> element.
+     */
+    const columnSizeVars = React.useMemo(() => {
+        // we want the memo to recalculate if these change, dropping them here so the linter doesn't complain about unused dependencies
+        /* eslint-disable @typescript-eslint/no-unused-expressions */
+        columnSizingInfo;
+        columnSizing;
+        /* eslint-enable @typescript-eslint/no-unused-expressions */
+        const headers = getFlatHeaders();
+        const colSizes = {};
+        for (const header of headers) {
+            colSizes[`--header-${header.id}-size`] = header.getSize();
+            colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
+        }
+        return colSizes;
+    }, [getFlatHeaders, columnSizingInfo, columnSizing]);
     if (!parentHeaderGroup) {
         return null;
     }
-    let alternateBackground = false;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Table, { ...getTableProps(), className: "ob-form-store-table" },
-            React.createElement("div", { className: "thead" },
-                React.createElement("div", { ...parentHeaderGroup.getHeaderGroupProps(), className: "tr ob-form-store-table-header-row" }, 
-                // Loop over the headers in each row
-                parentHeaderGroup.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, PopperProps: {
-                            sx: {
-                                zIndex: 'drawer',
-                            },
-                        } },
-                        React.createElement("div", { className: clsx('th tc ob-form-store-table-header-cell', {
-                                'is-clickable': !!sortingProperty,
-                            }), onClick: sortingProperty
-                                ? () => {
-                                    onChangeParameters((currentParameters) => {
-                                        switch (sortingDirection) {
-                                            case 'ascending': {
-                                                return {
-                                                    ...currentParameters,
-                                                    sorting: [
-                                                        {
-                                                            property: sortingProperty,
-                                                            direction: 'descending',
-                                                        },
-                                                    ],
-                                                };
-                                            }
-                                            case 'descending': {
-                                                return {
-                                                    ...currentParameters,
-                                                    sorting: undefined,
-                                                };
-                                            }
-                                            default: {
-                                                return {
-                                                    ...currentParameters,
-                                                    sorting: [
-                                                        {
-                                                            property: sortingProperty,
-                                                            direction: 'ascending',
-                                                        },
-                                                    ],
-                                                };
-                                            }
+    const rowBackground = { alternate: false };
+    return (_jsx(_Fragment, { children: _jsxs(Table, { className: "ob-form-store-table", style: { ...columnSizeVars }, children: [_jsx("div", { className: "thead", children: _jsx(HeaderRow, { className: "tr ob-form-store-table-header-row", children: 
+                        // Loop over the headers in each row
+                        parentHeaderGroup.headers.map((header) => {
+                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+                            const sortingProperty = (_b = (_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.sorting) === null || _b === void 0 ? void 0 : _b.property;
+                            const sortingDirection = header.column.getIsSorted();
+                            if (!header.column.getIsVisible()) {
+                                return null;
+                            }
+                            return (_jsx(Tooltip, { title: ((_d = (_c = header.column.columnDef) === null || _c === void 0 ? void 0 : _c.meta) === null || _d === void 0 ? void 0 : _d.tooltip) || '', arrow: true, slotProps: {
+                                    popper: {
+                                        sx: {
+                                            zIndex: 'drawer',
+                                        },
+                                    },
+                                }, children: _jsx("div", { className: clsx('th tc ob-form-store-table-header-cell', {
+                                        'is-clickable': !!sortingProperty,
+                                    }), onClick: sortingProperty
+                                        ? () => {
+                                            onChangeParameters((currentParameters) => {
+                                                var _a, _b;
+                                                const sortingMeta = (_b = (_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.sorting) === null || _b === void 0 ? void 0 : _b.property;
+                                                if (!sortingMeta) {
+                                                    return currentParameters;
+                                                }
+                                                switch (sortingDirection) {
+                                                    case 'asc': {
+                                                        return {
+                                                            ...currentParameters,
+                                                            sorting: [
+                                                                {
+                                                                    property: sortingMeta,
+                                                                    direction: 'descending',
+                                                                },
+                                                            ],
+                                                        };
+                                                    }
+                                                    case 'desc': {
+                                                        return {
+                                                            ...currentParameters,
+                                                            sorting: undefined,
+                                                        };
+                                                    }
+                                                    default: {
+                                                        return {
+                                                            ...currentParameters,
+                                                            sorting: [
+                                                                {
+                                                                    property: sortingMeta,
+                                                                    direction: 'ascending',
+                                                                },
+                                                            ],
+                                                        };
+                                                    }
+                                                }
+                                            }, false);
                                         }
-                                    }, 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", sx: sortingDirection === 'ascending'
-                                            ? {
-                                                transform: 'rotate(180deg)',
-                                            }
-                                            : undefined, className: "th-icon" }, "arrow_downward")),
-                                    ((_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(MaterialIcon, { fontSize: "small", color: "error", className: "th-icon" }, "warning"))) : ((_e = headerGroup.filter) === null || _e === void 0 ? void 0 : _e.value) ? (React.createElement(MaterialIcon, { fontSize: "small", color: "primary", className: "th-icon" }, "filter_list")) : 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();
-                                    } })))));
-                }))),
-            React.createElement("div", { ...getTableBodyProps(), className: "tbody" }, 
-            // Loop over the table rows
-            rows.map((row, index) => {
-                var _a;
-                if (((_a = rows[index - 1]) === null || _a === void 0 ? void 0 : _a.original.submissionId) !==
-                    row.original.submissionId) {
-                    alternateBackground = !alternateBackground;
-                }
-                // Prepare the row for display
-                prepareRow(row);
-                return (
-                // Apply the row props
-                React.createElement("div", { ...row.getRowProps(), key: row.id, className: clsx('tr ob-form-store-table-row', {
-                        'ob-form-store-table-row__alternate': alternateBackground,
-                    }) }, 
-                // Loop over the rows cells
-                row.cells.map((cell) => {
-                    // Apply the cell props
-                    return (React.createElement(IsHoveringProvider, { ...cell.getCellProps(), key: cell.column.id, className: clsx('td tc ob-form-store-table-row-cell', {
-                            'is-resizing': cell.column.isResizing,
-                        }) }, 
-                    // Render the cell contents
-                    cell.render('Cell')));
-                })));
-            })))));
+                                        : undefined, style: {
+                                        width: `calc(var(--header-${header === null || header === void 0 ? void 0 : header.id}-size) * 1px)`,
+                                    }, children: _jsxs(IsHoveringProvider, { className: "th-content", children: [_jsxs("div", { className: "th-label", children: [_jsx("span", { children: typeof ((_e = header.column.columnDef) === null || _e === void 0 ? void 0 : _e.header) === 'string'
+                                                            ? (_f = header.column.columnDef) === null || _f === void 0 ? void 0 : _f.header
+                                                            : '' }), sortingDirection && (_jsx(SortingIcon, { fontSize: "small", color: "primary", sx: sortingDirection === 'asc'
+                                                            ? {
+                                                                transform: 'rotate(180deg)',
+                                                            }
+                                                            : undefined, className: "th-icon", children: "arrow_downward" })), ((_h = (_g = header.column.columnDef.meta) === null || _g === void 0 ? void 0 : _g.filter) === null || _h === void 0 ? void 0 : _h.isInvalid) ? (_jsx(Tooltip, { title: ((_k = (_j = header.column.columnDef.meta) === null || _j === void 0 ? void 0 : _j.filter) === null || _k === void 0 ? void 0 : _k.validationMessage) || '', children: _jsx(MaterialIcon, { fontSize: "small", color: "error", className: "th-icon", children: "warning" }) })) : ((_m = (_l = header.column.columnDef.meta) === null || _l === void 0 ? void 0 : _l.filter) === null || _m === void 0 ? void 0 : _m.value) ? (_jsx(MaterialIcon, { fontSize: "small", color: "primary", className: "th-icon", children: "filter_list" })) : null] }), _jsx(HeaderCellMoreButton, { header: header, onHide: () => header.column.toggleVisibility() }), _jsx("div", { className: clsx('resizer', {
+                                                    'is-resizing': header.column.getIsResizing(),
+                                                }), onClick: (event) => {
+                                                    event.stopPropagation();
+                                                }, onDoubleClick: () => header.column.resetSize(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })] }) }) }, header.id));
+                        }) }) }), _jsx("div", { className: "tbody", children: 
+                    // Loop over the table rows
+                    rows.map((row, index) => {
+                        var _a;
+                        if (((_a = rows[index - 1]) === null || _a === void 0 ? void 0 : _a.original.submissionId) !==
+                            row.original.submissionId) {
+                            rowBackground.alternate = !rowBackground.alternate;
+                        }
+                        return (
+                        // Apply the row props
+                        _jsx(CellRow, { className: clsx('tr ob-form-store-table-row', {
+                                'ob-form-store-table-row__alternate': rowBackground.alternate,
+                            }), children: 
+                            // Loop over the rows cells
+                            row.getVisibleCells().map((cell) => {
+                                // Apply the cell props
+                                return (_jsx(IsHoveringProvider, { className: clsx('td tc ob-form-store-table-row-cell', {
+                                        'is-resizing': cell.column.getIsResizing(),
+                                    }), style: { width: `calc(var(--col-${cell.column.id}-size) * 1px)` }, children: 
+                                    // Render the cell contents
+                                    flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.column.id));
+                            }) }, row.id));
+                    }) })] }) }));
 }
 /**
  * @returns