@xyo-network/react-webapp 2.25.66 → 2.25.67

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", height: "100vh", ...props, children: [_jsx(Helmet, { defaultTitle: appName, titleTemplate: `%s | ${appName}`, children: _jsx("meta", { content: "website", property: "og:type" }) }), appbar ?? _jsx(ApplicationAppBar, { menuItems: navigationType === 'menu' ? menuItems : undefined }), _jsxs(FlexGrowRow, { alignItems: "stretch", children: [navigationType !== 'menu' ? (_jsxs(_Fragment, { children: [menuItems, _jsx(Divider, { orientation: "vertical" })] })) : null, _jsx(FlexGrowCol, { overflow: "hidden", justifyContent: "flex-start", alignItems: "stretch", children: _jsx(ErrorBoundary, { fallback: errorPage ?? _jsx(WebAppErrorPage, {}), children: children }) })] }), _jsx(Paper, { elevation: footerElevation, square: true, children: footer ?? _jsx(Footer, { dynamicHeight: true }) })] }));
+    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, { 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 }) }) })] }));
 };
 //# 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,EAAW,MAAM,uBAAuB,CAAA;AAEhG,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,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,EAAE,SAAS,EAAE,cAAc,GAAG,MAAM,EAAE,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC/K,OAAO,CACL,MAAC,OAAO,IAAC,UAAU,EAAC,SAAS,EAAC,MAAM,EAAC,OAAO,KAAK,KAAK,aACpD,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,SAAS,EAAE,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GAAI,EAC9F,MAAC,WAAW,IAAC,UAAU,EAAC,SAAS,aAC9B,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,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,YAAY,EAAC,UAAU,EAAC,SAAS,YAC7E,KAAC,aAAa,IAAC,QAAQ,EAAE,SAAS,IAAI,KAAC,eAAe,KAAG,YAAG,QAAQ,GAAiB,GACzE,IACF,EACd,KAAC,KAAK,IAAC,SAAS,EAAE,eAAe,EAAE,MAAM,kBACtC,MAAM,IAAI,KAAC,MAAM,IAAC,aAAa,SAAG,GAC7B,IACA,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,EAAW,MAAM,uBAAuB,CAAA;AAEhG,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC7D,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,EAAE,SAAS,EAAE,cAAc,GAAG,MAAM,EAAE,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC/K,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,SAAS,EAAE,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GAAI,EAC9F,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"}

package/package.json

@@ -17,10 +17,10 @@
     "@xylabs/react-flexbox": "^2.14.4",
     "@xylabs/react-pixel": "^2.14.4",
     "@xylabs/react-shared": "^2.14.4",
-    "@xyo-network/react-app-settings": "^2.25.65",
-    "@xyo-network/react-appbar": "^2.25.66",
-    "@xyo-network/react-footer": "^2.25.66",
-    "@xyo-network/react-shared": "^2.25.66",
+    "@xyo-network/react-app-settings": "^2.25.66",
+    "@xyo-network/react-appbar": "^2.25.67",
+    "@xyo-network/react-footer": "^2.25.67",
+    "@xyo-network/react-shared": "^2.25.67",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
@@ -85,6 +85,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.25.66",
+  "version": "2.25.67",
   "packageManager": "yarn@3.1.1"
 }

package/src/components/Chrome.stories.tsx

@@ -2,7 +2,7 @@
 import { Breadcrumbs, List } from '@mui/material'
 import { ComponentMeta, ComponentStory } from '@storybook/react'
 import { LinkEx } from '@xylabs/react-common'
-import { FlexCol } from '@xylabs/react-flexbox'
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
 import { SiteMenuListItem } from '@xyo-network/react-appbar'
 import { BrowserRouter } from 'react-router-dom'
 
@@ -20,6 +20,8 @@ const StorybookEntry = {
   title: 'webapp/WebAppChrome',
 } as ComponentMeta<typeof WebAppChrome>
 
+const rowArray = [32, 64, 128, 256, 512, 1024]
+
 const Template: ComponentStory<typeof WebAppChrome> = (args) => {
   return (
     <FlexCol height="80vh" alignItems="stretch" overflow="hidden">
@@ -38,7 +40,15 @@ const Template: ComponentStory<typeof WebAppChrome> = (args) => {
                 <LinkEx>BreadCrumbs</LinkEx>
               </Breadcrumbs>
             }
-          />
+          >
+            {rowArray.map((height) => {
+              return (
+                <FlexRow key={height} bgcolor="red" height={height}>
+                  {height}
+                </FlexRow>
+              )
+            })}
+          </WebAppPage>
         </WebAppChrome>
       </BrowserRouter>
     </FlexCol>

package/src/components/Chrome.tsx

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