@aehrc/smart-forms-renderer 0.7.2 → 0.8.0

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

@@ -15,18 +15,14 @@
  * limitations under the License.
  */
 
-import type { SyntheticEvent } from 'react';
 import React from 'react';
-import Autocomplete from '@mui/material/Autocomplete';
 import Grid from '@mui/material/Grid';
 import type {
   QuestionnaireItem,
   QuestionnaireItemAnswerOption,
   QuestionnaireResponseItem
 } from 'fhir/r4';
-import { getAnswerOptionLabel } from '../../../utils/openChoice';
 import { createEmptyQrItem } from '../../../utils/qrItem';
-import { StandardTextField } from '../Textfield.styles';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type {
@@ -36,6 +32,7 @@ import type {
 } from '../../../interfaces/renderProps.interface';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import OpenChoiceSelectAnswerOptionField from './OpenChoiceSelectAnswerOptionField';
 
 interface OpenChoiceSelectAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
@@ -49,88 +46,61 @@ function OpenChoiceSelectAnswerOptionItem(props: OpenChoiceSelectAnswerOptionIte
   const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
 
   // Get additional rendering extensions
-  const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } =
-    useRenderingExtensions(qItem);
+  const { displayInstructions } = useRenderingExtensions(qItem);
 
   // Init input value
   const answerOptions = qItem.answerOption;
   if (!answerOptions) return null;
 
   const qrOpenChoice = qrItem ?? createEmptyQrItem(qItem);
-  let valueSelect: QuestionnaireItemAnswerOption | undefined = undefined;
+  let valueSelect: QuestionnaireItemAnswerOption | null = null;
   if (qrOpenChoice.answer) {
-    valueSelect = qrOpenChoice.answer[0];
+    valueSelect = qrOpenChoice.answer[0] ?? null;
   }
 
   // Event handlers
-  function handleChange(
-    _: SyntheticEvent<Element, Event>,
-    newValue: QuestionnaireItemAnswerOption | string | null
-  ) {
+  function handleChange(newValue: QuestionnaireItemAnswerOption | string | null) {
     if (newValue) {
       if (typeof newValue === 'string') {
         onQrItemChange({
           ...qrOpenChoice,
           answer: [{ valueString: newValue }]
         });
-      } else {
-        const option = newValue;
-        if (option['valueCoding']) {
-          onQrItemChange({
-            ...qrOpenChoice,
-            answer: [{ valueCoding: option.valueCoding }]
-          });
-        } else if (option['valueString']) {
-          onQrItemChange({
-            ...qrOpenChoice,
-            answer: [{ valueString: option.valueString }]
-          });
-        } else if (option['valueInteger']) {
-          onQrItemChange({
-            ...qrOpenChoice,
-            answer: [{ valueInteger: option.valueInteger }]
-          });
-        }
+        return;
+      }
+
+      const option = newValue;
+      if (option['valueCoding']) {
+        onQrItemChange({
+          ...qrOpenChoice,
+          answer: [{ valueCoding: option.valueCoding }]
+        });
+      } else if (option['valueString']) {
+        onQrItemChange({
+          ...qrOpenChoice,
+          answer: [{ valueString: option.valueString }]
+        });
+      } else if (option['valueInteger']) {
+        onQrItemChange({
+          ...qrOpenChoice,
+          answer: [{ valueInteger: option.valueInteger }]
+        });
       }
       return;
     }
     onQrItemChange(createEmptyQrItem(qItem));
   }
 
-  const openOpenChoiceSelectAnswerOption = (
-    <Autocomplete
-      id={qItem.id}
-      value={valueSelect ?? null}
-      options={answerOptions}
-      getOptionLabel={(option) => getAnswerOptionLabel(option)}
-      onChange={handleChange}
-      freeSolo
-      autoHighlight
-      sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
-      disabled={readOnly}
-      size="small"
-      placeholder={entryFormat}
-      renderInput={(params) => (
-        <StandardTextField
-          isTabled={isTabled}
-          label={displayPrompt}
-          {...params}
-          InputProps={{
-            ...params.InputProps,
-            endAdornment: (
-              <>
-                {params.InputProps.endAdornment}
-                {displayUnit}
-              </>
-            )
-          }}
-        />
-      )}
-    />
-  );
-
   if (isRepeated) {
-    return <>{openOpenChoiceSelectAnswerOption}</>;
+    return (
+      <OpenChoiceSelectAnswerOptionField
+        qItem={qItem}
+        options={answerOptions}
+        valueSelect={valueSelect}
+        isTabled={isTabled}
+        onChange={handleChange}
+      />
+    );
   }
 
   return (
@@ -140,7 +110,13 @@ function OpenChoiceSelectAnswerOptionItem(props: OpenChoiceSelectAnswerOptionIte
           <LabelWrapper qItem={qItem} />
         </Grid>
         <Grid item xs={7}>
-          {openOpenChoiceSelectAnswerOption}
+          <OpenChoiceSelectAnswerOptionField
+            qItem={qItem}
+            options={answerOptions}
+            valueSelect={valueSelect}
+            isTabled={isTabled}
+            onChange={handleChange}
+          />
           <DisplayInstructions displayInstructions={displayInstructions} />
         </Grid>
       </Grid>

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import { StandardTextField } from '../Textfield.styles';
+import Typography from '@mui/material/Typography';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import type { Coding, QuestionnaireItem } from 'fhir/r4';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+
+interface OpenChoiceSelectAnswerValueSetFieldProps extends PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  options: Coding[];
+  valueSelect: Coding | null;
+  serverError: Error | null;
+  onValueChange: (newValue: Coding | string | null) => void;
+}
+
+function OpenChoiceSelectAnswerValueSetField(props: OpenChoiceSelectAnswerValueSetFieldProps) {
+  const { qItem, options, valueSelect, serverError, isTabled, onValueChange } = props;
+
+  const { displayUnit, displayPrompt, readOnly, entryFormat } = useRenderingExtensions(qItem);
+
+  return (
+    <>
+      <Autocomplete
+        id={qItem.id}
+        value={valueSelect ?? null}
+        options={options}
+        getOptionLabel={(option) => (typeof option === 'string' ? option : `${option.display}`)}
+        onChange={(_, newValue) => onValueChange(newValue)}
+        onInputChange={(_, newValue) => onValueChange(newValue)}
+        freeSolo
+        autoHighlight
+        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
+        disabled={readOnly}
+        size="small"
+        placeholder={entryFormat}
+        renderInput={(params) => (
+          <StandardTextField
+            isTabled={isTabled}
+            label={displayPrompt}
+            {...params}
+            InputProps={{
+              ...params.InputProps,
+              endAdornment: (
+                <>
+                  {params.InputProps.endAdornment}
+                  {displayUnit}
+                </>
+              )
+            }}
+          />
+        )}
+      />
+      {serverError ? (
+        <Typography variant="subtitle2">
+          There was an error fetching options from the terminology server.
+        </Typography>
+      ) : null}
+    </>
+  );
+}
+
+export default OpenChoiceSelectAnswerValueSetField;

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

@@ -15,14 +15,10 @@
  * limitations under the License.
  */
 
-import type { SyntheticEvent } from 'react';
 import React from 'react';
-import Autocomplete from '@mui/material/Autocomplete';
 import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
 import type { Coding, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
-import { StandardTextField } from '../Textfield.styles';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import useValueSetCodings from '../../../hooks/useValueSetCodings';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
@@ -33,6 +29,7 @@ import type {
 } from '../../../interfaces/renderProps.interface';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import OpenChoiceSelectAnswerValueSetField from './OpenChoiceSelectAnswerValueSetField';
 
 interface OpenChoiceSelectAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
@@ -47,20 +44,19 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
 
   // Init input value
   const qrOpenChoice = qrItem ?? createEmptyQrItem(qItem);
-  let valueSelect: Coding | undefined = undefined;
+  let valueSelect: Coding | null = null;
   if (qrOpenChoice['answer']) {
-    valueSelect = qrOpenChoice['answer'][0].valueCoding;
+    valueSelect = qrOpenChoice['answer'][0].valueCoding ?? null;
   }
 
   // Get codings/options from valueSet
   const { codings, serverError } = useValueSetCodings(qItem);
 
   // Get additional rendering extensions
-  const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } =
-    useRenderingExtensions(qItem);
+  const { displayInstructions } = useRenderingExtensions(qItem);
 
   // Event handlers
-  function handleValueChange(_: SyntheticEvent<Element, Event>, newValue: Coding | string | null) {
+  function handleValueChange(newValue: Coding | string | null) {
     if (newValue) {
       if (typeof newValue === 'string') {
         onQrItemChange({
@@ -78,48 +74,17 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
     onQrItemChange(createEmptyQrItem(qItem));
   }
 
-  const openChoiceSelectAnswerValueSet = (
-    <>
-      <Autocomplete
-        id={qItem.id}
-        value={valueSelect ?? null}
+  if (isRepeated) {
+    return (
+      <OpenChoiceSelectAnswerValueSetField
+        qItem={qItem}
         options={codings}
-        getOptionLabel={(option) => (typeof option === 'string' ? option : `${option.display}`)}
-        onChange={handleValueChange}
-        onInputChange={(event, newValue) => handleValueChange(event, newValue)}
-        freeSolo
-        autoHighlight
-        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160, flexGrow: 1 }}
-        disabled={readOnly}
-        size="small"
-        placeholder={entryFormat}
-        renderInput={(params) => (
-          <StandardTextField
-            isTabled={isTabled}
-            label={displayPrompt}
-            {...params}
-            InputProps={{
-              ...params.InputProps,
-              endAdornment: (
-                <>
-                  {params.InputProps.endAdornment}
-                  {displayUnit}
-                </>
-              )
-            }}
-          />
-        )}
+        valueSelect={valueSelect}
+        serverError={serverError}
+        isTabled={isTabled}
+        onValueChange={handleValueChange}
       />
-      {serverError ? (
-        <Typography variant="subtitle2">
-          There was an error fetching options from the terminology server.
-        </Typography>
-      ) : null}
-    </>
-  );
-
-  if (isRepeated) {
-    return <>{openChoiceSelectAnswerValueSet}</>;
+    );
   }
 
   return (
@@ -129,7 +94,14 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
           <LabelWrapper qItem={qItem} />
         </Grid>
         <Grid item xs={7}>
-          {openChoiceSelectAnswerValueSet}
+          <OpenChoiceSelectAnswerValueSetField
+            qItem={qItem}
+            options={codings}
+            valueSelect={valueSelect}
+            serverError={serverError}
+            isTabled={isTabled}
+            onValueChange={handleValueChange}
+          />
           <DisplayInstructions displayInstructions={displayInstructions} />
         </Grid>
       </Grid>

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

@@ -20,7 +20,8 @@ import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithTextShownAttribute
 } from '../../../interfaces/renderProps.interface';
 import useQuestionnaireStore from '../../../stores/useQuestionnaireStore';
 import SingleItemSwitcher from './SingleItemSwitcher';
@@ -29,13 +30,14 @@ import useHidden from '../../../hooks/useHidden';
 interface SingleItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithTextShownAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function SingleItem(props: SingleItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, textShown, onQrItemChange } = props;
 
   const updateEnableWhenItem = useQuestionnaireStore((state) => state.updateEnableWhenItem);
 
@@ -60,6 +62,7 @@ function SingleItem(props: SingleItemProps) {
       qrItem={qrItem}
       isRepeated={isRepeated}
       isTabled={isTabled}
+      textShown={textShown}
       onQrItemChange={handleQrItemChange}
     />
   );

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

@@ -23,7 +23,8 @@ import Typography from '@mui/material/Typography';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithTextShownAttribute
 } from '../../../interfaces/renderProps.interface';
 import StringItem from '../StringItem/StringItem';
 import BooleanItem from '../BooleanItem/BooleanItem';
@@ -39,13 +40,14 @@ import UrlItem from '../UrlItem/UrlItem';
 interface SingleItemSwitcherProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithTextShownAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function SingleItemSwitcher(props: SingleItemSwitcherProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, textShown, onQrItemChange } = props;
 
   switch (qItem.type) {
     case 'string':
@@ -136,6 +138,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          textShown={textShown}
           onQrItemChange={onQrItemChange}
         />
       );
@@ -146,6 +149,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
+          textShown={textShown}
           onQrItemChange={onQrItemChange}
         />
       );

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';
@@ -42,6 +38,7 @@ 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;
@@ -49,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);
@@ -128,15 +125,7 @@ function QItemGroupTable(props: Props) {
       <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>
@@ -155,7 +144,7 @@ function QItemGroupTable(props: Props) {
 
               return (
                 <TableRow key={nanoId}>
-                  <QItemGroupTableRow
+                  <GroupTableRow
                     qItem={qItem}
                     qrItem={answeredQrItem}
                     qItemsIndexMap={qItemsIndexMap}
@@ -176,4 +165,4 @@ function QItemGroupTable(props: Props) {
   );
 }
 
-export default QItemGroupTable;
+export default GroupTable;

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

@@ -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;
@@ -74,4 +74,4 @@ function QItemGroupTableRow(props: Props) {
   );
 }
 
-export default QItemGroupTableRow;
+export default GroupTableRow;

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

@@ -15,4 +15,4 @@
  * limitations under the License.
  */
 
-export { default as GroupTable } from './QItemGroupTable';
+export { default as GroupTable } from './GroupTable';

package/src/components/Renderer/FormBodyTabbed.tsx

@@ -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/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) => {