@aehrc/smart-forms-renderer 0.8.0 → 0.9.0

package/src/components/FormComponents/StringItem/StringItem.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';
@@ -32,23 +33,24 @@ import StringField from './StringField';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useStringCalculatedExpression from '../../../hooks/useStringCalculatedExpression';
 import useStringInput from '../../../hooks/useStringInput';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface StringItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 function StringItem(props: StringItemProps) {
-  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 {
     displayUnit,
     displayPrompt,
     displayInstructions,
-    readOnly,
     entryFormat,
     regexValidation,
     maxLength
@@ -111,7 +113,7 @@ function StringItem(props: StringItemProps) {
   }
   return (
     <FullWidthFormComponentBox data-test="q-item-string-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
         <StringField
           linkId={qItem.linkId}
           input={input}

package/src/components/FormComponents/Tables/AddRowButton.tsx

@@ -23,13 +23,14 @@ import type { RepeatGroupSingle } from '../../../interfaces/repeatGroup.interfac
 
 interface AddItemButtonProps {
   repeatGroups: RepeatGroupSingle[];
+  readOnly: boolean;
   onAddItem: () => void;
 }
 
 function AddRowButton(props: AddItemButtonProps) {
-  const { repeatGroups, onAddItem } = props;
+  const { repeatGroups, readOnly, onAddItem } = props;
 
-  const isDisabled = repeatGroups[repeatGroups.length - 1].qrItem === null;
+  const isDisabled = repeatGroups[repeatGroups.length - 1].qrItem === null || readOnly;
 
   return (
     <Box display="flex" flexDirection="row-reverse">

package/src/components/FormComponents/Tables/DeleteRowButton.tsx

@@ -26,13 +26,14 @@ import type { QuestionnaireResponseItem } from 'fhir/r4';
 interface DeleteRowButtonProps {
   nullableQrItem: QuestionnaireResponseItem | null;
   numOfRows: number;
+  readOnly: boolean;
   onDeleteItem: () => void;
 }
 
 function DeleteRowButton(props: DeleteRowButtonProps) {
-  const { nullableQrItem, numOfRows, onDeleteItem } = props;
+  const { nullableQrItem, numOfRows, readOnly, onDeleteItem } = props;
 
-  const isDisabled = nullableQrItem === null || numOfRows === 1;
+  const isDisabled = nullableQrItem === null || numOfRows === 1 || readOnly;
   return (
     <DeleteButtonTableCell>
       <Tooltip title="Delete item">

package/src/components/FormComponents/Tables/GroupTable.tsx

@@ -31,7 +31,11 @@ import GroupTableRow from './GroupTableRow';
 import { HeaderTableCell } from './Table.styles';
 import { QGroupContainerBox } from '../../Box.styles';
 import { mapQItemsIndex } from '../../../utils/mapItem';
-import type { PropsWithQrRepeatGroupChangeHandler } from '../../../interfaces/renderProps.interface';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrRepeatGroupChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import type { PropsWithShowMinimalViewAttribute } from '../../../interfaces/renderProps.interface';
 import useInitialiseGroupTable from '../../../hooks/useInitialiseGroupTable';
 import { nanoid } from 'nanoid';
 import { createEmptyQrItem } from '../../../utils/qrItem';
@@ -39,15 +43,28 @@ import DeleteRowButton from './DeleteRowButton';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import cloneDeep from 'lodash.clonedeep';
 import AddRowButton from './AddRowButton';
+import useReadOnly from '../../../hooks/useReadOnly';
 
-interface Props extends PropsWithQrRepeatGroupChangeHandler {
+interface GroupTableProps
+  extends PropsWithQrRepeatGroupChangeHandler,
+    PropsWithShowMinimalViewAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItems: QuestionnaireResponseItem[];
   groupCardElevation: number;
 }
 
-function GroupTable(props: Props) {
-  const { qItem, qrItems, groupCardElevation, onQrRepeatGroupChange } = props;
+function GroupTable(props: GroupTableProps) {
+  const {
+    qItem,
+    qrItems,
+    groupCardElevation,
+    showMinimalView,
+    parentIsReadOnly,
+    onQrRepeatGroupChange
+  } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
   const initialisedGroupTables = useInitialiseGroupTable(qrItems);
 
@@ -112,12 +129,56 @@ function GroupTable(props: Props) {
     ]);
   }
 
+  if (showMinimalView) {
+    return (
+      <QGroupContainerBox cardElevation={groupCardElevation} isRepeated={false} py={1}>
+        <TableContainer component={Paper} elevation={groupCardElevation}>
+          <Table size="small">
+            <TableHead>
+              <TableRow>
+                {itemLabels.map((itemLabel) => (
+                  <HeaderTableCell key={itemLabel} size="medium">
+                    {itemLabel}
+                  </HeaderTableCell>
+                ))}
+                <TableCell />
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {tableRows.map(({ nanoId, qrItem: nullableQrItem }, index) => {
+                const answeredQrItem = createEmptyQrItem(qItem);
+                if (nullableQrItem) {
+                  answeredQrItem.item = nullableQrItem.item;
+                }
+
+                return (
+                  <TableRow key={nanoId}>
+                    <GroupTableRow
+                      qItem={qItem}
+                      qrItem={answeredQrItem}
+                      qItemsIndexMap={qItemsIndexMap}
+                      parentIsReadOnly={parentIsReadOnly}
+                      onQrItemChange={(newQrGroup) => handleRowChange(newQrGroup, index)}
+                    />
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </QGroupContainerBox>
+    );
+  }
+
   return (
     <QGroupContainerBox cardElevation={groupCardElevation} isRepeated={false} py={3}>
       {groupCardElevation !== 1 ? (
         <>
-          <Typography fontSize={13} variant="h6">
-            <LabelWrapper qItem={qItem} />
+          <Typography
+            fontSize={13}
+            variant="h6"
+            color={readOnly ? 'text.secondary' : 'text.primary'}>
+            <LabelWrapper qItem={qItem} readOnly={readOnly} />
           </Typography>
           <Divider sx={{ my: 1 }} light />
         </>
@@ -125,7 +186,7 @@ function GroupTable(props: Props) {
       <TableContainer component={Paper} elevation={groupCardElevation}>
         <Table>
           <caption>
-            <AddRowButton repeatGroups={tableRows} onAddItem={handleAddRow} />
+            <AddRowButton repeatGroups={tableRows} readOnly={readOnly} onAddItem={handleAddRow} />
           </caption>
           <TableHead>
             <TableRow>
@@ -148,11 +209,13 @@ function GroupTable(props: Props) {
                     qItem={qItem}
                     qrItem={answeredQrItem}
                     qItemsIndexMap={qItemsIndexMap}
+                    parentIsReadOnly={parentIsReadOnly}
                     onQrItemChange={(newQrGroup) => handleRowChange(newQrGroup, index)}
                   />
                   <DeleteRowButton
                     nullableQrItem={nullableQrItem}
                     numOfRows={tableRows.length}
+                    readOnly={readOnly}
                     onDeleteItem={() => handleDeleteRow(index)}
                   />
                 </TableRow>

package/src/components/FormComponents/Tables/GroupTableRow.tsx

@@ -17,23 +17,26 @@
 
 import React from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import { createQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
+import { createEmptyQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
 import SingleItem from '../SingleItem/SingleItem';
 import { getQrItemsIndex } from '../../../utils/mapItem';
 import { StandardTableCell } from './Table.styles';
-import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
 
-interface Props extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+interface Props extends PropsWithQrItemChangeHandler, PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   qItemsIndexMap: Record<string, number>;
 }
 
 function GroupTableRow(props: Props) {
-  const { qItem, qrItem, qItemsIndexMap, onQrItemChange } = props;
+  const { qItem, qrItem, qItemsIndexMap, parentIsReadOnly, onQrItemChange } = props;
 
   const rowItems = qItem.item;
-  const row = qrItem && qrItem.item ? qrItem : createQrGroup(qItem);
+  const row = qrItem && qrItem.item ? qrItem : createEmptyQrGroup(qItem);
   const rowQrItems = row.item;
 
   if (!rowItems || !rowQrItems) {
@@ -62,9 +65,11 @@ function GroupTableRow(props: Props) {
             <SingleItem
               key={qItem.linkId}
               qItem={rowItem}
-              qrItem={qrItem}
+              qrItem={qrItem ?? null}
               isRepeated={true}
               isTabled={true}
+              showMinimalView={true}
+              parentIsReadOnly={parentIsReadOnly}
               onQrItemChange={handleQrRowItemChange}
             />
           </StandardTableCell>

package/src/components/FormComponents/TextItem/TextItem.tsx

@@ -18,6 +18,7 @@
 import React, { useCallback } from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
@@ -31,23 +32,24 @@ import TextField from './TextField';
 import useStringCalculatedExpression from '../../../hooks/useStringCalculatedExpression';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useStringInput from '../../../hooks/useStringInput';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface TextItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
-    PropsWithIsRepeatedAttribute {
+  extends PropsWithQrItemChangeHandler,
+    PropsWithIsRepeatedAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function TextItem(props: TextItemProps) {
-  const { qItem, qrItem, isRepeated, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, parentIsReadOnly, onQrItemChange } = props;
 
-  // Get additional rendering extensions
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const {
     displayUnit,
     displayPrompt,
     displayInstructions,
-    readOnly,
     entryFormat,
     regexValidation,
     maxLength
@@ -109,7 +111,7 @@ function TextItem(props: TextItemProps) {
   }
   return (
     <FullWidthFormComponentBox data-test="q-item-text-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
         <TextField
           linkId={qItem.linkId}
           input={input}

package/src/components/FormComponents/TimeItem/TimeItem.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 TimeField from './TimeField';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface TimeItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function TimeItem(props: TimeItemProps) {
-  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 timeString: string | null = null;
@@ -77,7 +79,7 @@ function TimeItem(props: TimeItemProps) {
 
   return (
     <FullWidthFormComponentBox>
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
         <TimeField
           value={timeDayJs}
           displayPrompt={displayPrompt}

package/src/components/FormComponents/UrlItem/UrlItem.tsx

@@ -19,6 +19,7 @@ import React, { useCallback, useState } from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
@@ -30,23 +31,24 @@ import { DEBOUNCE_DURATION } from '../../../utils/debounce';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import UrlField from './UrlField';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface UrlItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 function UrlItem(props: UrlItemProps) {
-  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 {
     displayUnit,
     displayPrompt,
     displayInstructions,
-    readOnly,
     entryFormat,
     regexValidation,
     maxLength
@@ -98,7 +100,7 @@ function UrlItem(props: UrlItemProps) {
   }
   return (
     <FullWidthFormComponentBox data-test="q-item-string-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
         <UrlField
           linkId={qItem.linkId}
           input={input}

package/src/components/FormComponents/index.ts

@@ -16,5 +16,8 @@
  */
 
 export * from './SingleItem';
+export * from './RepeatItem';
 export * from './RepeatGroup';
+export * from './GridGroup';
 export * from './Tables';
+export * from './CustomDateItem';

package/src/components/Renderer/BaseRenderer.tsx

@@ -35,19 +35,13 @@ function BaseRenderer() {
 
   const qItemsIndexMap = useMemo(() => mapQItemsIndex(sourceQuestionnaire), [sourceQuestionnaire]);
 
-  function handleTopLevelQRItemSingleChange(
-    newTopLevelQRItem: QuestionnaireResponseItem,
-    index: number
-  ) {
+  function handleTopLevelQRItemSingleChange(newTopLevelQRItem: QuestionnaireResponseItem) {
     const updatedResponse: QuestionnaireResponse = cloneDeep(updatableResponse);
     if (!updatedResponse.item || updatedResponse.item.length === 0) {
       return;
     }
 
-    const updatedItems = [...updatedResponse.item]; // Copy the original array of items
-    updatedItems[index] = newTopLevelQRItem; // Modify the item at the specified index
-
-    updatedResponse.item = updatedItems;
+    updateQrItemsInGroup(newTopLevelQRItem, null, updatedResponse, qItemsIndexMap);
 
     updateExpressions(updatedResponse);
     updateResponse(updatedResponse);
@@ -73,8 +67,7 @@ function BaseRenderer() {
   }
 
   // If an item has multiple answers, it is a repeat group
-  const topLevelQRItemsByIndex: (QuestionnaireResponseItem | QuestionnaireResponseItem[])[] =
-    getQrItemsIndex(topLevelQItems, topLevelQRItems, qItemsIndexMap);
+  const topLevelQRItemsByIndex = getQrItemsIndex(topLevelQItems, topLevelQRItems, qItemsIndexMap);
 
   return (
     <Fade in={true} timeout={500}>
@@ -86,9 +79,9 @@ function BaseRenderer() {
             <FormTopLevelItem
               key={qItem.linkId}
               topLevelQItem={qItem}
-              topLevelQRItemOrItems={qrItemOrItems}
+              topLevelQRItemOrItems={qrItemOrItems ?? null}
               onQrItemChange={(newTopLevelQRItem) =>
-                handleTopLevelQRItemSingleChange(newTopLevelQRItem, index)
+                handleTopLevelQRItemSingleChange(newTopLevelQRItem)
               }
               onQrRepeatGroupChange={(newTopLevelQRItems) =>
                 handleTopLevelQRItemMultipleChange(newTopLevelQRItems)

package/src/components/Renderer/FormBodyCollapsible.tsx

@@ -19,14 +19,14 @@ import React, { useMemo } from 'react';
 import Stack from '@mui/material/Stack';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
-import { updateQrItemsInGroup } from '../../utils/qrItem';
+import { createEmptyQrGroup, updateQrItemsInGroup } from '../../utils/qrItem';
 import type { PropsWithQrItemChangeHandler } from '../../interfaces/renderProps.interface';
 import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
 import FormBodySingleCollapsibleWrapper from './FormBodySingleCollapsibleWrapper';
 
-interface FormBodyCollapsibleProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+interface FormBodyCollapsibleProps extends PropsWithQrItemChangeHandler {
   topLevelQItem: QuestionnaireItem;
-  topLevelQRItem: QuestionnaireResponseItem;
+  topLevelQRItem: QuestionnaireResponseItem | null;
 }
 
 function FormBodyCollapsibleWrapper(props: FormBodyCollapsibleProps) {
@@ -42,12 +42,14 @@ function FormBodyCollapsibleWrapper(props: FormBodyCollapsibleProps) {
     [topLevelQItem]
   );
 
+  const nonNullTopLevelQRItem = topLevelQRItem ?? createEmptyQrGroup(topLevelQItem);
+
   const qItems = topLevelQItem.item;
-  const qrItems = topLevelQRItem.item;
+  const qrItems = nonNullTopLevelQRItem.item;
 
   function handleQrGroupChange(qrItem: QuestionnaireResponseItem) {
-    updateQrItemsInGroup(qrItem, null, topLevelQRItem, indexMap);
-    onQrItemChange(topLevelQRItem);
+    updateQrItemsInGroup(qrItem, null, nonNullTopLevelQRItem, indexMap);
+    onQrItemChange(nonNullTopLevelQRItem);
   }
 
   if (!qItems || !qrItems) {
@@ -81,7 +83,7 @@ function FormBodyCollapsibleWrapper(props: FormBodyCollapsibleProps) {
           <FormBodySingleCollapsibleWrapper
             key={qItem.linkId}
             qItem={qItem}
-            qrItem={qrItem}
+            qrItem={qrItem ?? null}
             index={i}
             selectedIndex={currentTab}
             onToggleExpand={handleToggleExpand}

package/src/components/Renderer/FormBodySingleCollapsibleWrapper.tsx

@@ -22,10 +22,9 @@ import FormBodySingleCollapsible from './FormBodySingleCollapsible';
 import type { PropsWithQrItemChangeHandler } from '../../interfaces/renderProps.interface';
 import useHidden from '../../hooks/useHidden';
 
-interface FormBodySingleCollapsibleProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+interface FormBodySingleCollapsibleProps extends PropsWithQrItemChangeHandler {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   index: number;
   selectedIndex: number;
   onToggleExpand: (index: number) => void;

package/src/components/Renderer/FormBodyTabbed.tsx

@@ -22,14 +22,14 @@ import TabContext from '@mui/lab/TabContext';
 import TabPanel from '@mui/lab/TabPanel';
 import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
 import GroupItem from '../FormComponents/GroupItem/GroupItem';
-import { updateQrItemsInGroup } from '../../utils/qrItem';
+import { createEmptyQrGroup, updateQrItemsInGroup } from '../../utils/qrItem';
 import FormBodyTabListWrapper from '../Tabs/FormBodyTabListWrapper';
 import type { PropsWithQrItemChangeHandler } from '../../interfaces/renderProps.interface';
 import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
 
-interface FormBodyTabbedProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+interface FormBodyTabbedProps extends PropsWithQrItemChangeHandler {
   topLevelQItem: QuestionnaireItem;
-  topLevelQRItem: QuestionnaireResponseItem;
+  topLevelQRItem: QuestionnaireResponseItem | null;
 }
 
 function FormBodyTabbed(props: FormBodyTabbedProps) {
@@ -43,12 +43,14 @@ function FormBodyTabbed(props: FormBodyTabbedProps) {
     [topLevelQItem]
   );
 
+  const nonNullTopLevelQRItem = topLevelQRItem ?? createEmptyQrGroup(topLevelQItem);
+
   const qItems = topLevelQItem.item;
-  const qrItems = topLevelQRItem.item;
+  const qrItems = nonNullTopLevelQRItem.item;
 
   function handleQrGroupChange(qrItem: QuestionnaireResponseItem) {
-    updateQrItemsInGroup(qrItem, null, topLevelQRItem, indexMap);
-    onQrItemChange(topLevelQRItem);
+    updateQrItemsInGroup(qrItem, null, nonNullTopLevelQRItem, indexMap);
+    onQrItemChange(nonNullTopLevelQRItem);
   }
 
   if (!qItems || !qrItems) {
@@ -87,7 +89,7 @@ function FormBodyTabbed(props: FormBodyTabbedProps) {
                 data-test="renderer-tab-panel">
                 <GroupItem
                   qItem={qItem}
-                  qrItem={qrItem}
+                  qrItem={qrItem ?? null}
                   isRepeated={isRepeated}
                   groupCardElevation={1}
                   tabIsMarkedAsComplete={tabIsMarkedAsComplete}

package/src/components/Renderer/FormTopLevelItem.tsx

@@ -29,12 +29,14 @@ import FormBodyCollapsible from './FormBodyCollapsible';
 import useResponsive from '../../hooks/useResponsive';
 import useHidden from '../../hooks/useHidden';
 import GroupItemSwitcher from '../FormComponents/GroupItem/GroupItemSwitcher';
+import useReadOnly from '../../hooks/useReadOnly';
+import Box from '@mui/material/Box';
 
 interface FormTopLevelItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithQrRepeatGroupChangeHandler {
   topLevelQItem: QuestionnaireItem;
-  topLevelQRItemOrItems: QuestionnaireResponseItem | QuestionnaireResponseItem[];
+  topLevelQRItemOrItems: QuestionnaireResponseItem | QuestionnaireResponseItem[] | null;
 }
 
 function FormTopLevelItem(props: FormTopLevelItemProps) {
@@ -43,10 +45,11 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
   const itemIsTabContainer = isTabContainer(topLevelQItem);
   const itemContainsTabs = containsTabs(topLevelQItem);
 
-  const isDesktop = useResponsive('up', 'lg');
+  const isTablet = useResponsive('up', 'md');
 
   const itemIsGroup = topLevelQItem.type === 'group';
 
+  const readOnly = useReadOnly(topLevelQItem, false);
   const itemIsHidden = useHidden(topLevelQItem);
   if (itemIsHidden) {
     return null;
@@ -60,6 +63,7 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
         qItem={topLevelQItem}
         qrItemOrItems={topLevelQRItemOrItems}
         groupCardElevation={1}
+        parentIsReadOnly={readOnly}
         onQrItemChange={onQrItemChange}
         onQrRepeatGroupChange={onQrRepeatGroupChange}
       />
@@ -71,7 +75,7 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
 
   // If form is tabbed, it is rendered as a tabbed form
   if (itemContainsTabs || itemIsTabContainer) {
-    if (isDesktop) {
+    if (isTablet) {
       return (
         <FormBodyTabbed
           key={topLevelQItem.linkId}
@@ -100,22 +104,26 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
         qItem={topLevelQItem}
         qrItem={topLevelQRItem}
         groupCardElevation={1}
-        onQrItemChange={onQrItemChange}
         isRepeated={false}
+        parentIsReadOnly={readOnly}
+        onQrItemChange={onQrItemChange}
       />
     );
   }
 
   // Otherwise, it is rendered as a non-group item
   return (
-    <SingleItem
-      key={topLevelQItem.linkId}
-      qItem={topLevelQItem}
-      qrItem={topLevelQRItem}
-      isTabled={false}
-      onQrItemChange={onQrItemChange}
-      isRepeated={false}
-    />
+    <Box pt={1}>
+      <SingleItem
+        key={topLevelQItem.linkId}
+        qItem={topLevelQItem}
+        qrItem={topLevelQRItem}
+        isRepeated={false}
+        isTabled={false}
+        parentIsReadOnly={readOnly}
+        onQrItemChange={onQrItemChange}
+      />
+    </Box>
   );
 }
 

package/src/components/Tabs/FormBodySingleTab.tsx

@@ -46,7 +46,7 @@ const FormBodySingleTab = memo(function FormBodySingleTab(props: FormBodySingleT
     <>
       <ListItemButton
         selected={selected}
-        sx={{ my: 0.15, minHeight: '36px' }}
+        sx={{ my: 0.1, minHeight: '36px' }}
         onClick={handleTabClick}>
         <ListItemText
           primary={

package/src/components/Tabs/ShowCompletedTabsSection.tsx

@@ -34,7 +34,7 @@ function ShowCompletedTabsSection(props: ShowCompletedTabsSectionProps) {
     <Box display="flex" justifyContent="center" alignItems="center" mx={2} columnGap={0.5}>
       <Typography
         variant="overline"
-        fontSize={9}
+        fontSize={8.5}
         color={completedTabsExpanded ? 'text.secondary' : 'text.disabled'}>
         Completed tabs {completedTabsExpanded ? 'shown' : 'hidden'}
       </Typography>