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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "1.0.0-alpha.99",
+  "version": "1.1.0",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {
@@ -9,7 +9,7 @@
     "build": "npm run compile",
     "test": "TZ=Australia/Sydney jest --config ./jest.config.ts --coverage",
     "test:watch": "jest --watch",
-    "test-storybook-ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"storybook dev --quiet -p 6006\" \"npx wait-on tcp:127.0.0.1:6006 && test-storybook \"",
+    "test-storybook-ci": "CI=true concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"storybook dev --quiet -p 6006\" \"npx wait-on tcp:127.0.0.1:6006 && test-storybook \"",
     "storybook": "storybook dev -p 6006",
     "storybook-watch": "concurrently -n \"STORYBOOK,TSC\" -c \"cyan.bold,green.bold\" \"storybook dev -p 6006\" \"tsc -w\"",
     "build-storybook": "storybook build",
@@ -29,18 +29,17 @@
   "homepage": "https://github.com/aehrc/smart-forms#readme",
   "dependencies": {
     "@aehrc/sdc-populate": "^4.6.2",
-    "@aehrc/testing-toolkit": "^1.0.0",
+    "@aehrc/sdc-template-extract": "^1.0.13",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@fontsource/inter": "^5.2.6",
+    "@fontsource/inter": "^5.2.8",
     "@fontsource/material-icons": "^5.2.5",
-    "@fontsource/roboto": "^5.2.6",
+    "@fontsource/roboto": "^5.2.8",
     "@mui/icons-material": "^7.1.1",
     "@mui/lab": "^7.0.0-beta.13",
     "@mui/material": "^7.1.1",
     "@mui/x-date-pickers": "^7.28.3",
-    "@tanstack/react-query": "^5.83.0",
-    "@testing-library/react": "^16.3.0",
+    "@tanstack/react-query": "^5.90.2",
     "dayjs": "^1.11.18",
     "deep-diff": "^1.0.2",
     "fast-equals": "^5.2.2",
@@ -60,7 +59,7 @@
     "react-markdown": "^8.0.7",
     "style-to-js": "^1.1.16",
     "usehooks-ts": "^3.1.1",
-    "zustand": "^5.0.7"
+    "zustand": "^5.0.8"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -68,14 +67,15 @@
   },
   "devDependencies": {
     "@babel/core": "^7.27.4",
-    "@chromatic-com/storybook": "^4.0.1",
-    "@storybook/addon-docs": "^9.0.16",
-    "@storybook/addon-links": "^9.1.3",
-    "@storybook/addon-onboarding": "^9.1.0",
-    "@storybook/addon-themes": "^9.0.17",
-    "@storybook/react-vite": "^9.0.16",
+    "@chromatic-com/storybook": "^4.1.1",
+    "@storybook/addon-docs": "^9.1.13",
+    "@storybook/addon-links": "^9.1.13",
+    "@storybook/addon-onboarding": "^9.1.13",
+    "@storybook/addon-themes": "^9.1.13",
+    "@storybook/react-vite": "^9.1.13",
     "@storybook/test-runner": "^0.23.0",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
     "@types/deep-diff": "^1.0.5",
     "@types/fhir": "^0.0.41",
     "@types/jest": "^29.5.14",
@@ -87,14 +87,14 @@
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^19.1.1",
     "chokidar": "^4.0.3",
-    "concurrently": "^9.2.0",
-    "eslint-plugin-storybook": "9.1.3",
+    "concurrently": "^9.2.1",
+    "eslint-plugin-storybook": "9.1.13",
     "jest": "^29.7.0",
-    "jest-environment-jsdom": "^30.0.0",
-    "storybook": "^9.0.16",
-    "ts-jest": "^29.4.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "storybook": "^9.1.13",
+    "ts-jest": "^29.4.2",
     "tslib": "^2.8.1",
     "tsup": "^8.5.0",
-    "typescript": "^5.8.3"
+    "typescript": "^5.9.3"
   }
 }

package/src/components/ExpressionUpdateFadingGlow.styles.ts

@@ -11,14 +11,14 @@ import { alpha } from '@mui/material/styles';
  *
  * Example usage with a single style object:
  * ```tsx
- * <TextField sx={glowEffect(expressionUpdated)} />
+ * <TextField sx={glowEffect(fadeIn)} />
  * ```
  *
  * Example usage combining with other styles using array syntax:
  * ```tsx
  * <Autocomplete
  *   sx={[
- *     glowEffect(expressionUpdated),
+ *     glowEffect(fadeIn),
  *     {
  *       maxWidth: 300,
  *       minWidth: 160,
@@ -34,7 +34,7 @@ import { alpha } from '@mui/material/styles';
  */
 export const expressionUpdateFadingGlow = (fadeIn: boolean) => (theme: Theme) => ({
   '& .MuiInputBase-root': {
-    transition: 'all .4s',
+    transition: 'all 1s ease',
     ...(fadeIn && {
       boxShadow: `0 0 8px ${alpha(theme.palette.success.main, 0.5)}`,
       backgroundColor: alpha(theme.palette.success.main, 0.05),

package/src/components/FormComponents/AttachmentItem/AttachmentField.tsx

@@ -16,7 +16,7 @@
  */
 
 import React from 'react';
-import type { PropsWithIsTabledRequiredAttribute } from '../../../interfaces/renderProps.interface';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
 import { StandardTextField } from '../Textfield.styles';
 import AttachmentFileCollector from './AttachmentFileCollector';
 import Typography from '@mui/material/Typography';
@@ -24,12 +24,12 @@ import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import type { AttachmentValues } from './AttachmentItem';
 import AttachmentUrlField from './AttachmentUrlField';
-import { useRendererStylingStore } from '../../../stores';
+import { useRendererConfigStore } from '../../../stores';
 import { StyledRequiredTypography } from '../Item.styles';
 import InputAdornment from '@mui/material/InputAdornment';
 import { ClearButtonAdornment } from '../ItemParts/ClearButtonAdornment';
 
-interface AttachmentFieldProps extends PropsWithIsTabledRequiredAttribute {
+interface AttachmentFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
   itemType: string;
   attachmentValues: AttachmentValues;
@@ -53,8 +53,8 @@ function AttachmentField(props: AttachmentFieldProps) {
     onFileNameChange
   } = props;
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
-  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
+  const textFieldWidth = useRendererConfigStore.use.textFieldWidth();
 
   const readOnlyTextColor = readOnlyVisualStyle === 'disabled' ? 'text.disabled' : 'text.secondary';
 

package/src/components/FormComponents/AttachmentItem/AttachmentFieldWrapper.tsx

@@ -21,7 +21,7 @@ import { FullWidthFormComponentBox } from '../../Box.styles';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import type {
   PropsWithIsRepeatedAttribute,
-  PropsWithIsTabledRequiredAttribute
+  PropsWithIsTabledAttribute
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem } from 'fhir/r4';
 import type { AttachmentValues } from './AttachmentItem';
@@ -30,7 +30,7 @@ import ItemLabel from '../ItemParts/ItemLabel';
 
 interface AttachmentFieldWrapperProps
   extends PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledRequiredAttribute {
+    PropsWithIsTabledAttribute {
   qItem: QuestionnaireItem;
   attachmentValues: AttachmentValues;
   feedback: string;
@@ -75,6 +75,7 @@ function AttachmentFieldWrapper(props: AttachmentFieldWrapperProps) {
     <FullWidthFormComponentBox
       data-test="q-item-attachment-box"
       data-linkid={qItem.linkId}
+      data-label={qItem.text}
       onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid
         qItem={qItem}

package/src/components/FormComponents/AttachmentItem/AttachmentFileCollector.tsx

@@ -21,9 +21,9 @@ import { Box, IconButton, Stack, Tooltip } from '@mui/material';
 import AttachmentFileDropBox from './AttachmentFileDropBox';
 import AttachFileIcon from '@mui/icons-material/AttachFile';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
-import type { PropsWithIsTabledRequiredAttribute } from '../../../interfaces/renderProps.interface';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
 
-interface AttachmentFileCollectorProps extends PropsWithIsTabledRequiredAttribute {
+interface AttachmentFileCollectorProps extends PropsWithIsTabledAttribute {
   uploadedFile: File | null;
   readOnly: boolean;
   onUploadFile: (file: File | null) => void;

package/src/components/FormComponents/AttachmentItem/AttachmentFileDropBox.tsx

@@ -19,11 +19,11 @@ import { Box, Typography } from '@mui/material';
 import useFileDrop from '../../../hooks/UseFileDrop';
 import { AttachmentFileDropBoxWrapper } from './AttachmentFileDropBox.styles';
 import React from 'react';
-import type { PropsWithIsTabledRequiredAttribute } from '../../../interfaces/renderProps.interface';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
 import { getFileSize } from '../../../utils/fileUtils';
-import { useRendererStylingStore } from '../../../stores';
+import { useRendererConfigStore } from '../../../stores';
 
-export interface AttachmentFileDropBoxProps extends PropsWithIsTabledRequiredAttribute {
+export interface AttachmentFileDropBoxProps extends PropsWithIsTabledAttribute {
   file: File | null;
   onDrop: (item: { files: any[] }) => void;
   errorMessage: string;
@@ -33,8 +33,8 @@ export interface AttachmentFileDropBoxProps extends PropsWithIsTabledRequiredAtt
 function AttachmentFileDropBox(props: AttachmentFileDropBoxProps) {
   const { file, onDrop, errorMessage, readOnly, isTabled } = props;
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
-  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
+  const textFieldWidth = useRendererConfigStore.use.textFieldWidth();
 
   const readOnlyTextColor = readOnlyVisualStyle === 'disabled' ? 'text.disabled' : 'text.secondary';
 

package/src/components/FormComponents/AttachmentItem/AttachmentUrlField.tsx

@@ -16,7 +16,7 @@
  */
 
 import React from 'react';
-import type { PropsWithIsTabledRequiredAttribute } from '../../../interfaces/renderProps.interface';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
 import { StandardTextField } from '../Textfield.styles';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
@@ -25,10 +25,10 @@ import useAttachmentUrlValidation from '../../../hooks/useAttachmentUrlValidatio
 import InputAdornment from '@mui/material/InputAdornment';
 import CheckIcon from '@mui/icons-material/Check';
 import DangerousIcon from '@mui/icons-material/Dangerous';
-import { useRendererStylingStore } from '../../../stores';
+import { useRendererConfigStore } from '../../../stores';
 import { ClearButtonAdornment } from '../ItemParts/ClearButtonAdornment';
 
-interface AttachmentUrlFieldProps extends PropsWithIsTabledRequiredAttribute {
+interface AttachmentUrlFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
   url: string;
   readOnly: boolean;
@@ -38,8 +38,8 @@ interface AttachmentUrlFieldProps extends PropsWithIsTabledRequiredAttribute {
 function AttachmentUrlField(props: AttachmentUrlFieldProps) {
   const { linkId, url, readOnly, isTabled, onUrlChange } = props;
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
-  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
+  const textFieldWidth = useRendererConfigStore.use.textFieldWidth();
 
   const urlIsValid = useAttachmentUrlValidation(url);
 

package/src/components/FormComponents/BooleanItem/BooleanField.tsx

@@ -27,7 +27,7 @@ import ExpressionUpdateFadingIcon from '../ItemParts/ExpressionUpdateFadingIcon'
 import FormControlLabel from '@mui/material/FormControlLabel';
 import { isSpecificItemControl } from '../../../utils';
 import ClearInputButton from '../ItemParts/ClearInputButton';
-import { useRendererStylingStore } from '../../../stores';
+import { useRendererConfigStore } from '../../../stores';
 import { StandardCheckbox } from '../../Checkbox.styles';
 import { ariaCheckedMap } from '../../../utils/checkbox';
 import { SrOnly } from '../SrOnly.styles';
@@ -46,9 +46,9 @@ const BooleanField = memo(function BooleanField(props: BooleanFieldProps) {
   const { qItem, readOnly, valueBoolean, feedback, calcExpUpdated, onCheckedChange, onClear } =
     props;
 
-  const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
-  const inputsFlexGrow = useRendererStylingStore.use.inputsFlexGrow();
-  const reverseBooleanYesNo = useRendererStylingStore.use.reverseBooleanYesNo();
+  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
+  const inputsFlexGrow = useRendererConfigStore.use.inputsFlexGrow();
+  const reverseBooleanYesNo = useRendererConfigStore.use.reverseBooleanYesNo();
 
   const booleanAsCheckbox = isSpecificItemControl(qItem, 'check-box');
 

package/src/components/FormComponents/BooleanItem/BooleanItem.tsx

@@ -15,28 +15,26 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import Box from '@mui/material/Box';
+import useReadOnly from '../../../hooks/useReadOnly';
+import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
+import { useQuestionnaireStore } from '../../../stores';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
-import BooleanField from './BooleanField';
-import Box from '@mui/material/Box';
-import useReadOnly from '../../../hooks/useReadOnly';
-import { useQuestionnaireStore } from '../../../stores';
-import useBooleanCalculatedExpression from '../../../hooks/useBooleanCalculatedExpression';
-import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import ItemLabel from '../ItemParts/ItemLabel';
+import BooleanField from './BooleanField';
 
 function BooleanItem(props: BaseItemProps) {
   const {
     qItem,
     qrItem,
-    itemPath,
     isRepeated,
     isTabled,
     parentIsReadOnly,
     feedbackFromParent,
+    calcExpUpdated,
     onQrItemChange
   } = props;
 
@@ -54,24 +52,6 @@ function BooleanItem(props: BaseItemProps) {
     valueBoolean = qrItem.answer[0].valueBoolean;
   }
 
-  // Process calculated expressions
-  const { calcExpUpdated } = useBooleanCalculatedExpression({
-    qItem: qItem,
-    booleanValue: valueBoolean,
-    onChangeByCalcExpressionBoolean: (newValueBoolean: boolean) => {
-      onQrItemChange(
-        {
-          ...createEmptyQrItem(qItem, answerKey),
-          answer: [{ id: answerKey, valueBoolean: newValueBoolean }]
-        },
-        itemPath
-      );
-    },
-    onChangeByCalcExpressionNull: () => {
-      onQrItemChange(createEmptyQrItem(qItem, answerKey), itemPath);
-    }
-  });
-
   // Event handlers
   function handleValueChange(newValue: string) {
     switch (newValue) {
@@ -131,6 +111,7 @@ function BooleanItem(props: BaseItemProps) {
     <FullWidthFormComponentBox
       data-test="q-item-boolean-box"
       data-linkid={qItem.linkId}
+      data-label={qItem.text}
       onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid
         qItem={qItem}

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

@@ -29,16 +29,16 @@ import WarningAmberIcon from '@mui/icons-material/WarningAmber';
 import DoneIcon from '@mui/icons-material/Done';
 import ErrorIcon from '@mui/icons-material/Error';
 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 ChoiceAutocompleteFieldsProps
-  extends PropsWithIsTabledRequiredAttribute,
+  extends PropsWithIsTabledAttribute,
     PropsWithParentIsReadOnlyAttribute,
     PropsWithRenderingExtensionsAttribute {
   qItem: QuestionnaireItem;
@@ -65,8 +65,8 @@ function ChoiceAutocompleteField(props: ChoiceAutocompleteFieldsProps) {
     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;
 
@@ -76,7 +76,7 @@ function ChoiceAutocompleteField(props: ChoiceAutocompleteFieldsProps) {
       value={valueCoding ?? null}
       options={options}
       getOptionLabel={(option) => option.display ?? `${option.code}`}
-      isOptionEqualToValue={(option, value) => option.id === value.id}
+      isOptionEqualToValue={(option, value) => option.code === value.code}
       disabled={readOnly && readOnlyVisualStyle === 'disabled'}
       readOnly={readOnly && readOnlyVisualStyle === 'readonly'}
       loading={loading}

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

@@ -15,44 +15,24 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react';
-import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import type { Coding } from 'fhir/r4';
+import { useState } from 'react';
 
-import { createEmptyQrItem } from '../../../utils/qrItem';
-import { FullWidthFormComponentBox } from '../../Box.styles';
+import type { AlertColor } from '@mui/material/Alert';
 import useDebounce from '../../../hooks/useDebounce';
+import useReadOnly from '../../../hooks/useReadOnly';
 import useTerminologyServerQuery from '../../../hooks/useTerminologyServerQuery';
-import type {
-  PropsWithFeedbackFromParentAttribute,
-  PropsWithIsRepeatedAttribute,
-  PropsWithIsTabledRequiredAttribute,
-  PropsWithItemPathAttribute,
-  PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler,
-  PropsWithRenderingExtensionsAttribute
-} from '../../../interfaces/renderProps.interface';
+import useValidationFeedback from '../../../hooks/useValidationFeedback';
+import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
+import { useQuestionnaireStore } from '../../../stores';
 import { AUTOCOMPLETE_DEBOUNCE_DURATION } from '../../../utils/debounce';
-import useReadOnly from '../../../hooks/useReadOnly';
-import ChoiceAutocompleteField from './ChoiceAutocompleteField';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { FullWidthFormComponentBox } from '../../Box.styles';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
-import { useQuestionnaireStore } from '../../../stores';
-import useValidationFeedback from '../../../hooks/useValidationFeedback';
-import type { AlertColor } from '@mui/material/Alert';
 import ItemLabel from '../ItemParts/ItemLabel';
+import ChoiceAutocompleteField from './ChoiceAutocompleteField';
 
-interface ChoiceAutocompleteItemProps
-  extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
-    PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledRequiredAttribute,
-    PropsWithParentIsReadOnlyAttribute,
-    PropsWithRenderingExtensionsAttribute,
-    PropsWithFeedbackFromParentAttribute {
-  qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem | null;
-}
-
-function ChoiceAutocompleteItem(props: ChoiceAutocompleteItemProps) {
+function ChoiceAutocompleteItem(props: BaseItemProps) {
   const {
     qItem,
     qrItem,
@@ -63,6 +43,7 @@ function ChoiceAutocompleteItem(props: ChoiceAutocompleteItemProps) {
     feedbackFromParent,
     onQrItemChange
   } = props;
+  // TODO no calcExpUpdated
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
@@ -82,10 +63,6 @@ function ChoiceAutocompleteItem(props: ChoiceAutocompleteItemProps) {
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
-  // TODO Process calculated expressions
-  // This requires its own hook, because in the case of multi-select, we need to check if the value is already checked to prevent an infinite loop
-  // This will be done after the choice/open-choice refactoring
-
   // Perform validation checks
   const validationFeedback = useValidationFeedback(qItem, feedbackFromParent);
 
@@ -110,10 +87,12 @@ function ChoiceAutocompleteItem(props: ChoiceAutocompleteItemProps) {
   function handleValueChange(newValue: Coding | null) {
     if (newValue === null) {
       setInput('');
+      // For clearing selection, update immediately
       onQrItemChange(createEmptyQrItem(qItem, answerKey));
       return;
     }
 
+    // For option selection, update immediately (no debounce)
     onQrItemChange({
       ...createEmptyQrItem(qItem, answerKey),
       answer: [{ id: answerKey, valueCoding: newValue }]
@@ -141,6 +120,7 @@ function ChoiceAutocompleteItem(props: ChoiceAutocompleteItemProps) {
     <FullWidthFormComponentBox
       data-test="q-item-choice-autocomplete-box"
       data-linkid={qItem.linkId}
+      data-label={qItem.text}
       onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid
         qItem={qItem}

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

@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import type {
   QuestionnaireItem,
   QuestionnaireItemAnswerOption,

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

@@ -15,42 +15,20 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import { createEmptyQrItem } from '../../../utils/qrItem';
+import useAnswerOptionsToggleExpressions from '../../../hooks/useAnswerOptionsToggleExpressions';
+import useReadOnly from '../../../hooks/useReadOnly';
+import useValidationFeedback from '../../../hooks/useValidationFeedback';
+import type { BaseItemProps } from '../../../interfaces/renderProps.interface';
+import { useQuestionnaireStore } from '../../../stores';
 import { updateChoiceCheckboxAnswers } from '../../../utils/choice';
+import { createEmptyQrItem } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
-import type {
-  PropsWithFeedbackFromParentAttribute,
-  PropsWithIsRepeatedAttribute,
-  PropsWithIsTabledAttribute,
-  PropsWithItemPathAttribute,
-  PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler,
-  PropsWithRenderingExtensionsAttribute
-} from '../../../interfaces/renderProps.interface';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
-import useReadOnly from '../../../hooks/useReadOnly';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
-import { useQuestionnaireStore } from '../../../stores';
-import ChoiceCheckboxAnswerOptionFields from './ChoiceCheckboxAnswerOptionFields';
-import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import ItemLabel from '../ItemParts/ItemLabel';
-import useAnswerOptionsToggleExpressions from '../../../hooks/useAnswerOptionsToggleExpressions';
-
-interface ChoiceCheckboxAnswerOptionItemProps
-  extends PropsWithQrItemChangeHandler,
-    PropsWithItemPathAttribute,
-    PropsWithIsRepeatedAttribute,
-    PropsWithRenderingExtensionsAttribute,
-    PropsWithParentIsReadOnlyAttribute,
-    PropsWithFeedbackFromParentAttribute,
-    PropsWithIsTabledAttribute {
-  qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem | null;
-}
+import ChoiceCheckboxAnswerOptionFields from './ChoiceCheckboxAnswerOptionFields';
 
-function ChoiceCheckboxAnswerOptionItem(props: ChoiceCheckboxAnswerOptionItemProps) {
+function ChoiceCheckboxAnswerOptionItem(props: BaseItemProps) {
   const {
     qItem,
     qrItem,
@@ -59,6 +37,7 @@ function ChoiceCheckboxAnswerOptionItem(props: ChoiceCheckboxAnswerOptionItemPro
     renderingExtensions,
     parentIsReadOnly,
     feedbackFromParent,
+    calcExpUpdated,
     onQrItemChange
   } = props;
 
@@ -71,10 +50,6 @@ function ChoiceCheckboxAnswerOptionItem(props: ChoiceCheckboxAnswerOptionItemPro
 
   const { displayInstructions } = renderingExtensions;
 
-  // TODO Process calculated expressions
-  // This requires its own hook, because in the case of multi-select, we need to check if the value is already checked to prevent an infinite loop
-  // This will be done after the choice/open-choice refactoring
-
   // Process answerOptionsToggleExpressions
   const { answerOptionsToggleExpressionsMap, answerOptionsToggleExpUpdated } =
     useAnswerOptionsToggleExpressions(qItem.linkId);
@@ -120,7 +95,7 @@ function ChoiceCheckboxAnswerOptionItem(props: ChoiceCheckboxAnswerOptionItemPro
           answers={answers}
           feedback={feedback}
           readOnly={readOnly}
-          expressionUpdated={answerOptionsToggleExpUpdated}
+          expressionUpdated={calcExpUpdated || answerOptionsToggleExpUpdated}
           answerOptionsToggleExpressionsMap={answerOptionsToggleExpressionsMap}
           isTabled={isTabled}
           onCheckedChange={handleCheckedChange}
@@ -135,6 +110,7 @@ function ChoiceCheckboxAnswerOptionItem(props: ChoiceCheckboxAnswerOptionItemPro
     <FullWidthFormComponentBox
       data-test="q-item-choice-checkbox-answer-option-box"
       data-linkid={qItem.linkId}
+      data-label={qItem.text}
       onClick={() => onFocusLinkId(qItem.linkId)}>
       <ItemFieldGrid
         qItem={qItem}
@@ -147,7 +123,7 @@ function ChoiceCheckboxAnswerOptionItem(props: ChoiceCheckboxAnswerOptionItemPro
             answers={answers}
             feedback={feedback}
             readOnly={readOnly}
-            expressionUpdated={answerOptionsToggleExpUpdated}
+            expressionUpdated={calcExpUpdated || answerOptionsToggleExpUpdated}
             answerOptionsToggleExpressionsMap={answerOptionsToggleExpressionsMap}
             isTabled={isTabled}
             onCheckedChange={handleCheckedChange}

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

@@ -15,16 +15,15 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import Typography from '@mui/material/Typography';
 import type {
   QuestionnaireItem,
   QuestionnaireItemAnswerOption,
   QuestionnaireResponseItemAnswer
 } from 'fhir/r4';
-import { StyledAlert } from '../../Alert.styles';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
-import Typography from '@mui/material/Typography';
 import type { TerminologyError } from '../../../hooks/useValueSetCodings';
+import { StyledAlert } from '../../Alert.styles';
 import CheckboxFormGroup from '../ItemParts/CheckboxFormGroup';
 
 interface ChoiceCheckboxAnswerValueSetFieldsProps {