@aehrc/smart-forms-renderer 0.13.2 → 0.15.0

package/src/components/FormComponents/ChoiceItems/ChoiceAutocompleteField.tsx

@@ -21,7 +21,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 import Fade from '@mui/material/Fade';
 import Tooltip from '@mui/material/Tooltip';
 import type { Coding, QuestionnaireItem } from 'fhir/r4';
-import { StandardTextField } from '../Textfield.styles';
+import { StandardTextField, TEXT_FIELD_WIDTH } from '../Textfield.styles';
 import SearchIcon from '@mui/icons-material/Search';
 import InfoIcon from '@mui/icons-material/Info';
 import WarningAmberIcon from '@mui/icons-material/WarningAmber';
@@ -32,7 +32,7 @@ import type {
   PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute
 } from '../../../interfaces/renderProps.interface';
-import { AlertColor } from '@mui/material/Alert';
+import type { AlertColor } from '@mui/material/Alert';
 
 interface ChoiceAutocompleteFieldsProps
   extends PropsWithIsTabledAttribute,
@@ -75,7 +75,7 @@ function ChoiceAutocompleteField(props: ChoiceAutocompleteFieldsProps) {
       clearOnEscape
       autoHighlight
       onChange={(_, newValue) => onValueChange(newValue)}
-      sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
+      sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160, flexGrow: 1 }}
       filterOptions={(x) => x}
       renderInput={(params) => (
         <StandardTextField

package/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerValueSetFields.tsx

@@ -23,18 +23,19 @@ import { StyledFormGroup } from '../Item.styles';
 import { StyledAlert } from '../../Alert.styles';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import Typography from '@mui/material/Typography';
+import type { TerminologyError } from '../../../hooks/useValueSetCodings';
 
 interface ChoiceCheckboxAnswerValueSetFieldsProps {
   codings: Coding[];
   answers: QuestionnaireResponseItemAnswer[];
   orientation: ChoiceItemOrientation;
   readOnly: boolean;
-  serverError: Error | null;
+  terminologyError: TerminologyError;
   onCheckedChange: (newValue: string) => void;
 }
 
 function ChoiceCheckboxAnswerValueSetFields(props: ChoiceCheckboxAnswerValueSetFieldsProps) {
-  const { codings, answers, orientation, readOnly, serverError, onCheckedChange } = props;
+  const { codings, answers, orientation, readOnly, terminologyError, onCheckedChange } = props;
 
   if (codings.length > 0) {
     return (
@@ -55,12 +56,13 @@ function ChoiceCheckboxAnswerValueSetFields(props: ChoiceCheckboxAnswerValueSetF
     );
   }
 
-  if (serverError) {
+  if (terminologyError.error) {
     return (
       <StyledAlert color="error">
         <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
         <Typography variant="subtitle2">
-          There was an error fetching options from the terminology server
+          There was an error fetching options from the terminology server for{' '}
+          {terminologyError.answerValueSet}
         </Typography>
       </StyledAlert>
     );

package/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerValueSetItem.tsx

@@ -64,7 +64,7 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
   const { displayInstructions } = useRenderingExtensions(qItem);
 
   // Get codings/options from valueSet
-  const { codings, serverError } = useValueSetCodings(qItem);
+  const { codings, terminologyError } = useValueSetCodings(qItem);
 
   // Event handlers
   function handleCheckedChange(changedValue: string) {
@@ -91,7 +91,7 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
           answers={answers}
           orientation={orientation}
           readOnly={readOnly}
-          serverError={serverError}
+          terminologyError={terminologyError}
           onCheckedChange={handleCheckedChange}
         />
         <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
@@ -107,7 +107,7 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
           answers={answers}
           orientation={orientation}
           readOnly={readOnly}
-          serverError={serverError}
+          terminologyError={terminologyError}
           onCheckedChange={handleCheckedChange}
         />
       </ItemFieldGrid>

package/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetFields.tsx

@@ -23,6 +23,7 @@ import ChoiceRadioSingle from './ChoiceRadioSingle';
 import { StyledRadioGroup } from '../Item.styles';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import { StyledAlert } from '../../Alert.styles';
+import type { TerminologyError } from '../../../hooks/useValueSetCodings';
 
 interface ChoiceRadioAnswerValueSetFieldsProps {
   qItem: QuestionnaireItem;
@@ -30,12 +31,13 @@ interface ChoiceRadioAnswerValueSetFieldsProps {
   valueRadio: string | null;
   orientation: ChoiceItemOrientation;
   readOnly: boolean;
-  serverError: Error | null;
+  terminologyError: TerminologyError;
   onCheckedChange: (newValue: string) => void;
 }
 
 function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsProps) {
-  const { qItem, codings, valueRadio, orientation, readOnly, serverError, onCheckedChange } = props;
+  const { qItem, codings, valueRadio, orientation, readOnly, terminologyError, onCheckedChange } =
+    props;
 
   if (codings.length > 0) {
     return (
@@ -59,12 +61,13 @@ function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsP
     );
   }
 
-  if (serverError) {
+  if (terminologyError.error) {
     return (
       <StyledAlert color="error">
         <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
         <Typography variant="subtitle2">
-          There was an error fetching options from the terminology server
+          There was an error fetching options from the terminology server for{' '}
+          {terminologyError.answerValueSet}
         </Typography>
       </StyledAlert>
     );

package/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerValueSetItem.tsx

@@ -54,7 +54,7 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
   }
 
   // Get codings/options from valueSet
-  const { codings, serverError } = useValueSetCodings(qItem);
+  const { codings, terminologyError } = useValueSetCodings(qItem);
 
   function handleChange(newValue: string) {
     if (codings.length > 0) {
@@ -76,7 +76,7 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
         valueRadio={valueRadio}
         orientation={orientation}
         readOnly={readOnly}
-        serverError={serverError}
+        terminologyError={terminologyError}
         onCheckedChange={handleChange}
       />
     );
@@ -91,7 +91,7 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
           valueRadio={valueRadio}
           orientation={orientation}
           readOnly={readOnly}
-          serverError={serverError}
+          terminologyError={terminologyError}
           onCheckedChange={handleChange}
         />
       </ItemFieldGrid>

package/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerOptionFields.tsx

@@ -22,6 +22,7 @@ import Select from '@mui/material/Select';
 import type { QuestionnaireItem } from 'fhir/r4';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import { TEXT_FIELD_WIDTH } from '../Textfield.styles';
 
 interface ChoiceSelectAnswerOptionFieldsProps extends PropsWithIsTabledAttribute {
   qItem: QuestionnaireItem;
@@ -45,7 +46,7 @@ function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsPro
       placeholder={entryFormat}
       label={displayPrompt}
       endAdornment={<InputAdornment position={'end'}>{displayUnit}</InputAdornment>}
-      sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160 }}
+      sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160 }}
       size="small"
       onChange={(e) => onSelectChange(e.target.value)}>
       {qItem.answerOption?.map((option, index) => {

package/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerValueSetFields.tsx

@@ -17,25 +17,27 @@
 
 import React from 'react';
 import Autocomplete from '@mui/material/Autocomplete';
-import { StandardTextField } from '../Textfield.styles';
+import { StandardTextField, TEXT_FIELD_WIDTH } from '../Textfield.styles';
 import { StyledAlert } from '../../Alert.styles';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import Typography from '@mui/material/Typography';
 import type { Coding, QuestionnaireItem } from 'fhir/r4';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import type { TerminologyError } from '../../../hooks/useValueSetCodings';
 
 interface ChoiceSelectAnswerValueSetFieldsProps extends PropsWithIsTabledAttribute {
   qItem: QuestionnaireItem;
   codings: Coding[];
   valueCoding: Coding | null;
-  serverError: Error | null;
+  terminologyError: TerminologyError;
   readOnly: boolean;
   onSelectChange: (newValue: Coding | null) => void;
 }
 
 function ChoiceSelectAnswerValueSetFields(props: ChoiceSelectAnswerValueSetFieldsProps) {
-  const { qItem, codings, valueCoding, serverError, readOnly, isTabled, onSelectChange } = props;
+  const { qItem, codings, valueCoding, terminologyError, readOnly, isTabled, onSelectChange } =
+    props;
 
   const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
 
@@ -49,7 +51,7 @@ function ChoiceSelectAnswerValueSetFields(props: ChoiceSelectAnswerValueSetField
         onChange={(_, newValue) => onSelectChange(newValue)}
         openOnFocus
         autoHighlight
-        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
+        sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160, flexGrow: 1 }}
         size="small"
         disabled={readOnly}
         renderInput={(params) => (
@@ -74,12 +76,13 @@ function ChoiceSelectAnswerValueSetFields(props: ChoiceSelectAnswerValueSetField
     );
   }
 
-  if (serverError) {
+  if (terminologyError.error) {
     return (
       <StyledAlert color="error">
         <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
         <Typography variant="subtitle2">
-          There was an error fetching options from the terminology server
+          There was an error fetching options from the terminology server for{' '}
+          {terminologyError.answerValueSet}
         </Typography>
       </StyledAlert>
     );

package/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerValueSetItem.tsx

@@ -53,7 +53,7 @@ function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemPro
   }
 
   // Get codings/options from valueSet
-  const { codings, serverError } = useValueSetCodings(qItem);
+  const { codings, terminologyError } = useValueSetCodings(qItem);
 
   valueCoding = useMemo(() => {
     const updatedValueCoding = codings.find(
@@ -94,7 +94,7 @@ function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemPro
         qItem={qItem}
         codings={codings}
         valueCoding={valueCoding}
-        serverError={serverError}
+        terminologyError={terminologyError}
         readOnly={readOnly}
         isTabled={isTabled}
         onSelectChange={handleChange}
@@ -109,7 +109,7 @@ function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemPro
           qItem={qItem}
           codings={codings}
           valueCoding={valueCoding}
-          serverError={serverError}
+          terminologyError={terminologyError}
           readOnly={readOnly}
           isTabled={isTabled}
           onSelectChange={handleChange}

package/src/components/FormComponents/DateItem/DateField.tsx

@@ -20,6 +20,7 @@ import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps
 import type { Dayjs } from 'dayjs';
 import { DatePicker as MuiDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { TEXT_FIELD_WIDTH } from '../Textfield.styles';
 
 interface DateFieldProps extends PropsWithIsTabledAttribute {
   value: Dayjs | null;
@@ -39,7 +40,7 @@ function DateField(props: DateFieldProps) {
         value={value}
         disabled={readOnly}
         label={displayPrompt}
-        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160 }}
+        sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160 }}
         onChange={onDateChange}
         slotProps={{
           textField: {

package/src/components/FormComponents/DateTimeItem/DateTimeField.tsx

@@ -21,6 +21,7 @@ import type { Dayjs } from 'dayjs';
 import { DateTimePicker as MuiDateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import Box from '@mui/material/Box';
+import { TEXT_FIELD_WIDTH } from '../Textfield.styles';
 
 interface DateTimeFieldProps extends PropsWithIsTabledAttribute {
   value: Dayjs | null;
@@ -41,7 +42,7 @@ function DateTimeField(props: DateTimeFieldProps) {
           value={value}
           disabled={readOnly}
           label={displayPrompt}
-          sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160 }}
+          sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160 }}
           onChange={onDateTimeChange}
           slotProps={{
             textField: {

package/src/components/FormComponents/GridGroup/GridRow.tsx

@@ -85,6 +85,7 @@ function GridRow(props: GridRowProps) {
               qrItem={cellQrItem ?? null}
               isRepeated={true}
               isTabled={true}
+              groupCardElevation={1}
               showMinimalView={true}
               parentIsReadOnly={parentIsReadOnly}
               onQrItemChange={handleQrRowItemChange}

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

@@ -136,6 +136,7 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
       <RepeatItem
         qItem={qItem}
         qrItem={qrItem ?? null}
+        groupCardElevation={groupCardElevation + 1}
         parentIsReadOnly={parentIsReadOnly}
         onQrItemChange={onQrItemChange}
       />
@@ -163,6 +164,7 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
       qrItem={qrItem ?? null}
       isRepeated={false}
       isTabled={false}
+      groupCardElevation={groupCardElevation + 1}
       parentIsReadOnly={parentIsReadOnly}
       onQrItemChange={onQrItemChange}
     />

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

@@ -18,7 +18,7 @@
 import React from 'react';
 import Box from '@mui/material/Box';
 import Autocomplete from '@mui/material/Autocomplete';
-import { StandardTextField } from '../Textfield.styles';
+import { StandardTextField, TEXT_FIELD_WIDTH } from '../Textfield.styles';
 import SearchIcon from '@mui/icons-material/Search';
 import CircularProgress from '@mui/material/CircularProgress';
 import Fade from '@mui/material/Fade';
@@ -80,7 +80,7 @@ function OpenChoiceAutocompleteField(props: OpenChoiceAutocompleteFieldProps) {
         clearOnEscape
         freeSolo
         autoHighlight
-        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 220, flexGrow: 1 }}
+        sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 220, flexGrow: 1 }}
         onChange={(_, newValue) => onValueChange(newValue)}
         filterOptions={(x) => x}
         renderInput={(params) => (

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { getAnswerOptionLabel } from '../../../utils/openChoice';
-import { StandardTextField } from '../Textfield.styles';
+import { StandardTextField, TEXT_FIELD_WIDTH } from '../Textfield.styles';
 import Autocomplete from '@mui/material/Autocomplete';
 import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
 import type {
@@ -33,7 +33,7 @@ function OpenChoiceSelectAnswerOptionField(props: OpenChoiceSelectAnswerOptionFi
       onChange={(_, newValue) => onChange(newValue)}
       freeSolo
       autoHighlight
-      sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
+      sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160, flexGrow: 1 }}
       disabled={readOnly}
       size="small"
       renderInput={(params) => (

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import Autocomplete from '@mui/material/Autocomplete';
-import { StandardTextField } from '../Textfield.styles';
+import { StandardTextField, TEXT_FIELD_WIDTH } from '../Textfield.styles';
 import Typography from '@mui/material/Typography';
 import type {
   PropsWithIsTabledAttribute,
@@ -8,6 +8,7 @@ import type {
 } from '../../../interfaces/renderProps.interface';
 import type { Coding, QuestionnaireItem } from 'fhir/r4';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import type { TerminologyError } from '../../../hooks/useValueSetCodings';
 
 interface OpenChoiceSelectAnswerValueSetFieldProps
   extends PropsWithIsTabledAttribute,
@@ -15,13 +16,14 @@ interface OpenChoiceSelectAnswerValueSetFieldProps
   qItem: QuestionnaireItem;
   options: Coding[];
   valueSelect: Coding | null;
-  serverError: Error | null;
+  terminologyError: TerminologyError;
   readOnly: boolean;
   onValueChange: (newValue: Coding | string | null) => void;
 }
 
 function OpenChoiceSelectAnswerValueSetField(props: OpenChoiceSelectAnswerValueSetFieldProps) {
-  const { qItem, options, valueSelect, serverError, readOnly, isTabled, onValueChange } = props;
+  const { qItem, options, valueSelect, terminologyError, readOnly, isTabled, onValueChange } =
+    props;
 
   const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
 
@@ -36,7 +38,7 @@ function OpenChoiceSelectAnswerValueSetField(props: OpenChoiceSelectAnswerValueS
         onInputChange={(_, newValue) => onValueChange(newValue)}
         freeSolo
         autoHighlight
-        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
+        sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160, flexGrow: 1 }}
         disabled={readOnly}
         size="small"
         renderInput={(params) => (
@@ -57,9 +59,10 @@ function OpenChoiceSelectAnswerValueSetField(props: OpenChoiceSelectAnswerValueS
           />
         )}
       />
-      {serverError ? (
+      {terminologyError.error ? (
         <Typography variant="subtitle2">
-          There was an error fetching options from the terminology server.
+          There was an error fetching options from the terminology server for{' '}
+          {terminologyError.answerValueSet}
         </Typography>
       ) : null}
     </>

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

@@ -52,7 +52,7 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
   }
 
   // Get codings/options from valueSet
-  const { codings, serverError } = useValueSetCodings(qItem);
+  const { codings, terminologyError } = useValueSetCodings(qItem);
 
   // Event handlers
   function handleValueChange(newValue: Coding | string | null) {
@@ -79,7 +79,7 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
         qItem={qItem}
         options={codings}
         valueSelect={valueSelect}
-        serverError={serverError}
+        terminologyError={terminologyError}
         isTabled={isTabled}
         readOnly={readOnly}
         onValueChange={handleValueChange}
@@ -94,7 +94,7 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
           qItem={qItem}
           options={codings}
           valueSelect={valueSelect}
-          serverError={serverError}
+          terminologyError={terminologyError}
           isTabled={isTabled}
           readOnly={readOnly}
           onValueChange={handleValueChange}

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

@@ -30,7 +30,7 @@ interface AddItemButtonProps {
 function AddItemButton(props: AddItemButtonProps) {
   const { repeatGroups, readOnly, onAddItem } = props;
 
-  const isDisabled = repeatGroups[repeatGroups.length - 1].qrItem === null || readOnly;
+  const isDisabled = repeatGroups[repeatGroups.length - 1]?.qrItem === null || readOnly;
 
   return (
     <Box display="flex" flexDirection="row-reverse">

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

@@ -30,7 +30,7 @@ interface AddItemButtonProps {
 function AddItemButton(props: AddItemButtonProps) {
   const { repeatAnswers, readOnly, onAddItem } = props;
 
-  const isDisabled = repeatAnswers[repeatAnswers.length - 1].answer === null || readOnly;
+  const isDisabled = repeatAnswers[repeatAnswers.length - 1]?.answer === null || readOnly;
 
   return (
     <Box display="flex" flexDirection="row-reverse">

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

@@ -40,6 +40,7 @@ interface RepeatFieldProps
   qrItem: QuestionnaireResponseItem | null;
   answer: QuestionnaireResponseItemAnswer | null;
   numOfRepeatAnswers: number;
+  groupCardElevation: number;
   onDeleteAnswer: () => void;
 }
 
@@ -49,6 +50,7 @@ function RepeatField(props: RepeatFieldProps) {
     qrItem,
     answer,
     numOfRepeatAnswers,
+    groupCardElevation,
     parentIsReadOnly,
     showMinimalView,
     onDeleteAnswer,
@@ -65,6 +67,7 @@ function RepeatField(props: RepeatFieldProps) {
           qrItem={qrItem}
           isRepeated={qItem.repeats ?? false}
           isTabled={false}
+          groupCardElevation={groupCardElevation}
           showMinimalView={showMinimalView}
           parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}

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

@@ -39,10 +39,12 @@ interface RepeatItemProps
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
+  groupCardElevation: number;
 }
 
 function RepeatItem(props: RepeatItemProps) {
-  const { qItem, qrItem, showMinimalView, parentIsReadOnly, onQrItemChange } = props;
+  const { qItem, qrItem, groupCardElevation, showMinimalView, parentIsReadOnly, onQrItemChange } =
+    props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
@@ -104,6 +106,7 @@ function RepeatItem(props: RepeatItemProps) {
               qrItem={repeatAnswerQrItem}
               answer={answer}
               numOfRepeatAnswers={repeatAnswers.length}
+              groupCardElevation={groupCardElevation}
               parentIsReadOnly={parentIsReadOnly}
               showMinimalView={showMinimalView}
               onDeleteAnswer={() => handleDeleteItem(index)}
@@ -132,6 +135,7 @@ function RepeatItem(props: RepeatItemProps) {
                   qrItem={repeatAnswerQrItem}
                   answer={answer}
                   numOfRepeatAnswers={repeatAnswers.length}
+                  groupCardElevation={groupCardElevation}
                   parentIsReadOnly={parentIsReadOnly}
                   showMinimalView={showMinimalView}
                   onDeleteAnswer={() => handleDeleteItem(index)}

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

@@ -28,6 +28,7 @@ import { useQuestionnaireStore } from '../../../stores';
 import SingleItemSwitcher from './SingleItemSwitcher';
 import useHidden from '../../../hooks/useHidden';
 import useReadOnly from '../../../hooks/useReadOnly';
+import SingleNestedItems from './SingleNestedItems';
 
 interface SingleItemProps
   extends PropsWithQrItemChangeHandler,
@@ -37,11 +38,20 @@ interface SingleItemProps
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
+  groupCardElevation: number;
 }
 
 function SingleItem(props: SingleItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, showMinimalView, parentIsReadOnly, onQrItemChange } =
-    props;
+  const {
+    qItem,
+    qrItem,
+    isRepeated,
+    isTabled,
+    groupCardElevation,
+    showMinimalView,
+    parentIsReadOnly,
+    onQrItemChange
+  } = props;
 
   const updateEnableWhenItem = useQuestionnaireStore.use.updateEnableWhenItem();
 
@@ -50,11 +60,25 @@ function SingleItem(props: SingleItemProps) {
       if (newQrItem.answer) {
         updateEnableWhenItem(qItem.linkId, newQrItem.answer);
       }
+
+      if (qrItem && qrItem.item && qrItem.item.length > 0) {
+        onQrItemChange({ ...newQrItem, item: qrItem.item });
+      } else {
+        onQrItemChange(newQrItem);
+      }
+    },
+    [updateEnableWhenItem, qItem.linkId, qrItem, onQrItemChange]
+  );
+
+  const handleQrItemChangeWithNestedItems = useCallback(
+    (newQrItem: QuestionnaireResponseItem) => {
       onQrItemChange(newQrItem);
     },
-    [updateEnableWhenItem, onQrItemChange, qItem.linkId]
+    [onQrItemChange]
   );
 
+  const qItemHasNestedItems = !!qItem.item && qItem.item.length > 0;
+
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const itemIsHidden = useHidden(qItem);
   if (itemIsHidden) {
@@ -62,15 +86,26 @@ function SingleItem(props: SingleItemProps) {
   }
 
   return (
-    <SingleItemSwitcher
-      qItem={qItem}
-      qrItem={qrItem}
-      isRepeated={isRepeated}
-      isTabled={isTabled}
-      showMinimalView={showMinimalView}
-      parentIsReadOnly={readOnly}
-      onQrItemChange={handleQrItemChange}
-    />
+    <>
+      <SingleItemSwitcher
+        qItem={qItem}
+        qrItem={qrItem}
+        isRepeated={isRepeated}
+        isTabled={isTabled}
+        showMinimalView={showMinimalView}
+        parentIsReadOnly={readOnly}
+        onQrItemChange={handleQrItemChange}
+      />
+      {qItemHasNestedItems ? (
+        <SingleNestedItems
+          qItem={qItem}
+          qrItem={qrItem}
+          groupCardElevation={groupCardElevation}
+          parentIsReadOnly={readOnly}
+          onQrItemChange={handleQrItemChangeWithNestedItems}
+        />
+      ) : null}
+    </>
   );
 }