@aehrc/smart-forms-renderer 0.8.0 → 0.9.0

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

@@ -19,6 +19,7 @@ import React from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
@@ -29,21 +30,22 @@ import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import DateField from './DateField';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface DateItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function DateItem(props: DateItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
-  // Get additional rendering extensions
-  const { displayPrompt, displayInstructions, readOnly, entryFormat } =
-    useRenderingExtensions(qItem);
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const { displayPrompt, displayInstructions, entryFormat } = useRenderingExtensions(qItem);
 
   // Init input value
   let dateString: string | null = null;
@@ -83,7 +85,7 @@ function DateItem(props: DateItemProps) {
 
   return (
     <FullWidthFormComponentBox data-test="q-item-date-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
         <DateField
           value={dateDayJs}
           displayPrompt={displayPrompt}

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

@@ -19,6 +19,7 @@ import React from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
@@ -29,21 +30,22 @@ import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import DateTimeField from './DateTimeField';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface DateTimeItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function DateTimeItem(props: DateTimeItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
-  // Get additional rendering extensions
-  const { displayPrompt, displayInstructions, readOnly, entryFormat } =
-    useRenderingExtensions(qItem);
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const { displayPrompt, displayInstructions, entryFormat } = useRenderingExtensions(qItem);
 
   // Init input value
   let dateTimeString: string | null = null;
@@ -81,7 +83,7 @@ function DateTimeItem(props: DateTimeItemProps) {
 
   return (
     <FullWidthFormComponentBox data-test="q-item-date-time-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
         <DateTimeField
           value={dateTimeDayJs}
           displayPrompt={displayPrompt}

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

@@ -19,6 +19,7 @@ import React, { useCallback } from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
@@ -27,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 {
@@ -37,25 +38,26 @@ import {
 import { getDecimalPrecision } from '../../../utils/itemControl';
 import useDecimalCalculatedExpression from '../../../hooks/useDecimalCalculatedExpression';
 import useStringInput from '../../../hooks/useStringInput';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface DecimalItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function DecimalItem(props: DecimalItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
-  // Get additional rendering extensions
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const precision = getDecimalPrecision(qItem);
   const {
     displayUnit,
     displayPrompt,
     displayInstructions,
-    readOnly,
     entryFormat,
     regexValidation,
     maxLength
@@ -84,7 +86,6 @@ function DecimalItem(props: DecimalItemProps) {
   const { calcExpUpdated } = useDecimalCalculatedExpression({
     qItem: qItem,
     inputValue: input,
-    displayUnit: displayUnit,
     precision: precision,
     setInputValue: (newInput) => {
       setInput(newInput);
@@ -104,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) }]
@@ -132,7 +133,7 @@ function DecimalItem(props: DecimalItemProps) {
 
   return (
     <FullWidthFormComponentBox data-test="q-item-decimal-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
         <DecimalField
           linkId={qItem.linkId}
           input={input}

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,20 +15,25 @@
  * 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;
 }
 
 const DisplayInstructions = memo(function DisplayInstructions(props: DisplayInstructionsProps) {
-  const { displayInstructions } = props;
+  const { displayInstructions, readOnly } = props;
 
   return displayInstructions ? (
     <DisplayInstructionsWrapper>
-      <Typography variant="caption" fontSize={10.5}>
+      <Typography
+        variant="caption"
+        fontSize={10.5}
+        color={readOnly ? 'text.secondary' : 'text.primary'}>
         {displayInstructions}
       </Typography>
     </DisplayInstructionsWrapper>

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

@@ -18,7 +18,7 @@
 import React, { memo } from 'react';
 import type { QuestionnaireItem } from 'fhir/r4';
 import { FullWidthFormComponentBox } from '../../Box.styles';
-import { isSpecificItemControl } from '../../../utils/itemControl';
+import { isSpecificItemControl } from '../../../utils';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 
 interface DisplayItemProps {
@@ -35,7 +35,7 @@ const DisplayItem = memo(function DisplayItem(props: DisplayItemProps) {
 
   return (
     <FullWidthFormComponentBox>
-      <LabelWrapper qItem={qItem} />
+      <LabelWrapper qItem={qItem} readOnly={false} />
     </FullWidthFormComponentBox>
   );
 });

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

@@ -17,8 +17,12 @@
 
 import React, { useMemo } from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
-import { createQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler,
+  PropsWithShowMinimalViewAttribute
+} from '../../../interfaces/renderProps.interface';
+import { createEmptyQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
 import useHidden from '../../../hooks/useHidden';
 import { QGroupContainerBox } from '../../Box.styles';
 import Divider from '@mui/material/Divider';
@@ -28,18 +32,23 @@ import Typography from '@mui/material/Typography';
 import { mapQItemsIndex } from '../../../utils/mapItem';
 import GridTable from './GridTable';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import useReadOnly from '../../../hooks/useReadOnly';
 
-interface GridGroupProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+interface GridGroupProps
+  extends PropsWithQrItemChangeHandler,
+    PropsWithShowMinimalViewAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   groupCardElevation: number;
 }
 
 function GridGroup(props: GridGroupProps) {
-  const { qItem, qrItem, groupCardElevation, 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]);
@@ -49,6 +58,7 @@ function GridGroup(props: GridGroupProps) {
     [qRowItems]
   );
 
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const itemIsHidden = useHidden(qItem);
   if (itemIsHidden) {
     return null;
@@ -70,25 +80,49 @@ function GridGroup(props: GridGroupProps) {
     onQrItemChange(updatedQrGroup);
   }
 
-  return (
-    <>
-      <QGroupContainerBox cardElevation={groupCardElevation} isRepeated={false} py={3}>
-        <Typography fontSize={13} variant="h6">
-          <LabelWrapper qItem={qItem} />
-        </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,26 +17,29 @@
 
 import React, { useMemo } from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import type { PropsWithQrItemChangeHandler } 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> {
+interface GridRowProps extends PropsWithQrItemChangeHandler, PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   columnLabels: string[];
   numOfColumns: number;
 }
 
 function GridRow(props: GridRowProps) {
-  const { qItem, qrItem, columnLabels, numOfColumns, onQrItemChange } = props;
+  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]);
@@ -79,9 +82,11 @@ 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}
             />
           </GridAnswerTableCell>

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

@@ -25,9 +25,16 @@ 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,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import type { PropsWithShowMinimalViewAttribute } from '../../../interfaces/renderProps.interface';
 
-interface GridTableProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+interface GridTableProps
+  extends PropsWithQrItemChangeHandler,
+    PropsWithShowMinimalViewAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItems: QuestionnaireItem[];
   qrItems: QuestionnaireResponseItem[];
   qItemsIndexMap: Record<string, number>;
@@ -35,20 +42,31 @@ interface GridTableProps extends PropsWithQrItemChangeHandler<QuestionnaireRespo
 }
 
 function GridTable(props: GridTableProps) {
-  const { qItems, qrItems, qItemsIndexMap, columnLabels, 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>
@@ -61,13 +79,19 @@ 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}
                 onQrItemChange={onQrItemChange}
               />
             </TableRow>

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/GroupHeading.tsx

@@ -18,20 +18,21 @@
 import React, { memo } from 'react';
 import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
-import { QGroupHeadingTypography } from '../Typography.styles';
+import Typography from '@mui/material/Typography';
 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';
+import ItemLabelText from '../ItemParts/ItemLabelText';
 
 interface GroupHeadingProps extends PropsWithIsRepeatedAttribute {
   qItem: QuestionnaireItem;
+  readOnly: boolean;
   tabIsMarkedAsComplete?: boolean;
 }
 
 const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
-  const { qItem, tabIsMarkedAsComplete, isRepeated } = props;
+  const { qItem, readOnly, tabIsMarkedAsComplete, isRepeated } = props;
 
   const contextDisplayItems = getContextDisplays(qItem);
 
@@ -39,12 +40,17 @@ const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
     return null;
   }
 
+  const isTabHeading = tabIsMarkedAsComplete !== undefined;
+
   return (
     <>
       <Box display="flex" alignItems="center" justifyContent="space-between">
-        <QGroupHeadingTypography variant="h6" isTabHeading={tabIsMarkedAsComplete !== undefined}>
-          <LabelText qItem={qItem} />
-        </QGroupHeadingTypography>
+        <Typography
+          variant="h6"
+          fontSize={isTabHeading ? 16 : 15}
+          color={readOnly && !isTabHeading ? 'text.secondary' : 'text.primary'}>
+          <ItemLabelText qItem={qItem} />
+        </Typography>
 
         <Box display="flex" columnGap={0.5}>
           {contextDisplayItems.map((item) => {

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

@@ -18,10 +18,11 @@
 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,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QrRepeatGroup } from '../../../interfaces/repeatGroup.interface';
@@ -31,17 +32,18 @@ import GroupHeading from './GroupHeading';
 import { GroupCard } from './GroupItem.styles';
 import NextTabButtonWrapper from './NextTabButtonWrapper';
 import GroupItemSwitcher from './GroupItemSwitcher';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface GroupItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
-    PropsWithIsRepeatedAttribute {
+  extends PropsWithQrItemChangeHandler,
+    PropsWithIsRepeatedAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   groupCardElevation: number;
   tabIsMarkedAsComplete?: boolean;
   tabs?: Tabs;
   currentTabIndex?: number;
-  goToNextTab?: (nextTabIndex: number) => unknown;
 }
 
 function GroupItem(props: GroupItemProps) {
@@ -53,18 +55,20 @@ function GroupItem(props: GroupItemProps) {
     tabIsMarkedAsComplete,
     tabs,
     currentTabIndex,
+    parentIsReadOnly,
     onQrItemChange
   } = props;
 
   const qItemsIndexMap = useMemo(() => mapQItemsIndex(qItem), [qItem]);
 
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const itemIsHidden = useHidden(qItem);
   if (itemIsHidden) {
     return null;
   }
 
   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
@@ -85,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
@@ -96,6 +99,7 @@ function GroupItem(props: GroupItemProps) {
       <GroupCard elevation={groupCardElevation} isRepeated={isRepeated}>
         <GroupHeading
           qItem={qItem}
+          readOnly={readOnly}
           tabIsMarkedAsComplete={tabIsMarkedAsComplete}
           isRepeated={isRepeated}
         />
@@ -108,6 +112,7 @@ function GroupItem(props: GroupItemProps) {
               qItem={qItem}
               qrItemOrItems={qrItemOrItems}
               groupCardElevation={groupCardElevation}
+              parentIsReadOnly={readOnly}
               onQrItemChange={handleQrItemChange}
               onQrRepeatGroupChange={handleQrRepeatGroupChange}
             />