@aehrc/smart-forms-renderer 0.36.0 → 0.37.2

package/lib/utils/page.js

@@ -0,0 +1,101 @@
+import { isSpecificItemControl } from './itemControl';
+import { isHiddenByEnableWhen } from './qItem';
+import { structuredDataCapture } from 'fhir-sdc-helpers';
+export function getFirstVisiblePage(pages, enableWhenItems, enableWhenExpressions) {
+    // Only singleEnableWhenItems are relevant for page operations
+    const { singleItems } = enableWhenItems;
+    const { singleExpressions } = enableWhenExpressions;
+    return Object.entries(pages)
+        .sort(([, pageA], [, pageB]) => pageA.pageIndex - pageB.pageIndex)
+        .findIndex(([pageLinkId, page]) => {
+        if (page.isHidden) {
+            return false;
+        }
+        const singleItem = singleItems[pageLinkId];
+        if (singleItem) {
+            return singleItem.isEnabled;
+        }
+        const singleExpression = singleExpressions[pageLinkId];
+        if (singleExpression) {
+            return singleExpression.isEnabled;
+        }
+        return true;
+    });
+}
+/**
+ * Checks if all of the items in a qItem array is a page item
+ * Returns true if all items is page item
+ * Returns false if only have one item
+ *
+ * @author Riza Nafis
+ */
+export function everyIsPages(topLevelQItem) {
+    if (!topLevelQItem)
+        return false;
+    if (isPageContainer(topLevelQItem))
+        return false;
+    return topLevelQItem.every((i) => isPage(i));
+}
+export function isPageContainer(topLevelQItem) {
+    const anyPage = topLevelQItem === null || topLevelQItem === void 0 ? void 0 : topLevelQItem.filter(isPage);
+    if (!anyPage)
+        return false;
+    return anyPage.some((page) => { var _a; return ((_a = page.item) === null || _a === void 0 ? void 0 : _a.every((i) => i.type === 'group')) || false; });
+}
+/**
+ * Checks if any of the items in a qItem array is a page item
+ * Returns true if there is at least one page item
+ *
+ * @author Riza Nafis
+ */
+export function containsPages(topLevelQItem) {
+    if (!topLevelQItem.item) {
+        return false;
+    }
+    const pages = topLevelQItem.item.filter((i) => isPage(i));
+    return pages.length > 0;
+}
+/**
+ * Check if a qItem is a page item
+ *
+ * @author Riza Nafis
+ */
+export function isPage(item) {
+    return isSpecificItemControl(item, 'page');
+}
+/**
+ * Create a `Record<linkId, Pages>` key-value pair for all page items in a qItem array
+ *
+ * @author Riza Nafis
+ */
+export function constructPagesWithProperties(qItems, hasPageContainer) {
+    var _a;
+    if (!qItems)
+        return {};
+    const qItemPages = hasPageContainer ? qItems : qItems.filter(isPage);
+    const pages = {};
+    for (const [i, qItem] of qItemPages.entries()) {
+        pages[qItem.linkId] = {
+            pageIndex: i,
+            isComplete: false,
+            isHidden: (_a = structuredDataCapture.getHidden(qItem)) !== null && _a !== void 0 ? _a : false
+        };
+    }
+    return pages;
+}
+export function constructPagesWithVisibility(params) {
+    const { pages, enableWhenIsActivated, enableWhenItems, enableWhenExpressions } = params;
+    return Object.entries(pages).map(([linkId]) => {
+        const isVisible = !isHiddenByEnableWhen({
+            linkId,
+            enableWhenIsActivated,
+            enableWhenItems,
+            enableWhenExpressions
+        });
+        return {
+            linkId,
+            isVisible
+        };
+    });
+}
+//# sourceMappingURL=page.js.map

package/lib/utils/page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","sourceRoot":"","sources":["../../src/utils/page.ts"],"names":[],"mappings":"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"}

package/lib/utils/questionnaireStoreUtils/createQuestionaireModel.js

@@ -26,6 +26,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { extractLaunchContexts } from './extractLaunchContext';
 import { extractQuestionnaireLevelVariables } from './extractVariables';
 import { extractTabs } from './extractTabs';
+import { extractPages } from './extractPages';
 import { extractContainedValueSets } from './extractContainedValueSets';
 import { extractOtherExtensions } from './extractOtherExtensions';
 import { resolveValueSets } from './resolveValueSets';
@@ -39,6 +40,7 @@ export function createQuestionnaireModel(questionnaire, additionalVariables, ter
         }
         const itemTypes = Object.fromEntries(getLinkIdTypeTuples(questionnaire));
         const tabs = extractTabs(questionnaire);
+        const pages = extractPages(questionnaire);
         const launchContexts = extractLaunchContexts(questionnaire);
         let variables = extractQuestionnaireLevelVariables(questionnaire);
         variables = addAdditionalVariables(variables, additionalVariables);
@@ -60,6 +62,7 @@ export function createQuestionnaireModel(questionnaire, additionalVariables, ter
         return {
             itemTypes,
             tabs,
+            pages,
             variables,
             launchContexts,
             enableWhenItems,
@@ -78,6 +81,7 @@ function createEmptyModel() {
     return {
         itemTypes: {},
         tabs: {},
+        pages: {},
         variables: { fhirPathVariables: {}, xFhirQueryVariables: {} },
         launchContexts: {},
         calculatedExpressions: {},

package/lib/utils/questionnaireStoreUtils/createQuestionaireModel.js.map

@@ -1 +1 @@
-{"version":3,"file":"createQuestionaireModel.js","sourceRoot":"","sources":["../../../src/utils/questionnaireStoreUtils/createQuestionaireModel.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"createQuestionaireModel.js","sourceRoot":"","sources":["../../../src/utils/questionnaireStoreUtils/createQuestionaireModel.ts"],"names":[],"mappings":"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"}

package/lib/utils/questionnaireStoreUtils/extractPages.d.ts

@@ -0,0 +1,3 @@
+import type { Questionnaire } from 'fhir/r4';
+import type { Pages } from '../../interfaces/page.interface';
+export declare function extractPages(questionnaire: Questionnaire): Pages;

package/lib/utils/questionnaireStoreUtils/extractPages.js

@@ -0,0 +1,18 @@
+import { constructPagesWithProperties, isPage, isPageContainer } from '../page';
+export function extractPages(questionnaire) {
+    if (!questionnaire.item || questionnaire.item.length === 0) {
+        return {};
+    }
+    if (!isPageContainer(questionnaire.item)) {
+        return constructPagesWithProperties(questionnaire.item, false);
+    }
+    let totalPages = {};
+    for (const topLevelItem of questionnaire.item) {
+        const items = topLevelItem.item;
+        const topLevelItemIsPageContainer = isPage(topLevelItem);
+        const pages = constructPagesWithProperties(items, topLevelItemIsPageContainer);
+        totalPages = Object.assign(Object.assign({}, totalPages), pages);
+    }
+    return totalPages;
+}
+//# sourceMappingURL=extractPages.js.map

package/lib/utils/questionnaireStoreUtils/extractPages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractPages.js","sourceRoot":"","sources":["../../../src/utils/questionnaireStoreUtils/extractPages.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,4BAA4B,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAEhF,MAAM,UAAU,YAAY,CAAC,aAA4B;IACvD,IAAI,CAAC,aAAa,CAAC,IAAI,IAAI,aAAa,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;QAC1D,OAAO,EAAE,CAAC;KACX;IAED,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE;QACxC,OAAO,4BAA4B,CAAC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAChE;IAED,IAAI,UAAU,GAAG,EAAE,CAAC;IACpB,KAAK,MAAM,YAAY,IAAI,aAAa,CAAC,IAAI,EAAE;QAC7C,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC;QAChC,MAAM,2BAA2B,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;QAEzD,MAAM,KAAK,GAAG,4BAA4B,CAAC,KAAK,EAAE,2BAA2B,CAAC,CAAC;QAC/E,UAAU,mCAAQ,UAAU,GAAK,KAAK,CAAE,CAAC;KAC1C;IAED,OAAO,UAAU,CAAC;AACpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "0.36.0",
+  "version": "0.37.2",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/aehrc/smart-forms#readme",
   "dependencies": {
-    "@aehrc/sdc-populate": "^2.3.0",
+    "@aehrc/sdc-populate": "^2.3.1",
     "@iconify/react": "^4.1.1",
     "dayjs": "^1.11.10",
     "deep-diff": "^1.0.2",
@@ -45,7 +45,7 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-markdown": "^8.0.7",
     "style-to-object": "^1.0.6",
-    "zustand": "^4.5.2"
+    "zustand": "^4.5.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.3",
@@ -66,7 +66,7 @@
     "@storybook/addon-links": "^8.0.10",
     "@storybook/addon-onboarding": "^8.0.10",
     "@storybook/blocks": "^8.0.10",
-    "@storybook/react": "^8.0.10",
+    "@storybook/react": "^8.2.6",
     "@storybook/react-vite": "^8.0.10",
     "@storybook/test": "^8.0.10",
     "@swc/cli": "^0.1.63",

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

@@ -0,0 +1,10 @@
+import { styled } from '@mui/material/styles';
+import Fab from '@mui/material/Fab';
+
+export const SecondaryFab = styled(Fab)(({ theme }) => ({
+  color: '#fff',
+  background: theme.palette.secondary.main,
+  '&:hover': {
+    background: theme.palette.secondary.dark
+  }
+}));

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

@@ -29,10 +29,11 @@ interface GroupHeadingProps extends PropsWithIsRepeatedAttribute {
   qItem: QuestionnaireItem;
   readOnly: boolean;
   tabIsMarkedAsComplete?: boolean;
+  pageIsMarkedAsComplete?: boolean;
 }
 
 const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
-  const { qItem, readOnly, tabIsMarkedAsComplete, isRepeated } = props;
+  const { qItem, readOnly, tabIsMarkedAsComplete, pageIsMarkedAsComplete, isRepeated } = props;
 
   const contextDisplayItems = getContextDisplays(qItem);
 
@@ -41,14 +42,15 @@ const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
   }
 
   const isTabHeading = tabIsMarkedAsComplete !== undefined;
+  const isPageHeading = pageIsMarkedAsComplete !== undefined;
 
   return (
     <>
       <Box display="flex" alignItems="center" width="100%">
         <Typography
           variant="h6"
-          fontSize={isTabHeading ? 16 : 15}
-          color={readOnly && !isTabHeading ? 'text.secondary' : 'text.primary'}>
+          fontSize={isTabHeading || isPageHeading ? 16 : 15}
+          color={readOnly && (!isTabHeading || !isPageHeading) ? 'text.secondary' : 'text.primary'}>
           <ItemLabelText qItem={qItem} />
         </Typography>
         <Box flexGrow={1} />

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

@@ -28,6 +28,7 @@ import type {
 import type { QrRepeatGroup } from '../../../interfaces/repeatGroup.interface';
 import useHidden from '../../../hooks/useHidden';
 import type { Tabs } from '../../../interfaces/tab.interface';
+import type { Pages } from '../../../interfaces/page.interface';
 import GroupItemView from './GroupItemView';
 
 interface GroupItemProps
@@ -41,6 +42,9 @@ interface GroupItemProps
   tabIsMarkedAsComplete?: boolean;
   tabs?: Tabs;
   currentTabIndex?: number;
+  pageIsMarkedAsComplete?: boolean;
+  pages?: Pages;
+  currentPageIndex?: number;
 }
 
 function GroupItem(props: GroupItemProps) {
@@ -52,6 +56,9 @@ function GroupItem(props: GroupItemProps) {
     tabIsMarkedAsComplete,
     tabs,
     currentTabIndex,
+    pageIsMarkedAsComplete,
+    pages,
+    currentPageIndex,
     parentIsReadOnly,
     parentIsRepeatGroup,
     parentRepeatGroupIndex,
@@ -83,7 +90,7 @@ function GroupItem(props: GroupItemProps) {
   }
 
   if (!qItems || !qrItems) {
-    return <>Unable to load group, something has gone terribly wrong.</>;
+    return <>Group Item: Unable to load group, something has gone terribly wrong.</>;
   }
 
   // If an item has multiple answers, it is a repeat group
@@ -99,6 +106,9 @@ function GroupItem(props: GroupItemProps) {
       tabIsMarkedAsComplete={tabIsMarkedAsComplete}
       tabs={tabs}
       currentTabIndex={currentTabIndex}
+      pageIsMarkedAsComplete={pageIsMarkedAsComplete}
+      pages={pages}
+      currentPageIndex={currentPageIndex}
       parentIsReadOnly={parentIsReadOnly}
       parentIsRepeatGroup={parentIsRepeatGroup}
       parentRepeatGroupIndex={parentRepeatGroupIndex}

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

@@ -26,6 +26,7 @@ import type {
   PropsWithQrRepeatGroupChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { Tabs } from '../../../interfaces/tab.interface';
+import type { Pages } from '../../../interfaces/page.interface';
 import GroupHeading from './GroupHeading';
 import { GroupCard } from './GroupItem.styles';
 import TabButtonsWrapper from './TabButtonsWrapper';
@@ -37,6 +38,7 @@ import Divider from '@mui/material/Divider';
 import { getGroupCollapsible } from '../../../utils/qItem';
 import useReadOnly from '../../../hooks/useReadOnly';
 import { GroupAccordion } from './GroupAccordion.styles';
+import PageButtonsWrapper from './PageButtonWrapper';
 
 interface GroupItemViewProps
   extends PropsWithQrItemChangeHandler,
@@ -51,6 +53,9 @@ interface GroupItemViewProps
   tabIsMarkedAsComplete?: boolean;
   tabs?: Tabs;
   currentTabIndex?: number;
+  pageIsMarkedAsComplete?: boolean;
+  pages?: Pages;
+  currentPageIndex?: number;
 }
 
 function GroupItemView(props: GroupItemViewProps) {
@@ -63,6 +68,9 @@ function GroupItemView(props: GroupItemViewProps) {
     tabIsMarkedAsComplete,
     tabs,
     currentTabIndex,
+    pageIsMarkedAsComplete,
+    pages,
+    currentPageIndex,
     parentIsReadOnly,
     parentIsRepeatGroup,
     parentRepeatGroupIndex,
@@ -91,6 +99,7 @@ function GroupItemView(props: GroupItemViewProps) {
             qItem={qItem}
             readOnly={readOnly}
             tabIsMarkedAsComplete={tabIsMarkedAsComplete}
+            pageIsMarkedAsComplete={pageIsMarkedAsComplete}
             isRepeated={isRepeated}
           />
         </AccordionSummary>
@@ -117,6 +126,7 @@ function GroupItemView(props: GroupItemViewProps) {
 
             {/* Next tab button at the end of each tab group */}
             <TabButtonsWrapper currentTabIndex={currentTabIndex} tabs={tabs} />
+            <PageButtonsWrapper currentPageIndex={currentPageIndex} pages={pages} />
           </>
         </AccordionDetails>
       </GroupAccordion>
@@ -133,6 +143,7 @@ function GroupItemView(props: GroupItemViewProps) {
           qItem={qItem}
           readOnly={readOnly}
           tabIsMarkedAsComplete={tabIsMarkedAsComplete}
+          pageIsMarkedAsComplete={pageIsMarkedAsComplete}
           isRepeated={isRepeated}
         />
         {childQItems.map((qItem: QuestionnaireItem, i) => {
@@ -155,6 +166,7 @@ function GroupItemView(props: GroupItemViewProps) {
 
         {/* Next tab button at the end of each tab group */}
         <TabButtonsWrapper currentTabIndex={currentTabIndex} tabs={tabs} />
+        <PageButtonsWrapper currentPageIndex={currentPageIndex} pages={pages} />
       </GroupCard>
     </QGroupContainerBox>
   );

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

@@ -0,0 +1,37 @@
+/*
+ * 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 NextPageButtonProps {
+  isDisabled: boolean;
+  onNextPageClick: () => void;
+}
+
+function NextPageButton(props: NextPageButtonProps) {
+  const { isDisabled, onNextPageClick } = props;
+
+  return (
+    <SecondaryFab size="small" aria-label="next" disabled={isDisabled} onClick={onNextPageClick}>
+      <Iconify icon="material-symbols:chevron-right-rounded" />
+    </SecondaryFab>
+  );
+}
+
+export default NextPageButton;

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/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;