@aehrc/smart-forms-renderer 0.34.0 → 0.34.1

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

@@ -17,7 +17,11 @@
 
 import React from 'react';
 
-import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import type {
+  QuestionnaireItem,
+  QuestionnaireItemAnswerOption,
+  QuestionnaireResponseItem
+} from 'fhir/r4';
 import { findInAnswerOptions, getQrChoiceValue } from '../../../utils/choice';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import type {
@@ -66,23 +70,28 @@ function ChoiceSelectAnswerOptionItem(props: ChoiceSelectAnswerOptionItemProps)
     }
   });
 
-  // Event handlers
-  function handleChange(newValue: string) {
-    if (options.length === 0) {
+  function handleChange(newValue: QuestionnaireItemAnswerOption | string | null) {
+    // No options present or newValue is type null
+    if (options.length === 0 || newValue === null) {
       onQrItemChange(createEmptyQrItem(qItem));
       return;
     }
 
-    const qrAnswer = findInAnswerOptions(options, newValue);
+    // newValue is type string
+    if (typeof newValue === 'string') {
+      const qrAnswer = findInAnswerOptions(options, newValue);
+      onQrItemChange(
+        qrAnswer ? { ...createEmptyQrItem(qItem), answer: [qrAnswer] } : createEmptyQrItem(qItem)
+      );
+      return;
+    }
+
+    // newValue is type QuestionnaireItemAnswerOption
     onQrItemChange(
-      qrAnswer ? { ...createEmptyQrItem(qItem), answer: [qrAnswer] } : createEmptyQrItem(qItem)
+      newValue ? { ...createEmptyQrItem(qItem), answer: [newValue] } : createEmptyQrItem(qItem)
     );
   }
 
-  function handleClear() {
-    onQrItemChange(createEmptyQrItem(qItem));
-  }
-
   return (
     <ChoiceSelectAnswerOptionView
       qItem={qItem}
@@ -94,7 +103,6 @@ function ChoiceSelectAnswerOptionItem(props: ChoiceSelectAnswerOptionItemProps)
       isTabled={isTabled}
       onFocusLinkId={() => onFocusLinkId(qItem.linkId)}
       onSelectChange={handleChange}
-      onClear={handleClear}
     />
   );
 }

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import type {
@@ -23,6 +23,7 @@ import type {
   PropsWithIsTabledAttribute
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
+import { findInAnswerOptions } from '../../../utils/choice';
 import ChoiceSelectAnswerOptionFields from './ChoiceSelectAnswerOptionFields';
 
 interface ChoiceSelectAnswerOptionViewProps
@@ -33,9 +34,8 @@ interface ChoiceSelectAnswerOptionViewProps
   valueChoice: string | null;
   readOnly: boolean;
   calcExpUpdated: boolean;
-  onSelectChange: (linkId: string) => void;
+  onSelectChange: (newValue: QuestionnaireItemAnswerOption | null) => void;
   onFocusLinkId: () => void;
-  onClear: () => void;
 }
 
 function ChoiceSelectAnswerOptionView(props: ChoiceSelectAnswerOptionViewProps) {
@@ -48,16 +48,20 @@ function ChoiceSelectAnswerOptionView(props: ChoiceSelectAnswerOptionViewProps)
     readOnly,
     calcExpUpdated,
     onFocusLinkId,
-    onSelectChange,
-    onClear
+    onSelectChange
   } = props;
 
+  const valueSelect: QuestionnaireItemAnswerOption | null = useMemo(
+    () => findInAnswerOptions(options, valueChoice ?? '') ?? null,
+    [options, valueChoice]
+  );
+
   if (isRepeated) {
     return (
       <ChoiceSelectAnswerOptionFields
         qItem={qItem}
         options={options}
-        valueSelect={valueChoice ?? ''}
+        valueSelect={valueSelect}
         readOnly={readOnly}
         calcExpUpdated={calcExpUpdated}
         isTabled={isTabled}
@@ -75,7 +79,7 @@ function ChoiceSelectAnswerOptionView(props: ChoiceSelectAnswerOptionViewProps)
         <ChoiceSelectAnswerOptionFields
           qItem={qItem}
           options={options}
-          valueSelect={valueChoice ?? ''}
+          valueSelect={valueSelect}
           readOnly={readOnly}
           calcExpUpdated={calcExpUpdated}
           isTabled={isTabled}

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

@@ -101,7 +101,7 @@ function GroupItemSwitcher(props: GroupItemSwitcherProps) {
       <GridGroup
         qItem={qItem}
         qrItem={qrItem ?? null}
-        groupCardElevation={groupCardElevation + 1}
+        groupCardElevation={groupCardElevation}
         parentIsReadOnly={parentIsReadOnly}
         onQrItemChange={onQrItemChange}
       />

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

@@ -24,7 +24,7 @@ import type {
   PropsWithParentIsRepeatGroupAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
-import { PropsWithQrRepeatGroupChangeHandler } from '../../../interfaces/renderProps.interface';
+import type { PropsWithQrRepeatGroupChangeHandler } from '../../../interfaces/renderProps.interface';
 import type { Tabs } from '../../../interfaces/tab.interface';
 import GroupHeading from './GroupHeading';
 import { GroupCard } from './GroupItem.styles';

package/src/stories/assets/questionnaires/QGroupTableTester.ts

@@ -0,0 +1,461 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Questionnaire } from 'fhir/r4';
+
+export const qGTableWithBoolean: Questionnaire = {
+  resourceType: 'Questionnaire',
+  id: 'GTableWithBoolean',
+  name: 'GTableWithBoolean',
+  title: 'GTable with Boolean',
+  version: '0.1.0',
+  status: 'draft',
+  publisher: 'AEHRC CSIRO',
+  date: '2024-05-01',
+  url: 'https://smartforms.csiro.au/docs/tester/gtable-1',
+  contained: [
+    {
+      resourceType: 'ValueSet',
+      id: 'MedicalHistory',
+      url: 'https://smartforms.csiro.au/ig/ValueSet/MedicalHistory',
+      name: 'MedicalHistory',
+      title: 'Medical History',
+      status: 'draft',
+      experimental: false,
+      description:
+        'The Medical History value set includes values that may be used to represent medical history, operations and hospital admissions.',
+      compose: {
+        include: [
+          {
+            system: 'http://snomed.info/sct',
+            filter: [
+              {
+                property: 'constraint',
+                op: '=',
+                value:
+                  '^32570581000036105|Problem/Diagnosis reference set| OR ^32570141000036105|Procedure foundation reference set|'
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      resourceType: 'ValueSet',
+      id: 'condition-clinical',
+      extension: [
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/structuredefinition-wg',
+          valueCode: 'pc'
+        },
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/structuredefinition-standards-status',
+          valueCode: 'trial-use'
+        },
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/structuredefinition-fmm',
+          valueInteger: 3
+        }
+      ],
+      url: 'http://hl7.org/fhir/ValueSet/condition-clinical',
+      identifier: [
+        {
+          system: 'urn:ietf:rfc:3986',
+          value: 'urn:oid:2.16.840.1.113883.4.642.3.164'
+        }
+      ],
+      version: '4.0.1',
+      name: 'ConditionClinicalStatusCodes',
+      title: 'Condition Clinical Status Codes',
+      status: 'draft',
+      experimental: false,
+      publisher: 'FHIR Project team',
+      contact: [
+        {
+          telecom: [
+            {
+              system: 'url',
+              value: 'http://hl7.org/fhir'
+            }
+          ]
+        }
+      ],
+      description: 'Preferred value set for Condition Clinical Status.',
+      copyright: 'Copyright © 2011+ HL7. Licensed under Creative Commons "No Rights Reserved".',
+      compose: {
+        include: [
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/condition-clinical'
+          }
+        ]
+      },
+      expansion: {
+        identifier: 'urn:uuid:79d21cca-9f34-4cfa-9020-17eee95eeed8',
+        timestamp: '2024-04-02T14:17:12+10:00',
+        total: 6,
+        parameter: [
+          {
+            name: 'version',
+            valueUri: 'http://terminology.hl7.org/CodeSystem/condition-clinical|4.0.1'
+          },
+          {
+            name: 'used-codesystem',
+            valueUri: 'http://terminology.hl7.org/CodeSystem/condition-clinical|4.0.1'
+          },
+          {
+            name: 'warning-draft',
+            valueUri: 'http://hl7.org/fhir/ValueSet/condition-clinical|4.0.1'
+          },
+          {
+            name: 'warning-trial-use',
+            valueUri: 'http://hl7.org/fhir/ValueSet/condition-clinical|4.0.1'
+          },
+          {
+            name: 'warning-trial-use',
+            valueUri: 'http://terminology.hl7.org/CodeSystem/condition-clinical|4.0.1'
+          },
+          {
+            name: 'warning-draft',
+            valueUri: 'http://terminology.hl7.org/CodeSystem/condition-clinical|4.0.1'
+          }
+        ],
+        contains: [
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/condition-clinical',
+            code: 'active',
+            display: 'Active'
+          },
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/condition-clinical',
+            code: 'inactive',
+            display: 'Inactive'
+          },
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/condition-clinical',
+            code: 'recurrence',
+            display: 'Recurrence'
+          },
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/condition-clinical',
+            code: 'relapse',
+            display: 'Relapse'
+          },
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/condition-clinical',
+            code: 'remission',
+            display: 'Remission'
+          },
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/condition-clinical',
+            code: 'resolved',
+            display: 'Resolved'
+          }
+        ]
+      }
+    }
+  ],
+  item: [
+    {
+      extension: [
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+          valueCodeableConcept: {
+            coding: [
+              {
+                system: 'http://hl7.org/fhir/questionnaire-item-control',
+                code: 'gtable'
+              }
+            ]
+          }
+        }
+      ],
+      linkId: 'medical-history',
+      text: 'Medical history and current problems list',
+      type: 'group',
+      repeats: true,
+      item: [
+        {
+          extension: [
+            {
+              url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+              valueCodeableConcept: {
+                coding: [
+                  {
+                    system: 'http://hl7.org/fhir/questionnaire-item-control',
+                    code: 'autocomplete'
+                  }
+                ]
+              }
+            }
+          ],
+          linkId: 'medical-history-condition',
+          text: 'Condition',
+          type: 'open-choice',
+          answerValueSet: '#MedicalHistory'
+        },
+        {
+          extension: [
+            {
+              url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+              valueCodeableConcept: {
+                coding: [
+                  {
+                    system: 'http://hl7.org/fhir/questionnaire-item-control',
+                    code: 'drop-down'
+                  }
+                ]
+              }
+            }
+          ],
+          linkId: 'medical-history-status',
+          text: 'Clinical Status',
+          type: 'choice',
+          answerValueSet: '#condition-clinical'
+        },
+        {
+          linkId: 'medical-history-onset',
+          text: 'Onset Date',
+          type: 'date'
+        },
+        {
+          linkId: 'medical-history-boolean-tester',
+          text: 'Boolean tester',
+          type: 'boolean'
+        }
+      ]
+    }
+  ]
+};
+
+export const qGTableWithChoice: Questionnaire = {
+  resourceType: 'Questionnaire',
+  id: 'GTableWithChoice',
+  name: 'GTableWithChoice',
+  title: 'GTable with Choice',
+  version: '0.1.0',
+  status: 'draft',
+  publisher: 'AEHRC CSIRO',
+  date: '2024-05-01',
+  url: 'https://smartforms.csiro.au/docs/tester/gtable-2',
+  contained: [
+    {
+      resourceType: 'ValueSet',
+      id: 'MedicalHistory',
+      url: 'https://smartforms.csiro.au/ig/ValueSet/MedicalHistory',
+      name: 'MedicalHistory',
+      title: 'Medical History',
+      status: 'draft',
+      experimental: false,
+      description:
+        'The Medical History value set includes values that may be used to represent medical history, operations and hospital admissions.',
+      compose: {
+        include: [
+          {
+            system: 'http://snomed.info/sct',
+            filter: [
+              {
+                property: 'constraint',
+                op: '=',
+                value:
+                  '^32570581000036105|Problem/Diagnosis reference set| OR ^32570141000036105|Procedure foundation reference set|'
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      resourceType: 'ValueSet',
+      id: 'condition-clinical',
+      extension: [
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/structuredefinition-wg',
+          valueCode: 'pc'
+        },
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/structuredefinition-standards-status',
+          valueCode: 'trial-use'
+        },
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/structuredefinition-fmm',
+          valueInteger: 3
+        }
+      ],
+      url: 'http://hl7.org/fhir/ValueSet/condition-clinical',
+      identifier: [
+        {
+          system: 'urn:ietf:rfc:3986',
+          value: 'urn:oid:2.16.840.1.113883.4.642.3.164'
+        }
+      ],
+      version: '4.0.1',
+      name: 'ConditionClinicalStatusCodes',
+      title: 'Condition Clinical Status Codes',
+      status: 'draft',
+      experimental: false,
+      publisher: 'FHIR Project team',
+      contact: [
+        {
+          telecom: [
+            {
+              system: 'url',
+              value: 'http://hl7.org/fhir'
+            }
+          ]
+        }
+      ],
+      description: 'Preferred value set for Condition Clinical Status.',
+      copyright: 'Copyright © 2011+ HL7. Licensed under Creative Commons "No Rights Reserved".',
+      compose: {
+        include: [
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/condition-clinical'
+          }
+        ]
+      },
+      expansion: {
+        identifier: 'urn:uuid:79d21cca-9f34-4cfa-9020-17eee95eeed8',
+        timestamp: '2024-04-02T14:17:12+10:00',
+        total: 6,
+        parameter: [
+          {
+            name: 'version',
+            valueUri: 'http://terminology.hl7.org/CodeSystem/condition-clinical|4.0.1'
+          },
+          {
+            name: 'used-codesystem',
+            valueUri: 'http://terminology.hl7.org/CodeSystem/condition-clinical|4.0.1'
+          },
+          {
+            name: 'warning-draft',
+            valueUri: 'http://hl7.org/fhir/ValueSet/condition-clinical|4.0.1'
+          },
+          {
+            name: 'warning-trial-use',
+            valueUri: 'http://hl7.org/fhir/ValueSet/condition-clinical|4.0.1'
+          },
+          {
+            name: 'warning-trial-use',
+            valueUri: 'http://terminology.hl7.org/CodeSystem/condition-clinical|4.0.1'
+          },
+          {
+            name: 'warning-draft',
+            valueUri: 'http://terminology.hl7.org/CodeSystem/condition-clinical|4.0.1'
+          }
+        ],
+        contains: [
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/condition-clinical',
+            code: 'active',
+            display: 'Active'
+          },
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/condition-clinical',
+            code: 'inactive',
+            display: 'Inactive'
+          },
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/condition-clinical',
+            code: 'recurrence',
+            display: 'Recurrence'
+          },
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/condition-clinical',
+            code: 'relapse',
+            display: 'Relapse'
+          },
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/condition-clinical',
+            code: 'remission',
+            display: 'Remission'
+          },
+          {
+            system: 'http://terminology.hl7.org/CodeSystem/condition-clinical',
+            code: 'resolved',
+            display: 'Resolved'
+          }
+        ]
+      }
+    }
+  ],
+  item: [
+    {
+      extension: [
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+          valueCodeableConcept: {
+            coding: [
+              {
+                system: 'http://hl7.org/fhir/questionnaire-item-control',
+                code: 'gtable'
+              }
+            ]
+          }
+        }
+      ],
+      linkId: 'medical-history',
+      text: 'Medical history and current problems list',
+      type: 'group',
+      repeats: true,
+      item: [
+        {
+          extension: [
+            {
+              url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+              valueCodeableConcept: {
+                coding: [
+                  {
+                    system: 'http://hl7.org/fhir/questionnaire-item-control',
+                    code: 'autocomplete'
+                  }
+                ]
+              }
+            }
+          ],
+          linkId: 'medical-history-condition',
+          text: 'Condition',
+          type: 'open-choice',
+          answerValueSet: '#MedicalHistory'
+        },
+        {
+          extension: [
+            {
+              url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+              valueCodeableConcept: {
+                coding: [
+                  {
+                    system: 'http://hl7.org/fhir/questionnaire-item-control',
+                    code: 'drop-down'
+                  }
+                ]
+              }
+            }
+          ],
+          linkId: 'medical-history-status',
+          text: 'Clinical Status',
+          type: 'choice',
+          answerValueSet: '#condition-clinical'
+        },
+        {
+          linkId: 'medical-history-onset',
+          text: 'Onset Date',
+          type: 'date'
+        }
+      ]
+    }
+  ]
+};

package/src/stories/storybookWrappers/BuildFormButtonForStorybook.tsx

@@ -21,6 +21,7 @@ import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
 import { Box, IconButton, Tooltip } from '@mui/material';
 import Iconify from '../../components/Iconify/Iconify';
 import { buildForm } from '../../utils';
+import { STORYBOOK_TERMINOLOGY_SERVER_URL } from './globals';
 
 interface BuildFormButtonProps {
   questionnaire: Questionnaire;
@@ -31,7 +32,12 @@ function BuildFormButtonForStorybook(props: BuildFormButtonProps) {
   const { questionnaire, questionnaireResponse } = props;
 
   async function handleBuildForm() {
-    await buildForm(questionnaire, questionnaireResponse);
+    await buildForm(
+      questionnaire,
+      questionnaireResponse,
+      undefined,
+      STORYBOOK_TERMINOLOGY_SERVER_URL
+    );
   }
 
   return (

package/src/stories/storybookWrappers/BuildFormButtonTesterWrapperForStorybook.tsx

@@ -23,6 +23,7 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { RendererThemeProvider } from '../../theme';
 import { useBuildForm, useRendererQueryClient } from '../../hooks';
 import BuildFormButtonForStorybook from './BuildFormButtonForStorybook';
+import { STORYBOOK_TERMINOLOGY_SERVER_URL } from './globals';
 
 interface BuildFormButtonTesterWrapperForStorybookProps {
   questionnaire: Questionnaire;
@@ -46,7 +47,12 @@ function BuildFormButtonTesterWrapperForStorybook(
 
   const queryClient = useRendererQueryClient();
 
-  const isBuilding = useBuildForm(questionnaire);
+  const isBuilding = useBuildForm(
+    questionnaire,
+    undefined,
+    undefined,
+    STORYBOOK_TERMINOLOGY_SERVER_URL
+  );
 
   if (isBuilding) {
     return <div>Loading...</div>;

package/src/stories/storybookWrappers/BuildFormWrapperForStorybook.tsx

@@ -23,6 +23,7 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import RendererThemeProvider from '../../theme/Theme';
 import { useBuildForm } from '../../hooks';
 import useRendererQueryClient from '../../hooks/useRendererQueryClient';
+import { STORYBOOK_TERMINOLOGY_SERVER_URL } from './globals';
 
 interface BuildFormWrapperForStorybookProps {
   questionnaire: Questionnaire;
@@ -33,7 +34,12 @@ function BuildFormWrapperForStorybook(props: BuildFormWrapperForStorybookProps)
   const { questionnaire, questionnaireResponse } = props;
 
   const queryClient = useRendererQueryClient();
-  const isBuilding = useBuildForm(questionnaire, questionnaireResponse);
+  const isBuilding = useBuildForm(
+    questionnaire,
+    questionnaireResponse,
+    undefined,
+    STORYBOOK_TERMINOLOGY_SERVER_URL
+  );
 
   if (isBuilding) {
     return <div>Loading...</div>;

package/src/stories/storybookWrappers/FormValidationTesterWrapperForStorybook.tsx

@@ -24,6 +24,7 @@ import { RendererThemeProvider } from '../../theme';
 import { useBuildForm, useRendererQueryClient } from '../../hooks';
 import { Grid } from '@mui/material';
 import FormValidationViewerForStorybook from './FormValidationViewerForStorybook';
+import { STORYBOOK_TERMINOLOGY_SERVER_URL } from './globals';
 
 interface FormValidationTesterWrapperForStorybookProps {
   questionnaire: Questionnaire;
@@ -35,7 +36,12 @@ function FormValidationTesterWrapperForStorybook(
 ) {
   const { questionnaire, questionnaireResponse } = props;
 
-  const isBuilding = useBuildForm(questionnaire, questionnaireResponse);
+  const isBuilding = useBuildForm(
+    questionnaire,
+    questionnaireResponse,
+    undefined,
+    STORYBOOK_TERMINOLOGY_SERVER_URL
+  );
 
   const queryClient = useRendererQueryClient();