@aehrc/smart-forms-renderer 0.7.1 → 0.8.0

package/src/components/FormComponents/StringItem/StringItem.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
@@ -31,6 +31,7 @@ import { FullWidthFormComponentBox } from '../../Box.styles';
 import StringField from './StringField';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useStringCalculatedExpression from '../../../hooks/useStringCalculatedExpression';
+import useStringInput from '../../../hooks/useStringInput';
 
 interface StringItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
@@ -58,7 +59,7 @@ function StringItem(props: StringItemProps) {
   if (qrItem?.answer && qrItem?.answer[0].valueString) {
     valueString = qrItem.answer[0].valueString;
   }
-  const [input, setInput] = useState(valueString);
+  const [input, setInput] = useStringInput(valueString);
 
   // Perform validation checks
   const feedback = useValidationError(input, regexValidation, maxLength);

package/src/components/FormComponents/Tables/AddRowButton.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2023 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 Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import AddIcon from '@mui/icons-material/Add';
+import type { RepeatGroupSingle } from '../../../interfaces/repeatGroup.interface';
+
+interface AddItemButtonProps {
+  repeatGroups: RepeatGroupSingle[];
+  onAddItem: () => void;
+}
+
+function AddRowButton(props: AddItemButtonProps) {
+  const { repeatGroups, onAddItem } = props;
+
+  const isDisabled = repeatGroups[repeatGroups.length - 1].qrItem === null;
+
+  return (
+    <Box display="flex" flexDirection="row-reverse">
+      <Button
+        variant="contained"
+        size="small"
+        startIcon={<AddIcon />}
+        disabled={isDisabled}
+        onClick={onAddItem}
+        data-test="button-add-repeat-item">
+        Add Row
+      </Button>
+    </Box>
+  );
+}
+
+export default AddRowButton;

package/src/components/FormComponents/Tables/{QItemGroupTable.tsx → GroupTable.tsx}

@@ -18,10 +18,8 @@
 import React, { useMemo, useState } from 'react';
 
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
 import Paper from '@mui/material/Paper';
-import Stack from '@mui/material/Stack';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -29,9 +27,7 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
-
-import AddIcon from '@mui/icons-material/Add';
-import QItemGroupTableRow from './QItemGroupTableRow';
+import GroupTableRow from './GroupTableRow';
 import { HeaderTableCell } from './Table.styles';
 import { QGroupContainerBox } from '../../Box.styles';
 import { mapQItemsIndex } from '../../../utils/mapItem';
@@ -41,6 +37,8 @@ import { nanoid } from 'nanoid';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import DeleteRowButton from './DeleteRowButton';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import cloneDeep from 'lodash.clonedeep';
+import AddRowButton from './AddRowButton';
 
 interface Props extends PropsWithQrRepeatGroupChangeHandler {
   qItem: QuestionnaireItem;
@@ -48,7 +46,7 @@ interface Props extends PropsWithQrRepeatGroupChangeHandler {
   groupCardElevation: number;
 }
 
-function QItemGroupTable(props: Props) {
+function GroupTable(props: Props) {
   const { qItem, qrItems, groupCardElevation, onQrRepeatGroupChange } = props;
 
   const initialisedGroupTables = useInitialiseGroupTable(qrItems);
@@ -84,7 +82,9 @@ function QItemGroupTable(props: Props) {
     setTableRows(updatedTableRows);
     onQrRepeatGroupChange({
       linkId: qItem.linkId,
-      qrItems: updatedTableRows.flatMap((singleRow) => (singleRow.qrItem ? [singleRow.qrItem] : []))
+      qrItems: updatedTableRows.flatMap((singleRow) =>
+        singleRow.qrItem ? [cloneDeep(singleRow.qrItem)] : []
+      )
     });
   }
 
@@ -96,7 +96,9 @@ function QItemGroupTable(props: Props) {
     setTableRows(updatedTableRows);
     onQrRepeatGroupChange({
       linkId: qItem.linkId,
-      qrItems: updatedTableRows.flatMap((singleRow) => (singleRow.qrItem ? [singleRow.qrItem] : []))
+      qrItems: updatedTableRows.flatMap((singleRow) =>
+        singleRow.qrItem ? [cloneDeep(singleRow.qrItem)] : []
+      )
     });
   }
 
@@ -112,22 +114,18 @@ function QItemGroupTable(props: Props) {
 
   return (
     <QGroupContainerBox cardElevation={groupCardElevation} isRepeated={false} py={3}>
-      <Typography fontSize={13} variant="h6">
-        <LabelWrapper qItem={qItem} />
-      </Typography>
-      <Divider sx={{ my: 1 }} light />
+      {groupCardElevation !== 1 ? (
+        <>
+          <Typography fontSize={13} variant="h6">
+            <LabelWrapper qItem={qItem} />
+          </Typography>
+          <Divider sx={{ my: 1 }} light />
+        </>
+      ) : null}
       <TableContainer component={Paper} elevation={groupCardElevation}>
         <Table>
           <caption>
-            <Stack direction="row" justifyContent="end">
-              <Button
-                variant="contained"
-                size="small"
-                startIcon={<AddIcon />}
-                onClick={handleAddRow}>
-                Add Row
-              </Button>
-            </Stack>
+            <AddRowButton repeatGroups={tableRows} onAddItem={handleAddRow} />
           </caption>
           <TableHead>
             <TableRow>
@@ -146,7 +144,7 @@ function QItemGroupTable(props: Props) {
 
               return (
                 <TableRow key={nanoId}>
-                  <QItemGroupTableRow
+                  <GroupTableRow
                     qItem={qItem}
                     qrItem={answeredQrItem}
                     qItemsIndexMap={qItemsIndexMap}
@@ -167,4 +165,4 @@ function QItemGroupTable(props: Props) {
   );
 }
 
-export default QItemGroupTable;
+export default GroupTable;

package/src/components/FormComponents/Tables/{QItemGroupTableRow.tsx → GroupTableRow.tsx}

@@ -17,7 +17,7 @@
 
 import React from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
+import { createQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
 import SingleItem from '../SingleItem/SingleItem';
 import { getQrItemsIndex } from '../../../utils/mapItem';
 import { StandardTableCell } from './Table.styles';
@@ -29,7 +29,7 @@ interface Props extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>
   qItemsIndexMap: Record<string, number>;
 }
 
-function QItemGroupTableRow(props: Props) {
+function GroupTableRow(props: Props) {
   const { qItem, qrItem, qItemsIndexMap, onQrItemChange } = props;
 
   const rowItems = qItem.item;
@@ -42,7 +42,7 @@ function QItemGroupTableRow(props: Props) {
 
   function handleQrRowItemChange(newQrRowItem: QuestionnaireResponseItem) {
     const qrRow: QuestionnaireResponseItem = { ...row };
-    updateQrGroup(newQrRowItem, null, qrRow, qItemsIndexMap);
+    updateQrItemsInGroup(newQrRowItem, null, qrRow, qItemsIndexMap);
     onQrItemChange(qrRow);
   }
 
@@ -74,4 +74,4 @@ function QItemGroupTableRow(props: Props) {
   );
 }
 
-export default QItemGroupTableRow;
+export default GroupTableRow;

package/src/components/FormComponents/Tables/index.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2023 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.
+ */
+
+export { default as GroupTable } from './GroupTable';

package/src/components/FormComponents/TextItem/TextItem.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithQrItemChangeHandler
@@ -30,6 +30,7 @@ import { FullWidthFormComponentBox } from '../../Box.styles';
 import TextField from './TextField';
 import useStringCalculatedExpression from '../../../hooks/useStringCalculatedExpression';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import useStringInput from '../../../hooks/useStringInput';
 
 interface TextItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
@@ -57,7 +58,7 @@ function TextItem(props: TextItemProps) {
   if (qrItem?.answer && qrItem?.answer[0].valueString) {
     valueText = qrItem.answer[0].valueString;
   }
-  const [input, setInput] = useState(valueText);
+  const [input, setInput] = useStringInput(valueText);
 
   // Perform validation checks
   const feedback = useValidationError(input, regexValidation, maxLength);

package/src/components/FormComponents/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright 2023 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.
+ */
+
+export * from './SingleItem';
+export * from './RepeatGroup';
+export * from './Tables';

package/src/components/Renderer/BaseRenderer.tsx

@@ -15,13 +15,17 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import Container from '@mui/material/Container';
 import Fade from '@mui/material/Fade';
 import FormTopLevelItem from './FormTopLevelItem';
 import type { QuestionnaireResponse, QuestionnaireResponseItem } from 'fhir/r4';
 import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
 import useQuestionnaireResponseStore from '../../stores/useQuestionnaireResponseStore';
+import cloneDeep from 'lodash.clonedeep';
+import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
+import { updateQrItemsInGroup } from '../../utils/qrItem';
+import type { QrRepeatGroup } from '../../interfaces/repeatGroup.interface';
 
 function BaseRenderer() {
   const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
@@ -29,48 +33,65 @@ function BaseRenderer() {
   const updatableResponse = useQuestionnaireResponseStore((state) => state.updatableResponse);
   const updateResponse = useQuestionnaireResponseStore((state) => state.updateResponse);
 
-  function handleTopLevelQRItemChange(newTopLevelQItem: QuestionnaireResponseItem, index: number) {
-    if (!updatableResponse.item || updatableResponse.item.length === 0) {
+  const qItemsIndexMap = useMemo(() => mapQItemsIndex(sourceQuestionnaire), [sourceQuestionnaire]);
+
+  function handleTopLevelQRItemSingleChange(
+    newTopLevelQRItem: QuestionnaireResponseItem,
+    index: number
+  ) {
+    const updatedResponse: QuestionnaireResponse = cloneDeep(updatableResponse);
+    if (!updatedResponse.item || updatedResponse.item.length === 0) {
       return;
     }
 
-    const updatedItems = [...updatableResponse.item]; // Copy the original array of items
-    updatedItems[index] = newTopLevelQItem; // Modify the item at the specified index
+    const updatedItems = [...updatedResponse.item]; // Copy the original array of items
+    updatedItems[index] = newTopLevelQRItem; // Modify the item at the specified index
 
-    const updatedResponse: QuestionnaireResponse = {
-      ...updatableResponse,
-      item: updatedItems
-    };
+    updatedResponse.item = updatedItems;
+
+    updateExpressions(updatedResponse);
+    updateResponse(updatedResponse);
+  }
+
+  function handleTopLevelQRItemMultipleChange(newTopLevelQRItems: QrRepeatGroup) {
+    const updatedResponse: QuestionnaireResponse = cloneDeep(updatableResponse);
+    if (!updatedResponse.item || updatedResponse.item.length === 0) {
+      return;
+    }
+
+    updateQrItemsInGroup(null, newTopLevelQRItems, updatedResponse, qItemsIndexMap);
 
     updateExpressions(updatedResponse);
     updateResponse(updatedResponse);
   }
 
   const topLevelQItems = sourceQuestionnaire.item;
-  const topLevelQRItems = updatableResponse.item;
+  const topLevelQRItems = cloneDeep(updatableResponse.item) ?? [];
 
   if (!topLevelQItems) {
     return <>Questionnaire does not have any items</>;
   }
 
+  // If an item has multiple answers, it is a repeat group
+  const topLevelQRItemsByIndex: (QuestionnaireResponseItem | QuestionnaireResponseItem[])[] =
+    getQrItemsIndex(topLevelQItems, topLevelQRItems, qItemsIndexMap);
+
   return (
     <Fade in={true} timeout={500}>
       <Container maxWidth="xl">
         {topLevelQItems.map((qItem, index) => {
-          const qrItem = topLevelQRItems
-            ? topLevelQRItems[index]
-            : {
-                linkId: qItem.linkId,
-                text: qItem.text
-              };
+          const qrItemOrItems = topLevelQRItemsByIndex[index];
 
           return (
             <FormTopLevelItem
               key={qItem.linkId}
               topLevelQItem={qItem}
-              topLevelQRItem={qrItem}
+              topLevelQRItemOrItems={qrItemOrItems}
               onQrItemChange={(newTopLevelQRItem) =>
-                handleTopLevelQRItemChange(newTopLevelQRItem, index)
+                handleTopLevelQRItemSingleChange(newTopLevelQRItem, index)
+              }
+              onQrRepeatGroupChange={(newTopLevelQRItems) =>
+                handleTopLevelQRItemMultipleChange(newTopLevelQRItems)
               }
             />
           );

package/src/components/Renderer/FormBodyCollapsible.tsx

@@ -19,7 +19,7 @@ import React, { useMemo } from 'react';
 import Stack from '@mui/material/Stack';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
-import { updateQrGroup } from '../../utils/qrItem';
+import { updateQrItemsInGroup } from '../../utils/qrItem';
 import type { PropsWithQrItemChangeHandler } from '../../interfaces/renderProps.interface';
 import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
 import FormBodySingleCollapsibleWrapper from './FormBodySingleCollapsibleWrapper';
@@ -46,7 +46,7 @@ function FormBodyCollapsibleWrapper(props: FormBodyCollapsibleProps) {
   const qrItems = topLevelQRItem.item;
 
   function handleQrGroupChange(qrItem: QuestionnaireResponseItem) {
-    updateQrGroup(qrItem, null, topLevelQRItem, indexMap);
+    updateQrItemsInGroup(qrItem, null, topLevelQRItem, indexMap);
     onQrItemChange(topLevelQRItem);
   }
 

package/src/components/Renderer/FormBodyTabbed.tsx

@@ -22,7 +22,7 @@ import TabContext from '@mui/lab/TabContext';
 import TabPanel from '@mui/lab/TabPanel';
 import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
 import GroupItem from '../FormComponents/GroupItem/GroupItem';
-import { updateQrGroup } from '../../utils/qrItem';
+import { updateQrItemsInGroup } from '../../utils/qrItem';
 import FormBodyTabListWrapper from '../Tabs/FormBodyTabListWrapper';
 import type { PropsWithQrItemChangeHandler } from '../../interfaces/renderProps.interface';
 import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
@@ -47,7 +47,7 @@ function FormBodyTabbed(props: FormBodyTabbedProps) {
   const qrItems = topLevelQRItem.item;
 
   function handleQrGroupChange(qrItem: QuestionnaireResponseItem) {
-    updateQrGroup(qrItem, null, topLevelQRItem, indexMap);
+    updateQrItemsInGroup(qrItem, null, topLevelQRItem, indexMap);
     onQrItemChange(topLevelQRItem);
   }
 
@@ -61,7 +61,7 @@ function FormBodyTabbed(props: FormBodyTabbedProps) {
     <Grid container spacing={2}>
       <TabContext value={currentTab.toString()}>
         <Grid item xs={12} md={3.5} lg={3} xl={2.75}>
-          <FormBodyTabListWrapper qFormItems={qItems} currentTabIndex={currentTab} tabs={tabs} />
+          <FormBodyTabListWrapper topLevelItems={qItems} currentTabIndex={currentTab} tabs={tabs} />
         </Grid>
 
         <Grid item xs={12} md={8.5} lg={9} xl={9.25}>

package/src/components/Renderer/FormTopLevelItem.tsx

@@ -21,17 +21,24 @@ import FormBodyTabbed from './FormBodyTabbed';
 import { containsTabs, isTabContainer } from '../../utils/tabs';
 import GroupItem from '../FormComponents/GroupItem/GroupItem';
 import SingleItem from '../FormComponents/SingleItem/SingleItem';
-import type { PropsWithQrItemChangeHandler } from '../../interfaces/renderProps.interface';
+import type {
+  PropsWithQrItemChangeHandler,
+  PropsWithQrRepeatGroupChangeHandler
+} from '../../interfaces/renderProps.interface';
 import FormBodyCollapsible from './FormBodyCollapsible';
 import useResponsive from '../../hooks/useResponsive';
+import useHidden from '../../hooks/useHidden';
+import GroupItemSwitcher from '../FormComponents/GroupItem/GroupItemSwitcher';
 
-interface FormTopLevelItemProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+interface FormTopLevelItemProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithQrRepeatGroupChangeHandler {
   topLevelQItem: QuestionnaireItem;
-  topLevelQRItem: QuestionnaireResponseItem;
+  topLevelQRItemOrItems: QuestionnaireResponseItem | QuestionnaireResponseItem[];
 }
 
 function FormTopLevelItem(props: FormTopLevelItemProps) {
-  const { topLevelQItem, topLevelQRItem, onQrItemChange } = props;
+  const { topLevelQItem, topLevelQRItemOrItems, onQrItemChange, onQrRepeatGroupChange } = props;
 
   const itemIsTabContainer = isTabContainer(topLevelQItem);
   const itemContainsTabs = containsTabs(topLevelQItem);
@@ -40,6 +47,28 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
 
   const itemIsGroup = topLevelQItem.type === 'group';
 
+  const itemIsHidden = useHidden(topLevelQItem);
+  if (itemIsHidden) {
+    return null;
+  }
+
+  // If item has multiple answers, use a group item switcher to determine how to render it.
+  const hasMultipleAnswers = Array.isArray(topLevelQRItemOrItems);
+  if (hasMultipleAnswers) {
+    return (
+      <GroupItemSwitcher
+        qItem={topLevelQItem}
+        qrItemOrItems={topLevelQRItemOrItems}
+        groupCardElevation={1}
+        onQrItemChange={onQrItemChange}
+        onQrRepeatGroupChange={onQrRepeatGroupChange}
+      />
+    );
+  }
+
+  // At this point, item only has one answer
+  const topLevelQRItem = topLevelQRItemOrItems;
+
   // If form is tabbed, it is rendered as a tabbed form
   if (itemContainsTabs || itemIsTabContainer) {
     if (isDesktop) {

package/src/components/Tabs/FormBodySingleTab.tsx

@@ -46,7 +46,7 @@ const FormBodySingleTab = memo(function FormBodySingleTab(props: FormBodySingleT
     <>
       <ListItemButton
         selected={selected}
-        sx={{ my: 0.2, minHeight: '36px' }}
+        sx={{ my: 0.15, minHeight: '36px' }}
         onClick={handleTabClick}>
         <ListItemText
           primary={

package/src/components/Tabs/FormBodyTabList.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 import Collapse from '@mui/material/Collapse';
 import { TransitionGroup } from 'react-transition-group';
 import { getShortText } from '../../utils/itemControl';
@@ -23,27 +23,24 @@ import type { QuestionnaireItem } from 'fhir/r4';
 import FormBodySingleTab from './FormBodySingleTab';
 import type { Tabs } from '../../interfaces/tab.interface';
 import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
-import { getContextDisplays, isTabHidden } from '../../utils/tabs';
+import { isTabHidden } from '../../utils/tabs';
 
 interface FormBodyTabListProps {
   topLevelItems: QuestionnaireItem[];
   currentTabIndex: number;
   tabs: Tabs;
   completedTabsCollapsed: boolean;
+  allContextDisplayItems: QuestionnaireItem[][];
 }
 
 const FormBodyTabList = memo(function FormBodyTabList(props: FormBodyTabListProps) {
-  const { topLevelItems, currentTabIndex, tabs, completedTabsCollapsed } = props;
+  const { topLevelItems, currentTabIndex, tabs, completedTabsCollapsed, allContextDisplayItems } =
+    props;
 
   const enableWhenIsActivated = useQuestionnaireStore((state) => state.enableWhenIsActivated);
   const enableWhenItems = useQuestionnaireStore((state) => state.enableWhenItems);
   const enableWhenExpressions = useQuestionnaireStore((state) => state.enableWhenExpressions);
 
-  const allContextDisplayItems = useMemo(
-    () => topLevelItems.map((topLevelItem) => getContextDisplays(topLevelItem)),
-    [topLevelItems]
-  );
-
   return (
     <TransitionGroup>
       {topLevelItems.map((qItem, i) => {

package/src/components/Tabs/FormBodyTabListWrapper.tsx

@@ -21,15 +21,13 @@ import Card from '@mui/material/Card';
 import { PrimarySelectableList } from '../Lists.styles';
 import type { QuestionnaireItem } from 'fhir/r4';
 import type { Tabs } from '../../interfaces/tab.interface';
-import { IconButton } from '@mui/material';
-import ExpandLess from '@mui/icons-material/ExpandLess';
-import ExpandMore from '@mui/icons-material/ExpandMore';
-import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
 import FormBodyTabList from './FormBodyTabList';
+import ShowCompletedTabsSection from './ShowCompletedTabsSection';
+import useContextDisplayItems from '../../hooks/useContextDisplayItems';
 
 interface FormBodyTabListWrapperProps {
-  qFormItems: QuestionnaireItem[];
+  topLevelItems: QuestionnaireItem[];
   currentTabIndex: number;
   tabs: Tabs;
 }
@@ -37,39 +35,30 @@ interface FormBodyTabListWrapperProps {
 const FormBodyTabListWrapper = memo(function FormBodyTabListWrapper(
   props: FormBodyTabListWrapperProps
 ) {
-  const { qFormItems, currentTabIndex, tabs } = props;
+  const { topLevelItems, currentTabIndex, tabs } = props;
 
   const [completedTabsExpanded, setCompletedTabsExpanded] = useState(true);
 
+  const { allContextDisplayItems, completedDisplayItemExists } =
+    useContextDisplayItems(topLevelItems);
+
   return (
     <Card sx={{ p: 0.75, mb: 2 }}>
       <Box sx={{ flexGrow: 1 }}>
         <PrimarySelectableList dense disablePadding sx={{ mb: 1 }} data-test="renderer-tab-list">
-          <Box display="flex" justifyContent="center" alignItems="center" mx={2} columnGap={0.5}>
-            <Typography
-              variant="overline"
-              fontSize={9}
-              color={completedTabsExpanded ? 'text.secondary' : 'text.disabled'}>
-              Completed tabs {completedTabsExpanded ? 'shown' : 'hidden'}
-            </Typography>
-            <IconButton
-              size="small"
-              onClick={() => {
-                setCompletedTabsExpanded(!completedTabsExpanded);
-              }}>
-              {completedTabsExpanded ? (
-                <ExpandLess fontSize="small" />
-              ) : (
-                <ExpandMore fontSize="small" />
-              )}
-            </IconButton>
-          </Box>
+          {completedDisplayItemExists ? (
+            <ShowCompletedTabsSection
+              completedTabsExpanded={completedTabsExpanded}
+              setCompletedTabsExpanded={setCompletedTabsExpanded}
+            />
+          ) : null}
           <Divider sx={{ mx: 1 }} light />
           <FormBodyTabList
-            topLevelItems={qFormItems}
+            topLevelItems={topLevelItems}
             currentTabIndex={currentTabIndex}
             tabs={tabs}
             completedTabsCollapsed={!completedTabsExpanded}
+            allContextDisplayItems={allContextDisplayItems}
           />
         </PrimarySelectableList>
       </Box>

package/src/components/Tabs/ShowCompletedTabsSection.tsx

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2023 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 Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { IconButton } from '@mui/material';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+
+interface ShowCompletedTabsSectionProps {
+  completedTabsExpanded: boolean;
+  setCompletedTabsExpanded: (newExpanded: boolean) => void;
+}
+
+function ShowCompletedTabsSection(props: ShowCompletedTabsSectionProps) {
+  const { completedTabsExpanded, setCompletedTabsExpanded } = props;
+
+  return (
+    <Box display="flex" justifyContent="center" alignItems="center" mx={2} columnGap={0.5}>
+      <Typography
+        variant="overline"
+        fontSize={9}
+        color={completedTabsExpanded ? 'text.secondary' : 'text.disabled'}>
+        Completed tabs {completedTabsExpanded ? 'shown' : 'hidden'}
+      </Typography>
+      <IconButton
+        size="small"
+        onClick={() => {
+          setCompletedTabsExpanded(!completedTabsExpanded);
+        }}>
+        {completedTabsExpanded ? <ExpandLess fontSize="small" /> : <ExpandMore fontSize="small" />}
+      </IconButton>
+    </Box>
+  );
+}
+
+export default ShowCompletedTabsSection;