@aehrc/smart-forms-renderer 0.8.1 → 0.9.0

package/src/components/FormComponents/GroupItem/GroupItemSwitcher.tsx

@@ -22,10 +22,9 @@ import type {
   PropsWithQrRepeatGroupChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import { isSpecificItemControl } from '../../../utils';
+import { isRepeatItemAndNotCheckbox, isSpecificItemControl } from '../../../utils';
 import GroupTable from '../Tables/GroupTable';
 import RepeatGroup from '../RepeatGroup/RepeatGroup';
-import { isRepeatItemAndNotCheckbox } from '../../../utils/qItem';
 import RepeatItem from '../RepeatItem/RepeatItem';
 import SingleItem from '../SingleItem/SingleItem';
 import useHidden from '../../../hooks/useHidden';
@@ -33,11 +32,11 @@ import GroupItem from './GroupItem';
 import GridGroup from '../GridGroup/GridGroup';
 
 interface GroupItemSwitcherProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithQrRepeatGroupChangeHandler,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItemOrItems: QuestionnaireResponseItem | QuestionnaireResponseItem[];
+  qrItemOrItems: QuestionnaireResponseItem | QuestionnaireResponseItem[] | undefined;
   groupCardElevation: number;
 }
 
@@ -97,7 +96,7 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
     return (
       <GridGroup
         qItem={qItem}
-        qrItem={qrItem}
+        qrItem={qrItem ?? null}
         groupCardElevation={groupCardElevation}
         parentIsReadOnly={parentIsReadOnly}
         onQrItemChange={onQrItemChange}
@@ -136,7 +135,7 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
     return (
       <RepeatItem
         qItem={qItem}
-        qrItem={qrItem}
+        qrItem={qrItem ?? null}
         parentIsReadOnly={parentIsReadOnly}
         onQrItemChange={onQrItemChange}
       />
@@ -148,7 +147,7 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
     return (
       <GroupItem
         qItem={qItem}
-        qrItem={qrItem}
+        qrItem={qrItem ?? null}
         isRepeated={false}
         groupCardElevation={groupCardElevation + 1}
         parentIsReadOnly={parentIsReadOnly}
@@ -161,7 +160,7 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
   return (
     <SingleItem
       qItem={qItem}
-      qrItem={qrItem}
+      qrItem={qrItem ?? null}
       isRepeated={false}
       isTabled={false}
       parentIsReadOnly={parentIsReadOnly}

package/src/components/FormComponents/IntegerItem/IntegerItem.tsx

@@ -26,7 +26,7 @@ import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import useValidationError from '../../../hooks/useValidationError';
 import debounce from 'lodash.debounce';
-import { createEmptyQrItemWithUnit } from '../../../utils/qrItem';
+import { createEmptyQrItem } from '../../../utils/qrItem';
 import { DEBOUNCE_DURATION } from '../../../utils/debounce';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import IntegerField from './IntegerField';
@@ -37,12 +37,12 @@ import useNumberInput from '../../../hooks/useNumberInput';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface IntegerItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function IntegerItem(props: IntegerItemProps) {
@@ -77,7 +77,6 @@ function IntegerItem(props: IntegerItemProps) {
   const { calcExpUpdated } = useIntegerCalculatedExpression({
     qItem: qItem,
     inputValue: value,
-    displayUnit: displayUnit,
     setInputValue: (newValue) => {
       setValue(newValue);
     },
@@ -96,7 +95,7 @@ function IntegerItem(props: IntegerItemProps) {
   const updateQrItemWithDebounce = useCallback(
     debounce((newValue: number) => {
       onQrItemChange({
-        ...createEmptyQrItemWithUnit(qItem, displayUnit),
+        ...createEmptyQrItem(qItem),
         answer: [{ valueInteger: newValue }]
       });
     }, DEBOUNCE_DURATION),

package/src/components/FormComponents/ItemParts/FadingCheckIcon.tsx

@@ -17,7 +17,7 @@
 
 import React from 'react';
 import Fade from '@mui/material/Fade';
-import CheckIcon from '@mui/icons-material/Check';
+import SyncIcon from '@mui/icons-material/Sync';
 
 interface FadingCheckIconProps {
   fadeIn: boolean;
@@ -28,7 +28,7 @@ function FadingCheckIcon(props: FadingCheckIconProps) {
 
   return (
     <Fade in={fadeIn} timeout={{ enter: 100, exit: 300 }}>
-      <CheckIcon color="success" fontSize="small" />
+      <SyncIcon color="success" fontSize="small" />
     </Fade>
   );
 }

package/src/components/FormComponents/ItemParts/ItemFieldGrid.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React from 'react';
 import Grid from '@mui/material/Grid';
 import type { QuestionnaireItem } from 'fhir/r4';
@@ -25,7 +25,7 @@ import LabelWrapper from './ItemLabelWrapper';
 interface ItemFieldGridProps {
   children: ReactNode;
   qItem: QuestionnaireItem;
-  displayInstructions: string;
+  displayInstructions: string | ReactElement;
   readOnly: boolean;
 }
 

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

@@ -38,12 +38,12 @@ import OpenChoiceAutocompleteField from './OpenChoiceAutocompleteField';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface OpenChoiceAutocompleteItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {

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

@@ -33,7 +33,7 @@ import type {
   PropsWithIsRepeatedAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
-  PropsWithTextShownAttribute
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import { DEBOUNCE_DURATION } from '../../../utils/debounce';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
@@ -42,12 +42,12 @@ import OpenChoiceCheckboxAnswerOptionFields from './OpenChoiceCheckboxAnswerOpti
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface OpenChoiceCheckboxAnswerOptionItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
-    PropsWithTextShownAttribute,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   orientation: ChoiceItemOrientation;
 }
 
@@ -57,7 +57,7 @@ function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptio
     qrItem,
     orientation,
     isRepeated,
-    textShown = true,
+    showMinimalView = false,
     parentIsReadOnly,
     onQrItemChange
   } = props;
@@ -137,49 +137,49 @@ function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptio
     updateOpenLabelValueWithDebounce(newValue);
   }
 
-  if (textShown) {
+  if (showMinimalView) {
     return (
-      <FullWidthFormComponentBox data-test="q-item-open-choice-checkbox-answer-option-box">
-        <Grid container columnSpacing={6}>
-          <Grid item xs={5}>
-            <LabelWrapper qItem={qItem} readOnly={readOnly} />
-          </Grid>
-          <Grid item xs={7}>
-            <OpenChoiceCheckboxAnswerOptionFields
-              qItem={qItem}
-              answers={answers}
-              openLabelText={openLabelText}
-              openLabelValue={openLabelValue}
-              openLabelChecked={openLabelChecked}
-              readOnly={readOnly}
-              orientation={orientation}
-              onValueChange={handleValueChange}
-              onOpenLabelCheckedChange={handleOpenLabelCheckedChange}
-              onOpenLabelInputChange={handleOpenLabelInputChange}
-            />
-            <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
-          </Grid>
-        </Grid>
-      </FullWidthFormComponentBox>
+      <>
+        <OpenChoiceCheckboxAnswerOptionFields
+          qItem={qItem}
+          answers={answers}
+          openLabelText={openLabelText}
+          openLabelValue={openLabelValue}
+          openLabelChecked={openLabelChecked}
+          readOnly={readOnly}
+          orientation={orientation}
+          onValueChange={handleValueChange}
+          onOpenLabelCheckedChange={handleOpenLabelCheckedChange}
+          onOpenLabelInputChange={handleOpenLabelInputChange}
+        />
+        <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
+      </>
     );
   }
 
   return (
-    <>
-      <OpenChoiceCheckboxAnswerOptionFields
-        qItem={qItem}
-        answers={answers}
-        openLabelText={openLabelText}
-        openLabelValue={openLabelValue}
-        openLabelChecked={openLabelChecked}
-        readOnly={readOnly}
-        orientation={orientation}
-        onValueChange={handleValueChange}
-        onOpenLabelCheckedChange={handleOpenLabelCheckedChange}
-        onOpenLabelInputChange={handleOpenLabelInputChange}
-      />
-      <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
-    </>
+    <FullWidthFormComponentBox data-test="q-item-open-choice-checkbox-answer-option-box">
+      <Grid container columnSpacing={6}>
+        <Grid item xs={5}>
+          <LabelWrapper qItem={qItem} readOnly={readOnly} />
+        </Grid>
+        <Grid item xs={7}>
+          <OpenChoiceCheckboxAnswerOptionFields
+            qItem={qItem}
+            answers={answers}
+            openLabelText={openLabelText}
+            openLabelValue={openLabelValue}
+            openLabelChecked={openLabelChecked}
+            readOnly={readOnly}
+            orientation={orientation}
+            onValueChange={handleValueChange}
+            onOpenLabelCheckedChange={handleOpenLabelCheckedChange}
+            onOpenLabelInputChange={handleOpenLabelInputChange}
+          />
+          <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
+        </Grid>
+      </Grid>
+    </FullWidthFormComponentBox>
   );
 }
 

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

@@ -30,21 +30,21 @@ import type {
   PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
-  PropsWithTextShownAttribute
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 
 interface OpenChoiceItemSwitcherProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
-    PropsWithTextShownAttribute,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
-  const { qItem, qrItem, isRepeated, isTabled, textShown, parentIsReadOnly, onQrItemChange } =
+  const { qItem, qrItem, isRepeated, isTabled, showMinimalView, parentIsReadOnly, onQrItemChange } =
     props;
 
   const orientation = getChoiceOrientation(qItem);
@@ -57,7 +57,7 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
           qrItem={qrItem}
           orientation={orientation}
           isRepeated={qItem['repeats'] ?? false}
-          textShown={textShown}
+          showMinimalView={showMinimalView}
           parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />

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

@@ -36,11 +36,11 @@ import OpenChoiceRadioAnswerOptionFields from './OpenChoiceRadioAnswerOptionFiel
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface OpenChoiceRadioAnswerOptionItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   orientation: ChoiceItemOrientation;
 }
 

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

@@ -37,12 +37,12 @@ import OpenChoiceSelectAnswerOptionField from './OpenChoiceSelectAnswerOptionFie
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface OpenChoiceSelectAnswerOptionItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function OpenChoiceSelectAnswerOptionItem(props: OpenChoiceSelectAnswerOptionItemProps) {

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

@@ -34,12 +34,12 @@ import OpenChoiceSelectAnswerValueSetField from './OpenChoiceSelectAnswerValueSe
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface OpenChoiceSelectAnswerValueSetItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSetItemProps) {

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

@@ -18,7 +18,8 @@
 import React, { useState } from 'react';
 import type {
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrRepeatGroupChangeHandler
+  PropsWithQrRepeatGroupChangeHandler,
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import useInitialiseRepeatGroups from '../../../hooks/useInitialiseRepeatGroups';
@@ -38,6 +39,7 @@ import Typography from '@mui/material/Typography';
 
 interface RepeatGroupProps
   extends PropsWithQrRepeatGroupChangeHandler,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItems: QuestionnaireResponseItem[];
@@ -45,7 +47,14 @@ interface RepeatGroupProps
 }
 
 function RepeatGroup(props: RepeatGroupProps) {
-  const { qItem, qrItems, groupCardElevation, parentIsReadOnly, onQrRepeatGroupChange } = props;
+  const {
+    qItem,
+    qrItems,
+    groupCardElevation,
+    showMinimalView,
+    parentIsReadOnly,
+    onQrRepeatGroupChange
+  } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
@@ -97,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 }}>
-        <Typography variant="h6" color={readOnly ? 'text.secondary' : 'text.primary'}>
-          <LabelWrapper qItem={qItem} readOnly={readOnly} />
-        </Typography>
-        <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);

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

@@ -21,14 +21,16 @@ import Box from '@mui/material/Box';
 import GroupItem from '../GroupItem/GroupItem';
 import type {
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  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>,
+  extends PropsWithQrItemChangeHandler,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   answeredQrItem: QuestionnaireResponseItem;
@@ -45,6 +47,7 @@ function RepeatGroupItem(props: RepeatGroupItemProps) {
     nullableQrItem,
     numOfRepeatGroups,
     groupCardElevation,
+    showMinimalView,
     parentIsReadOnly,
     onDeleteItem,
     onQrItemChange
@@ -64,12 +67,14 @@ function RepeatGroupItem(props: RepeatGroupItemProps) {
           onQrItemChange={onQrItemChange}
         />
       </Box>
-      <DeleteItemButton
-        nullableQrItem={nullableQrItem}
-        numOfRepeatGroups={numOfRepeatGroups}
-        readOnly={readOnly}
-        onDeleteItem={onDeleteItem}
-      />
+      {showMinimalView ? null : (
+        <DeleteItemButton
+          nullableQrItem={nullableQrItem}
+          numOfRepeatGroups={numOfRepeatGroups}
+          readOnly={readOnly}
+          onDeleteItem={onDeleteItem}
+        />
+      )}
     </RepeatGroupContainerStack>
   );
 }

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

@@ -26,16 +26,18 @@ import type {
 } from 'fhir/r4';
 import type {
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import DeleteItemButton from './DeleteItemButton';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface RepeatFieldProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   answer: QuestionnaireResponseItemAnswer | null;
   numOfRepeatAnswers: number;
   onDeleteAnswer: () => void;
@@ -48,6 +50,7 @@ function RepeatField(props: RepeatFieldProps) {
     answer,
     numOfRepeatAnswers,
     parentIsReadOnly,
+    showMinimalView,
     onDeleteAnswer,
     onQrItemChange
   } = props;
@@ -62,16 +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}
-        readOnly={readOnly}
-        onDeleteAnswer={onDeleteAnswer}
-      />
+      {showMinimalView ? null : (
+        <DeleteItemButton
+          answer={answer}
+          numOfRepeatAnswers={numOfRepeatAnswers}
+          readOnly={readOnly}
+          onDeleteAnswer={onDeleteAnswer}
+        />
+      )}
     </RepeatItemContainerStack>
   );
 }

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

@@ -20,6 +20,7 @@ import type {
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } 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';
@@ -34,14 +35,15 @@ import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface RepeatItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function RepeatItem(props: RepeatItemProps) {
-  const { qItem, qrItem, parentIsReadOnly, onQrItemChange } = props;
+  const { qItem, qrItem, showMinimalView, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const { displayInstructions } = useRenderingExtensions(qItem);
@@ -88,6 +90,33 @@ function RepeatItem(props: RepeatItemProps) {
     ]);
   }
 
+  if (showMinimalView) {
+    return (
+      <>
+        {repeatAnswers.map(({ nanoId, answer }, index) => {
+          const repeatAnswerQrItem = createEmptyQrItem(qItem);
+          if (answer) {
+            repeatAnswerQrItem.answer = [answer];
+          }
+
+          return (
+            <RepeatField
+              key={nanoId}
+              qItem={qItem}
+              qrItem={repeatAnswerQrItem}
+              answer={answer}
+              numOfRepeatAnswers={repeatAnswers.length}
+              parentIsReadOnly={parentIsReadOnly}
+              showMinimalView={showMinimalView}
+              onDeleteAnswer={() => handleDeleteItem(index)}
+              onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
+            />
+          );
+        })}
+      </>
+    );
+  }
+
   return (
     <FullWidthFormComponentBox data-test="q-item-repeat-box">
       <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
@@ -106,6 +135,7 @@ function RepeatItem(props: RepeatItemProps) {
                   answer={answer}
                   numOfRepeatAnswers={repeatAnswers.length}
                   parentIsReadOnly={parentIsReadOnly}
+                  showMinimalView={showMinimalView}
                   onDeleteAnswer={() => handleDeleteItem(index)}
                   onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
                 />

package/src/components/FormComponents/RepeatItem/index.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default as RepeatItem } from './RepeatItem';