@xylabs/react-webapp 6.3.13 → 6.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/browser/index.d.ts +2 -51
  2. package/dist/browser/index.mjs +143 -148
  3. package/dist/browser/index.mjs.map +1 -1
  4. package/package.json +21 -21
package/dist/browser/index.d.ts CHANGED
@@ -1,51 +1,2 @@
1
- import { Breakpoint, ContainerProps } from '@mui/material';
2
- import { FlexBoxProps } from '@xylabs/react-flexbox';
3
- import React, { ReactNode, PropsWithChildren } from 'react';
4
- import * as react_jsx_runtime from 'react/jsx-runtime';
5
- import { WebAppNavigationType } from '@xylabs/react-app-settings';
6
-
7
- interface WebAppBodyProps extends FlexBoxProps {
8
- breadcrumbs?: ReactNode;
9
- disableBreadcrumbGutter?: boolean;
10
- mobileScrollingBreakpoint?: Breakpoint;
11
- spacing?: string | number;
12
- variant?: 'scrollable' | 'fixed';
13
- }
14
- declare const WebAppBody: React.FC<WebAppBodyProps>;
15
-
16
- interface WebAppChromeProps extends FlexBoxProps {
17
- appName: string;
18
- appbar?: ReactNode;
19
- errorBoundary?: boolean;
20
- errorPage?: ReactNode;
21
- footer?: ReactNode;
22
- footerElevation?: number;
23
- menuItems?: ReactNode;
24
- navigationType?: WebAppNavigationType;
25
- }
26
- declare const WebAppChrome: {
27
- ({ ref, appName, appbar, children, errorBoundary, errorPage, footer, footerElevation, menuItems, navigationType, ...props }: WebAppChromeProps): react_jsx_runtime.JSX.Element;
28
- displayName: string;
29
- };
30
-
31
- interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {
32
- container?: ContainerProps['maxWidth'] | 'none';
33
- disableGutters?: boolean;
34
- }
35
- declare const WebAppPage: React.FC<PropsWithChildren<WebAppPageProps>>;
36
- /** @deprecated use WebAppPagePage instead */
37
- declare const FlexPage: React.FC<PropsWithChildren<WebAppPageProps>>;
38
-
39
- interface WebAppErrorPageProps extends WebAppPageProps {
40
- error?: Error;
41
- }
42
- declare const WebAppErrorPage: React.FC<WebAppErrorPageProps>;
43
- /** @deprecated use WebAppErrorPage instead */
44
- declare const ErrorPage: React.FC<WebAppErrorPageProps>;
45
-
46
- declare const WebAppNotFoundPage: React.FC<WebAppPageProps>;
47
- /** @deprecated use WebAppNotFoundPage instead */
48
- declare const NotFoundPage: React.FC<WebAppPageProps>;
49
-
50
- export { ErrorPage, FlexPage, NotFoundPage, WebAppBody, WebAppChrome, WebAppErrorPage, WebAppNotFoundPage, WebAppPage };
51
- export type { WebAppBodyProps, WebAppChromeProps, WebAppErrorPageProps, WebAppPageProps };
1
+ export * from './components/index.ts';
2
+ //# sourceMappingURL=index.d.ts.map
package/dist/browser/index.mjs CHANGED
@@ -1,6 +1,10 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
+
1
4
  // src/components/Body.tsx
2
5
  import { styled } from "@mui/material";
3
6
  import { FlexGrowCol, FlexRow } from "@xylabs/react-flexbox";
7
+ import React from "react";
4
8
 
5
9
  // src/components/lib/cssValues.ts
6
10
  var scrollableWrap = {
@@ -11,24 +15,29 @@ var fixedWrap = {
11
15
  inset: "unset",
12
16
  position: "relative"
13
17
  };
14
- var scrollableContent = { ...fixedWrap };
15
- var fixedContent = { ...scrollableWrap };
18
+ var scrollableContent = {
19
+ ...fixedWrap
20
+ };
21
+ var fixedContent = {
22
+ ...scrollableWrap
23
+ };
16
24
 
17
25
  // src/components/Body.tsx
18
- import { jsx, jsxs } from "react/jsx-runtime";
19
26
  var WebAppBodyName = "WebAppBody";
20
- var propsNotForwarded = /* @__PURE__ */ new Set(["mobileScrollingBreakpoint", "variant", "spacing", "disableBreadcrumbGutter"]);
21
- var defaultStyledOptions = { shouldForwardProp: (prop) => !propsNotForwarded.has(prop) };
27
+ var propsNotForwarded = /* @__PURE__ */ new Set([
28
+ "mobileScrollingBreakpoint",
29
+ "variant",
30
+ "spacing",
31
+ "disableBreadcrumbGutter"
32
+ ]);
33
+ var defaultStyledOptions = {
34
+ shouldForwardProp: /* @__PURE__ */ __name((prop) => !propsNotForwarded.has(prop), "shouldForwardProp")
35
+ };
22
36
  var WebAppBodyRoot = styled(FlexGrowCol, {
23
37
  ...defaultStyledOptions,
24
38
  name: WebAppBodyName,
25
39
  slot: "Root"
26
- })(({
27
- spacing,
28
- theme,
29
- mobileScrollingBreakpoint = "sm",
30
- variant
31
- }) => {
40
+ })(({ spacing, theme, mobileScrollingBreakpoint = "sm", variant }) => {
32
41
  const scrollable = variant === "scrollable";
33
42
  return theme.unstable_sx({
34
43
  alignItems: "stretch",
@@ -37,34 +46,30 @@ var WebAppBodyRoot = styled(FlexGrowCol, {
37
46
  overflowX: "visible",
38
47
  overflowY: scrollable ? "scroll" : "hidden",
39
48
  paddingY: spacing,
40
- [theme.breakpoints.down(mobileScrollingBreakpoint)]: { overflowY: "scroll" }
49
+ [theme.breakpoints.down(mobileScrollingBreakpoint)]: {
50
+ overflowY: "scroll"
51
+ }
41
52
  });
42
53
  });
43
54
  var WebAppBodyBreadcrumb = styled(FlexRow, {
44
55
  ...defaultStyledOptions,
45
56
  name: WebAppBodyName,
46
57
  slot: "Breadcrumb"
47
- })(({
48
- theme,
49
- disableBreadcrumbGutter,
50
- spacing
51
- }) => theme.unstable_sx({
58
+ })(({ theme, disableBreadcrumbGutter, spacing }) => theme.unstable_sx({
52
59
  justifyContent: "start",
53
60
  marginX: disableBreadcrumbGutter ? 0 : spacing
54
61
  }));
55
62
  var WebAppBodyScrollableWrapper = styled(FlexGrowCol, {
56
63
  name: WebAppBodyName,
57
64
  slot: "ScrollableWrapper"
58
- })(() => ({ alignItems: "stretch" }));
65
+ })(() => ({
66
+ alignItems: "stretch"
67
+ }));
59
68
  var WebAppBodyScrollable = styled(FlexGrowCol, {
60
69
  ...defaultStyledOptions,
61
70
  name: WebAppBodyName,
62
71
  slot: "Scrollable"
63
- })(({
64
- theme,
65
- mobileScrollingBreakpoint = "sm",
66
- variant
67
- }) => {
72
+ })(({ theme, mobileScrollingBreakpoint = "sm", variant }) => {
68
73
  const props = variant === "scrollable" ? scrollableContent : fixedContent;
69
74
  return {
70
75
  ...props,
@@ -76,52 +81,46 @@ var WebAppBodyScrollable = styled(FlexGrowCol, {
76
81
  }
77
82
  };
78
83
  });
79
- var WebAppBody = ({
80
- children,
81
- breadcrumbs,
82
- disableBreadcrumbGutter,
83
- mobileScrollingBreakpoint,
84
- spacing = 1,
85
- variant,
86
- ...props
87
- }) => {
88
- return /* @__PURE__ */ jsxs(WebAppBodyRoot, { mobileScrollingBreakpoint, spacing, variant, ...props, children: [
89
- breadcrumbs ? /* @__PURE__ */ jsx(WebAppBodyBreadcrumb, { disableBreadcrumbGutter, spacing, children: breadcrumbs }) : null,
90
- /* @__PURE__ */ jsx(WebAppBodyScrollableWrapper, { children: /* @__PURE__ */ jsx(WebAppBodyScrollable, { mobileScrollingBreakpoint, variant, children }) })
91
- ] });
92
- };
84
+ var WebAppBody = /* @__PURE__ */ __name(({ children, breadcrumbs, disableBreadcrumbGutter, mobileScrollingBreakpoint, spacing = 1, variant, ...props }) => {
85
+ return /* @__PURE__ */ React.createElement(WebAppBodyRoot, {
86
+ mobileScrollingBreakpoint,
87
+ spacing,
88
+ variant,
89
+ ...props
90
+ }, breadcrumbs ? /* @__PURE__ */ React.createElement(WebAppBodyBreadcrumb, {
91
+ disableBreadcrumbGutter,
92
+ spacing
93
+ }, breadcrumbs) : null, /* @__PURE__ */ React.createElement(WebAppBodyScrollableWrapper, null, /* @__PURE__ */ React.createElement(WebAppBodyScrollable, {
94
+ mobileScrollingBreakpoint,
95
+ variant
96
+ }, children)));
97
+ }, "WebAppBody");
93
98
 
94
99
  // src/components/Chrome.tsx
95
100
  import { Divider, Paper } from "@mui/material";
96
101
  import { ApplicationAppBar, SystemToolbar } from "@xylabs/react-appbar";
97
102
  import { ErrorBoundary } from "@xylabs/react-error";
98
- import {
99
- FlexCol,
100
- FlexGrowCol as FlexGrowCol3,
101
- FlexGrowRow
102
- } from "@xylabs/react-flexbox";
103
+ import { FlexCol, FlexGrowCol as FlexGrowCol3, FlexGrowRow } from "@xylabs/react-flexbox";
104
+ import React4 from "react";
103
105
  import { Helmet as Helmet2 } from "react-helmet";
104
106
 
105
107
  // src/components/ErrorPage.tsx
106
108
  import { ButtonEx } from "@xylabs/react-button";
109
+ import React3 from "react";
107
110
 
108
111
  // src/components/Page.tsx
109
112
  import { Container, styled as styled2 } from "@mui/material";
110
113
  import { useAsyncEffect } from "@xylabs/react-async-effect";
111
114
  import { FlexGrowCol as FlexGrowCol2 } from "@xylabs/react-flexbox";
112
115
  import { useUserEvents } from "@xylabs/react-pixel";
116
+ import React2 from "react";
113
117
  import { Helmet } from "react-helmet";
114
118
  import { useLocation } from "react-router-dom";
115
- import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
116
119
  var WebAppPageRoot = styled2(FlexGrowCol2, {
117
120
  name: "WebAppPage",
118
- shouldForwardProp: (propName) => propName !== "mobileScrollingBreakpoint" && propName !== "variant",
121
+ shouldForwardProp: /* @__PURE__ */ __name((propName) => propName !== "mobileScrollingBreakpoint" && propName !== "variant", "shouldForwardProp"),
119
122
  slot: "Root"
120
- })(({
121
- theme,
122
- mobileScrollingBreakpoint = "sm",
123
- variant
124
- }) => {
123
+ })(({ theme, mobileScrollingBreakpoint = "sm", variant }) => {
125
124
  const props = variant === "scrollable" ? scrollableWrap : fixedWrap;
126
125
  return {
127
126
  ...props,
@@ -134,118 +133,114 @@ var WebAppPageRoot = styled2(FlexGrowCol2, {
134
133
  }
135
134
  };
136
135
  });
137
- var WebAppPage = ({
138
- disableGutters,
139
- disableBreadcrumbGutter,
140
- title,
141
- container,
142
- children,
143
- breadcrumbs,
144
- mobileScrollingBreakpoint,
145
- variant = "scrollable",
146
- ...props
147
- }) => {
136
+ var WebAppPage = /* @__PURE__ */ __name(({ disableGutters, disableBreadcrumbGutter, title, container, children, breadcrumbs, mobileScrollingBreakpoint, variant = "scrollable", ...props }) => {
148
137
  const userEvents = useUserEvents();
149
138
  const { pathname } = useLocation();
150
- useAsyncEffect(
151
- async () => {
152
- await userEvents?.viewContent({ name: title ?? "NodeBasePage", path: location.pathname });
139
+ useAsyncEffect(async () => {
140
+ await userEvents?.viewContent({
141
+ name: title ?? "NodeBasePage",
142
+ path: location.pathname
143
+ });
144
+ }, [
145
+ pathname,
146
+ title,
147
+ userEvents
148
+ ]);
149
+ return /* @__PURE__ */ React2.createElement(WebAppPageRoot, {
150
+ mobileScrollingBreakpoint,
151
+ variant,
152
+ ...props
153
+ }, /* @__PURE__ */ React2.createElement(Helmet, {
154
+ title
155
+ }), container && container !== "none" ? /* @__PURE__ */ React2.createElement(Container, {
156
+ disableGutters,
157
+ style: {
158
+ alignItems: "stretch",
159
+ display: "flex",
160
+ flexDirection: "column",
161
+ flexGrow: 1,
162
+ justifyContent: "flex-start"
153
163
  },
154
- [pathname, title, userEvents]
155
- );
156
- return /* @__PURE__ */ jsxs2(WebAppPageRoot, { mobileScrollingBreakpoint, variant, ...props, children: [
157
- /* @__PURE__ */ jsx2(Helmet, { title }),
158
- container && container !== "none" ? /* @__PURE__ */ jsx2(
159
- Container,
160
- {
161
- disableGutters,
162
- style: {
163
- alignItems: "stretch",
164
- display: "flex",
165
- flexDirection: "column",
166
- flexGrow: 1,
167
- justifyContent: "flex-start"
168
- },
169
- maxWidth: container,
170
- children: /* @__PURE__ */ jsx2(
171
- WebAppBody,
172
- {
173
- disableBreadcrumbGutter,
174
- breadcrumbs,
175
- mobileScrollingBreakpoint,
176
- variant,
177
- ...props,
178
- children
179
- }
180
- )
181
- }
182
- ) : /* @__PURE__ */ jsx2(
183
- WebAppBody,
184
- {
185
- disableBreadcrumbGutter,
186
- breadcrumbs,
187
- mobileScrollingBreakpoint,
188
- paddingX: disableGutters ? 0 : 1,
189
- variant,
190
- ...props,
191
- children
192
- }
193
- )
194
- ] });
195
- };
164
+ maxWidth: container
165
+ }, /* @__PURE__ */ React2.createElement(WebAppBody, {
166
+ disableBreadcrumbGutter,
167
+ breadcrumbs,
168
+ mobileScrollingBreakpoint,
169
+ variant,
170
+ ...props
171
+ }, children)) : /* @__PURE__ */ React2.createElement(WebAppBody, {
172
+ disableBreadcrumbGutter,
173
+ breadcrumbs,
174
+ mobileScrollingBreakpoint,
175
+ paddingX: disableGutters ? 0 : 1,
176
+ variant,
177
+ ...props
178
+ }, children));
179
+ }, "WebAppPage");
196
180
  var FlexPage = WebAppPage;
197
181
 
198
182
  // src/components/ErrorPage.tsx
199
- import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
200
- var WebAppErrorPage = ({ error, ...props }) => /* @__PURE__ */ jsxs3(WebAppPage, { title: "Oops! Something went wrong", ...props, children: [
201
- /* @__PURE__ */ jsx3("h1", { children: "Oops! Something went wrong!" }),
202
- /* @__PURE__ */ jsx3("p", { children: `${error}` }),
203
- /* @__PURE__ */ jsx3(ButtonEx, { href: "/", variant: "contained", children: "Homepage" })
204
- ] });
183
+ var WebAppErrorPage = /* @__PURE__ */ __name(({ error, ...props }) => /* @__PURE__ */ React3.createElement(WebAppPage, {
184
+ title: "Oops! Something went wrong",
185
+ ...props
186
+ }, /* @__PURE__ */ React3.createElement("h1", null, "Oops! Something went wrong!"), /* @__PURE__ */ React3.createElement("p", null, `${error}`), /* @__PURE__ */ React3.createElement(ButtonEx, {
187
+ href: "/",
188
+ variant: "contained"
189
+ }, "Homepage")), "WebAppErrorPage");
205
190
  var ErrorPage = WebAppErrorPage;
206
191
 
207
192
  // src/components/Chrome.tsx
208
- import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
209
- var WebAppChrome = ({
210
- ref,
211
- appName,
212
- appbar,
213
- children,
214
- errorBoundary,
215
- errorPage,
216
- footer,
217
- footerElevation = 4,
218
- menuItems,
219
- navigationType = "menu",
220
- ...props
221
- }) => {
222
- return /* @__PURE__ */ jsxs4(FlexCol, { id: "web-chrome-flex", alignItems: "stretch", overflow: "hidden", height: "100vh", ref, ...props, children: [
223
- /* @__PURE__ */ jsx4(Helmet2, { defaultTitle: appName, titleTemplate: `%s | ${appName}`, children: /* @__PURE__ */ jsx4("meta", { content: "website", property: "og:type" }) }),
224
- appbar ?? /* @__PURE__ */ jsx4(ApplicationAppBar, { systemToolbar: /* @__PURE__ */ jsx4(SystemToolbar, { menuItems: navigationType === "menu" ? menuItems : void 0 }) }),
225
- /* @__PURE__ */ jsxs4(FlexGrowRow, { id: "sidebar-nav-flex", overflow: "hidden", alignItems: "stretch", children: [
226
- navigationType === "menu" ? null : /* @__PURE__ */ jsxs4(Fragment, { children: [
227
- menuItems,
228
- /* @__PURE__ */ jsx4(Divider, { orientation: "vertical" })
229
- ] }),
230
- /* @__PURE__ */ jsx4(FlexGrowCol3, { id: "main-flex", justifyContent: "flex-start", alignItems: "stretch", children: errorBoundary ? /* @__PURE__ */ jsx4(
231
- ErrorBoundary,
232
- {
233
- fallbackWithError: (error) => {
234
- return errorPage ?? /* @__PURE__ */ jsx4(WebAppErrorPage, { error });
235
- },
236
- children
237
- }
238
- ) : children })
239
- ] }),
240
- /* @__PURE__ */ jsx4(FlexCol, { id: "footer-flex", alignItems: "stretch", children: /* @__PURE__ */ jsx4(Paper, { elevation: footerElevation, square: true, children: footer }) })
241
- ] });
242
- };
193
+ var WebAppChrome = /* @__PURE__ */ __name(({ ref, appName, appbar, children, errorBoundary, errorPage, footer, footerElevation = 4, menuItems, navigationType = "menu", ...props }) => {
194
+ return /* @__PURE__ */ React4.createElement(FlexCol, {
195
+ id: "web-chrome-flex",
196
+ alignItems: "stretch",
197
+ overflow: "hidden",
198
+ height: "100vh",
199
+ ref,
200
+ ...props
201
+ }, /* @__PURE__ */ React4.createElement(Helmet2, {
202
+ defaultTitle: appName,
203
+ titleTemplate: `%s | ${appName}`
204
+ }, /* @__PURE__ */ React4.createElement("meta", {
205
+ content: "website",
206
+ property: "og:type"
207
+ })), appbar ?? /* @__PURE__ */ React4.createElement(ApplicationAppBar, {
208
+ systemToolbar: /* @__PURE__ */ React4.createElement(SystemToolbar, {
209
+ menuItems: navigationType === "menu" ? menuItems : void 0
210
+ })
211
+ }), /* @__PURE__ */ React4.createElement(FlexGrowRow, {
212
+ id: "sidebar-nav-flex",
213
+ overflow: "hidden",
214
+ alignItems: "stretch"
215
+ }, navigationType === "menu" ? null : /* @__PURE__ */ React4.createElement(React4.Fragment, null, menuItems, /* @__PURE__ */ React4.createElement(Divider, {
216
+ orientation: "vertical"
217
+ })), /* @__PURE__ */ React4.createElement(FlexGrowCol3, {
218
+ id: "main-flex",
219
+ justifyContent: "flex-start",
220
+ alignItems: "stretch"
221
+ }, errorBoundary ? /* @__PURE__ */ React4.createElement(ErrorBoundary, {
222
+ fallbackWithError: /* @__PURE__ */ __name((error) => {
223
+ return errorPage ?? /* @__PURE__ */ React4.createElement(WebAppErrorPage, {
224
+ error
225
+ });
226
+ }, "fallbackWithError")
227
+ }, children) : children)), /* @__PURE__ */ React4.createElement(FlexCol, {
228
+ id: "footer-flex",
229
+ alignItems: "stretch"
230
+ }, /* @__PURE__ */ React4.createElement(Paper, {
231
+ elevation: footerElevation,
232
+ square: true
233
+ }, footer)));
234
+ }, "WebAppChrome");
243
235
  WebAppChrome.displayName = "WebAppChrome";
244
236
 
245
237
  // src/components/NotFoundPage/Page.tsx
246
238
  import { NotFound } from "@xylabs/react-shared";
247
- import { jsx as jsx5 } from "react/jsx-runtime";
248
- var WebAppNotFoundPage = ({ title, ...props }) => /* @__PURE__ */ jsx5(WebAppPage, { title: title ?? "Sorry! Page Not Found", ...props, children: /* @__PURE__ */ jsx5(NotFound, {}) });
239
+ import React5 from "react";
240
+ var WebAppNotFoundPage = /* @__PURE__ */ __name(({ title, ...props }) => /* @__PURE__ */ React5.createElement(WebAppPage, {
241
+ title: title ?? "Sorry! Page Not Found",
242
+ ...props
243
+ }, /* @__PURE__ */ React5.createElement(NotFound, null)), "WebAppNotFoundPage");
249
244
  var NotFoundPage = WebAppNotFoundPage;
250
245
  export {
251
246
  ErrorPage,
package/dist/browser/index.mjs.map CHANGED
@@ -1 +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 type { Breakpoint } from '@mui/material'\nimport { styled } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nimport { fixedContent, scrollableContent } from './lib/index.ts'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = new Set(['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter'])\nconst defaultStyledOptions = { shouldForwardProp: (prop: string) => !propsNotForwarded.has(prop) }\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Root',\n})<WebAppBodyProps>(({\n spacing, theme, mobileScrollingBreakpoint = 'sm', variant,\n}) => {\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)]: { overflowY: 'scroll' },\n })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Breadcrumb',\n})<WebAppBodyProps>(({\n theme, disableBreadcrumbGutter, spacing,\n}) =>\n theme.unstable_sx({\n justifyContent: 'start',\n marginX: disableBreadcrumbGutter ? 0 : spacing,\n }))\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n name: WebAppBodyName,\n slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({ alignItems: 'stretch' }))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Scrollable',\n})<WebAppBodyProps>(({\n theme, mobileScrollingBreakpoint = 'sm', variant,\n}) => {\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 ? (\n <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\n )\n : null}\n <WebAppBodyScrollableWrapper>\n <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n {children}\n </WebAppBodyScrollable>\n </WebAppBodyScrollableWrapper>\n </WebAppBodyRoot>\n )\n}\n","import type { 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 = { ...fixedWrap } as const\n\nexport const fixedContent: CSSProperties = { ...scrollableWrap } as const\n","import { Divider, Paper } from '@mui/material'\nimport type { WebAppNavigationType } from '@xylabs/react-app-settings'\nimport { ApplicationAppBar, SystemToolbar } from '@xylabs/react-appbar'\nimport { ErrorBoundary } from '@xylabs/react-error'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport {\n FlexCol, FlexGrowCol, FlexGrowRow,\n} from '@xylabs/react-flexbox'\nimport type { ReactNode } from 'react'\nimport React from 'react'\nimport { Helmet } from 'react-helmet'\n\nimport { WebAppErrorPage } from './ErrorPage.tsx'\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 = ({\n ref, appName, appbar, children, errorBoundary, errorPage, footer, footerElevation = 4, menuItems, navigationType = 'menu', ...props\n}: WebAppChromeProps) => {\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 ? null\n : (\n <>\n {menuItems}\n <Divider orientation=\"vertical\" />\n </>\n )}\n <FlexGrowCol id=\"main-flex\" justifyContent=\"flex-start\" alignItems=\"stretch\">\n {errorBoundary\n ? (\n <ErrorBoundary\n fallbackWithError={(error) => {\n return errorPage ?? <WebAppErrorPage error={error} />\n }}\n >\n {children}\n </ErrorBoundary>\n )\n : children}\n </FlexGrowCol>\n </FlexGrowRow>\n <FlexCol id=\"footer-flex\" alignItems=\"stretch\">\n <Paper elevation={footerElevation} square>\n {footer}\n </Paper>\n </FlexCol>\n </FlexCol>\n )\n}\n\nWebAppChrome.displayName = 'WebAppChrome'\n","import { ButtonEx } from '@xylabs/react-button'\nimport React from 'react'\n\nimport type { WebAppPageProps } from './Page.tsx'\nimport { WebAppPage } from './Page.tsx'\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 type { ContainerProps } from '@mui/material'\nimport { Container, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport type { WebAppBodyProps } from './Body.tsx'\nimport { WebAppBody } from './Body.tsx'\nimport { fixedWrap, scrollableWrap } from './lib/index.ts'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n name: 'WebAppPage',\n shouldForwardProp: propName => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n slot: 'Root',\n})<WebAppPageProps>(({\n theme, mobileScrollingBreakpoint = 'sm', variant,\n}) => {\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<PropsWithChildren<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 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 ? (\n <Container\n disableGutters={disableGutters}\n style={{\n alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start',\n }}\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 : (\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 '@xylabs/react-shared'\nimport React from 'react'\n\nimport type { WebAppPageProps } from '../Page.tsx'\nimport { WebAppPage } from '../Page.tsx'\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":";AACA,SAAS,cAAc;AAEvB,SAAS,aAAa,eAAe;;;ACD9B,IAAM,iBAAgC;AAAA,EAC3C,OAAO;AAAA,EACP,UAAU;AACZ;AAEO,IAAM,YAA2B;AAAA,EACtC,OAAO;AAAA,EACP,UAAU;AACZ;AAGO,IAAM,oBAAmC,EAAE,GAAG,UAAU;AAExD,IAAM,eAA8B,EAAE,GAAG,eAAe;;;ADuE3D,SAGQ,KAHR;AA7EJ,IAAM,iBAAiB;AACvB,IAAM,oBAAoB,oBAAI,IAAI,CAAC,6BAA6B,WAAW,WAAW,yBAAyB,CAAC;AAChH,IAAM,uBAAuB,EAAE,mBAAmB,CAAC,SAAiB,CAAC,kBAAkB,IAAI,IAAI,EAAE;AAEjG,IAAM,iBAAiB,OAAO,aAAa;AAAA,EACzC,GAAG;AAAA,EACH,MAAM;AAAA,EACN,MAAM;AACR,CAAC,EAAmB,CAAC;AAAA,EACnB;AAAA,EAAS;AAAA,EAAO,4BAA4B;AAAA,EAAM;AACpD,MAAM;AACJ,QAAM,aAAa,YAAY;AAC/B,SAAO,MAAM,YAAY;AAAA,IACvB,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,WAAW,aAAa,WAAW;AAAA,IACnC,UAAU;AAAA,IACV,CAAC,MAAM,YAAY,KAAK,yBAAyB,CAAC,GAAG,EAAE,WAAW,SAAS;AAAA,EAC7E,CAAC;AACH,CAAC;AAED,IAAM,uBAAuB,OAAO,SAAS;AAAA,EAC3C,GAAG;AAAA,EACH,MAAM;AAAA,EACN,MAAM;AACR,CAAC,EAAmB,CAAC;AAAA,EACnB;AAAA,EAAO;AAAA,EAAyB;AAClC,MACE,MAAM,YAAY;AAAA,EAChB,gBAAgB;AAAA,EAChB,SAAS,0BAA0B,IAAI;AACzC,CAAC,CAAC;AAEJ,IAAM,8BAA8B,OAAO,aAAa;AAAA,EACtD,MAAM;AAAA,EACN,MAAM;AACR,CAAC,EAAmB,OAAO,EAAE,YAAY,UAAU,EAAE;AAErD,IAAM,uBAAuB,OAAO,aAAa;AAAA,EAC/C,GAAG;AAAA,EACH,MAAM;AAAA,EACN,MAAM;AACR,CAAC,EAAmB,CAAC;AAAA,EACnB;AAAA,EAAO,4BAA4B;AAAA,EAAM;AAC3C,MAAM;AACJ,QAAM,QAAQ,YAAY,eAAe,oBAAoB;AAC7D,SAAO;AAAA,IACL,GAAG;AAAA,IACH,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,CAAC,MAAM,YAAY,KAAK,yBAAyB,CAAC,GAAG;AAAA,MACnD,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,EACF;AACF,CAAC;AAUM,IAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,qBAAC,kBAAe,2BAAsD,SAAkB,SAAmB,GAAG,OAC3G;AAAA,kBAEK,oBAAC,wBAAqB,yBAAkD,SACrE,uBACH,IAEF;AAAA,IACJ,oBAAC,+BACC,8BAAC,wBAAqB,2BAAsD,SACzE,UACH,GACF;AAAA,KACF;AAEJ;;;AErGA,SAAS,SAAS,aAAa;AAE/B,SAAS,mBAAmB,qBAAqB;AACjD,SAAS,qBAAqB;AAE9B;AAAA,EACE;AAAA,EAAS,eAAAA;AAAA,EAAa;AAAA,OACjB;AAGP,SAAS,UAAAC,eAAc;;;ACVvB,SAAS,gBAAgB;;;ACCzB,SAAS,WAAW,UAAAC,eAAc;AAClC,SAAS,sBAAsB;AAE/B,SAAS,eAAAC,oBAAmB;AAC5B,SAAS,qBAAqB;AAG9B,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAqDxB,SACE,OAAAC,MADF,QAAAC,aAAA;AA/CJ,IAAM,iBAAiBC,QAAOC,cAAa;AAAA,EACzC,MAAM;AAAA,EACN,mBAAmB,cAAY,aAAa,+BAA+B,aAAa;AAAA,EACxF,MAAM;AACR,CAAC,EAAmB,CAAC;AAAA,EACnB;AAAA,EAAO,4BAA4B;AAAA,EAAM;AAC3C,MAAM;AACJ,QAAM,QAAQ,YAAY,eAAe,iBAAiB;AAC1D,SAAO;AAAA,IACL,GAAG;AAAA,IACH,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,CAAC,MAAM,YAAY,KAAK,yBAAyB,CAAC,GAAG;AAAA,MACnD,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,EACF;AACF,CAAC;AAOM,IAAM,aAA2D,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,MAAM;AACJ,QAAM,aAAa,cAAc;AACjC,QAAM,EAAE,SAAS,IAAI,YAAY;AAEjC;AAAA,IACE,YAAY;AACV,YAAM,YAAY,YAAY,EAAE,MAAM,SAAS,gBAAgB,MAAM,SAAS,SAAS,CAAC;AAAA,IAC1F;AAAA,IACA,CAAC,UAAU,OAAO,UAAU;AAAA,EAC9B;AAEA,SACE,gBAAAF,MAAC,kBAAe,2BAAsD,SAAmB,GAAG,OAC1F;AAAA,oBAAAD,KAAC,UAAO,OAAc;AAAA,IACrB,aAAa,cAAc,SAEtB,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,UACL,YAAY;AAAA,UAAW,SAAS;AAAA,UAAQ,eAAe;AAAA,UAAU,UAAU;AAAA,UAAG,gBAAgB;AAAA,QAChG;AAAA,QACA,UAAU;AAAA,QAEV,0BAAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YAEH;AAAA;AAAA,QACH;AAAA;AAAA,IACF,IAGA,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,iBAAiB,IAAI;AAAA,QAC/B;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,KAER;AAEJ;AAGO,IAAM,WAAW;;;AD1FtB,SACE,OAAAI,MADF,QAAAC,aAAA;AADK,IAAM,kBAAkD,CAAC,EAAE,OAAO,GAAG,MAAM,MAChF,gBAAAA,MAAC,cAAW,OAAM,8BAA8B,GAAG,OACjD;AAAA,kBAAAD,KAAC,QAAG,yCAA2B;AAAA,EAC/B,gBAAAA,KAAC,OAAG,aAAG,KAAK,IAAG;AAAA,EACf,gBAAAA,KAAC,YAAS,MAAK,KAAI,SAAQ,aAAY,sBAEvC;AAAA,GACF;AAIK,IAAM,YAAY;;;ADUjB,SAOM,UAPN,OAAAE,MAOM,QAAAC,aAPN;AAND,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EAAK;AAAA,EAAS;AAAA,EAAQ;AAAA,EAAU;AAAA,EAAe;AAAA,EAAW;AAAA,EAAQ,kBAAkB;AAAA,EAAG;AAAA,EAAW,iBAAiB;AAAA,EAAQ,GAAG;AAChI,MAAyB;AACvB,SACE,gBAAAA,MAAC,WAAQ,IAAG,mBAAkB,YAAW,WAAU,UAAS,UAAS,QAAO,SAAQ,KAAW,GAAG,OAChG;AAAA,oBAAAD,KAACE,SAAA,EAAO,cAAc,SAAS,eAAe,QAAQ,OAAO,IAC3D,0BAAAF,KAAC,UAAK,SAAQ,WAAU,UAAS,WAAU,GAC7C;AAAA,IACC,UAAU,gBAAAA,KAAC,qBAAkB,eAAe,gBAAAA,KAAC,iBAAc,WAAW,mBAAmB,SAAS,YAAY,QAAW,GAAI;AAAA,IAC9H,gBAAAC,MAAC,eAAY,IAAG,oBAAmB,UAAS,UAAS,YAAW,WAC7D;AAAA,yBAAmB,SAChB,OAEE,gBAAAA,MAAA,YACG;AAAA;AAAA,QACD,gBAAAD,KAAC,WAAQ,aAAY,YAAW;AAAA,SAClC;AAAA,MAEN,gBAAAA,KAACG,cAAA,EAAY,IAAG,aAAY,gBAAe,cAAa,YAAW,WAChE,0BAEK,gBAAAH;AAAA,QAAC;AAAA;AAAA,UACC,mBAAmB,CAAC,UAAU;AAC5B,mBAAO,aAAa,gBAAAA,KAAC,mBAAgB,OAAc;AAAA,UACrD;AAAA,UAEC;AAAA;AAAA,MACH,IAEF,UACN;AAAA,OACF;AAAA,IACA,gBAAAA,KAAC,WAAQ,IAAG,eAAc,YAAW,WACnC,0BAAAA,KAAC,SAAM,WAAW,iBAAiB,QAAM,MACtC,kBACH,GACF;AAAA,KACF;AAEJ;AAEA,aAAa,cAAc;;;AGlE3B,SAAS,gBAAgB;AAQrB,gBAAAI,YAAA;AAFG,IAAM,qBAAgD,CAAC,EAAE,OAAO,GAAG,MAAM,MAC9E,gBAAAA,KAAC,cAAW,OAAO,SAAS,yBAA0B,GAAG,OACvD,0BAAAA,KAAC,YAAS,GACZ;AAIK,IAAM,eAAe;","names":["FlexGrowCol","Helmet","styled","FlexGrowCol","jsx","jsxs","styled","FlexGrowCol","jsx","jsxs","jsx","jsxs","Helmet","FlexGrowCol","jsx"]}
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 type { Breakpoint } from '@mui/material'\nimport { styled } from '@mui/material'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport type { ReactNode } from 'react'\nimport React from 'react'\n\nimport { fixedContent, scrollableContent } from './lib/index.ts'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = new Set(['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter'])\nconst defaultStyledOptions = { shouldForwardProp: (prop: string) => !propsNotForwarded.has(prop) }\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Root',\n})<WebAppBodyProps>(({\n spacing, theme, mobileScrollingBreakpoint = 'sm', variant,\n}) => {\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)]: { overflowY: 'scroll' },\n })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Breadcrumb',\n})<WebAppBodyProps>(({\n theme, disableBreadcrumbGutter, spacing,\n}) =>\n theme.unstable_sx({\n justifyContent: 'start',\n marginX: disableBreadcrumbGutter ? 0 : spacing,\n }))\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n name: WebAppBodyName,\n slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({ alignItems: 'stretch' }))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Scrollable',\n})<WebAppBodyProps>(({\n theme, mobileScrollingBreakpoint = 'sm', variant,\n}) => {\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 ? (\n <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\n )\n : null}\n <WebAppBodyScrollableWrapper>\n <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n {children}\n </WebAppBodyScrollable>\n </WebAppBodyScrollableWrapper>\n </WebAppBodyRoot>\n )\n}\n","import type { 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 = { ...fixedWrap } as const\n\nexport const fixedContent: CSSProperties = { ...scrollableWrap } as const\n","import { Divider, Paper } from '@mui/material'\nimport type { WebAppNavigationType } from '@xylabs/react-app-settings'\nimport { ApplicationAppBar, SystemToolbar } from '@xylabs/react-appbar'\nimport { ErrorBoundary } from '@xylabs/react-error'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport {\n FlexCol, FlexGrowCol, FlexGrowRow,\n} from '@xylabs/react-flexbox'\nimport type { ReactNode } from 'react'\nimport React from 'react'\nimport { Helmet } from 'react-helmet'\n\nimport { WebAppErrorPage } from './ErrorPage.tsx'\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 = ({\n ref, appName, appbar, children, errorBoundary, errorPage, footer, footerElevation = 4, menuItems, navigationType = 'menu', ...props\n}: WebAppChromeProps) => {\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 ? null\n : (\n <>\n {menuItems}\n <Divider orientation=\"vertical\" />\n </>\n )}\n <FlexGrowCol id=\"main-flex\" justifyContent=\"flex-start\" alignItems=\"stretch\">\n {errorBoundary\n ? (\n <ErrorBoundary\n fallbackWithError={(error) => {\n return errorPage ?? <WebAppErrorPage error={error} />\n }}\n >\n {children}\n </ErrorBoundary>\n )\n : children}\n </FlexGrowCol>\n </FlexGrowRow>\n <FlexCol id=\"footer-flex\" alignItems=\"stretch\">\n <Paper elevation={footerElevation} square>\n {footer}\n </Paper>\n </FlexCol>\n </FlexCol>\n )\n}\n\nWebAppChrome.displayName = 'WebAppChrome'\n","import { ButtonEx } from '@xylabs/react-button'\nimport React from 'react'\n\nimport type { WebAppPageProps } from './Page.tsx'\nimport { WebAppPage } from './Page.tsx'\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 type { ContainerProps } from '@mui/material'\nimport { Container, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport type { WebAppBodyProps } from './Body.tsx'\nimport { WebAppBody } from './Body.tsx'\nimport { fixedWrap, scrollableWrap } from './lib/index.ts'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n name: 'WebAppPage',\n shouldForwardProp: propName => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n slot: 'Root',\n})<WebAppPageProps>(({\n theme, mobileScrollingBreakpoint = 'sm', variant,\n}) => {\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<PropsWithChildren<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 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 ? (\n <Container\n disableGutters={disableGutters}\n style={{\n alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start',\n }}\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 : (\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 '@xylabs/react-shared'\nimport React from 'react'\n\nimport type { WebAppPageProps } from '../Page.tsx'\nimport { WebAppPage } from '../Page.tsx'\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":";;;;AACA,SAASA,cAAc;AAEvB,SAASC,aAAaC,eAAe;AAErC,OAAOC,WAAW;;;ACHX,IAAMC,iBAAgC;EAC3CC,OAAO;EACPC,UAAU;AACZ;AAEO,IAAMC,YAA2B;EACtCF,OAAO;EACPC,UAAU;AACZ;AAGO,IAAME,oBAAmC;EAAE,GAAGD;AAAU;AAExD,IAAME,eAA8B;EAAE,GAAGL;AAAe;;;ADN/D,IAAMM,iBAAiB;AACvB,IAAMC,oBAAoB,oBAAIC,IAAI;EAAC;EAA6B;EAAW;EAAW;CAA0B;AAChH,IAAMC,uBAAuB;EAAEC,mBAAmB,wBAACC,SAAiB,CAACJ,kBAAkBK,IAAID,IAAAA,GAAzC;AAA+C;AAEjG,IAAME,iBAAiBC,OAAOC,aAAa;EACzC,GAAGN;EACHO,MAAMV;EACNW,MAAM;AACR,CAAA,EAAoB,CAAC,EACnBC,SAASC,OAAOC,4BAA4B,MAAMC,QAAO,MAC1D;AACC,QAAMC,aAAaD,YAAY;AAC/B,SAAOF,MAAMI,YAAY;IACvBC,YAAY;IACZC,KAAK;IACLC,gBAAgB;IAChBC,WAAW;IACXC,WAAWN,aAAa,WAAW;IACnCO,UAAUX;IACV,CAACC,MAAMW,YAAYC,KAAKX,yBAAAA,CAAAA,GAA6B;MAAEQ,WAAW;IAAS;EAC7E,CAAA;AACF,CAAA;AAEA,IAAMI,uBAAuBlB,OAAOmB,SAAS;EAC3C,GAAGxB;EACHO,MAAMV;EACNW,MAAM;AACR,CAAA,EAAoB,CAAC,EACnBE,OAAOe,yBAAyBhB,QAAO,MAEvCC,MAAMI,YAAY;EAChBG,gBAAgB;EAChBS,SAASD,0BAA0B,IAAIhB;AACzC,CAAA,CAAA;AAEF,IAAMkB,8BAA8BtB,OAAOC,aAAa;EACtDC,MAAMV;EACNW,MAAM;AACR,CAAA,EAAoB,OAAO;EAAEO,YAAY;AAAU,EAAA;AAEnD,IAAMa,uBAAuBvB,OAAOC,aAAa;EAC/C,GAAGN;EACHO,MAAMV;EACNW,MAAM;AACR,CAAA,EAAoB,CAAC,EACnBE,OAAOC,4BAA4B,MAAMC,QAAO,MACjD;AACC,QAAMiB,QAAQjB,YAAY,eAAekB,oBAAoBC;AAC7D,SAAO;IACL,GAAGF;IACHd,YAAY;IACZE,gBAAgB;IAChB,CAACP,MAAMW,YAAYC,KAAKX,yBAAAA,CAAAA,GAA6B;MACnDqB,OAAO;MACPC,UAAU;IACZ;EACF;AACF,CAAA;AAUO,IAAMC,aAAwC,wBAAC,EACpDC,UACAC,aACAX,yBACAd,2BACAF,UAAU,GACVG,SACA,GAAGiB,MAAAA,MACJ;AACC,SACE,sBAAA,cAACzB,gBAAAA;IAAeO;IAAsDF;IAAkBG;IAAmB,GAAGiB;KAC3GO,cAEK,sBAAA,cAACb,sBAAAA;IAAqBE;IAAkDhB;KACrE2B,WAAAA,IAGL,MACJ,sBAAA,cAACT,6BAAAA,MACC,sBAAA,cAACC,sBAAAA;IAAqBjB;IAAsDC;KACzEuB,QAAAA,CAAAA,CAAAA;AAKX,GAzBqD;;;AE5ErD,SAASE,SAASC,aAAa;AAE/B,SAASC,mBAAmBC,qBAAqB;AACjD,SAASC,qBAAqB;AAE9B,SACEC,SAASC,eAAAA,cAAaC,mBACjB;AAEP,OAAOC,YAAW;AAClB,SAASC,UAAAA,eAAc;;;ACVvB,SAASC,gBAAgB;AACzB,OAAOC,YAAW;;;ACAlB,SAASC,WAAWC,UAAAA,eAAc;AAClC,SAASC,sBAAsB;AAE/B,SAASC,eAAAA,oBAAmB;AAC5B,SAASC,qBAAqB;AAE9B,OAAOC,YAAW;AAClB,SAASC,cAAc;AACvB,SAASC,mBAAmB;AAM5B,IAAMC,iBAAiBC,QAAOC,cAAa;EACzCC,MAAM;EACNC,mBAAmBC,wBAAAA,aAAYA,aAAa,+BAA+BA,aAAa,WAArEA;EACnBC,MAAM;AACR,CAAA,EAAoB,CAAC,EACnBC,OAAOC,4BAA4B,MAAMC,QAAO,MACjD;AACC,QAAMC,QAAQD,YAAY,eAAeE,iBAAiBC;AAC1D,SAAO;IACL,GAAGF;IACHG,YAAY;IACZC,gBAAgB;IAChBC,UAAU;IACV,CAACR,MAAMS,YAAYC,KAAKT,yBAAAA,CAAAA,GAA6B;MACnDU,OAAO;MACPC,UAAU;IACZ;EACF;AACF,CAAA;AAOO,IAAMC,aAA2D,wBAAC,EACvEC,gBACAC,yBACAC,OACAC,WACAC,UACAC,aACAlB,2BACAC,UAAU,cACV,GAAGC,MAAAA,MACJ;AACC,QAAMiB,aAAaC,cAAAA;AACnB,QAAM,EAAEC,SAAQ,IAAKC,YAAAA;AAErBC,iBACE,YAAA;AACE,UAAMJ,YAAYK,YAAY;MAAE7B,MAAMoB,SAAS;MAAgBU,MAAMC,SAASL;IAAS,CAAA;EACzF,GACA;IAACA;IAAUN;IAAOI;GAAW;AAG/B,SACE,gBAAAQ,OAAA,cAACnC,gBAAAA;IAAeQ;IAAsDC;IAAmB,GAAGC;KAC1F,gBAAAyB,OAAA,cAACC,QAAAA;IAAOb;MACPC,aAAaA,cAAc,SAEtB,gBAAAW,OAAA,cAACE,WAAAA;IACChB;IACAiB,OAAO;MACLzB,YAAY;MAAW0B,SAAS;MAAQC,eAAe;MAAUC,UAAU;MAAG3B,gBAAgB;IAChG;IACAC,UAAUS;KAEV,gBAAAW,OAAA,cAACO,YAAAA;IACCpB;IACAI;IACAlB;IACAC;IACC,GAAGC;KAEHe,QAAAA,CAAAA,IAKL,gBAAAU,OAAA,cAACO,YAAAA;IACCpB;IACAI;IACAlB;IACAmC,UAAUtB,iBAAiB,IAAI;IAC/BZ;IACC,GAAGC;KAEHe,QAAAA,CAAAA;AAKf,GA1DwE;AA6DjE,IAAMmB,WAAWxB;;;AD3FjB,IAAMyB,kBAAkD,wBAAC,EAAEC,OAAO,GAAGC,MAAAA,MAC1E,gBAAAC,OAAA,cAACC,YAAAA;EAAWC,OAAM;EAA8B,GAAGH;GACjD,gBAAAC,OAAA,cAACG,MAAAA,MAAG,6BAAA,GACJ,gBAAAH,OAAA,cAACI,KAAAA,MAAG,GAAGN,KAAAA,EAAO,GACd,gBAAAE,OAAA,cAACK,UAAAA;EAASC,MAAK;EAAIC,SAAQ;GAAY,UAAA,CAAA,GAJoB;AAWxD,IAAMC,YAAYX;;;ADIlB,IAAMY,eAAe,wBAAC,EAC3BC,KAAKC,SAASC,QAAQC,UAAUC,eAAeC,WAAWC,QAAQC,kBAAkB,GAAGC,WAAWC,iBAAiB,QAAQ,GAAGC,MAAAA,MAC5G;AAClB,SACE,gBAAAC,OAAA,cAACC,SAAAA;IAAQC,IAAG;IAAkBC,YAAW;IAAUC,UAAS;IAASC,QAAO;IAAQhB;IAAW,GAAGU;KAChG,gBAAAC,OAAA,cAACM,SAAAA;IAAOC,cAAcjB;IAASkB,eAAe,QAAQlB,OAAAA;KACpD,gBAAAU,OAAA,cAACS,QAAAA;IAAKC,SAAQ;IAAUC,UAAS;OAElCpB,UAAU,gBAAAS,OAAA,cAACY,mBAAAA;IAAkBC,eAAe,gBAAAb,OAAA,cAACc,eAAAA;MAAcjB,WAAWC,mBAAmB,SAASD,YAAYkB;;MAC/G,gBAAAf,OAAA,cAACgB,aAAAA;IAAYd,IAAG;IAAmBE,UAAS;IAASD,YAAW;KAC7DL,mBAAmB,SAChB,OAEE,gBAAAE,OAAA,cAAAA,OAAA,UAAA,MACGH,WACD,gBAAAG,OAAA,cAACiB,SAAAA;IAAQC,aAAY;OAG7B,gBAAAlB,OAAA,cAACmB,cAAAA;IAAYjB,IAAG;IAAYkB,gBAAe;IAAajB,YAAW;KAChEV,gBAEK,gBAAAO,OAAA,cAACqB,eAAAA;IACCC,mBAAmB,wBAACC,UAAAA;AAClB,aAAO7B,aAAa,gBAAAM,OAAA,cAACwB,iBAAAA;QAAgBD;;IACvC,GAFmB;KAIlB/B,QAAAA,IAGLA,QAAAA,CAAAA,GAGR,gBAAAQ,OAAA,cAACC,SAAAA;IAAQC,IAAG;IAAcC,YAAW;KACnC,gBAAAH,OAAA,cAACyB,OAAAA;IAAMC,WAAW9B;IAAiB+B,QAAAA;KAChChC,MAAAA,CAAAA,CAAAA;AAKX,GAvC4B;AAyC5BP,aAAawC,cAAc;;;AGlE3B,SAASC,gBAAgB;AACzB,OAAOC,YAAW;AAKX,IAAMC,qBAAgD,wBAAC,EAAEC,OAAO,GAAGC,MAAAA,MACxE,gBAAAC,OAAA,cAACC,YAAAA;EAAWH,OAAOA,SAAS;EAA0B,GAAGC;GACvD,gBAAAC,OAAA,cAACE,UAAAA,IAAAA,CAAAA,GAFwD;AAOtD,IAAMC,eAAeN;","names":["styled","FlexGrowCol","FlexRow","React","scrollableWrap","inset","position","fixedWrap","scrollableContent","fixedContent","WebAppBodyName","propsNotForwarded","Set","defaultStyledOptions","shouldForwardProp","prop","has","WebAppBodyRoot","styled","FlexGrowCol","name","slot","spacing","theme","mobileScrollingBreakpoint","variant","scrollable","unstable_sx","alignItems","gap","justifyContent","overflowX","overflowY","paddingY","breakpoints","down","WebAppBodyBreadcrumb","FlexRow","disableBreadcrumbGutter","marginX","WebAppBodyScrollableWrapper","WebAppBodyScrollable","props","scrollableContent","fixedContent","inset","position","WebAppBody","children","breadcrumbs","Divider","Paper","ApplicationAppBar","SystemToolbar","ErrorBoundary","FlexCol","FlexGrowCol","FlexGrowRow","React","Helmet","ButtonEx","React","Container","styled","useAsyncEffect","FlexGrowCol","useUserEvents","React","Helmet","useLocation","WebAppPageRoot","styled","FlexGrowCol","name","shouldForwardProp","propName","slot","theme","mobileScrollingBreakpoint","variant","props","scrollableWrap","fixedWrap","alignItems","justifyContent","maxWidth","breakpoints","down","inset","position","WebAppPage","disableGutters","disableBreadcrumbGutter","title","container","children","breadcrumbs","userEvents","useUserEvents","pathname","useLocation","useAsyncEffect","viewContent","path","location","React","Helmet","Container","style","display","flexDirection","flexGrow","WebAppBody","paddingX","FlexPage","WebAppErrorPage","error","props","React","WebAppPage","title","h1","p","ButtonEx","href","variant","ErrorPage","WebAppChrome","ref","appName","appbar","children","errorBoundary","errorPage","footer","footerElevation","menuItems","navigationType","props","React","FlexCol","id","alignItems","overflow","height","Helmet","defaultTitle","titleTemplate","meta","content","property","ApplicationAppBar","systemToolbar","SystemToolbar","undefined","FlexGrowRow","Divider","orientation","FlexGrowCol","justifyContent","ErrorBoundary","fallbackWithError","error","WebAppErrorPage","Paper","elevation","square","displayName","NotFound","React","WebAppNotFoundPage","title","props","React","WebAppPage","NotFound","NotFoundPage"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xylabs/react-webapp",
3
- "version": "6.3.13",
3
+ "version": "6.4.0",
4
4
  "description": "Common React library for all XY Labs projects that use React",
5
5
  "keywords": [
6
6
  "utility",
@@ -38,33 +38,33 @@
38
38
  "module": "dist/browser/index.mjs",
39
39
  "types": "dist/browser/index.d.ts",
40
40
  "dependencies": {
41
- "@xylabs/react-app-settings": "^6.3.13",
42
- "@xylabs/react-appbar": "^6.3.13",
43
- "@xylabs/react-async-effect": "^6.3.13",
44
- "@xylabs/react-button": "^6.3.13",
45
- "@xylabs/react-error": "^6.3.13",
46
- "@xylabs/react-flexbox": "^6.3.13",
47
- "@xylabs/react-pixel": "^6.3.13",
48
- "@xylabs/react-shared": "^6.3.13",
41
+ "@xylabs/react-app-settings": "^6.4.0",
42
+ "@xylabs/react-appbar": "^6.4.0",
43
+ "@xylabs/react-async-effect": "^6.4.0",
44
+ "@xylabs/react-button": "^6.4.0",
45
+ "@xylabs/react-error": "^6.4.0",
46
+ "@xylabs/react-flexbox": "^6.4.0",
47
+ "@xylabs/react-pixel": "^6.4.0",
48
+ "@xylabs/react-shared": "^6.4.0",
49
49
  "react-helmet": "^6.1.0"
50
50
  },
51
51
  "devDependencies": {
52
52
  "@mui/icons-material": "^7.2.0",
53
53
  "@mui/material": "^7.2.0",
54
- "@storybook/react-vite": "^9.0.16",
54
+ "@storybook/react-vite": "^9.0.18",
55
55
  "@types/react": "^19.1.8",
56
56
  "@types/react-helmet": "^6.1.11",
57
- "@xylabs/react-button": "^6.3.13",
58
- "@xylabs/react-flexbox": "^6.3.13",
59
- "@xylabs/react-link": "^6.3.13",
60
- "@xylabs/react-pixel": "^6.3.13",
61
- "@xylabs/ts-scripts-yarn3": "^7.0.0-rc.24",
62
- "@xylabs/tsconfig-react": "^7.0.0-rc.24",
63
- "knip": "^5.61.3",
64
- "react": "^19.1.0",
65
- "react-dom": "^19.1.0",
66
- "react-router-dom": "^7.6.3",
67
- "storybook": "^9.0.16",
57
+ "@xylabs/react-button": "^6.4.0",
58
+ "@xylabs/react-flexbox": "^6.4.0",
59
+ "@xylabs/react-link": "^6.4.0",
60
+ "@xylabs/react-pixel": "^6.4.0",
61
+ "@xylabs/ts-scripts-yarn3": "^7.0.1",
62
+ "@xylabs/tsconfig-react": "^7.0.1",
63
+ "knip": "^5.62.0",
64
+ "react": "^19.1.1",
65
+ "react-dom": "^19.1.1",
66
+ "react-router-dom": "^7.7.1",
67
+ "storybook": "^9.0.18",
68
68
  "typescript": "^5.8.3"
69
69
  },
70
70
  "peerDependencies": {