@aehrc/smart-forms-renderer 0.44.3 → 1.0.0-alpha.10

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

@@ -20,10 +20,10 @@ import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithRenderingExtensionsAttribute
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import debounce from 'lodash.debounce';
 import { createEmptyQrItem } from '../../../utils/qrItem';
@@ -34,22 +34,32 @@ import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useStringCalculatedExpression from '../../../hooks/useStringCalculatedExpression';
 import useReadOnly from '../../../hooks/useReadOnly';
 import { useQuestionnaireStore } from '../../../stores';
+import { ItemLabelWrapper } from '../ItemParts';
 
 interface StringItemProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
+    PropsWithRenderingExtensionsAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
 }
 function StringItem(props: StringItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
+  const {
+    qItem,
+    qrItem,
+    isRepeated,
+    isTabled,
+    renderingExtensions,
+    parentIsReadOnly,
+    onQrItemChange
+  } = props;
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
+  const { displayUnit, displayPrompt, entryFormat } = renderingExtensions;
 
   // Init input value
   const answerKey = qrItem?.answer?.[0].id;
@@ -120,20 +130,25 @@ function StringItem(props: StringItemProps) {
       data-test="q-item-string-box"
       data-linkid={qItem.linkId}
       onClick={() => onFocusLinkId(qItem.linkId)}>
-      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
-        <StringField
-          linkId={qItem.linkId}
-          input={input}
-          feedback={feedback}
-          displayPrompt={displayPrompt}
-          displayUnit={displayUnit}
-          entryFormat={entryFormat}
-          readOnly={readOnly}
-          calcExpUpdated={calcExpUpdated}
-          onInputChange={handleChange}
-          isTabled={isTabled}
-        />
-      </ItemFieldGrid>
+      <ItemFieldGrid
+        qItem={qItem}
+        readOnly={readOnly}
+        labelChildren={<ItemLabelWrapper qItem={qItem} readOnly={readOnly} />}
+        fieldChildren={
+          <StringField
+            linkId={qItem.linkId}
+            input={input}
+            feedback={feedback}
+            displayPrompt={displayPrompt}
+            displayUnit={displayUnit}
+            entryFormat={entryFormat}
+            readOnly={readOnly}
+            calcExpUpdated={calcExpUpdated}
+            onInputChange={handleChange}
+            isTabled={isTabled}
+          />
+        }
+      />
     </FullWidthFormComponentBox>
   );
 }

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

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

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

@@ -19,6 +19,7 @@ import React from 'react';
 import InputAdornment from '@mui/material/InputAdornment';
 import MuiTextField from './MuiTextField';
 import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
+import Typography from '@mui/material/Typography';
 
 interface TextFieldProps {
   linkId: string;
@@ -60,9 +61,11 @@ function TextField(props: TextFieldProps) {
       minRows={3}
       InputProps={{
         endAdornment: (
-          <InputAdornment position={'end'}>
+          <InputAdornment position="end">
             <FadingCheckIcon fadeIn={calcExpUpdated} disabled={readOnly} />
-            {displayUnit}
+            <Typography color={readOnly ? 'text.disabled' : 'text.secondary'}>
+              {displayUnit}
+            </Typography>
           </InputAdornment>
         )
       }}

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

@@ -19,10 +19,10 @@ import React, { useCallback, useState } from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithRenderingExtensionsAttribute
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import debounce from 'lodash.debounce';
 import { createEmptyQrItem } from '../../../utils/qrItem';
@@ -33,22 +33,25 @@ import useStringCalculatedExpression from '../../../hooks/useStringCalculatedExp
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useReadOnly from '../../../hooks/useReadOnly';
 import { useQuestionnaireStore } from '../../../stores';
+import { ItemLabelWrapper } from '../ItemParts';
 
 interface TextItemProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
+    PropsWithRenderingExtensionsAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
 }
 
 function TextItem(props: TextItemProps) {
-  const { qItem, qrItem, isRepeated, parentIsReadOnly, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, renderingExtensions, parentIsReadOnly, onQrItemChange } =
+    props;
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
+  const { displayUnit, displayPrompt, entryFormat } = renderingExtensions;
 
   // Init input value
   const answerKey = qrItem?.answer?.[0].id;
@@ -118,19 +121,24 @@ function TextItem(props: TextItemProps) {
       data-test="q-item-text-box"
       data-linkid={qItem.linkId}
       onClick={() => onFocusLinkId(qItem.linkId)}>
-      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
-        <TextField
-          linkId={qItem.linkId}
-          input={input}
-          feedback={feedback}
-          displayPrompt={displayPrompt}
-          displayUnit={displayUnit}
-          entryFormat={entryFormat}
-          readOnly={readOnly}
-          calcExpUpdated={calcExpUpdated}
-          onInputChange={handleInputChange}
-        />
-      </ItemFieldGrid>
+      <ItemFieldGrid
+        qItem={qItem}
+        readOnly={readOnly}
+        labelChildren={<ItemLabelWrapper qItem={qItem} readOnly={readOnly} />}
+        fieldChildren={
+          <TextField
+            linkId={qItem.linkId}
+            input={input}
+            feedback={feedback}
+            displayPrompt={displayPrompt}
+            displayUnit={displayUnit}
+            entryFormat={entryFormat}
+            readOnly={readOnly}
+            calcExpUpdated={calcExpUpdated}
+            onInputChange={handleInputChange}
+          />
+        }
+      />
     </FullWidthFormComponentBox>
   );
 }

package/src/components/FormComponents/Textfield.styles.ts

@@ -18,14 +18,12 @@
 import { styled } from '@mui/material/styles';
 import TextField from '@mui/material/TextField';
 
-export const TEXT_FIELD_WIDTH = 320;
-
 // Always use this accompanied by the TextField prop fullWidth
 export const StandardTextField = styled(TextField, {
-  shouldForwardProp: (prop) => prop !== 'isTabled'
-})<{ isTabled: boolean }>(({ isTabled }) => ({
-  // Set 280 as the standard width for a field
-  // Set a theoretical infinite maxWidth if field is within a table to fill the table row
-  maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000,
+  shouldForwardProp: (prop) => prop !== 'isTabled' && prop !== 'textFieldWidth'
+})<{ isTabled: boolean; textFieldWidth: number }>(({ isTabled, textFieldWidth }) => ({
+  // Set textFieldWidth (defaults to 320 in rendererStylingStore) as the standard width for a field
+  // Set a theoretical infinite maxWidth (3000) if field is within a table to fill the table row
+  maxWidth: !isTabled ? textFieldWidth : 3000,
   minWidth: 160
 }));

package/src/components/FormComponents/TimeItem/TimeField.tsx

@@ -20,7 +20,7 @@ import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps
 import type { Dayjs } from 'dayjs';
 import { LocalizationProvider, TimePicker as MuiTimePicker } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { TEXT_FIELD_WIDTH } from '../Textfield.styles';
+import { useRendererStylingStore } from '../../../stores';
 
 interface TimeFieldProps extends PropsWithIsTabledAttribute {
   value: Dayjs | null;
@@ -33,6 +33,8 @@ interface TimeFieldProps extends PropsWithIsTabledAttribute {
 function TimeField(props: TimeFieldProps) {
   const { value, displayPrompt, entryFormat, readOnly, isTabled, onTimeChange } = props;
 
+  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <MuiTimePicker
@@ -40,7 +42,7 @@ function TimeField(props: TimeFieldProps) {
         value={value}
         disabled={readOnly}
         label={displayPrompt}
-        sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160 }}
+        sx={{ maxWidth: !isTabled ? textFieldWidth : 3000, minWidth: 160 }}
         slotProps={{
           textField: {
             fullWidth: true

package/src/components/FormComponents/TimeItem/TimeItem.tsx

@@ -20,10 +20,10 @@ import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithRenderingExtensionsAttribute
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import TimeField from './TimeField';
@@ -32,23 +32,33 @@ import dayjs from 'dayjs';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useReadOnly from '../../../hooks/useReadOnly';
 import { useQuestionnaireStore } from '../../../stores';
+import { ItemLabelWrapper } from '../ItemParts';
 
 interface TimeItemProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
+    PropsWithRenderingExtensionsAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
 }
 
 function TimeItem(props: TimeItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
+  const {
+    qItem,
+    qrItem,
+    isRepeated,
+    isTabled,
+    renderingExtensions,
+    parentIsReadOnly,
+    onQrItemChange
+  } = props;
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayPrompt, entryFormat } = useRenderingExtensions(qItem);
+  const { displayPrompt, entryFormat } = renderingExtensions;
 
   // Init input value
   const answerKey = qrItem?.answer?.[0].id;
@@ -86,16 +96,21 @@ function TimeItem(props: TimeItemProps) {
       data-test="q-item-time-box"
       data-linkid={qItem.linkId}
       onClick={() => onFocusLinkId(qItem.linkId)}>
-      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
-        <TimeField
-          value={timeDayJs}
-          displayPrompt={displayPrompt}
-          entryFormat={entryFormat}
-          readOnly={readOnly}
-          onTimeChange={handleTimeChange}
-          isTabled={isTabled}
-        />
-      </ItemFieldGrid>
+      <ItemFieldGrid
+        qItem={qItem}
+        readOnly={readOnly}
+        labelChildren={<ItemLabelWrapper qItem={qItem} readOnly={readOnly} />}
+        fieldChildren={
+          <TimeField
+            value={timeDayJs}
+            displayPrompt={displayPrompt}
+            entryFormat={entryFormat}
+            readOnly={readOnly}
+            onTimeChange={handleTimeChange}
+            isTabled={isTabled}
+          />
+        }
+      />
     </FullWidthFormComponentBox>
   );
 }

package/src/components/FormComponents/UrlItem/UrlField.tsx

@@ -19,6 +19,8 @@ import React from 'react';
 import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
 import InputAdornment from '@mui/material/InputAdornment';
 import { StandardTextField } from '../Textfield.styles';
+import { useRendererStylingStore } from '../../../stores';
+import Typography from '@mui/material/Typography';
 
 interface UrlFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
@@ -44,9 +46,12 @@ function UrlField(props: UrlFieldProps) {
     onInputChange
   } = props;
 
+  const textFieldWidth = useRendererStylingStore.use.textFieldWidth();
+
   return (
     <StandardTextField
       fullWidth
+      textFieldWidth={textFieldWidth}
       isTabled={isTabled}
       id={linkId}
       value={input}
@@ -56,7 +61,15 @@ function UrlField(props: UrlFieldProps) {
       placeholder={entryFormat}
       disabled={readOnly}
       size="small"
-      InputProps={{ endAdornment: <InputAdornment position={'end'}>{displayUnit}</InputAdornment> }}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position="end">
+            <Typography color={readOnly ? 'text.disabled' : 'text.secondary'}>
+              {displayUnit}
+            </Typography>
+          </InputAdornment>
+        )
+      }}
       helperText={feedback}
       data-test="q-item-url-field"
     />

package/src/components/FormComponents/UrlItem/UrlItem.tsx

@@ -20,10 +20,10 @@ import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithRenderingExtensionsAttribute
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import useValidationFeedback from '../../../hooks/useValidationFeedback';
 import debounce from 'lodash.debounce';
 import { createEmptyQrItem } from '../../../utils/qrItem';
@@ -33,22 +33,32 @@ import UrlField from './UrlField';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useReadOnly from '../../../hooks/useReadOnly';
 import { useQuestionnaireStore } from '../../../stores';
+import { ItemLabelWrapper } from '../ItemParts';
 
 interface UrlItemProps
   extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
+    PropsWithRenderingExtensionsAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem | null;
 }
 function UrlItem(props: UrlItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, parentIsReadOnly, onQrItemChange } = props;
+  const {
+    qItem,
+    qrItem,
+    renderingExtensions,
+    isRepeated,
+    isTabled,
+    parentIsReadOnly,
+    onQrItemChange
+  } = props;
 
   const onFocusLinkId = useQuestionnaireStore.use.onFocusLinkId();
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
-  const { displayUnit, displayPrompt, entryFormat } = useRenderingExtensions(qItem);
+  const { displayUnit, displayPrompt, entryFormat } = renderingExtensions;
 
   // Init input value
   const answerKey = qrItem?.answer?.[0].id;
@@ -101,19 +111,24 @@ function UrlItem(props: UrlItemProps) {
       data-test="q-item-url-box"
       data-linkid={qItem.linkId}
       onClick={() => onFocusLinkId(qItem.linkId)}>
-      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
-        <UrlField
-          linkId={qItem.linkId}
-          input={input}
-          feedback={feedback}
-          displayPrompt={displayPrompt}
-          displayUnit={displayUnit}
-          entryFormat={entryFormat}
-          readOnly={readOnly}
-          onInputChange={handleChange}
-          isTabled={isTabled}
-        />
-      </ItemFieldGrid>
+      <ItemFieldGrid
+        qItem={qItem}
+        readOnly={readOnly}
+        labelChildren={<ItemLabelWrapper qItem={qItem} readOnly={readOnly} />}
+        fieldChildren={
+          <UrlField
+            linkId={qItem.linkId}
+            input={input}
+            feedback={feedback}
+            displayPrompt={displayPrompt}
+            displayUnit={displayUnit}
+            entryFormat={entryFormat}
+            readOnly={readOnly}
+            onInputChange={handleChange}
+            isTabled={isTabled}
+          />
+        }
+      />
     </FullWidthFormComponentBox>
   );
 }

package/src/components/FormComponents/index.ts

@@ -16,8 +16,16 @@
  */
 
 export { SingleItem } from './SingleItem';
+export { GroupItem } from './GroupItem';
 export { RepeatItem } from './RepeatItem';
 export { RepeatGroup } from './RepeatGroup';
 export { GroupTable } from './Tables';
 export { GridGroup } from './GridGroup';
 export { parseFhirDateToDisplayDate } from './DateTimeItems';
+export { ItemFieldGrid, ItemLabelWrapper } from './ItemParts';
+
+// item type components
+export { BooleanField } from './BooleanItem';
+export { StringField } from './StringItem';
+export { DecimalField } from './DecimalItem';
+export { ChoiceRadioSingle } from './ChoiceItems';

package/src/components/Renderer/BaseRenderer.tsx

@@ -22,9 +22,9 @@ import type { QuestionnaireResponse, QuestionnaireResponseItem } from 'fhir/r4';
 import { useQuestionnaireResponseStore, useQuestionnaireStore } from '../../stores';
 import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
 import { updateQrItemsInGroup } from '../../utils/qrItem';
-import { everyIsPages } from '../../utils/page';
+import { isPage } from '../../utils/page';
 import type { QrRepeatGroup } from '../../interfaces/repeatGroup.interface';
-import FormTopLevelPage from './FormTopLevelPage';
+import FormBodyPaginated from './FormBodyPaginated';
 import { Container } from '@mui/material';
 
 /**
@@ -76,13 +76,13 @@ function BaseRenderer() {
   // If an item has multiple answers, it is a repeat group
   const topLevelQRItemsByIndex = getQrItemsIndex(topLevelQItems, topLevelQRItems, qItemsIndexMap);
 
-  const everyItemIsPage = everyIsPages(topLevelQItems);
+  const formIsPaginated = topLevelQItems.some((i) => isPage(i));
 
-  if (everyItemIsPage) {
+  if (formIsPaginated) {
     return (
       <Fade in={true} timeout={500}>
         <Container disableGutters maxWidth="xl" key={responseKey}>
-          <FormTopLevelPage
+          <FormBodyPaginated
             topLevelQItems={topLevelQItems}
             topLevelQRItems={topLevelQRItemsByIndex}
             parentIsReadOnly={readOnly}

package/src/components/Renderer/FormBodyPaginated.tsx

@@ -0,0 +1,127 @@
+import React 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 { useRendererStylingStore } from '../../stores/rendererStylingStore';
+import { SingleItem } from '../FormComponents';
+import PageButtonsWrapper from '../FormComponents/GroupItem/PageButtonWrapper';
+import { QGroupContainerBox } from '../Box.styles';
+import { GroupCard } from '../FormComponents/GroupItem/GroupItem.styles';
+
+interface FormBodyPaginatedProps
+  extends PropsWithQrItemChangeHandler,
+    PropsWithParentIsReadOnlyAttribute {
+  topLevelQItems: QuestionnaireItem[];
+  topLevelQRItems: (QuestionnaireResponseItem | QuestionnaireResponseItem[] | undefined)[];
+}
+
+// TODO This implementation doesnt take into account repeat items and repeat groups
+// TODO need to fix this before bringing it into release
+// Every group item in here is rendered as a page
+function FormBodyPaginated(props: FormBodyPaginatedProps) {
+  const { topLevelQItems, topLevelQRItems, parentIsReadOnly, onQrItemChange } = props;
+
+  const pages = useQuestionnaireStore.use.pages();
+  const currentPage = useQuestionnaireStore.use.currentPageIndex();
+  const disableCardView = useRendererStylingStore.use.disablePageCardView();
+
+  return (
+    <Grid container spacing={1.5}>
+      <TabContext value={currentPage.toString()}>
+        <Grid item xs={12} md={12} lg={12}>
+          {topLevelQItems.map((qItem, i) => {
+            const qrItem = topLevelQRItems[i];
+
+            const isNotRepeatGroup = !Array.isArray(qrItem);
+            const isPage = !!pages[qItem.linkId];
+
+            const itemIsGroup = qItem.type === 'group';
+
+            if (!isPage || !isNotRepeatGroup) {
+              // Something has gone horribly wrong
+              return null;
+            }
+
+            const isRepeated = qItem.repeats ?? false;
+            const pageIsMarkedAsComplete = pages[qItem.linkId].isComplete ?? false;
+
+            // Render this page as a group
+            if (itemIsGroup) {
+              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}
+                    disableCardView={disableCardView}
+                    pageIsMarkedAsComplete={pageIsMarkedAsComplete}
+                    pages={pages}
+                    currentPageIndex={currentPage}
+                    parentIsReadOnly={parentIsReadOnly}
+                    onQrItemChange={onQrItemChange}
+                  />
+                </TabPanel>
+              );
+            }
+
+            // Page consists of a non-group item
+            return (
+              <TabPanel
+                key={qItem.linkId}
+                sx={{ p: 0 }}
+                value={i.toString()}
+                data-test="renderer-page-panel">
+                <QGroupContainerBox
+                  cardElevation={1}
+                  isRepeated={isRepeated}
+                  data-test="q-item-group-box">
+                  {disableCardView ? (
+                    <>
+                      <SingleItem
+                        qItem={qItem}
+                        qrItem={qrItem ?? null}
+                        isRepeated={isRepeated}
+                        groupCardElevation={1}
+                        parentIsReadOnly={parentIsReadOnly}
+                        onQrItemChange={onQrItemChange}
+                        isTabled={false}
+                      />
+                      <PageButtonsWrapper currentPageIndex={currentPage} pages={pages} />
+                    </>
+                  ) : (
+                    <GroupCard elevation={1} isRepeated={isRepeated}>
+                      <SingleItem
+                        qItem={qItem}
+                        qrItem={qrItem ?? null}
+                        isRepeated={isRepeated}
+                        groupCardElevation={1}
+                        parentIsReadOnly={parentIsReadOnly}
+                        onQrItemChange={onQrItemChange}
+                        isTabled={false}
+                      />
+                      <PageButtonsWrapper currentPageIndex={currentPage} pages={pages} />
+                    </GroupCard>
+                  )}
+                </QGroupContainerBox>
+              </TabPanel>
+            );
+          })}
+        </Grid>
+      </TabContext>
+    </Grid>
+  );
+}
+
+export default FormBodyPaginated;