@xyo-network/react-webapp 2.35.11 → 2.35.13

package/dist/esm/components/Body.d.ts

@@ -0,0 +1,12 @@
+import { Breakpoint } from '@mui/material';
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+import React, { ReactNode } from 'react';
+export interface WebAppBodyProps extends FlexBoxProps {
+    breadcrumbs?: ReactNode;
+    disableBreadcrumbGutter?: boolean;
+    spacing?: string | number;
+    scrollingBreakpoint?: Breakpoint;
+    devMode?: boolean;
+}
+export declare const WebAppBody: React.FC<WebAppBodyProps>;
+//# sourceMappingURL=Body.d.ts.map

package/dist/esm/components/Body.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../src/components/Body.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAU,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,YAAY,EAAwB,MAAM,uBAAuB,CAAA;AAC1E,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AA6CxC,MAAM,WAAW,eAAgB,SAAQ,YAAY;IACnD,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,mBAAmB,CAAC,EAAE,UAAU,CAAA;IAChC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8BhD,CAAA"}

package/dist/esm/components/Body.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled } from '@mui/material';
+import { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox';
+const WebAppBodyName = 'WebAppBody';
+const WebAppBodyRoot = styled(FlexGrowCol, {
+    name: WebAppBodyName,
+    slot: 'Root',
+})(({ spacing, theme, scrollingBreakpoint = 'sm' }) => ({
+    alignItems: 'stretch',
+    gap: 1,
+    justifyContent: 'flex-start',
+    overflow: 'hidden',
+    paddingY: spacing,
+    [theme.breakpoints.down(scrollingBreakpoint)]: {
+        overflow: 'scroll',
+    },
+}));
+const WebAppBodyBreadcrumb = styled(FlexRow, {
+    name: WebAppBodyName,
+    slot: 'Breadcrumb',
+})(({ disableBreadcrumbGutter, spacing }) => ({
+    justifyContent: 'start',
+    marginX: disableBreadcrumbGutter ? 0 : spacing,
+}));
+const WebAppBodyScrollableWrapper = styled(FlexGrowCol, {
+    name: WebAppBodyName,
+    slot: 'ScrollableWrapper',
+})(() => ({}));
+const WebAppBodyScrollable = styled(FlexGrowCol, {
+    name: WebAppBodyName,
+    slot: 'Scrollable',
+})(({ theme, scrollingBreakpoint = 'sm' }) => ({
+    alignItems: 'stretch',
+    inset: 0,
+    justifyContent: 'start',
+    position: 'absolute',
+    [theme.breakpoints.down(scrollingBreakpoint)]: {
+        inset: 'unset',
+        position: 'relative',
+    },
+}));
+export const WebAppBody = ({ devMode, children, breadcrumbs, disableBreadcrumbGutter, scrollingBreakpoint, spacing, ...props }) => {
+    if (devMode) {
+        return (_jsxs(WebAppBodyRoot, { scrollingBreakpoint: scrollingBreakpoint, spacing: spacing, ...props, children: [_jsx(WebAppBodyBreadcrumb, { disableBreadcrumbGutter: disableBreadcrumbGutter, spacing: spacing, children: breadcrumbs }), _jsx(WebAppBodyScrollableWrapper, { children: _jsx(WebAppBodyScrollable, { scrollingBreakpoint: scrollingBreakpoint, children: children }) })] }));
+    }
+    else {
+        return (_jsxs(FlexGrowCol, { gap: 1, paddingY: spacing, justifyContent: "flex-start", alignItems: "stretch", ...props, children: [_jsx(FlexRow, { justifyContent: "flex-start", marginX: disableBreadcrumbGutter ? 0 : spacing, children: breadcrumbs }), children] }));
+    }
+};
+//# sourceMappingURL=Body.js.map

package/dist/esm/components/Body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Body.js","sourceRoot":"","sources":["../../../src/components/Body.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,MAAM,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAgB,WAAW,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAG1E,MAAM,cAAc,GAAG,YAAY,CAAA;AAEnC,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,EAAE;IACzC,IAAI,EAAE,cAAc;IACpB,IAAI,EAAE,MAAM;CACb,CAAC,CAAkB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,mBAAmB,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;IACvE,UAAU,EAAE,SAAS;IACrB,GAAG,EAAE,CAAC;IACN,cAAc,EAAE,YAAY;IAC5B,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,OAAO;IACjB,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE;QAC7C,QAAQ,EAAE,QAAQ;KACnB;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,oBAAoB,GAAG,MAAM,CAAC,OAAO,EAAE;IAC3C,IAAI,EAAE,cAAc;IACpB,IAAI,EAAE,YAAY;CACnB,CAAC,CAAkB,CAAC,EAAE,uBAAuB,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7D,cAAc,EAAE,OAAO;IACvB,OAAO,EAAE,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO;CAC/C,CAAC,CAAC,CAAA;AAEH,MAAM,2BAA2B,GAAG,MAAM,CAAC,WAAW,EAAE;IACtD,IAAI,EAAE,cAAc;IACpB,IAAI,EAAE,mBAAmB;CAC1B,CAAC,CAAkB,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AAE/B,MAAM,oBAAoB,GAAG,MAAM,CAAC,WAAW,EAAE;IAC/C,IAAI,EAAE,cAAc;IACpB,IAAI,EAAE,YAAY;CACnB,CAAC,CAAkB,CAAC,EAAE,KAAK,EAAE,mBAAmB,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;IAC9D,UAAU,EAAE,SAAS;IACrB,KAAK,EAAE,CAAC;IACR,cAAc,EAAE,OAAO;IACvB,QAAQ,EAAE,UAAU;IACpB,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE;QAC7C,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC,CAAA;AAUH,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EACpD,OAAO,EACP,QAAQ,EACR,WAAW,EACX,uBAAuB,EACvB,mBAAmB,EACnB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,EAAE;IACH,IAAI,OAAO,EAAE;QACX,OAAO,CACL,MAAC,cAAc,IAAC,mBAAmB,EAAE,mBAAmB,EAAE,OAAO,EAAE,OAAO,KAAM,KAAK,aACnF,KAAC,oBAAoB,IAAC,uBAAuB,EAAE,uBAAuB,EAAE,OAAO,EAAE,OAAO,YACrF,WAAW,GACS,EACvB,KAAC,2BAA2B,cAC1B,KAAC,oBAAoB,IAAC,mBAAmB,EAAE,mBAAmB,YAAG,QAAQ,GAAwB,GACrE,IACf,CAClB,CAAA;KACF;SAAM;QACL,OAAO,CACL,MAAC,WAAW,IAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,KAAK,KAAK,aAChG,KAAC,OAAO,IAAC,cAAc,EAAC,YAAY,EAAC,OAAO,EAAE,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,YAChF,WAAW,GACJ,EACT,QAAQ,IACG,CACf,CAAA;KACF;AACH,CAAC,CAAA"}

package/dist/esm/components/Chrome.js

@@ -7,6 +7,6 @@ import { ErrorBoundary } from '@xyo-network/react-shared';
 import { Helmet } from 'react-helmet';
 import { WebAppErrorPage } from './ErrorPage';
 export const WebAppChrome = ({ menuItems, navigationType = 'menu', footerElevation = 4, errorPage, appbar, footer, children, appName, ...props }) => {
-    return (_jsxs(FlexCol, { alignItems: "stretch", overflow: "hidden", height: "100vh", ...props, children: [_jsx(Helmet, { defaultTitle: appName, titleTemplate: `%s | ${appName}`, children: _jsx("meta", { content: "website", property: "og:type" }) }), appbar ?? _jsx(ApplicationAppBar, { systemToolbar: _jsx(SystemToolbar, { menuItems: navigationType === 'menu' ? menuItems : undefined }) }), _jsxs(FlexGrowRow, { overflow: "hidden", alignItems: "stretch", children: [navigationType !== 'menu' ? (_jsxs(_Fragment, { children: [menuItems, _jsx(Divider, { orientation: "vertical" })] })) : null, _jsx(FlexGrowCol, { justifyContent: "flex-start", alignItems: "stretch", children: _jsx(ErrorBoundary, { fallback: errorPage ?? _jsx(WebAppErrorPage, {}), children: children }) })] }), _jsx(FlexCol, { alignItems: "stretch", children: _jsx(Paper, { elevation: footerElevation, square: true, children: footer ?? _jsx(Footer, { dynamicHeight: true }) }) })] }));
+    return (_jsxs(FlexCol, { id: "web-chrome-flex", alignItems: "stretch", overflow: "hidden", height: "100vh", ...props, children: [_jsx(Helmet, { defaultTitle: appName, titleTemplate: `%s | ${appName}`, children: _jsx("meta", { content: "website", property: "og:type" }) }), appbar ?? _jsx(ApplicationAppBar, { systemToolbar: _jsx(SystemToolbar, { menuItems: navigationType === 'menu' ? menuItems : undefined }) }), _jsxs(FlexGrowRow, { id: "sidebar-nav-flex", overflow: "hidden", alignItems: "stretch", children: [navigationType !== 'menu' ? (_jsxs(_Fragment, { children: [menuItems, _jsx(Divider, { orientation: "vertical" })] })) : null, _jsx(FlexGrowCol, { id: "main-flex", justifyContent: "flex-start", alignItems: "stretch", children: _jsx(ErrorBoundary, { fallback: errorPage ?? _jsx(WebAppErrorPage, {}), children: children }) })] }), _jsx(FlexCol, { id: "footer-flex", alignItems: "stretch", children: _jsx(Paper, { elevation: footerElevation, square: true, children: footer ?? _jsx(Footer, { dynamicHeight: true }) }) })] }));
 };
 //# sourceMappingURL=Chrome.js.map

package/dist/esm/components/Chrome.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chrome.js","sourceRoot":"","sources":["../../../src/components/Chrome.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAgB,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAEvF,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAErC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAY7C,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,SAAS,EACT,cAAc,GAAG,MAAM,EACvB,eAAe,GAAG,CAAC,EACnB,SAAS,EACT,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,OAAO,IAAC,UAAU,EAAC,SAAS,EAAC,QAAQ,EAAC,QAAQ,EAAC,MAAM,EAAC,OAAO,KAAK,KAAK,aACtE,KAAC,MAAM,IAAC,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,OAAO,EAAE,YAC7D,eAAM,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,GAAG,GACtC,EACR,MAAM,IAAI,KAAC,iBAAiB,IAAC,aAAa,EAAE,KAAC,aAAa,IAAC,SAAS,EAAE,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GAAI,GAAI,EAChI,MAAC,WAAW,IAAC,QAAQ,EAAC,QAAQ,EAAC,UAAU,EAAC,SAAS,aAChD,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,CAC3B,8BACG,SAAS,EACV,KAAC,OAAO,IAAC,WAAW,EAAC,UAAU,GAAG,IACjC,CACJ,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,WAAW,IAAC,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,YAC3D,KAAC,aAAa,IAAC,QAAQ,EAAE,SAAS,IAAI,KAAC,eAAe,KAAG,YAAG,QAAQ,GAAiB,GACzE,IACF,EACd,KAAC,OAAO,IAAC,UAAU,EAAC,SAAS,YAC3B,KAAC,KAAK,IAAC,SAAS,EAAE,eAAe,EAAE,MAAM,kBACtC,MAAM,IAAI,KAAC,MAAM,IAAC,aAAa,SAAG,GAC7B,GACA,IACF,CACX,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Chrome.js","sourceRoot":"","sources":["../../../src/components/Chrome.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAgB,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAEvF,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAC5E,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAErC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAY7C,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,SAAS,EACT,cAAc,GAAG,MAAM,EACvB,eAAe,GAAG,CAAC,EACnB,SAAS,EACT,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,OAAO,IAAC,EAAE,EAAC,iBAAiB,EAAC,UAAU,EAAC,SAAS,EAAC,QAAQ,EAAC,QAAQ,EAAC,MAAM,EAAC,OAAO,KAAK,KAAK,aAC3F,KAAC,MAAM,IAAC,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,OAAO,EAAE,YAC7D,eAAM,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,GAAG,GACtC,EACR,MAAM,IAAI,KAAC,iBAAiB,IAAC,aAAa,EAAE,KAAC,aAAa,IAAC,SAAS,EAAE,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GAAI,GAAI,EAChI,MAAC,WAAW,IAAC,EAAE,EAAC,kBAAkB,EAAC,QAAQ,EAAC,QAAQ,EAAC,UAAU,EAAC,SAAS,aACtE,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,CAC3B,8BACG,SAAS,EACV,KAAC,OAAO,IAAC,WAAW,EAAC,UAAU,GAAG,IACjC,CACJ,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,WAAW,IAAC,EAAE,EAAC,WAAW,EAAC,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,YAC1E,KAAC,aAAa,IAAC,QAAQ,EAAE,SAAS,IAAI,KAAC,eAAe,KAAG,YAAG,QAAQ,GAAiB,GACzE,IACF,EACd,KAAC,OAAO,IAAC,EAAE,EAAC,aAAa,EAAC,UAAU,EAAC,SAAS,YAC5C,KAAC,KAAK,IAAC,SAAS,EAAE,eAAe,EAAE,MAAM,kBACtC,MAAM,IAAI,KAAC,MAAM,IAAC,aAAa,SAAG,GAC7B,GACA,IACF,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/Page.d.ts

@@ -1,14 +1,13 @@
+/// <reference types="react" />
 import { ContainerProps } from '@mui/material';
 import { FlexBoxProps } from '@xylabs/react-flexbox';
-import { ReactNode } from 'react';
-export interface WebAppPageProps extends FlexBoxProps {
+import { WithChildren } from '@xylabs/react-shared';
+import { WebAppBodyProps } from './Body';
+export interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {
     container?: ContainerProps['maxWidth'] | 'none';
     disableGutters?: boolean;
-    breadcrumbs?: ReactNode;
-    disableBreadcrumbGutter?: boolean;
-    spacing?: string | number;
 }
-export declare const WebAppPage: React.FC<WebAppPageProps>;
+export declare const WebAppPage: React.FC<WithChildren<WebAppPageProps>>;
 /** @deprecated use WebAppPagePage instead */
-export declare const FlexPage: import("react").FC<WebAppPageProps>;
+export declare const FlexPage: import("react").FC<WithChildren<WebAppPageProps>>;
 //# sourceMappingURL=Page.d.ts.map

package/dist/esm/components/Page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/components/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,eAAe,CAAA;AACzD,OAAO,EAAE,YAAY,EAAwB,MAAM,uBAAuB,CAAA;AAG1E,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,MAAM,WAAW,eAAgB,SAAQ,YAAY;IACnD,SAAS,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,MAAM,CAAA;IAC/C,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC1B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8ChD,CAAA;AAED,6CAA6C;AAC7C,eAAO,MAAM,QAAQ,qCAAa,CAAA"}
+{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/components/Page.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,cAAc,EAAU,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,YAAY,EAAe,MAAM,uBAAuB,CAAA;AAEjE,OAAO,EAAkB,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAInE,OAAO,EAAc,eAAe,EAAE,MAAM,QAAQ,CAAA;AAkBpD,MAAM,WAAW,eAAgB,SAAQ,eAAe,EAAE,YAAY;IACpE,SAAS,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,MAAM,CAAA;IAC/C,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,CA4F9D,CAAA;AAED,6CAA6C;AAC7C,eAAO,MAAM,QAAQ,mDAAa,CAAA"}

package/dist/esm/components/Page.js

@@ -1,11 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Container } from '@mui/material';
-import { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox';
+import { Container, styled } from '@mui/material';
+import { FlexGrowCol } from '@xylabs/react-flexbox';
 import { useUserEvents } from '@xylabs/react-pixel';
 import { useAsyncEffect } from '@xylabs/react-shared';
 import { Helmet } from 'react-helmet';
 import { useLocation } from 'react-router-dom';
-export const WebAppPage = ({ spacing = 1, disableBreadcrumbGutter, disableGutters, title, container, breadcrumbs, children, ...props }) => {
+import { WebAppBody } from './Body';
+const WebAppPageRoot = styled(FlexGrowCol, {
+    name: 'WebAppPage',
+    shouldForwardProp: (propName) => propName !== 'scrollingBreakpoint',
+    slot: 'Root',
+})(({ theme, scrollingBreakpoint = 'sm' }) => ({
+    alignItems: 'stretch',
+    inset: 'unset',
+    justifyContent: 'start',
+    maxWidth: '100vw',
+    position: 'relative',
+    [theme.breakpoints.down(scrollingBreakpoint)]: {
+        inset: 0,
+        position: 'absolute',
+    },
+}));
+export const WebAppPage = ({ disableGutters, disableBreadcrumbGutter, title, container, children, breadcrumbs, scrollingBreakpoint, devMode, ...props }) => {
     const userEvents = useUserEvents();
     const { pathname } = useLocation();
     useAsyncEffect(
@@ -13,8 +29,12 @@ export const WebAppPage = ({ spacing = 1, disableBreadcrumbGutter, disableGutter
     async () => {
         await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname });
     }, [pathname, title, userEvents]);
-    const Body = (props) => (_jsxs(FlexGrowCol, { gap: 1, paddingY: spacing, justifyContent: "flex-start", alignItems: "stretch", ...props, children: [_jsx(FlexRow, { justifyContent: "flex-start", marginX: disableBreadcrumbGutter ? 0 : spacing, children: breadcrumbs }), children] }));
-    return (_jsxs(FlexGrowCol, { alignItems: "stretch", justifyContent: "flex-start", minHeight: 0, maxWidth: "100vw", overflow: "visible scroll", children: [_jsx(Helmet, { title: title }), container && container !== 'none' ? (_jsx(Container, { disableGutters: disableGutters, style: { alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }, maxWidth: container, children: _jsx(Body, { ...props }) })) : (_jsx(Body, { paddingX: disableGutters ? 0 : 1, ...props }))] }));
+    if (devMode) {
+        return (_jsxs(WebAppPageRoot, { scrollingBreakpoint: scrollingBreakpoint, ...props, children: [_jsx(Helmet, { title: title }), container && container !== 'none' ? (_jsx(Container, { disableGutters: disableGutters, style: { alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }, maxWidth: container, children: _jsx(WebAppBody, { devMode: devMode, disableBreadcrumbGutter: disableBreadcrumbGutter, breadcrumbs: breadcrumbs, scrollingBreakpoint: scrollingBreakpoint, ...props, children: children }) })) : (_jsx(WebAppBody, { devMode: devMode, disableBreadcrumbGutter: disableBreadcrumbGutter, breadcrumbs: breadcrumbs, scrollingBreakpoint: scrollingBreakpoint, paddingX: disableGutters ? 0 : 1, ...props, children: children }))] }));
+    }
+    else {
+        return (_jsxs(FlexGrowCol, { alignItems: "stretch", justifyContent: "flex-start", minHeight: 0, maxWidth: "100vw", overflow: "visible scroll", children: [_jsx(Helmet, { title: title }), container && container !== 'none' ? (_jsx(Container, { disableGutters: disableGutters, style: { alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }, maxWidth: container, children: _jsx(WebAppBody, { devMode: devMode, disableBreadcrumbGutter: disableBreadcrumbGutter, breadcrumbs: breadcrumbs, scrollingBreakpoint: scrollingBreakpoint, paddingX: disableGutters ? 0 : 1, ...props, children: children }) })) : (_jsx(WebAppBody, { devMode: devMode, disableBreadcrumbGutter: disableBreadcrumbGutter, breadcrumbs: breadcrumbs, scrollingBreakpoint: scrollingBreakpoint, paddingX: disableGutters ? 0 : 1, ...props, children: children }))] }));
+    }
 };
 /** @deprecated use WebAppPagePage instead */
 export const FlexPage = WebAppPage;

package/dist/esm/components/Page.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../../src/components/Page.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAkB,MAAM,eAAe,CAAA;AACzD,OAAO,EAAgB,WAAW,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAS9C,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EACpD,OAAO,GAAG,CAAC,EACX,uBAAuB,EACvB,cAAc,EACd,KAAK,EACL,SAAS,EACT,WAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAA;IAElC,cAAc;IACZ,uDAAuD;IACvD,KAAK,IAAI,EAAE;QACT,MAAM,UAAU,EAAE,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,IAAI,cAAc,EAAE,IAAI,EAAE,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;IAC3F,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,EAAE,UAAU,CAAC,CAC9B,CAAA;IAED,MAAM,IAAI,GAA2B,CAAC,KAAK,EAAE,EAAE,CAAC,CAC9C,MAAC,WAAW,IAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,KAAK,KAAK,aAChG,KAAC,OAAO,IAAC,cAAc,EAAC,YAAY,EAAC,OAAO,EAAE,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,YAChF,WAAW,GACJ,EACT,QAAQ,IACG,CACf,CAAA;IAED,OAAO,CACL,MAAC,WAAW,IAAC,UAAU,EAAC,SAAS,EAAC,cAAc,EAAC,YAAY,EAAC,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAC,OAAO,EAAC,QAAQ,EAAC,gBAAgB,aACpH,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,GAAI,EACvB,SAAS,IAAI,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,CACnC,KAAC,SAAS,IACR,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAAE,cAAc,EAAE,YAAY,EAAE,EACrH,QAAQ,EAAE,SAAS,YAEnB,KAAC,IAAI,OAAK,KAAK,GAAI,GACT,CACb,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAM,KAAK,GAAI,CACtD,IACW,CACf,CAAA;AACH,CAAC,CAAA;AAED,6CAA6C;AAC7C,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAA"}
+{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../../src/components/Page.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -14,10 +14,10 @@
     "@xylabs/react-flexbox": "^2.14.20",
     "@xylabs/react-pixel": "^2.14.20",
     "@xylabs/react-shared": "^2.14.20",
-    "@xyo-network/react-app-settings": "^2.35.11",
-    "@xyo-network/react-appbar": "^2.35.11",
-    "@xyo-network/react-footer": "^2.35.11",
-    "@xyo-network/react-shared": "^2.35.11",
+    "@xyo-network/react-app-settings": "^2.35.13",
+    "@xyo-network/react-appbar": "^2.35.13",
+    "@xyo-network/react-footer": "^2.35.13",
+    "@xyo-network/react-shared": "^2.35.13",
     "react-helmet": "^6.1.0",
     "tslib": "^2.4.0"
   },
@@ -78,5 +78,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.35.11"
+  "version": "2.35.13"
 }

package/src/components/Body.tsx

@@ -0,0 +1,86 @@
+import { Breakpoint, styled } from '@mui/material'
+import { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'
+import React, { ReactNode } from 'react'
+
+const WebAppBodyName = 'WebAppBody'
+
+const WebAppBodyRoot = styled(FlexGrowCol, {
+  name: WebAppBodyName,
+  slot: 'Root',
+})<WebAppBodyProps>(({ spacing, theme, scrollingBreakpoint = 'sm' }) => ({
+  alignItems: 'stretch',
+  gap: 1,
+  justifyContent: 'flex-start',
+  overflow: 'hidden',
+  paddingY: spacing,
+  [theme.breakpoints.down(scrollingBreakpoint)]: {
+    overflow: 'scroll',
+  },
+}))
+
+const WebAppBodyBreadcrumb = styled(FlexRow, {
+  name: WebAppBodyName,
+  slot: 'Breadcrumb',
+})<WebAppBodyProps>(({ disableBreadcrumbGutter, spacing }) => ({
+  justifyContent: 'start',
+  marginX: disableBreadcrumbGutter ? 0 : spacing,
+}))
+
+const WebAppBodyScrollableWrapper = styled(FlexGrowCol, {
+  name: WebAppBodyName,
+  slot: 'ScrollableWrapper',
+})<WebAppBodyProps>(() => ({}))
+
+const WebAppBodyScrollable = styled(FlexGrowCol, {
+  name: WebAppBodyName,
+  slot: 'Scrollable',
+})<WebAppBodyProps>(({ theme, scrollingBreakpoint = 'sm' }) => ({
+  alignItems: 'stretch',
+  inset: 0,
+  justifyContent: 'start',
+  position: 'absolute',
+  [theme.breakpoints.down(scrollingBreakpoint)]: {
+    inset: 'unset',
+    position: 'relative',
+  },
+}))
+
+export interface WebAppBodyProps extends FlexBoxProps {
+  breadcrumbs?: ReactNode
+  disableBreadcrumbGutter?: boolean
+  spacing?: string | number
+  scrollingBreakpoint?: Breakpoint
+  devMode?: boolean
+}
+
+export const WebAppBody: React.FC<WebAppBodyProps> = ({
+  devMode,
+  children,
+  breadcrumbs,
+  disableBreadcrumbGutter,
+  scrollingBreakpoint,
+  spacing,
+  ...props
+}) => {
+  if (devMode) {
+    return (
+      <WebAppBodyRoot scrollingBreakpoint={scrollingBreakpoint} spacing={spacing} {...props}>
+        <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>
+          {breadcrumbs}
+        </WebAppBodyBreadcrumb>
+        <WebAppBodyScrollableWrapper>
+          <WebAppBodyScrollable scrollingBreakpoint={scrollingBreakpoint}>{children}</WebAppBodyScrollable>
+        </WebAppBodyScrollableWrapper>
+      </WebAppBodyRoot>
+    )
+  } else {
+    return (
+      <FlexGrowCol gap={1} paddingY={spacing} justifyContent="flex-start" alignItems="stretch" {...props}>
+        <FlexRow justifyContent="flex-start" marginX={disableBreadcrumbGutter ? 0 : spacing}>
+          {breadcrumbs}
+        </FlexRow>
+        {children}
+      </FlexGrowCol>
+    )
+  }
+}

package/src/components/Chrome.stories.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable import/no-internal-modules */
 import { Breadcrumbs, List } from '@mui/material'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
-import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import { FlexRow } from '@xylabs/react-flexbox'
 import { LinkEx } from '@xylabs/react-link'
 import { SiteMenuListItem } from '@xyo-network/react-appbar'
 import { BrowserRouter } from 'react-router-dom'
 
 import { WebAppChrome } from './Chrome'
-import { WebAppPage } from './Page'
+import { WebAppPage, WebAppPageProps } from './Page'
 
 const StorybookEntry = {
   argTypes: {},
@@ -22,36 +22,38 @@ const StorybookEntry = {
 
 const rowArray = [32, 64, 128, 256, 512, 1024]
 
+const Children: React.FC<WebAppPageProps> = (props) => (
+  <WebAppPage
+    breadcrumbs={
+      <Breadcrumbs>
+        <LinkEx>BreadCrumbs</LinkEx>
+      </Breadcrumbs>
+    }
+    {...props}
+  >
+    {rowArray.map((height) => {
+      return (
+        <FlexRow key={height} height={height}>
+          {height}
+        </FlexRow>
+      )
+    })}
+  </WebAppPage>
+)
+
 const Template: ComponentStory<typeof WebAppChrome> = (args) => {
   return (
-    <FlexCol height="80vh" alignItems="stretch" overflow="hidden">
-      <BrowserRouter>
-        <WebAppChrome
-          menuItems={
-            <List>
-              <SiteMenuListItem primary="Hello" />
-            </List>
-          }
-          {...args}
-        >
-          <WebAppPage
-            breadcrumbs={
-              <Breadcrumbs>
-                <LinkEx>BreadCrumbs</LinkEx>
-              </Breadcrumbs>
-            }
-          >
-            {rowArray.map((height) => {
-              return (
-                <FlexRow key={height} height={height}>
-                  {height}
-                </FlexRow>
-              )
-            })}
-          </WebAppPage>
-        </WebAppChrome>
-      </BrowserRouter>
-    </FlexCol>
+    <BrowserRouter>
+      <WebAppChrome
+        menuItems={
+          <List>
+            <SiteMenuListItem primary="Hello" />
+          </List>
+        }
+        height="calc(100vh - 2rem)"
+        {...args}
+      ></WebAppChrome>
+    </BrowserRouter>
   )
 }
 
@@ -59,9 +61,12 @@ const Default = Template.bind({})
 Default.args = {}
 
 const DefaultSideBar = Template.bind({})
-DefaultSideBar.args = { navigationType: 'sidebar' }
+DefaultSideBar.args = { children: <Children devMode />, navigationType: 'sidebar' }
+
+const DefaultAlwaysScrollable = Template.bind({})
+DefaultAlwaysScrollable.args = { children: <Children devMode scrollingBreakpoint="xl" />, navigationType: 'sidebar' }
 
-export { Default, DefaultSideBar }
+export { Default, DefaultAlwaysScrollable, DefaultSideBar }
 
 // eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/Chrome.tsx

@@ -31,23 +31,23 @@ export const WebAppChrome: React.FC<WebAppChromeProps> = ({
   ...props
 }) => {
   return (
-    <FlexCol alignItems="stretch" overflow="hidden" height="100vh" {...props}>
+    <FlexCol id="web-chrome-flex" alignItems="stretch" overflow="hidden" height="100vh" {...props}>
       <Helmet defaultTitle={appName} titleTemplate={`%s | ${appName}`}>
         <meta content="website" property="og:type" />
       </Helmet>
       {appbar ?? <ApplicationAppBar systemToolbar={<SystemToolbar menuItems={navigationType === 'menu' ? menuItems : undefined} />} />}
-      <FlexGrowRow overflow="hidden" alignItems="stretch">
+      <FlexGrowRow id="sidebar-nav-flex" overflow="hidden" alignItems="stretch">
         {navigationType !== 'menu' ? (
           <>
             {menuItems}
             <Divider orientation="vertical" />
           </>
         ) : null}
-        <FlexGrowCol justifyContent="flex-start" alignItems="stretch">
+        <FlexGrowCol id="main-flex" justifyContent="flex-start" alignItems="stretch">
           <ErrorBoundary fallback={errorPage ?? <WebAppErrorPage />}>{children}</ErrorBoundary>
         </FlexGrowCol>
       </FlexGrowRow>
-      <FlexCol alignItems="stretch">
+      <FlexCol id="footer-flex" alignItems="stretch">
         <Paper elevation={footerElevation} square>
           {footer ?? <Footer dynamicHeight />}
         </Paper>

package/src/components/Page.tsx

@@ -1,26 +1,42 @@
-import { Container, ContainerProps } from '@mui/material'
-import { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'
+import { Container, ContainerProps, styled } from '@mui/material'
+import { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'
 import { useUserEvents } from '@xylabs/react-pixel'
-import { useAsyncEffect } from '@xylabs/react-shared'
-import { ReactNode } from 'react'
+import { useAsyncEffect, WithChildren } from '@xylabs/react-shared'
 import { Helmet } from 'react-helmet'
 import { useLocation } from 'react-router-dom'
-export interface WebAppPageProps extends FlexBoxProps {
+
+import { WebAppBody, WebAppBodyProps } from './Body'
+
+const WebAppPageRoot = styled(FlexGrowCol, {
+  name: 'WebAppPage',
+  shouldForwardProp: (propName) => propName !== 'scrollingBreakpoint',
+  slot: 'Root',
+})<WebAppPageProps>(({ theme, scrollingBreakpoint = 'sm' }) => ({
+  alignItems: 'stretch',
+  inset: 'unset',
+  justifyContent: 'start',
+  maxWidth: '100vw',
+  position: 'relative',
+  [theme.breakpoints.down(scrollingBreakpoint)]: {
+    inset: 0,
+    position: 'absolute',
+  },
+}))
+
+export interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {
   container?: ContainerProps['maxWidth'] | 'none'
   disableGutters?: boolean
-  breadcrumbs?: ReactNode
-  disableBreadcrumbGutter?: boolean
-  spacing?: string | number
 }
 
-export const WebAppPage: React.FC<WebAppPageProps> = ({
-  spacing = 1,
-  disableBreadcrumbGutter,
+export const WebAppPage: React.FC<WithChildren<WebAppPageProps>> = ({
   disableGutters,
+  disableBreadcrumbGutter,
   title,
   container,
-  breadcrumbs,
   children,
+  breadcrumbs,
+  scrollingBreakpoint,
+  devMode,
   ...props
 }) => {
   const userEvents = useUserEvents()
@@ -34,31 +50,76 @@ export const WebAppPage: React.FC<WebAppPageProps> = ({
     [pathname, title, userEvents],
   )
 
-  const Body: React.FC<FlexBoxProps> = (props) => (
-    <FlexGrowCol gap={1} paddingY={spacing} justifyContent="flex-start" alignItems="stretch" {...props}>
-      <FlexRow justifyContent="flex-start" marginX={disableBreadcrumbGutter ? 0 : spacing}>
-        {breadcrumbs}
-      </FlexRow>
-      {children}
-    </FlexGrowCol>
-  )
-
-  return (
-    <FlexGrowCol alignItems="stretch" justifyContent="flex-start" minHeight={0} maxWidth="100vw" overflow="visible scroll">
-      <Helmet title={title} />
-      {container && container !== 'none' ? (
-        <Container
-          disableGutters={disableGutters}
-          style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }}
-          maxWidth={container}
-        >
-          <Body {...props} />
-        </Container>
-      ) : (
-        <Body paddingX={disableGutters ? 0 : 1} {...props} />
-      )}
-    </FlexGrowCol>
-  )
+  if (devMode) {
+    return (
+      <WebAppPageRoot scrollingBreakpoint={scrollingBreakpoint} {...props}>
+        <Helmet title={title} />
+        {container && container !== 'none' ? (
+          <Container
+            disableGutters={disableGutters}
+            style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }}
+            maxWidth={container}
+          >
+            <WebAppBody
+              devMode={devMode}
+              disableBreadcrumbGutter={disableBreadcrumbGutter}
+              breadcrumbs={breadcrumbs}
+              scrollingBreakpoint={scrollingBreakpoint}
+              {...props}
+            >
+              {children}
+            </WebAppBody>
+          </Container>
+        ) : (
+          <WebAppBody
+            devMode={devMode}
+            disableBreadcrumbGutter={disableBreadcrumbGutter}
+            breadcrumbs={breadcrumbs}
+            scrollingBreakpoint={scrollingBreakpoint}
+            paddingX={disableGutters ? 0 : 1}
+            {...props}
+          >
+            {children}
+          </WebAppBody>
+        )}
+      </WebAppPageRoot>
+    )
+  } else {
+    return (
+      <FlexGrowCol alignItems="stretch" justifyContent="flex-start" minHeight={0} maxWidth="100vw" overflow="visible scroll">
+        <Helmet title={title} />
+        {container && container !== 'none' ? (
+          <Container
+            disableGutters={disableGutters}
+            style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }}
+            maxWidth={container}
+          >
+            <WebAppBody
+              devMode={devMode}
+              disableBreadcrumbGutter={disableBreadcrumbGutter}
+              breadcrumbs={breadcrumbs}
+              scrollingBreakpoint={scrollingBreakpoint}
+              paddingX={disableGutters ? 0 : 1}
+              {...props}
+            >
+              {children}
+            </WebAppBody>
+          </Container>
+        ) : (
+          <WebAppBody
+            devMode={devMode}
+            disableBreadcrumbGutter={disableBreadcrumbGutter}
+            breadcrumbs={breadcrumbs}
+            scrollingBreakpoint={scrollingBreakpoint}
+            paddingX={disableGutters ? 0 : 1}
+            {...props}
+          >
+            {children}
+          </WebAppBody>
+        )}
+      </FlexGrowCol>
+    )
+  }
 }
 
 /** @deprecated use WebAppPagePage instead */