@oneblink/apps-react 0.6.2 → 1.0.0-beta.1

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { userService } from '@oneblink/sdk-core';
+import { Chip, Avatar } from '@mui/material';
+import { AccountCircle, VpnKey as KeyIcon, Help as HelpIcon, } from '@mui/icons-material';
+import TableCellCopyButton from './TableCellCopyButton';
+function ActionedByTableCell({ userProfile, developerKey, ...rest }) {
+    const chipProps = useActionedByChipProps({
+        userProfile,
+        developerKey,
+        ...rest,
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Chip, { ...chipProps, ...rest }),
+        React.createElement(TableCellCopyButton, { text: chipProps.label })));
+}
+export default React.memo(ActionedByTableCell);
+function useActionedByChipProps({ userProfile, developerKey, }) {
+    return React.useMemo(() => {
+        if (userProfile) {
+            const emptyChipProps = {
+                label: '',
+            };
+            if (userProfile.picture) {
+                emptyChipProps.avatar = (React.createElement(Avatar, { alt: userProfile.fullName, src: userProfile.picture }));
+            }
+            else {
+                emptyChipProps.icon = React.createElement(AccountCircle, null);
+            }
+            emptyChipProps.label = userService.getUserFriendlyName(userProfile);
+            return emptyChipProps;
+        }
+        if (developerKey) {
+            return {
+                icon: React.createElement(KeyIcon, null),
+                label: developerKey.name,
+            };
+        }
+        return {
+            icon: React.createElement(HelpIcon, null),
+            label: 'Anonymous',
+        };
+    }, [developerKey, userProfile]);
+}
+//# sourceMappingURL=ActionedByTableCell.js.map

package/dist/components/formStore/table/ActionedByTableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionedByTableCell.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/ActionedByTableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,EACL,aAAa,EACb,MAAM,IAAI,OAAO,EACjB,IAAI,IAAI,QAAQ,GACjB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AAEvD,SAAS,mBAAmB,CAAC,EAC3B,WAAW,EACX,YAAY,EACZ,GAAG,IAAI,EAIR;IACC,MAAM,SAAS,GAAG,sBAAsB,CAAC;QACvC,WAAW;QACX,YAAY;QACZ,GAAG,IAAI;KACR,CAAC,CAAA;IAEF,OAAO,CACL;QACE,oBAAC,IAAI,OAAK,SAAS,KAAM,IAAI,GAAI;QACjC,oBAAC,mBAAmB,IAAC,IAAI,EAAE,SAAS,CAAC,KAAK,GAAI,CAC7C,CACJ,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAA;AAE9C,SAAS,sBAAsB,CAAC,EAC9B,WAAW,EACX,YAAY,GAIb;IAKC,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxB,IAAI,WAAW,EAAE;YACf,MAAM,cAAc,GAIhB;gBACF,KAAK,EAAE,EAAE;aACV,CAAA;YAED,IAAI,WAAW,CAAC,OAAO,EAAE;gBACvB,cAAc,CAAC,MAAM,GAAG,CACtB,oBAAC,MAAM,IAAC,GAAG,EAAE,WAAW,CAAC,QAAQ,EAAE,GAAG,EAAE,WAAW,CAAC,OAAO,GAAI,CAChE,CAAA;aACF;iBAAM;gBACL,cAAc,CAAC,IAAI,GAAG,oBAAC,aAAa,OAAG,CAAA;aACxC;YAED,cAAc,CAAC,KAAK,GAAG,WAAW,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAA;YACnE,OAAO,cAAc,CAAA;SACtB;QAED,IAAI,YAAY,EAAE;YAChB,OAAO;gBACL,IAAI,EAAE,oBAAC,OAAO,OAAG;gBACjB,KAAK,EAAE,YAAY,CAAC,IAAI;aACzB,CAAA;SACF;QAED,OAAO;YACL,IAAI,EAAE,oBAAC,QAAQ,OAAG;YAClB,KAAK,EAAE,WAAW;SACnB,CAAA;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAA;AACjC,CAAC","sourcesContent":["import * as React from 'react'\nimport { userService } from '@oneblink/sdk-core'\nimport { UserProfile } from '@oneblink/types/typescript/misc'\nimport { Chip, Avatar } from '@mui/material'\nimport {\n  AccountCircle,\n  VpnKey as KeyIcon,\n  Help as HelpIcon,\n} from '@mui/icons-material'\nimport TableCellCopyButton from './TableCellCopyButton'\n\nfunction ActionedByTableCell({\n  userProfile,\n  developerKey,\n  ...rest\n}: React.ComponentProps<typeof Chip> & {\n  userProfile?: UserProfile\n  developerKey?: { name: string }\n}) {\n  const chipProps = useActionedByChipProps({\n    userProfile,\n    developerKey,\n    ...rest,\n  })\n\n  return (\n    <>\n      <Chip {...chipProps} {...rest} />\n      <TableCellCopyButton text={chipProps.label} />\n    </>\n  )\n}\n\nexport default React.memo(ActionedByTableCell)\n\nfunction useActionedByChipProps({\n  userProfile,\n  developerKey,\n}: React.ComponentProps<typeof Chip> & {\n  userProfile?: UserProfile\n  developerKey?: { name: string }\n}): {\n  label: string\n  icon?: React.ComponentProps<typeof Chip>['icon']\n  avatar?: React.ComponentProps<typeof Chip>['avatar']\n} {\n  return React.useMemo(() => {\n    if (userProfile) {\n      const emptyChipProps: {\n        label: string\n        icon?: React.ComponentProps<typeof Chip>['icon']\n        avatar?: React.ComponentProps<typeof Chip>['avatar']\n      } = {\n        label: '',\n      }\n\n      if (userProfile.picture) {\n        emptyChipProps.avatar = (\n          <Avatar alt={userProfile.fullName} src={userProfile.picture} />\n        )\n      } else {\n        emptyChipProps.icon = <AccountCircle />\n      }\n\n      emptyChipProps.label = userService.getUserFriendlyName(userProfile)\n      return emptyChipProps\n    }\n\n    if (developerKey) {\n      return {\n        icon: <KeyIcon />,\n        label: developerKey.name,\n      }\n    }\n\n    return {\n      icon: <HelpIcon />,\n      label: 'Anonymous',\n    }\n  }, [developerKey, userProfile])\n}\n"]}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { FormStoreRecord } from '@oneblink/types/typescript/submissions';
+import { HeaderGroup } from 'react-table';
+declare type Props = {
+    filter: NonNullable<HeaderGroup<FormStoreRecord>['filter']>;
+};
+declare function ColumnFilters({ filter }: Props): JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof ColumnFilters>;
+export default _default;

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

@@ -0,0 +1,180 @@
+import * as React from 'react';
+import { Checkbox, FormControl, FormControlLabel, Grid, ListItemText, MenuItem, Radio, RadioGroup, TextField, } from '@mui/material';
+import V4CompatibleDateTimePicker from '../../pickers/V4CompatibleDateTimePicker';
+import V4CompatibleDatePicker from '../../pickers/V4CompatibleDatePicker';
+import { styled } from '@mui/material/styles';
+import { format } from 'date-fns';
+import { localisationService } from '@oneblink/apps';
+const StyledTextField = styled(TextField)(() => ({
+    width: '350px',
+}));
+const shortDateFormat = localisationService.getDateFnsFormats().shortDate;
+function ColumnFilters({ filter }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
+    switch (filter.type) {
+        case 'SUBMISSION_ID': {
+            return (React.createElement(StyledTextField, { autoFocus: true, variant: "outlined", margin: "dense", size: "small", label: "Filter", type: "text", fullWidth: true, value: ((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$eq) || '', onChange: (e) => {
+                    filter.onChange(e.target.value
+                        ? {
+                            $eq: e.target.value,
+                        }
+                        : undefined, true);
+                } }));
+        }
+        case 'TEXT': {
+            return (React.createElement(StyledTextField, { autoFocus: true, variant: "outlined", margin: "dense", size: "small", label: "Filter", type: "text", fullWidth: true, value: ((_b = filter.value) === null || _b === void 0 ? void 0 : _b.$regex) || '', onChange: (e) => {
+                    filter.onChange(e.target.value
+                        ? {
+                            $regex: e.target.value,
+                            // hard code case in-sensitive and multi-line searching
+                            $options: 'im',
+                        }
+                        : undefined, true);
+                } }));
+        }
+        case 'NUMBER': {
+            return (React.createElement(Grid, { container: true, spacing: 1 },
+                React.createElement(Grid, { item: true, xs: 6 },
+                    React.createElement(TextField, { autoFocus: true, variant: "outlined", margin: "dense", size: "small", label: "More Than Or Equal To", type: "number", fullWidth: true, value: ((_d = (_c = filter.value) === null || _c === void 0 ? void 0 : _c.$gte) === null || _d === void 0 ? void 0 : _d.toString()) || '', onChange: (e) => {
+                            var _a;
+                            const newValue = e.target.value
+                                ? parseInt(e.target.value)
+                                : undefined;
+                            filter.onChange(typeof ((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$lte) === 'number' ||
+                                newValue !== undefined
+                                ? {
+                                    ...filter.value,
+                                    $gte: newValue,
+                                }
+                                : undefined, true);
+                        } })),
+                React.createElement(Grid, { item: true, xs: 6 },
+                    React.createElement(TextField, { variant: "outlined", margin: "dense", size: "small", label: "Less Than Or Equal To", type: "number", fullWidth: true, value: ((_f = (_e = filter.value) === null || _e === void 0 ? void 0 : _e.$lte) === null || _f === void 0 ? void 0 : _f.toString()) || '', onChange: (e) => {
+                            var _a;
+                            const newValue = e.target.value
+                                ? parseInt(e.target.value)
+                                : undefined;
+                            filter.onChange(typeof ((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$gte) === 'number' ||
+                                newValue !== undefined
+                                ? {
+                                    ...filter.value,
+                                    $lte: newValue,
+                                }
+                                : undefined, true);
+                        } }))));
+        }
+        case 'DATE': {
+            return (React.createElement(Grid, { container: true, spacing: 1 },
+                React.createElement(Grid, { item: true, xs: 6 },
+                    React.createElement(V4CompatibleDatePicker, { label: "After", showTodayButton: true, clearable: true, margin: "dense", size: "small", inputVariant: "outlined", maxDate: (_g = filter.value) === null || _g === void 0 ? void 0 : _g.$lte, maxDateMessage: ((_h = filter.value) === null || _h === void 0 ? void 0 : _h.$lte) &&
+                            `Must be before "${format(new Date((_j = filter.value) === null || _j === void 0 ? void 0 : _j.$lte), shortDateFormat)}"`, value: ((_k = filter.value) === null || _k === void 0 ? void 0 : _k.$gte) || null, onChange: (newDate) => {
+                            var _a;
+                            const newValue = newDate
+                                ? format(newDate, 'yyyy-MM-dd')
+                                : undefined;
+                            filter.onChange(((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$lte) || newValue !== undefined
+                                ? {
+                                    ...filter.value,
+                                    $gte: newValue,
+                                }
+                                : undefined, false);
+                        }, endIconButton: true, iconButtonEdge: "end" })),
+                React.createElement(Grid, { item: true, xs: 6 },
+                    React.createElement(V4CompatibleDatePicker, { label: "Before", showTodayButton: true, clearable: true, margin: "dense", size: "small", inputVariant: "outlined", minDate: (_l = filter.value) === null || _l === void 0 ? void 0 : _l.$gte, minDateMessage: ((_m = filter.value) === null || _m === void 0 ? void 0 : _m.$lte) &&
+                            `Must be after "${format(new Date((_o = filter.value) === null || _o === void 0 ? void 0 : _o.$lte), shortDateFormat)}"`, value: ((_p = filter.value) === null || _p === void 0 ? void 0 : _p.$lte) || null, onChange: (newDate) => {
+                            var _a;
+                            const newValue = newDate
+                                ? format(newDate, 'yyyy-MM-dd')
+                                : undefined;
+                            filter.onChange(((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$gte) || newValue !== undefined
+                                ? {
+                                    ...filter.value,
+                                    $lte: newValue,
+                                }
+                                : undefined, false);
+                        }, endIconButton: true, iconButtonEdge: "end" }))));
+        }
+        case 'DATETIME': {
+            return (React.createElement(Grid, { container: true, spacing: 1 },
+                React.createElement(Grid, { item: true, xs: 6 },
+                    React.createElement(V4CompatibleDateTimePicker, { label: "After", showTodayButton: true, clearable: true, margin: "dense", size: "small", inputVariant: "outlined", maxDate: (_q = filter.value) === null || _q === void 0 ? void 0 : _q.$lte, maxDateMessage: ((_r = filter.value) === null || _r === void 0 ? void 0 : _r.$lte) &&
+                            `Must be before "${format(new Date((_s = filter.value) === null || _s === void 0 ? void 0 : _s.$lte), shortDateFormat)}"`, value: ((_t = filter.value) === null || _t === void 0 ? void 0 : _t.$gte) || null, onChange: (momentDate) => {
+                            var _a;
+                            const newValue = momentDate === null || momentDate === void 0 ? void 0 : momentDate.toISOString();
+                            filter.onChange(((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$lte) || newValue !== undefined
+                                ? {
+                                    ...filter.value,
+                                    $gte: newValue,
+                                }
+                                : undefined, false);
+                        }, endIconButton: true, iconButtonEdge: "end" })),
+                React.createElement(Grid, { item: true, xs: 6 },
+                    React.createElement(V4CompatibleDateTimePicker, { label: "Before", showTodayButton: true, clearable: true, margin: "dense", size: "small", inputVariant: "outlined", minDate: (_u = filter.value) === null || _u === void 0 ? void 0 : _u.$gte, minDateMessage: ((_v = filter.value) === null || _v === void 0 ? void 0 : _v.$lte) &&
+                            `Must be after "${format(new Date((_w = filter.value) === null || _w === void 0 ? void 0 : _w.$lte), shortDateFormat)}"`, value: ((_x = filter.value) === null || _x === void 0 ? void 0 : _x.$lte) || null, onChange: (momentDate) => {
+                            var _a;
+                            const newValue = momentDate === null || momentDate === void 0 ? void 0 : momentDate.toISOString();
+                            filter.onChange(((_a = filter.value) === null || _a === void 0 ? void 0 : _a.$gte) || newValue !== undefined
+                                ? {
+                                    ...filter.value,
+                                    $lte: newValue,
+                                }
+                                : undefined, false);
+                        }, endIconButton: true, iconButtonEdge: "end" }))));
+        }
+        case 'BOOLEAN': {
+            return (React.createElement(FormControl, { component: "fieldset" },
+                React.createElement(RadioGroup, { "aria-label": "gender", name: "gender1", value: ((_z = (_y = filter.value) === null || _y === void 0 ? void 0 : _y.$eq) === null || _z === void 0 ? void 0 : _z.toString()) || 'null', onChange: (e) => {
+                        filter.onChange({
+                            $eq: e.target.value === 'true',
+                        }, false);
+                    } },
+                    React.createElement(FormControlLabel, { value: "true", control: React.createElement(Radio, null), label: "Yes" }),
+                    React.createElement(FormControlLabel, { value: "false", control: React.createElement(Radio, null), label: "No" }))));
+        }
+        case 'OPTIONS_SINGLE': {
+            return (React.createElement(OptionsTextField, { options: filter.options, value: (_0 = filter.value) === null || _0 === void 0 ? void 0 : _0.$in, onChange: (newValue) => {
+                    filter.onChange(newValue.length
+                        ? {
+                            $in: newValue,
+                        }
+                        : undefined, false);
+                } }));
+        }
+        case 'OPTIONS_MULTIPLE': {
+            return (React.createElement(OptionsTextField, { options: filter.options, value: (_2 = (_1 = filter.value) === null || _1 === void 0 ? void 0 : _1.$elemMatch) === null || _2 === void 0 ? void 0 : _2.$in, onChange: (newValue) => {
+                    filter.onChange(newValue.length
+                        ? {
+                            $elemMatch: {
+                                $in: newValue,
+                            },
+                        }
+                        : undefined, false);
+                } }));
+        }
+        default: {
+            return null;
+        }
+    }
+}
+export default React.memo(ColumnFilters);
+function OptionsTextField({ options, value, onChange, }) {
+    return (React.createElement(StyledTextField, { variant: "outlined", margin: "dense", size: "small", label: "Filter", select: true, SelectProps: {
+            multiple: true,
+            renderValue: (selectedIds) => {
+                return options
+                    .reduce((selectedLabels, option) => {
+                    if (selectedIds.includes(option.value)) {
+                        selectedLabels.push(option.label);
+                    }
+                    return selectedLabels;
+                }, [])
+                    .join(', ');
+            },
+        }, fullWidth: true, value: value || [], onChange: (e) => {
+            const newValue = e.target.value;
+            onChange(newValue);
+        } }, options.map((option) => (React.createElement(MenuItem, { value: option.value, key: option.value },
+        React.createElement(Checkbox, { checked: !!(value === null || value === void 0 ? void 0 : value.some((v) => v === option.value)) }),
+        React.createElement(ListItemText, null, option.label))))));
+}
+//# sourceMappingURL=ColumnFilters.js.map

package/dist/components/formStore/table/ColumnFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnFilters.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/ColumnFilters.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport { FormStoreRecord } from '@oneblink/types/typescript/submissions'\nimport { HeaderGroup } from 'react-table'\nimport {\n  Checkbox,\n  FormControl,\n  FormControlLabel,\n  Grid,\n  ListItemText,\n  MenuItem,\n  Radio,\n  RadioGroup,\n  TextField,\n} from '@mui/material'\nimport V4CompatibleDateTimePicker from '../../pickers/V4CompatibleDateTimePicker'\nimport V4CompatibleDatePicker from '../../pickers/V4CompatibleDatePicker'\nimport { styled } from '@mui/material/styles'\nimport { format } from 'date-fns'\nimport { localisationService } from '@oneblink/apps'\n\nconst StyledTextField = styled(TextField)(() => ({\n  width: '350px',\n}))\n\ntype Props = {\n  filter: NonNullable<HeaderGroup<FormStoreRecord>['filter']>\n}\n\nconst shortDateFormat = localisationService.getDateFnsFormats().shortDate\n\nfunction ColumnFilters({ filter }: Props) {\n  switch (filter.type) {\n    case 'SUBMISSION_ID': {\n      return (\n        <StyledTextField\n          autoFocus\n          variant=\"outlined\"\n          margin=\"dense\"\n          size=\"small\"\n          label=\"Filter\"\n          type=\"text\"\n          fullWidth\n          value={filter.value?.$eq || ''}\n          onChange={(e) => {\n            filter.onChange(\n              e.target.value\n                ? {\n                    $eq: e.target.value,\n                  }\n                : undefined,\n              true,\n            )\n          }}\n        />\n      )\n    }\n    case 'TEXT': {\n      return (\n        <StyledTextField\n          autoFocus\n          variant=\"outlined\"\n          margin=\"dense\"\n          size=\"small\"\n          label=\"Filter\"\n          type=\"text\"\n          fullWidth\n          value={filter.value?.$regex || ''}\n          onChange={(e) => {\n            filter.onChange(\n              e.target.value\n                ? {\n                    $regex: e.target.value,\n                    // hard code case in-sensitive and multi-line searching\n                    $options: 'im',\n                  }\n                : undefined,\n              true,\n            )\n          }}\n        />\n      )\n    }\n    case 'NUMBER': {\n      return (\n        <Grid container spacing={1}>\n          <Grid item xs={6}>\n            <TextField\n              autoFocus\n              variant=\"outlined\"\n              margin=\"dense\"\n              size=\"small\"\n              label=\"More Than Or Equal To\"\n              type=\"number\"\n              fullWidth\n              value={filter.value?.$gte?.toString() || ''}\n              onChange={(e) => {\n                const newValue = e.target.value\n                  ? parseInt(e.target.value)\n                  : undefined\n                filter.onChange(\n                  typeof filter.value?.$lte === 'number' ||\n                    newValue !== undefined\n                    ? {\n                        ...filter.value,\n                        $gte: newValue,\n                      }\n                    : undefined,\n                  true,\n                )\n              }}\n            />\n          </Grid>\n          <Grid item xs={6}>\n            <TextField\n              variant=\"outlined\"\n              margin=\"dense\"\n              size=\"small\"\n              label=\"Less Than Or Equal To\"\n              type=\"number\"\n              fullWidth\n              value={filter.value?.$lte?.toString() || ''}\n              onChange={(e) => {\n                const newValue = e.target.value\n                  ? parseInt(e.target.value)\n                  : undefined\n                filter.onChange(\n                  typeof filter.value?.$gte === 'number' ||\n                    newValue !== undefined\n                    ? {\n                        ...filter.value,\n                        $lte: newValue,\n                      }\n                    : undefined,\n                  true,\n                )\n              }}\n            />\n          </Grid>\n        </Grid>\n      )\n    }\n    case 'DATE': {\n      return (\n        <Grid container spacing={1}>\n          <Grid item xs={6}>\n            <V4CompatibleDatePicker\n              label=\"After\"\n              showTodayButton\n              clearable\n              margin=\"dense\"\n              size=\"small\"\n              inputVariant=\"outlined\"\n              maxDate={filter.value?.$lte}\n              maxDateMessage={\n                filter.value?.$lte &&\n                `Must be before \"${format(\n                  new Date(filter.value?.$lte),\n                  shortDateFormat,\n                )}\"`\n              }\n              value={filter.value?.$gte || null}\n              onChange={(newDate) => {\n                const newValue = newDate\n                  ? format(newDate, 'yyyy-MM-dd')\n                  : undefined\n                filter.onChange(\n                  filter.value?.$lte || newValue !== undefined\n                    ? {\n                        ...filter.value,\n                        $gte: newValue,\n                      }\n                    : undefined,\n                  false,\n                )\n              }}\n              endIconButton\n              iconButtonEdge=\"end\"\n            />\n          </Grid>\n          <Grid item xs={6}>\n            <V4CompatibleDatePicker\n              label=\"Before\"\n              showTodayButton\n              clearable\n              margin=\"dense\"\n              size=\"small\"\n              inputVariant=\"outlined\"\n              minDate={filter.value?.$gte}\n              minDateMessage={\n                filter.value?.$lte &&\n                `Must be after \"${format(\n                  new Date(filter.value?.$lte),\n                  shortDateFormat,\n                )}\"`\n              }\n              value={filter.value?.$lte || null}\n              onChange={(newDate) => {\n                const newValue = newDate\n                  ? format(newDate, 'yyyy-MM-dd')\n                  : undefined\n                filter.onChange(\n                  filter.value?.$gte || newValue !== undefined\n                    ? {\n                        ...filter.value,\n                        $lte: newValue,\n                      }\n                    : undefined,\n                  false,\n                )\n              }}\n              endIconButton\n              iconButtonEdge=\"end\"\n            />\n          </Grid>\n        </Grid>\n      )\n    }\n    case 'DATETIME': {\n      return (\n        <Grid container spacing={1}>\n          <Grid item xs={6}>\n            <V4CompatibleDateTimePicker\n              label=\"After\"\n              showTodayButton\n              clearable\n              margin=\"dense\"\n              size=\"small\"\n              inputVariant=\"outlined\"\n              maxDate={filter.value?.$lte}\n              maxDateMessage={\n                filter.value?.$lte &&\n                `Must be before \"${format(\n                  new Date(filter.value?.$lte),\n                  shortDateFormat,\n                )}\"`\n              }\n              value={filter.value?.$gte || null}\n              onChange={(momentDate) => {\n                const newValue = momentDate?.toISOString()\n                filter.onChange(\n                  filter.value?.$lte || newValue !== undefined\n                    ? {\n                        ...filter.value,\n                        $gte: newValue,\n                      }\n                    : undefined,\n                  false,\n                )\n              }}\n              endIconButton\n              iconButtonEdge=\"end\"\n            />\n          </Grid>\n          <Grid item xs={6}>\n            <V4CompatibleDateTimePicker\n              label=\"Before\"\n              showTodayButton\n              clearable\n              margin=\"dense\"\n              size=\"small\"\n              inputVariant=\"outlined\"\n              minDate={filter.value?.$gte}\n              minDateMessage={\n                filter.value?.$lte &&\n                `Must be after \"${format(\n                  new Date(filter.value?.$lte),\n                  shortDateFormat,\n                )}\"`\n              }\n              value={filter.value?.$lte || null}\n              onChange={(momentDate) => {\n                const newValue = momentDate?.toISOString()\n                filter.onChange(\n                  filter.value?.$gte || newValue !== undefined\n                    ? {\n                        ...filter.value,\n                        $lte: newValue,\n                      }\n                    : undefined,\n                  false,\n                )\n              }}\n              endIconButton\n              iconButtonEdge=\"end\"\n            />\n          </Grid>\n        </Grid>\n      )\n    }\n    case 'BOOLEAN': {\n      return (\n        <FormControl component=\"fieldset\">\n          <RadioGroup\n            aria-label=\"gender\"\n            name=\"gender1\"\n            value={filter.value?.$eq?.toString() || 'null'}\n            onChange={(e) => {\n              filter.onChange(\n                {\n                  $eq: e.target.value === 'true',\n                },\n                false,\n              )\n            }}\n          >\n            <FormControlLabel value=\"true\" control={<Radio />} label=\"Yes\" />\n            <FormControlLabel value=\"false\" control={<Radio />} label=\"No\" />\n          </RadioGroup>\n        </FormControl>\n      )\n    }\n    case 'OPTIONS_SINGLE': {\n      return (\n        <OptionsTextField\n          options={filter.options}\n          value={filter.value?.$in}\n          onChange={(newValue) => {\n            filter.onChange(\n              newValue.length\n                ? {\n                    $in: newValue,\n                  }\n                : undefined,\n              false,\n            )\n          }}\n        />\n      )\n    }\n    case 'OPTIONS_MULTIPLE': {\n      return (\n        <OptionsTextField\n          options={filter.options}\n          value={filter.value?.$elemMatch?.$in}\n          onChange={(newValue) => {\n            filter.onChange(\n              newValue.length\n                ? {\n                    $elemMatch: {\n                      $in: newValue,\n                    },\n                  }\n                : undefined,\n              false,\n            )\n          }}\n        />\n      )\n    }\n    default: {\n      return null\n    }\n  }\n}\n\nexport default React.memo(ColumnFilters)\n\nfunction OptionsTextField({\n  options,\n  value,\n  onChange,\n}: {\n  options: FormTypes.DynamicChoiceElementOption[]\n  value: string[] | undefined\n  onChange: (newValue: string[]) => void\n}) {\n  return (\n    <StyledTextField\n      variant=\"outlined\"\n      margin=\"dense\"\n      size=\"small\"\n      label=\"Filter\"\n      select\n      SelectProps={{\n        multiple: true,\n        renderValue: (selectedIds) => {\n          return options\n            .reduce<string[]>((selectedLabels, option) => {\n              if ((selectedIds as string[]).includes(option.value)) {\n                selectedLabels.push(option.label)\n              }\n              return selectedLabels\n            }, [])\n            .join(', ')\n        },\n      }}\n      fullWidth\n      value={value || []}\n      onChange={(e) => {\n        const newValue = e.target.value as unknown as string[]\n        onChange(newValue)\n      }}\n    >\n      {options.map((option) => (\n        <MenuItem value={option.value} key={option.value}>\n          <Checkbox checked={!!value?.some((v) => v === option.value)} />\n          <ListItemText>{option.label}</ListItemText>\n        </MenuItem>\n      ))}\n    </StyledTextField>\n  )\n}\n"]}

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { FormTypes, SubmissionTypes } from '@oneblink/types';
+declare type Props = {
+    formElement: FormTypes.FormElement;
+    submission: SubmissionTypes.S3SubmissionData['submission'] | undefined;
+    allowCopy: boolean;
+};
+declare function FormElementTableCell({ formElement, submission, allowCopy }: Props): JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof FormElementTableCell>;
+export default _default;

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

@@ -0,0 +1,195 @@
+import * as React from 'react';
+import { Link, Typography } from '@mui/material';
+import { localisationService } from '@oneblink/apps';
+import { abnService } from '@oneblink/sdk-core';
+import { FileChip, FilesElementDataTableCellContent, MultiSelectFormElementTableCellContent, getSelectedOptionLabel, } from '../display/ElementDisplay';
+import RepeatableSetCell from './RepeatableSetCell';
+import TableCellCopyButton from './TableCellCopyButton';
+import { format } from 'date-fns';
+const { shortDate: shortDateFormat, time: timeFormat, shortDateTime: shortDateTimeFormat, } = localisationService.getDateFnsFormats();
+function FormElementTableCell({ formElement, submission, allowCopy }) {
+    if (formElement.type === 'page' || formElement.type === 'section') {
+        return null;
+    }
+    const value = submission === null || submission === void 0 ? void 0 : submission[formElement.name];
+    if (value === undefined || value === null) {
+        return null;
+    }
+    switch (formElement.type) {
+        case 'repeatableSet': {
+            return React.createElement(RepeatableSetCell, { formElement: formElement, value: value });
+        }
+        case 'location': {
+            if (!value.latitude || !value.longitude) {
+                break;
+            }
+            const latLong = `${value.latitude},${value.longitude}`;
+            return (React.createElement(React.Fragment, null,
+                React.createElement("div", null,
+                    React.createElement(Typography, { variant: "inherit", component: "p" },
+                        React.createElement(Link, { target: "_blank", rel: "noopener noreferrer", href: `https://maps.google.com/?q=${latLong}` }, "View in Google Maps")),
+                    React.createElement(Typography, { variant: "inherit", component: "p", color: "textSecondary" },
+                        "Latitude: ",
+                        value.latitude),
+                    React.createElement(Typography, { variant: "inherit", component: "p", color: "textSecondary" },
+                        "Longitude: ",
+                        value.longitude)),
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: latLong })));
+        }
+        case 'camera':
+        case 'draw': {
+            return React.createElement(FileChip, { file: value });
+        }
+        case 'textarea': {
+            return (React.createElement(React.Fragment, null,
+                React.createElement("span", { style: {
+                        whiteSpace: 'pre-line',
+                    } }, value),
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: value })));
+        }
+        case 'date': {
+            const text = format(new Date(value), shortDateFormat);
+            return (React.createElement(React.Fragment, null,
+                text,
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: text })));
+        }
+        case 'time': {
+            const text = format(new Date(value), timeFormat);
+            return (React.createElement(React.Fragment, null,
+                text,
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: text })));
+        }
+        case 'datetime': {
+            const text = format(new Date(value), shortDateTimeFormat);
+            return (React.createElement(React.Fragment, null,
+                text,
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: text })));
+        }
+        case 'number': {
+            const text = localisationService.formatNumber(value);
+            return (React.createElement(React.Fragment, null,
+                text,
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: text })));
+        }
+        case 'radio':
+        case 'autocomplete':
+        case 'checkboxes':
+        case 'select': {
+            if (formElement.type === 'checkboxes' ||
+                (formElement.type === 'select' && formElement.multi)) {
+                if (!Array.isArray(value) || !value.length) {
+                    break;
+                }
+                const text = value
+                    .map((selection) => getSelectedOptionLabel(formElement, selection))
+                    .join(', ');
+                return (React.createElement(React.Fragment, null,
+                    React.createElement(MultiSelectFormElementTableCellContent, { value: value, formElement: formElement }),
+                    React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: text })));
+            }
+            else {
+                const text = getSelectedOptionLabel(formElement, value);
+                return (React.createElement(React.Fragment, null,
+                    text,
+                    React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: text })));
+            }
+        }
+        case 'email': {
+            return (React.createElement(React.Fragment, null,
+                React.createElement(Link, { target: "_blank", rel: "noopener noreferrer", href: `mailto:${value}` }, value),
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: value })));
+        }
+        case 'telephone': {
+            return (React.createElement(React.Fragment, null,
+                React.createElement(Link, { target: "_blank", rel: "noopener noreferrer", href: `tel:${value}` }, value),
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: value })));
+        }
+        case 'text':
+        case 'bsb':
+        case 'barcodeScanner': {
+            return (React.createElement(React.Fragment, null,
+                value,
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: value })));
+        }
+        case 'files': {
+            if (!Array.isArray(value) || !value.length) {
+                break;
+            }
+            return React.createElement(FilesElementDataTableCellContent, { value: value });
+        }
+        case 'calculation': {
+            if (formElement.displayAsCurrency) {
+                const text = localisationService.formatCurrency(value);
+                return (React.createElement(React.Fragment, null,
+                    text,
+                    React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: value })));
+            }
+            else {
+                const text = localisationService.formatNumber(value);
+                return (React.createElement(React.Fragment, null,
+                    text,
+                    React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: value })));
+            }
+        }
+        case 'civicaStreetName': {
+            return (React.createElement(React.Fragment, null,
+                value.formattedStreet,
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: value.formattedStreet })));
+        }
+        case 'civicaNameRecord': {
+            const text = [value === null || value === void 0 ? void 0 : value.title, value === null || value === void 0 ? void 0 : value.givenName1, value === null || value === void 0 ? void 0 : value.familyName]
+                .filter((t) => t)
+                .join(' ') || (value === null || value === void 0 ? void 0 : value.emailAddress);
+            return (React.createElement(React.Fragment, null,
+                text,
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: text })));
+        }
+        case 'geoscapeAddress': {
+            const fullAddress = value.addressDetails && value.addressDetails.formattedAddress ? (value.addressDetails.formattedAddress) : (React.createElement(React.Fragment, null,
+                "Geoscape Address ID: ",
+                React.createElement("i", null, value.addressId)));
+            return (React.createElement(React.Fragment, null,
+                fullAddress,
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: fullAddress })));
+        }
+        case 'pointAddress': {
+            const fullAddress = value.addressDetails && value.addressDetails.formattedAddress ? (value.addressDetails.formattedAddress) : (React.createElement(React.Fragment, null,
+                "NSW Point Address ID: ",
+                React.createElement("i", null, value.addressId)));
+            return (React.createElement(React.Fragment, null,
+                fullAddress,
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: fullAddress })));
+        }
+        case 'boolean': {
+            const text = value ? 'Yes' : 'No';
+            return (React.createElement(React.Fragment, null,
+                text,
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: text })));
+        }
+        case 'abn': {
+            const abnNumber = abnService.displayABNNumberFromABNRecord(value);
+            return (React.createElement(React.Fragment, null,
+                React.createElement(Link, { target: "_blank", rel: "noopener noreferrer", href: `https://www.abr.business.gov.au/ABN/View/${abnNumber}` },
+                    abnNumber,
+                    " |",
+                    ' ',
+                    React.createElement("i", null, abnService.displayBusinessNameFromABNRecord(value))),
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: abnNumber })));
+        }
+        case 'html':
+        case 'form':
+        case 'infoPage':
+        case 'captcha':
+        case 'image':
+        case 'heading':
+        case 'summary': {
+            break;
+        }
+        default: {
+            console.warn('Unsupported element type in Submission Data rendering', formElement);
+        }
+    }
+    return null;
+}
+export default React.memo(FormElementTableCell);
+//# sourceMappingURL=FormElementTableCell.js.map

package/dist/components/formStore/table/FormElementTableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormElementTableCell.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/FormElementTableCell.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { Link, Typography } from '@mui/material'\nimport { localisationService } from '@oneblink/apps'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport { abnService } from '@oneblink/sdk-core'\nimport {\n  FileChip,\n  FilesElementDataTableCellContent,\n  MultiSelectFormElementTableCellContent,\n  getSelectedOptionLabel,\n} from '../display/ElementDisplay'\nimport RepeatableSetCell from './RepeatableSetCell'\nimport TableCellCopyButton from './TableCellCopyButton'\nimport { format } from 'date-fns'\n\ntype Props = {\n  formElement: FormTypes.FormElement\n  submission: SubmissionTypes.S3SubmissionData['submission'] | undefined\n  allowCopy: boolean\n}\n\nconst {\n  shortDate: shortDateFormat,\n  time: timeFormat,\n  shortDateTime: shortDateTimeFormat,\n} = localisationService.getDateFnsFormats()\n\nfunction FormElementTableCell({ formElement, submission, allowCopy }: Props) {\n  if (formElement.type === 'page' || formElement.type === 'section') {\n    return null\n  }\n  const value = submission?.[formElement.name]\n  if (value === undefined || value === null) {\n    return null\n  }\n\n  switch (formElement.type) {\n    case 'repeatableSet': {\n      return <RepeatableSetCell formElement={formElement} value={value} />\n    }\n\n    case 'location': {\n      if (!value.latitude || !value.longitude) {\n        break\n      }\n\n      const latLong = `${value.latitude},${value.longitude}`\n      return (\n        <>\n          <div>\n            <Typography variant=\"inherit\" component=\"p\">\n              <Link\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                href={`https://maps.google.com/?q=${latLong}`}\n              >\n                View in Google Maps\n              </Link>\n            </Typography>\n            <Typography variant=\"inherit\" component=\"p\" color=\"textSecondary\">\n              Latitude: {value.latitude}\n            </Typography>\n            <Typography variant=\"inherit\" component=\"p\" color=\"textSecondary\">\n              Longitude: {value.longitude}\n            </Typography>\n          </div>\n          <TableCellCopyButton isHidden={!allowCopy} text={latLong} />\n        </>\n      )\n    }\n\n    case 'camera':\n    case 'draw': {\n      return <FileChip file={value} />\n    }\n\n    case 'textarea': {\n      return (\n        <>\n          <span\n            style={{\n              whiteSpace: 'pre-line',\n            }}\n          >\n            {value}\n          </span>\n          <TableCellCopyButton isHidden={!allowCopy} text={value} />\n        </>\n      )\n    }\n\n    case 'date': {\n      const text = format(new Date(value), shortDateFormat)\n      return (\n        <>\n          {text}\n          <TableCellCopyButton isHidden={!allowCopy} text={text} />\n        </>\n      )\n    }\n\n    case 'time': {\n      const text = format(new Date(value), timeFormat)\n      return (\n        <>\n          {text}\n          <TableCellCopyButton isHidden={!allowCopy} text={text} />\n        </>\n      )\n    }\n\n    case 'datetime': {\n      const text = format(new Date(value), shortDateTimeFormat)\n      return (\n        <>\n          {text}\n          <TableCellCopyButton isHidden={!allowCopy} text={text} />\n        </>\n      )\n    }\n\n    case 'number': {\n      const text = localisationService.formatNumber(value)\n      return (\n        <>\n          {text}\n          <TableCellCopyButton isHidden={!allowCopy} text={text} />\n        </>\n      )\n    }\n\n    case 'radio':\n    case 'autocomplete':\n    case 'checkboxes':\n    case 'select': {\n      if (\n        formElement.type === 'checkboxes' ||\n        (formElement.type === 'select' && formElement.multi)\n      ) {\n        if (!Array.isArray(value) || !value.length) {\n          break\n        }\n        const text = value\n          .map((selection) => getSelectedOptionLabel(formElement, selection))\n          .join(', ')\n        return (\n          <>\n            <MultiSelectFormElementTableCellContent\n              value={value}\n              formElement={formElement}\n            />\n            <TableCellCopyButton isHidden={!allowCopy} text={text} />\n          </>\n        )\n      } else {\n        const text = getSelectedOptionLabel(formElement, value)\n        return (\n          <>\n            {text}\n            <TableCellCopyButton isHidden={!allowCopy} text={text} />\n          </>\n        )\n      }\n    }\n\n    case 'email': {\n      return (\n        <>\n          <Link\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            href={`mailto:${value}`}\n          >\n            {value}\n          </Link>\n          <TableCellCopyButton isHidden={!allowCopy} text={value} />\n        </>\n      )\n    }\n    case 'telephone': {\n      return (\n        <>\n          <Link target=\"_blank\" rel=\"noopener noreferrer\" href={`tel:${value}`}>\n            {value}\n          </Link>\n          <TableCellCopyButton isHidden={!allowCopy} text={value} />\n        </>\n      )\n    }\n    case 'text':\n    case 'bsb':\n    case 'barcodeScanner': {\n      return (\n        <>\n          {value}\n          <TableCellCopyButton isHidden={!allowCopy} text={value} />\n        </>\n      )\n    }\n\n    case 'files': {\n      if (!Array.isArray(value) || !value.length) {\n        break\n      }\n      return <FilesElementDataTableCellContent value={value} />\n    }\n\n    case 'calculation': {\n      if (formElement.displayAsCurrency) {\n        const text = localisationService.formatCurrency(value)\n        return (\n          <>\n            {text}\n            <TableCellCopyButton isHidden={!allowCopy} text={value} />\n          </>\n        )\n      } else {\n        const text = localisationService.formatNumber(value)\n        return (\n          <>\n            {text}\n            <TableCellCopyButton isHidden={!allowCopy} text={value} />\n          </>\n        )\n      }\n    }\n\n    case 'civicaStreetName': {\n      return (\n        <>\n          {value.formattedStreet}\n          <TableCellCopyButton\n            isHidden={!allowCopy}\n            text={value.formattedStreet}\n          />\n        </>\n      )\n    }\n\n    case 'civicaNameRecord': {\n      const text =\n        [value?.title, value?.givenName1, value?.familyName]\n          .filter((t) => t)\n          .join(' ') || value?.emailAddress\n      return (\n        <>\n          {text}\n          <TableCellCopyButton isHidden={!allowCopy} text={text} />\n        </>\n      )\n    }\n\n    case 'geoscapeAddress': {\n      const fullAddress =\n        value.addressDetails && value.addressDetails.formattedAddress ? (\n          value.addressDetails.formattedAddress\n        ) : (\n          <>\n            Geoscape Address ID: <i>{value.addressId}</i>\n          </>\n        )\n      return (\n        <>\n          {fullAddress}\n          <TableCellCopyButton isHidden={!allowCopy} text={fullAddress} />\n        </>\n      )\n    }\n\n    case 'pointAddress': {\n      const fullAddress =\n        value.addressDetails && value.addressDetails.formattedAddress ? (\n          value.addressDetails.formattedAddress\n        ) : (\n          <>\n            NSW Point Address ID: <i>{value.addressId}</i>\n          </>\n        )\n      return (\n        <>\n          {fullAddress}\n          <TableCellCopyButton isHidden={!allowCopy} text={fullAddress} />\n        </>\n      )\n    }\n\n    case 'boolean': {\n      const text = value ? 'Yes' : 'No'\n      return (\n        <>\n          {text}\n          <TableCellCopyButton isHidden={!allowCopy} text={text} />\n        </>\n      )\n    }\n\n    case 'abn': {\n      const abnNumber = abnService.displayABNNumberFromABNRecord(value)\n      return (\n        <>\n          <Link\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            href={`https://www.abr.business.gov.au/ABN/View/${abnNumber}`}\n          >\n            {abnNumber} |{' '}\n            <i>{abnService.displayBusinessNameFromABNRecord(value)}</i>\n          </Link>\n          <TableCellCopyButton isHidden={!allowCopy} text={abnNumber} />\n        </>\n      )\n    }\n\n    case 'html':\n    case 'form':\n    case 'infoPage':\n    case 'captcha':\n    case 'image':\n    case 'heading':\n    case 'summary': {\n      break\n    }\n\n    default: {\n      console.warn(\n        'Unsupported element type in Submission Data rendering',\n        formElement,\n      )\n    }\n  }\n\n  return null\n}\n\nexport default React.memo(FormElementTableCell)\n"]}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { HeaderGroup } from 'react-table';
+import { FormStoreRecord } from '@oneblink/types/typescript/submissions';
+declare function HeaderCellMoreButton({ headerGroup, onHide, }: {
+    headerGroup: HeaderGroup<FormStoreRecord>;
+    onHide: () => void;
+}): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof HeaderCellMoreButton>;
+export default _default;

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Box, Button, Divider, Grid, IconButton, Popover, } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { FilterList as FilterListIcon, MoreVert as MoreVertIcon, VisibilityOff as VisibilityOffIcon, } from '@mui/icons-material';
+import { useIsHovering } from '../../../hooks/useIsHovering';
+import useNullableState from '../../../hooks/useNullableState';
+import ColumnFilters from './ColumnFilters';
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
+    margin: theme.spacing(-1, -1, -1, 1),
+}));
+const paperStyles = {
+    maxWidth: 500,
+};
+function HeaderCellMoreButton({ headerGroup, onHide, }) {
+    const isHovering = useIsHovering();
+    const [anchorEl, setAnchorEl, clearAnchorEl] = useNullableState(null);
+    return (React.createElement("span", null,
+        React.createElement(StyledIconButton, { color: "inherit", onClick: (event) => {
+                event.stopPropagation();
+                setAnchorEl(event.currentTarget);
+            } },
+            React.createElement(MoreVertIcon, { fontSize: "small", color: isHovering ? 'action' : 'disabled' })),
+        React.createElement(Popover, { open: !!anchorEl, anchorEl: anchorEl, onClose: (event) => {
+                event.stopPropagation();
+                clearAnchorEl();
+            }, anchorOrigin: {
+                vertical: 'bottom',
+                horizontal: 'right',
+            }, transformOrigin: {
+                vertical: 'top',
+                horizontal: 'right',
+            }, PaperProps: {
+                sx: paperStyles,
+            }, onClick: (event) => {
+                event.stopPropagation();
+            } },
+            headerGroup.filter && (React.createElement(React.Fragment, null,
+                React.createElement(Box, { padding: 2 },
+                    React.createElement(ColumnFilters, { filter: headerGroup.filter })),
+                React.createElement(Divider, null))),
+            React.createElement(Box, { paddingX: 2, paddingY: 1 },
+                React.createElement(Grid, { container: true, justifyContent: "flex-end", spacing: 1 },
+                    headerGroup.filter && (React.createElement(Grid, { item: true },
+                        React.createElement(Button, { variant: "outlined", disabled: headerGroup.filter.value === undefined, onClick: () => { var _a; return (_a = headerGroup.filter) === null || _a === void 0 ? void 0 : _a.onChange(undefined, false); }, size: "small", startIcon: React.createElement(FilterListIcon, null) }, "Clear"))),
+                    React.createElement(Grid, { item: true },
+                        React.createElement(Button, { variant: "outlined", onClick: onHide, size: "small", startIcon: React.createElement(VisibilityOffIcon, null) }, "Hide")))))));
+}
+export default React.memo(HeaderCellMoreButton);
+//# sourceMappingURL=HeaderCellMoreButton.js.map

package/dist/components/formStore/table/HeaderCellMoreButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderCellMoreButton.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/HeaderCellMoreButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { HeaderGroup } from 'react-table'\nimport {\n  Box,\n  Button,\n  Divider,\n  Grid,\n  IconButton,\n  Popover,\n  SxProps,\n} from '@mui/material'\nimport { styled } from '@mui/material/styles'\nimport {\n  FilterList as FilterListIcon,\n  MoreVert as MoreVertIcon,\n  VisibilityOff as VisibilityOffIcon,\n} from '@mui/icons-material'\nimport { useIsHovering } from '../../../hooks/useIsHovering'\nimport useNullableState from '../../../hooks/useNullableState'\nimport ColumnFilters from './ColumnFilters'\nimport { FormStoreRecord } from '@oneblink/types/typescript/submissions'\n\nconst StyledIconButton = styled(IconButton)(({ theme }) => ({\n  margin: theme.spacing(-1, -1, -1, 1),\n}))\n\nconst paperStyles: SxProps = {\n  maxWidth: 500,\n}\n\nfunction HeaderCellMoreButton({\n  headerGroup,\n  onHide,\n}: {\n  headerGroup: HeaderGroup<FormStoreRecord>\n  onHide: () => void\n}) {\n  const isHovering = useIsHovering()\n  const [anchorEl, setAnchorEl, clearAnchorEl] =\n    useNullableState<HTMLButtonElement>(null)\n\n  return (\n    <span>\n      <StyledIconButton\n        color=\"inherit\"\n        onClick={(event) => {\n          event.stopPropagation()\n          setAnchorEl(event.currentTarget)\n        }}\n      >\n        <MoreVertIcon\n          fontSize=\"small\"\n          color={isHovering ? 'action' : 'disabled'}\n        />\n      </StyledIconButton>\n      <Popover\n        open={!!anchorEl}\n        anchorEl={anchorEl}\n        onClose={(event: React.MouseEvent) => {\n          event.stopPropagation()\n          clearAnchorEl()\n        }}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'right',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n        PaperProps={{\n          sx: paperStyles,\n        }}\n        onClick={(event) => {\n          event.stopPropagation()\n        }}\n      >\n        {headerGroup.filter && (\n          <>\n            <Box padding={2}>\n              <ColumnFilters filter={headerGroup.filter} />\n            </Box>\n            <Divider />\n          </>\n        )}\n        <Box paddingX={2} paddingY={1}>\n          <Grid container justifyContent=\"flex-end\" spacing={1}>\n            {headerGroup.filter && (\n              <Grid item>\n                <Button\n                  variant=\"outlined\"\n                  disabled={headerGroup.filter.value === undefined}\n                  onClick={() => headerGroup.filter?.onChange(undefined, false)}\n                  size=\"small\"\n                  startIcon={<FilterListIcon />}\n                >\n                  Clear\n                </Button>\n              </Grid>\n            )}\n            <Grid item>\n              <Button\n                variant=\"outlined\"\n                onClick={onHide}\n                size=\"small\"\n                startIcon={<VisibilityOffIcon />}\n              >\n                Hide\n              </Button>\n            </Grid>\n          </Grid>\n        </Box>\n      </Popover>\n    </span>\n  )\n}\n\nexport default React.memo(HeaderCellMoreButton)\n"]}