@xyo-network/react-webapp 2.78.0 → 2.78.2

package/dist/browser/index.cjs

@@ -1,2 +1,261 @@
-"use strict";var w=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var z=Object.prototype.hasOwnProperty;var J=(e,o)=>{for(var r in o)w(e,r,{get:o[r],enumerable:!0})},K=(e,o,r,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of U(o))!z.call(e,a)&&a!==r&&w(e,a,{get:()=>o[a],enumerable:!(p=M(o,a))||p.enumerable});return e};var Q=e=>K(w({},"__esModule",{value:!0}),e);var se={};J(se,{ErrorPage:()=>ae,FlexPage:()=>pe,NotFoundPage:()=>ne,WebAppBody:()=>u,WebAppChrome:()=>_,WebAppErrorPage:()=>B,WebAppNotFoundPage:()=>j,WebAppPage:()=>f});module.exports=Q(se);var x=require("@mui/material"),c=require("@xylabs/react-flexbox");var F={inset:0,position:"absolute"},v={inset:"unset",position:"relative"},E={...v},N={...F};var d=require("react/jsx-runtime"),g="WebAppBody",V=new Set(["mobileScrollingBreakpoint","variant","spacing","disableBreadcrumbGutter"]),S={shouldForwardProp:e=>!V.has(e)},Z=(0,x.styled)(c.FlexGrowCol,{...S,name:g,slot:"Root"})(({spacing:e,theme:o,mobileScrollingBreakpoint:r="sm",variant:p})=>{let a=p==="scrollable";return o.unstable_sx({alignItems:"stretch",gap:1,justifyContent:"flex-start",overflowX:"visible",overflowY:a?"scroll":"hidden",paddingY:e,[o.breakpoints.down(r)]:{overflowY:"scroll"}})}),ee=(0,x.styled)(c.FlexRow,{...S,name:g,slot:"Breadcrumb"})(({theme:e,disableBreadcrumbGutter:o,spacing:r})=>e.unstable_sx({justifyContent:"start",marginX:o?0:r})),oe=(0,x.styled)(c.FlexGrowCol,{name:g,slot:"ScrollableWrapper"})(()=>({alignItems:"stretch"})),re=(0,x.styled)(c.FlexGrowCol,{...S,name:g,slot:"Scrollable"})(({theme:e,mobileScrollingBreakpoint:o="sm",variant:r})=>({...r==="scrollable"?E:N,alignItems:"stretch",justifyContent:"start",[e.breakpoints.down(o)]:{inset:"unset",position:"relative"}})),u=({children:e,breadcrumbs:o,disableBreadcrumbGutter:r,mobileScrollingBreakpoint:p,spacing:a=1,variant:n,...s})=>(0,d.jsxs)(Z,{mobileScrollingBreakpoint:p,spacing:a,variant:n,...s,children:[o?(0,d.jsx)(ee,{disableBreadcrumbGutter:r,spacing:a,children:o}):null,(0,d.jsx)(oe,{children:(0,d.jsx)(re,{mobileScrollingBreakpoint:p,variant:n,children:e})})]});var y=require("@mui/material"),i=require("@xylabs/react-flexbox"),h=require("@xyo-network/react-appbar"),O=require("@xyo-network/react-footer"),X=require("@xyo-network/react-shared"),Y=require("react"),L=require("react-helmet");var D=require("@xylabs/react-button");var A=require("@mui/material"),G=require("@xylabs/react-async-effect"),k=require("@xylabs/react-flexbox"),I=require("@xylabs/react-pixel"),T=require("react-helmet"),H=require("react-router-dom");var l=require("react/jsx-runtime"),te=(0,A.styled)(k.FlexGrowCol,{name:"WebAppPage",shouldForwardProp:e=>e!=="mobileScrollingBreakpoint"&&e!=="variant",slot:"Root"})(({theme:e,mobileScrollingBreakpoint:o="sm",variant:r})=>({...r==="scrollable"?F:v,alignItems:"stretch",justifyContent:"start",maxWidth:"100vw",[e.breakpoints.down(o)]:{inset:0,position:"absolute"}})),f=({disableGutters:e,disableBreadcrumbGutter:o,title:r,container:p,children:a,breadcrumbs:n,mobileScrollingBreakpoint:s,variant:m="scrollable",...b})=>{let W=(0,I.useUserEvents)(),{pathname:C}=(0,H.useLocation)();return(0,G.useAsyncEffect)(async()=>{await W?.viewContent({name:r??"NodeBasePage",path:location.pathname})},[C,r,W]),(0,l.jsxs)(te,{mobileScrollingBreakpoint:s,variant:m,...b,children:[(0,l.jsx)(T.Helmet,{title:r}),p&&p!=="none"?(0,l.jsx)(A.Container,{disableGutters:e,style:{alignItems:"stretch",display:"flex",flexDirection:"column",flexGrow:1,justifyContent:"flex-start"},maxWidth:p,children:(0,l.jsx)(u,{disableBreadcrumbGutter:o,breadcrumbs:n,mobileScrollingBreakpoint:s,variant:m,...b,children:a})}):(0,l.jsx)(u,{disableBreadcrumbGutter:o,breadcrumbs:n,mobileScrollingBreakpoint:s,paddingX:e?0:1,variant:m,...b,children:a})]})},pe=f;var P=require("react/jsx-runtime"),B=({error:e,...o})=>(0,P.jsxs)(f,{title:"Oops! Something went wrong",...o,children:[(0,P.jsx)("h1",{children:"Oops! Something went wrong!"}),(0,P.jsx)("p",{children:`${e}`}),(0,P.jsx)(D.ButtonEx,{href:"/",variant:"contained",children:"Homepage"})]}),ae=B;var t=require("react/jsx-runtime"),_=(0,Y.forwardRef)(({appName:e,appbar:o,children:r,errorBoundary:p,errorPage:a,footer:n,footerElevation:s=4,menuItems:m,navigationType:b="menu",...W},C)=>(0,t.jsxs)(i.FlexCol,{id:"web-chrome-flex",alignItems:"stretch",overflow:"hidden",height:"100vh",ref:C,...W,children:[(0,t.jsx)(L.Helmet,{defaultTitle:e,titleTemplate:`%s | ${e}`,children:(0,t.jsx)("meta",{content:"website",property:"og:type"})}),o??(0,t.jsx)(h.ApplicationAppBar,{systemToolbar:(0,t.jsx)(h.SystemToolbar,{menuItems:b==="menu"?m:void 0})}),(0,t.jsxs)(i.FlexGrowRow,{id:"sidebar-nav-flex",overflow:"hidden",alignItems:"stretch",children:[b==="menu"?null:(0,t.jsxs)(t.Fragment,{children:[m,(0,t.jsx)(y.Divider,{orientation:"vertical"})]}),(0,t.jsx)(i.FlexGrowCol,{id:"main-flex",justifyContent:"flex-start",alignItems:"stretch",children:p?(0,t.jsx)(X.ErrorBoundary,{fallbackWithError:q=>a??(0,t.jsx)(B,{error:q}),children:r}):r})]}),(0,t.jsx)(i.FlexCol,{id:"footer-flex",alignItems:"stretch",children:(0,t.jsx)(y.Paper,{elevation:s,square:!0,children:n??(0,t.jsx)(O.Footer,{dynamicHeight:!0})})})]}));_.displayName="WebAppChrome";var $=require("@xyo-network/react-shared");var R=require("react/jsx-runtime"),j=({title:e,...o})=>(0,R.jsx)(f,{title:e??"Sorry! Page Not Found",...o,children:(0,R.jsx)($.NotFound,{})}),ne=j;
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ErrorPage: () => ErrorPage,
+  FlexPage: () => FlexPage,
+  NotFoundPage: () => NotFoundPage,
+  WebAppBody: () => WebAppBody,
+  WebAppChrome: () => WebAppChrome,
+  WebAppErrorPage: () => WebAppErrorPage,
+  WebAppNotFoundPage: () => WebAppNotFoundPage,
+  WebAppPage: () => WebAppPage
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/components/Body.tsx
+var import_material = require("@mui/material");
+var import_react_flexbox = require("@xylabs/react-flexbox");
+
+// src/components/lib/cssValues.ts
+var scrollableWrap = {
+  inset: 0,
+  position: "absolute"
+};
+var fixedWrap = {
+  inset: "unset",
+  position: "relative"
+};
+var scrollableContent = {
+  ...fixedWrap
+};
+var fixedContent = {
+  ...scrollableWrap
+};
+
+// src/components/Body.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var WebAppBodyName = "WebAppBody";
+var propsNotForwarded = /* @__PURE__ */ new Set(["mobileScrollingBreakpoint", "variant", "spacing", "disableBreadcrumbGutter"]);
+var defaultStyledOptions = {
+  shouldForwardProp: (prop) => !propsNotForwarded.has(prop)
+};
+var WebAppBodyRoot = (0, import_material.styled)(import_react_flexbox.FlexGrowCol, {
+  ...defaultStyledOptions,
+  name: WebAppBodyName,
+  slot: "Root"
+})(({ spacing, theme, mobileScrollingBreakpoint = "sm", variant }) => {
+  const scrollable = variant === "scrollable";
+  return theme.unstable_sx({
+    alignItems: "stretch",
+    gap: 1,
+    justifyContent: "flex-start",
+    overflowX: "visible",
+    overflowY: scrollable ? "scroll" : "hidden",
+    paddingY: spacing,
+    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
+      overflowY: "scroll"
+    }
+  });
+});
+var WebAppBodyBreadcrumb = (0, import_material.styled)(import_react_flexbox.FlexRow, {
+  ...defaultStyledOptions,
+  name: WebAppBodyName,
+  slot: "Breadcrumb"
+})(
+  ({ theme, disableBreadcrumbGutter, spacing }) => theme.unstable_sx({
+    justifyContent: "start",
+    marginX: disableBreadcrumbGutter ? 0 : spacing
+  })
+);
+var WebAppBodyScrollableWrapper = (0, import_material.styled)(import_react_flexbox.FlexGrowCol, {
+  name: WebAppBodyName,
+  slot: "ScrollableWrapper"
+})(() => ({
+  alignItems: "stretch"
+}));
+var WebAppBodyScrollable = (0, import_material.styled)(import_react_flexbox.FlexGrowCol, {
+  ...defaultStyledOptions,
+  name: WebAppBodyName,
+  slot: "Scrollable"
+})(({ theme, mobileScrollingBreakpoint = "sm", variant }) => {
+  const props = variant === "scrollable" ? scrollableContent : fixedContent;
+  return {
+    ...props,
+    alignItems: "stretch",
+    justifyContent: "start",
+    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
+      inset: "unset",
+      position: "relative"
+    }
+  };
+});
+var WebAppBody = ({
+  children,
+  breadcrumbs,
+  disableBreadcrumbGutter,
+  mobileScrollingBreakpoint,
+  spacing = 1,
+  variant,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(WebAppBodyRoot, { mobileScrollingBreakpoint, spacing, variant, ...props, children: [
+    breadcrumbs ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WebAppBodyBreadcrumb, { disableBreadcrumbGutter, spacing, children: breadcrumbs }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WebAppBodyScrollableWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WebAppBodyScrollable, { mobileScrollingBreakpoint, variant, children }) })
+  ] });
+};
+
+// src/components/Chrome.tsx
+var import_material3 = require("@mui/material");
+var import_react_flexbox3 = require("@xylabs/react-flexbox");
+var import_react_appbar = require("@xyo-network/react-appbar");
+var import_react_footer = require("@xyo-network/react-footer");
+var import_react_shared = require("@xyo-network/react-shared");
+var import_react = require("react");
+var import_react_helmet2 = require("react-helmet");
+
+// src/components/ErrorPage.tsx
+var import_react_button = require("@xylabs/react-button");
+
+// src/components/Page.tsx
+var import_material2 = require("@mui/material");
+var import_react_async_effect = require("@xylabs/react-async-effect");
+var import_react_flexbox2 = require("@xylabs/react-flexbox");
+var import_react_pixel = require("@xylabs/react-pixel");
+var import_react_helmet = require("react-helmet");
+var import_react_router_dom = require("react-router-dom");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var WebAppPageRoot = (0, import_material2.styled)(import_react_flexbox2.FlexGrowCol, {
+  name: "WebAppPage",
+  shouldForwardProp: (propName) => propName !== "mobileScrollingBreakpoint" && propName !== "variant",
+  slot: "Root"
+})(({ theme, mobileScrollingBreakpoint = "sm", variant }) => {
+  const props = variant === "scrollable" ? scrollableWrap : fixedWrap;
+  return {
+    ...props,
+    alignItems: "stretch",
+    justifyContent: "start",
+    maxWidth: "100vw",
+    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
+      inset: 0,
+      position: "absolute"
+    }
+  };
+});
+var WebAppPage = ({
+  disableGutters,
+  disableBreadcrumbGutter,
+  title,
+  container,
+  children,
+  breadcrumbs,
+  mobileScrollingBreakpoint,
+  variant = "scrollable",
+  ...props
+}) => {
+  const userEvents = (0, import_react_pixel.useUserEvents)();
+  const { pathname } = (0, import_react_router_dom.useLocation)();
+  (0, import_react_async_effect.useAsyncEffect)(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      await userEvents?.viewContent({ name: title ?? "NodeBasePage", path: location.pathname });
+    },
+    [pathname, title, userEvents]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(WebAppPageRoot, { mobileScrollingBreakpoint, variant, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_helmet.Helmet, { title }),
+    container && container !== "none" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_material2.Container,
+      {
+        disableGutters,
+        style: { alignItems: "stretch", display: "flex", flexDirection: "column", flexGrow: 1, justifyContent: "flex-start" },
+        maxWidth: container,
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          WebAppBody,
+          {
+            disableBreadcrumbGutter,
+            breadcrumbs,
+            mobileScrollingBreakpoint,
+            variant,
+            ...props,
+            children
+          }
+        )
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      WebAppBody,
+      {
+        disableBreadcrumbGutter,
+        breadcrumbs,
+        mobileScrollingBreakpoint,
+        paddingX: disableGutters ? 0 : 1,
+        variant,
+        ...props,
+        children
+      }
+    )
+  ] });
+};
+var FlexPage = WebAppPage;
+
+// src/components/ErrorPage.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var WebAppErrorPage = ({ error, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(WebAppPage, { title: "Oops! Something went wrong", ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { children: "Oops! Something went wrong!" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: `${error}` }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_button.ButtonEx, { href: "/", variant: "contained", children: "Homepage" })
+] });
+var ErrorPage = WebAppErrorPage;
+
+// src/components/Chrome.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var WebAppChrome = (0, import_react.forwardRef)(
+  ({ appName, appbar, children, errorBoundary, errorPage, footer, footerElevation = 4, menuItems, navigationType = "menu", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_flexbox3.FlexCol, { id: "web-chrome-flex", alignItems: "stretch", overflow: "hidden", height: "100vh", ref, ...props, children: [
+      /* @__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" ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          menuItems,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Divider, { orientation: "vertical" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_flexbox3.FlexGrowCol, { id: "main-flex", justifyContent: "flex-start", alignItems: "stretch", children: errorBoundary ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_react_shared.ErrorBoundary,
+          {
+            fallbackWithError: (error) => {
+              return errorPage ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(WebAppErrorPage, { error });
+            },
+            children
+          }
+        ) : children })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_flexbox3.FlexCol, { id: "footer-flex", alignItems: "stretch", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Paper, { elevation: footerElevation, square: true, children: footer ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_footer.Footer, { dynamicHeight: true }) }) })
+    ] });
+  }
+);
+WebAppChrome.displayName = "WebAppChrome";
+
+// src/components/NotFoundPage/Page.tsx
+var import_react_shared2 = require("@xyo-network/react-shared");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var WebAppNotFoundPage = ({ title, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(WebAppPage, { title: title ?? "Sorry! Page Not Found", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_shared2.NotFound, {}) });
+var NotFoundPage = WebAppNotFoundPage;
 //# sourceMappingURL=index.cjs.map

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 = 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  errorBoundary?: boolean\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, errorBoundary, 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              <ErrorBoundary\n                fallbackWithError={(error) => {\n                  return errorPage ?? <WebAppErrorPage error={error} />\n                }}\n              >\n                {children}\n              </ErrorBoundary>\n            : children}\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      : <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":["src_exports","__export","ErrorPage","FlexPage","NotFoundPage","WebAppBody","WebAppChrome","WebAppErrorPage","WebAppNotFoundPage","WebAppPage","__toCommonJS","import_material","import_react_flexbox","scrollableWrap","fixedWrap","scrollableContent","fixedContent","import_jsx_runtime","WebAppBodyName","propsNotForwarded","defaultStyledOptions","prop","WebAppBodyRoot","spacing","theme","mobileScrollingBreakpoint","variant","scrollable","WebAppBodyBreadcrumb","disableBreadcrumbGutter","WebAppBodyScrollableWrapper","WebAppBodyScrollable","scrollableContent","fixedContent","WebAppBody","children","breadcrumbs","props","import_material","import_react_flexbox","import_react_appbar","import_react_footer","import_react_shared","import_react","import_react_helmet","import_react_button","import_material","import_react_async_effect","import_react_flexbox","import_react_pixel","import_react_helmet","import_react_router_dom","import_jsx_runtime","WebAppPageRoot","propName","theme","mobileScrollingBreakpoint","variant","scrollableWrap","fixedWrap","WebAppPage","disableGutters","disableBreadcrumbGutter","title","container","children","breadcrumbs","props","userEvents","pathname","WebAppBody","FlexPage","import_jsx_runtime","WebAppErrorPage","error","props","WebAppPage","ErrorPage","import_jsx_runtime","WebAppChrome","appName","appbar","children","errorBoundary","errorPage","footer","footerElevation","menuItems","navigationType","props","ref","error","WebAppErrorPage","import_react_shared","import_jsx_runtime","WebAppNotFoundPage","title","props","WebAppPage","NotFoundPage"]}
+{"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  errorBoundary?: boolean\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, errorBoundary, 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              <ErrorBoundary\n                fallbackWithError={(error) => {\n                  return errorPage ?? <WebAppErrorPage error={error} />\n                }}\n              >\n                {children}\n              </ErrorBoundary>\n            : children}\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      : <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

@@ -1,2 +1,238 @@
-import{styled as d}from"@mui/material";import{FlexGrowCol as u,FlexRow as E}from"@xylabs/react-flexbox";var x={inset:0,position:"absolute"},W={inset:"unset",position:"relative"},w={...W},F={...x};import{jsx as g,jsxs as H}from"react/jsx-runtime";var c="WebAppBody",N=new Set(["mobileScrollingBreakpoint","variant","spacing","disableBreadcrumbGutter"]),A={shouldForwardProp:e=>!N.has(e)},G=d(u,{...A,name:c,slot:"Root"})(({spacing:e,theme:o,mobileScrollingBreakpoint:r="sm",variant:t})=>{let a=t==="scrollable";return o.unstable_sx({alignItems:"stretch",gap:1,justifyContent:"flex-start",overflowX:"visible",overflowY:a?"scroll":"hidden",paddingY:e,[o.breakpoints.down(r)]:{overflowY:"scroll"}})}),k=d(E,{...A,name:c,slot:"Breadcrumb"})(({theme:e,disableBreadcrumbGutter:o,spacing:r})=>e.unstable_sx({justifyContent:"start",marginX:o?0:r})),I=d(u,{name:c,slot:"ScrollableWrapper"})(()=>({alignItems:"stretch"})),T=d(u,{...A,name:c,slot:"Scrollable"})(({theme:e,mobileScrollingBreakpoint:o="sm",variant:r})=>({...r==="scrollable"?w:F,alignItems:"stretch",justifyContent:"start",[e.breakpoints.down(o)]:{inset:"unset",position:"relative"}})),B=({children:e,breadcrumbs:o,disableBreadcrumbGutter:r,mobileScrollingBreakpoint:t,spacing:a=1,variant:n,...s})=>H(G,{mobileScrollingBreakpoint:t,spacing:a,variant:n,...s,children:[o?g(k,{disableBreadcrumbGutter:r,spacing:a,children:o}):null,g(I,{children:g(T,{mobileScrollingBreakpoint:t,variant:n,children:e})})]});import{Divider as z,Paper as J}from"@mui/material";import{FlexCol as v,FlexGrowCol as K,FlexGrowRow as Q}from"@xylabs/react-flexbox";import{ApplicationAppBar as V,SystemToolbar as Z}from"@xyo-network/react-appbar";import{Footer as ee}from"@xyo-network/react-footer";import{ErrorBoundary as oe}from"@xyo-network/react-shared";import{forwardRef as re}from"react";import{Helmet as te}from"react-helmet";import{ButtonEx as M}from"@xylabs/react-button";import{Container as D,styled as O}from"@mui/material";import{useAsyncEffect as X}from"@xylabs/react-async-effect";import{FlexGrowCol as Y}from"@xylabs/react-flexbox";import{useUserEvents as L}from"@xylabs/react-pixel";import{Helmet as _}from"react-helmet";import{useLocation as $}from"react-router-dom";import{jsx as f,jsxs as q}from"react/jsx-runtime";var j=O(Y,{name:"WebAppPage",shouldForwardProp:e=>e!=="mobileScrollingBreakpoint"&&e!=="variant",slot:"Root"})(({theme:e,mobileScrollingBreakpoint:o="sm",variant:r})=>({...r==="scrollable"?x:W,alignItems:"stretch",justifyContent:"start",maxWidth:"100vw",[e.breakpoints.down(o)]:{inset:0,position:"absolute"}})),m=({disableGutters:e,disableBreadcrumbGutter:o,title:r,container:t,children:a,breadcrumbs:n,mobileScrollingBreakpoint:s,variant:l="scrollable",...i})=>{let b=L(),{pathname:P}=$();return X(async()=>{await b?.viewContent({name:r??"NodeBasePage",path:location.pathname})},[P,r,b]),q(j,{mobileScrollingBreakpoint:s,variant:l,...i,children:[f(_,{title:r}),t&&t!=="none"?f(D,{disableGutters:e,style:{alignItems:"stretch",display:"flex",flexDirection:"column",flexGrow:1,justifyContent:"flex-start"},maxWidth:t,children:f(B,{disableBreadcrumbGutter:o,breadcrumbs:n,mobileScrollingBreakpoint:s,variant:l,...i,children:a})}):f(B,{disableBreadcrumbGutter:o,breadcrumbs:n,mobileScrollingBreakpoint:s,paddingX:e?0:1,variant:l,...i,children:a})]})},ve=m;import{jsx as y,jsxs as U}from"react/jsx-runtime";var h=({error:e,...o})=>U(m,{title:"Oops! Something went wrong",...o,children:[y("h1",{children:"Oops! Something went wrong!"}),y("p",{children:`${e}`}),y(M,{href:"/",variant:"contained",children:"Homepage"})]}),ke=h;import{Fragment as ae,jsx as p,jsxs as C}from"react/jsx-runtime";var pe=re(({appName:e,appbar:o,children:r,errorBoundary:t,errorPage:a,footer:n,footerElevation:s=4,menuItems:l,navigationType:i="menu",...b},P)=>C(v,{id:"web-chrome-flex",alignItems:"stretch",overflow:"hidden",height:"100vh",ref:P,...b,children:[p(te,{defaultTitle:e,titleTemplate:`%s | ${e}`,children:p("meta",{content:"website",property:"og:type"})}),o??p(V,{systemToolbar:p(Z,{menuItems:i==="menu"?l:void 0})}),C(Q,{id:"sidebar-nav-flex",overflow:"hidden",alignItems:"stretch",children:[i==="menu"?null:C(ae,{children:[l,p(z,{orientation:"vertical"})]}),p(K,{id:"main-flex",justifyContent:"flex-start",alignItems:"stretch",children:t?p(oe,{fallbackWithError:R=>a??p(h,{error:R}),children:r}):r})]}),p(v,{id:"footer-flex",alignItems:"stretch",children:p(J,{elevation:s,square:!0,children:n??p(ee,{dynamicHeight:!0})})})]}));pe.displayName="WebAppChrome";import{NotFound as ne}from"@xyo-network/react-shared";import{jsx as S}from"react/jsx-runtime";var se=({title:e,...o})=>S(m,{title:e??"Sorry! Page Not Found",...o,children:S(ne,{})}),Qe=se;export{ke as ErrorPage,ve as FlexPage,Qe as NotFoundPage,B as WebAppBody,pe as WebAppChrome,h as WebAppErrorPage,se as WebAppNotFoundPage,m as WebAppPage};
+// src/components/Body.tsx
+import { styled } from "@mui/material";
+import { FlexGrowCol, FlexRow } from "@xylabs/react-flexbox";
+
+// src/components/lib/cssValues.ts
+var scrollableWrap = {
+  inset: 0,
+  position: "absolute"
+};
+var fixedWrap = {
+  inset: "unset",
+  position: "relative"
+};
+var scrollableContent = {
+  ...fixedWrap
+};
+var fixedContent = {
+  ...scrollableWrap
+};
+
+// src/components/Body.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var WebAppBodyName = "WebAppBody";
+var propsNotForwarded = /* @__PURE__ */ new Set(["mobileScrollingBreakpoint", "variant", "spacing", "disableBreadcrumbGutter"]);
+var defaultStyledOptions = {
+  shouldForwardProp: (prop) => !propsNotForwarded.has(prop)
+};
+var WebAppBodyRoot = styled(FlexGrowCol, {
+  ...defaultStyledOptions,
+  name: WebAppBodyName,
+  slot: "Root"
+})(({ spacing, theme, mobileScrollingBreakpoint = "sm", variant }) => {
+  const scrollable = variant === "scrollable";
+  return theme.unstable_sx({
+    alignItems: "stretch",
+    gap: 1,
+    justifyContent: "flex-start",
+    overflowX: "visible",
+    overflowY: scrollable ? "scroll" : "hidden",
+    paddingY: spacing,
+    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
+      overflowY: "scroll"
+    }
+  });
+});
+var WebAppBodyBreadcrumb = styled(FlexRow, {
+  ...defaultStyledOptions,
+  name: WebAppBodyName,
+  slot: "Breadcrumb"
+})(
+  ({ theme, disableBreadcrumbGutter, spacing }) => theme.unstable_sx({
+    justifyContent: "start",
+    marginX: disableBreadcrumbGutter ? 0 : spacing
+  })
+);
+var WebAppBodyScrollableWrapper = styled(FlexGrowCol, {
+  name: WebAppBodyName,
+  slot: "ScrollableWrapper"
+})(() => ({
+  alignItems: "stretch"
+}));
+var WebAppBodyScrollable = styled(FlexGrowCol, {
+  ...defaultStyledOptions,
+  name: WebAppBodyName,
+  slot: "Scrollable"
+})(({ theme, mobileScrollingBreakpoint = "sm", variant }) => {
+  const props = variant === "scrollable" ? scrollableContent : fixedContent;
+  return {
+    ...props,
+    alignItems: "stretch",
+    justifyContent: "start",
+    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
+      inset: "unset",
+      position: "relative"
+    }
+  };
+});
+var WebAppBody = ({
+  children,
+  breadcrumbs,
+  disableBreadcrumbGutter,
+  mobileScrollingBreakpoint,
+  spacing = 1,
+  variant,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(WebAppBodyRoot, { mobileScrollingBreakpoint, spacing, variant, ...props, children: [
+    breadcrumbs ? /* @__PURE__ */ jsx(WebAppBodyBreadcrumb, { disableBreadcrumbGutter, spacing, children: breadcrumbs }) : null,
+    /* @__PURE__ */ jsx(WebAppBodyScrollableWrapper, { children: /* @__PURE__ */ jsx(WebAppBodyScrollable, { mobileScrollingBreakpoint, variant, children }) })
+  ] });
+};
+
+// src/components/Chrome.tsx
+import { Divider, Paper } from "@mui/material";
+import { FlexCol, FlexGrowCol as FlexGrowCol3, FlexGrowRow } from "@xylabs/react-flexbox";
+import { ApplicationAppBar, SystemToolbar } from "@xyo-network/react-appbar";
+import { Footer } from "@xyo-network/react-footer";
+import { ErrorBoundary } from "@xyo-network/react-shared";
+import { forwardRef } from "react";
+import { Helmet as Helmet2 } from "react-helmet";
+
+// src/components/ErrorPage.tsx
+import { ButtonEx } from "@xylabs/react-button";
+
+// src/components/Page.tsx
+import { Container, styled as styled2 } from "@mui/material";
+import { useAsyncEffect } from "@xylabs/react-async-effect";
+import { FlexGrowCol as FlexGrowCol2 } from "@xylabs/react-flexbox";
+import { useUserEvents } from "@xylabs/react-pixel";
+import { Helmet } from "react-helmet";
+import { useLocation } from "react-router-dom";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var WebAppPageRoot = styled2(FlexGrowCol2, {
+  name: "WebAppPage",
+  shouldForwardProp: (propName) => propName !== "mobileScrollingBreakpoint" && propName !== "variant",
+  slot: "Root"
+})(({ theme, mobileScrollingBreakpoint = "sm", variant }) => {
+  const props = variant === "scrollable" ? scrollableWrap : fixedWrap;
+  return {
+    ...props,
+    alignItems: "stretch",
+    justifyContent: "start",
+    maxWidth: "100vw",
+    [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
+      inset: 0,
+      position: "absolute"
+    }
+  };
+});
+var WebAppPage = ({
+  disableGutters,
+  disableBreadcrumbGutter,
+  title,
+  container,
+  children,
+  breadcrumbs,
+  mobileScrollingBreakpoint,
+  variant = "scrollable",
+  ...props
+}) => {
+  const userEvents = useUserEvents();
+  const { pathname } = useLocation();
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      await userEvents?.viewContent({ name: title ?? "NodeBasePage", path: location.pathname });
+    },
+    [pathname, title, userEvents]
+  );
+  return /* @__PURE__ */ jsxs2(WebAppPageRoot, { mobileScrollingBreakpoint, variant, ...props, children: [
+    /* @__PURE__ */ jsx2(Helmet, { title }),
+    container && container !== "none" ? /* @__PURE__ */ jsx2(
+      Container,
+      {
+        disableGutters,
+        style: { alignItems: "stretch", display: "flex", flexDirection: "column", flexGrow: 1, justifyContent: "flex-start" },
+        maxWidth: container,
+        children: /* @__PURE__ */ jsx2(
+          WebAppBody,
+          {
+            disableBreadcrumbGutter,
+            breadcrumbs,
+            mobileScrollingBreakpoint,
+            variant,
+            ...props,
+            children
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx2(
+      WebAppBody,
+      {
+        disableBreadcrumbGutter,
+        breadcrumbs,
+        mobileScrollingBreakpoint,
+        paddingX: disableGutters ? 0 : 1,
+        variant,
+        ...props,
+        children
+      }
+    )
+  ] });
+};
+var FlexPage = WebAppPage;
+
+// src/components/ErrorPage.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var WebAppErrorPage = ({ error, ...props }) => /* @__PURE__ */ jsxs3(WebAppPage, { title: "Oops! Something went wrong", ...props, children: [
+  /* @__PURE__ */ jsx3("h1", { children: "Oops! Something went wrong!" }),
+  /* @__PURE__ */ jsx3("p", { children: `${error}` }),
+  /* @__PURE__ */ jsx3(ButtonEx, { href: "/", variant: "contained", children: "Homepage" })
+] });
+var ErrorPage = WebAppErrorPage;
+
+// src/components/Chrome.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var WebAppChrome = forwardRef(
+  ({ appName, appbar, children, errorBoundary, errorPage, footer, footerElevation = 4, menuItems, navigationType = "menu", ...props }, ref) => {
+    return /* @__PURE__ */ jsxs4(FlexCol, { id: "web-chrome-flex", alignItems: "stretch", overflow: "hidden", height: "100vh", ref, ...props, children: [
+      /* @__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" ? null : /* @__PURE__ */ jsxs4(Fragment, { children: [
+          menuItems,
+          /* @__PURE__ */ jsx4(Divider, { orientation: "vertical" })
+        ] }),
+        /* @__PURE__ */ jsx4(FlexGrowCol3, { id: "main-flex", justifyContent: "flex-start", alignItems: "stretch", children: errorBoundary ? /* @__PURE__ */ jsx4(
+          ErrorBoundary,
+          {
+            fallbackWithError: (error) => {
+              return errorPage ?? /* @__PURE__ */ jsx4(WebAppErrorPage, { error });
+            },
+            children
+          }
+        ) : children })
+      ] }),
+      /* @__PURE__ */ jsx4(FlexCol, { id: "footer-flex", alignItems: "stretch", children: /* @__PURE__ */ jsx4(Paper, { elevation: footerElevation, square: true, children: footer ?? /* @__PURE__ */ jsx4(Footer, { dynamicHeight: true }) }) })
+    ] });
+  }
+);
+WebAppChrome.displayName = "WebAppChrome";
+
+// src/components/NotFoundPage/Page.tsx
+import { NotFound } from "@xyo-network/react-shared";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var WebAppNotFoundPage = ({ title, ...props }) => /* @__PURE__ */ jsx5(WebAppPage, { title: title ?? "Sorry! Page Not Found", ...props, children: /* @__PURE__ */ jsx5(NotFound, {}) });
+var NotFoundPage = WebAppNotFoundPage;
+export {
+  ErrorPage,
+  FlexPage,
+  NotFoundPage,
+  WebAppBody,
+  WebAppChrome,
+  WebAppErrorPage,
+  WebAppNotFoundPage,
+  WebAppPage
+};
 //# sourceMappingURL=index.js.map