@aehrc/smart-forms-renderer 0.2.0 → 0.4.0

package/src/components/FormComponents/GridGroup/GridGroup.tsx

@@ -0,0 +1,92 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useMemo } from 'react';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+import { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
+import useHidden from '../../../hooks/useHidden';
+import { QGroupContainerBox } from '../../Box.styles';
+import { Divider, Paper, TableContainer, Typography } from '@mui/material';
+import { mapQItemsIndex } from '../../../utils/mapItem';
+import GridTable from './GridTable';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+
+interface GridGroupProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+  groupCardElevation: number;
+}
+
+function GridGroup(props: GridGroupProps) {
+  const { qItem, qrItem, groupCardElevation, onQrItemChange } = props;
+
+  const qRowItems = qItem.item;
+  const qrGroup = qrItem && qrItem.item ? qrItem : createQrGroup(qItem);
+  const qrRowItems = qrGroup.item;
+
+  const qItemsIndexMap = useMemo(() => mapQItemsIndex(qItem), [qItem]);
+
+  const columnLabels: string[] = useMemo(
+    () => qRowItems?.[0].item?.map((firstItem) => firstItem.text ?? ' ') ?? [],
+    [qRowItems]
+  );
+
+  const itemIsHidden = useHidden(qItem);
+  if (itemIsHidden) {
+    return null;
+  }
+
+  if (!qRowItems || !qrRowItems) {
+    return <>Unable to load group, something has gone terribly wrong.</>;
+  }
+
+  // Check if there are row within the grid
+  if (qRowItems.length === 0) {
+    return null;
+  }
+
+  // Event Handlers
+  function handleRowChange(newQrItem: QuestionnaireResponseItem) {
+    const updatedQrGroup: QuestionnaireResponseItem = { ...qrGroup };
+    updateQrGroup(newQrItem, null, updatedQrGroup, qItemsIndexMap);
+    onQrItemChange(updatedQrGroup);
+  }
+
+  return (
+    <>
+      <QGroupContainerBox cardElevation={groupCardElevation} isRepeated={false} py={3}>
+        <Typography fontSize={13} variant="h6">
+          <LabelWrapper qItem={qItem} />
+        </Typography>
+        <Divider sx={{ my: 1 }} light />
+
+        <TableContainer component={Paper} elevation={groupCardElevation}>
+          <GridTable
+            qItems={qRowItems}
+            qrItems={qrRowItems}
+            qItemsIndexMap={qItemsIndexMap}
+            columnLabels={columnLabels}
+            onQrItemChange={handleRowChange}
+          />
+        </TableContainer>
+      </QGroupContainerBox>
+    </>
+  );
+}
+
+export default GridGroup;

package/src/components/FormComponents/GridGroup/GridRow.js

@@ -0,0 +1,55 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { useMemo } from 'react';
+import { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
+import { GridAnswerTableCell, GridTextTableCell } from '../Tables/Table.styles';
+import SingleItem from '../SingleItem/SingleItem';
+import { getQrItemsIndex, mapQItemsIndex } from '../../../utils/mapItem';
+import { Typography } from '@mui/material';
+function GridRow(props) {
+    const { qItem, qrItem, columnLabels, numOfColumns, onQrItemChange } = props;
+    const rowQItems = qItem.item;
+    const row = qrItem && qrItem.item ? qrItem : createQrGroup(qItem);
+    const rowQrItems = row.item;
+    const qItemsIndexMap = useMemo(() => mapQItemsIndex(qItem), [qItem]);
+    if (!rowQItems || !rowQrItems) {
+        return null;
+    }
+    function handleQrRowItemChange(newQrRowItem) {
+        const qrRow = Object.assign({}, row);
+        updateQrGroup(newQrRowItem, null, qrRow, qItemsIndexMap);
+        onQrItemChange(qrRow);
+    }
+    const qrItemsByIndex = getQrItemsIndex(rowQItems, rowQrItems, qItemsIndexMap);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(GridTextTableCell, null,
+            React.createElement(Typography, { fontWeight: "bold" }, qItem.text)),
+        rowQItems.map((cellQItem, index) => {
+            const cellQrItem = qrItemsByIndex[index];
+            // Don't render cell if column label does not match - "sparse-ness" of grid
+            if (columnLabels[index] !== cellQItem.text) {
+                return null;
+            }
+            if (Array.isArray(cellQrItem)) {
+                return null;
+            }
+            return (React.createElement(GridAnswerTableCell, { key: index, numOfColumns: numOfColumns },
+                React.createElement(SingleItem, { qItem: cellQItem, qrItem: cellQrItem, isRepeated: true, isTabled: true, onQrItemChange: handleQrRowItemChange })));
+        })));
+}
+export default GridRow;
+//# sourceMappingURL=GridRow.js.map

package/src/components/FormComponents/GridGroup/GridRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridRow.js","sourceRoot":"","sources":["GridRow.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAS3C,SAAS,OAAO,CAAC,KAAmB;IAClC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE5E,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC;IAC7B,MAAM,GAAG,GAAG,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,UAAU,GAAG,GAAG,CAAC,IAAI,CAAC;IAE5B,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAErE,IAAI,CAAC,SAAS,IAAI,CAAC,UAAU,EAAE;QAC7B,OAAO,IAAI,CAAC;KACb;IAED,SAAS,qBAAqB,CAAC,YAAuC;QACpE,MAAM,KAAK,qBAAmC,GAAG,CAAE,CAAC;QACpD,aAAa,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC;QACzD,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IAED,MAAM,cAAc,GAAG,eAAe,CAAC,SAAS,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC;IAE9E,OAAO,CACL;QACE,oBAAC,iBAAiB;YAChB,oBAAC,UAAU,IAAC,UAAU,EAAC,MAAM,IAAE,KAAK,CAAC,IAAI,CAAc,CACrC;QACnB,SAAS,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE;YAClC,MAAM,UAAU,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;YAEzC,2EAA2E;YAC3E,IAAI,YAAY,CAAC,KAAK,CAAC,KAAK,SAAS,CAAC,IAAI,EAAE;gBAC1C,OAAO,IAAI,CAAC;aACb;YAED,IAAI,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;gBAC7B,OAAO,IAAI,CAAC;aACb;YAED,OAAO,CACL,oBAAC,mBAAmB,IAAC,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY;gBACzD,oBAAC,UAAU,IACT,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,UAAU,EAClB,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,IAAI,EACd,cAAc,EAAE,qBAAqB,GACrC,CACkB,CACvB,CAAC;QACJ,CAAC,CAAC,CACD,CACJ,CAAC;AACJ,CAAC;AAED,eAAe,OAAO,CAAC"}

package/src/components/FormComponents/GridGroup/GridRow.tsx

@@ -0,0 +1,88 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useMemo } from 'react';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+import { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
+import { GridAnswerTableCell, GridTextTableCell } from '../Tables/Table.styles';
+import SingleItem from '../SingleItem/SingleItem';
+import { getQrItemsIndex, mapQItemsIndex } from '../../../utils/mapItem';
+import { Typography } from '@mui/material';
+
+interface GridRowProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+  columnLabels: string[];
+  numOfColumns: number;
+}
+
+function GridRow(props: GridRowProps) {
+  const { qItem, qrItem, columnLabels, numOfColumns, onQrItemChange } = props;
+
+  const rowQItems = qItem.item;
+  const row = qrItem && qrItem.item ? qrItem : createQrGroup(qItem);
+  const rowQrItems = row.item;
+
+  const qItemsIndexMap = useMemo(() => mapQItemsIndex(qItem), [qItem]);
+
+  if (!rowQItems || !rowQrItems) {
+    return null;
+  }
+
+  function handleQrRowItemChange(newQrRowItem: QuestionnaireResponseItem) {
+    const qrRow: QuestionnaireResponseItem = { ...row };
+    updateQrGroup(newQrRowItem, null, qrRow, qItemsIndexMap);
+    onQrItemChange(qrRow);
+  }
+
+  const qrItemsByIndex = getQrItemsIndex(rowQItems, rowQrItems, qItemsIndexMap);
+
+  return (
+    <>
+      <GridTextTableCell>
+        <Typography fontWeight="bold">{qItem.text}</Typography>
+      </GridTextTableCell>
+      {rowQItems.map((cellQItem, index) => {
+        const cellQrItem = qrItemsByIndex[index];
+
+        // Don't render cell if column label does not match - "sparse-ness" of grid
+        if (columnLabels[index] !== cellQItem.text) {
+          return null;
+        }
+
+        if (Array.isArray(cellQrItem)) {
+          return null;
+        }
+
+        return (
+          <GridAnswerTableCell key={index} numOfColumns={numOfColumns}>
+            <SingleItem
+              qItem={cellQItem}
+              qrItem={cellQrItem}
+              isRepeated={true}
+              isTabled={true}
+              onQrItemChange={handleQrRowItemChange}
+            />
+          </GridAnswerTableCell>
+        );
+      })}
+    </>
+  );
+}
+
+export default GridRow;

package/src/components/FormComponents/GridGroup/GridTable.js

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
+import { HeaderTableCell } from '../Tables/Table.styles';
+import GridRow from './GridRow';
+import { getQrItemsIndex } from '../../../utils/mapItem';
+function GridTable(props) {
+    const { qItems, qrItems, qItemsIndexMap, columnLabels, onQrItemChange } = props;
+    const qrItemsByIndex = getQrItemsIndex(qItems, qrItems, qItemsIndexMap);
+    const numOfColumns = columnLabels.length;
+    return (React.createElement(Table, null,
+        React.createElement(TableHead, null,
+            React.createElement(TableRow, null,
+                React.createElement(HeaderTableCell, null),
+                columnLabels.map((label) => (React.createElement(HeaderTableCell, { key: label }, label))),
+                React.createElement(TableCell, null))),
+        React.createElement(TableBody, null, qItems.map((qItem, index) => {
+            const qrItem = qrItemsByIndex[index];
+            if (Array.isArray(qrItem)) {
+                return null;
+            }
+            return (React.createElement(TableRow, { key: qItem.linkId },
+                React.createElement(GridRow, { qItem: qItem, qrItem: qrItem, columnLabels: columnLabels, numOfColumns: numOfColumns, onQrItemChange: onQrItemChange })));
+        }))));
+}
+export default GridTable;
+//# sourceMappingURL=GridTable.js.map

package/src/components/FormComponents/GridGroup/GridTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridTable.js","sourceRoot":"","sources":["GridTable.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAUzD,SAAS,SAAS,CAAC,KAAqB;IACtC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEhF,MAAM,cAAc,GAClB,eAAe,CAAC,MAAM,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC;IAEnD,MAAM,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC;IAEzC,OAAO,CACL,oBAAC,KAAK;QACJ,oBAAC,SAAS;YACR,oBAAC,QAAQ;gBACP,oBAAC,eAAe,OAAG;gBAClB,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC3B,oBAAC,eAAe,IAAC,GAAG,EAAE,KAAK,IAAG,KAAK,CAAmB,CACvD,CAAC;gBACF,oBAAC,SAAS,OAAG,CACJ,CACD;QACZ,oBAAC,SAAS,QACP,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YAC3B,MAAM,MAAM,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;YAErC,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;gBACzB,OAAO,IAAI,CAAC;aACb;YAED,OAAO,CACL,oBAAC,QAAQ,IAAC,GAAG,EAAE,KAAK,CAAC,MAAM;gBACzB,oBAAC,OAAO,IACN,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,GAC9B,CACO,CACZ,CAAC;QACJ,CAAC,CAAC,CACQ,CACN,CACT,CAAC;AACJ,CAAC;AAED,eAAe,SAAS,CAAC"}

package/src/components/FormComponents/GridGroup/GridTable.tsx

@@ -0,0 +1,77 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
+import { HeaderTableCell } from '../Tables/Table.styles';
+import GridRow from './GridRow';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { getQrItemsIndex } from '../../../utils/mapItem';
+import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+
+interface GridTableProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+  qItems: QuestionnaireItem[];
+  qrItems: QuestionnaireResponseItem[];
+  qItemsIndexMap: Record<string, number>;
+  columnLabels: string[];
+}
+
+function GridTable(props: GridTableProps) {
+  const { qItems, qrItems, qItemsIndexMap, columnLabels, onQrItemChange } = props;
+
+  const qrItemsByIndex: (QuestionnaireResponseItem | QuestionnaireResponseItem[])[] =
+    getQrItemsIndex(qItems, qrItems, qItemsIndexMap);
+
+  const numOfColumns = columnLabels.length;
+
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <HeaderTableCell />
+          {columnLabels.map((label) => (
+            <HeaderTableCell key={label}>{label}</HeaderTableCell>
+          ))}
+          <TableCell />
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {qItems.map((qItem, index) => {
+          const qrItem = qrItemsByIndex[index];
+
+          if (Array.isArray(qrItem)) {
+            return null;
+          }
+
+          return (
+            <TableRow key={qItem.linkId}>
+              <GridRow
+                qItem={qItem}
+                qrItem={qrItem}
+                columnLabels={columnLabels}
+                numOfColumns={numOfColumns}
+                onQrItemChange={onQrItemChange}
+              />
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
+
+export default GridTable;

package/src/components/FormComponents/GroupItem/GroupHeading.js

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { memo } from 'react';
+import { Box, Divider } from '@mui/material';
+import { QGroupHeadingTypography } from '../Typography.styles';
+import { getContextDisplays } from '../../../utils/tabs';
+import ContextDisplayItem from '../ItemParts/ContextDisplayItem';
+import LabelText from '../ItemParts/ItemLabelText';
+const GroupHeading = memo(function GroupHeading(props) {
+    const { qItem, tabIsMarkedAsComplete, isRepeated } = props;
+    const contextDisplayItems = getContextDisplays(qItem);
+    if (isRepeated) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "space-between" },
+            React.createElement(QGroupHeadingTypography, { variant: "h6", isTabHeading: tabIsMarkedAsComplete !== undefined },
+                React.createElement(LabelText, { qItem: qItem })),
+            React.createElement(Box, { display: "flex", columnGap: 0.5 }, contextDisplayItems.map((item) => {
+                return React.createElement(ContextDisplayItem, { key: item.linkId, displayItem: item });
+            }))),
+        qItem.text ? React.createElement(Divider, { sx: { mt: 1, mb: 1.5 }, light: true }) : null));
+});
+export default GroupHeading;
+//# sourceMappingURL=GroupHeading.js.map

package/src/components/FormComponents/GroupItem/GroupHeading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupHeading.js","sourceRoot":"","sources":["GroupHeading.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAG/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,kBAAkB,MAAM,iCAAiC,CAAC;AACjE,OAAO,SAAS,MAAM,4BAA4B,CAAC;AAOnD,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,YAAY,CAAC,KAAwB;IACtE,MAAM,EAAE,KAAK,EAAE,qBAAqB,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAE3D,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAEtD,IAAI,UAAU,EAAE;QACd,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL;QACE,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe;YACpE,oBAAC,uBAAuB,IAAC,OAAO,EAAC,IAAI,EAAC,YAAY,EAAE,qBAAqB,KAAK,SAAS;gBACrF,oBAAC,SAAS,IAAC,KAAK,EAAE,KAAK,GAAI,CACH;YAE1B,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAE,GAAG,IAC/B,mBAAmB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBAChC,OAAO,oBAAC,kBAAkB,IAAC,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,GAAI,CAAC;YACrE,CAAC,CAAC,CACE,CACF;QACL,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAC,OAAO,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,KAAK,SAAG,CAAC,CAAC,CAAC,IAAI,CAC7D,CACJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,YAAY,CAAC"}

package/src/components/FormComponents/GroupItem/GroupHeading.tsx

@@ -0,0 +1,59 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { memo } from 'react';
+import { Box, Divider } from '@mui/material';
+import { QGroupHeadingTypography } from '../Typography.styles';
+import type { PropsWithIsRepeatedAttribute } from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem } from 'fhir/r4';
+import { getContextDisplays } from '../../../utils/tabs';
+import ContextDisplayItem from '../ItemParts/ContextDisplayItem';
+import LabelText from '../ItemParts/ItemLabelText';
+
+interface GroupHeadingProps extends PropsWithIsRepeatedAttribute {
+  qItem: QuestionnaireItem;
+  tabIsMarkedAsComplete?: boolean;
+}
+
+const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
+  const { qItem, tabIsMarkedAsComplete, isRepeated } = props;
+
+  const contextDisplayItems = getContextDisplays(qItem);
+
+  if (isRepeated) {
+    return null;
+  }
+
+  return (
+    <>
+      <Box display="flex" alignItems="center" justifyContent="space-between">
+        <QGroupHeadingTypography variant="h6" isTabHeading={tabIsMarkedAsComplete !== undefined}>
+          <LabelText qItem={qItem} />
+        </QGroupHeadingTypography>
+
+        <Box display="flex" columnGap={0.5}>
+          {contextDisplayItems.map((item) => {
+            return <ContextDisplayItem key={item.linkId} displayItem={item} />;
+          })}
+        </Box>
+      </Box>
+      {qItem.text ? <Divider sx={{ mt: 1, mb: 1.5 }} light /> : null}
+    </>
+  );
+});
+
+export default GroupHeading;

package/src/components/FormComponents/GroupItem/GroupItem.js

@@ -0,0 +1,62 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { useMemo } from 'react';
+import { getQrItemsIndex, mapQItemsIndex } from '../../../utils/mapItem';
+import { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
+import { QGroupContainerBox } from '../../Box.styles';
+import useHidden from '../../../hooks/useHidden';
+import GroupHeading from './GroupHeading';
+import { GroupCard } from './GroupItem.styles';
+import NextTabButtonWrapper from './NextTabButtonWrapper';
+import GroupItemSwitcher from './GroupItemSwitcher';
+function GroupItem(props) {
+    const { qItem, qrItem, isRepeated, groupCardElevation, tabIsMarkedAsComplete, tabs, currentTabIndex, onQrItemChange } = props;
+    const qItemsIndexMap = useMemo(() => mapQItemsIndex(qItem), [qItem]);
+    const itemIsHidden = useHidden(qItem);
+    if (itemIsHidden) {
+        return null;
+    }
+    const qItems = qItem.item;
+    const qrGroup = qrItem && qrItem.item ? qrItem : createQrGroup(qItem);
+    const qrItems = qrGroup.item;
+    // Event Handlers
+    function handleQrItemChange(newQrItem) {
+        const updatedQrGroup = Object.assign({}, qrGroup);
+        updateQrGroup(newQrItem, null, updatedQrGroup, qItemsIndexMap);
+        onQrItemChange(updatedQrGroup);
+    }
+    function handleQrRepeatGroupChange(qrRepeatGroup) {
+        const updatedQrGroup = Object.assign({}, qrGroup);
+        updateQrGroup(null, qrRepeatGroup, updatedQrGroup, qItemsIndexMap);
+        onQrItemChange(updatedQrGroup);
+    }
+    if (!qItems || !qrItems) {
+        return React.createElement(React.Fragment, null, "Unable to load group, something has gone terribly wrong.");
+    }
+    // If an item has multiple answers, it is a repeat group
+    const qrItemsByIndex = getQrItemsIndex(qItems, qrItems, qItemsIndexMap);
+    return (React.createElement(QGroupContainerBox, { cardElevation: groupCardElevation, isRepeated: isRepeated, "data-test": "q-item-group-box" },
+        React.createElement(GroupCard, { elevation: groupCardElevation, isRepeated: isRepeated },
+            React.createElement(GroupHeading, { qItem: qItem, tabIsMarkedAsComplete: tabIsMarkedAsComplete, isRepeated: isRepeated }),
+            qItems.map((qItem, i) => {
+                const qrItemOrItems = qrItemsByIndex[i];
+                return (React.createElement(GroupItemSwitcher, { key: qItem.linkId, qItem: qItem, qrItemOrItems: qrItemOrItems, groupCardElevation: groupCardElevation, onQrItemChange: handleQrItemChange, onQrRepeatGroupChange: handleQrRepeatGroupChange }));
+            }),
+            React.createElement(NextTabButtonWrapper, { currentTabIndex: currentTabIndex, tabs: tabs }))));
+}
+export default GroupItem;
+//# sourceMappingURL=GroupItem.js.map

package/src/components/FormComponents/GroupItem/GroupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupItem.js","sourceRoot":"","sources":["GroupItem.tsx"],"names":[],"mappings":"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"}

package/src/components/FormComponents/GroupItem/GroupItem.styles.js

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Card, styled } from '@mui/material';
+export const GroupCard = styled(Card, {
+    shouldForwardProp: (prop) => prop !== 'elevation' && prop !== 'isRepeated'
+})(({ elevation, isRepeated }) => ({
+    paddingTop: '20px',
+    paddingBottom: '20px',
+    paddingLeft: elevation === 1 ? '26px' : '24px',
+    paddingRight: elevation === 1 ? '26px' : '24px',
+    marginBottom: isRepeated ? 0 : '28px'
+}));
+//# sourceMappingURL=GroupItem.styles.js.map

package/src/components/FormComponents/GroupItem/GroupItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupItem.styles.js","sourceRoot":"","sources":["GroupItem.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE7C,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,EAAE;IACpC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,WAAW,IAAI,IAAI,KAAK,YAAY;CAC3E,CAAC,CAA6C,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7E,UAAU,EAAE,MAAM;IAClB,aAAa,EAAE,MAAM;IACrB,WAAW,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;IAC9C,YAAY,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;IAC/C,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM;CACtC,CAAC,CAAC,CAAC"}

package/src/components/FormComponents/GroupItem/GroupItem.styles.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Card, styled } from '@mui/material';
+
+export const GroupCard = styled(Card, {
+  shouldForwardProp: (prop) => prop !== 'elevation' && prop !== 'isRepeated'
+})<{ elevation: number; isRepeated: boolean }>(({ elevation, isRepeated }) => ({
+  paddingTop: '20px',
+  paddingBottom: '20px',
+  paddingLeft: elevation === 1 ? '26px' : '24px',
+  paddingRight: elevation === 1 ? '26px' : '24px',
+  marginBottom: isRepeated ? 0 : '28px'
+}));