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

package/src/components/FormComponents/IntegerItem/IntegerItem.tsx

@@ -15,34 +15,32 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useState } from 'react';
-import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
-import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import debounce from 'lodash.debounce';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import { useCallback, useState } from 'react';
+import useReadOnly from '../../../hooks/useReadOnly';
+import useValidationFeedback from '../../../hooks/useValidationFeedback';
+import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
+import { useQuestionnaireStore } from '../../../stores';
 import { DEBOUNCE_DURATION } from '../../../utils/debounce';
-import { FullWidthFormComponentBox } from '../../Box.styles';
-import IntegerField from './IntegerField';
-import useIntegerCalculatedExpression from '../../../hooks/useIntegerCalculatedExpression';
 import { parseIntegerString } from '../../../utils/parseInputs';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { FullWidthFormComponentBox } from '../../Box.styles';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
-import useReadOnly from '../../../hooks/useReadOnly';
-import { useQuestionnaireStore } from '../../../stores';
 import ItemLabel from '../ItemParts/ItemLabel';
-import useShowFeedback from '../../../hooks/useShowFeedback';
 import { readIntegerValue } from '../../../utils/readValues';
 import type { QuestionnaireResponseItem } from 'fhir/r4';
+import IntegerField from './IntegerField';
 
 function IntegerItem(props: BaseItemProps) {
   const {
     qItem,
     qrItem,
-    itemPath,
     isRepeated,
     isTabled,
     renderingExtensions,
     parentIsReadOnly,
     feedbackFromParent,
+    calcExpUpdated,
     onQrItemChange
   } = props;
 
@@ -59,66 +57,30 @@ function IntegerItem(props: BaseItemProps) {
   // Perform validation checks
   const feedback = useValidationFeedback(qItem, feedbackFromParent);
 
-  // Provides a way to hide the feedback when the user is typing
-  const { showFeedback, setShowFeedback, hasBlurred, setHasBlurred } = useShowFeedback();
-
-  // Process calculated expressions
-  const { calcExpUpdated } = useIntegerCalculatedExpression({
-    qItem: qItem,
-    inputValue: input,
-    onChangeByCalcExpressionInteger: (newValueInteger: number) => {
-      setInput(newValueInteger.toString());
-      onQrItemChange(
-        {
-          ...createEmptyQrItem(qItem, answerKey),
-          answer: [{ id: answerKey, valueInteger: newValueInteger }]
-        },
-        itemPath
-      );
-    },
-    onChangeByCalcExpressionNull: () => {
-      setInput('');
-      onQrItemChange(createEmptyQrItem(qItem, answerKey), itemPath);
-    }
-  });
-
   // Event handlers
   function handleInputChange(newInput: string) {
     const parsedNewInput = parseIntegerString(newInput);
 
     setInput(parsedNewInput);
 
-    // Only suppress feedback once (before first blur)
-    if (!hasBlurred) {
-      setShowFeedback(false);
-    }
-
     updateQrItemWithDebounce(parsedNewInput);
   }
 
-  function handleBlur() {
-    setShowFeedback(true);
-    setHasBlurred(true); // From now on, feedback should stay visible
-  }
-
   function handleRepopulateSync(newQrItem: QuestionnaireResponseItem | null) {
     if (newQrItem && newQrItem?.answer) {
       const { valueInteger: newValueInteger, initialInput: newInput } = readIntegerValue(newQrItem);
 
       setInput(newInput);
-      onQrItemChange(
-        {
-          ...createEmptyQrItem(qItem, answerKey),
-          answer: [{ id: answerKey, valueInteger: newValueInteger }]
-        },
-        itemPath
-      );
+      onQrItemChange({
+        ...createEmptyQrItem(qItem, answerKey),
+        answer: [{ id: answerKey, valueInteger: newValueInteger }]
+      });
       return;
     }
 
     // At this point newQrItem is null, so create a QRItem to replace it
     setInput('');
-    onQrItemChange(createEmptyQrItem(qItem, answerKey), itemPath);
+    onQrItemChange(createEmptyQrItem(qItem, answerKey));
   }
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -141,14 +103,13 @@ function IntegerItem(props: BaseItemProps) {
       <IntegerField
         qItem={qItem}
         input={input}
-        feedback={showFeedback ? feedback : ''}
+        feedback={feedback ?? ''}
         renderingExtensions={renderingExtensions}
         readOnly={readOnly}
         calcExpUpdated={calcExpUpdated}
         isTabled={isTabled}
         onInputChange={handleInputChange}
         onRepopulateSync={handleRepopulateSync}
-        onBlur={handleBlur}
       />
     );
   }
@@ -157,6 +118,7 @@ function IntegerItem(props: BaseItemProps) {
     <FullWidthFormComponentBox
       data-test="q-item-integer-box"
       data-linkid={qItem.linkId}
+      data-label={qItem.text}
       onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid
         qItem={qItem}
@@ -166,17 +128,16 @@ function IntegerItem(props: BaseItemProps) {
           <IntegerField
             qItem={qItem}
             input={input}
-            feedback={showFeedback ? feedback : ''}
+            feedback={feedback ?? ''}
             renderingExtensions={renderingExtensions}
             readOnly={readOnly}
             calcExpUpdated={calcExpUpdated}
             isTabled={isTabled}
             onInputChange={handleInputChange}
             onRepopulateSync={handleRepopulateSync}
-            onBlur={handleBlur}
           />
         }
-        feedback={showFeedback ? feedback : undefined}
+        feedback={feedback ?? undefined}
       />
     </FullWidthFormComponentBox>
   );

package/src/components/FormComponents/ItemParts/CheckboxFormGroup.tsx

@@ -1,18 +1,18 @@
-import type { ReactNode } from 'react';
 import { Box } from '@mui/material';
 import FormGroup from '@mui/material/FormGroup';
-import { StyledRequiredTypography } from '../Item.styles';
-import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
-import ExpressionUpdateFadingIcon from './ExpressionUpdateFadingIcon';
-import ClearInputButton from './ClearInputButton';
 import type {
   QuestionnaireItem,
   QuestionnaireItemAnswerOption,
   QuestionnaireResponseItemAnswer
 } from 'fhir/r4';
-import { useRendererStylingStore } from '../../../stores';
+import type { ReactNode } from 'react';
+import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
+import { useRendererConfigStore } from '../../../stores';
 import { getChoiceOrientation } from '../../../utils/choice';
 import CheckboxOptionList from '../ChoiceItems/CheckboxOptionList';
+import { StyledRequiredTypography } from '../Item.styles';
+import ClearInputButton from './ClearInputButton';
+import ExpressionUpdateFadingIcon from './ExpressionUpdateFadingIcon';
 
 interface ChoiceCheckboxFormGroupProps {
   qItem: QuestionnaireItem;
@@ -43,8 +43,8 @@ function CheckboxFormGroup(props: ChoiceCheckboxFormGroupProps) {
     children
   } = props;
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
-  const inputsFlexGrow = useRendererStylingStore.use.inputsFlexGrow();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
+  const inputsFlexGrow = useRendererConfigStore.use.inputsFlexGrow();
 
   const orientation = getChoiceOrientation(qItem) ?? ChoiceItemOrientation.Vertical;
 

package/src/components/FormComponents/ItemParts/CheckboxSingle.tsx

@@ -18,7 +18,7 @@
 import React from 'react';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import { StandardCheckbox } from '../../Checkbox.styles';
-import { useRendererStylingStore } from '../../../stores';
+import { useRendererConfigStore } from '../../../stores';
 
 interface CheckboxSingleProps {
   value: string;
@@ -41,7 +41,7 @@ function CheckboxSingle(props: CheckboxSingleProps) {
     onCheckedChange
   } = props;
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
 
   // When an option is disabled via toggle expression, it should truly be "disabled", regardless of readOnlyVisualStyle.
   // Both isDisabled and isReadOnly are mutually exclusive.

package/src/components/FormComponents/ItemParts/CheckboxSingleWithOpenLabel.tsx

@@ -19,7 +19,7 @@ import type { ChangeEvent } from 'react';
 import React from 'react';
 import Box from '@mui/material/Box';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import { useRendererStylingStore } from '../../../stores';
+import { useRendererConfigStore } from '../../../stores';
 import { StandardCheckbox } from '../../Checkbox.styles';
 import OpenLabelField from './OpenLabelField';
 
@@ -35,7 +35,7 @@ interface Props {
 function CheckboxSingleWithOpenLabel(props: Props) {
   const { value, label, isChecked, readOnly, onCheckedChange, onInputChange } = props;
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
 
   // When an option is disabled via toggle expression, it should truly be "disabled", regardless of readOnlyVisualStyle.
   // Both isDisabled and isReadOnly are mutually exclusive.

package/src/components/FormComponents/ItemParts/ClearInputButton.tsx

@@ -19,8 +19,7 @@ import React from 'react';
 import Tooltip from '@mui/material/Tooltip';
 import Button from '@mui/material/Button';
 import { grey } from '@mui/material/colors';
-import Fade from '@mui/material/Fade';
-import { useRendererStylingStore } from '../../../stores';
+import { useRendererConfigStore } from '../../../stores';
 
 interface ClearInputButtonProps {
   buttonShown: boolean;
@@ -31,27 +30,29 @@ interface ClearInputButtonProps {
 function ClearInputButton(props: ClearInputButtonProps) {
   const { buttonShown, readOnly, onClear } = props;
 
-  const hideClearButton = useRendererStylingStore.use.hideClearButton();
+  const hideClearButton = useRendererConfigStore.use.hideClearButton();
 
   // If "hideClearButton" config is true OR if item.readOnly is true, do not render button
   if (hideClearButton || readOnly) {
     return null;
   }
 
+  if (!buttonShown) {
+    return;
+  }
+
   return (
-    <Fade in={buttonShown} timeout={100}>
-      <Tooltip role="button" title="Clear">
-        <Button
-          aria-label="Clear"
-          sx={{
-            color: grey['500'],
-            '&:hover': { backgroundColor: grey['200'] }
-          }}
-          onClick={onClear}>
-          Clear
-        </Button>
-      </Tooltip>
-    </Fade>
+    <Tooltip role="button" title="Clear">
+      <Button
+        aria-label="Clear"
+        sx={{
+          color: grey['500'],
+          '&:hover': { backgroundColor: grey['200'] }
+        }}
+        onClick={onClear}>
+        Clear
+      </Button>
+    </Tooltip>
   );
 }
 

package/src/components/FormComponents/ItemParts/DisplayUnitText.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Typography from '@mui/material/Typography';
-import { useRendererStylingStore } from '../../../stores';
+import { useRendererConfigStore } from '../../../stores';
 
 interface DisplayUnitTextProps {
   readOnly: boolean;
@@ -10,7 +10,7 @@ interface DisplayUnitTextProps {
 function DisplayUnitText(props: DisplayUnitTextProps) {
   const { readOnly, children } = props;
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
 
   const readOnlyTextColor = readOnlyVisualStyle === 'disabled' ? 'text.disabled' : 'text.secondary';
 

package/src/components/FormComponents/ItemParts/ItemFieldGrid.tsx

@@ -19,7 +19,7 @@ import type { ReactNode } from 'react';
 import React from 'react';
 import type { QuestionnaireItem } from 'fhir/r4';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
-import { useRendererStylingStore } from '../../../stores';
+import { useRendererConfigStore } from '../../../stores';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import Grid from '@mui/material/Grid';
 
@@ -36,7 +36,7 @@ interface ItemFieldGridProps {
 function ItemFieldGrid(props: ItemFieldGridProps) {
   const { qItem, readOnly, labelChildren, fieldChildren } = props;
 
-  const itemResponsive = useRendererStylingStore.use.itemResponsive();
+  const itemResponsive = useRendererConfigStore.use.itemResponsive();
   const { labelBreakpoints, fieldBreakpoints, columnGapPixels, rowGapPixels } = itemResponsive;
 
   const { displayInstructions } = useRenderingExtensions(qItem);

package/src/components/FormComponents/ItemParts/ItemLabel.tsx

@@ -18,7 +18,7 @@
 import React, { memo } from 'react';
 import type { QuestionnaireItem } from 'fhir/r4';
 import Box from '@mui/material/Box';
-import { useRendererStylingStore } from '../../../stores/rendererStylingStore';
+import { useRendererConfigStore } from '../../../stores/rendererConfigStore';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import RequiredAsterisk from './RequiredAsterisk';
 import { getContextDisplays } from '../../../utils/tabs';
@@ -39,8 +39,8 @@ interface ItemLabelProps extends PropsWithParentStylesAttribute {
 const ItemLabel = memo(function ItemLabel(props: ItemLabelProps) {
   const { qItem, readOnly, isDisplayItem, parentStyles } = props;
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
-  const requiredIndicatorPosition = useRendererStylingStore.use.requiredIndicatorPosition();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
+  const requiredIndicatorPosition = useRendererConfigStore.use.requiredIndicatorPosition();
 
   const { required, displayFlyover } = useRenderingExtensions(qItem);
   const contextDisplayItems = getContextDisplays(qItem);
@@ -77,9 +77,6 @@ const ItemLabel = memo(function ItemLabel(props: ItemLabelProps) {
           id={'label-' + qItem.linkId}
           component={component}
           variant={variant}
-          // TODO: Delete this section later after testing.
-          // based on the qItem type if it is choice, or open-choice, boolean  then don't display the htmlFor
-          // htmlFor={qItem.type === 'choice' || qItem.type === 'open-choice' || qItem.type === 'boolean' ? undefined : qItem.type + '-' + qItem.linkId}
           htmlFor={qItem.type + '-' + qItem.linkId}
           color={textColor}
           sx={{

package/src/components/FormComponents/ItemParts/ItemRepopulateButton.tsx

@@ -53,8 +53,6 @@ function ItemRepopulateButton(props: ItemRepopulateButtonProps) {
 
   const sourceQuestionnaire = useQuestionnaireStore.use.sourceQuestionnaire();
 
-  const setPopulatedContext = useQuestionnaireStore.use.setPopulatedContext();
-
   const [repopulationState, setRepopulationState] = useState<RepopulationState>('idle');
 
   // On success, set state to successful and set back to idle after 5 seconds
@@ -102,12 +100,7 @@ function ItemRepopulateButton(props: ItemRepopulateButtonProps) {
     }
 
     setRepopulationState('success');
-    const { populatedResponse, populatedContext } = populateResult;
-
-    // TODO eventually we want to deprecate this in 1.0.0, populatedContext is now passed to buildFormWrapper and is automatically added to the FhirPathContext
-    if (populatedContext) {
-      setPopulatedContext(populatedContext, true);
-    }
+    const { populatedResponse } = populateResult;
 
     const newQuestionnaireResponseItem = getQuestionnaireResponseItem(
       populatedResponse,

package/src/components/FormComponents/ItemParts/ItemTextSwitcher.tsx

@@ -14,22 +14,27 @@ const ItemTextSwitcher = memo(function ItemTextSwitcher({ qItem }: ItemTextSwitc
   let itemTextToDisplay = getItemTextToDisplay(qItem);
 
   // Use calculatedExpressionString if available
-  const calculatedExpressionString = useDisplayCqfAndCalculatedExpression(qItem) ?? '';
+  const calculatedExpressionString =
+    useDisplayCqfAndCalculatedExpression(qItem, 'item._text') ?? '';
   if (calculatedExpressionString) {
     itemTextToDisplay = calculatedExpressionString;
   }
 
+  // Get aria-label text if available
+  const itemTextAriaLabel =
+    useDisplayCqfAndCalculatedExpression(qItem, 'item._text.aria-label') ?? undefined;
+
   // parse XHTML if found
   const parsedXhtml = useParseXhtml(qItem);
   if (parsedXhtml) {
-    return <span>{parsedXhtml.content}</span>;
+    return <span aria-label={itemTextAriaLabel}>{parsedXhtml.content}</span>;
   }
 
   // parse markdown if found
   const markdownString = getMarkdownString(qItem);
   if (markdownString) {
     return (
-      <span>
+      <span aria-label={itemTextAriaLabel}>
         <ReactMarkdown>{markdownString}</ReactMarkdown>
       </span>
     );
@@ -41,7 +46,7 @@ const ItemTextSwitcher = memo(function ItemTextSwitcher({ qItem }: ItemTextSwitc
   }
 
   // parse regular text
-  return <span>{itemTextToDisplay}</span>;
+  return <span aria-label={itemTextAriaLabel}>{itemTextToDisplay}</span>;
 });
 
 export default ItemTextSwitcher;

package/src/components/FormComponents/ItemParts/OpenLabelField.tsx

@@ -1,6 +1,6 @@
 import React, { type ChangeEvent } from 'react';
 import { StandardTextField } from '../Textfield.styles';
-import { useRendererStylingStore } from '../../../stores';
+import { useRendererConfigStore } from '../../../stores';
 import InputAdornment from '@mui/material/InputAdornment';
 import { ClearButtonAdornment } from './ClearButtonAdornment';
 
@@ -15,8 +15,8 @@ interface OpenLabelFieldProps {
 function OpenLabelField(props: OpenLabelFieldProps) {
   const { value, readOnly, openLabelOptionSelected, label, onInputChange } = props;
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
-  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
+  const textFieldWidth = useRendererConfigStore.use.textFieldWidth();
 
   const fieldReadOnly = !openLabelOptionSelected || readOnly;
 

package/src/components/FormComponents/ItemParts/RadioFormGroup.tsx

@@ -1,14 +1,14 @@
-import type { ReactNode } from 'react';
 import Box from '@mui/material/Box';
 import RadioGroup from '@mui/material/RadioGroup';
-import { StyledRequiredTypography } from '../Item.styles';
-import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
-import RadioOptionList from './RadioOptionList';
-import ExpressionUpdateFadingIcon from './ExpressionUpdateFadingIcon';
-import ClearInputButton from './ClearInputButton';
 import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
-import { useRendererStylingStore } from '../../../stores';
+import type { ReactNode } from 'react';
+import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
+import { useRendererConfigStore } from '../../../stores';
 import { getChoiceOrientation } from '../../../utils/choice';
+import { StyledRequiredTypography } from '../Item.styles';
+import ClearInputButton from './ClearInputButton';
+import ExpressionUpdateFadingIcon from './ExpressionUpdateFadingIcon';
+import RadioOptionList from './RadioOptionList';
 
 interface ChoiceRadioGroupProps {
   qItem: QuestionnaireItem;
@@ -39,8 +39,8 @@ function RadioFormGroup(props: ChoiceRadioGroupProps) {
     children
   } = props;
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
-  const inputsFlexGrow = useRendererStylingStore.use.inputsFlexGrow();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
+  const inputsFlexGrow = useRendererConfigStore.use.inputsFlexGrow();
 
   const orientation = getChoiceOrientation(qItem) ?? ChoiceItemOrientation.Vertical;
 

package/src/components/FormComponents/ItemParts/RequiredAsterisk.tsx

@@ -18,7 +18,7 @@
 import React from 'react';
 import type { TypographyProps } from '@mui/material/Typography';
 import Typography from '@mui/material/Typography';
-import { useRendererStylingStore } from '../../../stores';
+import { useRendererConfigStore } from '../../../stores';
 
 interface RequiredAsteriskProps extends TypographyProps {
   readOnly?: boolean;
@@ -27,12 +27,12 @@ interface RequiredAsteriskProps extends TypographyProps {
 function RequiredAsterisk(props: RequiredAsteriskProps) {
   const { readOnly, children = '*', ...rest } = props;
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
 
   const readOnlyTextColor = readOnlyVisualStyle === 'disabled' ? 'text.disabled' : 'text.secondary';
 
   return (
-    <Typography component="span" color={readOnly ? readOnlyTextColor : 'red'} {...rest}>
+    <Typography component="span" color={readOnly ? readOnlyTextColor : 'error'} {...rest}>
       {children}
     </Typography>
   );

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

@@ -30,16 +30,16 @@ import DoneIcon from '@mui/icons-material/Done';
 import ErrorIcon from '@mui/icons-material/Error';
 import type { Coding, QuestionnaireItem } from 'fhir/r4';
 import type {
-  PropsWithIsTabledRequiredAttribute,
+  PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithRenderingExtensionsAttribute
 } from '../../../interfaces/renderProps.interface';
 import type { AlertColor } from '@mui/material/Alert';
-import { useRendererStylingStore } from '../../../stores';
+import { useRendererConfigStore } from '../../../stores';
 import DisplayUnitText from '../ItemParts/DisplayUnitText';
 
 interface OpenChoiceAutocompleteFieldProps
-  extends PropsWithIsTabledRequiredAttribute,
+  extends PropsWithIsTabledAttribute,
     PropsWithParentIsReadOnlyAttribute,
     PropsWithRenderingExtensionsAttribute {
   qItem: QuestionnaireItem;
@@ -69,8 +69,8 @@ function OpenChoiceAutocompleteField(props: OpenChoiceAutocompleteFieldProps) {
     onValueChange
   } = props;
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
-  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
+  const textFieldWidth = useRendererConfigStore.use.textFieldWidth();
 
   const { displayUnit, displayPrompt, entryFormat } = renderingExtensions;