@aehrc/smart-forms-renderer 1.0.0-alpha.99 → 1.1.0

package/src/components/FormComponents/Tables/SelectRowButton.tsx

@@ -18,7 +18,7 @@
 import React from 'react';
 import TableCell from '@mui/material/TableCell';
 import { StandardCheckbox } from '../../Checkbox.styles';
-import { useRendererStylingStore } from '../../../stores';
+import { useRendererConfigStore } from '../../../stores';
 import type { QuestionnaireItem } from 'fhir/r4';
 
 interface SelectRowButtonProps {
@@ -31,7 +31,7 @@ interface SelectRowButtonProps {
 function SelectRowButton(props: SelectRowButtonProps) {
   const { qItem, isChecked, readOnly, onSelectItem } = props;
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
 
   return (
     <TableCell padding="none">

package/src/components/FormComponents/Tables/Table.styles.tsx

@@ -20,6 +20,7 @@ import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
 import { grey } from '@mui/material/colors';
 
+// No need to pass calculatedWidth to HeaderCells, it auto adjusts to content
 export const HeaderTableCell = styled(TableCell)(({ theme }) => ({
   fontSize: 13,
   color: theme.palette.text.primary,
@@ -29,9 +30,11 @@ export const HeaderTableCell = styled(TableCell)(({ theme }) => ({
 }));
 
 export const StandardTableCell = styled(TableCell, {
-  shouldForwardProp: (prop) => prop !== 'numOfColumns'
-})<{ numOfColumns: number }>(({ numOfColumns }) => ({
-  width: `${100 / numOfColumns}%`,
+  shouldForwardProp: (prop) => prop !== 'calculatedWidth'
+})<{
+  calculatedWidth?: string;
+}>(({ calculatedWidth }) => ({
+  width: calculatedWidth,
   paddingLeft: 4,
   paddingRight: 4
 }));
@@ -49,11 +52,13 @@ export const GridTextTableCell = styled(TableCell)(({ theme }) => ({
 }));
 
 export const GridAnswerTableCell = styled(TableCell, {
-  shouldForwardProp: (prop) => prop !== 'numOfColumns'
-})<{ numOfColumns: number }>(({ numOfColumns }) => ({
-  width: `${80 / numOfColumns}%`,
-  paddingLeft: 5,
-  paddingRight: 5
+  shouldForwardProp: (prop) => prop !== 'calculatedWidth'
+})<{
+  calculatedWidth?: string;
+}>(({ calculatedWidth }) => ({
+  width: calculatedWidth,
+  paddingLeft: 4,
+  paddingRight: 4
 }));
 
 export const StyledGroupTableRow = styled(TableRow, {

package/src/components/FormComponents/TextItem/TextField.tsx

@@ -18,7 +18,7 @@
 import InputAdornment from '@mui/material/InputAdornment';
 import MuiTextField from './MuiTextField';
 import DisplayUnitText from '../ItemParts/DisplayUnitText';
-import { useRendererStylingStore } from '../../../stores';
+import { useRendererConfigStore } from '../../../stores';
 import ExpressionUpdateFadingIcon from '../ItemParts/ExpressionUpdateFadingIcon';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type { RenderingExtensions } from '../../../hooks/useRenderingExtensions';
@@ -33,7 +33,6 @@ interface TextFieldProps {
   calcExpUpdated: boolean;
   onInputChange: (value: string) => void;
   onRepopulateSync: (newQrItem: QuestionnaireResponseItem | null) => unknown;
-  onBlur: () => void;
 }
 
 function TextField(props: TextFieldProps) {
@@ -45,13 +44,12 @@ function TextField(props: TextFieldProps) {
     readOnly,
     calcExpUpdated,
     onInputChange,
-    onRepopulateSync,
-    onBlur
+    onRepopulateSync
   } = props;
 
   const { displayPrompt, displayUnit, entryFormat, isRepopulatable } = renderingExtensions;
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
 
   return (
     <MuiTextField
@@ -59,7 +57,6 @@ function TextField(props: TextFieldProps) {
       value={input}
       error={!!feedback}
       onChange={(event) => onInputChange(event.target.value)}
-      onBlur={onBlur}
       disabled={readOnly && readOnlyVisualStyle === 'disabled'}
       placeholder={entryFormat || displayPrompt}
       fullWidth

package/src/components/FormComponents/TextItem/TextItem.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import debounce from 'lodash.debounce';
@@ -23,12 +23,10 @@ import { createEmptyQrItem } from '../../../utils/qrItem';
 import { DEBOUNCE_DURATION } from '../../../utils/debounce';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import TextField from './TextField';
-import useStringCalculatedExpression from '../../../hooks/useStringCalculatedExpression';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useReadOnly from '../../../hooks/useReadOnly';
 import { useQuestionnaireStore } from '../../../stores';
 import ItemLabel from '../ItemParts/ItemLabel';
-import useShowFeedback from '../../../hooks/useShowFeedback';
 import { readStringValue } from '../../../utils/readValues';
 import type { QuestionnaireResponseItem } from 'fhir/r4';
 import { sanitizeInput } from '../../../utils/inputSanitization';
@@ -37,11 +35,11 @@ function TextItem(props: BaseItemProps) {
   const {
     qItem,
     qrItem,
-    itemPath,
     isRepeated,
     renderingExtensions,
     parentIsReadOnly,
     feedbackFromParent,
+    calcExpUpdated,
     onQrItemChange
   } = props;
 
@@ -58,64 +56,28 @@ function TextItem(props: BaseItemProps) {
   // Perform validation checks
   const feedback = useValidationFeedback(qItem, feedbackFromParent);
 
-  // Provides a way to hide the feedback when the user is typing
-  const { showFeedback, setShowFeedback, hasBlurred, setHasBlurred } = useShowFeedback();
-
-  // Process calculated expressions
-  const { calcExpUpdated } = useStringCalculatedExpression({
-    qItem: qItem,
-    inputValue: input,
-    onChangeByCalcExpressionString: (newValueString: string) => {
-      setInput(newValueString);
-      onQrItemChange(
-        {
-          ...createEmptyQrItem(qItem, answerKey),
-          answer: [{ id: answerKey, valueString: sanitizeInput(newValueString) }]
-        },
-        itemPath
-      );
-    },
-    onChangeByCalcExpressionNull: () => {
-      setInput('');
-      onQrItemChange(createEmptyQrItem(qItem, answerKey), itemPath);
-    }
-  });
-
   // Event handlers
   function handleInputChange(newInput: string) {
     setInput(newInput);
 
-    // Only suppress feedback once (before first blur)
-    if (!hasBlurred) {
-      setShowFeedback(false);
-    }
-
     updateQrItemWithDebounce(newInput);
   }
 
-  function handleBlur() {
-    setShowFeedback(true);
-    setHasBlurred(true); // From now on, feedback should stay visible
-  }
-
   function handleRepopulateSync(newQrItem: QuestionnaireResponseItem | null) {
     if (newQrItem && newQrItem?.answer) {
       const { valueString: newValueString, initialInput: newInput } = readStringValue(newQrItem);
 
       setInput(newInput);
-      onQrItemChange(
-        {
-          ...createEmptyQrItem(qItem, answerKey),
-          answer: [{ id: answerKey, valueString: sanitizeInput(newValueString) }]
-        },
-        itemPath
-      );
+      onQrItemChange({
+        ...createEmptyQrItem(qItem, answerKey),
+        answer: [{ id: answerKey, valueString: sanitizeInput(newValueString) }]
+      });
       return;
     }
 
     // At this point newQrItem is null, so create an QRItem to replace it
     setInput('');
-    onQrItemChange(createEmptyQrItem(qItem, answerKey), itemPath);
+    onQrItemChange(createEmptyQrItem(qItem, answerKey));
   }
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -139,13 +101,12 @@ function TextItem(props: BaseItemProps) {
       <TextField
         qItem={qItem}
         input={input}
-        feedback={showFeedback ? feedback : ''}
+        feedback={feedback ?? ''}
         renderingExtensions={renderingExtensions}
         readOnly={readOnly}
         calcExpUpdated={calcExpUpdated}
         onInputChange={handleInputChange}
         onRepopulateSync={handleRepopulateSync}
-        onBlur={handleBlur}
       />
     );
   }
@@ -154,6 +115,7 @@ function TextItem(props: BaseItemProps) {
     <FullWidthFormComponentBox
       data-test="q-item-text-box"
       data-linkid={qItem.linkId}
+      data-label={qItem.text}
       onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid
         qItem={qItem}
@@ -163,16 +125,15 @@ function TextItem(props: BaseItemProps) {
           <TextField
             qItem={qItem}
             input={input}
-            feedback={showFeedback ? feedback : ''}
+            feedback={feedback ?? ''}
             renderingExtensions={renderingExtensions}
             readOnly={readOnly}
             calcExpUpdated={calcExpUpdated}
             onInputChange={handleInputChange}
             onRepopulateSync={handleRepopulateSync}
-            onBlur={handleBlur}
           />
         }
-        feedback={showFeedback ? feedback : undefined}
+        feedback={feedback ?? undefined}
       />
     </FullWidthFormComponentBox>
   );

package/src/components/FormComponents/Textfield.styles.ts

@@ -24,7 +24,7 @@ import TextField from '@mui/material/TextField';
 export const StandardTextField = styled(TextField, {
   shouldForwardProp: (prop) => prop !== 'isTabled' && prop !== 'textFieldWidth'
 })<{ isTabled: boolean; textFieldWidth: number }>(({ isTabled, textFieldWidth }) => ({
-  // Set textFieldWidth (defaults to 320 in rendererStylingStore) as the standard width for a field
+  // Set textFieldWidth (defaults to 320 in rendererConfigStore) as the standard width for a field
   // Set a theoretical infinite maxWidth (3000) if field is within a table to fill the table row
   maxWidth: !isTabled ? textFieldWidth : 3000,
   minWidth: 160,

package/src/components/FormComponents/TimeItem/TimeField.tsx

@@ -16,13 +16,13 @@
  */
 
 import React from 'react';
-import type { PropsWithIsTabledRequiredAttribute } from '../../../interfaces/renderProps.interface';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
 import type { Dayjs } from 'dayjs';
 import { LocalizationProvider, TimePicker as MuiTimePicker } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { useRendererStylingStore } from '../../../stores';
+import { useRendererConfigStore } from '../../../stores';
 
-interface TimeFieldProps extends PropsWithIsTabledRequiredAttribute {
+interface TimeFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
   itemType: string;
   value: Dayjs | null;
@@ -36,7 +36,7 @@ function TimeField(props: TimeFieldProps) {
   const { linkId, itemType, value, displayPrompt, entryFormat, readOnly, isTabled, onTimeChange } =
     props;
 
-  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+  const textFieldWidth = useRendererConfigStore.use.textFieldWidth();
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -53,6 +53,7 @@ function TimeField(props: TimeFieldProps) {
           textField: {
             fullWidth: true
           }
+          // EndAdornment not available here
         }}
         onChange={onTimeChange}
       />

package/src/components/FormComponents/TimeItem/TimeItem.tsx

@@ -49,13 +49,16 @@ function TimeItem(props: BaseItemProps) {
   if (qrItem?.answer && qrItem?.answer[0].valueTime) {
     timeString = qrItem.answer[0].valueTime;
   }
-  const timeDayJs = timeString ? dayjs(timeString) : null;
+  const timeDayJs = timeString ? dayjs(timeString, 'HH:mm:ss') : null;
 
   // Event handlers
   function handleTimeChange(newValue: Dayjs | null) {
     const emptyQrItem = createEmptyQrItem(qItem, answerKey);
     if (newValue) {
-      onQrItemChange({ ...emptyQrItem, answer: [{ id: answerKey, valueTime: newValue.format() }] });
+      onQrItemChange({
+        ...emptyQrItem,
+        answer: [{ id: answerKey, valueTime: newValue.format('HH:mm:ss') }]
+      });
     } else {
       onQrItemChange(emptyQrItem);
     }
@@ -80,6 +83,7 @@ function TimeItem(props: BaseItemProps) {
     <FullWidthFormComponentBox
       data-test="q-item-time-box"
       data-linkid={qItem.linkId}
+      data-label={qItem.text}
       onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid
         qItem={qItem}

package/src/components/FormComponents/UrlItem/UrlField.tsx

@@ -16,14 +16,14 @@
  */
 
 import React from 'react';
-import type { PropsWithIsTabledRequiredAttribute } from '../../../interfaces/renderProps.interface';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
 import InputAdornment from '@mui/material/InputAdornment';
 import { StandardTextField } from '../Textfield.styles';
-import { useRendererStylingStore } from '../../../stores';
+import { useRendererConfigStore } from '../../../stores';
 import DisplayUnitText from '../ItemParts/DisplayUnitText';
 import { ClearButtonAdornment } from '../ItemParts/ClearButtonAdornment';
 
-interface UrlFieldProps extends PropsWithIsTabledRequiredAttribute {
+interface UrlFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
   itemType: string;
   input: string;
@@ -33,7 +33,6 @@ interface UrlFieldProps extends PropsWithIsTabledRequiredAttribute {
   entryFormat: string;
   readOnly: boolean;
   onInputChange: (value: string) => void;
-  onBlur: () => void;
 }
 
 function UrlField(props: UrlFieldProps) {
@@ -47,12 +46,11 @@ function UrlField(props: UrlFieldProps) {
     entryFormat,
     readOnly,
     isTabled,
-    onInputChange,
-    onBlur
+    onInputChange
   } = props;
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
-  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
+  const textFieldWidth = useRendererConfigStore.use.textFieldWidth();
 
   return (
     <StandardTextField
@@ -64,7 +62,6 @@ function UrlField(props: UrlFieldProps) {
       value={input}
       error={!!feedback}
       onChange={(event) => onInputChange(event.target.value)}
-      onBlur={onBlur}
       placeholder={entryFormat || displayPrompt}
       disabled={readOnly && readOnlyVisualStyle === 'disabled'}
       size="small"

package/src/components/FormComponents/UrlItem/UrlItem.tsx

@@ -27,7 +27,6 @@ import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useReadOnly from '../../../hooks/useReadOnly';
 import { useQuestionnaireStore } from '../../../stores';
 import ItemLabel from '../ItemParts/ItemLabel';
-import useShowFeedback from '../../../hooks/useShowFeedback';
 import { sanitizeInput } from '../../../utils/inputSanitization';
 
 function UrlItem(props: BaseItemProps) {
@@ -60,26 +59,13 @@ function UrlItem(props: BaseItemProps) {
   // Perform validation checks
   const feedback = useValidationFeedback(qItem, feedbackFromParent);
 
-  // Provides a way to hide the feedback when the user is typing
-  const { showFeedback, setShowFeedback, hasBlurred, setHasBlurred } = useShowFeedback();
-
   // Event handlers
   function handleChange(newInput: string) {
     setInput(newInput);
 
-    // Only suppress feedback once (before first blur)
-    if (!hasBlurred) {
-      setShowFeedback(false);
-    }
-
     updateQrItemWithDebounce(newInput);
   }
 
-  function handleBlur() {
-    setShowFeedback(true);
-    setHasBlurred(true); // From now on, feedback should stay visible
-  }
-
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const updateQrItemWithDebounce = useCallback(
     debounce((input: string) => {
@@ -102,13 +88,12 @@ function UrlItem(props: BaseItemProps) {
         linkId={qItem.linkId}
         itemType={qItem.type}
         input={input}
-        feedback={showFeedback ? feedback : ''}
+        feedback={feedback ?? ''}
         displayPrompt={displayPrompt}
         displayUnit={displayUnit}
         entryFormat={entryFormat}
         readOnly={readOnly}
         onInputChange={handleChange}
-        onBlur={handleBlur}
         isTabled={isTabled}
       />
     );
@@ -117,6 +102,7 @@ function UrlItem(props: BaseItemProps) {
     <FullWidthFormComponentBox
       data-test="q-item-url-box"
       data-linkid={qItem.linkId}
+      data-label={qItem.text}
       onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid
         qItem={qItem}
@@ -127,17 +113,16 @@ function UrlItem(props: BaseItemProps) {
             linkId={qItem.linkId}
             itemType={qItem.type}
             input={input}
-            feedback={showFeedback ? feedback : ''}
+            feedback={feedback ?? ''}
             displayPrompt={displayPrompt}
             displayUnit={displayUnit}
             entryFormat={entryFormat}
             readOnly={readOnly}
             onInputChange={handleChange}
-            onBlur={handleBlur}
             isTabled={isTabled}
           />
         }
-        feedback={showFeedback ? feedback : undefined}
+        feedback={feedback ?? undefined}
       />
     </FullWidthFormComponentBox>
   );

package/src/components/Renderer/BaseRenderer.tsx

@@ -27,8 +27,6 @@ import type { QrRepeatGroup } from '../../interfaces/repeatGroup.interface';
 import FormBodyPaginated from './FormBodyPaginated';
 import { Container } from '@mui/material';
 import { useFormUpdateQueueStore } from '../../stores/formUpdateQueueStore';
-import type { ItemPath } from '../../interfaces/itemPath.interface';
-import { createSingleItemPath } from '../../utils/itemPath';
 import dayjs from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
@@ -58,35 +56,27 @@ function BaseRenderer() {
 
   const responseKey = useQuestionnaireResponseStore.use.key();
   const updatableResponse = useQuestionnaireResponseStore.use.updatableResponse();
-  const replaceLatestFormUpdate = useFormUpdateQueueStore.use.replaceLatestFormUpdate();
+  const enqueueFormUpdate = useFormUpdateQueueStore.use.enqueueFormUpdate();
 
   const qItemsIndexMap = useMemo(() => mapQItemsIndex(sourceQuestionnaire), [sourceQuestionnaire]);
 
-  function handleTopLevelQRItemSingleChange(
-    newTopLevelQRItem: QuestionnaireResponseItem,
-    targetItemPath?: ItemPath
-  ) {
+  function handleTopLevelQRItemSingleChange(newTopLevelQRItem: QuestionnaireResponseItem) {
     const updatedResponse: QuestionnaireResponse = structuredClone(updatableResponse);
 
     updateQrItemsInGroup(newTopLevelQRItem, null, updatedResponse, qItemsIndexMap);
 
-    replaceLatestFormUpdate({
-      questionnaireResponse: updatedResponse,
-      targetItemPath: targetItemPath
+    enqueueFormUpdate({
+      questionnaireResponse: updatedResponse
     });
   }
 
-  function handleTopLevelQRItemMultipleChange(
-    newTopLevelQRItems: QrRepeatGroup,
-    targetItemPath?: ItemPath
-  ) {
+  function handleTopLevelQRItemMultipleChange(newTopLevelQRItems: QrRepeatGroup) {
     const updatedResponse: QuestionnaireResponse = structuredClone(updatableResponse);
 
     updateQrItemsInGroup(null, newTopLevelQRItems, updatedResponse, qItemsIndexMap);
 
-    replaceLatestFormUpdate({
-      questionnaireResponse: updatedResponse,
-      targetItemPath: targetItemPath
+    enqueueFormUpdate({
+      questionnaireResponse: updatedResponse
     });
   }
 
@@ -94,7 +84,11 @@ function BaseRenderer() {
   const topLevelQRItems = structuredClone(updatableResponse.item) ?? [];
 
   if (!topLevelQItems) {
-    return <>Questionnaire does not have any items</>;
+    return (
+      <>
+        Questionnaire does not have any items or something has gone wrong. Try rebuilding the form.
+      </>
+    );
   }
 
   // If an item has multiple answers, it is a repeat group
@@ -108,10 +102,9 @@ function BaseRenderer() {
           <FormBodyPaginated
             topLevelQItems={topLevelQItems}
             topLevelQRItems={topLevelQRItemsByIndex}
-            itemPath={[]}
             parentIsReadOnly={readOnly}
-            onQrItemChange={(newTopLevelQRItem, targetItemPath) =>
-              handleTopLevelQRItemSingleChange(newTopLevelQRItem, targetItemPath)
+            onQrItemChange={(newTopLevelQRItem) =>
+              handleTopLevelQRItemSingleChange(newTopLevelQRItem)
             }
           />
         </Container>
@@ -132,12 +125,11 @@ function BaseRenderer() {
               topLevelQRItemOrItems={qrItemOrItems ?? null}
               parentIsReadOnly={readOnly}
               wholeFormIsPaginated={wholeFormIsPaginated}
-              itemPath={createSingleItemPath(qItem.linkId)}
-              onQrItemChange={(newTopLevelQRItem, targetItemPath) =>
-                handleTopLevelQRItemSingleChange(newTopLevelQRItem, targetItemPath)
+              onQrItemChange={(newTopLevelQRItem) =>
+                handleTopLevelQRItemSingleChange(newTopLevelQRItem)
               }
-              onQrRepeatGroupChange={(newTopLevelQRItems, targetItemPath) =>
-                handleTopLevelQRItemMultipleChange(newTopLevelQRItems, targetItemPath)
+              onQrRepeatGroupChange={(newTopLevelQRItems) =>
+                handleTopLevelQRItemMultipleChange(newTopLevelQRItems)
               }
             />
           );

package/src/components/Renderer/FormBodyCollapsible.tsx

@@ -21,25 +21,21 @@ import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
 import { createEmptyQrGroup, updateQrItemsInGroup } from '../../utils/qrItem';
 import type {
-  PropsWithItemPathAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../stores';
 import FormBodySingleCollapsibleWrapper from './FormBodySingleCollapsibleWrapper';
-import { extendItemPath } from '../../utils/itemPath';
-import type { ItemPath } from '../../interfaces/itemPath.interface';
 
 interface FormBodyCollapsibleProps
   extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
     PropsWithParentIsReadOnlyAttribute {
   topLevelQItem: QuestionnaireItem;
   topLevelQRItem: QuestionnaireResponseItem | null;
 }
 
 function FormBodyCollapsibleWrapper(props: FormBodyCollapsibleProps) {
-  const { topLevelQItem, topLevelQRItem, itemPath, parentIsReadOnly, onQrItemChange } = props;
+  const { topLevelQItem, topLevelQRItem, parentIsReadOnly, onQrItemChange } = props;
 
   const tabs = useQuestionnaireStore.use.tabs();
   const currentTab = useQuestionnaireStore.use.currentTabIndex();
@@ -55,9 +51,9 @@ function FormBodyCollapsibleWrapper(props: FormBodyCollapsibleProps) {
   const qItems = topLevelQItem.item;
   const qrItems = nonNullTopLevelQRItem.item;
 
-  function handleQrGroupChange(qrItem: QuestionnaireResponseItem, targetItemPath?: ItemPath) {
+  function handleQrGroupChange(qrItem: QuestionnaireResponseItem) {
     updateQrItemsInGroup(qrItem, null, nonNullTopLevelQRItem, indexMap);
-    onQrItemChange(nonNullTopLevelQRItem, targetItemPath);
+    onQrItemChange(nonNullTopLevelQRItem);
   }
 
   if (!qItems || !qrItems) {
@@ -94,7 +90,6 @@ function FormBodyCollapsibleWrapper(props: FormBodyCollapsibleProps) {
             qrItem={qrItem ?? null}
             index={i}
             selectedIndex={currentTab}
-            itemPath={extendItemPath(itemPath, qItem.linkId)}
             parentIsReadOnly={parentIsReadOnly}
             onToggleExpand={handleToggleExpand}
             onQrItemChange={handleQrGroupChange}

package/src/components/Renderer/FormBodyPageContainer.tsx

@@ -5,19 +5,15 @@ import TabContext from '@mui/lab/TabContext';
 import TabPanel from '@mui/lab/TabPanel';
 import GroupItem from '../FormComponents/GroupItem/GroupItem';
 import type {
-  PropsWithItemPathAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../stores';
 import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
 import { createEmptyQrGroup, updateQrItemsInGroup } from '../../utils/qrItem';
-import { extendItemPath } from '../../utils/itemPath';
-import type { ItemPath } from '../../interfaces/itemPath.interface';
 
 interface FormBodyPageContainerProps
   extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
     PropsWithParentIsReadOnlyAttribute {
   topLevelQItem: QuestionnaireItem;
   topLevelQRItem: QuestionnaireResponseItem | null;
@@ -31,7 +27,7 @@ interface FormBodyPageContainerProps
  * Note: This will only be used if wholeFormIsPaginated=false
  */
 function FormBodyPageContainer(props: FormBodyPageContainerProps) {
-  const { topLevelQItem, topLevelQRItem, itemPath, parentIsReadOnly, onQrItemChange } = props;
+  const { topLevelQItem, topLevelQRItem, parentIsReadOnly, onQrItemChange } = props;
 
   const pages = useQuestionnaireStore.use.pages();
   const currentPage = useQuestionnaireStore.use.currentPageIndex();
@@ -46,9 +42,9 @@ function FormBodyPageContainer(props: FormBodyPageContainerProps) {
   const qItems = topLevelQItem.item;
   const qrItems = nonNullTopLevelQRItem.item;
 
-  function handleQrGroupChange(qrItem: QuestionnaireResponseItem, targetItemPath?: ItemPath) {
+  function handleQrGroupChange(qrItem: QuestionnaireResponseItem) {
     updateQrItemsInGroup(qrItem, null, nonNullTopLevelQRItem, indexMap);
-    onQrItemChange(nonNullTopLevelQRItem, targetItemPath);
+    onQrItemChange(nonNullTopLevelQRItem);
   }
 
   if (!qItems || !qrItems) {
@@ -85,7 +81,6 @@ function FormBodyPageContainer(props: FormBodyPageContainerProps) {
                 <GroupItem
                   qItem={qItem}
                   qrItem={qrItem ?? null}
-                  itemPath={extendItemPath(itemPath, qItem.linkId)}
                   isRepeated={isRepeated}
                   groupCardElevation={1}
                   pageIsMarkedAsComplete={pageIsMarkedAsComplete}