@aehrc/smart-forms-renderer 0.8.0 → 0.8.1

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

@@ -2,22 +2,28 @@ import React from 'react';
 import Autocomplete from '@mui/material/Autocomplete';
 import { StandardTextField } from '../Textfield.styles';
 import Typography from '@mui/material/Typography';
-import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import type {
+  PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute
+} from '../../../interfaces/renderProps.interface';
 import type { Coding, QuestionnaireItem } from 'fhir/r4';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 
-interface OpenChoiceSelectAnswerValueSetFieldProps extends PropsWithIsTabledAttribute {
+interface OpenChoiceSelectAnswerValueSetFieldProps
+  extends PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   options: Coding[];
   valueSelect: Coding | null;
   serverError: Error | null;
+  readOnly: boolean;
   onValueChange: (newValue: Coding | string | null) => void;
 }
 
 function OpenChoiceSelectAnswerValueSetField(props: OpenChoiceSelectAnswerValueSetFieldProps) {
-  const { qItem, options, valueSelect, serverError, isTabled, onValueChange } = props;
+  const { qItem, options, valueSelect, serverError, readOnly, isTabled, onValueChange } = props;
 
-  const { displayUnit, displayPrompt, readOnly, entryFormat } = useRenderingExtensions(qItem);
+  const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
 
   return (
     <>

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

@@ -25,22 +25,28 @@ import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  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';
 
 interface OpenChoiceSelectAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSetItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const { displayInstructions } = useRenderingExtensions(qItem);
 
   // Init input value
   const qrOpenChoice = qrItem ?? createEmptyQrItem(qItem);
@@ -52,9 +58,6 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
   // Get codings/options from valueSet
   const { codings, serverError } = useValueSetCodings(qItem);
 
-  // Get additional rendering extensions
-  const { displayInstructions } = useRenderingExtensions(qItem);
-
   // Event handlers
   function handleValueChange(newValue: Coding | string | null) {
     if (newValue) {
@@ -82,6 +85,7 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
         valueSelect={valueSelect}
         serverError={serverError}
         isTabled={isTabled}
+        readOnly={readOnly}
         onValueChange={handleValueChange}
       />
     );
@@ -91,7 +95,7 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
     <FullWidthFormComponentBox>
       <Grid container columnSpacing={6}>
         <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} />
+          <LabelWrapper qItem={qItem} readOnly={readOnly} />
         </Grid>
         <Grid item xs={7}>
           <OpenChoiceSelectAnswerValueSetField
@@ -100,9 +104,10 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
             valueSelect={valueSelect}
             serverError={serverError}
             isTabled={isTabled}
+            readOnly={readOnly}
             onValueChange={handleValueChange}
           />
-          <DisplayInstructions displayInstructions={displayInstructions} />
+          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
         </Grid>
       </Grid>
     </FullWidthFormComponentBox>

package/src/components/FormComponents/RepeatGroup/AddItemButton.tsx

@@ -23,13 +23,14 @@ import type { RepeatGroupSingle } from '../../../interfaces/repeatGroup.interfac
 
 interface AddItemButtonProps {
   repeatGroups: RepeatGroupSingle[];
+  readOnly: boolean;
   onAddItem: () => void;
 }
 
 function AddItemButton(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/RepeatGroup/DeleteItemButton.tsx

@@ -24,13 +24,14 @@ import type { QuestionnaireResponseItem } from 'fhir/r4';
 interface DeleteItemButtonProps {
   nullableQrItem: QuestionnaireResponseItem | null;
   numOfRepeatGroups: number;
+  readOnly: boolean;
   onDeleteItem: () => void;
 }
 
 function DeleteItemButton(props: DeleteItemButtonProps) {
-  const { nullableQrItem, numOfRepeatGroups, onDeleteItem } = props;
+  const { nullableQrItem, numOfRepeatGroups, readOnly, onDeleteItem } = props;
 
-  const isDisabled = nullableQrItem === null || numOfRepeatGroups === 1;
+  const isDisabled = nullableQrItem === null || numOfRepeatGroups === 1 || readOnly;
 
   return (
     <RepeatDeleteTooltip className="repeat-group-delete" title="Delete item">

package/src/components/FormComponents/RepeatGroup/RepeatGroup.tsx

@@ -16,15 +16,16 @@
  */
 
 import React, { useState } from 'react';
-import type { PropsWithQrRepeatGroupChangeHandler } from '../../../interfaces/renderProps.interface';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrRepeatGroupChangeHandler
+} from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import useInitialiseRepeatGroups from '../../../hooks/useInitialiseRepeatGroups';
 import { QGroupContainerBox } from '../../Box.styles';
 import Card from '@mui/material/Card';
 import Collapse from '@mui/material/Collapse';
 import Divider from '@mui/material/Divider';
-
-import { QGroupHeadingTypography } from '../Typography.styles';
 import { TransitionGroup } from 'react-transition-group';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { nanoid } from 'nanoid';
@@ -32,15 +33,21 @@ import RepeatGroupItem from './RepeatGroupItem';
 import AddItemButton from './AddItemButton';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import cloneDeep from 'lodash.clonedeep';
+import useReadOnly from '../../../hooks/useReadOnly';
+import Typography from '@mui/material/Typography';
 
-interface RepeatGroupProps extends PropsWithQrRepeatGroupChangeHandler {
+interface RepeatGroupProps
+  extends PropsWithQrRepeatGroupChangeHandler,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItems: QuestionnaireResponseItem[];
   groupCardElevation: number;
 }
 
 function RepeatGroup(props: RepeatGroupProps) {
-  const { qItem, qrItems, groupCardElevation, onQrRepeatGroupChange } = props;
+  const { qItem, qrItems, groupCardElevation, parentIsReadOnly, onQrRepeatGroupChange } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
   const initialRepeatGroups = useInitialiseRepeatGroups(qItem, qrItems);
 
@@ -93,9 +100,9 @@ function RepeatGroup(props: RepeatGroupProps) {
   return (
     <QGroupContainerBox key={qItem.linkId} cardElevation={groupCardElevation} isRepeated={true}>
       <Card elevation={groupCardElevation} sx={{ p: 3, py: 2.5, mb: 3.5 }}>
-        <QGroupHeadingTypography variant="h6">
-          <LabelWrapper qItem={qItem} />
-        </QGroupHeadingTypography>
+        <Typography variant="h6" color={readOnly ? 'text.secondary' : 'text.primary'}>
+          <LabelWrapper qItem={qItem} readOnly={readOnly} />
+        </Typography>
         <Divider sx={{ mt: 1, mb: 1.5 }} light />
         <TransitionGroup>
           {repeatGroups.map(({ nanoId, qrItem: nullableQrItem }, index) => {
@@ -112,6 +119,7 @@ function RepeatGroup(props: RepeatGroupProps) {
                   nullableQrItem={nullableQrItem}
                   numOfRepeatGroups={repeatGroups.length}
                   groupCardElevation={groupCardElevation + 1}
+                  parentIsReadOnly={parentIsReadOnly}
                   onDeleteItem={() => handleDeleteItem(index)}
                   onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
                 />
@@ -120,7 +128,7 @@ function RepeatGroup(props: RepeatGroupProps) {
           })}
         </TransitionGroup>
 
-        <AddItemButton repeatGroups={repeatGroups} onAddItem={handleAddItem} />
+        <AddItemButton repeatGroups={repeatGroups} readOnly={readOnly} onAddItem={handleAddItem} />
       </Card>
     </QGroupContainerBox>
   );

package/src/components/FormComponents/RepeatGroup/RepeatGroupItem.tsx

@@ -19,11 +19,17 @@ import React from 'react';
 import { RepeatGroupContainerStack } from '../RepeatItem/RepeatItem.styles';
 import Box from '@mui/material/Box';
 import GroupItem from '../GroupItem/GroupItem';
-import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import DeleteItemButton from './DeleteItemButton';
+import useReadOnly from '../../../hooks/useReadOnly';
 
-interface RepeatGroupItemProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+interface RepeatGroupItemProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   answeredQrItem: QuestionnaireResponseItem;
   nullableQrItem: QuestionnaireResponseItem | null;
@@ -39,10 +45,13 @@ function RepeatGroupItem(props: RepeatGroupItemProps) {
     nullableQrItem,
     numOfRepeatGroups,
     groupCardElevation,
+    parentIsReadOnly,
     onDeleteItem,
     onQrItemChange
   } = props;
 
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+
   return (
     <RepeatGroupContainerStack direction="row" justifyContent="end">
       <Box sx={{ flexGrow: 1 }}>
@@ -50,6 +59,7 @@ function RepeatGroupItem(props: RepeatGroupItemProps) {
           qItem={qItem}
           qrItem={answeredQrItem}
           isRepeated={true}
+          parentIsReadOnly={parentIsReadOnly}
           groupCardElevation={groupCardElevation + 1}
           onQrItemChange={onQrItemChange}
         />
@@ -57,6 +67,7 @@ function RepeatGroupItem(props: RepeatGroupItemProps) {
       <DeleteItemButton
         nullableQrItem={nullableQrItem}
         numOfRepeatGroups={numOfRepeatGroups}
+        readOnly={readOnly}
         onDeleteItem={onDeleteItem}
       />
     </RepeatGroupContainerStack>

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

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

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

@@ -24,13 +24,14 @@ import type { QuestionnaireResponseItemAnswer } from 'fhir/r4';
 interface DeleteItemButtonProps {
   answer: QuestionnaireResponseItemAnswer | null;
   numOfRepeatAnswers: number;
+  readOnly: boolean;
   onDeleteAnswer: () => void;
 }
 
 function DeleteItemButton(props: DeleteItemButtonProps) {
-  const { answer, numOfRepeatAnswers, onDeleteAnswer } = props;
+  const { answer, numOfRepeatAnswers, readOnly, onDeleteAnswer } = props;
 
-  const isDisabled = answer === null || numOfRepeatAnswers === 1;
+  const isDisabled = answer === null || numOfRepeatAnswers === 1 || readOnly;
 
   return (
     <RepeatDeleteTooltip className="repeat-item-delete" title="Delete item">

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

@@ -24,10 +24,16 @@ import type {
   QuestionnaireResponseItem,
   QuestionnaireResponseItemAnswer
 } from 'fhir/r4';
-import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
 import DeleteItemButton from './DeleteItemButton';
+import useReadOnly from '../../../hooks/useReadOnly';
 
-interface RepeatFieldProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+interface RepeatFieldProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
   answer: QuestionnaireResponseItemAnswer | null;
@@ -36,7 +42,17 @@ interface RepeatFieldProps extends PropsWithQrItemChangeHandler<QuestionnaireRes
 }
 
 function RepeatField(props: RepeatFieldProps) {
-  const { qItem, qrItem, answer, numOfRepeatAnswers, onDeleteAnswer, onQrItemChange } = props;
+  const {
+    qItem,
+    qrItem,
+    answer,
+    numOfRepeatAnswers,
+    parentIsReadOnly,
+    onDeleteAnswer,
+    onQrItemChange
+  } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
   return (
     <RepeatItemContainerStack direction="row">
@@ -46,12 +62,14 @@ function RepeatField(props: RepeatFieldProps) {
           qrItem={qrItem}
           isRepeated={qItem.repeats ?? false}
           isTabled={false}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       </Box>
       <DeleteItemButton
         answer={answer}
         numOfRepeatAnswers={numOfRepeatAnswers}
+        readOnly={readOnly}
         onDeleteAnswer={onDeleteAnswer}
       />
     </RepeatItemContainerStack>

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

@@ -16,7 +16,10 @@
  */
 
 import React, { useState } from 'react';
-import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { nanoid } from 'nanoid';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
@@ -28,16 +31,19 @@ import RepeatField from './RepeatField';
 import Collapse from '@mui/material/Collapse';
 import useInitialiseRepeatAnswers from '../../../hooks/useInitialiseRepeatAnswers';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import useReadOnly from '../../../hooks/useReadOnly';
 
-interface RepeatItemProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+interface RepeatItemProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function RepeatItem(props: RepeatItemProps) {
-  const { qItem, qrItem, onQrItemChange } = props;
+  const { qItem, qrItem, parentIsReadOnly, onQrItemChange } = props;
 
-  // Get additional rendering extensions
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const { displayInstructions } = useRenderingExtensions(qItem);
 
   const initialRepeatAnswers = useInitialiseRepeatAnswers(qItem, qrItem);
@@ -84,7 +90,7 @@ function RepeatItem(props: RepeatItemProps) {
 
   return (
     <FullWidthFormComponentBox data-test="q-item-repeat-box">
-      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
         <TransitionGroup>
           {repeatAnswers.map(({ nanoId, answer }, index) => {
             const repeatAnswerQrItem = createEmptyQrItem(qItem);
@@ -99,6 +105,7 @@ function RepeatItem(props: RepeatItemProps) {
                   qrItem={repeatAnswerQrItem}
                   answer={answer}
                   numOfRepeatAnswers={repeatAnswers.length}
+                  parentIsReadOnly={parentIsReadOnly}
                   onDeleteAnswer={() => handleDeleteItem(index)}
                   onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
                 />
@@ -108,7 +115,7 @@ function RepeatItem(props: RepeatItemProps) {
         </TransitionGroup>
       </ItemFieldGrid>
 
-      <AddItemButton repeatAnswers={repeatAnswers} onAddItem={handleAddItem} />
+      <AddItemButton repeatAnswers={repeatAnswers} readOnly={readOnly} onAddItem={handleAddItem} />
     </FullWidthFormComponentBox>
   );
 }

package/src/components/FormComponents/SingleItem/SingleItem.tsx

@@ -20,24 +20,28 @@ import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
   PropsWithTextShownAttribute
 } from '../../../interfaces/renderProps.interface';
 import useQuestionnaireStore from '../../../stores/useQuestionnaireStore';
 import SingleItemSwitcher from './SingleItemSwitcher';
 import useHidden from '../../../hooks/useHidden';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface SingleItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
-    PropsWithTextShownAttribute {
+    PropsWithTextShownAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function SingleItem(props: SingleItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, textShown, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, textShown, parentIsReadOnly, onQrItemChange } =
+    props;
 
   const updateEnableWhenItem = useQuestionnaireStore((state) => state.updateEnableWhenItem);
 
@@ -51,6 +55,7 @@ function SingleItem(props: SingleItemProps) {
     [updateEnableWhenItem, onQrItemChange, qItem.linkId]
   );
 
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const itemIsHidden = useHidden(qItem);
   if (itemIsHidden) {
     return null;
@@ -63,6 +68,7 @@ function SingleItem(props: SingleItemProps) {
       isRepeated={isRepeated}
       isTabled={isTabled}
       textShown={textShown}
+      parentIsReadOnly={readOnly}
       onQrItemChange={handleQrItemChange}
     />
   );

package/src/components/FormComponents/SingleItem/SingleItemSwitcher.tsx

@@ -23,6 +23,7 @@ import Typography from '@mui/material/Typography';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
   PropsWithTextShownAttribute
 } from '../../../interfaces/renderProps.interface';
@@ -41,13 +42,15 @@ interface SingleItemSwitcherProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
-    PropsWithTextShownAttribute {
+    PropsWithTextShownAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function SingleItemSwitcher(props: SingleItemSwitcherProps) {
-  const { qItem, qrItem, isRepeated, isTabled, textShown, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, textShown, parentIsReadOnly, onQrItemChange } =
+    props;
 
   switch (qItem.type) {
     case 'string':
@@ -57,6 +60,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -67,6 +71,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -77,6 +82,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -87,6 +93,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -97,6 +104,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -106,6 +114,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -118,6 +127,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -128,6 +138,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -139,6 +150,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           isRepeated={isRepeated}
           isTabled={isTabled}
           textShown={textShown}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -150,6 +162,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           isRepeated={isRepeated}
           isTabled={isTabled}
           textShown={textShown}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -160,6 +173,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );

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>,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 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">