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

package/src/components/Renderer/FormBodyPaginated.tsx

@@ -5,22 +5,19 @@ import TabContext from '@mui/lab/TabContext';
 import TabPanel from '@mui/lab/TabPanel';
 import GroupItem from '../FormComponents/GroupItem/GroupItem';
 import type {
-  PropsWithItemPathAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../interfaces/renderProps.interface';
 import { useQuestionnaireStore } from '../../stores';
-import { useRendererStylingStore } from '../../stores/rendererStylingStore';
+import { useRendererConfigStore } from '../../stores/rendererConfigStore';
 import { SingleItem } from '../FormComponents';
 import PageButtonsWrapper from '../FormComponents/GroupItem/PageButtonWrapper';
 import { QGroupContainerBox } from '../Box.styles';
 import { GroupCard } from '../FormComponents/GroupItem/GroupItem.styles';
 import { isFooter, isHeader } from '../../utils/page';
-import { extendItemPath } from '../../utils/itemPath';
 
 interface FormBodyPaginatedProps
   extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
     PropsWithParentIsReadOnlyAttribute {
   topLevelQItems: QuestionnaireItem[];
   topLevelQRItems: (QuestionnaireResponseItem | QuestionnaireResponseItem[] | undefined)[];
@@ -30,11 +27,11 @@ interface FormBodyPaginatedProps
 // TODO need to fix this before bringing it into release
 // Every group item in here is rendered as a page
 function FormBodyPaginated(props: FormBodyPaginatedProps) {
-  const { topLevelQItems, topLevelQRItems, itemPath, parentIsReadOnly, onQrItemChange } = props;
+  const { topLevelQItems, topLevelQRItems, parentIsReadOnly, onQrItemChange } = props;
 
   const pages = useQuestionnaireStore.use.pages();
   const currentPage = useQuestionnaireStore.use.currentPageIndex();
-  const disableCardView = useRendererStylingStore.use.disablePageCardView();
+  const disableCardView = useRendererConfigStore.use.disablePageCardView();
 
   const { headerQItems, pageQItems, footerQItems } = useMemo(() => {
     const headerQItems: [QuestionnaireItem, number][] = [];
@@ -73,7 +70,6 @@ function FormBodyPaginated(props: FormBodyPaginatedProps) {
             key={qItem.linkId}
             qItem={qItem}
             qrItem={qrItemOrItems ?? null}
-            itemPath={extendItemPath(itemPath, qItem.linkId)}
             isRepeated={isRepeated}
             groupCardElevation={1}
             disableCardView={disableCardView}
@@ -118,7 +114,6 @@ function FormBodyPaginated(props: FormBodyPaginatedProps) {
                     <GroupItem
                       qItem={qItem}
                       qrItem={qrItem ?? null}
-                      itemPath={extendItemPath(itemPath, qItem.linkId)}
                       isRepeated={isRepeated}
                       groupCardElevation={1}
                       disableCardView={disableCardView}
@@ -151,7 +146,6 @@ function FormBodyPaginated(props: FormBodyPaginatedProps) {
                         <SingleItem
                           qItem={qItem}
                           qrItem={qrItem ?? null}
-                          itemPath={extendItemPath(itemPath, qItem.linkId)}
                           isRepeated={isRepeated}
                           groupCardElevation={1}
                           parentIsReadOnly={parentIsReadOnly}
@@ -165,7 +159,6 @@ function FormBodyPaginated(props: FormBodyPaginatedProps) {
                         <SingleItem
                           qItem={qItem}
                           qrItem={qrItem ?? null}
-                          itemPath={extendItemPath(itemPath, qItem.linkId)}
                           isRepeated={isRepeated}
                           groupCardElevation={1}
                           parentIsReadOnly={parentIsReadOnly}
@@ -200,7 +193,6 @@ function FormBodyPaginated(props: FormBodyPaginatedProps) {
             key={qItem.linkId}
             qItem={qItem}
             qrItem={qrItemOrItems ?? null}
-            itemPath={extendItemPath(itemPath, qItem.linkId)}
             isRepeated={isRepeated}
             groupCardElevation={1}
             disableCardView={disableCardView}

package/src/components/Renderer/FormBodySingleCollapsibleWrapper.tsx

@@ -20,7 +20,6 @@ import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import GroupItem from '../FormComponents/GroupItem/GroupItem';
 import FormBodySingleCollapsible from './FormBodySingleCollapsible';
 import type {
-  PropsWithItemPathAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../interfaces/renderProps.interface';
@@ -28,7 +27,6 @@ import useHidden from '../../hooks/useHidden';
 
 interface FormBodySingleCollapsibleProps
   extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
@@ -38,16 +36,8 @@ interface FormBodySingleCollapsibleProps
 }
 
 function FormBodySingleCollapsibleWrapper(props: FormBodySingleCollapsibleProps) {
-  const {
-    qItem,
-    qrItem,
-    index,
-    selectedIndex,
-    parentIsReadOnly,
-    itemPath,
-    onToggleExpand,
-    onQrItemChange
-  } = props;
+  const { qItem, qrItem, index, selectedIndex, parentIsReadOnly, onToggleExpand, onQrItemChange } =
+    props;
 
   const itemIsHidden = useHidden(qItem);
   if (itemIsHidden) {
@@ -64,7 +54,6 @@ function FormBodySingleCollapsibleWrapper(props: FormBodySingleCollapsibleProps)
       <GroupItem
         qItem={qItem}
         qrItem={qrItem}
-        itemPath={itemPath}
         isRepeated={true}
         groupCardElevation={1}
         parentIsReadOnly={parentIsReadOnly}

package/src/components/Renderer/FormBodyTabbed.tsx

@@ -25,30 +25,26 @@ import GroupItem from '../FormComponents/GroupItem/GroupItem';
 import { createEmptyQrGroup, updateQrItemsInGroup } from '../../utils/qrItem';
 import FormBodyTabListWrapper from '../Tabs/FormBodyTabListWrapper';
 import type {
-  PropsWithItemPathAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../interfaces/renderProps.interface';
-import { useQuestionnaireStore, useRendererStylingStore } from '../../stores';
+import { useQuestionnaireStore, useRendererConfigStore } from '../../stores';
 import type { GridProps } from '@mui/material/Grid';
-import { extendItemPath } from '../../utils/itemPath';
-import type { ItemPath } from '../../interfaces/itemPath.interface';
 
 interface FormBodyTabbedProps
   extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
     PropsWithParentIsReadOnlyAttribute {
   topLevelQItem: QuestionnaireItem;
   topLevelQRItem: QuestionnaireResponseItem | null;
 }
 
 function FormBodyTabbed(props: FormBodyTabbedProps) {
-  const { topLevelQItem, topLevelQRItem, itemPath, parentIsReadOnly, onQrItemChange } = props;
+  const { topLevelQItem, topLevelQRItem, parentIsReadOnly, onQrItemChange } = props;
 
   const tabs = useQuestionnaireStore.use.tabs();
   const currentTab = useQuestionnaireStore.use.currentTabIndex();
 
-  const tabListWidthOrResponsive = useRendererStylingStore.use.tabListWidthOrResponsive();
+  const tabListWidthOrResponsive = useRendererConfigStore.use.tabListWidthOrResponsive();
 
   const indexMap: Record<string, number> = useMemo(
     () => mapQItemsIndex(topLevelQItem),
@@ -60,9 +56,9 @@ function FormBodyTabbed(props: FormBodyTabbedProps) {
   const qItems = topLevelQItem.item;
   const qrItems = nonNullTopLevelQRItem.item;
 
-  function handleQrGroupChange(qrItem: QuestionnaireResponseItem, targetItemPath?: ItemPath) {
+  function handleQrGroupChange(qrItem: QuestionnaireResponseItem) {
     updateQrItemsInGroup(qrItem, null, nonNullTopLevelQRItem, indexMap);
-    onQrItemChange(nonNullTopLevelQRItem, targetItemPath);
+    onQrItemChange(nonNullTopLevelQRItem);
   }
 
   if (!qItems || !qrItems) {
@@ -122,7 +118,6 @@ function FormBodyTabbed(props: FormBodyTabbedProps) {
                   tabs={tabs}
                   currentTabIndex={currentTab}
                   parentIsReadOnly={parentIsReadOnly}
-                  itemPath={extendItemPath(itemPath, qItem.linkId)}
                   onQrItemChange={handleQrGroupChange}
                 />
               </TabPanel>

package/src/components/Renderer/FormTopLevelItem.tsx

@@ -22,7 +22,6 @@ import { containsTabs, isTabContainer } from '../../utils/tabs';
 import GroupItem from '../FormComponents/GroupItem/GroupItem';
 import SingleItem from '../FormComponents/SingleItem/SingleItem';
 import type {
-  PropsWithItemPathAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
   PropsWithQrRepeatGroupChangeHandler
@@ -37,13 +36,12 @@ import { isRepeatItemAndNotCheckbox, isSpecificItemControl } from '../../utils';
 import GroupTable from '../FormComponents/Tables/GroupTable';
 import RepeatItem from '../FormComponents/RepeatItem/RepeatItem';
 import GridGroup from '../FormComponents/GridGroup/GridGroup';
-import { useRendererStylingStore } from '../../stores';
+import { useRendererConfigStore } from '../../stores';
 import { isPage } from '../../utils/page';
 import FormBodyPageContainer from './FormBodyPageContainer';
 
 interface FormTopLevelItemProps
   extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
     PropsWithQrRepeatGroupChangeHandler,
     PropsWithParentIsReadOnlyAttribute {
   topLevelQItem: QuestionnaireItem;
@@ -55,7 +53,7 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
   const {
     topLevelQItem,
     topLevelQRItemOrItems,
-    itemPath,
+
     parentIsReadOnly,
     wholeFormIsPaginated,
     onQrItemChange,
@@ -70,7 +68,7 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
   // Unfortunately, "header" and "footer" itemControl is not supported.
   const itemIsPageContainer = isPage(topLevelQItem);
 
-  const showTabbedFormAt = useRendererStylingStore.use.showTabbedFormAt();
+  const showTabbedFormAt = useRendererConfigStore.use.showTabbedFormAt();
   const isTabbedForm = useResponsive(showTabbedFormAt);
 
   const itemIsGroup = topLevelQItem.type === 'group';
@@ -88,7 +86,6 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
       <GroupItemSwitcher
         qItem={topLevelQItem}
         qrItemOrItems={topLevelQRItemOrItems}
-        itemPath={itemPath}
         groupCardElevation={1}
         parentIsReadOnly={readOnly}
         onQrItemChange={onQrItemChange}
@@ -108,7 +105,6 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
           key={topLevelQItem.linkId}
           topLevelQItem={topLevelQItem}
           topLevelQRItem={topLevelQRItem}
-          itemPath={itemPath}
           parentIsReadOnly={readOnly}
           onQrItemChange={onQrItemChange}
         />
@@ -120,7 +116,6 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
         key={topLevelQItem.linkId}
         topLevelQItem={topLevelQItem}
         topLevelQRItem={topLevelQRItem}
-        itemPath={itemPath}
         parentIsReadOnly={readOnly}
         onQrItemChange={onQrItemChange}
       />
@@ -140,7 +135,6 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
         key={topLevelQItem.linkId}
         topLevelQItem={topLevelQItem}
         topLevelQRItem={topLevelQRItem}
-        itemPath={itemPath}
         parentIsReadOnly={readOnly}
         onQrItemChange={onQrItemChange}
       />
@@ -156,7 +150,6 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
         <GridGroup
           qItem={topLevelQItem}
           qrItem={topLevelQRItem}
-          itemPath={itemPath}
           groupCardElevation={1}
           parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
@@ -171,7 +164,6 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
           key={topLevelQItem.linkId}
           qItem={topLevelQItem}
           qrItems={topLevelQRItem ? [topLevelQRItem] : []}
-          itemPath={itemPath}
           groupCardElevation={1}
           isRepeated={false}
           parentIsReadOnly={parentIsReadOnly}
@@ -185,7 +177,6 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
         key={topLevelQItem.linkId}
         qItem={topLevelQItem}
         qrItem={topLevelQRItem}
-        itemPath={itemPath}
         groupCardElevation={1}
         isRepeated={false}
         parentIsReadOnly={readOnly}
@@ -203,7 +194,6 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
           key={topLevelQItem.linkId}
           qItem={topLevelQItem}
           qrItem={topLevelQRItem}
-          itemPath={itemPath}
           groupCardElevation={1}
           parentIsReadOnly={readOnly}
           onQrItemChange={onQrItemChange}
@@ -218,7 +208,6 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
         key={topLevelQItem.linkId}
         qItem={topLevelQItem}
         qrItem={topLevelQRItem}
-        itemPath={itemPath}
         isRepeated={false}
         isTabled={false}
         groupCardElevation={1}

package/src/components/Renderer/SmartFormsRenderer.tsx

@@ -51,10 +51,12 @@ export interface SmartFormsRendererProps {
 
 /**
  * A self-initialising wrapper around the BaseRenderer rendering engine.
- * Will be deprecated in version 1.0.0. For alternative usage, see:
+ *
+ * This component is now deprecated. You can still use it, but it might not be compatible with renderer appearance and behaviour customisation via via {@link rendererConfigStore}.
+ * For alternative usage, see:
  * - https://github.com/aehrc/smart-forms/blob/main/packages/smart-forms-renderer/src/stories/storybookWrappers/InitialiseFormWrapperForStorybook.tsx#L40-L57
  *
- * @see SmartFormsRendererProps for props.
+ * @see {@link SmartFormsRendererProps} for props.
  *
  * @author Sean Fong
  */

package/src/components/Tabs/FormBodySingleTab.tsx

@@ -24,8 +24,10 @@ import { useQuestionnaireStore } from '../../stores';
 import type { QuestionnaireItem } from 'fhir/r4';
 import ContextDisplayItem from '../FormComponents/ItemParts/ContextDisplayItem';
 import { useFocusTabHeading } from '../../hooks/useFocusTabHeading';
+import useDisplayCqfAndCalculatedExpression from '../../hooks/useDisplayCqfAndCalculatedExpression';
 
 interface FormBodySingleTabProps {
+  qItem: QuestionnaireItem;
   contextDisplayItems: QuestionnaireItem[];
   selected: boolean;
   tabLabel: string;
@@ -33,11 +35,15 @@ interface FormBodySingleTabProps {
 }
 
 const FormBodySingleTab = memo(function FormBodySingleTab(props: FormBodySingleTabProps) {
-  const { contextDisplayItems, selected, tabLabel, listIndex } = props;
+  const { qItem, contextDisplayItems, selected, tabLabel, listIndex } = props;
 
   const switchTab = useQuestionnaireStore.use.switchTab();
   const focusHeading = useFocusTabHeading();
 
+  // Get aria-label text if available
+  const itemTextAriaLabel =
+    useDisplayCqfAndCalculatedExpression(qItem, 'item._text.aria-label') ?? undefined;
+
   function handleTabClick() {
     switchTab(listIndex);
     window.scrollTo(0, 0);
@@ -61,7 +67,8 @@ const FormBodySingleTab = memo(function FormBodySingleTab(props: FormBodySingleT
                 id={`tab-${listIndex}`}
                 component="span"
                 fontWeight={600}
-                fontSize="0.8125rem">
+                fontSize="0.8125rem"
+                aria-label={itemTextAriaLabel}>
                 {tabLabel}
               </Typography>
               <Box display="flex" minHeight={24} minWidth={24} ml={1}>

package/src/components/Tabs/FormBodyTabList.tsx

@@ -68,6 +68,7 @@ const FormBodyTabList = memo(function FormBodyTabList(props: FormBodyTabListProp
         return (
           <Collapse key={qItem.linkId} timeout={100}>
             <FormBodySingleTab
+              qItem={qItem}
               contextDisplayItems={contextDisplayItems}
               selected={tabIsSelected}
               tabLabel={tabLabel}

package/src/hooks/index.ts

@@ -6,13 +6,8 @@ export { default as useRenderingExtensions } from './useRenderingExtensions';
 export { default as useValidationFeedback } from './useValidationFeedback';
 export { default as useValueSetCodings } from './useValueSetCodings';
 
-// CalculatedExpression hooks
-export { default as useStringCalculatedExpression } from './useStringCalculatedExpression';
+// CalculatedExpression and cqf-expression hooks
 export { default as useDisplayCqfAndCalculatedExpression } from './useDisplayCqfAndCalculatedExpression';
-export {
-  default as useCodingCalculatedExpression,
-  objectIsCoding
-} from './useCodingCalculatedExpression';
 
 // Responsiveness-related hooks
 export { default as useResponsive } from './useResponsive';

package/src/hooks/useBuildForm.ts

@@ -15,59 +15,52 @@
  * limitations under the License.
  */
 
-import type { ComponentType } from 'react';
 import { useLayoutEffect, useState } from 'react';
 import { buildForm } from '../utils';
-import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
-import type { RendererStyling } from '../stores/rendererStylingStore';
-import { useRendererStylingStore } from '../stores/rendererStylingStore';
-import type { QItemOverrideComponentProps, SdcUiOverrideComponentProps } from '../interfaces';
+import type { BuildFormParams } from '../utils/manageForm';
 
 /**
- * React hook wrapping around the buildForm() function to build a form from a questionnaire and an optional QuestionnaireResponse.
- * @see buildForm() for more information.
+ * React hook wrapping around {@link buildForm} to build a form from a Questionnaire and an optional filled QuestionnaireResponse.
+ * If a QuestionnaireResponse is not provided, an empty QuestionnaireResponse is set as the initial QuestionnaireResponse.
  *
- * @param questionnaire - Questionnaire to be rendered
- * @param questionnaireResponse - Pre-populated/draft/loaded QuestionnaireResponse to be rendered (optional)
- * @param readOnly - Applies read-only mode to all items in the form view
- * @param terminologyServerUrl - Terminology server url to fetch terminology. If not provided, the default terminology server will be used. (optional)
- * @param additionalVariables - Additional key-value pair of SDC variables + values to be fed into the renderer's FhirPathContext `Record<name, value>` (likely coming from a pre-population module) e.g. `{ 'ObsBodyHeight': <Bundle of height observations> } }`.
- * @param rendererStylingOptions - Renderer styling to be applied to the form. See docs for styling options. (optional)
- * @param qItemOverrideComponents - Key-value pair of React component overrides for Questionnaire Items via linkId `Record<linkId, React component>`
- * @param sdcUiOverrideComponents - Key-value pair of React component overrides for SDC UI Controls https://hl7.org/fhir/extensions/ValueSet-questionnaire-item-control.html `Record<SDC UI code, React component>`
+ * The build process also supports:
+ * - Applying readOnly mode to all items in the form view
+ * - Providing a default terminology server URL (fallbacks to a public Ontoserver instance if not provided)
+ * - Passing additional SDC variables into the FhirPathContext (e.g. for pre-population purposes)
+ * - Adjusting renderer styling and behaviour via `rendererConfigStore`
+ * - Overriding QuestionnaireItem rendering via `qItemOverrideComponents`
+ * - Overriding SDC UI controls via `sdcUiOverrideComponents`
  *
+ * @param params - {@link BuildFormParams} containing the configuration for building the form
+ * @returns Hook result for form building lifecycle
  *
  * @author Sean Fong
  */
-function useBuildForm(
-  questionnaire: Questionnaire,
-  questionnaireResponse?: QuestionnaireResponse,
-  readOnly?: boolean,
-  terminologyServerUrl?: string,
-  additionalVariables?: Record<string, any>,
-  rendererStylingOptions?: RendererStyling,
-  qItemOverrideComponents?: Record<string, ComponentType<QItemOverrideComponentProps>>,
-  sdcUiOverrideComponents?: Record<string, ComponentType<SdcUiOverrideComponentProps>>
-) {
-  const [isBuilding, setIsBuilding] = useState(true);
+function useBuildForm(params: BuildFormParams) {
+  const {
+    questionnaire,
+    questionnaireResponse,
+    readOnly,
+    terminologyServerUrl,
+    additionalContext,
+    rendererConfigOptions,
+    qItemOverrideComponents,
+    sdcUiOverrideComponents
+  } = params;
 
-  const setRendererStyling = useRendererStylingStore.use.setRendererStyling();
+  const [isBuilding, setIsBuilding] = useState(true);
 
   useLayoutEffect(() => {
-    // Set optional renderer styling
-    if (rendererStylingOptions) {
-      setRendererStyling(rendererStylingOptions);
-    }
-
-    buildForm(
+    buildForm({
       questionnaire,
       questionnaireResponse,
       readOnly,
       terminologyServerUrl,
-      additionalVariables,
+      additionalContext,
+      rendererConfigOptions,
       qItemOverrideComponents,
       sdcUiOverrideComponents
-    )
+    })
       .then(() => {
         setIsBuilding(false);
       })
@@ -80,11 +73,10 @@ function useBuildForm(
     questionnaireResponse,
     readOnly,
     terminologyServerUrl,
-    additionalVariables,
-    rendererStylingOptions,
+    additionalContext,
+    rendererConfigOptions,
     qItemOverrideComponents,
-    sdcUiOverrideComponents,
-    setRendererStyling
+    sdcUiOverrideComponents
   ]);
 
   return isBuilding;

package/src/hooks/useCalculatedExpressionUpdated.ts

@@ -0,0 +1,39 @@
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ * Detects when an item value changes due to a calculatedExpression.
+ * Returns true for ~700ms whenever the calculated value updates.
+ *
+ * Ignores the initial mount (so it won't re-animate when the user switch between tabs).
+ */
+export function useCalculatedExpressionUpdated(answerKey: string | undefined): boolean {
+  const [animating, setAnimating] = useState(false);
+  const previousAnswerKey = useRef<string | null>(null);
+
+  useEffect(() => {
+    // Skip the first render — just store the current key
+    if (previousAnswerKey.current === null) {
+      previousAnswerKey.current = answerKey ?? null;
+      return;
+    }
+
+    // Answer key has changed, and it is a calculatedExpression
+    if (
+      answerKey &&
+      answerKey !== previousAnswerKey.current &&
+      // values generated via calculatedExpression will have "calculatedExpression" in their key e.g. obs-bmi-calculatedExpression-_Cye5_m-d4cjxZqY4-9XL
+      answerKey.includes('calculatedExpression')
+    ) {
+      previousAnswerKey.current = answerKey;
+      setAnimating(true);
+
+      const timer = setTimeout(() => setAnimating(false), 700);
+
+      return () => clearTimeout(timer);
+    }
+
+    return undefined;
+  }, [answerKey]);
+
+  return animating;
+}

package/src/hooks/useCodingCalculatedExpression.ts

@@ -1,110 +0,0 @@
-/*
- * Copyright 2025 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 { Coding, QuestionnaireItem } from 'fhir/r4';
-import { useQuestionnaireStore } from '../stores';
-
-interface UseCodingCalculatedExpression {
-  calcExpUpdated: boolean;
-}
-
-interface UseCodingCalculatedExpressionProps {
-  qItem: QuestionnaireItem;
-  valueInString: string;
-  onChangeByCalcExpressionString: (newValueInString: string) => void;
-  onChangeByCalcExpressionNull: () => void;
-}
-
-// TODO use this in all choice and open choice items if possible
-function useCodingCalculatedExpression(
-  props: UseCodingCalculatedExpressionProps
-): UseCodingCalculatedExpression {
-  const { qItem, valueInString, onChangeByCalcExpressionString, onChangeByCalcExpressionNull } =
-    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;
-      }
-
-      // If both input and calculated value are falsy, there is nothing to update
-      const inputAndCalcValueAreBothFalsy = valueInString === '' && !calcExpression.value;
-      if (inputAndCalcValueAreBothFalsy) {
-        return;
-      }
-
-      // only update if calculated value is different from current value
-      if (
-        calcExpression.value !== valueInString &&
-        (typeof calcExpression.value === 'string' ||
-          typeof calcExpression.value === 'number' ||
-          typeof calcExpression.value === 'object' ||
-          calcExpression.value === null)
-      ) {
-        // update ui to show calculated value changes
-        setCalcExpUpdated(true);
-        const timeoutId = setTimeout(() => {
-          setCalcExpUpdated(false);
-        }, 500);
-
-        // calculatedExpression value is null
-        if (calcExpression.value === null) {
-          onChangeByCalcExpressionNull();
-          return () => clearTimeout(timeoutId);
-        }
-
-        // calculatedExpression value is object, check if it is a Coding object
-        if (typeof calcExpression.value === 'object' && objectIsCoding(calcExpression.value)) {
-          if (calcExpression.value.code) {
-            onChangeByCalcExpressionString(calcExpression.value.code);
-            return () => clearTimeout(timeoutId);
-          }
-        }
-
-        // calculatedExpression value is a string or number
-        const newValueString =
-          typeof calcExpression.value === 'string'
-            ? calcExpression.value
-            : calcExpression.value.toString();
-
-        onChangeByCalcExpressionString(newValueString);
-        return () => clearTimeout(timeoutId);
-      }
-    },
-    // Only trigger this effect if calculatedExpression of item changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [calculatedExpressions]
-  );
-
-  return { calcExpUpdated: calcExpUpdated };
-}
-
-export function objectIsCoding(obj: any): obj is Coding {
-  return !!(obj && obj.code && typeof obj.code === 'string');
-}
-
-export default useCodingCalculatedExpression;