@aehrc/smart-forms-renderer 0.8.1 → 0.9.0

package/src/components/FormComponents/CustomDateItem/customDateTimePicker/DatePickerButton.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import type {
+  BaseSingleInputFieldProps,
+  DateValidationError,
+  FieldSection
+} from '@mui/x-date-pickers/models';
+import type { Dayjs } from 'dayjs';
+import IconButton from '@mui/material/IconButton';
+import EventIcon from '@mui/icons-material/Event';
+
+interface DatePickerButtonProps
+  extends BaseSingleInputFieldProps<Dayjs | null, Dayjs, FieldSection, DateValidationError> {
+  onOpen?: () => void;
+  readOnly?: boolean;
+}
+
+function DatePickerButton(props: DatePickerButtonProps) {
+  const { onOpen, readOnly } = props;
+
+  return (
+    <IconButton
+      sx={{ height: 24, width: 24 }}
+      disabled={readOnly}
+      onClick={(e) => {
+        e.stopPropagation();
+        onOpen?.();
+      }}>
+      <EventIcon fontSize="small" />
+    </IconButton>
+  );
+}
+
+export default DatePickerButton;

package/src/components/FormComponents/CustomDateItem/customDateTimePicker/MuiDatePicker.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+const MuiDatePicker = DatePicker;
+
+export default MuiDatePicker;

package/src/components/FormComponents/CustomDateItem/customDateTimePicker/index.ts

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+export * from './utils';

package/src/components/FormComponents/CustomDateItem/customDateTimePicker/utils/index.ts

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+export { parseFhirDateToDisplayDate } from './parseDates';

package/src/components/FormComponents/CustomDateItem/customDateTimePicker/utils/parseDates.ts

@@ -0,0 +1,154 @@
+/*
+ * 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 dayjs from 'dayjs';
+
+const inputMatchRegex = /(\d{4}|\d{3}|\d{2})/g;
+
+export function validateInput(input: string) {
+  const matches = input.match(inputMatchRegex);
+
+  if (!matches) {
+    return false;
+  }
+
+  const seperator = input.includes('/') ? '/' : null;
+
+  if (matches.length === 1) {
+    // seperator not supposed to be present if only one match present
+    if (seperator) {
+      return false;
+    }
+
+    return matches[0].length === 4;
+  }
+
+  // Invalid if seperator is not present
+  if (!seperator) {
+    return false;
+  }
+
+  // Invalid if num of slots don't match the number of regex matches
+  const slotsMatched = input.split(seperator);
+  if (slotsMatched.length != matches.length) {
+    return false;
+  }
+
+  // Handle MM/YYYY format
+  if (matches.length === 2) {
+    return validateTwoMatches(matches[0], matches[1]);
+  }
+
+  // Handle DD/MM/YYYY format
+  if (matches.length === 3) {
+    return validateThreeMatches(matches[0], matches[1], matches[2]);
+  }
+
+  return false;
+}
+
+export function validateTwoMatches(monthInput: string, yearInput: string) {
+  const monthNum = parseInt(monthInput, 10);
+  if (monthNum < 1 || monthNum > 12) {
+    return false;
+  }
+
+  return (monthInput.length === 1 || monthInput.length === 2) && yearInput.length === 4;
+}
+
+export function validateThreeMatches(dayInput: string, monthInput: string, yearInput: string) {
+  const dayNum = parseInt(dayInput, 10);
+  if (dayNum < 1 || dayNum > 31) {
+    return false;
+  }
+
+  const monthNum = parseInt(monthInput, 10);
+  if (monthNum < 1 || monthNum > 12) {
+    return false;
+  }
+
+  return (
+    (dayInput.length === 1 || dayInput.length === 2) &&
+    (monthInput.length === 1 || monthInput.length === 2) &&
+    yearInput.length === 4
+  );
+}
+
+export function getNumOfSeparators(valueDate: string, seperator: string) {
+  const regex = new RegExp(seperator, 'g');
+  return [...valueDate.matchAll(regex)].length;
+}
+
+export function parseFhirDateToDisplayDate(fhirDate: string): {
+  displayDate: string;
+  parseFail?: boolean;
+} {
+  if (fhirDate.length === 0) {
+    return { displayDate: '' };
+  }
+
+  const numOfSeparators = getNumOfSeparators(fhirDate, '-');
+
+  if (numOfSeparators === 2) {
+    const threeMatchesDate = dayjs(fhirDate, `YYYY-MM-DD`);
+    if (threeMatchesDate.isValid()) {
+      return { displayDate: threeMatchesDate.format('DD/MM/YYYY') };
+    }
+  }
+
+  if (numOfSeparators === 1) {
+    const twoMatchesDate = dayjs(fhirDate, `YYYY-MM`);
+    if (twoMatchesDate.isValid()) {
+      return { displayDate: twoMatchesDate.format('MM/YYYY') };
+    }
+  }
+
+  const oneMatchDate = dayjs(fhirDate, `YYYY`);
+  if (oneMatchDate.isValid()) {
+    return { displayDate: oneMatchDate.format('YYYY') };
+  }
+
+  return { displayDate: fhirDate, parseFail: true };
+}
+
+export function parseInputDateToFhirDate(displayDate: string) {
+  const numOfSeparators = getNumOfSeparators(displayDate, '/');
+
+  if (numOfSeparators === 2) {
+    const threeMatchesDate = dayjs(displayDate, `DD/MM/YYYY`);
+    if (threeMatchesDate.isValid()) {
+      return threeMatchesDate.format('YYYY-MM-DD');
+    }
+  }
+
+  if (numOfSeparators === 1) {
+    const twoMatchesDate = dayjs(displayDate, `MM/YYYY`);
+    if (twoMatchesDate.isValid()) {
+      return twoMatchesDate.format('YYYY-MM');
+    }
+  }
+
+  if (displayDate.length === 4) {
+    const oneMatchDate = dayjs(displayDate, 'YYYY');
+    if (oneMatchDate.isValid()) {
+      return displayDate;
+    }
+  }
+
+  // Default to YYYY-MM-DD format if all else fails
+  return dayjs(displayDate).format('YYYY-MM-DD');
+}

package/src/components/FormComponents/CustomDateItem/index.ts

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+export * from './customDateTimePicker';

package/src/components/FormComponents/DateItem/DateItem.tsx

@@ -19,9 +19,9 @@ import React from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
-import type { PropsWithParentIsReadOnlyAttribute } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import { createEmptyQrItem } from '../../../utils/qrItem';
@@ -33,12 +33,12 @@ import dayjs from 'dayjs';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface DateItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function DateItem(props: DateItemProps) {

package/src/components/FormComponents/DateTimeItem/DateTimeItem.tsx

@@ -33,12 +33,12 @@ import dayjs from 'dayjs';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface DateTimeItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function DateTimeItem(props: DateTimeItemProps) {

package/src/components/FormComponents/DecimalItem/DecimalItem.tsx

@@ -28,7 +28,7 @@ import { FullWidthFormComponentBox } from '../../Box.styles';
 import useValidationError from '../../../hooks/useValidationError';
 import debounce from 'lodash.debounce';
 import { DEBOUNCE_DURATION } from '../../../utils/debounce';
-import { createEmptyQrItemWithUnit } from '../../../utils/qrItem';
+import { createEmptyQrItem } from '../../../utils/qrItem';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import DecimalField from './DecimalField';
 import {
@@ -41,12 +41,12 @@ import useStringInput from '../../../hooks/useStringInput';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface DecimalItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function DecimalItem(props: DecimalItemProps) {
@@ -86,7 +86,6 @@ function DecimalItem(props: DecimalItemProps) {
   const { calcExpUpdated } = useDecimalCalculatedExpression({
     qItem: qItem,
     inputValue: input,
-    displayUnit: displayUnit,
     precision: precision,
     setInputValue: (newInput) => {
       setInput(newInput);
@@ -106,7 +105,7 @@ function DecimalItem(props: DecimalItemProps) {
   const updateQrItemWithDebounce = useCallback(
     debounce((parsedNewInput: string) => {
       onQrItemChange({
-        ...createEmptyQrItemWithUnit(qItem, displayUnit),
+        ...createEmptyQrItem(qItem),
         answer: precision
           ? [{ valueDecimal: parseDecimalStringToFloat(parsedNewInput, precision) }]
           : [{ valueDecimal: parseFloat(parsedNewInput) }]

package/src/components/FormComponents/DisplayItem/DisplayInstructions.styles.ts

@@ -20,6 +20,5 @@ import { styled } from '@mui/material/styles';
 
 export const DisplayInstructionsWrapper = styled(Box)(({ theme }) => ({
   color: theme.palette.text.secondary,
-  textTransform: 'capitalize',
   marginBottom: '8px'
 }));

package/src/components/FormComponents/DisplayItem/DisplayInstructions.tsx

@@ -15,12 +15,13 @@
  * limitations under the License.
  */
 
+import type { ReactElement } from 'react';
 import React, { memo } from 'react';
 import Typography from '@mui/material/Typography';
 import { DisplayInstructionsWrapper } from './DisplayInstructions.styles';
 
 interface DisplayInstructionsProps {
-  displayInstructions: string;
+  displayInstructions: string | ReactElement;
   readOnly: boolean;
 }
 

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

@@ -19,9 +19,10 @@ import React, { useMemo } from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type {
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
-import { createQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
+import { createEmptyQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
 import useHidden from '../../../hooks/useHidden';
 import { QGroupContainerBox } from '../../Box.styles';
 import Divider from '@mui/material/Divider';
@@ -34,18 +35,20 @@ import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface GridGroupProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   groupCardElevation: number;
 }
 
 function GridGroup(props: GridGroupProps) {
-  const { qItem, qrItem, groupCardElevation, parentIsReadOnly, onQrItemChange } = props;
+  const { qItem, qrItem, groupCardElevation, showMinimalView, parentIsReadOnly, onQrItemChange } =
+    props;
 
   const qRowItems = qItem.item;
-  const qrGroup = qrItem && qrItem.item ? qrItem : createQrGroup(qItem);
+  const qrGroup = qrItem && qrItem.item ? qrItem : createEmptyQrGroup(qItem);
   const qrRowItems = qrGroup.item;
 
   const qItemsIndexMap = useMemo(() => mapQItemsIndex(qItem), [qItem]);
@@ -77,26 +80,49 @@ function GridGroup(props: GridGroupProps) {
     onQrItemChange(updatedQrGroup);
   }
 
-  return (
-    <>
-      <QGroupContainerBox cardElevation={groupCardElevation} isRepeated={false} py={3}>
-        <Typography fontSize={13} variant="h6" color={readOnly ? 'text.secondary' : 'text.primary'}>
-          <LabelWrapper qItem={qItem} readOnly={readOnly} />
-        </Typography>
-        <Divider sx={{ my: 1 }} light />
-
+  if (showMinimalView) {
+    return (
+      <QGroupContainerBox cardElevation={groupCardElevation} isRepeated={false} py={1}>
         <TableContainer component={Paper} elevation={groupCardElevation}>
           <GridTable
             qItems={qRowItems}
             qrItems={qrRowItems}
             qItemsIndexMap={qItemsIndexMap}
             columnLabels={columnLabels}
+            showMinimalView={showMinimalView}
             parentIsReadOnly={parentIsReadOnly}
             onQrItemChange={handleRowChange}
           />
         </TableContainer>
       </QGroupContainerBox>
-    </>
+    );
+  }
+
+  return (
+    <QGroupContainerBox cardElevation={groupCardElevation} isRepeated={false} py={3}>
+      {qItem.text ? (
+        <>
+          <Typography
+            fontSize={13}
+            variant="h6"
+            color={readOnly ? 'text.secondary' : 'text.primary'}>
+            <LabelWrapper qItem={qItem} readOnly={readOnly} />
+          </Typography>
+          <Divider sx={{ my: 1 }} light />
+        </>
+      ) : null}
+
+      <TableContainer component={Paper} elevation={groupCardElevation}>
+        <GridTable
+          qItems={qRowItems}
+          qrItems={qrRowItems}
+          qItemsIndexMap={qItemsIndexMap}
+          columnLabels={columnLabels}
+          parentIsReadOnly={parentIsReadOnly}
+          onQrItemChange={handleRowChange}
+        />
+      </TableContainer>
+    </QGroupContainerBox>
   );
 }
 

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

@@ -17,20 +17,20 @@
 
 import React, { useMemo } from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
-import type { PropsWithParentIsReadOnlyAttribute } from '../../../interfaces/renderProps.interface';
-import { createQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import { createEmptyQrGroup, updateQrItemsInGroup } 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/Typography';
 import useHidden from '../../../hooks/useHidden';
 
-interface GridRowProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
-    PropsWithParentIsReadOnlyAttribute {
+interface GridRowProps extends PropsWithQrItemChangeHandler, PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   columnLabels: string[];
   numOfColumns: number;
 }
@@ -39,7 +39,7 @@ function GridRow(props: GridRowProps) {
   const { qItem, qrItem, columnLabels, numOfColumns, parentIsReadOnly, onQrItemChange } = props;
 
   const rowQItems = qItem.item;
-  const row = qrItem && qrItem.item ? qrItem : createQrGroup(qItem);
+  const row = qrItem && qrItem.item ? qrItem : createEmptyQrGroup(qItem);
   const rowQrItems = row.item;
 
   const qItemsIndexMap = useMemo(() => mapQItemsIndex(qItem), [qItem]);
@@ -82,9 +82,10 @@ function GridRow(props: GridRowProps) {
           <GridAnswerTableCell key={index} numOfColumns={numOfColumns}>
             <SingleItem
               qItem={cellQItem}
-              qrItem={cellQrItem}
+              qrItem={cellQrItem ?? null}
               isRepeated={true}
               isTabled={true}
+              showMinimalView={true}
               parentIsReadOnly={parentIsReadOnly}
               onQrItemChange={handleQrRowItemChange}
             />

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

@@ -25,11 +25,15 @@ 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';
-import type { PropsWithParentIsReadOnlyAttribute } from '../../../interfaces/renderProps.interface';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import type { PropsWithShowMinimalViewAttribute } from '../../../interfaces/renderProps.interface';
 
 interface GridTableProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItems: QuestionnaireItem[];
   qrItems: QuestionnaireResponseItem[];
@@ -38,20 +42,31 @@ interface GridTableProps
 }
 
 function GridTable(props: GridTableProps) {
-  const { qItems, qrItems, qItemsIndexMap, columnLabels, parentIsReadOnly, onQrItemChange } = props;
+  const {
+    qItems,
+    qrItems,
+    qItemsIndexMap,
+    columnLabels,
+    showMinimalView,
+    parentIsReadOnly,
+    onQrItemChange
+  } = props;
 
-  const qrItemsByIndex: (QuestionnaireResponseItem | QuestionnaireResponseItem[])[] =
-    getQrItemsIndex(qItems, qrItems, qItemsIndexMap);
+  const qrItemsByIndex = getQrItemsIndex(qItems, qrItems, qItemsIndexMap);
 
   const numOfColumns = columnLabels.length;
 
+  const minimalViewHeaderCellSx = showMinimalView ? { py: 2 } : null;
+
   return (
-    <Table>
+    <Table size={showMinimalView ? 'small' : 'medium'}>
       <TableHead>
         <TableRow>
           <HeaderTableCell />
           {columnLabels.map((label) => (
-            <HeaderTableCell key={label}>{label}</HeaderTableCell>
+            <HeaderTableCell key={label} size="medium" sx={{ ...minimalViewHeaderCellSx }}>
+              {label}
+            </HeaderTableCell>
           ))}
           <TableCell />
         </TableRow>
@@ -64,11 +79,16 @@ function GridTable(props: GridTableProps) {
             return null;
           }
 
+          // In minimal view, don't display items with no answers
+          if (showMinimalView && !qrItem) {
+            return null;
+          }
+
           return (
             <TableRow key={qItem.linkId}>
               <GridRow
                 qItem={qItem}
-                qrItem={qrItem}
+                qrItem={qrItem ?? null}
                 columnLabels={columnLabels}
                 numOfColumns={numOfColumns}
                 parentIsReadOnly={parentIsReadOnly}

package/src/components/FormComponents/GridGroup/index.ts

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+export { default as GridGroup } from './GridGroup';

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

@@ -18,7 +18,7 @@
 import React, { useMemo } from 'react';
 import { getQrItemsIndex, mapQItemsIndex } from '../../../utils/mapItem';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import { createQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
+import { createEmptyQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
 import { QGroupContainerBox } from '../../Box.styles';
 import type {
   PropsWithIsRepeatedAttribute,
@@ -35,11 +35,11 @@ import GroupItemSwitcher from './GroupItemSwitcher';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface GroupItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   groupCardElevation: number;
   tabIsMarkedAsComplete?: boolean;
   tabs?: Tabs;
@@ -68,7 +68,7 @@ function GroupItem(props: GroupItemProps) {
   }
 
   const qItems = qItem.item;
-  const qrGroup = qrItem && qrItem.item ? qrItem : createQrGroup(qItem);
+  const qrGroup = qrItem && qrItem.item ? qrItem : createEmptyQrGroup(qItem);
   const qrItems = qrGroup.item;
 
   // Event Handlers
@@ -89,8 +89,7 @@ function GroupItem(props: GroupItemProps) {
   }
 
   // If an item has multiple answers, it is a repeat group
-  const qrItemsByIndex: (QuestionnaireResponseItem | QuestionnaireResponseItem[])[] =
-    getQrItemsIndex(qItems, qrItems, qItemsIndexMap);
+  const qrItemsByIndex = getQrItemsIndex(qItems, qrItems, qItemsIndexMap);
 
   return (
     <QGroupContainerBox