@aehrc/smart-forms-renderer 0.33.0 → 0.34.0

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

@@ -18,11 +18,13 @@
 import React, { memo } from 'react';
 import type { QuestionnaireItem } from 'fhir/r4';
 import { getMarkdownString, getXHtmlString } from '../../../utils/itemControl';
-import parse from 'html-react-parser';
+import { default as htmlParse } from 'html-react-parser';
 import Box from '@mui/material/Box';
 import ReactMarkdown from 'react-markdown';
 import Typography from '@mui/material/Typography';
 import useDisplayCqfAndCalculatedExpression from '../../../hooks/useDisplayCqfAndCalculatedExpression';
+import { structuredDataCapture } from 'fhir-sdc-helpers';
+import { default as styleParse } from 'style-to-js';
 
 interface ItemLabelTextProps {
   qItem: QuestionnaireItem;
@@ -32,21 +34,18 @@ interface ItemLabelTextProps {
 const ItemLabelText = memo(function ItemLabelText(props: ItemLabelTextProps) {
   const { qItem, readOnly } = props;
 
+  let labelText = qItem.text ?? '';
+
   // Use calculatedExpressionString if available
-  const calculatedExpressionString = useDisplayCqfAndCalculatedExpression(qItem);
+  const calculatedExpressionString = useDisplayCqfAndCalculatedExpression(qItem) ?? '';
   if (calculatedExpressionString) {
-    return (
-      <Typography color={readOnly ? 'text.disabled' : 'text.primary'} sx={{ mt: 0.25 }}>
-        {calculatedExpressionString}
-      </Typography>
-    );
+    labelText = calculatedExpressionString;
   }
 
   // parse xHTML if found
   const xHtmlString = getXHtmlString(qItem);
-
   if (xHtmlString) {
-    return <Box>{parse(xHtmlString)}</Box>;
+    return <Box>{htmlParse(xHtmlString)}</Box>;
   }
 
   // parse markdown if found
@@ -59,14 +58,26 @@ const ItemLabelText = memo(function ItemLabelText(props: ItemLabelTextProps) {
     );
   }
 
+  // labelText is empty, return null
+  if (!labelText) {
+    return null;
+  }
+
+  // parse styles if found
+  const stylesString = structuredDataCapture.getStyle(qItem._text);
+  if (stylesString) {
+    const styles = styleParse(stylesString);
+    return <div style={styles}>{labelText}</div>;
+  }
+
   if (qItem.type === 'group') {
-    return <>{qItem.text}</>;
+    return <>{labelText}</>;
   }
 
   // parse regular text
   return (
     <Typography color={readOnly ? 'text.disabled' : 'text.primary'} sx={{ mt: 0.25 }}>
-      {qItem.text}
+      {labelText}
     </Typography>
   );
 });

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

@@ -24,6 +24,7 @@ import ItemLabelText from './ItemLabelText';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import Iconify from '../../Iconify/Iconify';
 
 interface LabelWrapperProps {
   qItem: QuestionnaireItem;
@@ -54,13 +55,19 @@ function ItemLabelWrapper(props: LabelWrapperProps) {
           }
         }}>
         <span>
-          <Box display="flex" columnGap={0.4} justifyContent="space-between">
+          <Box display="flex" columnGap={0.4} justifyContent="space-between" alignItems="center">
             {required ? (
               <Typography color="red" sx={{ ml: -1.15 }}>
                 *
               </Typography>
             ) : null}
             <ItemLabelText qItem={qItem} readOnly={readOnly} />
+            {displayFlyover !== '' ? (
+              <Iconify
+                icon="mdi:information-outline"
+                sx={{ height: 16, width: 16, mt: 0.25, ml: 0.25, color: 'text.secondary' }}
+              />
+            ) : null}
           </Box>
         </span>
       </Tooltip>

package/src/components/FormComponents/RepeatGroup/RepeatGroup.tsx

@@ -24,21 +24,11 @@ import type {
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import useInitialiseRepeatGroups from '../../../hooks/useInitialiseRepeatGroups';
-import { QGroupContainerBox } from '../../Box.styles';
-import Card from '@mui/material/Card';
-import Collapse from '@mui/material/Collapse';
-import Divider from '@mui/material/Divider';
-import { TransitionGroup } from 'react-transition-group';
-import { createEmptyQrItem } from '../../../utils/qrItem';
 import { nanoid } from 'nanoid';
-import RepeatGroupItem from './RepeatGroupItem';
-import AddItemButton from './AddItemButton';
-import LabelWrapper from '../ItemParts/ItemLabelWrapper';
 import cloneDeep from 'lodash.clonedeep';
-import useReadOnly from '../../../hooks/useReadOnly';
-import Typography from '@mui/material/Typography';
 import { useQuestionnaireStore } from '../../../stores';
 import useRepeatGroups from '../../../hooks/useRepeatGroups';
+import RepeatGroupView from './RepeatGroupView';
 
 interface RepeatGroupProps
   extends PropsWithQrRepeatGroupChangeHandler,
@@ -68,8 +58,6 @@ function RepeatGroup(props: RepeatGroupProps) {
 
   const mutateRepeatEnableWhenItems = useQuestionnaireStore.use.mutateRepeatEnableWhenItems();
 
-  const readOnly = useReadOnly(qItem, parentIsReadOnly);
-
   const initialRepeatGroups = useInitialiseRepeatGroups(qItem, qrItems);
 
   const [repeatGroups, setRepeatGroups] = useRepeatGroups(initialRepeatGroups);
@@ -122,76 +110,17 @@ function RepeatGroup(props: RepeatGroupProps) {
     ]);
   }
 
-  if (showMinimalView) {
-    return (
-      <QGroupContainerBox key={qItem.linkId} cardElevation={groupCardElevation} isRepeated={true}>
-        <Card elevation={groupCardElevation} sx={{ p: 2 }}>
-          {repeatGroups.map(({ nanoId, qrItem: nullableQrItem }, index) => {
-            const answeredQrItem = createEmptyQrItem(qItem);
-            if (nullableQrItem) {
-              answeredQrItem.item = nullableQrItem.item;
-            }
-
-            return (
-              <RepeatGroupItem
-                key={nanoId}
-                qItem={qItem}
-                repeatGroupIndex={index}
-                answeredQrItem={answeredQrItem}
-                nullableQrItem={nullableQrItem}
-                numOfRepeatGroups={repeatGroups.length}
-                groupCardElevation={groupCardElevation + 1}
-                showMinimalView={showMinimalView}
-                parentIsReadOnly={parentIsReadOnly}
-                onDeleteItem={() => handleDeleteItem(index)}
-                onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
-              />
-            );
-          })}
-        </Card>
-      </QGroupContainerBox>
-    );
-  }
-
   return (
-    <QGroupContainerBox key={qItem.linkId} cardElevation={groupCardElevation} isRepeated={true}>
-      <Card elevation={groupCardElevation} sx={{ p: 3, py: 2.5, mb: 3.5 }}>
-        {qItem.text ? (
-          <>
-            <Typography variant="h6" color={readOnly ? 'text.secondary' : 'text.primary'}>
-              <LabelWrapper qItem={qItem} readOnly={readOnly} />
-            </Typography>
-            <Divider sx={{ mt: 1, mb: 1.5 }} light />
-          </>
-        ) : null}
-        <TransitionGroup>
-          {repeatGroups.map(({ nanoId, qrItem: nullableQrItem }, index) => {
-            const answeredQrItem = createEmptyQrItem(qItem);
-            if (nullableQrItem) {
-              answeredQrItem.item = nullableQrItem.item;
-            }
-
-            return (
-              <Collapse key={nanoId} timeout={200}>
-                <RepeatGroupItem
-                  qItem={qItem}
-                  repeatGroupIndex={index}
-                  answeredQrItem={answeredQrItem}
-                  nullableQrItem={nullableQrItem}
-                  numOfRepeatGroups={repeatGroups.length}
-                  groupCardElevation={groupCardElevation + 1}
-                  parentIsReadOnly={parentIsReadOnly}
-                  onDeleteItem={() => handleDeleteItem(index)}
-                  onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
-                />
-              </Collapse>
-            );
-          })}
-        </TransitionGroup>
-
-        <AddItemButton repeatGroups={repeatGroups} readOnly={readOnly} onAddItem={handleAddItem} />
-      </Card>
-    </QGroupContainerBox>
+    <RepeatGroupView
+      qItem={qItem}
+      repeatGroups={repeatGroups}
+      groupCardElevation={groupCardElevation}
+      showMinimalView={showMinimalView}
+      parentIsReadOnly={parentIsReadOnly}
+      onAnswerChange={handleAnswerChange}
+      onAddItem={handleAddItem}
+      onDeleteItem={handleDeleteItem}
+    />
   );
 }
 

package/src/components/FormComponents/RepeatGroup/RepeatGroupView.tsx

@@ -0,0 +1,202 @@
+/*
+ * 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 React from 'react';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithParentIsRepeatGroupAttribute,
+  PropsWithShowMinimalViewAttribute
+} from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { QGroupContainerBox } from '../../Box.styles';
+import Card from '@mui/material/Card';
+import Collapse from '@mui/material/Collapse';
+import Divider from '@mui/material/Divider';
+import { TransitionGroup } from 'react-transition-group';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import RepeatGroupItem from './RepeatGroupItem';
+import AddItemButton from './AddItemButton';
+import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import Typography from '@mui/material/Typography';
+import type { RepeatGroupSingle } from '../../../interfaces/repeatGroup.interface';
+import useReadOnly from '../../../hooks/useReadOnly';
+import { getGroupCollapsible } from '../../../utils/qItem';
+import { GroupAccordion } from '../GroupItem/GroupAccordion.styles';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import AccordionDetails from '@mui/material/AccordionDetails';
+
+interface RepeatGroupViewProps
+  extends PropsWithShowMinimalViewAttribute,
+    PropsWithParentIsReadOnlyAttribute,
+    PropsWithParentIsRepeatGroupAttribute {
+  qItem: QuestionnaireItem;
+  repeatGroups: RepeatGroupSingle[];
+  groupCardElevation: number;
+  onAnswerChange: (newQrItem: QuestionnaireResponseItem, index: number) => void;
+  onAddItem: () => void;
+  onDeleteItem: (index: number) => void;
+}
+
+/**
+ * Main component to render a repeating, group Questionnaire item.
+ * Store and manages the state of multiple instances of GroupItem in a repeating group.
+ *
+ * @author Sean Fong
+ */
+function RepeatGroupView(props: RepeatGroupViewProps) {
+  const {
+    qItem,
+    repeatGroups,
+    groupCardElevation,
+    showMinimalView,
+    parentIsReadOnly,
+    onAnswerChange,
+    onAddItem,
+    onDeleteItem
+  } = props;
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+
+  if (showMinimalView) {
+    return (
+      <QGroupContainerBox key={qItem.linkId} cardElevation={groupCardElevation} isRepeated={true}>
+        <Card elevation={groupCardElevation} sx={{ p: 2 }}>
+          {repeatGroups.map(({ nanoId, qrItem: nullableQrItem }, index) => {
+            const answeredQrItem = createEmptyQrItem(qItem);
+            if (nullableQrItem) {
+              answeredQrItem.item = nullableQrItem.item;
+            }
+
+            return (
+              <RepeatGroupItem
+                key={nanoId}
+                qItem={qItem}
+                repeatGroupIndex={index}
+                answeredQrItem={answeredQrItem}
+                nullableQrItem={nullableQrItem}
+                numOfRepeatGroups={repeatGroups.length}
+                groupCardElevation={groupCardElevation + 1}
+                showMinimalView={showMinimalView}
+                parentIsReadOnly={parentIsReadOnly}
+                onDeleteItem={() => onDeleteItem(index)}
+                onQrItemChange={(newQrItem) => onAnswerChange(newQrItem, index)}
+              />
+            );
+          })}
+        </Card>
+      </QGroupContainerBox>
+    );
+  }
+
+  const groupIsCollapsible = getGroupCollapsible(qItem);
+  if (groupIsCollapsible) {
+    const isDefaultOpen = groupIsCollapsible === 'default-open';
+    return (
+      <GroupAccordion
+        disableGutters
+        defaultExpanded={isDefaultOpen}
+        elevation={groupCardElevation}
+        isRepeated={true}
+        slotProps={{
+          transition: { unmountOnExit: true, timeout: 250 }
+        }}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ minHeight: '28px' }}>
+          {qItem.text ? (
+            <>
+              <Typography variant="h6" color={readOnly ? 'text.secondary' : 'text.primary'}>
+                <LabelWrapper qItem={qItem} readOnly={readOnly} />
+              </Typography>
+            </>
+          ) : null}
+        </AccordionSummary>
+        <AccordionDetails sx={{ pt: 0 }}>
+          {qItem.text ? <Divider sx={{ mb: 1.5 }} light /> : null}
+          <TransitionGroup>
+            {repeatGroups.map(({ nanoId, qrItem: nullableQrItem }, index) => {
+              const answeredQrItem = createEmptyQrItem(qItem);
+              if (nullableQrItem) {
+                answeredQrItem.item = nullableQrItem.item;
+              }
+
+              return (
+                <Collapse key={nanoId} timeout={200}>
+                  <RepeatGroupItem
+                    qItem={qItem}
+                    repeatGroupIndex={index}
+                    answeredQrItem={answeredQrItem}
+                    nullableQrItem={nullableQrItem}
+                    numOfRepeatGroups={repeatGroups.length}
+                    groupCardElevation={groupCardElevation + 1}
+                    parentIsReadOnly={parentIsReadOnly}
+                    onDeleteItem={() => onDeleteItem(index)}
+                    onQrItemChange={(newQrItem) => onAnswerChange(newQrItem, index)}
+                  />
+                </Collapse>
+              );
+            })}
+          </TransitionGroup>
+
+          <AddItemButton repeatGroups={repeatGroups} readOnly={readOnly} onAddItem={onAddItem} />
+        </AccordionDetails>
+      </GroupAccordion>
+    );
+  }
+
+  return (
+    <QGroupContainerBox key={qItem.linkId} cardElevation={groupCardElevation} isRepeated={true}>
+      <Card elevation={groupCardElevation} sx={{ p: 3, py: 2.5, mb: 3.5 }}>
+        {qItem.text ? (
+          <>
+            <Typography variant="h6" color={readOnly ? 'text.secondary' : 'text.primary'}>
+              <LabelWrapper qItem={qItem} readOnly={readOnly} />
+            </Typography>
+            <Divider sx={{ mt: 1, mb: 1.5 }} light />
+          </>
+        ) : null}
+        <TransitionGroup>
+          {repeatGroups.map(({ nanoId, qrItem: nullableQrItem }, index) => {
+            const answeredQrItem = createEmptyQrItem(qItem);
+            if (nullableQrItem) {
+              answeredQrItem.item = nullableQrItem.item;
+            }
+
+            return (
+              <Collapse key={nanoId} timeout={200}>
+                <RepeatGroupItem
+                  qItem={qItem}
+                  repeatGroupIndex={index}
+                  answeredQrItem={answeredQrItem}
+                  nullableQrItem={nullableQrItem}
+                  numOfRepeatGroups={repeatGroups.length}
+                  groupCardElevation={groupCardElevation + 1}
+                  parentIsReadOnly={parentIsReadOnly}
+                  onDeleteItem={() => onDeleteItem(index)}
+                  onQrItemChange={(newQrItem) => onAnswerChange(newQrItem, index)}
+                />
+              </Collapse>
+            );
+          })}
+        </TransitionGroup>
+
+        <AddItemButton repeatGroups={repeatGroups} readOnly={readOnly} onAddItem={onAddItem} />
+      </Card>
+    </QGroupContainerBox>
+  );
+}
+
+export default RepeatGroupView;

package/src/components/FormComponents/SingleItem/SingleItem.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type {
   PropsWithIsRepeatedAttribute,
@@ -30,6 +30,9 @@ import SingleItemSwitcher from './SingleItemSwitcher';
 import useHidden from '../../../hooks/useHidden';
 import useReadOnly from '../../../hooks/useReadOnly';
 import SingleNestedItems from './SingleNestedItems';
+import { GroupCard } from '../GroupItem/GroupItem.styles';
+import { QGroupContainerBox } from '../../Box.styles';
+import { shouldRenderNestedItems } from '../../../utils/itemControl';
 
 interface SingleItemProps
   extends PropsWithQrItemChangeHandler,
@@ -97,7 +100,10 @@ function SingleItem(props: SingleItemProps) {
     [qrItem, onQrItemChange]
   );
 
-  const qItemHasNestedItems = !!qItem.item && qItem.item.length > 0;
+  const qItemHasNestedItems = useMemo(
+    () => !!qItem.item && qItem.item.length > 0 && shouldRenderNestedItems(qItem),
+    [qItem]
+  );
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const itemIsHidden = useHidden(qItem, parentRepeatGroupIndex);
@@ -105,6 +111,38 @@ function SingleItem(props: SingleItemProps) {
     return null;
   }
 
+  if (qItemHasNestedItems) {
+    return (
+      <QGroupContainerBox
+        cardElevation={groupCardElevation}
+        isRepeated={isRepeated}
+        data-test="q-item-group-box">
+        <GroupCard elevation={groupCardElevation} isRepeated={isRepeated}>
+          <SingleItemSwitcher
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={isRepeated}
+            isTabled={isTabled}
+            showMinimalView={showMinimalView}
+            parentIsReadOnly={readOnly}
+            onQrItemChange={handleQrItemChange}
+          />
+          {qItemHasNestedItems ? (
+            <>
+              <SingleNestedItems
+                qItem={qItem}
+                qrItem={qrItem}
+                groupCardElevation={groupCardElevation}
+                parentIsReadOnly={readOnly}
+                onQrItemChange={handleQrItemChangeWithNestedItems}
+              />
+            </>
+          ) : null}
+        </GroupCard>
+      </QGroupContainerBox>
+    );
+  }
+
   return (
     <>
       <SingleItemSwitcher
@@ -116,15 +154,6 @@ function SingleItem(props: SingleItemProps) {
         parentIsReadOnly={readOnly}
         onQrItemChange={handleQrItemChange}
       />
-      {qItemHasNestedItems ? (
-        <SingleNestedItems
-          qItem={qItem}
-          qrItem={qrItem}
-          groupCardElevation={groupCardElevation}
-          parentIsReadOnly={readOnly}
-          onQrItemChange={handleQrItemChangeWithNestedItems}
-        />
-      ) : null}
     </>
   );
 }

package/src/components/FormComponents/SingleItem/SingleNestedItems.tsx

@@ -25,6 +25,7 @@ import type {
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { QrRepeatGroup } from '../../../interfaces/repeatGroup.interface';
+import Box from '@mui/material/Box';
 
 interface SingleNestedItemsProps
   extends PropsWithQrItemChangeHandler,
@@ -63,27 +64,31 @@ function SingleNestedItems(props: SingleNestedItemsProps) {
   const qrItemsByIndex = getQrItemsIndex(qItems, qrItems, qItemsIndexMap);
 
   return (
-    <>
-      {qItems.map((qItem: QuestionnaireItem, i) => {
-        const qrItemOrItems = qrItemsByIndex[i];
+    <Box display="flex">
+      <Box ml={1.5} />
+      <Box flexGrow={1}>
+        {qItems.map((qItem: QuestionnaireItem, i) => {
+          const qrItemOrItems = qrItemsByIndex[i];
 
-        if (qItem.type === 'display') {
-          return null;
-        }
+          if (qItem.type === 'display') {
+            return null;
+          }
 
-        return (
-          <GroupItemSwitcher
-            key={qItem.linkId}
-            qItem={qItem}
-            qrItemOrItems={qrItemOrItems}
-            groupCardElevation={groupCardElevation}
-            parentIsReadOnly={parentIsReadOnly}
-            onQrItemChange={handleQrItemChange}
-            onQrRepeatGroupChange={handleQrRepeatGroupChange}
-          />
-        );
-      })}
-    </>
+          return (
+            <GroupItemSwitcher
+              key={qItem.linkId}
+              qItem={qItem}
+              qrItemOrItems={qrItemOrItems}
+              groupCardElevation={groupCardElevation}
+              parentIsReadOnly={parentIsReadOnly}
+              onQrItemChange={handleQrItemChange}
+              onQrRepeatGroupChange={handleQrRepeatGroupChange}
+            />
+          );
+        })}
+      </Box>
+      <Box mr={2.25}></Box>
+    </Box>
   );
 }
 

package/src/components/Renderer/FormBodySingleCollapsible.tsx

@@ -21,7 +21,6 @@ import Accordion from '@mui/material/Accordion';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import Box from '@mui/material/Box';
-import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { getContextDisplays } from '../../utils/tabs';
@@ -46,17 +45,16 @@ const FormBodySingleCollapsible = memo(function FormBodySingleCollapsible(
 
   const collapsibleLabel = getShortText(qItem) ?? qItem.text ?? '';
 
+  const isExpanded = selectedIndex === index;
+
   return (
     <Accordion
-      expanded={selectedIndex === index}
-      TransitionProps={{ unmountOnExit: true, timeout: 250 }}
+      expanded={isExpanded}
+      slotProps={{
+        transition: { unmountOnExit: true, timeout: 250 }
+      }}
       onChange={() => onToggleExpand(index)}>
-      <AccordionSummary
-        expandIcon={
-          <Tooltip title={'Expand'}>
-            <ExpandMoreIcon />
-          </Tooltip>
-        }>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
         <Box display="flex" alignItems="center" justifyContent="space-between" width="100%" mr={3}>
           <Typography variant="subtitle2">{collapsibleLabel}</Typography>
           <Box display="flex" columnGap={0.5}>