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

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

@@ -15,10 +15,9 @@
  * limitations under the License.
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type {
-  PropsWithItemPathAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithParentStylesAttribute,
   PropsWithQrItemChangeHandler
@@ -32,16 +31,17 @@ import TableContainer from '@mui/material/TableContainer';
 import { mapQItemsIndex } from '../../../utils/mapItem';
 import GridTable from './GridTable';
 import useReadOnly from '../../../hooks/useReadOnly';
-import { useQuestionnaireStore, useRendererStylingStore } from '../../../stores';
+import { useQuestionnaireStore, useRendererConfigStore } from '../../../stores';
 import GroupHeading from '../GroupItem/GroupHeading';
-import type { ItemPath } from '../../../interfaces/itemPath.interface';
 import { structuredDataCapture } from 'fhir-sdc-helpers';
 import { getItemTextToDisplay } from '../../../utils/itemTextToDisplay';
 import { isItemHidden } from '../../../utils/qItem';
+import { useResizeColumns } from '../../../hooks/useResizeColumns';
+import { getColumnWidth } from '../../../utils/extensions';
+import { calculateColumnWidths } from '../../../utils/columnWidth';
 
 interface GridGroupProps
   extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
     PropsWithParentIsReadOnlyAttribute,
     PropsWithParentStylesAttribute {
   qItem: QuestionnaireItem;
@@ -56,20 +56,13 @@ interface GridGroupProps
  * @author Sean Fong
  */
 function GridGroup(props: GridGroupProps) {
-  const {
-    qItem,
-    qrItem,
-    itemPath,
-    groupCardElevation,
-    parentIsReadOnly,
-    parentStyles,
-    onQrItemChange
-  } = props;
+  const { qItem, qrItem, groupCardElevation, parentIsReadOnly, parentStyles, onQrItemChange } =
+    props;
 
   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 onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
@@ -117,6 +110,26 @@ function GridGroup(props: GridGroupProps) {
     [visibleColumnItems]
   );
 
+  // Table width ref and state
+  const tableContainerRef = useRef<HTMLDivElement>(null);
+  const [tableWidth, setTableWidth] = useState(0);
+
+  useResizeColumns(tableContainerRef, setTableWidth);
+
+  // Build and calculate column widths
+  // Add an initial 20% width for the row header column temporarily, will be removed after calculation
+  const columnWidths = useMemo(
+    () => ['20%', ...visibleColumnItems.map((item) => getColumnWidth(item))],
+    [visibleColumnItems]
+  );
+
+  const calculatedColumnWidths = useMemo(() => {
+    const calculatedColumnWidthsInclLabel = calculateColumnWidths(columnWidths, tableWidth);
+
+    // Remove the first column width of 20% as it is for the row header
+    return calculatedColumnWidthsInclLabel.slice(1);
+  }, [columnWidths, tableWidth]);
+
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const itemIsHidden = useHidden(qItem);
   if (itemIsHidden) {
@@ -133,10 +146,10 @@ function GridGroup(props: GridGroupProps) {
   }
 
   // Event Handlers
-  function handleRowChange(newQrItem: QuestionnaireResponseItem, targetItemPath?: ItemPath) {
+  function handleRowChange(newQrItem: QuestionnaireResponseItem) {
     const updatedQrGroup: QuestionnaireResponseItem = { ...qrGroup };
     updateQrItemsInGroup(newQrItem, null, updatedQrGroup, qItemsIndexMap);
-    onQrItemChange(updatedQrGroup, targetItemPath);
+    onQrItemChange(updatedQrGroup);
   }
 
   // Get item.text as display label
@@ -148,6 +161,7 @@ function GridGroup(props: GridGroupProps) {
       isRepeated={false}
       py={3}
       data-linkid={qItem.linkId}
+      data-label={qItem.text}
       onClick={() => onFocusLinkId(qItem.linkId)}
       style={parentStyles || undefined}>
       {itemTextToDisplay ? (
@@ -157,18 +171,20 @@ function GridGroup(props: GridGroupProps) {
         </>
       ) : null}
 
-      <TableContainer component={Paper} elevation={groupCardElevation}>
-        <GridTable
-          qItems={qRowItems}
-          qrItems={qrRowItems}
-          qItemsIndexMap={qItemsIndexMap}
-          columnHeaders={columnHeaders}
-          itemPath={itemPath}
-          parentIsReadOnly={readOnly}
-          parentStyles={parentStyles}
-          onQrItemChange={handleRowChange}
-        />
-      </TableContainer>
+      <div ref={tableContainerRef} style={{ width: '100%' }}>
+        <TableContainer component={Paper} elevation={groupCardElevation}>
+          <GridTable
+            qItems={qRowItems}
+            qrItems={qrRowItems}
+            qItemsIndexMap={qItemsIndexMap}
+            columnHeaders={columnHeaders}
+            calculatedColumnWidths={calculatedColumnWidths}
+            parentIsReadOnly={readOnly}
+            parentStyles={parentStyles}
+            onQrItemChange={handleRowChange}
+          />
+        </TableContainer>
+      </div>
     </QGroupContainerBox>
   );
 }

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

@@ -18,7 +18,6 @@
 import React, { useMemo } from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type {
-  PropsWithItemPathAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithParentStylesAttribute,
   PropsWithQrItemChangeHandler
@@ -30,26 +29,24 @@ import { getQrItemsIndex, mapQItemsIndex } from '../../../utils/mapItem';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import useHidden from '../../../hooks/useHidden';
-import { extendItemPath } from '../../../utils/itemPath';
-import type { ItemPath } from '../../../interfaces/itemPath.interface';
 import { getItemTextToDisplay } from '../../../utils/itemTextToDisplay';
 
 interface GridRowProps
   extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
     PropsWithParentIsReadOnlyAttribute,
     PropsWithParentStylesAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
   columnHeaderLabels: string[];
+  calculatedColumnWidths: { width: string; isFixed: boolean }[];
 }
 
 function GridRow(props: GridRowProps) {
   const {
     qItem,
     qrItem,
-    itemPath,
     columnHeaderLabels,
+    calculatedColumnWidths,
     parentIsReadOnly,
     parentStyles,
     onQrItemChange
@@ -73,19 +70,14 @@ function GridRow(props: GridRowProps) {
   // Add textAlign center style to all grid cells and pass it as parentStyles to the next item
   const gridCellStyles = { ...parentStyles, textAlign: 'center' };
 
-  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(rowQItems, rowQrItems, qItemsIndexMap);
 
-  const numOfColumns = columnHeaderLabels.length;
-
   // Get item.text as display label
   const itemTextToDisplay = getItemTextToDisplay(qItem);
 
@@ -102,7 +94,12 @@ function GridRow(props: GridRowProps) {
 
         // Render empty cell for sparsity
         if (matchingCellQItemIndex === -1) {
-          return <GridAnswerTableCell key={colIndex} numOfColumns={numOfColumns} />;
+          return (
+            <GridAnswerTableCell
+              key={colIndex}
+              calculatedWidth={calculatedColumnWidths[colIndex]?.width}
+            />
+          );
         }
 
         const cellQItem = rowQItems[matchingCellQItemIndex];
@@ -113,12 +110,13 @@ function GridRow(props: GridRowProps) {
         }
 
         return (
-          <GridAnswerTableCell key={colIndex} numOfColumns={numOfColumns}>
+          <GridAnswerTableCell
+            key={colIndex}
+            calculatedWidth={calculatedColumnWidths[colIndex]?.width}>
             <Box display="flex" alignItems="center" justifyContent="center">
               <SingleItem
                 qItem={cellQItem}
                 qrItem={cellQrItem ?? null}
-                itemPath={extendItemPath(itemPath, cellQItem.linkId)}
                 isRepeated={true}
                 isTabled={true}
                 groupCardElevation={1}

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

@@ -26,17 +26,14 @@ import GridRow from './GridRow';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { getQrItemsIndex } from '../../../utils/mapItem';
 import type {
-  PropsWithItemPathAttribute,
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler,
-  PropsWithParentStylesAttribute
+  PropsWithParentStylesAttribute,
+  PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
-import { extendItemPath } from '../../../utils/itemPath';
 import { default as parseStyleToJs } from 'style-to-js';
 
 interface GridTableProps
   extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
     PropsWithParentIsReadOnlyAttribute,
     PropsWithParentStylesAttribute {
   qItems: QuestionnaireItem[];
@@ -46,6 +43,7 @@ interface GridTableProps
     label: string;
     styleString: string | null;
   }[];
+  calculatedColumnWidths: { width: string; isFixed: boolean }[];
 }
 
 function GridTable(props: GridTableProps) {
@@ -54,7 +52,8 @@ function GridTable(props: GridTableProps) {
     qrItems,
     qItemsIndexMap,
     columnHeaders,
-    itemPath,
+    calculatedColumnWidths,
+
     parentIsReadOnly,
     parentStyles,
     onQrItemChange
@@ -109,7 +108,7 @@ function GridTable(props: GridTableProps) {
                 qItem={qItem}
                 qrItem={qrItem ?? null}
                 columnHeaderLabels={columnHeaderLabels}
-                itemPath={extendItemPath(itemPath, qItem.linkId)}
+                calculatedColumnWidths={calculatedColumnWidths}
                 parentIsReadOnly={parentIsReadOnly}
                 parentStyles={parentStyles}
                 onQrItemChange={onQrItemChange}

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

@@ -22,7 +22,7 @@ import type { QuestionnaireItem } from 'fhir/r4';
 import { getContextDisplays } from '../../../utils/tabs';
 import ContextDisplayItem from '../ItemParts/ContextDisplayItem';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
-import { useRendererStylingStore } from '../../../stores';
+import { useRendererConfigStore } from '../../../stores';
 import RequiredAsterisk from '../ItemParts/RequiredAsterisk';
 import ItemTextSwitcher from '../ItemParts/ItemTextSwitcher';
 import FlyoverItem from '../ItemParts/FlyoverItem';
@@ -47,7 +47,7 @@ const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
     parentStyles
   } = props;
 
-  const requiredIndicatorPosition = useRendererStylingStore.use.requiredIndicatorPosition();
+  const requiredIndicatorPosition = useRendererConfigStore.use.requiredIndicatorPosition();
 
   const { required, displayFlyover } = useRenderingExtensions(qItem);
   const contextDisplayItems = getContextDisplays(qItem);

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

@@ -21,7 +21,6 @@ import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
 import type {
   PropsWithIsRepeatedAttribute,
-  PropsWithItemPathAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithParentIsRepeatGroupAttribute,
   PropsWithParentStylesAttribute,
@@ -35,11 +34,9 @@ import GroupItemView from './GroupItemView';
 import { QGroupContainerBox } from '../../Box.styles';
 import { GroupCard } from './GroupItem.styles';
 import PageButtonsWrapper from './PageButtonWrapper';
-import type { ItemPath } from '../../../interfaces/itemPath.interface';
 
 interface GroupItemProps
   extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
     PropsWithIsRepeatedAttribute,
     PropsWithParentIsReadOnlyAttribute,
     PropsWithParentIsRepeatGroupAttribute,
@@ -60,7 +57,6 @@ function GroupItem(props: GroupItemProps) {
   const {
     qItem,
     qrItem,
-    itemPath,
     isRepeated,
     groupCardElevation,
     disableCardView,
@@ -89,16 +85,16 @@ function GroupItem(props: GroupItemProps) {
   const qrItems = qrGroup.item;
 
   // Event Handlers
-  function handleQrItemChange(newQrItem: QuestionnaireResponseItem, targetItemPath?: ItemPath) {
+  function handleQrItemChange(newQrItem: QuestionnaireResponseItem) {
     const updatedQrGroup: QuestionnaireResponseItem = { ...qrGroup };
     updateQrItemsInGroup(newQrItem, null, updatedQrGroup, qItemsIndexMap);
-    onQrItemChange(updatedQrGroup, targetItemPath);
+    onQrItemChange(updatedQrGroup);
   }
 
-  function handleQrRepeatGroupChange(qrRepeatGroup: QrRepeatGroup, targetItemPath?: ItemPath) {
+  function handleQrRepeatGroupChange(qrRepeatGroup: QrRepeatGroup) {
     const updatedQrGroup: QuestionnaireResponseItem = { ...qrGroup };
     updateQrItemsInGroup(null, qrRepeatGroup, updatedQrGroup, qItemsIndexMap);
-    onQrItemChange(updatedQrGroup, targetItemPath);
+    onQrItemChange(updatedQrGroup);
   }
 
   if (!qItems || !qrItems) {
@@ -136,7 +132,6 @@ function GroupItem(props: GroupItemProps) {
       qItem={qItem}
       childQItems={qItems}
       qrItemsByIndex={qrItemsByIndex}
-      itemPath={itemPath}
       isRepeated={isRepeated}
       groupCardElevation={groupCardElevation}
       disableCardView={disableCardView}

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

@@ -17,7 +17,6 @@
 
 import React from 'react';
 import type {
-  PropsWithItemPathAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithParentIsRepeatGroupAttribute,
   PropsWithParentStylesAttribute,
@@ -37,7 +36,6 @@ import { useQuestionnaireStore } from '../../../stores';
 
 interface GroupItemSwitcherProps
   extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
     PropsWithQrRepeatGroupChangeHandler,
     PropsWithParentIsReadOnlyAttribute,
     PropsWithParentIsRepeatGroupAttribute,
@@ -51,7 +49,6 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
   const {
     qItem,
     qrItemOrItems,
-    itemPath,
     groupCardElevation,
     parentIsReadOnly,
     parentIsRepeatGroup,
@@ -80,7 +77,6 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
       <QItemOverrideComponent
         qItem={qItem}
         qrItem={qrItemOrItems ?? null}
-        itemPath={itemPath}
         isRepeated={!!qItem.repeats}
         groupCardElevation={groupCardElevation}
         parentIsReadOnly={parentIsReadOnly}
@@ -109,7 +105,6 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
         <GroupTable
           qItem={qItem}
           qrItems={qrItems}
-          itemPath={itemPath}
           groupCardElevation={groupCardElevation}
           isRepeated={true}
           parentIsReadOnly={parentIsReadOnly}
@@ -123,7 +118,6 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
       <RepeatGroup
         qItem={qItem}
         qrItems={qrItems}
-        itemPath={itemPath}
         groupCardElevation={groupCardElevation}
         parentIsReadOnly={parentIsReadOnly}
         onQrRepeatGroupChange={onQrRepeatGroupChange}
@@ -140,7 +134,6 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
       <GridGroup
         qItem={qItem}
         qrItem={qrItem ?? null}
-        itemPath={itemPath}
         groupCardElevation={groupCardElevation}
         parentIsReadOnly={parentIsReadOnly}
         onQrItemChange={onQrItemChange}
@@ -159,7 +152,6 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
           <GroupTable
             qItem={qItem}
             qrItems={[]}
-            itemPath={itemPath}
             groupCardElevation={groupCardElevation}
             isRepeated={true}
             parentIsReadOnly={parentIsReadOnly}
@@ -173,7 +165,6 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
         <RepeatGroup
           qItem={qItem}
           qrItems={[]}
-          itemPath={itemPath}
           groupCardElevation={groupCardElevation}
           parentIsReadOnly={parentIsReadOnly}
           onQrRepeatGroupChange={onQrRepeatGroupChange}
@@ -186,7 +177,6 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
       <RepeatItem
         qItem={qItem}
         qrItem={qrItem ?? null}
-        itemPath={itemPath}
         groupCardElevation={groupCardElevation}
         parentIsReadOnly={parentIsReadOnly}
         onQrItemChange={onQrItemChange}
@@ -202,7 +192,6 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
         <GroupTable
           qItem={qItem}
           qrItems={qrItem ? [qrItem] : []}
-          itemPath={itemPath}
           groupCardElevation={groupCardElevation}
           isRepeated={false}
           parentIsReadOnly={parentIsReadOnly}
@@ -216,7 +205,6 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
       <GroupItem
         qItem={qItem}
         qrItem={qrItem ?? null}
-        itemPath={itemPath}
         isRepeated={false}
         groupCardElevation={groupCardElevation}
         parentIsReadOnly={parentIsReadOnly}
@@ -233,7 +221,6 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
     <SingleItem
       qItem={qItem}
       qrItem={qrItem ?? null}
-      itemPath={itemPath}
       isRepeated={false}
       isTabled={false}
       groupCardElevation={groupCardElevation}

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

@@ -20,7 +20,6 @@ import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { QGroupContainerBox } from '../../Box.styles';
 import type {
   PropsWithIsRepeatedAttribute,
-  PropsWithItemPathAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithParentIsRepeatGroupAttribute,
   PropsWithParentStylesAttribute,
@@ -42,12 +41,10 @@ import useReadOnly from '../../../hooks/useReadOnly';
 import { GroupAccordion } from './GroupAccordion.styles';
 import PageButtonsWrapper from './PageButtonWrapper';
 import { useParseXhtml } from '../../../hooks/useParseXhtml';
-import { extendItemPath } from '../../../utils/itemPath';
 import { getItemTextToDisplay } from '../../../utils/itemTextToDisplay';
 
 interface GroupItemViewProps
   extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
     PropsWithQrRepeatGroupChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithParentIsReadOnlyAttribute,
@@ -71,7 +68,7 @@ function GroupItemView(props: GroupItemViewProps) {
     qItem,
     childQItems,
     qrItemsByIndex,
-    itemPath,
+
     isRepeated = false,
     groupCardElevation,
     disableCardView,
@@ -145,7 +142,6 @@ function GroupItemView(props: GroupItemViewProps) {
                   key={childQItem.linkId}
                   qItem={childQItem}
                   qrItemOrItems={qrItemOrItems}
-                  itemPath={extendItemPath(itemPath, childQItem.linkId)}
                   groupCardElevation={groupCardElevation + 1}
                   parentIsReadOnly={readOnly}
                   parentIsRepeatGroup={parentIsRepeatGroup}
@@ -198,7 +194,6 @@ function GroupItemView(props: GroupItemViewProps) {
               key={childQItem.linkId}
               qItem={childQItem}
               qrItemOrItems={qrItemOrItems}
-              itemPath={extendItemPath(itemPath, childQItem.linkId)}
               groupCardElevation={groupCardElevation + 1}
               parentIsReadOnly={readOnly}
               parentIsRepeatGroup={parentIsRepeatGroup}
@@ -249,7 +244,6 @@ function GroupItemView(props: GroupItemViewProps) {
               key={childQItem.linkId}
               qItem={childQItem}
               qrItemOrItems={qrItemOrItems}
-              itemPath={extendItemPath(itemPath, childQItem.linkId)}
               groupCardElevation={groupCardElevation + 1}
               parentIsReadOnly={readOnly}
               parentIsRepeatGroup={parentIsRepeatGroup}

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

@@ -6,7 +6,7 @@ import { useQuestionnaireStore } from '../../../stores';
 import NextPageButton from './NextPageButton';
 import PreviousPageButton from './PreviousPageButton';
 import useNextAndPreviousVisiblePages from '../../../hooks/useNextAndPreviousVisiblePages';
-import { useRendererStylingStore } from '../../../stores/rendererStylingStore';
+import { useRendererConfigStore } from '../../../stores/rendererConfigStore';
 
 interface PageButtonsWrapperProps {
   currentPageIndex?: number;
@@ -17,7 +17,7 @@ const PageButtonsWrapper = memo(function PageButtonsWrapper(props: PageButtonsWr
   const { currentPageIndex, pages } = props;
 
   const switchPage = useQuestionnaireStore.use.switchPage();
-  const disablePageButtons = useRendererStylingStore.use.disablePageButtons();
+  const disablePageButtons = useRendererConfigStore.use.disablePageButtons();
 
   const { previousPageIndex, nextPageIndex, numOfVisiblePages } = useNextAndPreviousVisiblePages(
     currentPageIndex,

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

@@ -18,7 +18,7 @@
 import React, { memo } from 'react';
 import Box from '@mui/material/Box';
 import type { Tabs } from '../../../interfaces/tab.interface';
-import { useQuestionnaireStore, useRendererStylingStore } from '../../../stores';
+import { useQuestionnaireStore, useRendererConfigStore } from '../../../stores';
 import NextTabButton from './NextTabButton';
 import PreviousTabButton from './PreviousTabButton';
 import useNextAndPreviousVisibleTabs from '../../../hooks/useNextAndPreviousVisibleTabs';
@@ -33,7 +33,7 @@ const TabButtonsWrapper = memo(function TabButtonsWrapper(props: TabButtonsWrapp
   const { currentTabIndex, tabs } = props;
 
   const switchTab = useQuestionnaireStore.use.switchTab();
-  const disableTabButtons = useRendererStylingStore.use.disableTabButtons();
+  const disableTabButtons = useRendererConfigStore.use.disableTabButtons();
 
   const { previousTabIndex, nextTabIndex, numOfVisibleTabs } = useNextAndPreviousVisibleTabs(
     currentTabIndex,

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

@@ -16,17 +16,17 @@
  */
 
 import InputAdornment from '@mui/material/InputAdornment';
-import { StandardTextField } from '../Textfield.styles';
-import type { PropsWithIsTabledRequiredAttribute } from '../../../interfaces/renderProps.interface';
-import { useRendererStylingStore } from '../../../stores';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import { useRendererConfigStore } from '../../../stores';
 import DisplayUnitText from '../ItemParts/DisplayUnitText';
 import { ClearButtonAdornment } from '../ItemParts/ClearButtonAdornment';
 import ExpressionUpdateFadingIcon from '../ItemParts/ExpressionUpdateFadingIcon';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import ItemRepopulateButton from '../ItemParts/ItemRepopulateButton';
 import type { RenderingExtensions } from '../../../hooks/useRenderingExtensions';
+import { StandardTextField } from '../Textfield.styles';
 
-interface IntegerFieldProps extends PropsWithIsTabledRequiredAttribute {
+interface IntegerFieldProps extends PropsWithIsTabledAttribute {
   qItem: QuestionnaireItem;
   input: string;
   feedback: string;
@@ -35,7 +35,6 @@ interface IntegerFieldProps extends PropsWithIsTabledRequiredAttribute {
   calcExpUpdated: boolean;
   onInputChange: (value: string) => void;
   onRepopulateSync: (newQrItem: QuestionnaireResponseItem | null) => unknown;
-  onBlur: () => void;
 }
 
 function IntegerField(props: IntegerFieldProps) {
@@ -48,14 +47,13 @@ function IntegerField(props: IntegerFieldProps) {
     calcExpUpdated,
     isTabled,
     onInputChange,
-    onRepopulateSync,
-    onBlur
+    onRepopulateSync
   } = props;
 
   const { displayPrompt, displayUnit, entryFormat, isRepopulatable } = renderingExtensions;
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
-  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
+  const textFieldWidth = useRendererConfigStore.use.textFieldWidth();
 
   let placeholderText = '0';
   if (displayPrompt) {
@@ -73,7 +71,6 @@ function IntegerField(props: IntegerFieldProps) {
       error={!!feedback}
       helperText={feedback}
       onChange={(event) => onInputChange(event.target.value)}
-      onBlur={onBlur}
       disabled={readOnly && readOnlyVisualStyle === 'disabled'}
       label={displayPrompt}
       placeholder={placeholderText}