@oneblink/apps-react 0.6.2-beta.3 → 1.0.0-beta.10

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

@@ -0,0 +1,215 @@
+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 }) {
+    var _a, _b;
+    if (formElement.type === 'page' || formElement.type === 'section') {
+        return null;
+    }
+    const unknown = submission === null || submission === void 0 ? void 0 : submission[formElement.name];
+    if (unknown === undefined || unknown === null) {
+        return null;
+    }
+    switch (formElement.type) {
+        case 'repeatableSet': {
+            return (React.createElement(RepeatableSetCell, { formElement: formElement, value: unknown }));
+        }
+        case 'location': {
+            const value = unknown;
+            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: unknown }));
+        }
+        case 'textarea': {
+            const value = unknown;
+            return (React.createElement(React.Fragment, null,
+                React.createElement("span", { style: {
+                        whiteSpace: 'pre-line',
+                    } }, value),
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: value })));
+        }
+        case 'date': {
+            const value = unknown;
+            const text = format(new Date(value), shortDateFormat);
+            return (React.createElement(React.Fragment, null,
+                text,
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: text })));
+        }
+        case 'time': {
+            const value = unknown;
+            const text = format(new Date(value), timeFormat);
+            return (React.createElement(React.Fragment, null,
+                text,
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: text })));
+        }
+        case 'datetime': {
+            const value = unknown;
+            const text = format(new Date(value), shortDateTimeFormat);
+            return (React.createElement(React.Fragment, null,
+                text,
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: text })));
+        }
+        case 'number': {
+            const value = unknown;
+            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)) {
+                const value = unknown;
+                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 value = unknown;
+                const text = getSelectedOptionLabel(formElement, value);
+                return (React.createElement(React.Fragment, null,
+                    text,
+                    React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: text })));
+            }
+        }
+        case 'email': {
+            const value = unknown;
+            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': {
+            const value = unknown;
+            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': {
+            const value = unknown;
+            return (React.createElement(React.Fragment, null,
+                value,
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: value })));
+        }
+        case 'files': {
+            const value = unknown;
+            if (!Array.isArray(value) || !value.length) {
+                break;
+            }
+            return React.createElement(FilesElementDataTableCellContent, { value: value });
+        }
+        case 'calculation': {
+            const value = unknown;
+            if (formElement.displayAsCurrency) {
+                const text = localisationService.formatCurrency(value);
+                return (React.createElement(React.Fragment, null,
+                    text,
+                    React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: value.toString() })));
+            }
+            else {
+                const text = localisationService.formatNumber(value);
+                return (React.createElement(React.Fragment, null,
+                    text,
+                    React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: value.toString() })));
+            }
+        }
+        case 'civicaStreetName': {
+            const value = unknown;
+            return (React.createElement(React.Fragment, null,
+                value.formattedStreet,
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: value.formattedStreet })));
+        }
+        case 'civicaNameRecord': {
+            const value = unknown;
+            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 value = unknown;
+            const fullAddress = ((_a = value === null || value === void 0 ? void 0 : value.addressDetails) === null || _a === void 0 ? void 0 : _a.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 value = unknown;
+            const fullAddress = ((_b = value === null || value === void 0 ? void 0 : value.addressDetails) === null || _b === void 0 ? void 0 : _b.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 value = unknown;
+            const text = value ? 'Yes' : 'No';
+            return (React.createElement(React.Fragment, null,
+                text,
+                React.createElement(TableCellCopyButton, { isHidden: !allowCopy, text: text })));
+        }
+        case 'abn': {
+            const value = unknown;
+            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'\nimport { ABNRecord } from '@oneblink/types/typescript/misc'\nimport { GeoscapeAddress } from '@oneblink/types/typescript/geoscape'\nimport { PointAddress } from '@oneblink/types/typescript/point'\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 unknown = submission?.[formElement.name]\n  if (unknown === undefined || unknown === null) {\n    return null\n  }\n\n  switch (formElement.type) {\n    case 'repeatableSet': {\n      return (\n        <RepeatableSetCell\n          formElement={formElement}\n          value={unknown as Record<string, unknown>[]}\n        />\n      )\n    }\n\n    case 'location': {\n      const value = unknown as {\n        latitude: number\n        longitude: number\n      }\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 (\n        <FileChip\n          file={unknown as React.ComponentProps<typeof FileChip>['file']}\n        />\n      )\n    }\n\n    case 'textarea': {\n      const value = unknown as string\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 value = unknown as string\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 value = unknown as string\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 value = unknown as string\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 value = unknown as 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        const value = unknown as string\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 value = unknown as string\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      const value = unknown as string\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      const value = unknown as string\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      const value = unknown as string\n      return (\n        <>\n          {value}\n          <TableCellCopyButton isHidden={!allowCopy} text={value} />\n        </>\n      )\n    }\n\n    case 'files': {\n      const value = unknown as React.ComponentProps<\n        typeof FilesElementDataTableCellContent\n      >['value']\n      if (!Array.isArray(value) || !value.length) {\n        break\n      }\n      return <FilesElementDataTableCellContent value={value} />\n    }\n\n    case 'calculation': {\n      const value = unknown as number\n      if (formElement.displayAsCurrency) {\n        const text = localisationService.formatCurrency(value)\n        return (\n          <>\n            {text}\n            <TableCellCopyButton\n              isHidden={!allowCopy}\n              text={value.toString()}\n            />\n          </>\n        )\n      } else {\n        const text = localisationService.formatNumber(value)\n        return (\n          <>\n            {text}\n            <TableCellCopyButton\n              isHidden={!allowCopy}\n              text={value.toString()}\n            />\n          </>\n        )\n      }\n    }\n\n    case 'civicaStreetName': {\n      const value = unknown as {\n        formattedStreet: string\n      }\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 value = unknown as {\n        title?: string\n        givenName1?: string\n        familyName?: string\n        emailAddress: string\n      }\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 value = unknown as GeoscapeAddress\n      const fullAddress = value?.addressDetails?.formattedAddress || (\n        <>\n          Geoscape Address ID: <i>{value.addressId}</i>\n        </>\n      )\n      return (\n        <>\n          {fullAddress}\n          <TableCellCopyButton\n            isHidden={!allowCopy}\n            text={fullAddress as string}\n          />\n        </>\n      )\n    }\n\n    case 'pointAddress': {\n      const value = unknown as PointAddress\n      const fullAddress = value?.addressDetails?.formattedAddress || (\n        <>\n          NSW Point Address ID: <i>{value.addressId}</i>\n        </>\n      )\n      return (\n        <>\n          {fullAddress}\n          <TableCellCopyButton\n            isHidden={!allowCopy}\n            text={fullAddress as string}\n          />\n        </>\n      )\n    }\n\n    case 'boolean': {\n      const value = unknown as 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 value = unknown as ABNRecord\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"]}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { FormTypes } from '@oneblink/types';
+declare type Props = {
+    value: Array<Record<string, unknown>>;
+    formElement: FormTypes.RepeatableSetElement;
+};
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

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

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { Typography, Divider as MuiDivider, styled } from '@mui/material';
+import useBooleanState from '../../../hooks/useBooleanState';
+import generateColumns from './generateColumns';
+import { useTable } from 'react-table';
+import RepeatableSetCellAccordion from './RepeatableSetCellAccordion';
+const Wrapper = styled('div')({
+    width: '100%',
+});
+const CellRow = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingBottom: theme.spacing(),
+    width: '100%',
+}));
+const CellValue = styled('span')(({ theme }) => ({
+    flex: 2,
+    marginLeft: theme.spacing(),
+    textAlign: 'right',
+    width: '100%',
+}));
+const Divider = styled(MuiDivider)(({ theme }) => ({
+    margin: theme.spacing(1, -2),
+}));
+const RepeatableSetCell = ({ formElement, value }) => {
+    const [isVisible, , , toggleVisibility] = useBooleanState(false);
+    const hasMultipleEntries = value.length > 1;
+    const columns = React.useMemo(() => generateColumns({
+        onChangeFilters: () => { },
+        formElements: formElement.elements,
+        parentElementNames: [],
+        initialColumns: [],
+        allowCopy: false,
+        filters: {},
+    }), [formElement.elements]);
+    const { rows, prepareRow } = useTable({
+        columns,
+        data: value.map((entry) => ({ submission: entry })),
+    });
+    return (React.createElement(RepeatableSetCellAccordion, { title: `${value.length} Entr${hasMultipleEntries ? 'ies' : 'y'}`, isOpen: isVisible, onChange: toggleVisibility },
+        React.createElement(Wrapper, null, rows.map((row, i) => {
+            const isLast = i === rows.length - 1;
+            prepareRow(row);
+            return (React.createElement(React.Fragment, { key: row.id },
+                row.cells.map((cell) => {
+                    const cellValue = cell.render('Cell');
+                    if (!cellValue)
+                        return null;
+                    return (React.createElement(CellRow, { key: cell.column.id },
+                        React.createElement("span", null,
+                            React.createElement(Typography, { color: "textSecondary", variant: "body2" },
+                                cell.column.headerText,
+                                ":")),
+                        React.createElement(CellValue, null, cellValue)));
+                }),
+                !isLast && React.createElement(Divider, null)));
+        }))));
+};
+export default React.memo(RepeatableSetCell);
+//# sourceMappingURL=RepeatableSetCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RepeatableSetCell.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/RepeatableSetCell.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { Typography, Divider as MuiDivider, styled } from '@mui/material'\nimport { FormTypes } from '@oneblink/types'\nimport useBooleanState from '../../../hooks/useBooleanState'\nimport generateColumns from './generateColumns'\nimport { useTable } from 'react-table'\nimport RepeatableSetCellAccordion from './RepeatableSetCellAccordion'\n\nconst Wrapper = styled('div')({\n  width: '100%',\n})\nconst CellRow = styled('div')(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  paddingBottom: theme.spacing(),\n  width: '100%',\n}))\n\nconst CellValue = styled('span')(({ theme }) => ({\n  flex: 2,\n  marginLeft: theme.spacing(),\n  textAlign: 'right',\n  width: '100%',\n}))\n\nconst Divider = styled(MuiDivider)(({ theme }) => ({\n  margin: theme.spacing(1, -2),\n}))\n\ntype Props = {\n  value: Array<Record<string, unknown>>\n  formElement: FormTypes.RepeatableSetElement\n}\n\nconst RepeatableSetCell = ({ formElement, value }: Props) => {\n  const [isVisible, , , toggleVisibility] = useBooleanState(false)\n  const hasMultipleEntries = value.length > 1\n  const columns = React.useMemo(\n    () =>\n      generateColumns({\n        onChangeFilters: () => {},\n        formElements: formElement.elements,\n        parentElementNames: [],\n        initialColumns: [],\n        allowCopy: false,\n        filters: {},\n      }),\n    [formElement.elements],\n  )\n  const { rows, prepareRow } = useTable({\n    columns,\n    data: value.map((entry) => ({ submission: entry })),\n  })\n\n  return (\n    <RepeatableSetCellAccordion\n      title={`${value.length} Entr${hasMultipleEntries ? 'ies' : 'y'}`}\n      isOpen={isVisible}\n      onChange={toggleVisibility}\n    >\n      <Wrapper>\n        {rows.map((row, i) => {\n          const isLast = i === rows.length - 1\n          prepareRow(row)\n          return (\n            <React.Fragment key={row.id}>\n              {row.cells.map((cell) => {\n                const cellValue = cell.render('Cell')\n                if (!cellValue) return null\n                return (\n                  <CellRow key={cell.column.id}>\n                    <span>\n                      <Typography color=\"textSecondary\" variant=\"body2\">\n                        {cell.column.headerText}:\n                      </Typography>\n                    </span>\n                    <CellValue>{cellValue}</CellValue>\n                  </CellRow>\n                )\n              })}\n              {!isLast && <Divider />}\n            </React.Fragment>\n          )\n        })}\n      </Wrapper>\n    </RepeatableSetCellAccordion>\n  )\n}\n\nexport default React.memo<Props>(RepeatableSetCell)\n"]}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare type Props = {
+    isOpen: boolean;
+    onChange: () => void;
+    title: string;
+    children: React.ReactNode;
+};
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CustomAccordion, CustomAccordionSummary, CustomAccordionDetails, } from '../../CustomAccordion';
+import { Typography } from '@mui/material';
+import { ExpandMore } from '@mui/icons-material';
+const RepeatableSetCell = ({ isOpen, onChange, title, children }) => {
+    return (React.createElement(CustomAccordion, { expanded: isOpen, onChange: onChange, "data-cypress": "form-store-repeatable-set-cell-accordion" },
+        React.createElement(CustomAccordionSummary, { expandIcon: React.createElement(ExpandMore, null), "data-cypress": "form-store-repeatable-set-cell-accordion-summary" },
+            React.createElement(Typography, null, title)),
+        React.createElement(CustomAccordionDetails, null, children)));
+};
+export default React.memo(RepeatableSetCell);
+//# sourceMappingURL=RepeatableSetCellAccordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RepeatableSetCellAccordion.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/RepeatableSetCellAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,eAAe,EACf,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAShD,MAAM,iBAAiB,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAS,EAAE,EAAE;IACzE,OAAO,CACL,oBAAC,eAAe,IACd,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,QAAQ,kBACL,0CAA0C;QAEvD,oBAAC,sBAAsB,IACrB,UAAU,EAAE,oBAAC,UAAU,OAAG,kBACb,kDAAkD;YAE/D,oBAAC,UAAU,QAAE,KAAK,CAAc,CACT;QACzB,oBAAC,sBAAsB,QAAE,QAAQ,CAA0B,CAC3C,CACnB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,iBAAiB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport {\n  CustomAccordion,\n  CustomAccordionSummary,\n  CustomAccordionDetails,\n} from '../../CustomAccordion'\nimport { Typography } from '@mui/material'\nimport { ExpandMore } from '@mui/icons-material'\n\ntype Props = {\n  isOpen: boolean\n  onChange: () => void\n  title: string\n  children: React.ReactNode\n}\n\nconst RepeatableSetCell = ({ isOpen, onChange, title, children }: Props) => {\n  return (\n    <CustomAccordion\n      expanded={isOpen}\n      onChange={onChange}\n      data-cypress=\"form-store-repeatable-set-cell-accordion\"\n    >\n      <CustomAccordionSummary\n        expandIcon={<ExpandMore />}\n        data-cypress=\"form-store-repeatable-set-cell-accordion-summary\"\n      >\n        <Typography>{title}</Typography>\n      </CustomAccordionSummary>\n      <CustomAccordionDetails>{children}</CustomAccordionDetails>\n    </CustomAccordion>\n  )\n}\n\nexport default React.memo<Props>(RepeatableSetCell)\n"]}

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare function TableCellCopyButton({ text, isHidden, }: {
+    text: string;
+    isHidden?: boolean;
+}): JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof TableCellCopyButton>;
+export default _default;

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Zoom } from '@mui/material';
+import CopyToClipboardIconButton from '../../CopyToClipboardIconButton';
+import { useIsHovering } from '../../../hooks/useIsHovering';
+import { styled } from '@mui/material/styles';
+function TableCellCopyButton({ text, isHidden, }) {
+    const isHovering = useIsHovering();
+    if (isHidden) {
+        return null;
+    }
+    return (React.createElement(Zoom, { in: isHovering },
+        React.createElement(StyledSpan, null,
+            React.createElement(StyledCopyToClipbaordButton, { text: text }))));
+}
+const StyledSpan = styled('span')(() => ({
+    position: 'absolute',
+    top: 0,
+    right: 0,
+}));
+const StyledCopyToClipbaordButton = styled(CopyToClipboardIconButton)(({ theme }) => ({
+    backgroundColor: theme.palette.background.paper,
+    '&:hover': {
+        // Rough equivalent of the color created by transparency `rgba(0,0,0,0.04)` on white
+        backgroundColor: '#f3f3f3',
+    },
+}));
+export default React.memo(TableCellCopyButton);
+//# sourceMappingURL=TableCellCopyButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellCopyButton.js","sourceRoot":"","sources":["../../../../src/components/formStore/table/TableCellCopyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,yBAAyB,MAAM,iCAAiC,CAAA;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAE7C,SAAS,mBAAmB,CAAC,EAC3B,IAAI,EACJ,QAAQ,GAIT;IACC,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,IAAI,QAAQ,EAAE;QACZ,OAAO,IAAI,CAAA;KACZ;IACD,OAAO,CACL,oBAAC,IAAI,IAAC,EAAE,EAAE,UAAU;QAClB,oBAAC,UAAU;YACT,oBAAC,2BAA2B,IAAC,IAAI,EAAE,IAAI,GAAI,CAChC,CACR,CACR,CAAA;AACH,CAAC;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACvC,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,CAAC;CACT,CAAC,CAAC,CAAA;AAEH,MAAM,2BAA2B,GAAG,MAAM,CAAC,yBAAyB,CAAC,CACnE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACd,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK;IAC/C,SAAS,EAAE;QACT,oFAAoF;QACpF,eAAe,EAAE,SAAS;KAC3B;CACF,CAAC,CACH,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Zoom } from '@mui/material'\nimport CopyToClipboardIconButton from '../../CopyToClipboardIconButton'\nimport { useIsHovering } from '../../../hooks/useIsHovering'\nimport { styled } from '@mui/material/styles'\n\nfunction TableCellCopyButton({\n  text,\n  isHidden,\n}: {\n  text: string\n  isHidden?: boolean\n}) {\n  const isHovering = useIsHovering()\n  if (isHidden) {\n    return null\n  }\n  return (\n    <Zoom in={isHovering}>\n      <StyledSpan>\n        <StyledCopyToClipbaordButton text={text} />\n      </StyledSpan>\n    </Zoom>\n  )\n}\n\nconst StyledSpan = styled('span')(() => ({\n  position: 'absolute',\n  top: 0,\n  right: 0,\n}))\n\nconst StyledCopyToClipbaordButton = styled(CopyToClipboardIconButton)(\n  ({ theme }) => ({\n    backgroundColor: theme.palette.background.paper,\n    '&:hover': {\n      // Rough equivalent of the color created by transparency `rgba(0,0,0,0.04)` on white\n      backgroundColor: '#f3f3f3',\n    },\n  }),\n)\n\nexport default React.memo(TableCellCopyButton)\n"]}

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

@@ -0,0 +1,18 @@
+import { FormStoreRecord } from '@oneblink/types/typescript/submissions';
+import { Column as ColumnWithCell } from 'react-table';
+import { FormTypes } from '@oneblink/types';
+import { formStoreService } from '@oneblink/apps';
+import { OnChangeFilters } from '../../../hooks/useInfiniteScrollDataLoad';
+declare const generateColumns: <T extends {
+    submission: FormStoreRecord['submission'];
+}>({ formElements, onChangeFilters, filters, parentElementNames, initialColumns, allowCopy, }: {
+    formElements: (FormTypes.FormElement & {
+        tooltip?: string;
+    })[];
+    onChangeFilters: OnChangeFilters<formStoreService.FormStoreFilters>;
+    filters: formStoreService.FormStoreFilters;
+    parentElementNames: string[];
+    initialColumns: ColumnWithCell<T>[];
+    allowCopy: boolean;
+}) => ColumnWithCell<T>[];
+export default generateColumns;