@aehrc/smart-forms-renderer 1.0.0-alpha.98 → 1.0.0

package/src/components/FormComponents/StringItem/StringItem.tsx

@@ -15,55 +15,32 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useState } from 'react';
-import type {
-  PropsWithFeedbackFromParentAttribute,
-  PropsWithIsRepeatedAttribute,
-  PropsWithIsTabledRequiredAttribute,
-  PropsWithItemPathAttribute,
-  PropsWithParentIsReadOnlyAttribute,
-  PropsWithParentStylesAttribute,
-  PropsWithQrItemChangeHandler,
-  PropsWithRenderingExtensionsAttribute
-} from '../../../interfaces/renderProps.interface';
-import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import useValidationFeedback from '../../../hooks/useValidationFeedback';
+import type { QuestionnaireResponseItem } from 'fhir/r4';
 import debounce from 'lodash.debounce';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { useCallback, useState } from 'react';
+import useReadOnly from '../../../hooks/useReadOnly';
+import useValidationFeedback from '../../../hooks/useValidationFeedback';
+import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
+import { useQuestionnaireStore } from '../../../stores';
 import { DEBOUNCE_DURATION } from '../../../utils/debounce';
+import { createEmptyQrItem } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
-import StringField from './StringField';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
-import useStringCalculatedExpression from '../../../hooks/useStringCalculatedExpression';
-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 { sanitizeInput } from '../../../utils/inputSanitization';
+import StringField from './StringField';
 
-interface StringItemProps
-  extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
-    PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledRequiredAttribute,
-    PropsWithRenderingExtensionsAttribute,
-    PropsWithParentIsReadOnlyAttribute,
-    PropsWithFeedbackFromParentAttribute,
-    PropsWithParentStylesAttribute {
-  qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem | null;
-}
-function StringItem(props: StringItemProps) {
+function StringItem(props: BaseItemProps) {
   const {
     qItem,
     qrItem,
-    itemPath,
     isRepeated,
     isTabled,
     renderingExtensions,
     parentIsReadOnly,
     feedbackFromParent,
+    calcExpUpdated,
     parentStyles,
     onQrItemChange
   } = props;
@@ -81,64 +58,28 @@ function StringItem(props: StringItemProps) {
   // 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 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
-  }
-
   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
@@ -162,13 +103,12 @@ function StringItem(props: StringItemProps) {
       <StringField
         qItem={qItem}
         input={input}
-        feedback={showFeedback ? feedback : ''}
+        feedback={feedback ?? ''}
         renderingExtensions={renderingExtensions}
         readOnly={readOnly}
         calcExpUpdated={calcExpUpdated}
         onInputChange={handleChange}
         onRepopulateSync={handleRepopulateSync}
-        onBlur={handleBlur}
         isTabled={isTabled}
       />
     );
@@ -177,6 +117,7 @@ function StringItem(props: StringItemProps) {
     <FullWidthFormComponentBox
       data-test="q-item-string-box"
       data-linkid={qItem.linkId}
+      data-label={qItem.text}
       onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid
         qItem={qItem}
@@ -186,17 +127,16 @@ function StringItem(props: StringItemProps) {
           <StringField
             qItem={qItem}
             input={input}
-            feedback={showFeedback ? feedback : ''}
+            feedback={feedback ?? ''}
             renderingExtensions={renderingExtensions}
             readOnly={readOnly}
             calcExpUpdated={calcExpUpdated}
             onInputChange={handleChange}
             onRepopulateSync={handleRepopulateSync}
-            onBlur={handleBlur}
             isTabled={isTabled}
           />
         }
-        feedback={showFeedback ? feedback : undefined}
+        feedback={feedback ?? undefined}
       />
     </FullWidthFormComponentBox>
   );

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

@@ -15,13 +15,12 @@
  * limitations under the License.
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { mapQItemsIndex } from '../../../utils/mapItem';
 import type {
   PropsWithIsRepeatedAttribute,
-  PropsWithItemPathAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrRepeatGroupChangeHandler
 } from '../../../interfaces/renderProps.interface';
@@ -33,13 +32,14 @@ import useGroupTableRows from '../../../hooks/useGroupTableRows';
 import { flushSync } from 'react-dom';
 import { generateNewRepeatId } from '../../../utils/repeatId';
 import useInitialiseGroupTableRows from '../../../hooks/useInitialiseGroupTableRows';
-import type { ItemPath } from '../../../interfaces/itemPath.interface';
 import { isItemHidden } from '../../../utils/qItem';
-import { useQuestionnaireStore, useRendererStylingStore } from '../../../stores';
+import { useQuestionnaireStore, useRendererConfigStore } from '../../../stores';
+import { getColumnWidth } from '../../../utils/extensions';
+import { calculateColumnWidths } from '../../../utils/columnWidth';
+import { useResizeColumns } from '../../../hooks/useResizeColumns';
 
 interface GroupTableProps
   extends PropsWithQrRepeatGroupChangeHandler,
-    PropsWithItemPathAttribute,
     PropsWithIsRepeatedAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
@@ -58,7 +58,7 @@ function GroupTable(props: GroupTableProps) {
   const {
     qItem,
     qrItems,
-    itemPath,
+
     groupCardElevation,
     isRepeated,
     parentIsReadOnly,
@@ -69,13 +69,13 @@ function GroupTable(props: GroupTableProps) {
   const enableWhenIsActivated = useQuestionnaireStore.use.enableWhenIsActivated();
   const enableWhenItems = useQuestionnaireStore.use.enableWhenItems();
   const enableWhenExpressions = useQuestionnaireStore.use.enableWhenExpressions();
-  const enableWhenAsReadOnly = useRendererStylingStore.use.enableWhenAsReadOnly();
+  const enableWhenAsReadOnly = useRendererConfigStore.use.enableWhenAsReadOnly();
 
   const initialGroupTableRows = useInitialiseGroupTableRows(qItem.linkId, qrItems);
   const { tableRows, selectedIds, setTableRows, setSelectedIds } =
     useGroupTableRows(initialGroupTableRows);
 
-  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const qItemsIndexMap = useMemo(() => mapQItemsIndex(qItem), [qItem]);
 
   // Generate item labels as table headers
   const qItems = qItem.item;
@@ -96,7 +96,41 @@ function GroupTable(props: GroupTableProps) {
     [enableWhenAsReadOnly, enableWhenExpressions, enableWhenIsActivated, enableWhenItems, qItems]
   );
 
-  const qItemsIndexMap = useMemo(() => mapQItemsIndex(qItem), [qItem]);
+  // Get visible label items
+  const visibleLabelItems = useMemo(
+    () =>
+      qItems?.filter(
+        (item) =>
+          !isItemHidden(
+            item,
+            enableWhenIsActivated,
+            enableWhenItems,
+            enableWhenExpressions,
+            enableWhenAsReadOnly
+          )
+      ) ?? [],
+    [enableWhenAsReadOnly, enableWhenExpressions, enableWhenIsActivated, enableWhenItems, qItems]
+  );
+
+  // Table width ref and state
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const [tableWidth, setTableWidth] = useState(0);
+
+  useResizeColumns(tableContainerRef, setTableWidth);
+
+  // Build and calculate column widths
+  const columnWidths = useMemo(
+    () => visibleLabelItems.map((item) => getColumnWidth(item)),
+    [visibleLabelItems]
+  );
+
+  const calculatedColumnWidths = useMemo(
+    () => calculateColumnWidths(columnWidths, tableWidth),
+    [columnWidths, tableWidth]
+  );
+
+  // Determine if the group table is readOnly
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
   // Check if there are columns within the group table
   if (!qItems || qItems.length === 0) {
@@ -104,11 +138,7 @@ function GroupTable(props: GroupTableProps) {
   }
 
   // Event Handlers
-  function handleRowChange(
-    newQrRow: QuestionnaireResponseItem,
-    index: number,
-    targetItemPath?: ItemPath
-  ) {
+  function handleRowChange(newQrRow: QuestionnaireResponseItem, index: number) {
     const updatedTableRows = [...tableRows];
 
     if (newQrRow.item) {
@@ -121,14 +151,10 @@ function GroupTable(props: GroupTableProps) {
 
     setTableRows(updatedTableRows);
 
-    // Include targetItemPath because an answer is changed
-    onQrRepeatGroupChange(
-      {
-        linkId: qItem.linkId,
-        qrItems: getGroupTableItemsToUpdate(updatedTableRows, selectedIds)
-      },
-      targetItemPath
-    );
+    onQrRepeatGroupChange({
+      linkId: qItem.linkId,
+      qrItems: getGroupTableItemsToUpdate(updatedTableRows, selectedIds)
+    });
   }
 
   function handleRemoveRow(index: number) {
@@ -141,7 +167,6 @@ function GroupTable(props: GroupTableProps) {
 
     setTableRows(updatedTableRows);
 
-    // Don't need to include targetItemPath, only include targetItemPath if an answer is changed
     onQrRepeatGroupChange({
       linkId: qItem.linkId,
       qrItems: getGroupTableItemsToUpdate(updatedTableRows, updatedSelectedIds)
@@ -167,7 +192,6 @@ function GroupTable(props: GroupTableProps) {
       selectedIds.length === tableRows.length ? [] : tableRows.map((tableRow) => tableRow.id);
     setSelectedIds(updatedTableIds);
 
-    // Don't need to include targetItemPath, only include targetItemPath if an answer is changed
     onQrRepeatGroupChange({
       linkId: qItem.linkId,
       qrItems: getGroupTableItemsToUpdate(tableRows, updatedTableIds)
@@ -186,7 +210,6 @@ function GroupTable(props: GroupTableProps) {
 
     setSelectedIds(updatedSelectedIds);
 
-    // Don't need to include targetItemPath, only include targetItemPath if an answer is changed
     onQrRepeatGroupChange({
       linkId: qItem.linkId,
       qrItems: getGroupTableItemsToUpdate(tableRows, updatedSelectedIds)
@@ -199,7 +222,6 @@ function GroupTable(props: GroupTableProps) {
       setTableRows(newTableRows);
     });
 
-    // Don't need to include targetItemPath, only include targetItemPath if an answer is changed
     onQrRepeatGroupChange({
       linkId: qItem.linkId,
       qrItems: getGroupTableItemsToUpdate(newTableRows, selectedIds)
@@ -207,25 +229,27 @@ function GroupTable(props: GroupTableProps) {
   }
 
   return (
-    <GroupTableView
-      qItem={qItem}
-      qItemsIndexMap={qItemsIndexMap}
-      itemPath={itemPath}
-      groupCardElevation={groupCardElevation}
-      isRepeated={isRepeated}
-      readOnly={readOnly}
-      tableRows={tableRows}
-      selectedIds={selectedIds}
-      visibleItemLabels={visibleItemLabels}
-      parentIsReadOnly={parentIsReadOnly}
-      parentStyles={parentStyles}
-      onAddRow={handleAddRow}
-      onRowChange={handleRowChange}
-      onRemoveRow={handleRemoveRow}
-      onSelectRow={handleSelectRow}
-      onSelectAll={handleSelectAll}
-      onReorderRows={handleReorderRows}
-    />
+    <div ref={tableContainerRef} style={{ width: '100%' }}>
+      <GroupTableView
+        qItem={qItem}
+        qItemsIndexMap={qItemsIndexMap}
+        groupCardElevation={groupCardElevation}
+        isRepeated={isRepeated}
+        readOnly={readOnly}
+        tableRows={tableRows}
+        selectedIds={selectedIds}
+        visibleItemLabels={visibleItemLabels}
+        calculatedColumnWidths={calculatedColumnWidths}
+        parentIsReadOnly={parentIsReadOnly}
+        parentStyles={parentStyles}
+        onAddRow={handleAddRow}
+        onRowChange={handleRowChange}
+        onRemoveRow={handleRemoveRow}
+        onSelectRow={handleSelectRow}
+        onSelectAll={handleSelectAll}
+        onReorderRows={handleReorderRows}
+      />
+    </div>
   );
 }
 

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

@@ -19,33 +19,23 @@ import React from 'react';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type { GroupTableRowModel } from '../../../interfaces/groupTable.interface';
-import type {
-  PropsWithItemPathAttribute,
-  PropsWithParentIsReadOnlyAttribute
-} from '../../../interfaces/renderProps.interface';
+import type { PropsWithParentIsReadOnlyAttribute } from '../../../interfaces/renderProps.interface';
 import GroupTableRow from './GroupTableRow';
 import type { DropResult } from 'react-beautiful-dnd';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import { reorderRows } from '../../../utils/groupTable';
 import TableBody from '@mui/material/TableBody';
-import { appendRepeatIndexToLastSegment } from '../../../utils/itemPath';
-import type { ItemPath } from '../../../interfaces/itemPath.interface';
 
-interface GroupTableBodyProps
-  extends PropsWithItemPathAttribute,
-    PropsWithParentIsReadOnlyAttribute {
+interface GroupTableBodyProps extends PropsWithParentIsReadOnlyAttribute {
   tableQItem: QuestionnaireItem;
   readOnly: boolean;
   tableRows: GroupTableRowModel[];
   selectedIds: string[];
   qItemsIndexMap: Record<string, number>;
   visibleItemLabels: string[];
+  calculatedColumnWidths: { width: string; isFixed: boolean }[];
   showExtraGTableInteractions: boolean;
-  onRowChange: (
-    newQrRow: QuestionnaireResponseItem,
-    index: number,
-    targetItemPath?: ItemPath
-  ) => void;
+  onRowChange: (newQrRow: QuestionnaireResponseItem, index: number) => void;
   onRemoveRow: (index: number) => void;
   onSelectRow: (rowId: string) => void;
   onReorderRows: (newTableRows: GroupTableRowModel[]) => void;
@@ -59,8 +49,9 @@ function GroupTableBody(props: GroupTableBodyProps) {
     selectedIds,
     qItemsIndexMap,
     visibleItemLabels,
+    calculatedColumnWidths,
     showExtraGTableInteractions,
-    itemPath,
+
     parentIsReadOnly,
     onRowChange,
     onRemoveRow,
@@ -109,8 +100,8 @@ function GroupTableBody(props: GroupTableBodyProps) {
                   selectedIds={selectedIds}
                   qItemsIndexMap={qItemsIndexMap}
                   visibleItemLabels={visibleItemLabels}
+                  calculatedColumnWidths={calculatedColumnWidths}
                   showExtraGTableInteractions={showExtraGTableInteractions}
-                  itemPath={appendRepeatIndexToLastSegment(itemPath, index)}
                   parentIsReadOnly={parentIsReadOnly}
                   onRowChange={onRowChange}
                   onRemoveRow={onRemoveRow}

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

@@ -17,10 +17,7 @@
 
 import React from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import type {
-  PropsWithItemPathAttribute,
-  PropsWithParentIsReadOnlyAttribute
-} from '../../../interfaces/renderProps.interface';
+import type { PropsWithParentIsReadOnlyAttribute } from '../../../interfaces/renderProps.interface';
 import type { TableRowProps } from '@mui/material/TableRow';
 import TableRow from '@mui/material/TableRow';
 import SelectRowButton from './SelectRowButton';
@@ -32,12 +29,8 @@ import TableCell from '@mui/material/TableCell';
 import Box from '@mui/material/Box';
 import { Draggable } from 'react-beautiful-dnd';
 import { StyledGroupTableRow } from './Table.styles';
-import type { ItemPath } from '../../../interfaces/itemPath.interface';
 
-interface GroupTableRowProps
-  extends PropsWithItemPathAttribute,
-    PropsWithParentIsReadOnlyAttribute,
-    TableRowProps {
+interface GroupTableRowProps extends PropsWithParentIsReadOnlyAttribute, TableRowProps {
   rowId: string;
   index: number;
   tableQItem: QuestionnaireItem;
@@ -50,12 +43,9 @@ interface GroupTableRowProps
   selectedIds: string[];
   qItemsIndexMap: Record<string, number>;
   visibleItemLabels: string[];
+  calculatedColumnWidths: { width: string; isFixed: boolean }[];
   showExtraGTableInteractions: boolean;
-  onRowChange: (
-    newQrRow: QuestionnaireResponseItem,
-    index: number,
-    targetItemPath?: ItemPath
-  ) => void;
+  onRowChange: (newQrRow: QuestionnaireResponseItem, index: number) => void;
   onRemoveRow: (index: number) => void;
   onSelectRow: (nanoId: string) => void;
 }
@@ -73,8 +63,8 @@ function GroupTableRow(props: GroupTableRowProps) {
     itemIsSelected,
     qItemsIndexMap,
     visibleItemLabels,
+    calculatedColumnWidths,
     showExtraGTableInteractions,
-    itemPath,
     onRowChange,
     onRemoveRow,
     onSelectRow
@@ -117,7 +107,7 @@ function GroupTableRow(props: GroupTableRowProps) {
               qrItem={answeredQrItem}
               qItemsIndexMap={qItemsIndexMap}
               visibleItemLabels={visibleItemLabels}
-              itemPath={itemPath}
+              calculatedColumnWidths={calculatedColumnWidths}
               parentIsReadOnly={readOnly}
               onQrItemChange={(newQrGroup) => onRowChange(newQrGroup, index)}
             />
@@ -141,7 +131,7 @@ function GroupTableRow(props: GroupTableRowProps) {
         qrItem={answeredQrItem}
         qItemsIndexMap={qItemsIndexMap}
         visibleItemLabels={visibleItemLabels}
-        itemPath={itemPath}
+        calculatedColumnWidths={calculatedColumnWidths}
         parentIsReadOnly={readOnly}
         onQrItemChange={(newQrGroup) => onRowChange(newQrGroup, index)}
       />

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

@@ -20,24 +20,21 @@ import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
 import { getQrItemsIndex } from '../../../utils/mapItem';
 import type {
-  PropsWithItemPathAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
-import { extendItemPath } from '../../../utils/itemPath';
-import type { ItemPath } from '../../../interfaces/itemPath.interface';
 import { SingleItem } from '../SingleItem';
 import { StandardTableCell } from './Table.styles';
 import Box from '@mui/material/Box';
 
 interface GroupTableRowCellsProps
   extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
   qItemsIndexMap: Record<string, number>;
   visibleItemLabels: string[];
+  calculatedColumnWidths: { width: string; isFixed: boolean }[];
 }
 
 function GroupTableRowCells(props: GroupTableRowCellsProps) {
@@ -46,7 +43,7 @@ function GroupTableRowCells(props: GroupTableRowCellsProps) {
     qrItem,
     qItemsIndexMap,
     visibleItemLabels,
-    itemPath,
+    calculatedColumnWidths,
     parentIsReadOnly,
     onQrItemChange
   } = props;
@@ -59,13 +56,10 @@ function GroupTableRowCells(props: GroupTableRowCellsProps) {
     return null;
   }
 
-  function handleQrRowItemChange(
-    newQrRowItem: QuestionnaireResponseItem,
-    targetItemPath?: ItemPath
-  ) {
+  function handleQrRowItemChange(newQrRowItem: QuestionnaireResponseItem) {
     const qrRow: QuestionnaireResponseItem = { ...row };
     updateQrItemsInGroup(newQrRowItem, null, qrRow, qItemsIndexMap);
-    onQrItemChange(qrRow, targetItemPath);
+    onQrItemChange(qrRow);
   }
 
   const qrItemsByIndex = getQrItemsIndex(rowItems, rowQrItems, qItemsIndexMap);
@@ -86,13 +80,12 @@ function GroupTableRowCells(props: GroupTableRowCellsProps) {
         }
 
         return (
-          <StandardTableCell key={index} numOfColumns={visibleItemLabels.length}>
+          <StandardTableCell key={index} calculatedWidth={calculatedColumnWidths[index]?.width}>
             <Box display="flex" alignItems="center" justifyContent="center">
               <SingleItem
                 key={rowItem.linkId}
                 qItem={rowItem}
                 qrItem={qrItem ?? null}
-                itemPath={extendItemPath(itemPath, rowItem.linkId)}
                 isRepeated={true}
                 isTabled={true}
                 groupCardElevation={1}

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

@@ -29,13 +29,12 @@ import AddRowButton from './AddRowButton';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type {
   PropsWithIsRepeatedAttribute,
-  PropsWithItemPathAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithParentStylesAttribute
 } from '../../../interfaces/renderProps.interface';
 import type { GroupTableRowModel } from '../../../interfaces/groupTable.interface';
 import GroupTableBody from './GroupTableBody';
-import { useQuestionnaireStore, useRendererStylingStore } from '../../../stores';
+import { useQuestionnaireStore, useRendererConfigStore } from '../../../stores';
 import { getGroupCollapsible } from '../../../utils/qItem';
 import { GroupAccordion } from '../GroupItem/GroupAccordion.styles';
 import AccordionSummary from '@mui/material/AccordionSummary';
@@ -43,14 +42,12 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import GroupHeading from '../GroupItem/GroupHeading';
 import { StandardCheckbox } from '../../Checkbox.styles';
-import type { ItemPath } from '../../../interfaces/itemPath.interface';
 import { Box } from '@mui/material';
 import { getItemTextToDisplay } from '../../../utils/itemTextToDisplay';
 import { isGroupAddItemButtonHidden } from '../../../utils/extensions';
 
 interface GroupTableViewProps
   extends PropsWithIsRepeatedAttribute,
-    PropsWithItemPathAttribute,
     PropsWithParentIsReadOnlyAttribute,
     PropsWithParentStylesAttribute {
   qItem: QuestionnaireItem;
@@ -60,12 +57,9 @@ interface GroupTableViewProps
   tableRows: GroupTableRowModel[];
   selectedIds: string[];
   visibleItemLabels: string[];
+  calculatedColumnWidths: { width: string; isFixed: boolean }[];
   onAddRow: () => void;
-  onRowChange: (
-    newQrRow: QuestionnaireResponseItem,
-    index: number,
-    targetItemPath?: ItemPath
-  ) => void;
+  onRowChange: (newQrRow: QuestionnaireResponseItem, index: number) => void;
   onRemoveRow: (index: number) => void;
   onSelectRow: (rowId: string) => void;
   onSelectAll: () => void;
@@ -82,7 +76,8 @@ function GroupTableView(props: GroupTableViewProps) {
     tableRows,
     selectedIds,
     visibleItemLabels,
-    itemPath,
+    calculatedColumnWidths,
+
     parentIsReadOnly,
     parentStyles,
     onAddRow,
@@ -95,7 +90,7 @@ function GroupTableView(props: GroupTableViewProps) {
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
 
   const groupCollapsibleValue = getGroupCollapsible(qItem);
 
@@ -178,8 +173,8 @@ function GroupTableView(props: GroupTableViewProps) {
                 selectedIds={selectedIds}
                 qItemsIndexMap={qItemsIndexMap}
                 visibleItemLabels={visibleItemLabels}
+                calculatedColumnWidths={calculatedColumnWidths}
                 showExtraGTableInteractions={showExtraGTableInteractions}
-                itemPath={itemPath}
                 parentIsReadOnly={parentIsReadOnly}
                 onRowChange={onRowChange}
                 onRemoveRow={onRemoveRow}
@@ -200,6 +195,7 @@ function GroupTableView(props: GroupTableViewProps) {
       isRepeated={false}
       py={3}
       data-linkid={qItem.linkId}
+      data-label={qItem.text}
       onClick={() => onFocusLinkId(qItem.linkId)}
       style={parentStyles || undefined}>
       {itemTextToDisplay ? (
@@ -257,8 +253,8 @@ function GroupTableView(props: GroupTableViewProps) {
             selectedIds={selectedIds}
             qItemsIndexMap={qItemsIndexMap}
             visibleItemLabels={visibleItemLabels}
+            calculatedColumnWidths={calculatedColumnWidths}
             showExtraGTableInteractions={showExtraGTableInteractions}
-            itemPath={itemPath}
             parentIsReadOnly={parentIsReadOnly}
             onRowChange={onRowChange}
             onRemoveRow={onRemoveRow}