elbe-ui 2.0.1 → 2.0.3

package/dist/ui/app/app.js

@@ -20,52 +20,63 @@ function _initialLocation() {
     return (window.location.pathname + window.location.search + window.location.hash);
 }
 function _App(p) {
+    var _a;
+    const theme = p.themeContext.useTheme();
+    const themeSelected = theme.useWith((_a = p.themeSelector) !== null && _a !== void 0 ? _a : (() => ({})), [
+        p.config,
+        p.themeSelector,
+    ]);
+    useMemo(() => {
+        if (p.config.noGlobalStyles)
+            return;
+        // apply global background of html and body elements
+        const bg = themeSelected.theme.color.currentColor.back.asCss();
+        document.documentElement.style.backgroundColor = bg;
+        document.body.style.backgroundColor = bg;
+    }, [themeSelected, p.config.noGlobalStyles]);
     const menuItems = useMemo(() => {
         return _extractMenuItems(p.children);
     }, [p.children]);
     const [location, navigate] = Wouter.useLocation();
     const [history, setHistory] = useState([_initialLocation()]);
     const [menuOpen, setMenuOpen] = useState(false);
-    /*const themeSelected = p.themeContext
-      .useTheme()
-      .useWith(p.themeSelector ?? (() => ({})), [p.config, p.themeSelector]);*/
-    return (_jsx(AppContext.Provider, { value: {
-            appConfig: p.config,
-            _appThemeContext: p.themeContext,
-            router: {
-                goBack: (steps = 1) => {
-                    if (history.length === 0)
-                        return;
-                    const targetIndex = Math.max(0, history.length - 1 - steps);
-                    const target = history[targetIndex];
-                    setHistory((h) => h.slice(0, targetIndex + 1));
-                    navigate(target, { replace: true });
-                },
-                go: (p, replace) => {
-                    setHistory((h) => {
-                        if (replace === "all")
-                            return [p];
-                        const repl = Math.max(0, replace !== null && replace !== void 0 ? replace : 0);
-                        if (repl === 0)
-                            return [...h, p];
-                        return [...h.slice(0, -repl), p];
-                    });
-                    navigate(p, { replace: (replace !== null && replace !== void 0 ? replace : 0) !== 0 });
-                },
-                history: history,
-                location: location,
-            },
-            menu: menuItems.length === 0
-                ? undefined
-                : {
-                    isOpen: menuOpen,
-                    setOpen: (s) => setMenuOpen(s),
+    return (_jsx(p.themeContext.WithTheme, { theme: themeSelected, children: _jsx(AppContext.Provider, { value: {
+                appConfig: p.config,
+                _appThemeContext: p.themeContext,
+                router: {
+                    goBack: (steps = 1) => {
+                        if (history.length === 0)
+                            return;
+                        const targetIndex = Math.max(0, history.length - 1 - steps);
+                        const target = history[targetIndex];
+                        setHistory((h) => h.slice(0, targetIndex + 1));
+                        navigate(target, { replace: true });
+                    },
+                    go: (p, replace) => {
+                        setHistory((h) => {
+                            if (replace === "all")
+                                return [p];
+                            const repl = Math.max(0, replace !== null && replace !== void 0 ? replace : 0);
+                            if (repl === 0)
+                                return [...h, p];
+                            return [...h.slice(0, -repl), p];
+                        });
+                        navigate(p, { replace: (replace !== null && replace !== void 0 ? replace : 0) !== 0 });
+                    },
+                    history: history,
+                    location: location,
                 },
-        }, children: _jsx(ToastProvider, { children: _jsx(DialogsProvider, { children: _jsxs(Box, { typeLabel: "app_base", scheme: "primary", style: {
-                        display: "flex",
-                        width: "100%",
-                        minHeight: "100vh",
-                    }, children: [menuItems.length > 0 && _jsx(Menu, { items: menuItems }), _jsx("div", { style: { flex: 1, width: "0px" }, children: _jsx(Wouter.Switch, { children: p.children }) })] }) }) }) }));
+                menu: menuItems.length === 0
+                    ? undefined
+                    : {
+                        isOpen: menuOpen,
+                        setOpen: (s) => setMenuOpen(s),
+                    },
+            }, children: _jsx(ToastProvider, { children: _jsx(DialogsProvider, { children: _jsxs(Box, { typeLabel: "app_base", scheme: "primary", style: {
+                            display: "flex",
+                            width: "100%",
+                            minHeight: "100vh",
+                        }, children: [menuItems.length > 0 && _jsx(Menu, { items: menuItems }), _jsx("div", { style: { flex: 1, width: "0px" }, children: _jsx(Wouter.Switch, { children: p.children }) })] }) }) }) }) }));
 }
 function _extractMenuItems(children) {
     if (!children)

package/dist/ui/app/app_ctxt.d.ts

@@ -9,6 +9,8 @@ export type AppConfig = {
     routerConfig?: {
         basePath?: string;
     };
+    /** If true, global styles will not be applied. This can be useful for embedding Elbe in an existing app with its own styles. */
+    noGlobalStyles?: boolean;
 };
 type _MenuState = {
     isOpen: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elbe-ui",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "author": "Robin Naumann",
   "license": "MIT",
   "repository": {