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

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

@@ -15,47 +15,28 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
-import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import type { Coding } from 'fhir/r4';
 
-import { createEmptyQrItem } from '../../../utils/qrItem';
-import { FullWidthFormComponentBox } from '../../Box.styles';
+import type { AutocompleteChangeReason } from '@mui/material';
+import type { AlertColor } from '@mui/material/Alert';
 import useDebounce from '../../../hooks/useDebounce';
+import useReadOnly from '../../../hooks/useReadOnly';
 import useTerminologyServerQuery from '../../../hooks/useTerminologyServerQuery';
-import type {
-  PropsWithFeedbackFromParentAttribute,
-  PropsWithIsRepeatedAttribute,
-  PropsWithIsTabledRequiredAttribute,
-  PropsWithItemPathAttribute,
-  PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler,
-  PropsWithRenderingExtensionsAttribute
-} from '../../../interfaces/renderProps.interface';
-import { AUTOCOMPLETE_DEBOUNCE_DURATION } from '../../../utils/debounce';
+import debounce from 'lodash.debounce';
+import { AUTOCOMPLETE_DEBOUNCE_DURATION, DEBOUNCE_DURATION } from '../../../utils/debounce';
 import OpenChoiceAutocompleteField from './OpenChoiceAutocompleteField';
-import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
-import { useQuestionnaireStore } from '../../../stores';
-import useValidationFeedback from '../../../hooks/useValidationFeedback';
-import type { AlertColor } from '@mui/material/Alert';
 import ItemLabel from '../ItemParts/ItemLabel';
-import type { AutocompleteChangeReason } from '@mui/material';
 import { sanitizeInput } from '../../../utils/inputSanitization';
+import { useValidationFeedback } from '../../../hooks';
+import { createEmptyQrItem } from '../../../utils';
+import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
+import { useQuestionnaireStore } from '../../../stores';
+import { FullWidthFormComponentBox } from '../../Box.styles';
 
-interface OpenChoiceAutocompleteItemProps
-  extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
-    PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledRequiredAttribute,
-    PropsWithRenderingExtensionsAttribute,
-    PropsWithParentIsReadOnlyAttribute,
-    PropsWithFeedbackFromParentAttribute {
-  qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem | null;
-}
-
-function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
+function OpenChoiceAutocompleteItem(props: BaseItemProps) {
   const {
     qItem,
     qrItem,
@@ -66,6 +47,7 @@ function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
     parentIsReadOnly,
     onQrItemChange
   } = props;
+  // TODO no calcExpUpdated
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
@@ -90,10 +72,6 @@ function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
-  // TODO Process calculated expressions
-  // This requires its own hook, because in the case of multi-select, we need to check if the value is already checked to prevent an infinite loop
-  // This will be done after the choice/open-choice refactoring
-
   // Perform validation checks
   const validationFeedback = useValidationFeedback(qItem, feedbackFromParent);
 
@@ -110,6 +88,22 @@ function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
     feedback = { message: validationFeedback, color: 'error' };
   }
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const updateQrItemWithDebounce = useCallback(
+    debounce((input: string) => {
+      const emptyQrItem = createEmptyQrItem(qItem, answerKey);
+      if (input !== '') {
+        onQrItemChange({
+          ...emptyQrItem,
+          answer: [{ id: answerKey, valueString: sanitizeInput(input) }]
+        });
+      } else {
+        onQrItemChange(emptyQrItem);
+      }
+    }, DEBOUNCE_DURATION),
+    [onQrItemChange, qItem]
+  ); // Dependencies are tested, debounce is causing eslint to not recognise dependencies
+
   if (!qItem.answerValueSet) {
     return null;
   }
@@ -120,14 +114,14 @@ function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
     newValue: Coding | string | null,
     reason: AutocompleteChangeReason | string
   ) {
-    //if the reason is reset, then we don't change the value, otherwise you will end up with looped setState calls
+    // If the reason is reset, then don't change value. Otherwise you will end up with looped setState calls
     if (reason === 'reset') {
       return;
     }
-    //if the text input is changed, and only if hte input is a string the set the state.
+
+    // Set state if text input is changed and input is string
     if (newValue && typeof newValue === 'string' && reason === 'input') {
       setInput(newValue);
-      // return;
     }
 
     if (newValue === null) {
@@ -137,7 +131,7 @@ function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
 
     if (typeof newValue === 'string') {
       if (newValue !== '') {
-        // Check if the newValue in in the options, first check options.display, then check options.code
+        // Check if the newValue is in the options, first check options.display, then check options.code
         const foundOption = options.find((option) => {
           if (option.display) {
             return option.display === newValue;
@@ -146,6 +140,7 @@ function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
         });
         if (foundOption) {
           newValue = foundOption;
+          // For option selection, update immediately (no debounce)
           onQrItemChange({
             ...qrOpenChoice,
             answer: [{ id: answerKey, valueCoding: newValue }]
@@ -153,15 +148,15 @@ function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
         }
         // if newValue is not in the options list, treat it as a string
         else {
-          onQrItemChange({
-            ...createEmptyQrItem(qItem, answerKey),
-            answer: [{ id: answerKey, valueString: sanitizeInput(newValue) }]
-          });
+          // For string input, use debounced update
+          updateQrItemWithDebounce(newValue);
         }
       } else {
+        // For empty string, update immediately
         onQrItemChange(createEmptyQrItem(qItem, answerKey));
       }
     } else {
+      // For coding selection, update immediately (no debounce)
       onQrItemChange({
         ...createEmptyQrItem(qItem, answerKey),
         answer: [{ id: answerKey, valueCoding: newValue }]
@@ -190,6 +185,7 @@ function OpenChoiceAutocompleteItem(props: OpenChoiceAutocompleteItemProps) {
     <FullWidthFormComponentBox
       data-test="q-item-open-choice-autocomplete-box"
       data-linkid={qItem.linkId}
+      data-label={qItem.text}
       onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid
         qItem={qItem}

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

@@ -15,14 +15,13 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import CheckboxSingleWithOpenLabel from '../ItemParts/CheckboxSingleWithOpenLabel';
 import type {
   QuestionnaireItem,
   QuestionnaireItemAnswerOption,
   QuestionnaireResponseItemAnswer
 } from 'fhir/r4';
 import CheckboxFormGroup from '../ItemParts/CheckboxFormGroup';
+import CheckboxSingleWithOpenLabel from '../ItemParts/CheckboxSingleWithOpenLabel';
 
 interface OpenChoiceCheckboxAnswerOptionFieldsProps {
   qItem: QuestionnaireItem;

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

@@ -15,55 +15,35 @@
  * limitations under the License.
  */
 
-import React, { useCallback } from 'react';
-import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import debounce from 'lodash.debounce';
+import { useCallback } from 'react';
+import useAnswerOptionsToggleExpressions from '../../../hooks/useAnswerOptionsToggleExpressions';
+import useOpenLabel from '../../../hooks/useOpenLabel';
+import useReadOnly from '../../../hooks/useReadOnly';
+import useValidationFeedback from '../../../hooks/useValidationFeedback';
+import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
+import { useQuestionnaireStore } from '../../../stores';
+import { updateChoiceCheckboxAnswers } from '../../../utils/choice';
+import { DEBOUNCE_DURATION } from '../../../utils/debounce';
 import { getOpenLabelText } from '../../../utils/extensions';
 import { updateOpenLabelAnswer } from '../../../utils/openChoice';
+import { createEmptyQrItem } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
-import debounce from 'lodash.debounce';
-import type {
-  PropsWithFeedbackFromParentAttribute,
-  PropsWithIsRepeatedAttribute,
-  PropsWithIsTabledAttribute,
-  PropsWithItemPathAttribute,
-  PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler,
-  PropsWithRenderingExtensionsAttribute
-} from '../../../interfaces/renderProps.interface';
-import { DEBOUNCE_DURATION } from '../../../utils/debounce';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
-import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
-import { useQuestionnaireStore } from '../../../stores';
-import useOpenLabel from '../../../hooks/useOpenLabel';
-import { updateChoiceCheckboxAnswers } from '../../../utils/choice';
-import OpenChoiceCheckboxAnswerOptionFields from './OpenChoiceCheckboxAnswerOptionFields';
-import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import ItemLabel from '../ItemParts/ItemLabel';
-import useAnswerOptionsToggleExpressions from '../../../hooks/useAnswerOptionsToggleExpressions';
-
-interface OpenChoiceCheckboxAnswerOptionItemProps
-  extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
-    PropsWithIsRepeatedAttribute,
-    PropsWithParentIsReadOnlyAttribute,
-    PropsWithRenderingExtensionsAttribute,
-    PropsWithFeedbackFromParentAttribute,
-    PropsWithIsTabledAttribute {
-  qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem | null;
-}
+import OpenChoiceCheckboxAnswerOptionFields from './OpenChoiceCheckboxAnswerOptionFields';
 
-function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptionItemProps) {
+function OpenChoiceCheckboxAnswerOptionItem(props: BaseItemProps) {
   const {
     qItem,
     qrItem,
     isRepeated,
+    isTabled,
     renderingExtensions,
     parentIsReadOnly,
     feedbackFromParent,
-    isTabled,
+    calcExpUpdated,
     onQrItemChange
   } = props;
 
@@ -89,10 +69,6 @@ function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptio
     answers
   );
 
-  // TODO Process calculated expressions
-  // This requires its own hook, because in the case of multi-select, we need to check if the value is already checked to prevent an infinite loop
-  // This will be done after the choice/open-choice refactoring
-
   // Process answerOptionsToggleExpressions
   const { answerOptionsToggleExpressionsMap, answerOptionsToggleExpUpdated } =
     useAnswerOptionsToggleExpressions(qItem.linkId);
@@ -170,6 +146,7 @@ function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptio
   function handleClear() {
     onQrItemChange(createEmptyQrItem(qItem, answerKey));
     setOpenLabelChecked(false);
+    setOpenLabelValue('');
   }
 
   if (isTabled) {
@@ -184,7 +161,7 @@ function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptio
           openLabelChecked={openLabelChecked}
           feedback={feedback}
           readOnly={readOnly}
-          expressionUpdated={answerOptionsToggleExpUpdated}
+          expressionUpdated={calcExpUpdated || answerOptionsToggleExpUpdated}
           answerOptionsToggleExpressionsMap={answerOptionsToggleExpressionsMap}
           isTabled={isTabled}
           onOptionChange={handleOptionChange}
@@ -201,6 +178,7 @@ function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptio
     <FullWidthFormComponentBox
       data-test="q-item-open-choice-checkbox-answer-option-box"
       data-linkid={qItem.linkId}
+      data-label={qItem.text}
       onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid
         qItem={qItem}
@@ -216,7 +194,7 @@ function OpenChoiceCheckboxAnswerOptionItem(props: OpenChoiceCheckboxAnswerOptio
             openLabelChecked={openLabelChecked}
             feedback={feedback}
             readOnly={readOnly}
-            expressionUpdated={answerOptionsToggleExpUpdated}
+            expressionUpdated={calcExpUpdated || answerOptionsToggleExpUpdated}
             answerOptionsToggleExpressionsMap={answerOptionsToggleExpressionsMap}
             isTabled={isTabled}
             onOptionChange={handleOptionChange}

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

@@ -15,18 +15,17 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import CheckboxSingleWithOpenLabel from '../ItemParts/CheckboxSingleWithOpenLabel';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import Typography from '@mui/material/Typography';
 import type {
   QuestionnaireItem,
   QuestionnaireItemAnswerOption,
   QuestionnaireResponseItemAnswer
 } from 'fhir/r4';
-import { StyledAlert } from '../../Alert.styles';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
-import Typography from '@mui/material/Typography';
 import type { TerminologyError } from '../../../hooks/useValueSetCodings';
+import { StyledAlert } from '../../Alert.styles';
 import CheckboxFormGroup from '../ItemParts/CheckboxFormGroup';
+import CheckboxSingleWithOpenLabel from '../ItemParts/CheckboxSingleWithOpenLabel';
 
 interface OpenChoiceCheckboxFieldsProps {
   qItem: QuestionnaireItem;

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

@@ -15,56 +15,36 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useMemo } from 'react';
-import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import debounce from 'lodash.debounce';
+import { useCallback, useMemo } from 'react';
+import useAnswerOptionsToggleExpressions from '../../../hooks/useAnswerOptionsToggleExpressions';
+import useOpenLabel from '../../../hooks/useOpenLabel';
+import useReadOnly from '../../../hooks/useReadOnly';
+import useValidationFeedback from '../../../hooks/useValidationFeedback';
+import useValueSetCodings from '../../../hooks/useValueSetCodings';
+import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
+import { useQuestionnaireStore } from '../../../stores';
+import { convertCodingsToAnswerOptions, updateChoiceCheckboxAnswers } from '../../../utils/choice';
+import { DEBOUNCE_DURATION } from '../../../utils/debounce';
 import { getOpenLabelText } from '../../../utils/extensions';
 import { updateOpenLabelAnswer } from '../../../utils/openChoice';
+import { createEmptyQrItem } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
-import debounce from 'lodash.debounce';
-import type {
-  PropsWithFeedbackFromParentAttribute,
-  PropsWithIsRepeatedAttribute,
-  PropsWithIsTabledAttribute,
-  PropsWithItemPathAttribute,
-  PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler,
-  PropsWithRenderingExtensionsAttribute
-} from '../../../interfaces/renderProps.interface';
-import { DEBOUNCE_DURATION } from '../../../utils/debounce';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
-import OpenChoiceCheckboxAnswerValueSetFields from './OpenChoiceCheckboxAnswerValueSetFields';
-import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
-import { useQuestionnaireStore } from '../../../stores';
-import useOpenLabel from '../../../hooks/useOpenLabel';
-import { convertCodingsToAnswerOptions, updateChoiceCheckboxAnswers } from '../../../utils/choice';
-import useValueSetCodings from '../../../hooks/useValueSetCodings';
-import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import ItemLabel from '../ItemParts/ItemLabel';
-import useAnswerOptionsToggleExpressions from '../../../hooks/useAnswerOptionsToggleExpressions';
-
-interface OpenChoiceCheckboxAnswerValueSetItemProps
-  extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
-    PropsWithIsRepeatedAttribute,
-    PropsWithParentIsReadOnlyAttribute,
-    PropsWithRenderingExtensionsAttribute,
-    PropsWithFeedbackFromParentAttribute,
-    PropsWithIsTabledAttribute {
-  qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem | null;
-}
+import OpenChoiceCheckboxAnswerValueSetFields from './OpenChoiceCheckboxAnswerValueSetFields';
 
-function OpenChoiceCheckboxAnswerValueSetItem(props: OpenChoiceCheckboxAnswerValueSetItemProps) {
+function OpenChoiceCheckboxAnswerValueSetItem(props: BaseItemProps) {
   const {
     qItem,
     qrItem,
     isRepeated,
+    isTabled,
     renderingExtensions,
     parentIsReadOnly,
     feedbackFromParent,
-    isTabled,
+    calcExpUpdated,
     onQrItemChange
   } = props;
 
@@ -93,10 +73,6 @@ function OpenChoiceCheckboxAnswerValueSetItem(props: OpenChoiceCheckboxAnswerVal
     answers
   );
 
-  // TODO Process calculated expressions
-  // This requires its own hook, because in the case of multi-select, we need to check if the value is already checked to prevent an infinite loop
-  // This will be done after the choice/open-choice refactoring
-
   // Process answerOptionsToggleExpressions
   const { answerOptionsToggleExpressionsMap, answerOptionsToggleExpUpdated } =
     useAnswerOptionsToggleExpressions(qItem.linkId);
@@ -174,6 +150,7 @@ function OpenChoiceCheckboxAnswerValueSetItem(props: OpenChoiceCheckboxAnswerVal
   function handleClear() {
     onQrItemChange(createEmptyQrItem(qItem, answerKey));
     setOpenLabelChecked(false);
+    setOpenLabelValue('');
   }
 
   if (isTabled) {
@@ -188,7 +165,9 @@ function OpenChoiceCheckboxAnswerValueSetItem(props: OpenChoiceCheckboxAnswerVal
           openLabelChecked={openLabelChecked}
           feedback={feedback}
           readOnly={readOnly}
-          expressionUpdated={dynamicCodingsUpdated || answerOptionsToggleExpUpdated}
+          expressionUpdated={
+            calcExpUpdated || dynamicCodingsUpdated || answerOptionsToggleExpUpdated
+          }
           answerOptionsToggleExpressionsMap={answerOptionsToggleExpressionsMap}
           terminologyError={terminologyError}
           isTabled={isTabled}
@@ -206,6 +185,7 @@ function OpenChoiceCheckboxAnswerValueSetItem(props: OpenChoiceCheckboxAnswerVal
     <FullWidthFormComponentBox
       data-test="q-item-open-choice-checkbox-answer-value-set-box"
       data-linkid={qItem.linkId}
+      data-label={qItem.text}
       onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid
         qItem={qItem}
@@ -221,7 +201,9 @@ function OpenChoiceCheckboxAnswerValueSetItem(props: OpenChoiceCheckboxAnswerVal
             openLabelChecked={openLabelChecked}
             feedback={feedback}
             readOnly={readOnly}
-            expressionUpdated={dynamicCodingsUpdated || answerOptionsToggleExpUpdated}
+            expressionUpdated={
+              calcExpUpdated || dynamicCodingsUpdated || answerOptionsToggleExpUpdated
+            }
             answerOptionsToggleExpressionsMap={answerOptionsToggleExpressionsMap}
             terminologyError={terminologyError}
             isTabled={isTabled}

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

@@ -15,51 +15,27 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { OpenChoiceItemControl } from '../../../interfaces/choice.enum';
-import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import OpenChoiceSelectAnswerOptionItem from './OpenChoiceSelectAnswerOptionItem';
-import OpenChoiceSelectAnswerValueSetItem from './OpenChoiceSelectAnswerValueSetItem';
-import OpenChoiceAutocompleteItem from './OpenChoiceAutocompleteItem';
+import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
 import { getOpenChoiceControlType } from '../../../utils/openChoice';
+import OpenChoiceAutocompleteItem from './OpenChoiceAutocompleteItem';
 import OpenChoiceCheckboxAnswerOptionItem from './OpenChoiceCheckboxAnswerOptionItem';
-import OpenChoiceRadioAnswerOptionItem from './OpenChoiceRadioAnswerOptionItem';
-import type {
-  PropsWithFeedbackFromParentAttribute,
-  PropsWithIsRepeatedAttribute,
-  PropsWithIsTabledRequiredAttribute,
-  PropsWithItemPathAttribute,
-  PropsWithParentIsReadOnlyAttribute,
-  PropsWithParentStylesAttribute,
-  PropsWithQrItemChangeHandler,
-  PropsWithRenderingExtensionsAttribute
-} from '../../../interfaces/renderProps.interface';
 import OpenChoiceCheckboxAnswerValueSetItem from './OpenChoiceCheckboxAnswerValueSetItem';
+import OpenChoiceRadioAnswerOptionItem from './OpenChoiceRadioAnswerOptionItem';
 import OpenChoiceRadioAnswerValueSetItem from './OpenChoiceRadioAnswerValueSetItem';
+import OpenChoiceSelectAnswerOptionItem from './OpenChoiceSelectAnswerOptionItem';
+import OpenChoiceSelectAnswerValueSetItem from './OpenChoiceSelectAnswerValueSetItem';
 
-interface OpenChoiceItemSwitcherProps
-  extends PropsWithQrItemChangeHandler,
-    PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledRequiredAttribute,
-    PropsWithRenderingExtensionsAttribute,
-    PropsWithParentIsReadOnlyAttribute,
-    PropsWithFeedbackFromParentAttribute,
-    PropsWithParentStylesAttribute,
-    PropsWithItemPathAttribute {
-  qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem | null;
-}
-
-function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
+function OpenChoiceItemSwitcher(props: BaseItemProps) {
   const {
     qItem,
     qrItem,
-    itemPath,
     isRepeated,
     isTabled,
     renderingExtensions,
     parentIsReadOnly,
     feedbackFromParent,
+    calcExpUpdated,
     onQrItemChange
   } = props;
 
@@ -70,12 +46,12 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
           <OpenChoiceCheckboxAnswerValueSetItem
             qItem={qItem}
             qrItem={qrItem}
-            itemPath={itemPath}
-            isRepeated={qItem['repeats'] ?? false}
+            isRepeated={qItem.repeats ?? false}
+            isTabled={isTabled}
             renderingExtensions={renderingExtensions}
             parentIsReadOnly={parentIsReadOnly}
             feedbackFromParent={feedbackFromParent}
-            isTabled={isTabled}
+            calcExpUpdated={calcExpUpdated}
             onQrItemChange={onQrItemChange}
           />
         );
@@ -84,12 +60,12 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
           <OpenChoiceCheckboxAnswerOptionItem
             qItem={qItem}
             qrItem={qrItem}
-            itemPath={itemPath}
-            isRepeated={qItem['repeats'] ?? false}
+            isRepeated={qItem.repeats ?? false}
+            isTabled={isTabled}
             renderingExtensions={renderingExtensions}
             parentIsReadOnly={parentIsReadOnly}
             feedbackFromParent={feedbackFromParent}
-            isTabled={isTabled}
+            calcExpUpdated={calcExpUpdated}
             onQrItemChange={onQrItemChange}
           />
         );
@@ -100,12 +76,12 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
           <OpenChoiceRadioAnswerValueSetItem
             qItem={qItem}
             qrItem={qrItem}
-            itemPath={itemPath}
-            isRepeated={qItem['repeats'] ?? false}
+            isRepeated={qItem.repeats ?? false}
+            isTabled={isTabled}
             renderingExtensions={renderingExtensions}
             parentIsReadOnly={parentIsReadOnly}
             feedbackFromParent={feedbackFromParent}
-            isTabled={isTabled}
+            calcExpUpdated={calcExpUpdated}
             onQrItemChange={onQrItemChange}
           />
         );
@@ -114,12 +90,12 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
           <OpenChoiceRadioAnswerOptionItem
             qItem={qItem}
             qrItem={qrItem}
-            itemPath={itemPath}
-            isRepeated={qItem['repeats'] ?? false}
+            isRepeated={qItem.repeats ?? false}
+            isTabled={isTabled}
             renderingExtensions={renderingExtensions}
             parentIsReadOnly={parentIsReadOnly}
             feedbackFromParent={feedbackFromParent}
-            isTabled={isTabled}
+            calcExpUpdated={calcExpUpdated}
             onQrItemChange={onQrItemChange}
           />
         );
@@ -129,12 +105,12 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
         <OpenChoiceAutocompleteItem
           qItem={qItem}
           qrItem={qrItem}
-          itemPath={itemPath}
           isRepeated={isRepeated}
           isTabled={isTabled}
           renderingExtensions={renderingExtensions}
           parentIsReadOnly={parentIsReadOnly}
           feedbackFromParent={feedbackFromParent}
+          calcExpUpdated={calcExpUpdated}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -144,12 +120,12 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
           <OpenChoiceSelectAnswerValueSetItem
             qItem={qItem}
             qrItem={qrItem}
-            itemPath={itemPath}
             isRepeated={isRepeated}
             isTabled={isTabled}
             renderingExtensions={renderingExtensions}
             parentIsReadOnly={parentIsReadOnly}
             feedbackFromParent={feedbackFromParent}
+            calcExpUpdated={calcExpUpdated}
             onQrItemChange={onQrItemChange}
           />
         );
@@ -158,12 +134,12 @@ function OpenChoiceItemSwitcher(props: OpenChoiceItemSwitcherProps) {
           <OpenChoiceSelectAnswerOptionItem
             qItem={qItem}
             qrItem={qrItem}
-            itemPath={itemPath}
             isRepeated={isRepeated}
             isTabled={isTabled}
             renderingExtensions={renderingExtensions}
             parentIsReadOnly={parentIsReadOnly}
             feedbackFromParent={feedbackFromParent}
+            calcExpUpdated={calcExpUpdated}
             onQrItemChange={onQrItemChange}
           />
         );

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

@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
 import RadioButtonWithOpenLabel from '../ItemParts/RadioButtonWithOpenLabel';
 import RadioFormGroup from '../ItemParts/RadioFormGroup';