@aehrc/smart-forms-renderer 0.7.2 → 0.8.1

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

@@ -15,133 +15,114 @@
  * limitations under the License.
  */
 
-import type { SyntheticEvent } from 'react';
 import React from 'react';
-import Autocomplete from '@mui/material/Autocomplete';
 import Grid from '@mui/material/Grid';
 import type {
   QuestionnaireItem,
   QuestionnaireItemAnswerOption,
   QuestionnaireResponseItem
 } from 'fhir/r4';
-import { getAnswerOptionLabel } from '../../../utils/openChoice';
 import { createEmptyQrItem } from '../../../utils/qrItem';
-import { StandardTextField } from '../Textfield.styles';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 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>,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function OpenChoiceSelectAnswerOptionItem(props: OpenChoiceSelectAnswerOptionItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
-  // Get additional rendering extensions
-  const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } =
-    useRenderingExtensions(qItem);
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const { displayInstructions } = useRenderingExtensions(qItem);
 
   // Init input value
   const answerOptions = qItem.answerOption;
   if (!answerOptions) return null;
 
   const qrOpenChoice = qrItem ?? createEmptyQrItem(qItem);
-  let valueSelect: QuestionnaireItemAnswerOption | undefined = undefined;
+  let valueSelect: QuestionnaireItemAnswerOption | null = null;
   if (qrOpenChoice.answer) {
-    valueSelect = qrOpenChoice.answer[0];
+    valueSelect = qrOpenChoice.answer[0] ?? null;
   }
 
   // Event handlers
-  function handleChange(
-    _: SyntheticEvent<Element, Event>,
-    newValue: QuestionnaireItemAnswerOption | string | null
-  ) {
+  function handleChange(newValue: QuestionnaireItemAnswerOption | string | null) {
     if (newValue) {
       if (typeof newValue === 'string') {
         onQrItemChange({
           ...qrOpenChoice,
           answer: [{ valueString: newValue }]
         });
-      } else {
-        const option = newValue;
-        if (option['valueCoding']) {
-          onQrItemChange({
-            ...qrOpenChoice,
-            answer: [{ valueCoding: option.valueCoding }]
-          });
-        } else if (option['valueString']) {
-          onQrItemChange({
-            ...qrOpenChoice,
-            answer: [{ valueString: option.valueString }]
-          });
-        } else if (option['valueInteger']) {
-          onQrItemChange({
-            ...qrOpenChoice,
-            answer: [{ valueInteger: option.valueInteger }]
-          });
-        }
+        return;
+      }
+
+      const option = newValue;
+      if (option['valueCoding']) {
+        onQrItemChange({
+          ...qrOpenChoice,
+          answer: [{ valueCoding: option.valueCoding }]
+        });
+      } else if (option['valueString']) {
+        onQrItemChange({
+          ...qrOpenChoice,
+          answer: [{ valueString: option.valueString }]
+        });
+      } else if (option['valueInteger']) {
+        onQrItemChange({
+          ...qrOpenChoice,
+          answer: [{ valueInteger: option.valueInteger }]
+        });
       }
       return;
     }
     onQrItemChange(createEmptyQrItem(qItem));
   }
 
-  const openOpenChoiceSelectAnswerOption = (
-    <Autocomplete
-      id={qItem.id}
-      value={valueSelect ?? null}
-      options={answerOptions}
-      getOptionLabel={(option) => getAnswerOptionLabel(option)}
-      onChange={handleChange}
-      freeSolo
-      autoHighlight
-      sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
-      disabled={readOnly}
-      size="small"
-      placeholder={entryFormat}
-      renderInput={(params) => (
-        <StandardTextField
-          isTabled={isTabled}
-          label={displayPrompt}
-          {...params}
-          InputProps={{
-            ...params.InputProps,
-            endAdornment: (
-              <>
-                {params.InputProps.endAdornment}
-                {displayUnit}
-              </>
-            )
-          }}
-        />
-      )}
-    />
-  );
-
   if (isRepeated) {
-    return <>{openOpenChoiceSelectAnswerOption}</>;
+    return (
+      <OpenChoiceSelectAnswerOptionField
+        qItem={qItem}
+        options={answerOptions}
+        valueSelect={valueSelect}
+        readOnly={readOnly}
+        isTabled={isTabled}
+        onChange={handleChange}
+      />
+    );
   }
 
   return (
     <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}>
-          {openOpenChoiceSelectAnswerOption}
-          <DisplayInstructions displayInstructions={displayInstructions} />
+          <OpenChoiceSelectAnswerOptionField
+            qItem={qItem}
+            options={answerOptions}
+            valueSelect={valueSelect}
+            readOnly={readOnly}
+            isTabled={isTabled}
+            onChange={handleChange}
+          />
+          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
         </Grid>
       </Grid>
     </FullWidthFormComponentBox>

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import { StandardTextField } from '../Textfield.styles';
+import Typography from '@mui/material/Typography';
+import type {
+  PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute
+} from '../../../interfaces/renderProps.interface';
+import type { Coding, QuestionnaireItem } from 'fhir/r4';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+
+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, readOnly, isTabled, onValueChange } = props;
+
+  const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
+
+  return (
+    <>
+      <Autocomplete
+        id={qItem.id}
+        value={valueSelect ?? null}
+        options={options}
+        getOptionLabel={(option) => (typeof option === 'string' ? option : `${option.display}`)}
+        onChange={(_, newValue) => onValueChange(newValue)}
+        onInputChange={(_, newValue) => onValueChange(newValue)}
+        freeSolo
+        autoHighlight
+        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
+        disabled={readOnly}
+        size="small"
+        placeholder={entryFormat}
+        renderInput={(params) => (
+          <StandardTextField
+            isTabled={isTabled}
+            label={displayPrompt}
+            {...params}
+            InputProps={{
+              ...params.InputProps,
+              endAdornment: (
+                <>
+                  {params.InputProps.endAdornment}
+                  {displayUnit}
+                </>
+              )
+            }}
+          />
+        )}
+      />
+      {serverError ? (
+        <Typography variant="subtitle2">
+          There was an error fetching options from the terminology server.
+        </Typography>
+      ) : null}
+    </>
+  );
+}
+
+export default OpenChoiceSelectAnswerValueSetField;

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

@@ -15,52 +15,51 @@
  * limitations under the License.
  */
 
-import type { SyntheticEvent } from 'react';
 import React from 'react';
-import Autocomplete from '@mui/material/Autocomplete';
 import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
 import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
-import { StandardTextField } from '../Textfield.styles';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import useValueSetCodings from '../../../hooks/useValueSetCodings';
 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);
-  let valueSelect: Coding | undefined = undefined;
+  let valueSelect: Coding | null = null;
   if (qrOpenChoice['answer']) {
-    valueSelect = qrOpenChoice['answer'][0].valueCoding;
+    valueSelect = qrOpenChoice['answer'][0].valueCoding ?? null;
   }
 
   // Get codings/options from valueSet
   const { codings, serverError } = useValueSetCodings(qItem);
 
-  // Get additional rendering extensions
-  const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } =
-    useRenderingExtensions(qItem);
-
   // Event handlers
-  function handleValueChange(_: SyntheticEvent<Element, Event>, newValue: Coding | string | null) {
+  function handleValueChange(newValue: Coding | string | null) {
     if (newValue) {
       if (typeof newValue === 'string') {
         onQrItemChange({
@@ -78,59 +77,37 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
     onQrItemChange(createEmptyQrItem(qItem));
   }
 
-  const openChoiceSelectAnswerValueSet = (
-    <>
-      <Autocomplete
-        id={qItem.id}
-        value={valueSelect ?? null}
+  if (isRepeated) {
+    return (
+      <OpenChoiceSelectAnswerValueSetField
+        qItem={qItem}
         options={codings}
-        getOptionLabel={(option) => (typeof option === 'string' ? option : `${option.display}`)}
-        onChange={handleValueChange}
-        onInputChange={(event, newValue) => handleValueChange(event, newValue)}
-        freeSolo
-        autoHighlight
-        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
-        disabled={readOnly}
-        size="small"
-        placeholder={entryFormat}
-        renderInput={(params) => (
-          <StandardTextField
-            isTabled={isTabled}
-            label={displayPrompt}
-            {...params}
-            InputProps={{
-              ...params.InputProps,
-              endAdornment: (
-                <>
-                  {params.InputProps.endAdornment}
-                  {displayUnit}
-                </>
-              )
-            }}
-          />
-        )}
+        valueSelect={valueSelect}
+        serverError={serverError}
+        isTabled={isTabled}
+        readOnly={readOnly}
+        onValueChange={handleValueChange}
       />
-      {serverError ? (
-        <Typography variant="subtitle2">
-          There was an error fetching options from the terminology server.
-        </Typography>
-      ) : null}
-    </>
-  );
-
-  if (isRepeated) {
-    return <>{openChoiceSelectAnswerValueSet}</>;
+    );
   }
 
   return (
     <FullWidthFormComponentBox>
       <Grid container columnSpacing={6}>
         <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} />
+          <LabelWrapper qItem={qItem} readOnly={readOnly} />
         </Grid>
         <Grid item xs={7}>
-          {openChoiceSelectAnswerValueSet}
-          <DisplayInstructions displayInstructions={displayInstructions} />
+          <OpenChoiceSelectAnswerValueSetField
+            qItem={qItem}
+            options={codings}
+            valueSelect={valueSelect}
+            serverError={serverError}
+            isTabled={isTabled}
+            readOnly={readOnly}
+            onValueChange={handleValueChange}
+          />
+          <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>