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

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

@@ -1,44 +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]);
-}
+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/ColumnFilters.d.ts

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

@@ -1,180 +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))))));
-}
+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/FormElementTableCell.d.ts

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