@aehrc/smart-forms-renderer 0.12.0 → 0.13.0

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceSelectAnswerOptionItem.tsx

@@ -16,7 +16,6 @@
  */
 
 import React from 'react';
-import Grid from '@mui/material/Grid';
 import type {
   QuestionnaireItem,
   QuestionnaireItemAnswerOption,
@@ -31,10 +30,9 @@ import type {
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
-import DisplayInstructions from '../DisplayItem/DisplayInstructions';
-import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import OpenChoiceSelectAnswerOptionField from './OpenChoiceSelectAnswerOptionField';
 import useReadOnly from '../../../hooks/useReadOnly';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 
 interface OpenChoiceSelectAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler,
@@ -49,7 +47,7 @@ function OpenChoiceSelectAnswerOptionItem(props: OpenChoiceSelectAnswerOptionIte
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions } = useRenderingExtensions(qItem);
+  const { displayInstructions, required } = useRenderingExtensions(qItem);
 
   // Init input value
   const answerOptions = qItem.answerOption;
@@ -109,22 +107,20 @@ function OpenChoiceSelectAnswerOptionItem(props: OpenChoiceSelectAnswerOptionIte
 
   return (
     <FullWidthFormComponentBox data-test="q-item-open-choice-select-answer-option-box">
-      <Grid container columnSpacing={6}>
-        <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} readOnly={readOnly} />
-        </Grid>
-        <Grid item xs={7}>
-          <OpenChoiceSelectAnswerOptionField
-            qItem={qItem}
-            options={answerOptions}
-            valueSelect={valueSelect}
-            readOnly={readOnly}
-            isTabled={isTabled}
-            onChange={handleChange}
-          />
-          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
-        </Grid>
-      </Grid>
+      <ItemFieldGrid
+        qItem={qItem}
+        displayInstructions={displayInstructions}
+        required={required}
+        readOnly={readOnly}>
+        <OpenChoiceSelectAnswerOptionField
+          qItem={qItem}
+          options={answerOptions}
+          valueSelect={valueSelect}
+          readOnly={readOnly}
+          isTabled={isTabled}
+          onChange={handleChange}
+        />
+      </ItemFieldGrid>
     </FullWidthFormComponentBox>
   );
 }

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceSelectAnswerValueSetItem.tsx

@@ -16,7 +16,6 @@
  */
 
 import React from 'react';
-import Grid from '@mui/material/Grid';
 import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
@@ -28,10 +27,9 @@ import type {
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
-import DisplayInstructions from '../DisplayItem/DisplayInstructions';
-import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import OpenChoiceSelectAnswerValueSetField from './OpenChoiceSelectAnswerValueSetField';
 import useReadOnly from '../../../hooks/useReadOnly';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 
 interface OpenChoiceSelectAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler,
@@ -46,7 +44,7 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions } = useRenderingExtensions(qItem);
+  const { displayInstructions, required } = useRenderingExtensions(qItem);
 
   // Init input value
   const qrOpenChoice = qrItem ?? createEmptyQrItem(qItem);
@@ -93,23 +91,21 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
 
   return (
     <FullWidthFormComponentBox>
-      <Grid container columnSpacing={6}>
-        <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} readOnly={readOnly} />
-        </Grid>
-        <Grid item xs={7}>
-          <OpenChoiceSelectAnswerValueSetField
-            qItem={qItem}
-            options={codings}
-            valueSelect={valueSelect}
-            serverError={serverError}
-            isTabled={isTabled}
-            readOnly={readOnly}
-            onValueChange={handleValueChange}
-          />
-          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
-        </Grid>
-      </Grid>
+      <ItemFieldGrid
+        qItem={qItem}
+        displayInstructions={displayInstructions}
+        required={required}
+        readOnly={readOnly}>
+        <OpenChoiceSelectAnswerValueSetField
+          qItem={qItem}
+          options={codings}
+          valueSelect={valueSelect}
+          serverError={serverError}
+          isTabled={isTabled}
+          readOnly={readOnly}
+          onValueChange={handleValueChange}
+        />
+      </ItemFieldGrid>
     </FullWidthFormComponentBox>
   );
 }

package/src/components/FormComponents/RepeatItem/RepeatItem.tsx

@@ -18,9 +18,9 @@
 import React, { useState } from 'react';
 import type {
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
-import type { PropsWithShowMinimalViewAttribute } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { nanoid } from 'nanoid';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
@@ -46,7 +46,7 @@ function RepeatItem(props: RepeatItemProps) {
   const { qItem, qrItem, showMinimalView, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions } = useRenderingExtensions(qItem);
+  const { displayInstructions, required } = useRenderingExtensions(qItem);
 
   const initialRepeatAnswers = useInitialiseRepeatAnswers(qItem, qrItem);
 
@@ -119,7 +119,11 @@ function RepeatItem(props: RepeatItemProps) {
 
   return (
     <FullWidthFormComponentBox data-test="q-item-repeat-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
+      <ItemFieldGrid
+        qItem={qItem}
+        displayInstructions={displayInstructions}
+        required={required}
+        readOnly={readOnly}>
         <TransitionGroup>
           {repeatAnswers.map(({ nanoId, answer }, index) => {
             const repeatAnswerQrItem = createEmptyQrItem(qItem);

package/src/components/FormComponents/SliderItem/SliderItem.tsx

@@ -45,7 +45,7 @@ function SliderItem(props: SliderItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayInstructions } = useRenderingExtensions(qItem);
+  const { displayInstructions, required } = useRenderingExtensions(qItem);
   const { minValue, maxValue, stepValue, minLabel, maxLabel } = useSliderExtensions(qItem);
 
   const isInteracted = !!qrItem?.answer;
@@ -91,7 +91,11 @@ function SliderItem(props: SliderItemProps) {
 
   return (
     <FullWidthFormComponentBox data-test="q-item-slider-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
+      <ItemFieldGrid
+        qItem={qItem}
+        displayInstructions={displayInstructions}
+        required={required}
+        readOnly={readOnly}>
         <Box px={4}>
           <SliderField
             linkId={qItem.linkId}

package/src/components/FormComponents/StringItem/StringItem.tsx

@@ -24,7 +24,7 @@ import type {
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
-import useValidationError from '../../../hooks/useValidationError';
+import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import debounce from 'lodash.debounce';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { DEBOUNCE_DURATION } from '../../../utils/debounce';
@@ -52,7 +52,9 @@ function StringItem(props: StringItemProps) {
     displayPrompt,
     displayInstructions,
     entryFormat,
+    required,
     regexValidation,
+    minLength,
     maxLength
   } = useRenderingExtensions(qItem);
 
@@ -64,7 +66,7 @@ function StringItem(props: StringItemProps) {
   const [input, setInput] = useStringInput(valueString);
 
   // Perform validation checks
-  const feedback = useValidationError(input, regexValidation, maxLength);
+  const feedback = useValidationFeedback(input, regexValidation, minLength, maxLength);
 
   // Process calculated expressions
   const { calcExpUpdated } = useStringCalculatedExpression({
@@ -113,7 +115,11 @@ function StringItem(props: StringItemProps) {
   }
   return (
     <FullWidthFormComponentBox data-test="q-item-string-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
+      <ItemFieldGrid
+        qItem={qItem}
+        displayInstructions={displayInstructions}
+        required={required}
+        readOnly={readOnly}>
         <StringField
           linkId={qItem.linkId}
           input={input}

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

@@ -51,8 +51,6 @@ function GroupTable(props: GroupTableProps) {
     onQrRepeatGroupChange
   } = props;
 
-  // console.log(qrItems);
-
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
   const { tableRows, selectedIds, setTableRows, setSelectedIds } = useGroupTableRows(qrItems);

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

@@ -88,12 +88,16 @@ function GroupTableRow(props: GroupTableRowProps) {
                   display="flex"
                   alignItems="center"
                   justifyContent="center"
-                  {...draggableProvided.dragHandleProps}>
-                  <DragIndicator fontSize="small" />
+                  {...(readOnly ? {} : draggableProvided.dragHandleProps)}>
+                  <DragIndicator
+                    fontSize="small"
+                    sx={{ color: readOnly ? 'text.disabled' : 'inherit' }}
+                  />
                 </Box>
               </TableCell>
               <SelectRowButton
                 isSelected={itemIsSelected}
+                readOnly={readOnly}
                 onSelectItem={() => onSelectRow(nanoId)}
               />
             </>

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

@@ -138,6 +138,7 @@ function GroupTableView(props: GroupTableViewProps) {
                   size="small"
                   indeterminate={selectedIds.length > 0 && selectedIds.length < tableRows.length}
                   checked={tableRows.length > 0 && selectedIds.length === tableRows.length}
+                  disabled={readOnly}
                   onChange={onSelectAll}
                 />
               </HeaderTableCell>

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

@@ -21,15 +21,22 @@ import TableCell from '@mui/material/TableCell';
 
 interface SelectRowButtonProps {
   isSelected: boolean;
+  readOnly: boolean;
   onSelectItem: () => void;
 }
 
 function SelectRowButton(props: SelectRowButtonProps) {
-  const { isSelected, onSelectItem } = props;
+  const { isSelected, readOnly, onSelectItem } = props;
 
   return (
     <TableCell padding="checkbox">
-      <Checkbox color="primary" size="small" checked={isSelected} onChange={onSelectItem} />
+      <Checkbox
+        color="primary"
+        size="small"
+        checked={isSelected}
+        disabled={readOnly}
+        onChange={onSelectItem}
+      />
     </TableCell>
   );
 }

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

@@ -23,7 +23,7 @@ import type {
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
-import useValidationError from '../../../hooks/useValidationError';
+import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import debounce from 'lodash.debounce';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { DEBOUNCE_DURATION } from '../../../utils/debounce';
@@ -51,7 +51,9 @@ function TextItem(props: TextItemProps) {
     displayPrompt,
     displayInstructions,
     entryFormat,
+    required,
     regexValidation,
+    minLength,
     maxLength
   } = useRenderingExtensions(qItem);
 
@@ -63,7 +65,7 @@ function TextItem(props: TextItemProps) {
   const [input, setInput] = useStringInput(valueText);
 
   // Perform validation checks
-  const feedback = useValidationError(input, regexValidation, maxLength);
+  const feedback = useValidationFeedback(input, regexValidation, minLength, maxLength);
 
   // Process calculated expressions
   const { calcExpUpdated } = useStringCalculatedExpression({
@@ -111,7 +113,11 @@ function TextItem(props: TextItemProps) {
   }
   return (
     <FullWidthFormComponentBox data-test="q-item-text-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
+      <ItemFieldGrid
+        qItem={qItem}
+        displayInstructions={displayInstructions}
+        required={required}
+        readOnly={readOnly}>
         <TextField
           linkId={qItem.linkId}
           input={input}

package/src/components/FormComponents/TimeItem/TimeItem.tsx

@@ -45,7 +45,8 @@ function TimeItem(props: TimeItemProps) {
   const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayPrompt, displayInstructions, entryFormat } = useRenderingExtensions(qItem);
+  const { displayPrompt, displayInstructions, entryFormat, required } =
+    useRenderingExtensions(qItem);
 
   // Init input value
   let timeString: string | null = null;
@@ -79,7 +80,11 @@ function TimeItem(props: TimeItemProps) {
 
   return (
     <FullWidthFormComponentBox>
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
+      <ItemFieldGrid
+        qItem={qItem}
+        displayInstructions={displayInstructions}
+        required={required}
+        readOnly={readOnly}>
         <TimeField
           value={timeDayJs}
           displayPrompt={displayPrompt}

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

@@ -24,7 +24,7 @@ import type {
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
-import useValidationError from '../../../hooks/useValidationError';
+import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import debounce from 'lodash.debounce';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { DEBOUNCE_DURATION } from '../../../utils/debounce';
@@ -50,7 +50,9 @@ function UrlItem(props: UrlItemProps) {
     displayPrompt,
     displayInstructions,
     entryFormat,
+    required,
     regexValidation,
+    minLength,
     maxLength
   } = useRenderingExtensions(qItem);
 
@@ -62,7 +64,7 @@ function UrlItem(props: UrlItemProps) {
   const [input, setInput] = useState(valueUri);
 
   // Perform validation checks
-  const feedback = useValidationError(input, regexValidation, maxLength);
+  const feedback = useValidationFeedback(input, regexValidation, minLength, maxLength);
 
   // Event handlers
   function handleChange(newInput: string) {
@@ -100,7 +102,11 @@ function UrlItem(props: UrlItemProps) {
   }
   return (
     <FullWidthFormComponentBox data-test="q-item-string-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
+      <ItemFieldGrid
+        qItem={qItem}
+        displayInstructions={displayInstructions}
+        required={required}
+        readOnly={readOnly}>
         <UrlField
           linkId={qItem.linkId}
           input={input}

package/src/components/Renderer/BaseRenderer.tsx

@@ -29,9 +29,15 @@ import type { QrRepeatGroup } from '../../interfaces/repeatGroup.interface';
 function BaseRenderer() {
   const sourceQuestionnaire = useQuestionnaireStore.use.sourceQuestionnaire();
   const updateExpressions = useQuestionnaireStore.use.updateExpressions();
+  const readOnly = useQuestionnaireStore.use.readOnly();
+
   const updatableResponse = useQuestionnaireResponseStore.use.updatableResponse();
+  const updateRequiredValidity = useQuestionnaireResponseStore.use.validateQuestionnaire();
   const updateResponse = useQuestionnaireResponseStore.use.updateResponse();
 
+  const invalidItems = useQuestionnaireResponseStore.use.invalidItems();
+  const responseIsValid = useQuestionnaireResponseStore.use.responseIsValid();
+
   const qItemsIndexMap = useMemo(() => mapQItemsIndex(sourceQuestionnaire), [sourceQuestionnaire]);
 
   function handleTopLevelQRItemSingleChange(newTopLevelQRItem: QuestionnaireResponseItem) {
@@ -43,6 +49,7 @@ function BaseRenderer() {
     updateQrItemsInGroup(newTopLevelQRItem, null, updatedResponse, qItemsIndexMap);
 
     updateExpressions(updatedResponse);
+    updateRequiredValidity(sourceQuestionnaire, updatedResponse);
     updateResponse(updatedResponse);
   }
 
@@ -55,6 +62,7 @@ function BaseRenderer() {
     updateQrItemsInGroup(null, newTopLevelQRItems, updatedResponse, qItemsIndexMap);
 
     updateExpressions(updatedResponse);
+    updateRequiredValidity(sourceQuestionnaire, updatedResponse);
     updateResponse(updatedResponse);
   }
 
@@ -68,6 +76,9 @@ function BaseRenderer() {
   // If an item has multiple answers, it is a repeat group
   const topLevelQRItemsByIndex = getQrItemsIndex(topLevelQItems, topLevelQRItems, qItemsIndexMap);
 
+  console.log(invalidItems);
+  console.log(responseIsValid);
+
   return (
     <Fade in={true} timeout={500}>
       <Container maxWidth="xl">
@@ -79,6 +90,7 @@ function BaseRenderer() {
               key={qItem.linkId}
               topLevelQItem={qItem}
               topLevelQRItemOrItems={qrItemOrItems ?? null}
+              parentIsReadOnly={readOnly}
               onQrItemChange={(newTopLevelQRItem) =>
                 handleTopLevelQRItemSingleChange(newTopLevelQRItem)
               }

package/src/components/Renderer/FormBodyCollapsible.tsx

@@ -20,17 +20,22 @@ import Stack from '@mui/material/Stack';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
 import { createEmptyQrGroup, updateQrItemsInGroup } from '../../utils/qrItem';
-import type { PropsWithQrItemChangeHandler } from '../../interfaces/renderProps.interface';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../stores';
 import FormBodySingleCollapsibleWrapper from './FormBodySingleCollapsibleWrapper';
 
-interface FormBodyCollapsibleProps extends PropsWithQrItemChangeHandler {
+interface FormBodyCollapsibleProps
+  extends PropsWithQrItemChangeHandler,
+    PropsWithParentIsReadOnlyAttribute {
   topLevelQItem: QuestionnaireItem;
   topLevelQRItem: QuestionnaireResponseItem | null;
 }
 
 function FormBodyCollapsibleWrapper(props: FormBodyCollapsibleProps) {
-  const { topLevelQItem, topLevelQRItem, onQrItemChange } = props;
+  const { topLevelQItem, topLevelQRItem, parentIsReadOnly, onQrItemChange } = props;
 
   const tabs = useQuestionnaireStore.use.tabs();
   const currentTab = useQuestionnaireStore.use.currentTabIndex();
@@ -85,6 +90,7 @@ function FormBodyCollapsibleWrapper(props: FormBodyCollapsibleProps) {
             qrItem={qrItem ?? null}
             index={i}
             selectedIndex={currentTab}
+            parentIsReadOnly={parentIsReadOnly}
             onToggleExpand={handleToggleExpand}
             onQrItemChange={handleQrGroupChange}
           />

package/src/components/Renderer/FormBodySingleCollapsibleWrapper.tsx

@@ -19,10 +19,15 @@ import React from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import GroupItem from '../FormComponents/GroupItem/GroupItem';
 import FormBodySingleCollapsible from './FormBodySingleCollapsible';
-import type { PropsWithQrItemChangeHandler } from '../../interfaces/renderProps.interface';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../interfaces/renderProps.interface';
 import useHidden from '../../hooks/useHidden';
 
-interface FormBodySingleCollapsibleProps extends PropsWithQrItemChangeHandler {
+interface FormBodySingleCollapsibleProps
+  extends PropsWithQrItemChangeHandler,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
   index: number;
@@ -31,7 +36,8 @@ interface FormBodySingleCollapsibleProps extends PropsWithQrItemChangeHandler {
 }
 
 function FormBodySingleCollapsibleWrapper(props: FormBodySingleCollapsibleProps) {
-  const { qItem, qrItem, index, selectedIndex, onToggleExpand, onQrItemChange } = props;
+  const { qItem, qrItem, index, selectedIndex, parentIsReadOnly, onToggleExpand, onQrItemChange } =
+    props;
 
   const itemIsHidden = useHidden(qItem);
   if (itemIsHidden) {
@@ -50,6 +56,7 @@ function FormBodySingleCollapsibleWrapper(props: FormBodySingleCollapsibleProps)
         qrItem={qrItem}
         isRepeated={true}
         groupCardElevation={1}
+        parentIsReadOnly={parentIsReadOnly}
         onQrItemChange={onQrItemChange}
       />
     </FormBodySingleCollapsible>

package/src/components/Renderer/FormBodyTabbed.tsx

@@ -24,16 +24,21 @@ import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
 import GroupItem from '../FormComponents/GroupItem/GroupItem';
 import { createEmptyQrGroup, updateQrItemsInGroup } from '../../utils/qrItem';
 import FormBodyTabListWrapper from '../Tabs/FormBodyTabListWrapper';
-import type { PropsWithQrItemChangeHandler } from '../../interfaces/renderProps.interface';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../stores';
 
-interface FormBodyTabbedProps extends PropsWithQrItemChangeHandler {
+interface FormBodyTabbedProps
+  extends PropsWithQrItemChangeHandler,
+    PropsWithParentIsReadOnlyAttribute {
   topLevelQItem: QuestionnaireItem;
   topLevelQRItem: QuestionnaireResponseItem | null;
 }
 
 function FormBodyTabbed(props: FormBodyTabbedProps) {
-  const { topLevelQItem, topLevelQRItem, onQrItemChange } = props;
+  const { topLevelQItem, topLevelQRItem, parentIsReadOnly, onQrItemChange } = props;
 
   const tabs = useQuestionnaireStore.use.tabs();
   const currentTab = useQuestionnaireStore.use.currentTabIndex();
@@ -95,6 +100,7 @@ function FormBodyTabbed(props: FormBodyTabbedProps) {
                   tabIsMarkedAsComplete={tabIsMarkedAsComplete}
                   tabs={tabs}
                   currentTabIndex={currentTab}
+                  parentIsReadOnly={parentIsReadOnly}
                   onQrItemChange={handleQrGroupChange}
                 />
               </TabPanel>

package/src/components/Renderer/FormTopLevelItem.tsx

@@ -22,6 +22,7 @@ import { containsTabs, isTabContainer } from '../../utils/tabs';
 import GroupItem from '../FormComponents/GroupItem/GroupItem';
 import SingleItem from '../FormComponents/SingleItem/SingleItem';
 import type {
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
   PropsWithQrRepeatGroupChangeHandler
 } from '../../interfaces/renderProps.interface';
@@ -34,13 +35,20 @@ import Box from '@mui/material/Box';
 
 interface FormTopLevelItemProps
   extends PropsWithQrItemChangeHandler,
-    PropsWithQrRepeatGroupChangeHandler {
+    PropsWithQrRepeatGroupChangeHandler,
+    PropsWithParentIsReadOnlyAttribute {
   topLevelQItem: QuestionnaireItem;
   topLevelQRItemOrItems: QuestionnaireResponseItem | QuestionnaireResponseItem[] | null;
 }
 
 function FormTopLevelItem(props: FormTopLevelItemProps) {
-  const { topLevelQItem, topLevelQRItemOrItems, onQrItemChange, onQrRepeatGroupChange } = props;
+  const {
+    topLevelQItem,
+    topLevelQRItemOrItems,
+    parentIsReadOnly,
+    onQrItemChange,
+    onQrRepeatGroupChange
+  } = props;
 
   const itemIsTabContainer = isTabContainer(topLevelQItem);
   const itemContainsTabs = containsTabs(topLevelQItem);
@@ -49,7 +57,7 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
 
   const itemIsGroup = topLevelQItem.type === 'group';
 
-  const readOnly = useReadOnly(topLevelQItem, false);
+  const readOnly = useReadOnly(topLevelQItem, parentIsReadOnly);
   const itemIsHidden = useHidden(topLevelQItem);
   if (itemIsHidden) {
     return null;
@@ -81,6 +89,7 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
           key={topLevelQItem.linkId}
           topLevelQItem={topLevelQItem}
           topLevelQRItem={topLevelQRItem}
+          parentIsReadOnly={readOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -91,6 +100,7 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
         key={topLevelQItem.linkId}
         topLevelQItem={topLevelQItem}
         topLevelQRItem={topLevelQRItem}
+        parentIsReadOnly={readOnly}
         onQrItemChange={onQrItemChange}
       />
     );

package/src/components/Renderer/SmartFormsRenderer.tsx

@@ -34,6 +34,7 @@ interface SmartFormsRendererProps {
   additionalVariables?: Record<string, object>;
   terminologyServerUrl?: string;
   fhirClient?: Client;
+  readOnly?: boolean;
 }
 
 function SmartFormsRenderer(props: SmartFormsRendererProps) {
@@ -42,7 +43,8 @@ function SmartFormsRenderer(props: SmartFormsRendererProps) {
     questionnaireResponse,
     additionalVariables,
     terminologyServerUrl,
-    fhirClient
+    fhirClient,
+    readOnly
   } = props;
 
   const isLoading = useInitialiseRenderer(
@@ -50,7 +52,8 @@ function SmartFormsRenderer(props: SmartFormsRendererProps) {
     questionnaireResponse,
     additionalVariables,
     terminologyServerUrl,
-    fhirClient
+    fhirClient,
+    readOnly
   );
   const queryClient = useQueryClient();