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

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

@@ -15,52 +15,31 @@
  * limitations under the License.
  */
 
-import React, { useMemo } from 'react';
-import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { useMemo } from 'react';
+import useAnswerOptionsToggleExpressions from '../../../hooks/useAnswerOptionsToggleExpressions';
+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 { createEmptyQrItem } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
-import type {
-  PropsWithFeedbackFromParentAttribute,
-  PropsWithIsRepeatedAttribute,
-  PropsWithIsTabledAttribute,
-  PropsWithItemPathAttribute,
-  PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler,
-  PropsWithRenderingExtensionsAttribute
-} from '../../../interfaces/renderProps.interface';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
-import ChoiceCheckboxAnswerValueSetFields from './ChoiceCheckboxAnswerValueSetFields';
-import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
-import { useQuestionnaireStore } from '../../../stores';
-import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import ItemLabel from '../ItemParts/ItemLabel';
-import useAnswerOptionsToggleExpressions from '../../../hooks/useAnswerOptionsToggleExpressions';
-
-interface ChoiceCheckboxAnswerValueSetItemProps
-  extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
-    PropsWithIsRepeatedAttribute,
-    PropsWithRenderingExtensionsAttribute,
-    PropsWithParentIsReadOnlyAttribute,
-    PropsWithFeedbackFromParentAttribute,
-    PropsWithIsTabledAttribute {
-  qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem | null;
-  showText?: boolean;
-}
+import ChoiceCheckboxAnswerValueSetFields from './ChoiceCheckboxAnswerValueSetFields';
 
-function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetItemProps) {
+function ChoiceCheckboxAnswerValueSetItem(props: BaseItemProps) {
   const {
     qItem,
     qrItem,
     isRepeated,
+    isTabled,
     renderingExtensions,
     parentIsReadOnly,
     feedbackFromParent,
-    isTabled,
+    calcExpUpdated,
     onQrItemChange
   } = props;
 
@@ -84,10 +63,6 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
 
   const options = useMemo(() => convertCodingsToAnswerOptions(codings), [codings]);
 
-  // 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);
@@ -126,7 +101,7 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
           answers={answers}
           feedback={feedback}
           readOnly={readOnly}
-          expressionUpdated={answerOptionsToggleExpUpdated}
+          expressionUpdated={calcExpUpdated || answerOptionsToggleExpUpdated}
           answerOptionsToggleExpressionsMap={answerOptionsToggleExpressionsMap}
           terminologyError={terminologyError}
           isTabled={isTabled}
@@ -142,6 +117,7 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
     <FullWidthFormComponentBox
       data-test="q-item-choice-checkbox-answer-value-set-box"
       data-linkid={qItem.linkId}
+      data-label={qItem.text}
       onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid
         qItem={qItem}
@@ -154,7 +130,7 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
             answers={answers}
             feedback={feedback}
             readOnly={readOnly}
-            expressionUpdated={answerOptionsToggleExpUpdated}
+            expressionUpdated={calcExpUpdated || answerOptionsToggleExpUpdated}
             answerOptionsToggleExpressionsMap={answerOptionsToggleExpressionsMap}
             terminologyError={terminologyError}
             isTabled={isTabled}

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

@@ -15,52 +15,28 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import Typography from '@mui/material/Typography';
 import { ChoiceItemControl } from '../../../interfaces/choice.enum';
-import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
+import { getChoiceControlType } from '../../../utils/choice';
+import ChoiceAutocompleteItem from './ChoiceAutocompleteItem';
+import ChoiceCheckboxAnswerOptionItem from './ChoiceCheckboxAnswerOptionItem';
+import ChoiceCheckboxAnswerValueSetItem from './ChoiceCheckboxAnswerValueSetItem';
 import ChoiceRadioAnswerOptionItem from './ChoiceRadioAnswerOptionItem';
+import ChoiceRadioAnswerValueSetItem from './ChoiceRadioAnswerValueSetItem';
 import ChoiceSelectAnswerOptionItem from './ChoiceSelectAnswerOptionItem';
-import ChoiceCheckboxAnswerOptionItem from './ChoiceCheckboxAnswerOptionItem';
-import ChoiceAutocompleteItem from './ChoiceAutocompleteItem';
 import ChoiceSelectAnswerValueSetItem from './ChoiceSelectAnswerValueSetItem';
-import { getChoiceControlType } from '../../../utils/choice';
-import ChoiceRadioAnswerValueSetItem from './ChoiceRadioAnswerValueSetItem';
-import ChoiceCheckboxAnswerValueSetItem from './ChoiceCheckboxAnswerValueSetItem';
-import type {
-  PropsWithFeedbackFromParentAttribute,
-  PropsWithIsRepeatedAttribute,
-  PropsWithIsTabledRequiredAttribute,
-  PropsWithItemPathAttribute,
-  PropsWithParentIsReadOnlyAttribute,
-  PropsWithParentStylesAttribute,
-  PropsWithQrItemChangeHandler,
-  PropsWithRenderingExtensionsAttribute
-} from '../../../interfaces/renderProps.interface';
-import Typography from '@mui/material/Typography';
 
-interface ChoiceItemSwitcherProps
-  extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
-    PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledRequiredAttribute,
-    PropsWithRenderingExtensionsAttribute,
-    PropsWithParentIsReadOnlyAttribute,
-    PropsWithFeedbackFromParentAttribute,
-    PropsWithParentStylesAttribute {
-  qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem | null;
-}
-
-function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
+function ChoiceItemSwitcher(props: BaseItemProps) {
   const {
     qItem,
     qrItem,
-    itemPath,
     isRepeated,
     isTabled,
     renderingExtensions,
     parentIsReadOnly,
     feedbackFromParent,
+    calcExpUpdated,
     onQrItemChange
   } = props;
 
@@ -73,12 +49,12 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
           <ChoiceRadioAnswerOptionItem
             qItem={qItem}
             qrItem={qrItem}
-            itemPath={itemPath}
             isRepeated={isRepeated}
             isTabled={isTabled}
             renderingExtensions={renderingExtensions}
             parentIsReadOnly={parentIsReadOnly}
             feedbackFromParent={feedbackFromParent}
+            calcExpUpdated={calcExpUpdated}
             onQrItemChange={onQrItemChange}
           />
         );
@@ -87,12 +63,12 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
           <ChoiceRadioAnswerValueSetItem
             qItem={qItem}
             qrItem={qrItem}
-            itemPath={itemPath}
             isRepeated={isRepeated}
+            isTabled={isTabled}
             renderingExtensions={renderingExtensions}
             parentIsReadOnly={parentIsReadOnly}
             feedbackFromParent={feedbackFromParent}
-            isTabled={isTabled}
+            calcExpUpdated={calcExpUpdated}
             onQrItemChange={onQrItemChange}
           />
         );
@@ -103,12 +79,12 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
           <ChoiceCheckboxAnswerOptionItem
             qItem={qItem}
             qrItem={qrItem}
-            itemPath={itemPath}
             isRepeated={qItem.repeats ?? false}
+            isTabled={isTabled}
             renderingExtensions={renderingExtensions}
             parentIsReadOnly={parentIsReadOnly}
             feedbackFromParent={feedbackFromParent}
-            isTabled={isTabled}
+            calcExpUpdated={calcExpUpdated}
             onQrItemChange={onQrItemChange}
           />
         );
@@ -117,12 +93,12 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
           <ChoiceCheckboxAnswerValueSetItem
             qItem={qItem}
             qrItem={qrItem}
-            itemPath={itemPath}
             isRepeated={qItem.repeats ?? false}
+            isTabled={isTabled}
             renderingExtensions={renderingExtensions}
             parentIsReadOnly={parentIsReadOnly}
             feedbackFromParent={feedbackFromParent}
-            isTabled={isTabled}
+            calcExpUpdated={calcExpUpdated}
             onQrItemChange={onQrItemChange}
           />
         );
@@ -132,12 +108,12 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
         <ChoiceAutocompleteItem
           qItem={qItem}
           qrItem={qrItem}
-          itemPath={itemPath}
           isRepeated={isRepeated}
           isTabled={isTabled}
           renderingExtensions={renderingExtensions}
           parentIsReadOnly={parentIsReadOnly}
           feedbackFromParent={feedbackFromParent}
+          calcExpUpdated={calcExpUpdated}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -147,12 +123,12 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
           <ChoiceSelectAnswerOptionItem
             qItem={qItem}
             qrItem={qrItem}
-            itemPath={itemPath}
             isRepeated={isRepeated}
             isTabled={isTabled}
             renderingExtensions={renderingExtensions}
             parentIsReadOnly={parentIsReadOnly}
             feedbackFromParent={feedbackFromParent}
+            calcExpUpdated={calcExpUpdated}
             onQrItemChange={onQrItemChange}
           />
         );
@@ -161,12 +137,12 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
           <ChoiceSelectAnswerValueSetItem
             qItem={qItem}
             qrItem={qrItem}
-            itemPath={itemPath}
             isRepeated={isRepeated}
             isTabled={isTabled}
             renderingExtensions={renderingExtensions}
             parentIsReadOnly={parentIsReadOnly}
             feedbackFromParent={feedbackFromParent}
+            calcExpUpdated={calcExpUpdated}
             onQrItemChange={onQrItemChange}
           />
         );

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

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

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

@@ -15,55 +15,29 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type {
-  QuestionnaireItem,
-  QuestionnaireItemAnswerOption,
-  QuestionnaireResponseItem
-} from 'fhir/r4';
-import { findInAnswerOptions, getChoiceControlType, getQrChoiceValue } from '../../../utils/choice';
-import { createEmptyQrItem } from '../../../utils/qrItem';
-import type {
-  PropsWithFeedbackFromParentAttribute,
-  PropsWithIsRepeatedAttribute,
-  PropsWithIsTabledRequiredAttribute,
-  PropsWithItemPathAttribute,
-  PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler,
-  PropsWithRenderingExtensionsAttribute
-} from '../../../interfaces/renderProps.interface';
+import Typography from '@mui/material/Typography';
+import type { QuestionnaireItemAnswerOption } from 'fhir/r4';
+import useAnswerOptionsToggleExpressions from '../../../hooks/useAnswerOptionsToggleExpressions';
 import useReadOnly from '../../../hooks/useReadOnly';
-import { useQuestionnaireStore } from '../../../stores';
+import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import { ChoiceItemControl } from '../../../interfaces/choice.enum';
-import Typography from '@mui/material/Typography';
-import useCodingCalculatedExpression from '../../../hooks/useCodingCalculatedExpression';
+import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
+import { useQuestionnaireStore } from '../../../stores';
+import { findInAnswerOptions, getChoiceControlType, getQrChoiceValue } from '../../../utils/choice';
+import { createEmptyQrItem } from '../../../utils/qrItem';
 import ChoiceRadioAnswerOptionView from './ChoiceRadioAnswerOptionView';
 import ChoiceSelectAnswerOptionView from './ChoiceSelectAnswerOptionView';
-import useValidationFeedback from '../../../hooks/useValidationFeedback';
-import useAnswerOptionsToggleExpressions from '../../../hooks/useAnswerOptionsToggleExpressions';
-
-interface ChoiceRadioAnswerOptionItemProps
-  extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
-    PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledRequiredAttribute,
-    PropsWithRenderingExtensionsAttribute,
-    PropsWithParentIsReadOnlyAttribute,
-    PropsWithFeedbackFromParentAttribute {
-  qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem | null;
-}
 
-function ChoiceRadioAnswerOptionItem(props: ChoiceRadioAnswerOptionItemProps) {
+function ChoiceRadioAnswerOptionItem(props: BaseItemProps) {
   const {
     qItem,
     qrItem,
-    itemPath,
     isRepeated,
     isTabled,
     renderingExtensions,
     parentIsReadOnly,
     feedbackFromParent,
+    calcExpUpdated,
     onQrItemChange
   } = props;
 
@@ -81,32 +55,15 @@ function ChoiceRadioAnswerOptionItem(props: ChoiceRadioAnswerOptionItemProps) {
 
   const options = qItem.answerOption ?? [];
 
-  // Process calculated expressions
-  const { calcExpUpdated } = useCodingCalculatedExpression({
-    qItem: qItem,
-    valueInString: valueChoice ?? '',
-    onChangeByCalcExpressionString: (newValueString: string) => {
-      handleChange(newValueString, true);
-    },
-    onChangeByCalcExpressionNull: () => {
-      onQrItemChange(createEmptyQrItem(qItem, answerKey), itemPath);
-    }
-  });
-
   // Process answerOptionsToggleExpressions
   const { answerOptionsToggleExpressionsMap, answerOptionsToggleExpUpdated } =
     useAnswerOptionsToggleExpressions(qItem.linkId);
 
   // Event handlers
-  function handleChange(
-    newValue: QuestionnaireItemAnswerOption | string | null,
-    includeItemPath: boolean = false // only include when this is called from useCalculatedExpression hook
-  ) {
-    const targetItemPath = includeItemPath ? itemPath : undefined;
-
+  function handleChange(newValue: QuestionnaireItemAnswerOption | string | null) {
     // No options present or newValue is type null
     if (options.length === 0 || newValue === null) {
-      onQrItemChange(createEmptyQrItem(qItem, answerKey), targetItemPath);
+      onQrItemChange(createEmptyQrItem(qItem, answerKey));
       return;
     }
 
@@ -116,8 +73,7 @@ function ChoiceRadioAnswerOptionItem(props: ChoiceRadioAnswerOptionItemProps) {
       onQrItemChange(
         qrAnswer
           ? { ...createEmptyQrItem(qItem, answerKey), answer: [{ ...qrAnswer, id: answerKey }] }
-          : createEmptyQrItem(qItem, answerKey),
-        targetItemPath
+          : createEmptyQrItem(qItem, answerKey)
       );
       return;
     }
@@ -126,8 +82,7 @@ function ChoiceRadioAnswerOptionItem(props: ChoiceRadioAnswerOptionItemProps) {
     onQrItemChange(
       newValue
         ? { ...createEmptyQrItem(qItem, answerKey), answer: [{ ...newValue, id: answerKey }] }
-        : createEmptyQrItem(qItem, answerKey),
-      targetItemPath
+        : createEmptyQrItem(qItem, answerKey)
     );
   }
 

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

@@ -15,13 +15,12 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import ChoiceRadioAnswerOptionFields from './ChoiceRadioAnswerOptionFields';
+import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
+import type { PropsWithIsRepeatedAttribute } from '../../../interfaces/renderProps.interface';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
-import type { PropsWithIsRepeatedAttribute } from '../../../interfaces/renderProps.interface';
-import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
 import ItemLabel from '../ItemParts/ItemLabel';
+import ChoiceRadioAnswerOptionFields from './ChoiceRadioAnswerOptionFields';
 
 interface ChoiceRadioAnswerOptionViewProps extends PropsWithIsRepeatedAttribute {
   qItem: QuestionnaireItem;
@@ -74,6 +73,7 @@ function ChoiceRadioAnswerOptionView(props: ChoiceRadioAnswerOptionViewProps) {
     <FullWidthFormComponentBox
       data-test="q-item-choice-radio-answer-option-box"
       data-linkid={qItem.linkId}
+      data-label={qItem.text}
       onClick={onFocusLinkId}>
       <ItemFieldGrid
         qItem={qItem}

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

@@ -15,12 +15,11 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import Typography from '@mui/material/Typography';
 import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
-import { StyledAlert } from '../../Alert.styles';
 import type { TerminologyError } from '../../../hooks/useValueSetCodings';
+import { StyledAlert } from '../../Alert.styles';
 import RadioFormGroup from '../ItemParts/RadioFormGroup';
 
 interface ChoiceRadioAnswerValueSetFieldsProps {

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

@@ -15,51 +15,29 @@
  * limitations under the License.
  */
 
-import React, { useMemo } from 'react';
-import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { useMemo } from 'react';
+import useAnswerOptionsToggleExpressions from '../../../hooks/useAnswerOptionsToggleExpressions';
+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, findInAnswerOptions } from '../../../utils/choice';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
-import useValueSetCodings from '../../../hooks/useValueSetCodings';
-import type {
-  PropsWithFeedbackFromParentAttribute,
-  PropsWithIsRepeatedAttribute,
-  PropsWithIsTabledAttribute,
-  PropsWithItemPathAttribute,
-  PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler,
-  PropsWithRenderingExtensionsAttribute
-} from '../../../interfaces/renderProps.interface';
-import ChoiceRadioAnswerValueSetFields from './ChoiceRadioAnswerValueSetFields';
-import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
-import { useQuestionnaireStore } from '../../../stores';
-import useCodingCalculatedExpression from '../../../hooks/useCodingCalculatedExpression';
-import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import ItemLabel from '../ItemParts/ItemLabel';
-import useAnswerOptionsToggleExpressions from '../../../hooks/useAnswerOptionsToggleExpressions';
-
-interface ChoiceRadioAnswerValueSetItemProps
-  extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
-    PropsWithIsRepeatedAttribute,
-    PropsWithRenderingExtensionsAttribute,
-    PropsWithParentIsReadOnlyAttribute,
-    PropsWithFeedbackFromParentAttribute,
-    PropsWithIsTabledAttribute {
-  qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem | null;
-}
+import ChoiceRadioAnswerValueSetFields from './ChoiceRadioAnswerValueSetFields';
 
-function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps) {
+function ChoiceRadioAnswerValueSetItem(props: BaseItemProps) {
   const {
     qItem,
     qrItem,
-    itemPath,
     isRepeated,
+    isTabled,
     parentIsReadOnly,
     feedbackFromParent,
-    isTabled,
+    calcExpUpdated,
     onQrItemChange
   } = props;
 
@@ -87,33 +65,16 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
 
   const options = useMemo(() => convertCodingsToAnswerOptions(codings), [codings]);
 
-  const { calcExpUpdated } = useCodingCalculatedExpression({
-    qItem: qItem,
-    valueInString: valueRadio ?? '',
-    onChangeByCalcExpressionString: (newValueString: string) => {
-      handleChange(newValueString, true);
-    },
-    onChangeByCalcExpressionNull: () => {
-      onQrItemChange(createEmptyQrItem(qItem, answerKey), itemPath);
-    }
-  });
-
   // Process answerOptionsToggleExpressions
   const { answerOptionsToggleExpressionsMap, answerOptionsToggleExpUpdated } =
     useAnswerOptionsToggleExpressions(qItem.linkId);
 
-  function handleChange(
-    newValue: string,
-    includeItemPath: boolean = false // only include when this is called from useCalculatedExpression hook
-  ) {
-    const targetItemPath = includeItemPath ? itemPath : undefined;
-
+  function handleChange(newValue: string) {
     if (codings.length > 0) {
       const qrAnswer = findInAnswerOptions(options, newValue);
       const emptyQrItem = createEmptyQrItem(qItem, answerKey);
       onQrItemChange(
-        qrAnswer ? { ...emptyQrItem, answer: [{ ...qrAnswer, id: answerKey }] } : emptyQrItem,
-        targetItemPath
+        qrAnswer ? { ...emptyQrItem, answer: [{ ...qrAnswer, id: answerKey }] } : emptyQrItem
       );
     }
   }
@@ -144,6 +105,7 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
     <FullWidthFormComponentBox
       data-test="q-item-choice-radio-answer-value-set-box"
       data-linkid={qItem.linkId}
+      data-label={qItem.text}
       onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid
         qItem={qItem}

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

@@ -17,7 +17,7 @@
 
 import React from 'react';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import { useRendererStylingStore } from '../../../stores';
+import { useRendererConfigStore } from '../../../stores';
 import { StandardRadio } from '../../Radio.styles';
 
 interface ChoiceRadioSingleProps {
@@ -31,7 +31,7 @@ interface ChoiceRadioSingleProps {
 function ChoiceRadioSingle(props: ChoiceRadioSingleProps) {
   const { value, label, readOnly, disabledViaToggleExpression, fullWidth } = props;
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
 
   // When an option is disabled via answerOptionsToggleExpression, it should truly be "disabled", regardless of readOnlyVisualStyle.
   // Both isHtmlDisabled and isHtmlReadOnly are mutually exclusive.

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

@@ -15,22 +15,22 @@
  * limitations under the License.
  */
 
+import Autocomplete from '@mui/material/Autocomplete';
 import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
 import type {
-  PropsWithIsTabledRequiredAttribute,
+  PropsWithIsTabledAttribute,
   PropsWithRenderingExtensionsAttribute
 } from '../../../interfaces/renderProps.interface';
-import { StandardTextField } from '../Textfield.styles';
-import Autocomplete from '@mui/material/Autocomplete';
-import { getAnswerOptionLabel } from '../../../utils/openChoice';
+import { useRendererConfigStore } from '../../../stores';
 import { compareAnswerOptionValue, isOptionDisabled } from '../../../utils/choice';
-import { useRendererStylingStore } from '../../../stores';
+import { getAnswerOptionLabel } from '../../../utils/openChoice';
 import { StyledRequiredTypography } from '../Item.styles';
 import DisplayUnitText from '../ItemParts/DisplayUnitText';
 import ExpressionUpdateFadingIcon from '../ItemParts/ExpressionUpdateFadingIcon';
+import { StandardTextField } from '../Textfield.styles';
 
 interface ChoiceSelectAnswerOptionFieldsProps
-  extends PropsWithIsTabledRequiredAttribute,
+  extends PropsWithIsTabledAttribute,
     PropsWithRenderingExtensionsAttribute {
   qItem: QuestionnaireItem;
   options: QuestionnaireItemAnswerOption[];
@@ -56,8 +56,8 @@ function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsPro
     onSelectChange
   } = props;
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
-  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
+  const textFieldWidth = useRendererConfigStore.use.textFieldWidth();
 
   const { displayUnit, displayPrompt, entryFormat } = renderingExtensions;