@aehrc/smart-forms-renderer 0.8.0 → 0.9.0

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

@@ -27,22 +27,29 @@ import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type {
   PropsWithIsRepeatedAttribute,
+  PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import OpenChoiceRadioAnswerOptionFields from './OpenChoiceRadioAnswerOptionFields';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface OpenChoiceRadioAnswerOptionItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
-    PropsWithIsRepeatedAttribute {
+  extends PropsWithQrItemChangeHandler,
+    PropsWithIsRepeatedAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   orientation: ChoiceItemOrientation;
 }
 
 function OpenChoiceRadioAnswerOptionItem(props: OpenChoiceRadioAnswerOptionItemProps) {
-  const { qItem, qrItem, onQrItemChange, orientation } = props;
+  const { qItem, qrItem, orientation, parentIsReadOnly, onQrItemChange } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const openLabelText = getOpenLabelText(qItem);
+  const { displayInstructions } = useRenderingExtensions(qItem);
 
   // Init answers
   const qrOpenChoiceRadio = qrItem ?? createEmptyQrItem(qItem);
@@ -70,10 +77,6 @@ function OpenChoiceRadioAnswerOptionItem(props: OpenChoiceRadioAnswerOptionItemP
     valueRadio = '';
   }
 
-  // Get additional rendering extensions
-  const openLabelText = getOpenLabelText(qItem);
-  const { displayInstructions, readOnly } = useRenderingExtensions(qItem);
-
   // Event handlers
   function handleValueChange(
     changedOptionValue: string | null,
@@ -120,7 +123,7 @@ function OpenChoiceRadioAnswerOptionItem(props: OpenChoiceRadioAnswerOptionItemP
     <FullWidthFormComponentBox data-test="q-item-open-choice-radio-answer-option-box">
       <Grid container columnSpacing={6}>
         <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} />
+          <LabelWrapper qItem={qItem} readOnly={readOnly} />
         </Grid>
         <Grid item xs={7}>
           <OpenChoiceRadioAnswerOptionFields
@@ -133,7 +136,7 @@ function OpenChoiceRadioAnswerOptionItem(props: OpenChoiceRadioAnswerOptionItemP
             readOnly={readOnly}
             onValueChange={handleValueChange}
           />
-          <DisplayInstructions displayInstructions={displayInstructions} />
+          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
         </Grid>
       </Grid>
     </FullWidthFormComponentBox>

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

@@ -3,20 +3,26 @@ import { getAnswerOptionLabel } from '../../../utils/openChoice';
 import { StandardTextField } from '../Textfield.styles';
 import Autocomplete from '@mui/material/Autocomplete';
 import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
-import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import type {
+  PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute
+} from '../../../interfaces/renderProps.interface';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 
-interface OpenChoiceSelectAnswerOptionFieldProps extends PropsWithIsTabledAttribute {
+interface OpenChoiceSelectAnswerOptionFieldProps
+  extends PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   options: QuestionnaireItemAnswerOption[];
   valueSelect: QuestionnaireItemAnswerOption | null;
+  readOnly: boolean;
   onChange: (newValue: QuestionnaireItemAnswerOption | string | null) => void;
 }
 
 function OpenChoiceSelectAnswerOptionField(props: OpenChoiceSelectAnswerOptionFieldProps) {
-  const { qItem, options, valueSelect, isTabled, onChange } = props;
+  const { qItem, options, valueSelect, readOnly, isTabled, onChange } = props;
 
-  const { displayUnit, displayPrompt, readOnly, entryFormat } = useRenderingExtensions(qItem);
+  const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
 
   return (
     <Autocomplete

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

@@ -28,24 +28,27 @@ 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 OpenChoiceSelectAnswerOptionField from './OpenChoiceSelectAnswerOptionField';
+import useReadOnly from '../../../hooks/useReadOnly';
 
 interface OpenChoiceSelectAnswerOptionItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function OpenChoiceSelectAnswerOptionItem(props: OpenChoiceSelectAnswerOptionItemProps) {
-  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 { displayInstructions } = useRenderingExtensions(qItem);
 
   // Init input value
@@ -97,6 +100,7 @@ function OpenChoiceSelectAnswerOptionItem(props: OpenChoiceSelectAnswerOptionIte
         qItem={qItem}
         options={answerOptions}
         valueSelect={valueSelect}
+        readOnly={readOnly}
         isTabled={isTabled}
         onChange={handleChange}
       />
@@ -107,17 +111,18 @@ function OpenChoiceSelectAnswerOptionItem(props: OpenChoiceSelectAnswerOptionIte
     <FullWidthFormComponentBox data-test="q-item-open-choice-select-answer-option-box">
       <Grid container columnSpacing={6}>
         <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} />
+          <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} />
+          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
         </Grid>
       </Grid>
     </FullWidthFormComponentBox>

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>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 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,17 @@
  */
 
 import React, { useState } from 'react';
-import type { PropsWithQrRepeatGroupChangeHandler } from '../../../interfaces/renderProps.interface';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrRepeatGroupChangeHandler,
+  PropsWithShowMinimalViewAttribute
+} 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 +34,29 @@ 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,
+    PropsWithShowMinimalViewAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItems: QuestionnaireResponseItem[];
   groupCardElevation: number;
 }
 
 function RepeatGroup(props: RepeatGroupProps) {
-  const { qItem, qrItems, groupCardElevation, onQrRepeatGroupChange } = props;
+  const {
+    qItem,
+    qrItems,
+    groupCardElevation,
+    showMinimalView,
+    parentIsReadOnly,
+    onQrRepeatGroupChange
+  } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
   const initialRepeatGroups = useInitialiseRepeatGroups(qItem, qrItems);
 
@@ -90,13 +106,47 @@ function RepeatGroup(props: RepeatGroupProps) {
     ]);
   }
 
+  if (showMinimalView) {
+    return (
+      <QGroupContainerBox key={qItem.linkId} cardElevation={groupCardElevation} isRepeated={true}>
+        <Card elevation={groupCardElevation} sx={{ p: 2 }}>
+          {repeatGroups.map(({ nanoId, qrItem: nullableQrItem }, index) => {
+            const answeredQrItem = createEmptyQrItem(qItem);
+            if (nullableQrItem) {
+              answeredQrItem.item = nullableQrItem.item;
+            }
+
+            return (
+              <RepeatGroupItem
+                key={nanoId}
+                qItem={qItem}
+                answeredQrItem={answeredQrItem}
+                nullableQrItem={nullableQrItem}
+                numOfRepeatGroups={repeatGroups.length}
+                groupCardElevation={groupCardElevation + 1}
+                showMinimalView={showMinimalView}
+                parentIsReadOnly={parentIsReadOnly}
+                onDeleteItem={() => handleDeleteItem(index)}
+                onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
+              />
+            );
+          })}
+        </Card>
+      </QGroupContainerBox>
+    );
+  }
+
   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>
-        <Divider sx={{ mt: 1, mb: 1.5 }} light />
+        {qItem.text ? (
+          <>
+            <Typography variant="h6" color={readOnly ? 'text.secondary' : 'text.primary'}>
+              <LabelWrapper qItem={qItem} readOnly={readOnly} />
+            </Typography>
+            <Divider sx={{ mt: 1, mb: 1.5 }} light />
+          </>
+        ) : null}
         <TransitionGroup>
           {repeatGroups.map(({ nanoId, qrItem: nullableQrItem }, index) => {
             const answeredQrItem = createEmptyQrItem(qItem);
@@ -112,6 +162,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 +171,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,19 @@ 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,
+  PropsWithShowMinimalViewAttribute
+} 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,
+    PropsWithShowMinimalViewAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   answeredQrItem: QuestionnaireResponseItem;
   nullableQrItem: QuestionnaireResponseItem | null;
@@ -39,10 +47,14 @@ function RepeatGroupItem(props: RepeatGroupItemProps) {
     nullableQrItem,
     numOfRepeatGroups,
     groupCardElevation,
+    showMinimalView,
+    parentIsReadOnly,
     onDeleteItem,
     onQrItemChange
   } = props;
 
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+
   return (
     <RepeatGroupContainerStack direction="row" justifyContent="end">
       <Box sx={{ flexGrow: 1 }}>
@@ -50,15 +62,19 @@ function RepeatGroupItem(props: RepeatGroupItemProps) {
           qItem={qItem}
           qrItem={answeredQrItem}
           isRepeated={true}
+          parentIsReadOnly={parentIsReadOnly}
           groupCardElevation={groupCardElevation + 1}
           onQrItemChange={onQrItemChange}
         />
       </Box>
-      <DeleteItemButton
-        nullableQrItem={nullableQrItem}
-        numOfRepeatGroups={numOfRepeatGroups}
-        onDeleteItem={onDeleteItem}
-      />
+      {showMinimalView ? null : (
+        <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,19 +24,38 @@ import type {
   QuestionnaireResponseItem,
   QuestionnaireResponseItemAnswer
 } from 'fhir/r4';
-import type { PropsWithQrItemChangeHandler } from '../../../interfaces/renderProps.interface';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler,
+  PropsWithShowMinimalViewAttribute
+} from '../../../interfaces/renderProps.interface';
 import DeleteItemButton from './DeleteItemButton';
+import useReadOnly from '../../../hooks/useReadOnly';
 
-interface RepeatFieldProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+interface RepeatFieldProps
+  extends PropsWithQrItemChangeHandler,
+    PropsWithShowMinimalViewAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   answer: QuestionnaireResponseItemAnswer | null;
   numOfRepeatAnswers: number;
   onDeleteAnswer: () => void;
 }
 
 function RepeatField(props: RepeatFieldProps) {
-  const { qItem, qrItem, answer, numOfRepeatAnswers, onDeleteAnswer, onQrItemChange } = props;
+  const {
+    qItem,
+    qrItem,
+    answer,
+    numOfRepeatAnswers,
+    parentIsReadOnly,
+    showMinimalView,
+    onDeleteAnswer,
+    onQrItemChange
+  } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
   return (
     <RepeatItemContainerStack direction="row">
@@ -46,14 +65,19 @@ function RepeatField(props: RepeatFieldProps) {
           qrItem={qrItem}
           isRepeated={qItem.repeats ?? false}
           isTabled={false}
+          showMinimalView={showMinimalView}
+          parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       </Box>
-      <DeleteItemButton
-        answer={answer}
-        numOfRepeatAnswers={numOfRepeatAnswers}
-        onDeleteAnswer={onDeleteAnswer}
-      />
+      {showMinimalView ? null : (
+        <DeleteItemButton
+          answer={answer}
+          numOfRepeatAnswers={numOfRepeatAnswers}
+          readOnly={readOnly}
+          onDeleteAnswer={onDeleteAnswer}
+        />
+      )}
     </RepeatItemContainerStack>
   );
 }