@aehrc/smart-forms-renderer 0.27.2 → 0.27.4

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

@@ -23,12 +23,13 @@ import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute
 } from '../../../interfaces/renderProps.interface';
-import type { QuestionnaireItem } from 'fhir/r4';
+import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
 
 interface ChoiceRadioAnswerOptionViewProps
   extends PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute {
   qItem: QuestionnaireItem;
+  options: QuestionnaireItemAnswerOption[];
   valueChoice: string | null;
   readOnly: boolean;
   calcExpUpdated: boolean;
@@ -39,6 +40,7 @@ interface ChoiceRadioAnswerOptionViewProps
 function ChoiceRadioAnswerOptionView(props: ChoiceRadioAnswerOptionViewProps) {
   const {
     qItem,
+    options,
     valueChoice,
     isRepeated,
     isTabled,
@@ -52,6 +54,7 @@ function ChoiceRadioAnswerOptionView(props: ChoiceRadioAnswerOptionViewProps) {
     return (
       <ChoiceRadioAnswerOptionFields
         qItem={qItem}
+        options={options}
         valueRadio={valueChoice}
         isTabled={isTabled}
         readOnly={readOnly}
@@ -69,6 +72,7 @@ function ChoiceRadioAnswerOptionView(props: ChoiceRadioAnswerOptionViewProps) {
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <ChoiceRadioAnswerOptionFields
           qItem={qItem}
+          options={options}
           valueRadio={valueChoice}
           readOnly={readOnly}
           isTabled={isTabled}

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

@@ -18,8 +18,7 @@
 import React from 'react';
 import Typography from '@mui/material/Typography';
 import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
-import type { Coding, QuestionnaireItem } from 'fhir/r4';
-import ChoiceRadioSingle from './ChoiceRadioSingle';
+import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
 import { StyledRadioGroup } from '../Item.styles';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import { StyledAlert } from '../../Alert.styles';
@@ -28,10 +27,11 @@ import { getChoiceOrientation } from '../../../utils/choice';
 import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
 import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
 import Box from '@mui/material/Box';
+import RadioOptionList from '../ItemParts/RadioOptionList';
 
 interface ChoiceRadioAnswerValueSetFieldsProps extends PropsWithIsTabledAttribute {
   qItem: QuestionnaireItem;
-  codings: Coding[];
+  options: QuestionnaireItemAnswerOption[];
   valueRadio: string | null;
   readOnly: boolean;
   calcExpUpdated: boolean;
@@ -42,7 +42,7 @@ interface ChoiceRadioAnswerValueSetFieldsProps extends PropsWithIsTabledAttribut
 function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsProps) {
   const {
     qItem,
-    codings,
+    options,
     valueRadio,
     readOnly,
     calcExpUpdated,
@@ -53,7 +53,7 @@ function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsP
 
   const orientation = getChoiceOrientation(qItem) ?? ChoiceItemOrientation.Vertical;
 
-  if (codings.length > 0) {
+  if (options.length > 0) {
     return (
       <Box display="flex" alignItems="center">
         <StyledRadioGroup
@@ -61,18 +61,11 @@ function ChoiceRadioAnswerValueSetFields(props: ChoiceRadioAnswerValueSetFieldsP
           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}
-              />
-            );
-          })}
+          value={valueRadio}
+          data-test="q-item-radio-group">
+          <RadioOptionList options={options} readOnly={readOnly} />
         </StyledRadioGroup>
+
         <Box flexGrow={1} />
 
         <FadingCheckIcon fadeIn={calcExpUpdated} disabled={readOnly} />

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

@@ -60,7 +60,7 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
   // Get codings/options from valueSet
   const { codings, terminologyError } = useValueSetCodings(qItem);
 
-  const answerOptions = useMemo(() => convertCodingsToAnswerOptions(codings), [codings]);
+  const options = useMemo(() => convertCodingsToAnswerOptions(codings), [codings]);
 
   const { calcExpUpdated } = useCodingCalculatedExpression({
     qItem: qItem,
@@ -75,7 +75,7 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
 
   function handleChange(newValue: string) {
     if (codings.length > 0) {
-      const qrAnswer = findInAnswerOptions(answerOptions, newValue);
+      const qrAnswer = findInAnswerOptions(options, newValue);
       onQrItemChange(
         qrAnswer ? { ...createEmptyQrItem(qItem), answer: [qrAnswer] } : createEmptyQrItem(qItem)
       );
@@ -86,7 +86,7 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
     return (
       <ChoiceRadioAnswerValueSetFields
         qItem={qItem}
-        codings={codings}
+        options={options}
         valueRadio={valueRadio}
         readOnly={readOnly}
         calcExpUpdated={calcExpUpdated}
@@ -105,7 +105,7 @@ function ChoiceRadioAnswerValueSetItem(props: ChoiceRadioAnswerValueSetItemProps
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <ChoiceRadioAnswerValueSetFields
           qItem={qItem}
-          codings={codings}
+          options={options}
           valueRadio={valueRadio}
           readOnly={readOnly}
           calcExpUpdated={calcExpUpdated}

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

@@ -19,13 +19,14 @@ import React, { Fragment } from 'react';
 import InputAdornment from '@mui/material/InputAdornment';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
-import type { QuestionnaireItem } from 'fhir/r4';
+import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
 import { TEXT_FIELD_WIDTH } from '../Textfield.styles';
 
 interface ChoiceSelectAnswerOptionFieldsProps extends PropsWithIsTabledAttribute {
   qItem: QuestionnaireItem;
+  options: QuestionnaireItemAnswerOption[];
   valueSelect: string;
   readOnly: boolean;
   calcExpUpdated: boolean;
@@ -33,7 +34,7 @@ interface ChoiceSelectAnswerOptionFieldsProps extends PropsWithIsTabledAttribute
 }
 
 function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsProps) {
-  const { qItem, valueSelect, readOnly, calcExpUpdated, isTabled, onSelectChange } = props;
+  const { qItem, options, valueSelect, readOnly, calcExpUpdated, isTabled, onSelectChange } = props;
 
   const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
 
@@ -52,7 +53,7 @@ function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsPro
       sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160 }}
       size="small"
       onChange={(e) => onSelectChange(e.target.value)}>
-      {qItem.answerOption?.map((option, index) => {
+      {options.map((option, index) => {
         if (option['valueCoding']) {
           return (
             <MenuItem key={option.valueCoding.code} value={option.valueCoding.code}>

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

@@ -52,6 +52,8 @@ function ChoiceSelectAnswerOptionItem(props: ChoiceSelectAnswerOptionItemProps)
   const qrChoice = qrItem ?? createEmptyQrItem(qItem);
   const valueChoice = getQrChoiceValue(qrChoice);
 
+  const options = qItem.answerOption ?? [];
+
   // Process calculated expressions
   const { calcExpUpdated } = useCodingCalculatedExpression({
     qItem: qItem,
@@ -66,12 +68,12 @@ function ChoiceSelectAnswerOptionItem(props: ChoiceSelectAnswerOptionItemProps)
 
   // Event handlers
   function handleChange(newValue: string) {
-    if (!qItem.answerOption) {
+    if (options.length === 0) {
       onQrItemChange(createEmptyQrItem(qItem));
       return;
     }
 
-    const qrAnswer = findInAnswerOptions(qItem.answerOption, newValue);
+    const qrAnswer = findInAnswerOptions(options, newValue);
     onQrItemChange(
       qrAnswer ? { ...createEmptyQrItem(qItem), answer: [qrAnswer] } : createEmptyQrItem(qItem)
     );
@@ -80,6 +82,7 @@ function ChoiceSelectAnswerOptionItem(props: ChoiceSelectAnswerOptionItemProps)
   return (
     <ChoiceSelectAnswerOptionView
       qItem={qItem}
+      options={options}
       valueChoice={valueChoice}
       readOnly={readOnly}
       calcExpUpdated={calcExpUpdated}

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

@@ -22,13 +22,14 @@ import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute
 } from '../../../interfaces/renderProps.interface';
-import type { QuestionnaireItem } from 'fhir/r4';
+import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
 import ChoiceSelectAnswerOptionFields from './ChoiceSelectAnswerOptionFields';
 
 interface ChoiceSelectAnswerOptionViewProps
   extends PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute {
   qItem: QuestionnaireItem;
+  options: QuestionnaireItemAnswerOption[];
   valueChoice: string | null;
   readOnly: boolean;
   calcExpUpdated: boolean;
@@ -39,6 +40,7 @@ interface ChoiceSelectAnswerOptionViewProps
 function ChoiceSelectAnswerOptionView(props: ChoiceSelectAnswerOptionViewProps) {
   const {
     qItem,
+    options,
     valueChoice,
     isRepeated,
     isTabled,
@@ -52,6 +54,7 @@ function ChoiceSelectAnswerOptionView(props: ChoiceSelectAnswerOptionViewProps)
     return (
       <ChoiceSelectAnswerOptionFields
         qItem={qItem}
+        options={options}
         valueSelect={valueChoice ?? ''}
         readOnly={readOnly}
         calcExpUpdated={calcExpUpdated}
@@ -69,6 +72,7 @@ function ChoiceSelectAnswerOptionView(props: ChoiceSelectAnswerOptionViewProps)
       <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
         <ChoiceSelectAnswerOptionFields
           qItem={qItem}
+          options={options}
           valueSelect={valueChoice ?? ''}
           readOnly={readOnly}
           calcExpUpdated={calcExpUpdated}

package/src/components/FormComponents/DecimalItem/DecimalItem.tsx

@@ -91,7 +91,7 @@ function DecimalItem(props: DecimalItemProps) {
       );
       onQrItemChange({
         ...createEmptyQrItem(qItem),
-        answer: [{ valueInteger: newValueDecimal }]
+        answer: [{ valueDecimal: newValueDecimal }]
       });
     },
     onChangeByCalcExpressionNull: () => {

package/src/components/FormComponents/GroupItem/TabButtonsWrapper.tsx

@@ -17,11 +17,11 @@
 
 import React, { memo } from 'react';
 import Box from '@mui/material/Box';
-import { findNumOfVisibleTabs, getVisibleTabIndex } from '../../../utils/tabs';
 import type { Tabs } from '../../../interfaces/tab.interface';
 import { useQuestionnaireStore } from '../../../stores';
 import NextTabButton from './NextTabButton';
 import PreviousTabButton from './PreviousTabButton';
+import useNextAndPreviousVisibleTabs from '../../../hooks/useNextAndPreviousVisibleTabs';
 
 interface TabButtonsWrapperProps {
   currentTabIndex?: number;
@@ -31,27 +31,33 @@ interface TabButtonsWrapperProps {
 const TabButtonsWrapper = memo(function TabButtonsWrapper(props: TabButtonsWrapperProps) {
   const { currentTabIndex, tabs } = props;
 
-  const enableWhenIsActivated = useQuestionnaireStore.use.enableWhenIsActivated();
-  const enableWhenItems = useQuestionnaireStore.use.enableWhenItems();
-  const enableWhenExpressions = useQuestionnaireStore.use.enableWhenExpressions();
   const switchTab = useQuestionnaireStore.use.switchTab();
 
+  const { previousTabIndex, nextTabIndex, numOfVisibleTabs } = useNextAndPreviousVisibleTabs(
+    currentTabIndex,
+    tabs
+  );
+
   const tabsNotDefined = currentTabIndex === undefined || tabs === undefined;
 
-  function handleButtonClick(direction: 'next' | 'previous') {
-    if (tabsNotDefined) {
+  // Event handlers
+  function handlePreviousTabButtonClick() {
+    if (previousTabIndex === null) {
       return;
     }
 
-    const visibleTabIndex = getVisibleTabIndex({
-      direction,
-      tabs,
-      currentTabIndex,
-      enableWhenIsActivated,
-      enableWhenItems,
-      enableWhenExpressions
-    });
-    switchTab(visibleTabIndex);
+    switchTab(previousTabIndex);
+
+    // Scroll to top of page
+    window.scrollTo(0, 0);
+  }
+
+  function handleNextTabButtonClick() {
+    if (nextTabIndex === null) {
+      return;
+    }
+
+    switchTab(nextTabIndex);
 
     // Scroll to top of page
     window.scrollTo(0, 0);
@@ -61,26 +67,23 @@ const TabButtonsWrapper = memo(function TabButtonsWrapper(props: TabButtonsWrapp
     return null;
   }
 
-  const previousTabButtonHidden = currentTabIndex === 0;
-  const nextTabButtonHidden = currentTabIndex === Object.keys(tabs).length - 1;
+  const previousTabButtonHidden = previousTabIndex === null;
+  const nextTabButtonHidden = nextTabIndex === null;
 
-  const buttonIsDisabled =
-    findNumOfVisibleTabs(tabs, enableWhenIsActivated, enableWhenItems, enableWhenExpressions) <= 1;
+  // This is more of a fallback check to prevent the user from navigating to an invisble tab if buttons are visble for some reason
+  const tabButtonsDisabled = numOfVisibleTabs <= 1;
 
   return (
     <Box display="flex" mt={3}>
       {previousTabButtonHidden ? null : (
         <PreviousTabButton
-          isDisabled={buttonIsDisabled}
-          onPreviousTabClick={() => handleButtonClick('previous')}
+          isDisabled={tabButtonsDisabled}
+          onPreviousTabClick={handlePreviousTabButtonClick}
         />
       )}
       <Box flexGrow={1} />
       {nextTabButtonHidden ? null : (
-        <NextTabButton
-          isDisabled={buttonIsDisabled}
-          onNextTabClick={() => handleButtonClick('next')}
-        />
+        <NextTabButton isDisabled={tabButtonsDisabled} onNextTabClick={handleNextTabButtonClick} />
       )}
     </Box>
   );

package/src/components/FormComponents/ItemParts/{RadioAnswerOptionButtons.tsx → RadioOptionList.tsx}

@@ -17,19 +17,19 @@
 
 import React from 'react';
 import ChoiceRadioSingle from '../ChoiceItems/ChoiceRadioSingle';
-import type { QuestionnaireItem } from 'fhir/r4';
+import type { QuestionnaireItemAnswerOption } from 'fhir/r4';
 
-interface RadioAnswerOptionButtonsProps {
-  qItem: QuestionnaireItem;
+interface RadioOptionListProps {
+  options: QuestionnaireItemAnswerOption[];
   readOnly: boolean;
 }
 
-function RadioAnswerOptionButtons(props: RadioAnswerOptionButtonsProps) {
-  const { qItem, readOnly } = props;
+function RadioOptionList(props: RadioOptionListProps) {
+  const { options, readOnly } = props;
 
   return (
     <>
-      {qItem.answerOption?.map((option) => {
+      {options.map((option) => {
         if (option['valueCoding']) {
           return (
             <ChoiceRadioSingle
@@ -69,4 +69,4 @@ function RadioAnswerOptionButtons(props: RadioAnswerOptionButtonsProps) {
   );
 }
 
-export default RadioAnswerOptionButtons;
+export default RadioOptionList;

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

@@ -16,21 +16,26 @@
  */
 
 import React from 'react';
-import { StyledFormGroup } from '../Item.styles';
 import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
-import CheckboxSingle from '../ItemParts/CheckboxSingle';
 import CheckboxSingleWithOpenLabel from '../ItemParts/CheckboxSingleWithOpenLabel';
-import type { QuestionnaireItem, QuestionnaireResponseItemAnswer } from 'fhir/r4';
+import type {
+  QuestionnaireItem,
+  QuestionnaireItemAnswerOption,
+  QuestionnaireResponseItemAnswer
+} from 'fhir/r4';
 import { getChoiceOrientation } from '../../../utils/choice';
+import { StyledFormGroup } from '../Item.styles';
+import CheckboxOptionList from '../ChoiceItems/CheckboxOptionList';
 
 interface OpenChoiceCheckboxAnswerOptionFieldsProps {
   qItem: QuestionnaireItem;
+  options: QuestionnaireItemAnswerOption[];
   answers: QuestionnaireResponseItemAnswer[];
   openLabelText: string | null;
   openLabelValue: string;
   openLabelChecked: boolean;
   readOnly: boolean;
-  onValueChange: (changedOptionValue: string | null, changedOpenLabelValue: string | null) => void;
+  onOptionChange: (changedOptionValue: string) => void;
   onOpenLabelCheckedChange: (checked: boolean) => void;
   onOpenLabelInputChange: (input: string) => void;
 }
@@ -38,12 +43,13 @@ interface OpenChoiceCheckboxAnswerOptionFieldsProps {
 function OpenChoiceCheckboxAnswerOptionFields(props: OpenChoiceCheckboxAnswerOptionFieldsProps) {
   const {
     qItem,
+    options,
     answers,
     openLabelText,
     openLabelValue,
     openLabelChecked,
     readOnly,
-    onValueChange,
+    onOptionChange,
     onOpenLabelCheckedChange,
     onOpenLabelInputChange
   } = props;
@@ -52,52 +58,14 @@ function OpenChoiceCheckboxAnswerOptionFields(props: OpenChoiceCheckboxAnswerOpt
 
   return (
     <StyledFormGroup row={orientation === ChoiceItemOrientation.Horizontal}>
-      {qItem.answerOption?.map((option) => {
-        if (option['valueCoding']) {
-          return (
-            <CheckboxSingle
-              key={option.valueCoding.code ?? ''}
-              value={option.valueCoding.code ?? ''}
-              label={option.valueCoding.display ?? `${option.valueCoding.code}`}
-              readOnly={readOnly}
-              isChecked={answers.some(
-                (answer) => JSON.stringify(answer) === JSON.stringify(option)
-              )}
-              onCheckedChange={(changedValue) => onValueChange(changedValue, null)}
-            />
-          );
-        }
-
-        if (option['valueString']) {
-          return (
-            <CheckboxSingle
-              key={option.valueString}
-              value={option.valueString}
-              label={option.valueString}
-              readOnly={readOnly}
-              isChecked={answers.some((answer) => answer.valueString === option.valueString)}
-              onCheckedChange={(changedValue) => onValueChange(changedValue, null)}
-            />
-          );
-        }
-
-        if (option['valueInteger']) {
-          return (
-            <CheckboxSingle
-              key={option.valueInteger}
-              value={option.valueInteger.toString()}
-              label={option.valueInteger.toString()}
-              readOnly={readOnly}
-              isChecked={answers.some((answer) => answer.valueInteger === option.valueInteger)}
-              onCheckedChange={(changedValue) => onValueChange(changedValue, null)}
-            />
-          );
-        }
-
-        return null;
-      })}
+      <CheckboxOptionList
+        options={options}
+        answers={answers}
+        readOnly={readOnly}
+        onCheckedChange={onOptionChange}
+      />
 
-      {openLabelText ? (
+      {openLabelText !== null ? (
         <CheckboxSingleWithOpenLabel
           value={openLabelValue}
           label={openLabelText}