@xyo-network/react-webapp 2.67.5 → 2.67.7

package/dist/browser/index.cjs

@@ -54,9 +54,9 @@ var fixedContent = {
 // src/components/Body.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var WebAppBodyName = "WebAppBody";
-var propsNotForwarded = ["mobileScrollingBreakpoint", "variant", "spacing", "disableBreadcrumbGutter"];
+var propsNotForwarded = /* @__PURE__ */ new Set(["mobileScrollingBreakpoint", "variant", "spacing", "disableBreadcrumbGutter"]);
 var defaultStyledOptions = {
-  shouldForwardProp: (prop) => !propsNotForwarded.includes(prop)
+  shouldForwardProp: (prop) => !propsNotForwarded.has(prop)
 };
 var WebAppBodyRoot = (0, import_material.styled)(import_react_flexbox.FlexGrowCol, {
   ...defaultStyledOptions,
@@ -233,10 +233,10 @@ var WebAppChrome = (0, import_react.forwardRef)(
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_helmet2.Helmet, { defaultTitle: appName, titleTemplate: `%s | ${appName}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("meta", { content: "website", property: "og:type" }) }),
       appbar ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_appbar.ApplicationAppBar, { systemToolbar: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_appbar.SystemToolbar, { menuItems: navigationType === "menu" ? menuItems : void 0 }) }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_flexbox3.FlexGrowRow, { id: "sidebar-nav-flex", overflow: "hidden", alignItems: "stretch", children: [
-        navigationType !== "menu" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        navigationType === "menu" ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
           menuItems,
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Divider, { orientation: "vertical" })
-        ] }) : null,
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_flexbox3.FlexGrowCol, { id: "main-flex", justifyContent: "flex-start", alignItems: "stretch", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           import_react_shared.ErrorBoundary,
           {

package/dist/browser/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts","../../src/components/Body.tsx","../../src/components/lib/cssValues.ts","../../src/components/Chrome.tsx","../../src/components/ErrorPage.tsx","../../src/components/Page.tsx","../../src/components/NotFoundPage/Page.tsx"],"sourcesContent":["export * from './components'\n","import { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n  shouldForwardProp: (prop: string) => !propsNotForwarded.includes(prop),\n}\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Root',\n})<WebAppBodyProps>(({ spacing, theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const scrollable = variant === 'scrollable'\n  return theme.unstable_sx({\n    alignItems: 'stretch',\n    gap: 1,\n    justifyContent: 'flex-start',\n    overflowX: 'visible',\n    overflowY: scrollable ? 'scroll' : 'hidden',\n    paddingY: spacing,\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      overflowY: 'scroll',\n    },\n  })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Breadcrumb',\n})<WebAppBodyProps>(({ theme, disableBreadcrumbGutter, spacing }) =>\n  theme.unstable_sx({\n    justifyContent: 'start',\n    marginX: disableBreadcrumbGutter ? 0 : spacing,\n  }),\n)\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n  name: WebAppBodyName,\n  slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({\n  alignItems: 'stretch',\n}))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Scrollable',\n})<WebAppBodyProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const props = variant === 'scrollable' ? scrollableContent : fixedContent\n  return {\n    ...props,\n    alignItems: 'stretch',\n    justifyContent: 'start',\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      inset: 'unset',\n      position: 'relative',\n    },\n  }\n})\n\nexport interface WebAppBodyProps extends FlexBoxProps {\n  breadcrumbs?: ReactNode\n  disableBreadcrumbGutter?: boolean\n  mobileScrollingBreakpoint?: Breakpoint\n  spacing?: string | number\n  variant?: 'scrollable' | 'fixed'\n}\n\nexport const WebAppBody: React.FC<WebAppBodyProps> = ({\n  children,\n  breadcrumbs,\n  disableBreadcrumbGutter,\n  mobileScrollingBreakpoint,\n  spacing = 1,\n  variant,\n  ...props\n}) => {\n  return (\n    <WebAppBodyRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} spacing={spacing} variant={variant} {...props}>\n      {breadcrumbs ? (\n        <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n          {breadcrumbs}\n        </WebAppBodyBreadcrumb>\n      ) : null}\n      <WebAppBodyScrollableWrapper>\n        <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n          {children}\n        </WebAppBodyScrollable>\n      </WebAppBodyScrollableWrapper>\n    </WebAppBodyRoot>\n  )\n}\n","import { CSSProperties } from 'react'\n\nexport const scrollableWrap: CSSProperties = {\n  inset: 0,\n  position: 'absolute',\n} as const\n\nexport const fixedWrap: CSSProperties = {\n  inset: 'unset',\n  position: 'relative',\n} as const\n\n// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles\nexport const scrollableContent: CSSProperties = {\n  ...fixedWrap,\n} as const\n\nexport const fixedContent: CSSProperties = {\n  ...scrollableWrap,\n} as const\n","import { Divider, Paper } from '@mui/material'\nimport { FlexBoxProps, FlexCol, FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { WebAppNavigationType } from '@xyo-network/react-app-settings'\nimport { ApplicationAppBar, SystemToolbar } from '@xyo-network/react-appbar'\nimport { Footer } from '@xyo-network/react-footer'\nimport { ErrorBoundary } from '@xyo-network/react-shared'\nimport { forwardRef, ReactNode } from 'react'\nimport { Helmet } from 'react-helmet'\n\nimport { WebAppErrorPage } from './ErrorPage'\n\nexport interface WebAppChromeProps extends FlexBoxProps {\n  appName: string\n  appbar?: ReactNode\n  errorPage?: ReactNode\n  footer?: ReactNode\n  footerElevation?: number\n  menuItems?: ReactNode\n  navigationType?: WebAppNavigationType\n}\n\nexport const WebAppChrome = forwardRef<HTMLDivElement, WebAppChromeProps>(\n  ({ appName, appbar, children, errorPage, footer, footerElevation = 4, menuItems, navigationType = 'menu', ...props }, ref) => {\n    return (\n      <FlexCol id=\"web-chrome-flex\" alignItems=\"stretch\" overflow=\"hidden\" height=\"100vh\" ref={ref} {...props}>\n        <Helmet defaultTitle={appName} titleTemplate={`%s | ${appName}`}>\n          <meta content=\"website\" property=\"og:type\" />\n        </Helmet>\n        {appbar ?? <ApplicationAppBar systemToolbar={<SystemToolbar menuItems={navigationType === 'menu' ? menuItems : undefined} />} />}\n        <FlexGrowRow id=\"sidebar-nav-flex\" overflow=\"hidden\" alignItems=\"stretch\">\n          {navigationType !== 'menu' ? (\n            <>\n              {menuItems}\n              <Divider orientation=\"vertical\" />\n            </>\n          ) : null}\n          <FlexGrowCol id=\"main-flex\" justifyContent=\"flex-start\" alignItems=\"stretch\">\n            <ErrorBoundary\n              fallbackWithError={(error) => {\n                return errorPage ?? <WebAppErrorPage error={error} />\n              }}\n            >\n              {children}\n            </ErrorBoundary>\n          </FlexGrowCol>\n        </FlexGrowRow>\n        <FlexCol id=\"footer-flex\" alignItems=\"stretch\">\n          <Paper elevation={footerElevation} square>\n            {footer ?? <Footer dynamicHeight />}\n          </Paper>\n        </FlexCol>\n      </FlexCol>\n    )\n  },\n)\n\nWebAppChrome.displayName = 'WebAppChrome'\n","import { ButtonEx } from '@xylabs/react-button'\n\nimport { WebAppPage, WebAppPageProps } from './Page'\n\nexport interface WebAppErrorPageProps extends WebAppPageProps {\n  error?: Error\n}\n\nexport const WebAppErrorPage: React.FC<WebAppErrorPageProps> = ({ error, ...props }) => (\n  <WebAppPage title=\"Oops! Something went wrong\" {...props}>\n    <h1>Oops! Something went wrong!</h1>\n    <p>{`${error}`}</p>\n    <ButtonEx href=\"/\" variant=\"contained\">\n      Homepage\n    </ButtonEx>\n  </WebAppPage>\n)\n\n/** @deprecated use WebAppErrorPage instead */\nexport const ErrorPage = WebAppErrorPage\n","import { Container, ContainerProps, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n  name: 'WebAppPage',\n  shouldForwardProp: (propName) => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n  slot: 'Root',\n})<WebAppPageProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const props = variant === 'scrollable' ? scrollableWrap : fixedWrap\n  return {\n    ...props,\n    alignItems: 'stretch',\n    justifyContent: 'start',\n    maxWidth: '100vw',\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      inset: 0,\n      position: 'absolute',\n    },\n  }\n})\n\nexport interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {\n  container?: ContainerProps['maxWidth'] | 'none'\n  disableGutters?: boolean\n}\n\nexport const WebAppPage: React.FC<WithChildren<WebAppPageProps>> = ({\n  disableGutters,\n  disableBreadcrumbGutter,\n  title,\n  container,\n  children,\n  breadcrumbs,\n  mobileScrollingBreakpoint,\n  variant = 'scrollable',\n  ...props\n}) => {\n  const userEvents = useUserEvents()\n  const { pathname } = useLocation()\n\n  useAsyncEffect(\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    async () => {\n      await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })\n    },\n    [pathname, title, userEvents],\n  )\n\n  return (\n    <WebAppPageRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant} {...props}>\n      <Helmet title={title} />\n      {container && container !== 'none' ? (\n        <Container\n          disableGutters={disableGutters}\n          style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }}\n          maxWidth={container}\n        >\n          <WebAppBody\n            disableBreadcrumbGutter={disableBreadcrumbGutter}\n            breadcrumbs={breadcrumbs}\n            mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n            variant={variant}\n            {...props}\n          >\n            {children}\n          </WebAppBody>\n        </Container>\n      ) : (\n        <WebAppBody\n          disableBreadcrumbGutter={disableBreadcrumbGutter}\n          breadcrumbs={breadcrumbs}\n          mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n          paddingX={disableGutters ? 0 : 1}\n          variant={variant}\n          {...props}\n        >\n          {children}\n        </WebAppBody>\n      )}\n    </WebAppPageRoot>\n  )\n}\n\n/** @deprecated use WebAppPagePage instead */\nexport const FlexPage = WebAppPage\n","import { NotFound } from '@xyo-network/react-shared'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\n\nexport const WebAppNotFoundPage: React.FC<WebAppPageProps> = ({ title, ...props }) => (\n  <WebAppPage title={title ?? 'Sorry! Page Not Found'} {...props}>\n    <NotFound />\n  </WebAppPage>\n)\n\n/** @deprecated  use WebAppNotFoundPage instead */\nexport const NotFoundPage = WebAppNotFoundPage\n"],"mappings":"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","names":["import_material","import_react_flexbox","import_react_helmet","import_material","import_react_flexbox","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_react_shared","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/index.ts","../../src/components/Body.tsx","../../src/components/lib/cssValues.ts","../../src/components/Chrome.tsx","../../src/components/ErrorPage.tsx","../../src/components/Page.tsx","../../src/components/NotFoundPage/Page.tsx"],"sourcesContent":["export * from './components'\n","import { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = new Set(['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter'])\nconst defaultStyledOptions = {\n  shouldForwardProp: (prop: string) => !propsNotForwarded.has(prop),\n}\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Root',\n})<WebAppBodyProps>(({ spacing, theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const scrollable = variant === 'scrollable'\n  return theme.unstable_sx({\n    alignItems: 'stretch',\n    gap: 1,\n    justifyContent: 'flex-start',\n    overflowX: 'visible',\n    overflowY: scrollable ? 'scroll' : 'hidden',\n    paddingY: spacing,\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      overflowY: 'scroll',\n    },\n  })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Breadcrumb',\n})<WebAppBodyProps>(({ theme, disableBreadcrumbGutter, spacing }) =>\n  theme.unstable_sx({\n    justifyContent: 'start',\n    marginX: disableBreadcrumbGutter ? 0 : spacing,\n  }),\n)\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n  name: WebAppBodyName,\n  slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({\n  alignItems: 'stretch',\n}))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Scrollable',\n})<WebAppBodyProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const props = variant === 'scrollable' ? scrollableContent : fixedContent\n  return {\n    ...props,\n    alignItems: 'stretch',\n    justifyContent: 'start',\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      inset: 'unset',\n      position: 'relative',\n    },\n  }\n})\n\nexport interface WebAppBodyProps extends FlexBoxProps {\n  breadcrumbs?: ReactNode\n  disableBreadcrumbGutter?: boolean\n  mobileScrollingBreakpoint?: Breakpoint\n  spacing?: string | number\n  variant?: 'scrollable' | 'fixed'\n}\n\nexport const WebAppBody: React.FC<WebAppBodyProps> = ({\n  children,\n  breadcrumbs,\n  disableBreadcrumbGutter,\n  mobileScrollingBreakpoint,\n  spacing = 1,\n  variant,\n  ...props\n}) => {\n  return (\n    <WebAppBodyRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} spacing={spacing} variant={variant} {...props}>\n      {breadcrumbs ? (\n        <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n          {breadcrumbs}\n        </WebAppBodyBreadcrumb>\n      ) : null}\n      <WebAppBodyScrollableWrapper>\n        <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n          {children}\n        </WebAppBodyScrollable>\n      </WebAppBodyScrollableWrapper>\n    </WebAppBodyRoot>\n  )\n}\n","import { CSSProperties } from 'react'\n\nexport const scrollableWrap: CSSProperties = {\n  inset: 0,\n  position: 'absolute',\n} as const\n\nexport const fixedWrap: CSSProperties = {\n  inset: 'unset',\n  position: 'relative',\n} as const\n\n// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles\nexport const scrollableContent: CSSProperties = {\n  ...fixedWrap,\n} as const\n\nexport const fixedContent: CSSProperties = {\n  ...scrollableWrap,\n} as const\n","import { Divider, Paper } from '@mui/material'\nimport { FlexBoxProps, FlexCol, FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { WebAppNavigationType } from '@xyo-network/react-app-settings'\nimport { ApplicationAppBar, SystemToolbar } from '@xyo-network/react-appbar'\nimport { Footer } from '@xyo-network/react-footer'\nimport { ErrorBoundary } from '@xyo-network/react-shared'\nimport { forwardRef, ReactNode } from 'react'\nimport { Helmet } from 'react-helmet'\n\nimport { WebAppErrorPage } from './ErrorPage'\n\nexport interface WebAppChromeProps extends FlexBoxProps {\n  appName: string\n  appbar?: ReactNode\n  errorPage?: ReactNode\n  footer?: ReactNode\n  footerElevation?: number\n  menuItems?: ReactNode\n  navigationType?: WebAppNavigationType\n}\n\nexport const WebAppChrome = forwardRef<HTMLDivElement, WebAppChromeProps>(\n  ({ appName, appbar, children, errorPage, footer, footerElevation = 4, menuItems, navigationType = 'menu', ...props }, ref) => {\n    return (\n      <FlexCol id=\"web-chrome-flex\" alignItems=\"stretch\" overflow=\"hidden\" height=\"100vh\" ref={ref} {...props}>\n        <Helmet defaultTitle={appName} titleTemplate={`%s | ${appName}`}>\n          <meta content=\"website\" property=\"og:type\" />\n        </Helmet>\n        {appbar ?? <ApplicationAppBar systemToolbar={<SystemToolbar menuItems={navigationType === 'menu' ? menuItems : undefined} />} />}\n        <FlexGrowRow id=\"sidebar-nav-flex\" overflow=\"hidden\" alignItems=\"stretch\">\n          {navigationType === 'menu' ? null : (\n            <>\n              {menuItems}\n              <Divider orientation=\"vertical\" />\n            </>\n          )}\n          <FlexGrowCol id=\"main-flex\" justifyContent=\"flex-start\" alignItems=\"stretch\">\n            <ErrorBoundary\n              fallbackWithError={(error) => {\n                return errorPage ?? <WebAppErrorPage error={error} />\n              }}\n            >\n              {children}\n            </ErrorBoundary>\n          </FlexGrowCol>\n        </FlexGrowRow>\n        <FlexCol id=\"footer-flex\" alignItems=\"stretch\">\n          <Paper elevation={footerElevation} square>\n            {footer ?? <Footer dynamicHeight />}\n          </Paper>\n        </FlexCol>\n      </FlexCol>\n    )\n  },\n)\n\nWebAppChrome.displayName = 'WebAppChrome'\n","import { ButtonEx } from '@xylabs/react-button'\n\nimport { WebAppPage, WebAppPageProps } from './Page'\n\nexport interface WebAppErrorPageProps extends WebAppPageProps {\n  error?: Error\n}\n\nexport const WebAppErrorPage: React.FC<WebAppErrorPageProps> = ({ error, ...props }) => (\n  <WebAppPage title=\"Oops! Something went wrong\" {...props}>\n    <h1>Oops! Something went wrong!</h1>\n    <p>{`${error}`}</p>\n    <ButtonEx href=\"/\" variant=\"contained\">\n      Homepage\n    </ButtonEx>\n  </WebAppPage>\n)\n\n/** @deprecated use WebAppErrorPage instead */\nexport const ErrorPage = WebAppErrorPage\n","import { Container, ContainerProps, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n  name: 'WebAppPage',\n  shouldForwardProp: (propName) => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n  slot: 'Root',\n})<WebAppPageProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const props = variant === 'scrollable' ? scrollableWrap : fixedWrap\n  return {\n    ...props,\n    alignItems: 'stretch',\n    justifyContent: 'start',\n    maxWidth: '100vw',\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      inset: 0,\n      position: 'absolute',\n    },\n  }\n})\n\nexport interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {\n  container?: ContainerProps['maxWidth'] | 'none'\n  disableGutters?: boolean\n}\n\nexport const WebAppPage: React.FC<WithChildren<WebAppPageProps>> = ({\n  disableGutters,\n  disableBreadcrumbGutter,\n  title,\n  container,\n  children,\n  breadcrumbs,\n  mobileScrollingBreakpoint,\n  variant = 'scrollable',\n  ...props\n}) => {\n  const userEvents = useUserEvents()\n  const { pathname } = useLocation()\n\n  useAsyncEffect(\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    async () => {\n      await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })\n    },\n    [pathname, title, userEvents],\n  )\n\n  return (\n    <WebAppPageRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant} {...props}>\n      <Helmet title={title} />\n      {container && container !== 'none' ? (\n        <Container\n          disableGutters={disableGutters}\n          style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }}\n          maxWidth={container}\n        >\n          <WebAppBody\n            disableBreadcrumbGutter={disableBreadcrumbGutter}\n            breadcrumbs={breadcrumbs}\n            mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n            variant={variant}\n            {...props}\n          >\n            {children}\n          </WebAppBody>\n        </Container>\n      ) : (\n        <WebAppBody\n          disableBreadcrumbGutter={disableBreadcrumbGutter}\n          breadcrumbs={breadcrumbs}\n          mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n          paddingX={disableGutters ? 0 : 1}\n          variant={variant}\n          {...props}\n        >\n          {children}\n        </WebAppBody>\n      )}\n    </WebAppPageRoot>\n  )\n}\n\n/** @deprecated use WebAppPagePage instead */\nexport const FlexPage = WebAppPage\n","import { NotFound } from '@xyo-network/react-shared'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\n\nexport const WebAppNotFoundPage: React.FC<WebAppPageProps> = ({ title, ...props }) => (\n  <WebAppPage title={title ?? 'Sorry! Page Not Found'} {...props}>\n    <NotFound />\n  </WebAppPage>\n)\n\n/** @deprecated  use WebAppNotFoundPage instead */\nexport const NotFoundPage = WebAppNotFoundPage\n"],"mappings":"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","names":["import_material","import_react_flexbox","import_react_helmet","import_material","import_react_flexbox","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_react_shared","import_jsx_runtime"]}

package/dist/browser/index.js

@@ -21,9 +21,9 @@ var fixedContent = {
 // src/components/Body.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var WebAppBodyName = "WebAppBody";
-var propsNotForwarded = ["mobileScrollingBreakpoint", "variant", "spacing", "disableBreadcrumbGutter"];
+var propsNotForwarded = /* @__PURE__ */ new Set(["mobileScrollingBreakpoint", "variant", "spacing", "disableBreadcrumbGutter"]);
 var defaultStyledOptions = {
-  shouldForwardProp: (prop) => !propsNotForwarded.includes(prop)
+  shouldForwardProp: (prop) => !propsNotForwarded.has(prop)
 };
 var WebAppBodyRoot = styled(FlexGrowCol, {
   ...defaultStyledOptions,
@@ -200,10 +200,10 @@ var WebAppChrome = forwardRef(
       /* @__PURE__ */ jsx4(Helmet2, { defaultTitle: appName, titleTemplate: `%s | ${appName}`, children: /* @__PURE__ */ jsx4("meta", { content: "website", property: "og:type" }) }),
       appbar ?? /* @__PURE__ */ jsx4(ApplicationAppBar, { systemToolbar: /* @__PURE__ */ jsx4(SystemToolbar, { menuItems: navigationType === "menu" ? menuItems : void 0 }) }),
       /* @__PURE__ */ jsxs4(FlexGrowRow, { id: "sidebar-nav-flex", overflow: "hidden", alignItems: "stretch", children: [
-        navigationType !== "menu" ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+        navigationType === "menu" ? null : /* @__PURE__ */ jsxs4(Fragment, { children: [
           menuItems,
           /* @__PURE__ */ jsx4(Divider, { orientation: "vertical" })
-        ] }) : null,
+        ] }),
         /* @__PURE__ */ jsx4(FlexGrowCol3, { id: "main-flex", justifyContent: "flex-start", alignItems: "stretch", children: /* @__PURE__ */ jsx4(
           ErrorBoundary,
           {

package/dist/browser/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Body.tsx","../../src/components/lib/cssValues.ts","../../src/components/Chrome.tsx","../../src/components/ErrorPage.tsx","../../src/components/Page.tsx","../../src/components/NotFoundPage/Page.tsx"],"sourcesContent":["import { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n  shouldForwardProp: (prop: string) => !propsNotForwarded.includes(prop),\n}\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Root',\n})<WebAppBodyProps>(({ spacing, theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const scrollable = variant === 'scrollable'\n  return theme.unstable_sx({\n    alignItems: 'stretch',\n    gap: 1,\n    justifyContent: 'flex-start',\n    overflowX: 'visible',\n    overflowY: scrollable ? 'scroll' : 'hidden',\n    paddingY: spacing,\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      overflowY: 'scroll',\n    },\n  })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Breadcrumb',\n})<WebAppBodyProps>(({ theme, disableBreadcrumbGutter, spacing }) =>\n  theme.unstable_sx({\n    justifyContent: 'start',\n    marginX: disableBreadcrumbGutter ? 0 : spacing,\n  }),\n)\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n  name: WebAppBodyName,\n  slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({\n  alignItems: 'stretch',\n}))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Scrollable',\n})<WebAppBodyProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const props = variant === 'scrollable' ? scrollableContent : fixedContent\n  return {\n    ...props,\n    alignItems: 'stretch',\n    justifyContent: 'start',\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      inset: 'unset',\n      position: 'relative',\n    },\n  }\n})\n\nexport interface WebAppBodyProps extends FlexBoxProps {\n  breadcrumbs?: ReactNode\n  disableBreadcrumbGutter?: boolean\n  mobileScrollingBreakpoint?: Breakpoint\n  spacing?: string | number\n  variant?: 'scrollable' | 'fixed'\n}\n\nexport const WebAppBody: React.FC<WebAppBodyProps> = ({\n  children,\n  breadcrumbs,\n  disableBreadcrumbGutter,\n  mobileScrollingBreakpoint,\n  spacing = 1,\n  variant,\n  ...props\n}) => {\n  return (\n    <WebAppBodyRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} spacing={spacing} variant={variant} {...props}>\n      {breadcrumbs ? (\n        <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n          {breadcrumbs}\n        </WebAppBodyBreadcrumb>\n      ) : null}\n      <WebAppBodyScrollableWrapper>\n        <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n          {children}\n        </WebAppBodyScrollable>\n      </WebAppBodyScrollableWrapper>\n    </WebAppBodyRoot>\n  )\n}\n","import { CSSProperties } from 'react'\n\nexport const scrollableWrap: CSSProperties = {\n  inset: 0,\n  position: 'absolute',\n} as const\n\nexport const fixedWrap: CSSProperties = {\n  inset: 'unset',\n  position: 'relative',\n} as const\n\n// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles\nexport const scrollableContent: CSSProperties = {\n  ...fixedWrap,\n} as const\n\nexport const fixedContent: CSSProperties = {\n  ...scrollableWrap,\n} as const\n","import { Divider, Paper } from '@mui/material'\nimport { FlexBoxProps, FlexCol, FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { WebAppNavigationType } from '@xyo-network/react-app-settings'\nimport { ApplicationAppBar, SystemToolbar } from '@xyo-network/react-appbar'\nimport { Footer } from '@xyo-network/react-footer'\nimport { ErrorBoundary } from '@xyo-network/react-shared'\nimport { forwardRef, ReactNode } from 'react'\nimport { Helmet } from 'react-helmet'\n\nimport { WebAppErrorPage } from './ErrorPage'\n\nexport interface WebAppChromeProps extends FlexBoxProps {\n  appName: string\n  appbar?: ReactNode\n  errorPage?: ReactNode\n  footer?: ReactNode\n  footerElevation?: number\n  menuItems?: ReactNode\n  navigationType?: WebAppNavigationType\n}\n\nexport const WebAppChrome = forwardRef<HTMLDivElement, WebAppChromeProps>(\n  ({ appName, appbar, children, errorPage, footer, footerElevation = 4, menuItems, navigationType = 'menu', ...props }, ref) => {\n    return (\n      <FlexCol id=\"web-chrome-flex\" alignItems=\"stretch\" overflow=\"hidden\" height=\"100vh\" ref={ref} {...props}>\n        <Helmet defaultTitle={appName} titleTemplate={`%s | ${appName}`}>\n          <meta content=\"website\" property=\"og:type\" />\n        </Helmet>\n        {appbar ?? <ApplicationAppBar systemToolbar={<SystemToolbar menuItems={navigationType === 'menu' ? menuItems : undefined} />} />}\n        <FlexGrowRow id=\"sidebar-nav-flex\" overflow=\"hidden\" alignItems=\"stretch\">\n          {navigationType !== 'menu' ? (\n            <>\n              {menuItems}\n              <Divider orientation=\"vertical\" />\n            </>\n          ) : null}\n          <FlexGrowCol id=\"main-flex\" justifyContent=\"flex-start\" alignItems=\"stretch\">\n            <ErrorBoundary\n              fallbackWithError={(error) => {\n                return errorPage ?? <WebAppErrorPage error={error} />\n              }}\n            >\n              {children}\n            </ErrorBoundary>\n          </FlexGrowCol>\n        </FlexGrowRow>\n        <FlexCol id=\"footer-flex\" alignItems=\"stretch\">\n          <Paper elevation={footerElevation} square>\n            {footer ?? <Footer dynamicHeight />}\n          </Paper>\n        </FlexCol>\n      </FlexCol>\n    )\n  },\n)\n\nWebAppChrome.displayName = 'WebAppChrome'\n","import { ButtonEx } from '@xylabs/react-button'\n\nimport { WebAppPage, WebAppPageProps } from './Page'\n\nexport interface WebAppErrorPageProps extends WebAppPageProps {\n  error?: Error\n}\n\nexport const WebAppErrorPage: React.FC<WebAppErrorPageProps> = ({ error, ...props }) => (\n  <WebAppPage title=\"Oops! Something went wrong\" {...props}>\n    <h1>Oops! Something went wrong!</h1>\n    <p>{`${error}`}</p>\n    <ButtonEx href=\"/\" variant=\"contained\">\n      Homepage\n    </ButtonEx>\n  </WebAppPage>\n)\n\n/** @deprecated use WebAppErrorPage instead */\nexport const ErrorPage = WebAppErrorPage\n","import { Container, ContainerProps, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n  name: 'WebAppPage',\n  shouldForwardProp: (propName) => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n  slot: 'Root',\n})<WebAppPageProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const props = variant === 'scrollable' ? scrollableWrap : fixedWrap\n  return {\n    ...props,\n    alignItems: 'stretch',\n    justifyContent: 'start',\n    maxWidth: '100vw',\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      inset: 0,\n      position: 'absolute',\n    },\n  }\n})\n\nexport interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {\n  container?: ContainerProps['maxWidth'] | 'none'\n  disableGutters?: boolean\n}\n\nexport const WebAppPage: React.FC<WithChildren<WebAppPageProps>> = ({\n  disableGutters,\n  disableBreadcrumbGutter,\n  title,\n  container,\n  children,\n  breadcrumbs,\n  mobileScrollingBreakpoint,\n  variant = 'scrollable',\n  ...props\n}) => {\n  const userEvents = useUserEvents()\n  const { pathname } = useLocation()\n\n  useAsyncEffect(\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    async () => {\n      await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })\n    },\n    [pathname, title, userEvents],\n  )\n\n  return (\n    <WebAppPageRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant} {...props}>\n      <Helmet title={title} />\n      {container && container !== 'none' ? (\n        <Container\n          disableGutters={disableGutters}\n          style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }}\n          maxWidth={container}\n        >\n          <WebAppBody\n            disableBreadcrumbGutter={disableBreadcrumbGutter}\n            breadcrumbs={breadcrumbs}\n            mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n            variant={variant}\n            {...props}\n          >\n            {children}\n          </WebAppBody>\n        </Container>\n      ) : (\n        <WebAppBody\n          disableBreadcrumbGutter={disableBreadcrumbGutter}\n          breadcrumbs={breadcrumbs}\n          mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n          paddingX={disableGutters ? 0 : 1}\n          variant={variant}\n          {...props}\n        >\n          {children}\n        </WebAppBody>\n      )}\n    </WebAppPageRoot>\n  )\n}\n\n/** @deprecated use WebAppPagePage instead */\nexport const FlexPage = WebAppPage\n","import { NotFound } from '@xyo-network/react-shared'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\n\nexport const WebAppNotFoundPage: React.FC<WebAppPageProps> = ({ title, ...props }) => (\n  <WebAppPage title={title ?? 'Sorry! Page Not Found'} {...props}>\n    <NotFound />\n  </WebAppPage>\n)\n\n/** @deprecated  use WebAppNotFoundPage instead */\nexport const NotFoundPage = WebAppNotFoundPage\n"],"mappings":"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","names":["FlexGrowCol","Helmet","styled","FlexGrowCol","jsx","jsxs","styled","FlexGrowCol","jsx","jsxs","jsx","jsxs","Helmet","FlexGrowCol","jsx"]}
+{"version":3,"sources":["../../src/components/Body.tsx","../../src/components/lib/cssValues.ts","../../src/components/Chrome.tsx","../../src/components/ErrorPage.tsx","../../src/components/Page.tsx","../../src/components/NotFoundPage/Page.tsx"],"sourcesContent":["import { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = new Set(['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter'])\nconst defaultStyledOptions = {\n  shouldForwardProp: (prop: string) => !propsNotForwarded.has(prop),\n}\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Root',\n})<WebAppBodyProps>(({ spacing, theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const scrollable = variant === 'scrollable'\n  return theme.unstable_sx({\n    alignItems: 'stretch',\n    gap: 1,\n    justifyContent: 'flex-start',\n    overflowX: 'visible',\n    overflowY: scrollable ? 'scroll' : 'hidden',\n    paddingY: spacing,\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      overflowY: 'scroll',\n    },\n  })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Breadcrumb',\n})<WebAppBodyProps>(({ theme, disableBreadcrumbGutter, spacing }) =>\n  theme.unstable_sx({\n    justifyContent: 'start',\n    marginX: disableBreadcrumbGutter ? 0 : spacing,\n  }),\n)\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n  name: WebAppBodyName,\n  slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({\n  alignItems: 'stretch',\n}))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Scrollable',\n})<WebAppBodyProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const props = variant === 'scrollable' ? scrollableContent : fixedContent\n  return {\n    ...props,\n    alignItems: 'stretch',\n    justifyContent: 'start',\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      inset: 'unset',\n      position: 'relative',\n    },\n  }\n})\n\nexport interface WebAppBodyProps extends FlexBoxProps {\n  breadcrumbs?: ReactNode\n  disableBreadcrumbGutter?: boolean\n  mobileScrollingBreakpoint?: Breakpoint\n  spacing?: string | number\n  variant?: 'scrollable' | 'fixed'\n}\n\nexport const WebAppBody: React.FC<WebAppBodyProps> = ({\n  children,\n  breadcrumbs,\n  disableBreadcrumbGutter,\n  mobileScrollingBreakpoint,\n  spacing = 1,\n  variant,\n  ...props\n}) => {\n  return (\n    <WebAppBodyRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} spacing={spacing} variant={variant} {...props}>\n      {breadcrumbs ? (\n        <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n          {breadcrumbs}\n        </WebAppBodyBreadcrumb>\n      ) : null}\n      <WebAppBodyScrollableWrapper>\n        <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n          {children}\n        </WebAppBodyScrollable>\n      </WebAppBodyScrollableWrapper>\n    </WebAppBodyRoot>\n  )\n}\n","import { CSSProperties } from 'react'\n\nexport const scrollableWrap: CSSProperties = {\n  inset: 0,\n  position: 'absolute',\n} as const\n\nexport const fixedWrap: CSSProperties = {\n  inset: 'unset',\n  position: 'relative',\n} as const\n\n// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles\nexport const scrollableContent: CSSProperties = {\n  ...fixedWrap,\n} as const\n\nexport const fixedContent: CSSProperties = {\n  ...scrollableWrap,\n} as const\n","import { Divider, Paper } from '@mui/material'\nimport { FlexBoxProps, FlexCol, FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { WebAppNavigationType } from '@xyo-network/react-app-settings'\nimport { ApplicationAppBar, SystemToolbar } from '@xyo-network/react-appbar'\nimport { Footer } from '@xyo-network/react-footer'\nimport { ErrorBoundary } from '@xyo-network/react-shared'\nimport { forwardRef, ReactNode } from 'react'\nimport { Helmet } from 'react-helmet'\n\nimport { WebAppErrorPage } from './ErrorPage'\n\nexport interface WebAppChromeProps extends FlexBoxProps {\n  appName: string\n  appbar?: ReactNode\n  errorPage?: ReactNode\n  footer?: ReactNode\n  footerElevation?: number\n  menuItems?: ReactNode\n  navigationType?: WebAppNavigationType\n}\n\nexport const WebAppChrome = forwardRef<HTMLDivElement, WebAppChromeProps>(\n  ({ appName, appbar, children, errorPage, footer, footerElevation = 4, menuItems, navigationType = 'menu', ...props }, ref) => {\n    return (\n      <FlexCol id=\"web-chrome-flex\" alignItems=\"stretch\" overflow=\"hidden\" height=\"100vh\" ref={ref} {...props}>\n        <Helmet defaultTitle={appName} titleTemplate={`%s | ${appName}`}>\n          <meta content=\"website\" property=\"og:type\" />\n        </Helmet>\n        {appbar ?? <ApplicationAppBar systemToolbar={<SystemToolbar menuItems={navigationType === 'menu' ? menuItems : undefined} />} />}\n        <FlexGrowRow id=\"sidebar-nav-flex\" overflow=\"hidden\" alignItems=\"stretch\">\n          {navigationType === 'menu' ? null : (\n            <>\n              {menuItems}\n              <Divider orientation=\"vertical\" />\n            </>\n          )}\n          <FlexGrowCol id=\"main-flex\" justifyContent=\"flex-start\" alignItems=\"stretch\">\n            <ErrorBoundary\n              fallbackWithError={(error) => {\n                return errorPage ?? <WebAppErrorPage error={error} />\n              }}\n            >\n              {children}\n            </ErrorBoundary>\n          </FlexGrowCol>\n        </FlexGrowRow>\n        <FlexCol id=\"footer-flex\" alignItems=\"stretch\">\n          <Paper elevation={footerElevation} square>\n            {footer ?? <Footer dynamicHeight />}\n          </Paper>\n        </FlexCol>\n      </FlexCol>\n    )\n  },\n)\n\nWebAppChrome.displayName = 'WebAppChrome'\n","import { ButtonEx } from '@xylabs/react-button'\n\nimport { WebAppPage, WebAppPageProps } from './Page'\n\nexport interface WebAppErrorPageProps extends WebAppPageProps {\n  error?: Error\n}\n\nexport const WebAppErrorPage: React.FC<WebAppErrorPageProps> = ({ error, ...props }) => (\n  <WebAppPage title=\"Oops! Something went wrong\" {...props}>\n    <h1>Oops! Something went wrong!</h1>\n    <p>{`${error}`}</p>\n    <ButtonEx href=\"/\" variant=\"contained\">\n      Homepage\n    </ButtonEx>\n  </WebAppPage>\n)\n\n/** @deprecated use WebAppErrorPage instead */\nexport const ErrorPage = WebAppErrorPage\n","import { Container, ContainerProps, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n  name: 'WebAppPage',\n  shouldForwardProp: (propName) => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n  slot: 'Root',\n})<WebAppPageProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const props = variant === 'scrollable' ? scrollableWrap : fixedWrap\n  return {\n    ...props,\n    alignItems: 'stretch',\n    justifyContent: 'start',\n    maxWidth: '100vw',\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      inset: 0,\n      position: 'absolute',\n    },\n  }\n})\n\nexport interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {\n  container?: ContainerProps['maxWidth'] | 'none'\n  disableGutters?: boolean\n}\n\nexport const WebAppPage: React.FC<WithChildren<WebAppPageProps>> = ({\n  disableGutters,\n  disableBreadcrumbGutter,\n  title,\n  container,\n  children,\n  breadcrumbs,\n  mobileScrollingBreakpoint,\n  variant = 'scrollable',\n  ...props\n}) => {\n  const userEvents = useUserEvents()\n  const { pathname } = useLocation()\n\n  useAsyncEffect(\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    async () => {\n      await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })\n    },\n    [pathname, title, userEvents],\n  )\n\n  return (\n    <WebAppPageRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant} {...props}>\n      <Helmet title={title} />\n      {container && container !== 'none' ? (\n        <Container\n          disableGutters={disableGutters}\n          style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }}\n          maxWidth={container}\n        >\n          <WebAppBody\n            disableBreadcrumbGutter={disableBreadcrumbGutter}\n            breadcrumbs={breadcrumbs}\n            mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n            variant={variant}\n            {...props}\n          >\n            {children}\n          </WebAppBody>\n        </Container>\n      ) : (\n        <WebAppBody\n          disableBreadcrumbGutter={disableBreadcrumbGutter}\n          breadcrumbs={breadcrumbs}\n          mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n          paddingX={disableGutters ? 0 : 1}\n          variant={variant}\n          {...props}\n        >\n          {children}\n        </WebAppBody>\n      )}\n    </WebAppPageRoot>\n  )\n}\n\n/** @deprecated use WebAppPagePage instead */\nexport const FlexPage = WebAppPage\n","import { NotFound } from '@xyo-network/react-shared'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\n\nexport const WebAppNotFoundPage: React.FC<WebAppPageProps> = ({ title, ...props }) => (\n  <WebAppPage title={title ?? 'Sorry! Page Not Found'} {...props}>\n    <NotFound />\n  </WebAppPage>\n)\n\n/** @deprecated  use WebAppNotFoundPage instead */\nexport const NotFoundPage = WebAppNotFoundPage\n"],"mappings":"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","names":["FlexGrowCol","Helmet","styled","FlexGrowCol","jsx","jsxs","styled","FlexGrowCol","jsx","jsxs","jsx","jsxs","Helmet","FlexGrowCol","jsx"]}

package/dist/node/index.cjs

@@ -54,9 +54,9 @@ var fixedContent = {
 // src/components/Body.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var WebAppBodyName = "WebAppBody";
-var propsNotForwarded = ["mobileScrollingBreakpoint", "variant", "spacing", "disableBreadcrumbGutter"];
+var propsNotForwarded = /* @__PURE__ */ new Set(["mobileScrollingBreakpoint", "variant", "spacing", "disableBreadcrumbGutter"]);
 var defaultStyledOptions = {
-  shouldForwardProp: (prop) => !propsNotForwarded.includes(prop)
+  shouldForwardProp: (prop) => !propsNotForwarded.has(prop)
 };
 var WebAppBodyRoot = (0, import_material.styled)(import_react_flexbox.FlexGrowCol, {
   ...defaultStyledOptions,
@@ -233,10 +233,10 @@ var WebAppChrome = (0, import_react.forwardRef)(
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_helmet2.Helmet, { defaultTitle: appName, titleTemplate: `%s | ${appName}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("meta", { content: "website", property: "og:type" }) }),
       appbar ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_appbar.ApplicationAppBar, { systemToolbar: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_appbar.SystemToolbar, { menuItems: navigationType === "menu" ? menuItems : void 0 }) }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_flexbox3.FlexGrowRow, { id: "sidebar-nav-flex", overflow: "hidden", alignItems: "stretch", children: [
-        navigationType !== "menu" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        navigationType === "menu" ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
           menuItems,
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Divider, { orientation: "vertical" })
-        ] }) : null,
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_flexbox3.FlexGrowCol, { id: "main-flex", justifyContent: "flex-start", alignItems: "stretch", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           import_react_shared.ErrorBoundary,
           {

package/dist/node/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts","../../src/components/Body.tsx","../../src/components/lib/cssValues.ts","../../src/components/Chrome.tsx","../../src/components/ErrorPage.tsx","../../src/components/Page.tsx","../../src/components/NotFoundPage/Page.tsx"],"sourcesContent":["export * from './components'\n","import { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n  shouldForwardProp: (prop: string) => !propsNotForwarded.includes(prop),\n}\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Root',\n})<WebAppBodyProps>(({ spacing, theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const scrollable = variant === 'scrollable'\n  return theme.unstable_sx({\n    alignItems: 'stretch',\n    gap: 1,\n    justifyContent: 'flex-start',\n    overflowX: 'visible',\n    overflowY: scrollable ? 'scroll' : 'hidden',\n    paddingY: spacing,\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      overflowY: 'scroll',\n    },\n  })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Breadcrumb',\n})<WebAppBodyProps>(({ theme, disableBreadcrumbGutter, spacing }) =>\n  theme.unstable_sx({\n    justifyContent: 'start',\n    marginX: disableBreadcrumbGutter ? 0 : spacing,\n  }),\n)\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n  name: WebAppBodyName,\n  slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({\n  alignItems: 'stretch',\n}))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Scrollable',\n})<WebAppBodyProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const props = variant === 'scrollable' ? scrollableContent : fixedContent\n  return {\n    ...props,\n    alignItems: 'stretch',\n    justifyContent: 'start',\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      inset: 'unset',\n      position: 'relative',\n    },\n  }\n})\n\nexport interface WebAppBodyProps extends FlexBoxProps {\n  breadcrumbs?: ReactNode\n  disableBreadcrumbGutter?: boolean\n  mobileScrollingBreakpoint?: Breakpoint\n  spacing?: string | number\n  variant?: 'scrollable' | 'fixed'\n}\n\nexport const WebAppBody: React.FC<WebAppBodyProps> = ({\n  children,\n  breadcrumbs,\n  disableBreadcrumbGutter,\n  mobileScrollingBreakpoint,\n  spacing = 1,\n  variant,\n  ...props\n}) => {\n  return (\n    <WebAppBodyRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} spacing={spacing} variant={variant} {...props}>\n      {breadcrumbs ? (\n        <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n          {breadcrumbs}\n        </WebAppBodyBreadcrumb>\n      ) : null}\n      <WebAppBodyScrollableWrapper>\n        <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n          {children}\n        </WebAppBodyScrollable>\n      </WebAppBodyScrollableWrapper>\n    </WebAppBodyRoot>\n  )\n}\n","import { CSSProperties } from 'react'\n\nexport const scrollableWrap: CSSProperties = {\n  inset: 0,\n  position: 'absolute',\n} as const\n\nexport const fixedWrap: CSSProperties = {\n  inset: 'unset',\n  position: 'relative',\n} as const\n\n// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles\nexport const scrollableContent: CSSProperties = {\n  ...fixedWrap,\n} as const\n\nexport const fixedContent: CSSProperties = {\n  ...scrollableWrap,\n} as const\n","import { Divider, Paper } from '@mui/material'\nimport { FlexBoxProps, FlexCol, FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { WebAppNavigationType } from '@xyo-network/react-app-settings'\nimport { ApplicationAppBar, SystemToolbar } from '@xyo-network/react-appbar'\nimport { Footer } from '@xyo-network/react-footer'\nimport { ErrorBoundary } from '@xyo-network/react-shared'\nimport { forwardRef, ReactNode } from 'react'\nimport { Helmet } from 'react-helmet'\n\nimport { WebAppErrorPage } from './ErrorPage'\n\nexport interface WebAppChromeProps extends FlexBoxProps {\n  appName: string\n  appbar?: ReactNode\n  errorPage?: ReactNode\n  footer?: ReactNode\n  footerElevation?: number\n  menuItems?: ReactNode\n  navigationType?: WebAppNavigationType\n}\n\nexport const WebAppChrome = forwardRef<HTMLDivElement, WebAppChromeProps>(\n  ({ appName, appbar, children, errorPage, footer, footerElevation = 4, menuItems, navigationType = 'menu', ...props }, ref) => {\n    return (\n      <FlexCol id=\"web-chrome-flex\" alignItems=\"stretch\" overflow=\"hidden\" height=\"100vh\" ref={ref} {...props}>\n        <Helmet defaultTitle={appName} titleTemplate={`%s | ${appName}`}>\n          <meta content=\"website\" property=\"og:type\" />\n        </Helmet>\n        {appbar ?? <ApplicationAppBar systemToolbar={<SystemToolbar menuItems={navigationType === 'menu' ? menuItems : undefined} />} />}\n        <FlexGrowRow id=\"sidebar-nav-flex\" overflow=\"hidden\" alignItems=\"stretch\">\n          {navigationType !== 'menu' ? (\n            <>\n              {menuItems}\n              <Divider orientation=\"vertical\" />\n            </>\n          ) : null}\n          <FlexGrowCol id=\"main-flex\" justifyContent=\"flex-start\" alignItems=\"stretch\">\n            <ErrorBoundary\n              fallbackWithError={(error) => {\n                return errorPage ?? <WebAppErrorPage error={error} />\n              }}\n            >\n              {children}\n            </ErrorBoundary>\n          </FlexGrowCol>\n        </FlexGrowRow>\n        <FlexCol id=\"footer-flex\" alignItems=\"stretch\">\n          <Paper elevation={footerElevation} square>\n            {footer ?? <Footer dynamicHeight />}\n          </Paper>\n        </FlexCol>\n      </FlexCol>\n    )\n  },\n)\n\nWebAppChrome.displayName = 'WebAppChrome'\n","import { ButtonEx } from '@xylabs/react-button'\n\nimport { WebAppPage, WebAppPageProps } from './Page'\n\nexport interface WebAppErrorPageProps extends WebAppPageProps {\n  error?: Error\n}\n\nexport const WebAppErrorPage: React.FC<WebAppErrorPageProps> = ({ error, ...props }) => (\n  <WebAppPage title=\"Oops! Something went wrong\" {...props}>\n    <h1>Oops! Something went wrong!</h1>\n    <p>{`${error}`}</p>\n    <ButtonEx href=\"/\" variant=\"contained\">\n      Homepage\n    </ButtonEx>\n  </WebAppPage>\n)\n\n/** @deprecated use WebAppErrorPage instead */\nexport const ErrorPage = WebAppErrorPage\n","import { Container, ContainerProps, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n  name: 'WebAppPage',\n  shouldForwardProp: (propName) => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n  slot: 'Root',\n})<WebAppPageProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const props = variant === 'scrollable' ? scrollableWrap : fixedWrap\n  return {\n    ...props,\n    alignItems: 'stretch',\n    justifyContent: 'start',\n    maxWidth: '100vw',\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      inset: 0,\n      position: 'absolute',\n    },\n  }\n})\n\nexport interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {\n  container?: ContainerProps['maxWidth'] | 'none'\n  disableGutters?: boolean\n}\n\nexport const WebAppPage: React.FC<WithChildren<WebAppPageProps>> = ({\n  disableGutters,\n  disableBreadcrumbGutter,\n  title,\n  container,\n  children,\n  breadcrumbs,\n  mobileScrollingBreakpoint,\n  variant = 'scrollable',\n  ...props\n}) => {\n  const userEvents = useUserEvents()\n  const { pathname } = useLocation()\n\n  useAsyncEffect(\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    async () => {\n      await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })\n    },\n    [pathname, title, userEvents],\n  )\n\n  return (\n    <WebAppPageRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant} {...props}>\n      <Helmet title={title} />\n      {container && container !== 'none' ? (\n        <Container\n          disableGutters={disableGutters}\n          style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }}\n          maxWidth={container}\n        >\n          <WebAppBody\n            disableBreadcrumbGutter={disableBreadcrumbGutter}\n            breadcrumbs={breadcrumbs}\n            mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n            variant={variant}\n            {...props}\n          >\n            {children}\n          </WebAppBody>\n        </Container>\n      ) : (\n        <WebAppBody\n          disableBreadcrumbGutter={disableBreadcrumbGutter}\n          breadcrumbs={breadcrumbs}\n          mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n          paddingX={disableGutters ? 0 : 1}\n          variant={variant}\n          {...props}\n        >\n          {children}\n        </WebAppBody>\n      )}\n    </WebAppPageRoot>\n  )\n}\n\n/** @deprecated use WebAppPagePage instead */\nexport const FlexPage = WebAppPage\n","import { NotFound } from '@xyo-network/react-shared'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\n\nexport const WebAppNotFoundPage: React.FC<WebAppPageProps> = ({ title, ...props }) => (\n  <WebAppPage title={title ?? 'Sorry! Page Not Found'} {...props}>\n    <NotFound />\n  </WebAppPage>\n)\n\n/** @deprecated  use WebAppNotFoundPage instead */\nexport const NotFoundPage = WebAppNotFoundPage\n"],"mappings":"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","names":["import_material","import_react_flexbox","import_react_helmet","import_material","import_react_flexbox","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_react_shared","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/index.ts","../../src/components/Body.tsx","../../src/components/lib/cssValues.ts","../../src/components/Chrome.tsx","../../src/components/ErrorPage.tsx","../../src/components/Page.tsx","../../src/components/NotFoundPage/Page.tsx"],"sourcesContent":["export * from './components'\n","import { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = new Set(['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter'])\nconst defaultStyledOptions = {\n  shouldForwardProp: (prop: string) => !propsNotForwarded.has(prop),\n}\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Root',\n})<WebAppBodyProps>(({ spacing, theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const scrollable = variant === 'scrollable'\n  return theme.unstable_sx({\n    alignItems: 'stretch',\n    gap: 1,\n    justifyContent: 'flex-start',\n    overflowX: 'visible',\n    overflowY: scrollable ? 'scroll' : 'hidden',\n    paddingY: spacing,\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      overflowY: 'scroll',\n    },\n  })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Breadcrumb',\n})<WebAppBodyProps>(({ theme, disableBreadcrumbGutter, spacing }) =>\n  theme.unstable_sx({\n    justifyContent: 'start',\n    marginX: disableBreadcrumbGutter ? 0 : spacing,\n  }),\n)\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n  name: WebAppBodyName,\n  slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({\n  alignItems: 'stretch',\n}))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Scrollable',\n})<WebAppBodyProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const props = variant === 'scrollable' ? scrollableContent : fixedContent\n  return {\n    ...props,\n    alignItems: 'stretch',\n    justifyContent: 'start',\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      inset: 'unset',\n      position: 'relative',\n    },\n  }\n})\n\nexport interface WebAppBodyProps extends FlexBoxProps {\n  breadcrumbs?: ReactNode\n  disableBreadcrumbGutter?: boolean\n  mobileScrollingBreakpoint?: Breakpoint\n  spacing?: string | number\n  variant?: 'scrollable' | 'fixed'\n}\n\nexport const WebAppBody: React.FC<WebAppBodyProps> = ({\n  children,\n  breadcrumbs,\n  disableBreadcrumbGutter,\n  mobileScrollingBreakpoint,\n  spacing = 1,\n  variant,\n  ...props\n}) => {\n  return (\n    <WebAppBodyRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} spacing={spacing} variant={variant} {...props}>\n      {breadcrumbs ? (\n        <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n          {breadcrumbs}\n        </WebAppBodyBreadcrumb>\n      ) : null}\n      <WebAppBodyScrollableWrapper>\n        <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n          {children}\n        </WebAppBodyScrollable>\n      </WebAppBodyScrollableWrapper>\n    </WebAppBodyRoot>\n  )\n}\n","import { CSSProperties } from 'react'\n\nexport const scrollableWrap: CSSProperties = {\n  inset: 0,\n  position: 'absolute',\n} as const\n\nexport const fixedWrap: CSSProperties = {\n  inset: 'unset',\n  position: 'relative',\n} as const\n\n// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles\nexport const scrollableContent: CSSProperties = {\n  ...fixedWrap,\n} as const\n\nexport const fixedContent: CSSProperties = {\n  ...scrollableWrap,\n} as const\n","import { Divider, Paper } from '@mui/material'\nimport { FlexBoxProps, FlexCol, FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { WebAppNavigationType } from '@xyo-network/react-app-settings'\nimport { ApplicationAppBar, SystemToolbar } from '@xyo-network/react-appbar'\nimport { Footer } from '@xyo-network/react-footer'\nimport { ErrorBoundary } from '@xyo-network/react-shared'\nimport { forwardRef, ReactNode } from 'react'\nimport { Helmet } from 'react-helmet'\n\nimport { WebAppErrorPage } from './ErrorPage'\n\nexport interface WebAppChromeProps extends FlexBoxProps {\n  appName: string\n  appbar?: ReactNode\n  errorPage?: ReactNode\n  footer?: ReactNode\n  footerElevation?: number\n  menuItems?: ReactNode\n  navigationType?: WebAppNavigationType\n}\n\nexport const WebAppChrome = forwardRef<HTMLDivElement, WebAppChromeProps>(\n  ({ appName, appbar, children, errorPage, footer, footerElevation = 4, menuItems, navigationType = 'menu', ...props }, ref) => {\n    return (\n      <FlexCol id=\"web-chrome-flex\" alignItems=\"stretch\" overflow=\"hidden\" height=\"100vh\" ref={ref} {...props}>\n        <Helmet defaultTitle={appName} titleTemplate={`%s | ${appName}`}>\n          <meta content=\"website\" property=\"og:type\" />\n        </Helmet>\n        {appbar ?? <ApplicationAppBar systemToolbar={<SystemToolbar menuItems={navigationType === 'menu' ? menuItems : undefined} />} />}\n        <FlexGrowRow id=\"sidebar-nav-flex\" overflow=\"hidden\" alignItems=\"stretch\">\n          {navigationType === 'menu' ? null : (\n            <>\n              {menuItems}\n              <Divider orientation=\"vertical\" />\n            </>\n          )}\n          <FlexGrowCol id=\"main-flex\" justifyContent=\"flex-start\" alignItems=\"stretch\">\n            <ErrorBoundary\n              fallbackWithError={(error) => {\n                return errorPage ?? <WebAppErrorPage error={error} />\n              }}\n            >\n              {children}\n            </ErrorBoundary>\n          </FlexGrowCol>\n        </FlexGrowRow>\n        <FlexCol id=\"footer-flex\" alignItems=\"stretch\">\n          <Paper elevation={footerElevation} square>\n            {footer ?? <Footer dynamicHeight />}\n          </Paper>\n        </FlexCol>\n      </FlexCol>\n    )\n  },\n)\n\nWebAppChrome.displayName = 'WebAppChrome'\n","import { ButtonEx } from '@xylabs/react-button'\n\nimport { WebAppPage, WebAppPageProps } from './Page'\n\nexport interface WebAppErrorPageProps extends WebAppPageProps {\n  error?: Error\n}\n\nexport const WebAppErrorPage: React.FC<WebAppErrorPageProps> = ({ error, ...props }) => (\n  <WebAppPage title=\"Oops! Something went wrong\" {...props}>\n    <h1>Oops! Something went wrong!</h1>\n    <p>{`${error}`}</p>\n    <ButtonEx href=\"/\" variant=\"contained\">\n      Homepage\n    </ButtonEx>\n  </WebAppPage>\n)\n\n/** @deprecated use WebAppErrorPage instead */\nexport const ErrorPage = WebAppErrorPage\n","import { Container, ContainerProps, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n  name: 'WebAppPage',\n  shouldForwardProp: (propName) => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n  slot: 'Root',\n})<WebAppPageProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const props = variant === 'scrollable' ? scrollableWrap : fixedWrap\n  return {\n    ...props,\n    alignItems: 'stretch',\n    justifyContent: 'start',\n    maxWidth: '100vw',\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      inset: 0,\n      position: 'absolute',\n    },\n  }\n})\n\nexport interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {\n  container?: ContainerProps['maxWidth'] | 'none'\n  disableGutters?: boolean\n}\n\nexport const WebAppPage: React.FC<WithChildren<WebAppPageProps>> = ({\n  disableGutters,\n  disableBreadcrumbGutter,\n  title,\n  container,\n  children,\n  breadcrumbs,\n  mobileScrollingBreakpoint,\n  variant = 'scrollable',\n  ...props\n}) => {\n  const userEvents = useUserEvents()\n  const { pathname } = useLocation()\n\n  useAsyncEffect(\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    async () => {\n      await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })\n    },\n    [pathname, title, userEvents],\n  )\n\n  return (\n    <WebAppPageRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant} {...props}>\n      <Helmet title={title} />\n      {container && container !== 'none' ? (\n        <Container\n          disableGutters={disableGutters}\n          style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }}\n          maxWidth={container}\n        >\n          <WebAppBody\n            disableBreadcrumbGutter={disableBreadcrumbGutter}\n            breadcrumbs={breadcrumbs}\n            mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n            variant={variant}\n            {...props}\n          >\n            {children}\n          </WebAppBody>\n        </Container>\n      ) : (\n        <WebAppBody\n          disableBreadcrumbGutter={disableBreadcrumbGutter}\n          breadcrumbs={breadcrumbs}\n          mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n          paddingX={disableGutters ? 0 : 1}\n          variant={variant}\n          {...props}\n        >\n          {children}\n        </WebAppBody>\n      )}\n    </WebAppPageRoot>\n  )\n}\n\n/** @deprecated use WebAppPagePage instead */\nexport const FlexPage = WebAppPage\n","import { NotFound } from '@xyo-network/react-shared'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\n\nexport const WebAppNotFoundPage: React.FC<WebAppPageProps> = ({ title, ...props }) => (\n  <WebAppPage title={title ?? 'Sorry! Page Not Found'} {...props}>\n    <NotFound />\n  </WebAppPage>\n)\n\n/** @deprecated  use WebAppNotFoundPage instead */\nexport const NotFoundPage = WebAppNotFoundPage\n"],"mappings":"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","names":["import_material","import_react_flexbox","import_react_helmet","import_material","import_react_flexbox","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_react_shared","import_jsx_runtime"]}

package/dist/node/index.js

@@ -21,9 +21,9 @@ var fixedContent = {
 // src/components/Body.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var WebAppBodyName = "WebAppBody";
-var propsNotForwarded = ["mobileScrollingBreakpoint", "variant", "spacing", "disableBreadcrumbGutter"];
+var propsNotForwarded = /* @__PURE__ */ new Set(["mobileScrollingBreakpoint", "variant", "spacing", "disableBreadcrumbGutter"]);
 var defaultStyledOptions = {
-  shouldForwardProp: (prop) => !propsNotForwarded.includes(prop)
+  shouldForwardProp: (prop) => !propsNotForwarded.has(prop)
 };
 var WebAppBodyRoot = styled(FlexGrowCol, {
   ...defaultStyledOptions,
@@ -200,10 +200,10 @@ var WebAppChrome = forwardRef(
       /* @__PURE__ */ jsx4(Helmet2, { defaultTitle: appName, titleTemplate: `%s | ${appName}`, children: /* @__PURE__ */ jsx4("meta", { content: "website", property: "og:type" }) }),
       appbar ?? /* @__PURE__ */ jsx4(ApplicationAppBar, { systemToolbar: /* @__PURE__ */ jsx4(SystemToolbar, { menuItems: navigationType === "menu" ? menuItems : void 0 }) }),
       /* @__PURE__ */ jsxs4(FlexGrowRow, { id: "sidebar-nav-flex", overflow: "hidden", alignItems: "stretch", children: [
-        navigationType !== "menu" ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+        navigationType === "menu" ? null : /* @__PURE__ */ jsxs4(Fragment, { children: [
           menuItems,
           /* @__PURE__ */ jsx4(Divider, { orientation: "vertical" })
-        ] }) : null,
+        ] }),
         /* @__PURE__ */ jsx4(FlexGrowCol3, { id: "main-flex", justifyContent: "flex-start", alignItems: "stretch", children: /* @__PURE__ */ jsx4(
           ErrorBoundary,
           {

package/dist/node/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Body.tsx","../../src/components/lib/cssValues.ts","../../src/components/Chrome.tsx","../../src/components/ErrorPage.tsx","../../src/components/Page.tsx","../../src/components/NotFoundPage/Page.tsx"],"sourcesContent":["import { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n  shouldForwardProp: (prop: string) => !propsNotForwarded.includes(prop),\n}\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Root',\n})<WebAppBodyProps>(({ spacing, theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const scrollable = variant === 'scrollable'\n  return theme.unstable_sx({\n    alignItems: 'stretch',\n    gap: 1,\n    justifyContent: 'flex-start',\n    overflowX: 'visible',\n    overflowY: scrollable ? 'scroll' : 'hidden',\n    paddingY: spacing,\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      overflowY: 'scroll',\n    },\n  })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Breadcrumb',\n})<WebAppBodyProps>(({ theme, disableBreadcrumbGutter, spacing }) =>\n  theme.unstable_sx({\n    justifyContent: 'start',\n    marginX: disableBreadcrumbGutter ? 0 : spacing,\n  }),\n)\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n  name: WebAppBodyName,\n  slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({\n  alignItems: 'stretch',\n}))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Scrollable',\n})<WebAppBodyProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const props = variant === 'scrollable' ? scrollableContent : fixedContent\n  return {\n    ...props,\n    alignItems: 'stretch',\n    justifyContent: 'start',\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      inset: 'unset',\n      position: 'relative',\n    },\n  }\n})\n\nexport interface WebAppBodyProps extends FlexBoxProps {\n  breadcrumbs?: ReactNode\n  disableBreadcrumbGutter?: boolean\n  mobileScrollingBreakpoint?: Breakpoint\n  spacing?: string | number\n  variant?: 'scrollable' | 'fixed'\n}\n\nexport const WebAppBody: React.FC<WebAppBodyProps> = ({\n  children,\n  breadcrumbs,\n  disableBreadcrumbGutter,\n  mobileScrollingBreakpoint,\n  spacing = 1,\n  variant,\n  ...props\n}) => {\n  return (\n    <WebAppBodyRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} spacing={spacing} variant={variant} {...props}>\n      {breadcrumbs ? (\n        <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n          {breadcrumbs}\n        </WebAppBodyBreadcrumb>\n      ) : null}\n      <WebAppBodyScrollableWrapper>\n        <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n          {children}\n        </WebAppBodyScrollable>\n      </WebAppBodyScrollableWrapper>\n    </WebAppBodyRoot>\n  )\n}\n","import { CSSProperties } from 'react'\n\nexport const scrollableWrap: CSSProperties = {\n  inset: 0,\n  position: 'absolute',\n} as const\n\nexport const fixedWrap: CSSProperties = {\n  inset: 'unset',\n  position: 'relative',\n} as const\n\n// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles\nexport const scrollableContent: CSSProperties = {\n  ...fixedWrap,\n} as const\n\nexport const fixedContent: CSSProperties = {\n  ...scrollableWrap,\n} as const\n","import { Divider, Paper } from '@mui/material'\nimport { FlexBoxProps, FlexCol, FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { WebAppNavigationType } from '@xyo-network/react-app-settings'\nimport { ApplicationAppBar, SystemToolbar } from '@xyo-network/react-appbar'\nimport { Footer } from '@xyo-network/react-footer'\nimport { ErrorBoundary } from '@xyo-network/react-shared'\nimport { forwardRef, ReactNode } from 'react'\nimport { Helmet } from 'react-helmet'\n\nimport { WebAppErrorPage } from './ErrorPage'\n\nexport interface WebAppChromeProps extends FlexBoxProps {\n  appName: string\n  appbar?: ReactNode\n  errorPage?: ReactNode\n  footer?: ReactNode\n  footerElevation?: number\n  menuItems?: ReactNode\n  navigationType?: WebAppNavigationType\n}\n\nexport const WebAppChrome = forwardRef<HTMLDivElement, WebAppChromeProps>(\n  ({ appName, appbar, children, errorPage, footer, footerElevation = 4, menuItems, navigationType = 'menu', ...props }, ref) => {\n    return (\n      <FlexCol id=\"web-chrome-flex\" alignItems=\"stretch\" overflow=\"hidden\" height=\"100vh\" ref={ref} {...props}>\n        <Helmet defaultTitle={appName} titleTemplate={`%s | ${appName}`}>\n          <meta content=\"website\" property=\"og:type\" />\n        </Helmet>\n        {appbar ?? <ApplicationAppBar systemToolbar={<SystemToolbar menuItems={navigationType === 'menu' ? menuItems : undefined} />} />}\n        <FlexGrowRow id=\"sidebar-nav-flex\" overflow=\"hidden\" alignItems=\"stretch\">\n          {navigationType !== 'menu' ? (\n            <>\n              {menuItems}\n              <Divider orientation=\"vertical\" />\n            </>\n          ) : null}\n          <FlexGrowCol id=\"main-flex\" justifyContent=\"flex-start\" alignItems=\"stretch\">\n            <ErrorBoundary\n              fallbackWithError={(error) => {\n                return errorPage ?? <WebAppErrorPage error={error} />\n              }}\n            >\n              {children}\n            </ErrorBoundary>\n          </FlexGrowCol>\n        </FlexGrowRow>\n        <FlexCol id=\"footer-flex\" alignItems=\"stretch\">\n          <Paper elevation={footerElevation} square>\n            {footer ?? <Footer dynamicHeight />}\n          </Paper>\n        </FlexCol>\n      </FlexCol>\n    )\n  },\n)\n\nWebAppChrome.displayName = 'WebAppChrome'\n","import { ButtonEx } from '@xylabs/react-button'\n\nimport { WebAppPage, WebAppPageProps } from './Page'\n\nexport interface WebAppErrorPageProps extends WebAppPageProps {\n  error?: Error\n}\n\nexport const WebAppErrorPage: React.FC<WebAppErrorPageProps> = ({ error, ...props }) => (\n  <WebAppPage title=\"Oops! Something went wrong\" {...props}>\n    <h1>Oops! Something went wrong!</h1>\n    <p>{`${error}`}</p>\n    <ButtonEx href=\"/\" variant=\"contained\">\n      Homepage\n    </ButtonEx>\n  </WebAppPage>\n)\n\n/** @deprecated use WebAppErrorPage instead */\nexport const ErrorPage = WebAppErrorPage\n","import { Container, ContainerProps, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n  name: 'WebAppPage',\n  shouldForwardProp: (propName) => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n  slot: 'Root',\n})<WebAppPageProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const props = variant === 'scrollable' ? scrollableWrap : fixedWrap\n  return {\n    ...props,\n    alignItems: 'stretch',\n    justifyContent: 'start',\n    maxWidth: '100vw',\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      inset: 0,\n      position: 'absolute',\n    },\n  }\n})\n\nexport interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {\n  container?: ContainerProps['maxWidth'] | 'none'\n  disableGutters?: boolean\n}\n\nexport const WebAppPage: React.FC<WithChildren<WebAppPageProps>> = ({\n  disableGutters,\n  disableBreadcrumbGutter,\n  title,\n  container,\n  children,\n  breadcrumbs,\n  mobileScrollingBreakpoint,\n  variant = 'scrollable',\n  ...props\n}) => {\n  const userEvents = useUserEvents()\n  const { pathname } = useLocation()\n\n  useAsyncEffect(\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    async () => {\n      await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })\n    },\n    [pathname, title, userEvents],\n  )\n\n  return (\n    <WebAppPageRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant} {...props}>\n      <Helmet title={title} />\n      {container && container !== 'none' ? (\n        <Container\n          disableGutters={disableGutters}\n          style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }}\n          maxWidth={container}\n        >\n          <WebAppBody\n            disableBreadcrumbGutter={disableBreadcrumbGutter}\n            breadcrumbs={breadcrumbs}\n            mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n            variant={variant}\n            {...props}\n          >\n            {children}\n          </WebAppBody>\n        </Container>\n      ) : (\n        <WebAppBody\n          disableBreadcrumbGutter={disableBreadcrumbGutter}\n          breadcrumbs={breadcrumbs}\n          mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n          paddingX={disableGutters ? 0 : 1}\n          variant={variant}\n          {...props}\n        >\n          {children}\n        </WebAppBody>\n      )}\n    </WebAppPageRoot>\n  )\n}\n\n/** @deprecated use WebAppPagePage instead */\nexport const FlexPage = WebAppPage\n","import { NotFound } from '@xyo-network/react-shared'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\n\nexport const WebAppNotFoundPage: React.FC<WebAppPageProps> = ({ title, ...props }) => (\n  <WebAppPage title={title ?? 'Sorry! Page Not Found'} {...props}>\n    <NotFound />\n  </WebAppPage>\n)\n\n/** @deprecated  use WebAppNotFoundPage instead */\nexport const NotFoundPage = WebAppNotFoundPage\n"],"mappings":"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","names":["FlexGrowCol","Helmet","styled","FlexGrowCol","jsx","jsxs","styled","FlexGrowCol","jsx","jsxs","jsx","jsxs","Helmet","FlexGrowCol","jsx"]}
+{"version":3,"sources":["../../src/components/Body.tsx","../../src/components/lib/cssValues.ts","../../src/components/Chrome.tsx","../../src/components/ErrorPage.tsx","../../src/components/Page.tsx","../../src/components/NotFoundPage/Page.tsx"],"sourcesContent":["import { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = new Set(['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter'])\nconst defaultStyledOptions = {\n  shouldForwardProp: (prop: string) => !propsNotForwarded.has(prop),\n}\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Root',\n})<WebAppBodyProps>(({ spacing, theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const scrollable = variant === 'scrollable'\n  return theme.unstable_sx({\n    alignItems: 'stretch',\n    gap: 1,\n    justifyContent: 'flex-start',\n    overflowX: 'visible',\n    overflowY: scrollable ? 'scroll' : 'hidden',\n    paddingY: spacing,\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      overflowY: 'scroll',\n    },\n  })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Breadcrumb',\n})<WebAppBodyProps>(({ theme, disableBreadcrumbGutter, spacing }) =>\n  theme.unstable_sx({\n    justifyContent: 'start',\n    marginX: disableBreadcrumbGutter ? 0 : spacing,\n  }),\n)\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n  name: WebAppBodyName,\n  slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({\n  alignItems: 'stretch',\n}))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n  ...defaultStyledOptions,\n  name: WebAppBodyName,\n  slot: 'Scrollable',\n})<WebAppBodyProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const props = variant === 'scrollable' ? scrollableContent : fixedContent\n  return {\n    ...props,\n    alignItems: 'stretch',\n    justifyContent: 'start',\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      inset: 'unset',\n      position: 'relative',\n    },\n  }\n})\n\nexport interface WebAppBodyProps extends FlexBoxProps {\n  breadcrumbs?: ReactNode\n  disableBreadcrumbGutter?: boolean\n  mobileScrollingBreakpoint?: Breakpoint\n  spacing?: string | number\n  variant?: 'scrollable' | 'fixed'\n}\n\nexport const WebAppBody: React.FC<WebAppBodyProps> = ({\n  children,\n  breadcrumbs,\n  disableBreadcrumbGutter,\n  mobileScrollingBreakpoint,\n  spacing = 1,\n  variant,\n  ...props\n}) => {\n  return (\n    <WebAppBodyRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} spacing={spacing} variant={variant} {...props}>\n      {breadcrumbs ? (\n        <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n          {breadcrumbs}\n        </WebAppBodyBreadcrumb>\n      ) : null}\n      <WebAppBodyScrollableWrapper>\n        <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n          {children}\n        </WebAppBodyScrollable>\n      </WebAppBodyScrollableWrapper>\n    </WebAppBodyRoot>\n  )\n}\n","import { CSSProperties } from 'react'\n\nexport const scrollableWrap: CSSProperties = {\n  inset: 0,\n  position: 'absolute',\n} as const\n\nexport const fixedWrap: CSSProperties = {\n  inset: 'unset',\n  position: 'relative',\n} as const\n\n// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles\nexport const scrollableContent: CSSProperties = {\n  ...fixedWrap,\n} as const\n\nexport const fixedContent: CSSProperties = {\n  ...scrollableWrap,\n} as const\n","import { Divider, Paper } from '@mui/material'\nimport { FlexBoxProps, FlexCol, FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport { WebAppNavigationType } from '@xyo-network/react-app-settings'\nimport { ApplicationAppBar, SystemToolbar } from '@xyo-network/react-appbar'\nimport { Footer } from '@xyo-network/react-footer'\nimport { ErrorBoundary } from '@xyo-network/react-shared'\nimport { forwardRef, ReactNode } from 'react'\nimport { Helmet } from 'react-helmet'\n\nimport { WebAppErrorPage } from './ErrorPage'\n\nexport interface WebAppChromeProps extends FlexBoxProps {\n  appName: string\n  appbar?: ReactNode\n  errorPage?: ReactNode\n  footer?: ReactNode\n  footerElevation?: number\n  menuItems?: ReactNode\n  navigationType?: WebAppNavigationType\n}\n\nexport const WebAppChrome = forwardRef<HTMLDivElement, WebAppChromeProps>(\n  ({ appName, appbar, children, errorPage, footer, footerElevation = 4, menuItems, navigationType = 'menu', ...props }, ref) => {\n    return (\n      <FlexCol id=\"web-chrome-flex\" alignItems=\"stretch\" overflow=\"hidden\" height=\"100vh\" ref={ref} {...props}>\n        <Helmet defaultTitle={appName} titleTemplate={`%s | ${appName}`}>\n          <meta content=\"website\" property=\"og:type\" />\n        </Helmet>\n        {appbar ?? <ApplicationAppBar systemToolbar={<SystemToolbar menuItems={navigationType === 'menu' ? menuItems : undefined} />} />}\n        <FlexGrowRow id=\"sidebar-nav-flex\" overflow=\"hidden\" alignItems=\"stretch\">\n          {navigationType === 'menu' ? null : (\n            <>\n              {menuItems}\n              <Divider orientation=\"vertical\" />\n            </>\n          )}\n          <FlexGrowCol id=\"main-flex\" justifyContent=\"flex-start\" alignItems=\"stretch\">\n            <ErrorBoundary\n              fallbackWithError={(error) => {\n                return errorPage ?? <WebAppErrorPage error={error} />\n              }}\n            >\n              {children}\n            </ErrorBoundary>\n          </FlexGrowCol>\n        </FlexGrowRow>\n        <FlexCol id=\"footer-flex\" alignItems=\"stretch\">\n          <Paper elevation={footerElevation} square>\n            {footer ?? <Footer dynamicHeight />}\n          </Paper>\n        </FlexCol>\n      </FlexCol>\n    )\n  },\n)\n\nWebAppChrome.displayName = 'WebAppChrome'\n","import { ButtonEx } from '@xylabs/react-button'\n\nimport { WebAppPage, WebAppPageProps } from './Page'\n\nexport interface WebAppErrorPageProps extends WebAppPageProps {\n  error?: Error\n}\n\nexport const WebAppErrorPage: React.FC<WebAppErrorPageProps> = ({ error, ...props }) => (\n  <WebAppPage title=\"Oops! Something went wrong\" {...props}>\n    <h1>Oops! Something went wrong!</h1>\n    <p>{`${error}`}</p>\n    <ButtonEx href=\"/\" variant=\"contained\">\n      Homepage\n    </ButtonEx>\n  </WebAppPage>\n)\n\n/** @deprecated use WebAppErrorPage instead */\nexport const ErrorPage = WebAppErrorPage\n","import { Container, ContainerProps, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n  name: 'WebAppPage',\n  shouldForwardProp: (propName) => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n  slot: 'Root',\n})<WebAppPageProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n  const props = variant === 'scrollable' ? scrollableWrap : fixedWrap\n  return {\n    ...props,\n    alignItems: 'stretch',\n    justifyContent: 'start',\n    maxWidth: '100vw',\n    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n      inset: 0,\n      position: 'absolute',\n    },\n  }\n})\n\nexport interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {\n  container?: ContainerProps['maxWidth'] | 'none'\n  disableGutters?: boolean\n}\n\nexport const WebAppPage: React.FC<WithChildren<WebAppPageProps>> = ({\n  disableGutters,\n  disableBreadcrumbGutter,\n  title,\n  container,\n  children,\n  breadcrumbs,\n  mobileScrollingBreakpoint,\n  variant = 'scrollable',\n  ...props\n}) => {\n  const userEvents = useUserEvents()\n  const { pathname } = useLocation()\n\n  useAsyncEffect(\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    async () => {\n      await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })\n    },\n    [pathname, title, userEvents],\n  )\n\n  return (\n    <WebAppPageRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant} {...props}>\n      <Helmet title={title} />\n      {container && container !== 'none' ? (\n        <Container\n          disableGutters={disableGutters}\n          style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }}\n          maxWidth={container}\n        >\n          <WebAppBody\n            disableBreadcrumbGutter={disableBreadcrumbGutter}\n            breadcrumbs={breadcrumbs}\n            mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n            variant={variant}\n            {...props}\n          >\n            {children}\n          </WebAppBody>\n        </Container>\n      ) : (\n        <WebAppBody\n          disableBreadcrumbGutter={disableBreadcrumbGutter}\n          breadcrumbs={breadcrumbs}\n          mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n          paddingX={disableGutters ? 0 : 1}\n          variant={variant}\n          {...props}\n        >\n          {children}\n        </WebAppBody>\n      )}\n    </WebAppPageRoot>\n  )\n}\n\n/** @deprecated use WebAppPagePage instead */\nexport const FlexPage = WebAppPage\n","import { NotFound } from '@xyo-network/react-shared'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\n\nexport const WebAppNotFoundPage: React.FC<WebAppPageProps> = ({ title, ...props }) => (\n  <WebAppPage title={title ?? 'Sorry! Page Not Found'} {...props}>\n    <NotFound />\n  </WebAppPage>\n)\n\n/** @deprecated  use WebAppNotFoundPage instead */\nexport const NotFoundPage = WebAppNotFoundPage\n"],"mappings":"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","names":["FlexGrowCol","Helmet","styled","FlexGrowCol","jsx","jsxs","styled","FlexGrowCol","jsx","jsxs","jsx","jsxs","Helmet","FlexGrowCol","jsx"]}

package/package.json

@@ -11,11 +11,11 @@
   },
   "dependencies": {
     "@xylabs/react-async-effect": "^3.0.35",
-    "@xyo-network/react-app-settings": "~2.67.5",
-    "@xyo-network/react-appbar": "~2.67.5",
-    "@xyo-network/react-footer": "~2.67.5",
-    "@xyo-network/react-shared": "~2.67.5",
-    "react-router-dom": "^6.21.0"
+    "@xyo-network/react-app-settings": "~2.67.7",
+    "@xyo-network/react-appbar": "~2.67.7",
+    "@xyo-network/react-footer": "~2.67.7",
+    "@xyo-network/react-shared": "~2.67.7",
+    "react-router-dom": "^6.21.1"
   },
   "peerDependencies": {
     "@mui/icons-material": "^5",
@@ -32,7 +32,7 @@
     "react-icons": "^4"
   },
   "devDependencies": {
-    "@storybook/react": "^7.6.5",
+    "@storybook/react": "^7.6.6",
     "@types/react-helmet": "^6.1.11",
     "@xylabs/pixel": "^1.4.14",
     "@xylabs/react-button": "^3.0.35",
@@ -40,8 +40,8 @@
     "@xylabs/react-link": "^3.0.35",
     "@xylabs/react-pixel": "^3.0.35",
     "@xylabs/react-shared": "^3.0.35",
-    "@xylabs/ts-scripts-yarn3": "^3.2.24",
-    "@xylabs/tsconfig-react": "^3.2.24",
+    "@xylabs/ts-scripts-yarn3": "^3.2.25",
+    "@xylabs/tsconfig-react": "^3.2.25",
     "axios": "^1.6.2",
     "typescript": "^5.3.3"
   },
@@ -96,6 +96,6 @@
   },
   "sideEffects": false,
   "types": "dist/browser/index.d.ts",
-  "version": "2.67.5",
+  "version": "2.67.7",
   "type": "module"
 }

package/src/components/Body.tsx

@@ -5,9 +5,9 @@ import React, { ReactNode } from 'react'
 import { fixedContent, scrollableContent } from './lib'
 
 const WebAppBodyName = 'WebAppBody'
-const propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']
+const propsNotForwarded = new Set(['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter'])
 const defaultStyledOptions = {
-  shouldForwardProp: (prop: string) => !propsNotForwarded.includes(prop),
+  shouldForwardProp: (prop: string) => !propsNotForwarded.has(prop),
 }
 
 const WebAppBodyRoot = styled(FlexGrowCol, {

package/src/components/Chrome.tsx

@@ -28,12 +28,12 @@ export const WebAppChrome = forwardRef<HTMLDivElement, WebAppChromeProps>(
         </Helmet>
         {appbar ?? <ApplicationAppBar systemToolbar={<SystemToolbar menuItems={navigationType === 'menu' ? menuItems : undefined} />} />}
         <FlexGrowRow id="sidebar-nav-flex" overflow="hidden" alignItems="stretch">
-          {navigationType !== 'menu' ? (
+          {navigationType === 'menu' ? null : (
             <>
               {menuItems}
               <Divider orientation="vertical" />
             </>
-          ) : null}
+          )}
           <FlexGrowCol id="main-flex" justifyContent="flex-start" alignItems="stretch">
             <ErrorBoundary
               fallbackWithError={(error) => {