@aehrc/smart-forms-renderer 0.24.1 → 0.25.0

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

@@ -17,74 +17,107 @@
 
 import React from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
+import { findInAnswerOptions, getChoiceControlType, getQrChoiceValue } from '../../../utils/choice';
 import { createEmptyQrItem } from '../../../utils/qrItem';
-import { FullWidthFormComponentBox } from '../../Box.styles';
 import type {
   PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
-import ChoiceRadioAnswerOptionFields from './ChoiceRadioAnswerOptionFields';
 import useReadOnly from '../../../hooks/useReadOnly';
-import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import { useQuestionnaireStore } from '../../../stores';
+import { ChoiceItemControl } from '../../../interfaces/choice.enum';
+import Typography from '@mui/material/Typography';
+import useCodingCalculatedExpression from '../../../hooks/useCodingCalculatedExpression';
+import ChoiceRadioAnswerOptionView from './ChoiceRadioAnswerOptionView';
+import ChoiceSelectAnswerOptionView from './ChoiceSelectAnswerOptionView';
 
 interface ChoiceRadioAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
 }
 
 function ChoiceRadioAnswerOptionItem(props: ChoiceRadioAnswerOptionItemProps) {
-  const { qItem, qrItem, isRepeated, parentIsReadOnly, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   // Init input value
-  const qrChoiceRadio = qrItem ?? createEmptyQrItem(qItem);
-  const valueRadio = getQrChoiceValue(qrChoiceRadio);
+  const qrChoice = qrItem ?? createEmptyQrItem(qItem);
+  const valueChoice = getQrChoiceValue(qrChoice);
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
+  // Process calculated expressions
+  const { calcExpUpdated } = useCodingCalculatedExpression({
+    qItem: qItem,
+    valueInString: valueChoice ?? '',
+    onChangeByCalcExpression: (newValueInString) => {
+      handleChange(newValueInString);
+    }
+  });
+
   // Event handlers
   function handleChange(newValue: string) {
-    if (qItem.answerOption) {
-      const qrAnswer = findInAnswerOptions(qItem.answerOption, newValue);
-      if (qrAnswer) {
-        onQrItemChange({ ...createEmptyQrItem(qItem), answer: [qrAnswer] });
-      }
+    if (!qItem.answerOption) {
+      onQrItemChange(createEmptyQrItem(qItem));
+      return;
     }
-  }
 
-  if (isRepeated) {
-    return (
-      <ChoiceRadioAnswerOptionFields
-        qItem={qItem}
-        valueRadio={valueRadio}
-        readOnly={readOnly}
-        onCheckedChange={handleChange}
-      />
+    const qrAnswer = findInAnswerOptions(qItem.answerOption, newValue);
+    onQrItemChange(
+      qrAnswer ? { ...createEmptyQrItem(qItem), answer: [qrAnswer] } : createEmptyQrItem(qItem)
     );
   }
 
-  return (
-    <FullWidthFormComponentBox
-      data-test="q-item-choice-radio-answer-option-box"
-      data-linkid={qItem.linkId}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
-      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
-        <ChoiceRadioAnswerOptionFields
+  // TODO This is in preparation of refactoring all choice answerOption fields into one component
+  const choiceControlType = getChoiceControlType(qItem);
+
+  switch (choiceControlType) {
+    // TODO At the moment only this case will be executed because this switch statment was already in the parent components
+    case ChoiceItemControl.Radio: {
+      return (
+        <ChoiceRadioAnswerOptionView
           qItem={qItem}
-          valueRadio={valueRadio}
+          valueChoice={valueChoice}
+          isRepeated={isRepeated}
+          isTabled={isTabled}
           readOnly={readOnly}
+          calcExpUpdated={calcExpUpdated}
+          onFocusLinkId={() => onFocusLinkId(qItem.linkId)}
           onCheckedChange={handleChange}
         />
-      </ItemFieldGrid>
-    </FullWidthFormComponentBox>
-  );
+      );
+    }
+
+    case ChoiceItemControl.Select: {
+      return (
+        <ChoiceSelectAnswerOptionView
+          qItem={qItem}
+          valueChoice={valueChoice}
+          isRepeated={isRepeated}
+          isTabled={isTabled}
+          readOnly={readOnly}
+          calcExpUpdated={calcExpUpdated}
+          onFocusLinkId={() => onFocusLinkId(qItem.linkId)}
+          onSelectChange={handleChange}
+        />
+      );
+    }
+
+    default: {
+      return (
+        <Typography>
+          Something has went wrong when parsing item {qItem.linkId} - {qItem.text}
+        </Typography>
+      );
+    }
+  }
 }
 
 export default ChoiceRadioAnswerOptionItem;

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

@@ -0,0 +1,83 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import ChoiceRadioAnswerOptionFields from './ChoiceRadioAnswerOptionFields';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute
+} from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem } from 'fhir/r4';
+
+interface ChoiceRadioAnswerOptionViewProps
+  extends PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  valueChoice: string | null;
+  readOnly: boolean;
+  calcExpUpdated: boolean;
+  onCheckedChange: (linkId: string) => void;
+  onFocusLinkId: () => void;
+}
+
+function ChoiceRadioAnswerOptionView(props: ChoiceRadioAnswerOptionViewProps) {
+  const {
+    qItem,
+    valueChoice,
+    isRepeated,
+    isTabled,
+    readOnly,
+    calcExpUpdated,
+    onFocusLinkId,
+    onCheckedChange
+  } = props;
+
+  if (isRepeated) {
+    return (
+      <ChoiceRadioAnswerOptionFields
+        qItem={qItem}
+        valueRadio={valueChoice}
+        isTabled={isTabled}
+        readOnly={readOnly}
+        calcExpUpdated={calcExpUpdated}
+        onCheckedChange={onCheckedChange}
+      />
+    );
+  }
+
+  return (
+    <FullWidthFormComponentBox
+      data-test="q-item-choice-radio-answer-option-box"
+      data-linkid={qItem.linkId}
+      onClick={onFocusLinkId}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
+        <ChoiceRadioAnswerOptionFields
+          qItem={qItem}
+          valueRadio={valueChoice}
+          readOnly={readOnly}
+          isTabled={isTabled}
+          calcExpUpdated={calcExpUpdated}
+          onCheckedChange={onCheckedChange}
+        />
+      </ItemFieldGrid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default ChoiceRadioAnswerOptionView;

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

@@ -25,40 +25,62 @@ import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import { StyledAlert } from '../../Alert.styles';
 import type { TerminologyError } from '../../../hooks/useValueSetCodings';
 import { getChoiceOrientation } from '../../../utils/choice';
+import { TEXT_FIELD_WIDTH } from '../Textfield.styles';
+import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import Box from '@mui/material/Box';
 
-interface ChoiceRadioAnswerValueSetFieldsProps {
+interface ChoiceRadioAnswerValueSetFieldsProps extends PropsWithIsTabledAttribute {
   qItem: QuestionnaireItem;
   codings: Coding[];
   valueRadio: string | null;
   readOnly: boolean;
+  calcExpUpdated: boolean;
   terminologyError: TerminologyError;
   onCheckedChange: (newValue: string) => void;
 }
 
 function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsProps) {
-  const { qItem, codings, valueRadio, readOnly, terminologyError, onCheckedChange } = props;
+  const {
+    qItem,
+    codings,
+    valueRadio,
+    readOnly,
+    calcExpUpdated,
+    terminologyError,
+    isTabled,
+    onCheckedChange
+  } = props;
 
   const orientation = getChoiceOrientation(qItem) ?? ChoiceItemOrientation.Vertical;
 
   if (codings.length > 0) {
     return (
-      <StyledRadioGroup
-        row={orientation === ChoiceItemOrientation.Horizontal}
-        name={qItem.text}
-        id={qItem.id}
-        onChange={(e) => onCheckedChange(e.target.value)}
-        value={valueRadio ?? null}>
-        {codings.map((coding: Coding) => {
-          return (
-            <ChoiceRadioSingle
-              key={coding.code ?? ''}
-              value={coding.code ?? ''}
-              label={coding.display ?? `${coding.code}`}
-              readOnly={readOnly}
-            />
-          );
-        })}
-      </StyledRadioGroup>
+      <Box
+        display="flex"
+        alignItems="center"
+        sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160 }}>
+        <StyledRadioGroup
+          row={orientation === ChoiceItemOrientation.Horizontal}
+          name={qItem.text}
+          id={qItem.id}
+          onChange={(e) => onCheckedChange(e.target.value)}
+          value={valueRadio ?? null}>
+          {codings.map((coding: Coding) => {
+            return (
+              <ChoiceRadioSingle
+                key={coding.code ?? ''}
+                value={coding.code ?? ''}
+                label={coding.display ?? `${coding.code}`}
+                readOnly={readOnly}
+              />
+            );
+          })}
+        </StyledRadioGroup>
+        <Box flexGrow={1} />
+
+        <FadingCheckIcon fadeIn={calcExpUpdated} />
+      </Box>
     );
   }
 

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

@@ -15,14 +15,15 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import { findInAnswerValueSetCodings } from '../../../utils/choice';
+import { convertCodingsToAnswerOptions, findInAnswerOptions } from '../../../utils/choice';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import useValueSetCodings from '../../../hooks/useValueSetCodings';
 import type {
   PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
@@ -30,17 +31,19 @@ import ChoiceRadioAnswerValueSetFields from './ChoiceRadioAnswerValueSetFields';
 import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import { useQuestionnaireStore } from '../../../stores';
+import useCodingCalculatedExpression from '../../../hooks/useCodingCalculatedExpression';
 
 interface ChoiceRadioAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
 }
 
 function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps) {
-  const { qItem, qrItem, isRepeated, parentIsReadOnly, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
@@ -57,15 +60,22 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
   // Get codings/options from valueSet
   const { codings, terminologyError } = useValueSetCodings(qItem);
 
+  const answerOptions = useMemo(() => convertCodingsToAnswerOptions(codings), [codings]);
+
+  const { calcExpUpdated } = useCodingCalculatedExpression({
+    qItem: qItem,
+    valueInString: valueRadio ?? '',
+    onChangeByCalcExpression: (newValueInString) => {
+      handleChange(newValueInString);
+    }
+  });
+
   function handleChange(newValue: string) {
     if (codings.length > 0) {
-      const qrAnswer = findInAnswerValueSetCodings(codings, newValue);
-      if (qrAnswer) {
-        onQrItemChange({
-          ...createEmptyQrItem(qItem),
-          answer: [{ valueCoding: qrAnswer }]
-        });
-      }
+      const qrAnswer = findInAnswerOptions(answerOptions, newValue);
+      onQrItemChange(
+        qrAnswer ? { ...createEmptyQrItem(qItem), answer: [qrAnswer] } : createEmptyQrItem(qItem)
+      );
     }
   }
 
@@ -76,7 +86,9 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
         codings={codings}
         valueRadio={valueRadio}
         readOnly={readOnly}
+        calcExpUpdated={calcExpUpdated}
         terminologyError={terminologyError}
+        isTabled={isTabled}
         onCheckedChange={handleChange}
       />
     );
@@ -93,7 +105,9 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
           codings={codings}
           valueRadio={valueRadio}
           readOnly={readOnly}
+          calcExpUpdated={calcExpUpdated}
           terminologyError={terminologyError}
+          isTabled={isTabled}
           onCheckedChange={handleChange}
         />
       </ItemFieldGrid>

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

@@ -28,14 +28,17 @@ interface ChoiceSelectAnswerOptionFieldsProps extends PropsWithIsTabledAttribute
   qItem: QuestionnaireItem;
   valueSelect: string;
   readOnly: boolean;
+  calcExpUpdated: boolean;
   onSelectChange: (newValue: string) => void;
 }
 
 function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsProps) {
-  const { qItem, valueSelect, readOnly, isTabled, onSelectChange } = props;
+  const { qItem, valueSelect, readOnly, calcExpUpdated, isTabled, onSelectChange } = props;
 
   const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
 
+  // TODO use calcExpUpdated as updated feedback
+
   return (
     <Select
       id={qItem.id}
@@ -45,7 +48,7 @@ function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsPro
       fullWidth
       placeholder={entryFormat}
       label={displayPrompt}
-      endAdornment={<InputAdornment position={'end'}>{displayUnit}</InputAdornment>}
+      endAdornment={<InputAdornment position="end">{displayUnit}</InputAdornment>}
       sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160 }}
       size="small"
       onChange={(e) => onSelectChange(e.target.value)}>

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

@@ -20,18 +20,18 @@ import React from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
 import { createEmptyQrItem } from '../../../utils/qrItem';
-import { FullWidthFormComponentBox } from '../../Box.styles';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
-import ChoiceSelectAnswerOptionFields from './ChoiceSelectAnswerOptionFields';
 import useReadOnly from '../../../hooks/useReadOnly';
-import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import { useQuestionnaireStore } from '../../../stores';
+import useCodingCalculatedExpression from '../../../hooks/useCodingCalculatedExpression';
+import ChoiceSelectAnswerOptionView from './ChoiceSelectAnswerOptionView';
 
+// TODO eventually merge this item with ChoiceRadioAnswerOptionItem
 interface ChoiceSelectAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
@@ -49,51 +49,42 @@ function ChoiceSelectAnswerOptionItem(props: ChoiceSelectAnswerOptionItemProps)
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
   // Init input value
-  const qrChoiceSelect = qrItem ?? createEmptyQrItem(qItem);
-  let valueSelect = getQrChoiceValue(qrChoiceSelect);
-  if (!valueSelect) {
-    valueSelect = '';
-  }
+  const qrChoice = qrItem ?? createEmptyQrItem(qItem);
+  const valueChoice = getQrChoiceValue(qrChoice);
+
+  // Process calculated expressions
+  const { calcExpUpdated } = useCodingCalculatedExpression({
+    qItem: qItem,
+    valueInString: valueChoice ?? '',
+    onChangeByCalcExpression: (newValueInString) => {
+      handleChange(newValueInString);
+    }
+  });
 
   // Event handlers
   function handleChange(newValue: string) {
-    if (qItem.answerOption) {
-      const qrAnswer = findInAnswerOptions(qItem.answerOption, newValue);
-      if (qrAnswer) {
-        onQrItemChange({ ...createEmptyQrItem(qItem), answer: [qrAnswer] });
-        return;
-      }
+    if (!qItem.answerOption) {
+      onQrItemChange(createEmptyQrItem(qItem));
+      return;
     }
-    onQrItemChange(createEmptyQrItem(qItem));
-  }
 
-  if (isRepeated) {
-    return (
-      <ChoiceSelectAnswerOptionFields
-        qItem={qItem}
-        valueSelect={valueSelect}
-        readOnly={readOnly}
-        isTabled={isTabled}
-        onSelectChange={handleChange}
-      />
+    const qrAnswer = findInAnswerOptions(qItem.answerOption, newValue);
+    onQrItemChange(
+      qrAnswer ? { ...createEmptyQrItem(qItem), answer: [qrAnswer] } : createEmptyQrItem(qItem)
     );
   }
 
   return (
-    <FullWidthFormComponentBox
-      data-test="q-item-choice-select-answer-option-box"
-      data-linkid={qItem.linkId}
-      onClick={() => onFocusLinkId(qItem.linkId)}>
-      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
-        <ChoiceSelectAnswerOptionFields
-          qItem={qItem}
-          valueSelect={valueSelect}
-          readOnly={readOnly}
-          isTabled={isTabled}
-          onSelectChange={handleChange}
-        />
-      </ItemFieldGrid>
-    </FullWidthFormComponentBox>
+    <ChoiceSelectAnswerOptionView
+      qItem={qItem}
+      valueChoice={valueChoice}
+      readOnly={readOnly}
+      calcExpUpdated={calcExpUpdated}
+      isRepeated={isRepeated}
+      isTabled={isTabled}
+      onFocusLinkId={() => onFocusLinkId(qItem.linkId)}
+      onSelectChange={handleChange}
+    />
   );
 }
 

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

@@ -0,0 +1,83 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute
+} from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem } from 'fhir/r4';
+import ChoiceSelectAnswerOptionFields from './ChoiceSelectAnswerOptionFields';
+
+interface ChoiceSelectAnswerOptionViewProps
+  extends PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  valueChoice: string | null;
+  readOnly: boolean;
+  calcExpUpdated: boolean;
+  onSelectChange: (linkId: string) => void;
+  onFocusLinkId: () => void;
+}
+
+function ChoiceSelectAnswerOptionView(props: ChoiceSelectAnswerOptionViewProps) {
+  const {
+    qItem,
+    valueChoice,
+    isRepeated,
+    isTabled,
+    readOnly,
+    calcExpUpdated,
+    onFocusLinkId,
+    onSelectChange
+  } = props;
+
+  if (isRepeated) {
+    return (
+      <ChoiceSelectAnswerOptionFields
+        qItem={qItem}
+        valueSelect={valueChoice ?? ''}
+        readOnly={readOnly}
+        calcExpUpdated={calcExpUpdated}
+        isTabled={isTabled}
+        onSelectChange={onSelectChange}
+      />
+    );
+  }
+
+  return (
+    <FullWidthFormComponentBox
+      data-test="q-item-choice-select-answer-option-box"
+      data-linkid={qItem.linkId}
+      onClick={onFocusLinkId}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
+        <ChoiceSelectAnswerOptionFields
+          qItem={qItem}
+          valueSelect={valueChoice ?? ''}
+          readOnly={readOnly}
+          calcExpUpdated={calcExpUpdated}
+          isTabled={isTabled}
+          onSelectChange={onSelectChange}
+        />
+      </ItemFieldGrid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default ChoiceSelectAnswerOptionView;

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

@@ -25,6 +25,7 @@ import type { Coding, QuestionnaireItem } from 'fhir/r4';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
 import type { TerminologyError } from '../../../hooks/useValueSetCodings';
+import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
 
 interface ChoiceSelectAnswerValueSetFieldsProps extends PropsWithIsTabledAttribute {
   qItem: QuestionnaireItem;
@@ -32,12 +33,21 @@ interface ChoiceSelectAnswerValueSetFieldsProps extends PropsWithIsTabledAttribu
   valueCoding: Coding | null;
   terminologyError: TerminologyError;
   readOnly: boolean;
+  calcExpUpdated: boolean;
   onSelectChange: (newValue: Coding | null) => void;
 }
 
 function ChoiceSelectAnswerValueSetFields(props: ChoiceSelectAnswerValueSetFieldsProps) {
-  const { qItem, codings, valueCoding, terminologyError, readOnly, isTabled, onSelectChange } =
-    props;
+  const {
+    qItem,
+    codings,
+    valueCoding,
+    terminologyError,
+    readOnly,
+    calcExpUpdated,
+    isTabled,
+    onSelectChange
+  } = props;
 
   const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
 
@@ -65,6 +75,7 @@ function ChoiceSelectAnswerValueSetFields(props: ChoiceSelectAnswerValueSetField
               endAdornment: (
                 <>
                   {params.InputProps.endAdornment}
+                  <FadingCheckIcon fadeIn={calcExpUpdated} />
                   {displayUnit}
                 </>
               )