@aehrc/smart-forms-renderer 0.23.2 → 0.25.0

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}
                 </>
               )

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

@@ -31,6 +31,8 @@ import ChoiceSelectAnswerValueSetFields from './ChoiceSelectAnswerValueSetFields
 import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import { useQuestionnaireStore } from '../../../stores';
+import useCodingCalculatedExpression from '../../../hooks/useCodingCalculatedExpression';
+import { convertCodingsToAnswerOptions, findInAnswerOptions } from '../../../utils/choice';
 
 interface ChoiceSelectAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler,
@@ -79,6 +81,22 @@ function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemPro
     []
   );
 
+  const answerOptions = useMemo(() => convertCodingsToAnswerOptions(codings), [codings]);
+
+  // Process calculated expressions
+  const { calcExpUpdated } = useCodingCalculatedExpression({
+    qItem: qItem,
+    valueInString: valueCoding?.code ?? '',
+    onChangeByCalcExpression: (newValueInString) => {
+      if (codings.length > 0) {
+        const qrAnswer = findInAnswerOptions(answerOptions, newValueInString);
+        onQrItemChange(
+          qrAnswer ? { ...createEmptyQrItem(qItem), answer: [qrAnswer] } : createEmptyQrItem(qItem)
+        );
+      }
+    }
+  });
+
   // Event handlers
   function handleChange(newValue: Coding | null) {
     if (newValue) {
@@ -99,6 +117,7 @@ function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemPro
         valueCoding={valueCoding}
         terminologyError={terminologyError}
         readOnly={readOnly}
+        calcExpUpdated={calcExpUpdated}
         isTabled={isTabled}
         onSelectChange={handleChange}
       />
@@ -117,6 +136,7 @@ function ChoiceSelectAnswerValueSetItem(props: ChoiceSelectAnswerValueSetItemPro
           valueCoding={valueCoding}
           terminologyError={terminologyError}
           readOnly={readOnly}
+          calcExpUpdated={calcExpUpdated}
           isTabled={isTabled}
           onSelectChange={handleChange}
         />

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

@@ -73,6 +73,7 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
       }
       return;
     }
+
     onQrItemChange(createEmptyQrItem(qItem));
   }
 

package/src/hooks/useBooleanCalculatedExpression.ts

@@ -0,0 +1,75 @@
+/*
+ * 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 { useEffect, useState } from 'react';
+import { createEmptyQrItem } from '../utils/qrItem';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { useQuestionnaireStore } from '../stores';
+
+interface UseBooleanCalculatedExpression {
+  calcExpUpdated: boolean;
+}
+
+interface UseBooleanCalculatedExpressionProps {
+  qItem: QuestionnaireItem;
+  booleanValue: boolean | undefined;
+  onQrItemChange: (qrItem: QuestionnaireResponseItem) => void;
+}
+
+function UseBooleanCalculatedExpression(
+  props: UseBooleanCalculatedExpressionProps
+): UseBooleanCalculatedExpression {
+  const { qItem, booleanValue, onQrItemChange } = props;
+
+  const calculatedExpressions = useQuestionnaireStore.use.calculatedExpressions();
+
+  const [calcExpUpdated, setCalcExpUpdated] = useState(false);
+
+  useEffect(
+    () => {
+      const calcExpression = calculatedExpressions[qItem.linkId]?.find(
+        (exp) => exp.from === 'item'
+      );
+
+      if (!calcExpression) {
+        return;
+      }
+
+      // only update if calculated value is different from current value
+      if (calcExpression.value !== booleanValue && typeof calcExpression.value === 'boolean') {
+        // update ui to show calculated value changes
+        setCalcExpUpdated(true);
+        setTimeout(() => {
+          setCalcExpUpdated(false);
+        }, 500);
+
+        // update questionnaireResponse
+        onQrItemChange({
+          ...createEmptyQrItem(qItem),
+          answer: [{ valueBoolean: calcExpression.value }]
+        });
+      }
+    },
+    // Only trigger this effect if calculatedExpression of item changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [calculatedExpressions]
+  );
+
+  return { calcExpUpdated: calcExpUpdated };
+}
+
+export default UseBooleanCalculatedExpression;

package/src/hooks/useCodingCalculatedExpression.ts

@@ -0,0 +1,80 @@
+/*
+ * 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 { useEffect, useState } from 'react';
+import type { QuestionnaireItem } from 'fhir/r4';
+import { useQuestionnaireStore } from '../stores';
+
+interface UseCodingCalculatedExpression {
+  calcExpUpdated: boolean;
+}
+
+interface UseCodingCalculatedExpressionProps {
+  qItem: QuestionnaireItem;
+  valueInString: string;
+  onChangeByCalcExpression: (newValueInString: string) => void;
+}
+
+// TODO use this in all choice and open choice items if possible
+function UseCodingCalculatedExpression(
+  props: UseCodingCalculatedExpressionProps
+): UseCodingCalculatedExpression {
+  const { qItem, valueInString, onChangeByCalcExpression } = props;
+
+  const calculatedExpressions = useQuestionnaireStore.use.calculatedExpressions();
+
+  const [calcExpUpdated, setCalcExpUpdated] = useState(false);
+
+  useEffect(
+    () => {
+      const calcExpression = calculatedExpressions[qItem.linkId]?.find(
+        (exp) => exp.from === 'item'
+      );
+
+      if (!calcExpression) {
+        return;
+      }
+
+      // only update if calculated value is different from current value
+      if (
+        calcExpression.value !== valueInString &&
+        (typeof calcExpression.value === 'string' || typeof calcExpression.value === 'number')
+      ) {
+        // update ui to show calculated value changes
+        setCalcExpUpdated(true);
+        setTimeout(() => {
+          setCalcExpUpdated(false);
+        }, 500);
+
+        const updatedValueInString =
+          typeof calcExpression.value === 'string'
+            ? calcExpression.value
+            : calcExpression.value.toString();
+
+        // update questionnaireResponse
+        onChangeByCalcExpression(updatedValueInString);
+      }
+    },
+    // Only trigger this effect if calculatedExpression of item changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [calculatedExpressions]
+  );
+
+  return { calcExpUpdated: calcExpUpdated };
+}
+
+export default UseCodingCalculatedExpression;

package/src/interfaces/calculatedExpression.interface.ts

@@ -1,5 +1,5 @@
 export interface CalculatedExpression {
   expression: string;
   from: 'item' | 'item._text';
-  value?: number | string | object;
+  value?: number | string | boolean | object;
 }