@aehrc/smart-forms-renderer 0.36.1 → 0.38.2

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

@@ -0,0 +1,78 @@
+import React, { memo } from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import type { Pages } from '../../../interfaces/page.interface';
+import { useQuestionnaireStore } from '../../../stores';
+import NextPageButton from './NextPageButton';
+import PreviousPageButton from './PreviousPageButton';
+import useNextAndPreviousVisiblePages from '../../../hooks/useNextAndPreviousVisiblePages';
+
+interface PageButtonsWrapperProps {
+  currentPageIndex?: number;
+  pages?: Pages;
+}
+
+const PageButtonsWrapper = memo(function PageButtonsWrapper(props: PageButtonsWrapperProps) {
+  const { currentPageIndex, pages } = props;
+
+  const switchPage = useQuestionnaireStore.use.switchPage();
+
+  const { previousPageIndex, nextPageIndex, numOfVisiblePages } = useNextAndPreviousVisiblePages(
+    currentPageIndex,
+    pages
+  );
+
+  const pagesNotDefined = currentPageIndex === undefined || pages === undefined;
+
+  // Event handlers
+  function handlePreviousPageButtonClick() {
+    if (previousPageIndex === null) {
+      return;
+    }
+
+    switchPage(previousPageIndex);
+
+    // Scroll to top of page
+    window.scrollTo(0, 0);
+  }
+
+  function handleNextPageButtonClick() {
+    if (nextPageIndex === null) {
+      return;
+    }
+
+    switchPage(nextPageIndex);
+
+    // Scroll to top of page
+    window.scrollTo(0, 0);
+  }
+
+  if (pagesNotDefined) {
+    return null;
+  }
+
+  const previousPageButtonHidden = previousPageIndex === null;
+  const nextPageButtonHidden = nextPageIndex === null;
+
+  // This is more of a fallback check to prevent the user from navigating to an invisble page if buttons are visble for some reason
+  const pageButtonsDisabled = numOfVisiblePages <= 1;
+
+  return (
+    <Box display="flex" mt={3} gap={2} alignItems="center">
+      <Box flexGrow={1} />
+      <Typography variant="subtitle2" color="text.secondary">
+        Page {`${currentPageIndex + 1} / ${numOfVisiblePages}`}
+      </Typography>
+      <PreviousPageButton
+        isDisabled={pageButtonsDisabled || previousPageButtonHidden}
+        onPreviousPageClick={handlePreviousPageButtonClick}
+      />
+      <NextPageButton
+        isDisabled={pageButtonsDisabled || nextPageButtonHidden}
+        onNextPageClick={handleNextPageButtonClick}
+      />
+    </Box>
+  );
+});
+
+export default PageButtonsWrapper;

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

@@ -0,0 +1,41 @@
+/*
+ * 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 Iconify from '../../Iconify/Iconify';
+import { SecondaryFab } from '../Button.styles';
+
+interface PreviousPageButtonProps {
+  isDisabled: boolean;
+  onPreviousPageClick: () => void;
+}
+
+function PreviousPageButton(props: PreviousPageButtonProps) {
+  const { isDisabled, onPreviousPageClick } = props;
+
+  return (
+    <SecondaryFab
+      size="small"
+      aria-label="back"
+      disabled={isDisabled}
+      onClick={onPreviousPageClick}>
+      <Iconify icon="material-symbols:chevron-left-rounded" />
+    </SecondaryFab>
+  );
+}
+
+export default PreviousPageButton;

package/src/components/FormComponents/QuantityItem/QuantityComparatorField.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import MuiTextField from '../TextItem/MuiTextField';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import type { Quantity } from 'fhir/r4';
+
+interface QuantityComparatorFieldProps extends PropsWithIsTabledAttribute {
+  linkId: string;
+  options: Quantity['comparator'][];
+  valueSelect: Quantity['comparator'] | null;
+  readOnly: boolean;
+  onChange: (newValue: Quantity['comparator'] | null) => void;
+}
+
+function QuantityComparatorField(props: QuantityComparatorFieldProps) {
+  const { linkId, options, valueSelect, readOnly, onChange } = props;
+
+  return (
+    <Box>
+      <Autocomplete
+        id={linkId + '-comparator'}
+        value={valueSelect ?? null}
+        options={options}
+        onChange={(_, newValue) => onChange(newValue as Quantity['comparator'])}
+        autoHighlight
+        sx={{ width: 88 }}
+        disabled={readOnly}
+        size="small"
+        renderInput={(params) => <MuiTextField sx={{ width: 88 }} {...params} />}
+      />
+      <Typography variant="caption" color="text.secondary">
+        Symbol (optional)
+      </Typography>
+    </Box>
+  );
+}
+
+export default QuantityComparatorField;

package/src/components/FormComponents/QuantityItem/QuantityField.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import InputAdornment from '@mui/material/InputAdornment';
+import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
+import { StandardTextField } from '../Textfield.styles';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+
+interface QuantityFieldProps extends PropsWithIsTabledAttribute {
+  linkId: string;
+  input: string;
+  feedback: string;
+  displayPrompt: string;
+  displayUnit: string;
+  entryFormat: string;
+  readOnly: boolean;
+  calcExpUpdated: boolean;
+  onInputChange: (value: string) => void;
+}
+
+function QuantityField(props: QuantityFieldProps) {
+  const {
+    linkId,
+    input,
+    feedback,
+    displayPrompt,
+    displayUnit,
+    entryFormat,
+    readOnly,
+    calcExpUpdated,
+    isTabled,
+    onInputChange
+  } = props;
+
+  return (
+    <StandardTextField
+      id={linkId}
+      value={input}
+      error={!!feedback}
+      onChange={(event) => onInputChange(event.target.value)}
+      disabled={readOnly}
+      label={displayPrompt}
+      placeholder={entryFormat === '' ? '0.0' : entryFormat}
+      fullWidth
+      isTabled={isTabled}
+      size="small"
+      inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position={'end'}>
+            <FadingCheckIcon fadeIn={calcExpUpdated} disabled={readOnly} />
+            {displayUnit}
+          </InputAdornment>
+        )
+      }}
+      helperText={feedback}
+      data-test="q-item-quantity-field"
+    />
+  );
+}
+
+export default QuantityField;

package/src/components/FormComponents/QuantityItem/QuantityItem.tsx

@@ -0,0 +1,286 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import type {
+  Quantity,
+  QuestionnaireItem,
+  QuestionnaireItemAnswerOption,
+  QuestionnaireResponseItem
+} from 'fhir/r4';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import useValidationFeedback from '../../../hooks/useValidationFeedback';
+import debounce from 'lodash.debounce';
+import { DEBOUNCE_DURATION } from '../../../utils/debounce';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import { parseDecimalStringWithPrecision } from '../../../utils/parseInputs';
+import { getDecimalPrecision } from '../../../utils/itemControl';
+import useStringInput from '../../../hooks/useStringInput';
+import useReadOnly from '../../../hooks/useReadOnly';
+import { useQuestionnaireStore } from '../../../stores';
+import Box from '@mui/material/Box';
+import QuantityField from './QuantityField';
+import QuantityUnitField from './QuantityUnitField';
+import {
+  createQuantityItemAnswer,
+  quantityComparators,
+  stringIsComparator
+} from '../../../utils/quantity';
+import QuantityComparatorField from './QuantityComparatorField';
+import useQuantityCalculatedExpression from '../../../hooks/useQuantityCalculatedExpression';
+
+interface QuantityItemProps
+  extends PropsWithQrItemChangeHandler,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute,
+    PropsWithParentIsReadOnlyAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem | null;
+}
+
+function QuantityItem(props: QuantityItemProps) {
+  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
+
+  const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
+
+  const readOnly = useReadOnly(qItem, parentIsReadOnly);
+  const precision = getDecimalPrecision(qItem);
+  const { displayUnit, displayPrompt, entryFormat, quantityUnit } = useRenderingExtensions(qItem);
+
+  // Get units options if present
+  const unitOptions = useMemo(
+    () =>
+      qItem.extension?.filter(
+        (f) => f.url === 'http://hl7.org/fhir/StructureDefinition/questionnaire-unitOption'
+      ) ?? [],
+    [qItem]
+  );
+
+  // Init inputs
+  let valueQuantity: Quantity = {};
+  let initialValueInput = '';
+  let initialComparatorInput: Quantity['comparator'] | null = null;
+  let initialUnitInput: QuestionnaireItemAnswerOption | null =
+    quantityUnit ?? unitOptions?.at(0) ?? null;
+  if (qrItem?.answer) {
+    if (qrItem?.answer[0].valueQuantity) {
+      valueQuantity = qrItem.answer[0].valueQuantity;
+    }
+
+    initialValueInput =
+      (precision ? valueQuantity.value?.toFixed(precision) : valueQuantity.value?.toString()) || '';
+
+    if (valueQuantity.comparator && stringIsComparator(valueQuantity.comparator)) {
+      initialComparatorInput = valueQuantity.comparator;
+    }
+
+    if (valueQuantity.code && valueQuantity.system) {
+      initialUnitInput = {
+        valueCoding: {
+          code: valueQuantity.code,
+          system: valueQuantity.system,
+          display: valueQuantity.unit
+        }
+      };
+    }
+  }
+
+  // input states
+  const [valueInput, setValueInput] = useStringInput(initialValueInput);
+  const [comparatorInput, setComparatorInput] = useState<Quantity['comparator'] | null>(
+    initialComparatorInput
+  );
+  const [unitInput, setUnitInput] = useState<QuestionnaireItemAnswerOption | null>(
+    initialUnitInput
+  );
+
+  // Perform validation checks
+  const feedback = useValidationFeedback(qItem, valueInput);
+
+  // Process calculated expressions
+  const { calcExpUpdated } = useQuantityCalculatedExpression({
+    qItem: qItem,
+    inputValue: valueInput,
+    precision: precision,
+    onChangeByCalcExpressionDecimal: (newValueDecimal: number) => {
+      setValueInput(
+        typeof precision === 'number'
+          ? newValueDecimal.toFixed(precision)
+          : newValueDecimal.toString()
+      );
+      onQrItemChange({
+        ...createEmptyQrItem(qItem),
+        answer: [
+          {
+            valueQuantity: {
+              value: newValueDecimal,
+              unit: unitInput?.valueCoding?.display,
+              system: unitInput?.valueCoding?.system,
+              code: unitInput?.valueCoding?.code
+            }
+          }
+        ]
+      });
+    },
+    onChangeByCalcExpressionQuantity: (
+      newValueDecimal: number,
+      newUnitSystem,
+      newUnitCode,
+      newUnitDisplay
+    ) => {
+      setValueInput(
+        typeof precision === 'number'
+          ? newValueDecimal.toFixed(precision)
+          : newValueDecimal.toString()
+      );
+      onQrItemChange({
+        ...createEmptyQrItem(qItem),
+        answer: [
+          {
+            valueQuantity: {
+              value: newValueDecimal,
+              unit: newUnitDisplay,
+              system: newUnitSystem,
+              code: newUnitCode
+            }
+          }
+        ]
+      });
+    },
+    onChangeByCalcExpressionNull: () => {
+      setValueInput('');
+      onQrItemChange(createEmptyQrItem(qItem));
+    }
+  });
+
+  // Event handlers
+  function handleComparatorInputChange(newComparatorInput: Quantity['comparator'] | null) {
+    setComparatorInput(newComparatorInput);
+
+    if (!valueInput) return;
+
+    onQrItemChange({
+      ...createEmptyQrItem(qItem),
+      answer: createQuantityItemAnswer(precision, valueInput, newComparatorInput, unitInput)
+    });
+  }
+
+  function handleUnitInputChange(newUnitInput: QuestionnaireItemAnswerOption | null) {
+    setUnitInput(newUnitInput);
+
+    if (!valueInput) return;
+
+    onQrItemChange({
+      ...createEmptyQrItem(qItem),
+      answer: createQuantityItemAnswer(precision, valueInput, comparatorInput, newUnitInput)
+    });
+  }
+
+  function handleValueInputChange(newInput: string) {
+    const parsedNewInput: string = parseDecimalStringWithPrecision(newInput, precision);
+
+    setValueInput(parsedNewInput);
+    updateQrItemWithDebounce(parsedNewInput);
+  }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const updateQrItemWithDebounce = useCallback(
+    debounce((parsedNewInput: string) => {
+      if (parsedNewInput === '') {
+        onQrItemChange(createEmptyQrItem(qItem));
+      } else {
+        onQrItemChange({
+          ...createEmptyQrItem(qItem),
+          answer: createQuantityItemAnswer(precision, parsedNewInput, comparatorInput, unitInput)
+        });
+      }
+    }, DEBOUNCE_DURATION),
+    [onQrItemChange, qItem, displayUnit, precision, comparatorInput, unitInput]
+  ); // Dependencies are tested, debounce is causing eslint to not recognise dependencies
+
+  if (isRepeated) {
+    return (
+      <Box data-test="q-item-quantity-box" display="flex" gap={1}>
+        <QuantityComparatorField
+          linkId={qItem.linkId}
+          options={quantityComparators}
+          valueSelect={comparatorInput}
+          readOnly={readOnly}
+          isTabled={isTabled}
+          onChange={handleComparatorInputChange}
+        />
+        <QuantityField
+          linkId={qItem.linkId}
+          input={valueInput}
+          feedback={feedback}
+          displayPrompt={displayPrompt}
+          displayUnit={displayUnit}
+          entryFormat={entryFormat}
+          readOnly={readOnly}
+          calcExpUpdated={calcExpUpdated}
+          isTabled={isTabled}
+          onInputChange={handleValueInputChange}
+        />
+        {unitOptions.length > 0 ? (
+          <QuantityUnitField
+            linkId={qItem.linkId}
+            options={unitOptions}
+            valueSelect={unitInput}
+            readOnly={readOnly}
+            isTabled={isTabled}
+            onChange={handleUnitInputChange}
+          />
+        ) : null}
+      </Box>
+    );
+  }
+
+  return (
+    <FullWidthFormComponentBox
+      data-test="q-item-quantity-box"
+      data-linkid={qItem.linkId}
+      onClick={() => onFocusLinkId(qItem.linkId)}>
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
+        <Box display="flex" gap={1}>
+          <QuantityComparatorField
+            linkId={qItem.linkId}
+            options={quantityComparators}
+            valueSelect={comparatorInput}
+            readOnly={readOnly}
+            isTabled={isTabled}
+            onChange={handleComparatorInputChange}
+          />
+          <QuantityField
+            linkId={qItem.linkId}
+            input={valueInput}
+            feedback={feedback}
+            displayPrompt={displayPrompt}
+            displayUnit={displayUnit}
+            entryFormat={entryFormat}
+            readOnly={readOnly}
+            calcExpUpdated={calcExpUpdated}
+            isTabled={isTabled}
+            onInputChange={handleValueInputChange}
+          />
+          {unitOptions.length > 0 ? (
+            <QuantityUnitField
+              linkId={qItem.linkId}
+              options={unitOptions}
+              valueSelect={unitInput}
+              readOnly={readOnly}
+              isTabled={isTabled}
+              onChange={handleUnitInputChange}
+            />
+          ) : null}
+        </Box>
+      </ItemFieldGrid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default QuantityItem;

package/src/components/FormComponents/QuantityItem/QuantityUnitField.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { getAnswerOptionLabel } from '../../../utils/openChoice';
+import { StandardTextField, TEXT_FIELD_WIDTH } from '../Textfield.styles';
+import Autocomplete from '@mui/material/Autocomplete';
+import type { QuestionnaireItemAnswerOption } from 'fhir/r4';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+
+interface QuantityUnitFieldProps extends PropsWithIsTabledAttribute {
+  linkId: string;
+  options: QuestionnaireItemAnswerOption[];
+  valueSelect: QuestionnaireItemAnswerOption | null;
+  readOnly: boolean;
+  onChange: (newValue: QuestionnaireItemAnswerOption | null) => void;
+}
+
+function QuantityUnitField(props: QuantityUnitFieldProps) {
+  const { linkId, options, valueSelect, readOnly, isTabled, onChange } = props;
+
+  return (
+    <Autocomplete
+      id={linkId + '-unit'}
+      value={valueSelect ?? null}
+      isOptionEqualToValue={(option, value) =>
+        option.valueCoding?.code === value?.valueCoding?.code
+      }
+      options={options}
+      getOptionLabel={(option) => getAnswerOptionLabel(option)}
+      onChange={(_, newValue) => onChange(newValue as QuestionnaireItemAnswerOption | null)}
+      autoHighlight
+      sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160, flexGrow: 1 }}
+      disabled={readOnly}
+      size="small"
+      renderInput={(params) => <StandardTextField isTabled={isTabled} {...params} />}
+    />
+  );
+}
+
+export default QuantityUnitField;

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

@@ -40,6 +40,7 @@ import SliderItem from '../SliderItem/SliderItem';
 import IntegerItem from '../IntegerItem/IntegerItem';
 import AttachmentItem from '../AttachmentItem/AttachmentItem';
 import CustomDateTimeItem from '../DateTimeItems/CustomDateTimeItem/CustomDateTimeItem';
+import QuantityItem from '../QuantityItem/QuantityItem';
 
 interface SingleItemSwitcherProps
   extends PropsWithQrItemChangeHandler,
@@ -219,7 +220,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
     case 'quantity':
       // FIXME quantity item uses the same component as decimal item currently
       return (
-        <DecimalItem
+        <QuantityItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}

package/src/components/Renderer/BaseRenderer.tsx

@@ -24,7 +24,9 @@ import { useQuestionnaireResponseStore, useQuestionnaireStore } from '../../stor
 import cloneDeep from 'lodash.clonedeep';
 import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
 import { updateQrItemsInGroup } from '../../utils/qrItem';
+import { everyIsPages } from '../../utils/page';
 import type { QrRepeatGroup } from '../../interfaces/repeatGroup.interface';
+import FormTopLevelPage from './FormTopLevelPage';
 
 /**
  * Main component of the form-rendering engine.
@@ -74,6 +76,25 @@ function BaseRenderer() {
   // If an item has multiple answers, it is a repeat group
   const topLevelQRItemsByIndex = getQrItemsIndex(topLevelQItems, topLevelQRItems, qItemsIndexMap);
 
+  const everyItemIsPage = everyIsPages(topLevelQItems);
+
+  if (everyItemIsPage) {
+    return (
+      <Fade in={true} timeout={500}>
+        <Container maxWidth="xl">
+          <FormTopLevelPage
+            topLevelQItems={topLevelQItems}
+            topLevelQRItems={topLevelQRItemsByIndex}
+            parentIsReadOnly={readOnly}
+            onQrItemChange={(newTopLevelQRItem) =>
+              handleTopLevelQRItemSingleChange(newTopLevelQRItem)
+            }
+          />
+        </Container>
+      </Fade>
+    );
+  }
+
   return (
     <Fade in={true} timeout={500}>
       <Container maxWidth="xl">

package/src/components/Renderer/FormBodyPage.tsx

@@ -0,0 +1,93 @@
+import React, { useMemo } from 'react';
+import Grid from '@mui/material/Grid';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import TabContext from '@mui/lab/TabContext';
+import TabPanel from '@mui/lab/TabPanel';
+import GroupItem from '../FormComponents/GroupItem/GroupItem';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../interfaces/renderProps.interface';
+import { useQuestionnaireStore } from '../../stores';
+import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
+import { createEmptyQrGroup, updateQrItemsInGroup } from '../../utils/qrItem';
+
+interface FormBodyPageProps
+  extends PropsWithQrItemChangeHandler,
+    PropsWithParentIsReadOnlyAttribute {
+  topLevelQItem: QuestionnaireItem;
+  topLevelQRItem: QuestionnaireResponseItem | null;
+}
+
+function FormBodyPage(props: FormBodyPageProps) {
+  const { topLevelQItem, topLevelQRItem, parentIsReadOnly, onQrItemChange } = props;
+
+  const pages = useQuestionnaireStore.use.pages();
+  const currentPage = useQuestionnaireStore.use.currentPageIndex();
+
+  const indexMap: Record<string, number> = useMemo(
+    () => mapQItemsIndex(topLevelQItem),
+    [topLevelQItem]
+  );
+
+  const nonNullTopLevelQRItem = topLevelQRItem ?? createEmptyQrGroup(topLevelQItem);
+
+  const qItems = topLevelQItem.item;
+  const qrItems = nonNullTopLevelQRItem.item;
+
+  function handleQrGroupChange(qrItem: QuestionnaireResponseItem) {
+    updateQrItemsInGroup(qrItem, null, nonNullTopLevelQRItem, indexMap);
+    onQrItemChange(nonNullTopLevelQRItem);
+  }
+
+  if (!qItems || !qrItems) {
+    return <>Unable to load form</>;
+  }
+
+  const qrItemsByIndex = getQrItemsIndex(qItems, qrItems, indexMap);
+
+  return (
+    <Grid container spacing={1.5}>
+      <TabContext value={currentPage.toString()}>
+        <Grid item xs={12} md={12} lg={12}>
+          {qItems.map((qItem, i) => {
+            const qrItem = qrItemsByIndex[i];
+
+            const isNotRepeatGroup = !Array.isArray(qrItem);
+            const isPage = !!pages[qItem.linkId];
+
+            if (!isPage || !isNotRepeatGroup) {
+              // Something has gone horribly wrong
+              return null;
+            }
+
+            const isRepeated = qItem.repeats ?? false;
+            const pageIsMarkedAsComplete = pages[qItem.linkId].isComplete ?? false;
+
+            return (
+              <TabPanel
+                key={qItem.linkId}
+                sx={{ p: 0 }}
+                value={i.toString()}
+                data-test="renderer-page-panel">
+                <GroupItem
+                  qItem={qItem}
+                  qrItem={qrItem ?? null}
+                  isRepeated={isRepeated}
+                  groupCardElevation={1}
+                  pageIsMarkedAsComplete={pageIsMarkedAsComplete}
+                  pages={pages}
+                  currentPageIndex={currentPage}
+                  parentIsReadOnly={parentIsReadOnly}
+                  onQrItemChange={handleQrGroupChange}
+                />
+              </TabPanel>
+            );
+          })}
+        </Grid>
+      </TabContext>
+    </Grid>
+  );
+}
+
+export default FormBodyPage;