@webiny/app-admin-ui 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

package/Layout.js

@@ -1,34 +1,55 @@
-import React from "react";
-import Helmet from "react-helmet";
-import { LayoutRenderer, Navigation, TenantSelector, UserMenu } from "@webiny/app-admin";
-import { HeaderBar, cn, useSidebar } from "@webiny/admin-ui";
-export const Layout = LayoutRenderer.createDecorator(() => {
-  return function Layout({
-    title,
-    startElement = null,
-    hideNavigation = false,
-    children
-  }) {
-    const {
-      pinned
-    } = useSidebar();
+import react, { useCallback, useMemo, useRef } from "react";
+import react_helmet from "react-helmet";
+import { AssumedPermissionsSelector, BannerBar, LayoutRenderer, Navigation, TenantSelector, UserMenu } from "@webiny/app-admin";
+import { HeaderBar, SidebarProvider, cn, useSidebar } from "@webiny/admin-ui";
+import { useLocalStorage, useLocalStorageValue } from "@webiny/app";
+import { CommandPalette } from "./CommandPalette/CommandPalette.js";
+import { Breadcrumbs } from "./Breadcrumbs/Breadcrumbs.js";
+const SIDEBAR_STATE_KEY = "navigation/state";
+const parseSidebarState = (raw)=>{
+    try {
+        if ("object" == typeof raw && null !== raw) return raw;
+        if ("string" == typeof raw) return JSON.parse(raw);
+    } catch  {}
+};
+const MAKE_ROOM_FOR_BANNER = "has-[>[data-admin-banner]]:[--spacing-main-content:calc(100vh_-_var(--spacing-header)_-_var(--spacing-banner))]";
+const LayoutContent = ({ title, startElement = null, hideNavigation = false, children })=>{
+    const { pinned } = useSidebar();
     const widthClassNames = {
-      "max-w-[calc(100%-(var(--spacing-sidebar-expanded)))] ": pinned,
-      "max-w-[calc(100%-(var(--spacing-sidebar-collapsed)))] ": !pinned
+        "max-w-[calc(100%-(var(--spacing-sidebar-expanded)))] ": pinned,
+        "max-w-[calc(100%-(var(--spacing-sidebar-collapsed)))] ": !pinned
     };
-    return /*#__PURE__*/React.createElement(React.Fragment, null, title ? /*#__PURE__*/React.createElement(Helmet, {
-      title: title
-    }) : null, hideNavigation ? null : /*#__PURE__*/React.createElement(Navigation, null), /*#__PURE__*/React.createElement("div", {
-      className: cn("ml-auto bg-neutral-base transition-[max-width,min-width] ease-linear w-full", hideNavigation ? undefined : widthClassNames)
-    }, /*#__PURE__*/React.createElement(HeaderBar, {
-      start: startElement,
-      end: /*#__PURE__*/React.createElement("div", {
-        className: "flex gap-x-sm items-center justify-end"
-      }, /*#__PURE__*/React.createElement(TenantSelector, null), /*#__PURE__*/React.createElement(UserMenu, null))
-    }), /*#__PURE__*/React.createElement("main", {
-      className: "relative overflow-y-auto h-main-content"
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, title ? /*#__PURE__*/ react.createElement(react_helmet, {
+        title: title
+    }) : null, /*#__PURE__*/ react.createElement(CommandPalette, null), hideNavigation ? null : /*#__PURE__*/ react.createElement(Navigation, null), /*#__PURE__*/ react.createElement("div", {
+        className: cn("ml-auto bg-neutral-base transition-[max-width,min-width] ease-linear w-full", MAKE_ROOM_FOR_BANNER, hideNavigation ? void 0 : widthClassNames)
+    }, /*#__PURE__*/ react.createElement(BannerBar, null), /*#__PURE__*/ react.createElement(HeaderBar, {
+        start: /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center gap-sm"
+        }, /*#__PURE__*/ react.createElement(Breadcrumbs, null), startElement),
+        end: /*#__PURE__*/ react.createElement("div", {
+            className: "flex gap-x-sm items-center justify-end"
+        }, /*#__PURE__*/ react.createElement(TenantSelector, null), /*#__PURE__*/ react.createElement(AssumedPermissionsSelector, null), /*#__PURE__*/ react.createElement(UserMenu, null))
+    }), /*#__PURE__*/ react.createElement("main", {
+        className: "relative overflow-y-auto h-main-content"
     }, children)));
-  };
-});
+};
+const Layout_Layout = LayoutRenderer.createDecorator(()=>function(props) {
+        const localStorage = useLocalStorage();
+        const localStorageRef = useRef(localStorage);
+        localStorageRef.current = localStorage;
+        const rawState = useLocalStorageValue(SIDEBAR_STATE_KEY);
+        const cachedState = useMemo(()=>parseSidebarState(rawState), [
+            rawState
+        ]);
+        const onChangeState = useCallback((newState)=>{
+            localStorageRef.current.set(SIDEBAR_STATE_KEY, JSON.stringify(newState));
+        }, []);
+        return /*#__PURE__*/ react.createElement(SidebarProvider, {
+            state: cachedState,
+            onChangeState: onChangeState
+        }, /*#__PURE__*/ react.createElement(LayoutContent, props));
+    });
+export { Layout_Layout as Layout };
 
 //# sourceMappingURL=Layout.js.map

package/Layout.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Helmet","LayoutRenderer","Navigation","TenantSelector","UserMenu","HeaderBar","cn","useSidebar","Layout","createDecorator","title","startElement","hideNavigation","children","pinned","widthClassNames","createElement","Fragment","className","undefined","start","end"],"sources":["Layout.tsx"],"sourcesContent":["import React from \"react\";\nimport Helmet from \"react-helmet\";\nimport type { LayoutProps } from \"@webiny/app-admin\";\nimport { LayoutRenderer, Navigation, TenantSelector, UserMenu } from \"@webiny/app-admin\";\nimport { HeaderBar, cn, useSidebar } from \"@webiny/admin-ui\";\n\nexport const Layout = LayoutRenderer.createDecorator(() => {\n    return function Layout({\n        title,\n        startElement = null,\n        hideNavigation = false,\n        children\n    }: LayoutProps) {\n        const { pinned } = useSidebar();\n\n        const widthClassNames = {\n            \"max-w-[calc(100%-(var(--spacing-sidebar-expanded)))] \": pinned,\n            \"max-w-[calc(100%-(var(--spacing-sidebar-collapsed)))] \": !pinned\n        };\n\n        return (\n            <>\n                {title ? <Helmet title={title} /> : null}\n                {hideNavigation ? null : <Navigation />}\n                <div\n                    className={cn(\n                        \"ml-auto bg-neutral-base transition-[max-width,min-width] ease-linear w-full\",\n                        hideNavigation ? undefined : widthClassNames\n                    )}\n                >\n                    <HeaderBar\n                        start={startElement}\n                        end={\n                            <div className={\"flex gap-x-sm items-center justify-end\"}>\n                                <TenantSelector />\n                                <UserMenu />\n                            </div>\n                        }\n                    />\n                    <main className={\"relative overflow-y-auto h-main-content\"}>{children}</main>\n                </div>\n            </>\n        );\n    };\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,cAAc;AAEjC,SAASC,cAAc,EAAEC,UAAU,EAAEC,cAAc,EAAEC,QAAQ,QAAQ,mBAAmB;AACxF,SAASC,SAAS,EAAEC,EAAE,EAAEC,UAAU,QAAQ,kBAAkB;AAE5D,OAAO,MAAMC,MAAM,GAAGP,cAAc,CAACQ,eAAe,CAAC,MAAM;EACvD,OAAO,SAASD,MAAMA,CAAC;IACnBE,KAAK;IACLC,YAAY,GAAG,IAAI;IACnBC,cAAc,GAAG,KAAK;IACtBC;EACS,CAAC,EAAE;IACZ,MAAM;MAAEC;IAAO,CAAC,GAAGP,UAAU,CAAC,CAAC;IAE/B,MAAMQ,eAAe,GAAG;MACpB,uDAAuD,EAAED,MAAM;MAC/D,wDAAwD,EAAE,CAACA;IAC/D,CAAC;IAED,oBACIf,KAAA,CAAAiB,aAAA,CAAAjB,KAAA,CAAAkB,QAAA,QACKP,KAAK,gBAAGX,KAAA,CAAAiB,aAAA,CAAChB,MAAM;MAACU,KAAK,EAAEA;IAAM,CAAE,CAAC,GAAG,IAAI,EACvCE,cAAc,GAAG,IAAI,gBAAGb,KAAA,CAAAiB,aAAA,CAACd,UAAU,MAAE,CAAC,eACvCH,KAAA,CAAAiB,aAAA;MACIE,SAAS,EAAEZ,EAAE,CACT,6EAA6E,EAC7EM,cAAc,GAAGO,SAAS,GAAGJ,eACjC;IAAE,gBAEFhB,KAAA,CAAAiB,aAAA,CAACX,SAAS;MACNe,KAAK,EAAET,YAAa;MACpBU,GAAG,eACCtB,KAAA,CAAAiB,aAAA;QAAKE,SAAS,EAAE;MAAyC,gBACrDnB,KAAA,CAAAiB,aAAA,CAACb,cAAc,MAAE,CAAC,eAClBJ,KAAA,CAAAiB,aAAA,CAACZ,QAAQ,MAAE,CACV;IACR,CACJ,CAAC,eACFL,KAAA,CAAAiB,aAAA;MAAME,SAAS,EAAE;IAA0C,GAAEL,QAAe,CAC3E,CACP,CAAC;EAEX,CAAC;AACL,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"Layout.js","sources":["../src/Layout.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef } from \"react\";\nimport Helmet from \"react-helmet\";\nimport type { LayoutProps } from \"@webiny/app-admin\";\nimport { AssumedPermissionsSelector } from \"@webiny/app-admin\";\nimport { BannerBar } from \"@webiny/app-admin\";\nimport { LayoutRenderer } from \"@webiny/app-admin\";\nimport { Navigation } from \"@webiny/app-admin\";\nimport { TenantSelector } from \"@webiny/app-admin\";\nimport { UserMenu } from \"@webiny/app-admin\";\nimport { HeaderBar, SidebarProvider, cn, useSidebar } from \"@webiny/admin-ui\";\nimport { useLocalStorage, useLocalStorageValue } from \"@webiny/app\";\nimport { CommandPalette } from \"./CommandPalette/CommandPalette.js\";\nimport { Breadcrumbs } from \"./Breadcrumbs/Breadcrumbs.js\";\n\nconst SIDEBAR_STATE_KEY = \"navigation/state\";\n\ntype SidebarCachedState = {\n    pinned: boolean;\n    expandedSections: string[];\n    pinnedItems: string[];\n};\n\nconst parseSidebarState = (raw: unknown): SidebarCachedState | undefined => {\n    try {\n        if (typeof raw === \"object\" && raw !== null) {\n            return raw as SidebarCachedState;\n        }\n        if (typeof raw === \"string\") {\n            return JSON.parse(raw) as SidebarCachedState;\n        }\n    } catch {\n        // Ignore parse errors\n    }\n    return undefined;\n};\n\n/*\n * Views size themselves with `h-main-content`, which is the window minus the header. While the\n * banner bar shows, they have to lose its height too, or every page scrolls by exactly that much.\n * The bar is always `--spacing-banner` tall, so plain CSS can do it. Scoped to the wrapper below,\n * which holds both the bar and the views.\n *\n * TODO: Temporary. The real fix is for views to fill `main` instead of computing their own height\n * from the window: make this wrapper a full-height column and `main` `flex-1 min-h-0`, then move\n * the ~13 views that use `h-main-content` to `h-full`. That also lets the bar wrap its text.\n */\nconst MAKE_ROOM_FOR_BANNER =\n    \"has-[>[data-admin-banner]]:[--spacing-main-content:calc(100vh_-_var(--spacing-header)_-_var(--spacing-banner))]\";\n\nconst LayoutContent = ({\n    title,\n    startElement = null,\n    hideNavigation = false,\n    children\n}: LayoutProps) => {\n    const { pinned } = useSidebar();\n\n    const widthClassNames = {\n        \"max-w-[calc(100%-(var(--spacing-sidebar-expanded)))] \": pinned,\n        \"max-w-[calc(100%-(var(--spacing-sidebar-collapsed)))] \": !pinned\n    };\n\n    return (\n        <>\n            {title ? <Helmet title={title} /> : null}\n            <CommandPalette />\n            {hideNavigation ? null : <Navigation />}\n            <div\n                className={cn(\n                    \"ml-auto bg-neutral-base transition-[max-width,min-width] ease-linear w-full\",\n                    MAKE_ROOM_FOR_BANNER,\n                    hideNavigation ? undefined : widthClassNames\n                )}\n            >\n                <BannerBar />\n                <HeaderBar\n                    start={\n                        <div className=\"flex items-center gap-sm\">\n                            <Breadcrumbs />\n                            {startElement}\n                        </div>\n                    }\n                    end={\n                        <div className={\"flex gap-x-sm items-center justify-end\"}>\n                            <TenantSelector />\n                            <AssumedPermissionsSelector />\n                            <UserMenu />\n                        </div>\n                    }\n                />\n                <main className={\"relative overflow-y-auto h-main-content\"}>{children}</main>\n            </div>\n        </>\n    );\n};\n\nexport const Layout = LayoutRenderer.createDecorator(() => {\n    return function Layout(props: LayoutProps) {\n        const localStorage = useLocalStorage();\n        const localStorageRef = useRef(localStorage);\n        localStorageRef.current = localStorage;\n\n        const rawState = useLocalStorageValue(SIDEBAR_STATE_KEY);\n        const cachedState = useMemo(() => parseSidebarState(rawState), [rawState]);\n\n        const onChangeState = useCallback((newState: SidebarCachedState) => {\n            localStorageRef.current.set(SIDEBAR_STATE_KEY, JSON.stringify(newState));\n        }, []);\n\n        return (\n            <SidebarProvider state={cachedState} onChangeState={onChangeState}>\n                <LayoutContent {...props} />\n            </SidebarProvider>\n        );\n    };\n});\n"],"names":["SIDEBAR_STATE_KEY","parseSidebarState","raw","JSON","MAKE_ROOM_FOR_BANNER","LayoutContent","title","startElement","hideNavigation","children","pinned","useSidebar","widthClassNames","Helmet","CommandPalette","Navigation","cn","undefined","BannerBar","HeaderBar","Breadcrumbs","TenantSelector","AssumedPermissionsSelector","UserMenu","Layout","LayoutRenderer","props","localStorage","useLocalStorage","localStorageRef","useRef","rawState","useLocalStorageValue","cachedState","useMemo","onChangeState","useCallback","newState","SidebarProvider"],"mappings":";;;;;;;AAcA,MAAMA,oBAAoB;AAQ1B,MAAMC,oBAAoB,CAACC;IACvB,IAAI;QACA,IAAI,AAAe,YAAf,OAAOA,OAAoBA,AAAQ,SAARA,KAC3B,OAAOA;QAEX,IAAI,AAAe,YAAf,OAAOA,KACP,OAAOC,KAAK,KAAK,CAACD;IAE1B,EAAE,OAAM,CAER;AAEJ;AAYA,MAAME,uBACF;AAEJ,MAAMC,gBAAgB,CAAC,EACnBC,KAAK,EACLC,eAAe,IAAI,EACnBC,iBAAiB,KAAK,EACtBC,QAAQ,EACE;IACV,MAAM,EAAEC,MAAM,EAAE,GAAGC;IAEnB,MAAMC,kBAAkB;QACpB,yDAAyDF;QACzD,0DAA0D,CAACA;IAC/D;IAEA,OAAO,WAAP,GACI,0CACKJ,QAAQ,WAARA,GAAQ,oBAACO,cAAMA;QAAC,OAAOP;SAAY,oBACpC,oBAACQ,gBAAcA,OACdN,iBAAiB,OAAO,WAAP,GAAO,oBAACO,YAAUA,OAAAA,WAAAA,GACpC,oBAAC;QACG,WAAWC,GACP,+EACAZ,sBACAI,iBAAiBS,SAAYL;qBAGjC,oBAACM,WAASA,OAAAA,WAAAA,GACV,oBAACC,WAASA;QACN,qBACI,oBAAC;YAAI,WAAU;yBACX,oBAACC,aAAWA,OACXb;QAGT,mBACI,oBAAC;YAAI,WAAW;yBACZ,oBAACc,gBAAcA,OAAAA,WAAAA,GACf,oBAACC,4BAA0BA,OAAAA,WAAAA,GAC3B,oBAACC,UAAQA;sBAIrB,oBAAC;QAAK,WAAW;OAA4Cd;AAI7E;AAEO,MAAMe,gBAASC,eAAe,eAAe,CAAC,IAC1C,SAAgBC,KAAkB;QACrC,MAAMC,eAAeC;QACrB,MAAMC,kBAAkBC,OAAOH;QAC/BE,gBAAgB,OAAO,GAAGF;QAE1B,MAAMI,WAAWC,qBAAqBhC;QACtC,MAAMiC,cAAcC,QAAQ,IAAMjC,kBAAkB8B,WAAW;YAACA;SAAS;QAEzE,MAAMI,gBAAgBC,YAAY,CAACC;YAC/BR,gBAAgB,OAAO,CAAC,GAAG,CAAC7B,mBAAmBG,KAAK,SAAS,CAACkC;QAClE,GAAG,EAAE;QAEL,OAAO,WAAP,GACI,oBAACC,iBAAeA;YAAC,OAAOL;YAAa,eAAeE;yBAChD,oBAAC9B,eAAkBqB;IAG/B"}

package/Logo.js

@@ -1,20 +1,16 @@
-import React from "react";
-import { LogoRenderer, useAdminConfig } from "@webiny/app-admin";
-import { useIsInNavigation } from "@webiny/app-admin";
+import react from "react";
+import { LogoRenderer, useAdminConfig, useIsInNavigation } from "@webiny/app-admin";
 const minHeight = {
-  minHeight: 48
+    minHeight: 48
 };
-export const Logo = LogoRenderer.createDecorator(() => {
-  return function Logo() {
-    const {
-      logo
-    } = useAdminConfig();
-    const isInNavigation = useIsInNavigation();
-    const logoElement = isInNavigation ? logo.squareLogo : logo.horizontalLogo;
-    return /*#__PURE__*/React.createElement("div", {
-      style: minHeight
-    }, logoElement || null);
-  };
-});
+const Logo_Logo = LogoRenderer.createDecorator(()=>function() {
+        const { logo } = useAdminConfig();
+        const isInNavigation = useIsInNavigation();
+        const logoElement = isInNavigation ? logo.squareLogo : logo.horizontalLogo;
+        return /*#__PURE__*/ react.createElement("div", {
+            style: minHeight
+        }, logoElement || null);
+    });
+export { Logo_Logo as Logo };
 
 //# sourceMappingURL=Logo.js.map

package/Logo.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","LogoRenderer","useAdminConfig","useIsInNavigation","minHeight","Logo","createDecorator","logo","isInNavigation","logoElement","squareLogo","horizontalLogo","createElement","style"],"sources":["Logo.tsx"],"sourcesContent":["import React from \"react\";\nimport { LogoRenderer, useAdminConfig } from \"@webiny/app-admin\";\nimport { useIsInNavigation } from \"@webiny/app-admin\";\n\nconst minHeight = { minHeight: 48 };\n\nexport const Logo = LogoRenderer.createDecorator(() => {\n    return function Logo() {\n        const { logo } = useAdminConfig();\n        const isInNavigation = useIsInNavigation();\n\n        const logoElement = isInNavigation ? logo.squareLogo : logo.horizontalLogo;\n\n        return <div style={minHeight}>{logoElement || null}</div>;\n    };\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,YAAY,EAAEC,cAAc,QAAQ,mBAAmB;AAChE,SAASC,iBAAiB,QAAQ,mBAAmB;AAErD,MAAMC,SAAS,GAAG;EAAEA,SAAS,EAAE;AAAG,CAAC;AAEnC,OAAO,MAAMC,IAAI,GAAGJ,YAAY,CAACK,eAAe,CAAC,MAAM;EACnD,OAAO,SAASD,IAAIA,CAAA,EAAG;IACnB,MAAM;MAAEE;IAAK,CAAC,GAAGL,cAAc,CAAC,CAAC;IACjC,MAAMM,cAAc,GAAGL,iBAAiB,CAAC,CAAC;IAE1C,MAAMM,WAAW,GAAGD,cAAc,GAAGD,IAAI,CAACG,UAAU,GAAGH,IAAI,CAACI,cAAc;IAE1E,oBAAOX,KAAA,CAAAY,aAAA;MAAKC,KAAK,EAAET;IAAU,GAAEK,WAAW,IAAI,IAAU,CAAC;EAC7D,CAAC;AACL,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"Logo.js","sources":["../src/Logo.tsx"],"sourcesContent":["import React from \"react\";\nimport { LogoRenderer, useAdminConfig } from \"@webiny/app-admin\";\nimport { useIsInNavigation } from \"@webiny/app-admin\";\n\nconst minHeight = { minHeight: 48 };\n\nexport const Logo = LogoRenderer.createDecorator(() => {\n    return function Logo() {\n        const { logo } = useAdminConfig();\n        const isInNavigation = useIsInNavigation();\n\n        const logoElement = isInNavigation ? logo.squareLogo : logo.horizontalLogo;\n\n        return <div style={minHeight}>{logoElement || null}</div>;\n    };\n});\n"],"names":["minHeight","Logo","LogoRenderer","logo","useAdminConfig","isInNavigation","useIsInNavigation","logoElement"],"mappings":";;AAIA,MAAMA,YAAY;IAAE,WAAW;AAAG;AAE3B,MAAMC,YAAOC,aAAa,eAAe,CAAC,IACtC;QACH,MAAM,EAAEC,IAAI,EAAE,GAAGC;QACjB,MAAMC,iBAAiBC;QAEvB,MAAMC,cAAcF,iBAAiBF,KAAK,UAAU,GAAGA,KAAK,cAAc;QAE1E,OAAO,WAAP,GAAO,oBAAC;YAAI,OAAOH;WAAYO,eAAe;IAClD"}

package/Navigation/Navigation.js

@@ -1,38 +1,34 @@
-import React from "react";
-import { NavigationRenderer, useAdminConfig } from "@webiny/app-admin";
+import react from "react";
+import { NavigationRenderer, SimpleLink, useAdminConfig } from "@webiny/app-admin";
 import { Sidebar } from "@webiny/admin-ui";
 import { SidebarMenuItems } from "./SidebarMenuItems.js";
-import { SimpleLink } from "@webiny/app-admin";
-export const Navigation = NavigationRenderer.createDecorator(() => {
-  return function Navigation() {
-    const {
-      menus,
-      title,
-      logo
-    } = useAdminConfig();
-    const titleElement = /*#__PURE__*/React.createElement(SimpleLink, {
-      to: "/"
-    }, title);
-    const icon = /*#__PURE__*/React.createElement(SimpleLink, {
-      to: "/"
-    }, /*#__PURE__*/React.createElement(Sidebar.Icon, {
-      element: logo.squareLogo,
-      label: "Webiny"
-    }));
-    const hasFooterMenus = menus.some(m => (m.tags || []).includes("footer"));
-    return /*#__PURE__*/React.createElement(Sidebar, {
-      title: titleElement,
-      icon: icon,
-      footer: hasFooterMenus ? /*#__PURE__*/React.createElement(SidebarMenuItems, {
-        menus: menus,
-        where: {
-          tags: ["footer"]
-        }
-      }) : undefined
-    }, /*#__PURE__*/React.createElement(SidebarMenuItems, {
-      menus: menus
-    }));
-  };
-});
+const Navigation_Navigation = NavigationRenderer.createDecorator(()=>function() {
+        const { menus, title, logo } = useAdminConfig();
+        const titleElement = /*#__PURE__*/ react.createElement(SimpleLink, {
+            to: "/"
+        }, title);
+        const icon = /*#__PURE__*/ react.createElement(SimpleLink, {
+            to: "/"
+        }, /*#__PURE__*/ react.createElement(Sidebar.Icon, {
+            element: logo.squareLogo,
+            label: "Webiny"
+        }));
+        const hasFooterMenus = menus.some((m)=>(m.tags || []).includes("footer"));
+        return /*#__PURE__*/ react.createElement(Sidebar, {
+            title: titleElement,
+            icon: icon,
+            footer: hasFooterMenus ? /*#__PURE__*/ react.createElement(SidebarMenuItems, {
+                menus: menus,
+                where: {
+                    tags: [
+                        "footer"
+                    ]
+                }
+            }) : void 0
+        }, /*#__PURE__*/ react.createElement(SidebarMenuItems, {
+            menus: menus
+        }));
+    });
+export { Navigation_Navigation as Navigation };
 
 //# sourceMappingURL=Navigation.js.map

package/Navigation/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","NavigationRenderer","useAdminConfig","Sidebar","SidebarMenuItems","SimpleLink","Navigation","createDecorator","menus","title","logo","titleElement","createElement","to","icon","Icon","element","squareLogo","label","hasFooterMenus","some","m","tags","includes","footer","where","undefined"],"sources":["Navigation.tsx"],"sourcesContent":["import React from \"react\";\nimport { NavigationRenderer, useAdminConfig } from \"@webiny/app-admin\";\nimport { Sidebar } from \"@webiny/admin-ui\";\nimport { SidebarMenuItems } from \"./SidebarMenuItems.js\";\nimport { SimpleLink } from \"@webiny/app-admin\";\n\nexport const Navigation = NavigationRenderer.createDecorator(() => {\n    return function Navigation() {\n        const { menus, title, logo } = useAdminConfig();\n\n        const titleElement = <SimpleLink to={\"/\"}>{title}</SimpleLink>;\n        const icon = (\n            <SimpleLink to={\"/\"}>\n                <Sidebar.Icon element={logo.squareLogo} label={\"Webiny\"} />\n            </SimpleLink>\n        );\n\n        const hasFooterMenus = menus.some(m => (m.tags || []).includes(\"footer\"));\n\n        return (\n            <Sidebar\n                title={titleElement}\n                icon={icon}\n                footer={\n                    hasFooterMenus ? (\n                        <SidebarMenuItems menus={menus} where={{ tags: [\"footer\"] }} />\n                    ) : undefined\n                }\n            >\n                <SidebarMenuItems menus={menus} />\n            </Sidebar>\n        );\n    };\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,kBAAkB,EAAEC,cAAc,QAAQ,mBAAmB;AACtE,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,gBAAgB;AACzB,SAASC,UAAU,QAAQ,mBAAmB;AAE9C,OAAO,MAAMC,UAAU,GAAGL,kBAAkB,CAACM,eAAe,CAAC,MAAM;EAC/D,OAAO,SAASD,UAAUA,CAAA,EAAG;IACzB,MAAM;MAAEE,KAAK;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAGR,cAAc,CAAC,CAAC;IAE/C,MAAMS,YAAY,gBAAGX,KAAA,CAAAY,aAAA,CAACP,UAAU;MAACQ,EAAE,EAAE;IAAI,GAAEJ,KAAkB,CAAC;IAC9D,MAAMK,IAAI,gBACNd,KAAA,CAAAY,aAAA,CAACP,UAAU;MAACQ,EAAE,EAAE;IAAI,gBAChBb,KAAA,CAAAY,aAAA,CAACT,OAAO,CAACY,IAAI;MAACC,OAAO,EAAEN,IAAI,CAACO,UAAW;MAACC,KAAK,EAAE;IAAS,CAAE,CAClD,CACf;IAED,MAAMC,cAAc,GAAGX,KAAK,CAACY,IAAI,CAACC,CAAC,IAAI,CAACA,CAAC,CAACC,IAAI,IAAI,EAAE,EAAEC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAEzE,oBACIvB,KAAA,CAAAY,aAAA,CAACT,OAAO;MACJM,KAAK,EAAEE,YAAa;MACpBG,IAAI,EAAEA,IAAK;MACXU,MAAM,EACFL,cAAc,gBACVnB,KAAA,CAAAY,aAAA,CAACR,gBAAgB;QAACI,KAAK,EAAEA,KAAM;QAACiB,KAAK,EAAE;UAAEH,IAAI,EAAE,CAAC,QAAQ;QAAE;MAAE,CAAE,CAAC,GAC/DI;IACP,gBAED1B,KAAA,CAAAY,aAAA,CAACR,gBAAgB;MAACI,KAAK,EAAEA;IAAM,CAAE,CAC5B,CAAC;EAElB,CAAC;AACL,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"Navigation/Navigation.js","sources":["../../src/Navigation/Navigation.tsx"],"sourcesContent":["import React from \"react\";\nimport { NavigationRenderer, useAdminConfig } from \"@webiny/app-admin\";\nimport { Sidebar } from \"@webiny/admin-ui\";\nimport { SidebarMenuItems } from \"./SidebarMenuItems.js\";\nimport { SimpleLink } from \"@webiny/app-admin\";\n\nexport const Navigation = NavigationRenderer.createDecorator(() => {\n    return function Navigation() {\n        const { menus, title, logo } = useAdminConfig();\n\n        const titleElement = <SimpleLink to={\"/\"}>{title}</SimpleLink>;\n        const icon = (\n            <SimpleLink to={\"/\"}>\n                <Sidebar.Icon element={logo.squareLogo} label={\"Webiny\"} />\n            </SimpleLink>\n        );\n\n        const hasFooterMenus = menus.some(m => (m.tags || []).includes(\"footer\"));\n\n        return (\n            <Sidebar\n                title={titleElement}\n                icon={icon}\n                footer={\n                    hasFooterMenus ? (\n                        <SidebarMenuItems menus={menus} where={{ tags: [\"footer\"] }} />\n                    ) : undefined\n                }\n            >\n                <SidebarMenuItems menus={menus} />\n            </Sidebar>\n        );\n    };\n});\n"],"names":["Navigation","NavigationRenderer","menus","title","logo","useAdminConfig","titleElement","SimpleLink","icon","Sidebar","hasFooterMenus","m","SidebarMenuItems","undefined"],"mappings":";;;;AAMO,MAAMA,wBAAaC,mBAAmB,eAAe,CAAC,IAClD;QACH,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGC;QAE/B,MAAMC,eAAe,WAAfA,GAAe,oBAACC,YAAUA;YAAC,IAAI;WAAMJ;QAC3C,MAAMK,OAAO,WAAPA,GACF,oBAACD,YAAUA;YAAC,IAAI;yBACZ,oBAACE,QAAQ,IAAI;YAAC,SAASL,KAAK,UAAU;YAAE,OAAO;;QAIvD,MAAMM,iBAAiBR,MAAM,IAAI,CAACS,CAAAA,IAAMA,AAAAA,CAAAA,EAAE,IAAI,IAAI,EAAC,EAAG,QAAQ,CAAC;QAE/D,OAAO,WAAP,GACI,oBAACF,SAAOA;YACJ,OAAOH;YACP,MAAME;YACN,QACIE,iBAAiB,WAAjBA,GACI,oBAACE,kBAAgBA;gBAAC,OAAOV;gBAAO,OAAO;oBAAE,MAAM;wBAAC;qBAAS;gBAAC;iBAC1DW;yBAGR,oBAACD,kBAAgBA;YAAC,OAAOV;;IAGrC"}

package/Navigation/SidebarMenuItems.js

@@ -1,48 +1,36 @@
-import React from "react";
-// This component is called recursively to render root and nested menu items.
-// The menu items are defined via AdminConfig.
-export const SidebarMenuItems = props => {
-  const {
-    menus: allMenus,
-    where = {}
-  } = props;
-  const filteredMenus = allMenus.filter(menu => {
-    const whereParent = where.parent || null;
-    const menuParent = menu.parent;
-    if (whereParent !== menuParent) {
-      return false;
-    }
-    const whereTags = where.tags || [];
-    const menuTags = menu.tags || [];
-    if (whereTags.length > 0) {
-      // If not all tags are present, return false.
-      return whereTags.every(tag => menuTags.includes(tag));
-    }
-    return menuTags.length === 0;
-  });
-  return filteredMenus.map(m => {
-    if (! /*#__PURE__*/React.isValidElement(m.element)) {
-      return null;
-    }
-    const key = [m.parent, m.name].join("-");
-    const hasChildMenus = allMenus.some(menu => menu.parent === m.name);
-    if (hasChildMenus) {
-      return /*#__PURE__*/React.cloneElement(m.element, {
-        key
-      }, /*#__PURE__*/React.createElement(SidebarMenuItems, {
-        menus: allMenus,
-        where: {
-          parent: m.name
-        }
-      }));
-    }
-    if (m.hideIfEmpty) {
-      return null;
-    }
-    return /*#__PURE__*/React.cloneElement(m.element, {
-      key
+import react from "react";
+const SidebarMenuItems = (props)=>{
+    const { menus: allMenus, where = {} } = props;
+    const filteredMenus = allMenus.filter((menu)=>{
+        const whereParent = where.parent || null;
+        const menuParent = menu.parent;
+        if (whereParent !== menuParent) return false;
+        const whereTags = where.tags || [];
+        const menuTags = menu.tags || [];
+        if (whereTags.length > 0) return whereTags.every((tag)=>menuTags.includes(tag));
+        return 0 === menuTags.length;
+    });
+    return filteredMenus.map((m)=>{
+        if (!/*#__PURE__*/ react.isValidElement(m.element)) return null;
+        const key = [
+            m.parent,
+            m.name
+        ].join("-");
+        const hasChildMenus = allMenus.some((menu)=>menu.parent === m.name);
+        if (hasChildMenus) return /*#__PURE__*/ react.cloneElement(m.element, {
+            key
+        }, /*#__PURE__*/ react.createElement(SidebarMenuItems, {
+            menus: allMenus,
+            where: {
+                parent: m.name
+            }
+        }));
+        if (m.hideIfEmpty) return null;
+        return /*#__PURE__*/ react.cloneElement(m.element, {
+            key
+        });
     });
-  });
 };
+export { SidebarMenuItems };
 
 //# sourceMappingURL=SidebarMenuItems.js.map

package/Navigation/SidebarMenuItems.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","SidebarMenuItems","props","menus","allMenus","where","filteredMenus","filter","menu","whereParent","parent","menuParent","whereTags","tags","menuTags","length","every","tag","includes","map","m","isValidElement","element","key","name","join","hasChildMenus","some","cloneElement","createElement","hideIfEmpty"],"sources":["SidebarMenuItems.tsx"],"sourcesContent":["import React from \"react\";\nimport type { MenuConfig } from \"@webiny/app-admin/config/AdminConfig/Menu.js\";\n\nexport interface MenusProps {\n    menus: MenuConfig[];\n    where?: { tags?: string[]; parent?: string };\n}\n\n// This component is called recursively to render root and nested menu items.\n// The menu items are defined via AdminConfig.\nexport const SidebarMenuItems = (props: MenusProps) => {\n    const { menus: allMenus, where = {} } = props;\n    const filteredMenus = allMenus.filter(menu => {\n        const whereParent = where.parent || null;\n        const menuParent = menu.parent;\n        if (whereParent !== menuParent) {\n            return false;\n        }\n\n        const whereTags = where.tags || [];\n        const menuTags = menu.tags || [];\n\n        if (whereTags.length > 0) {\n            // If not all tags are present, return false.\n            return whereTags.every(tag => menuTags.includes(tag));\n        }\n\n        return menuTags.length === 0;\n    });\n\n    return filteredMenus.map(m => {\n        if (!React.isValidElement(m.element)) {\n            return null;\n        }\n\n        const key = [m.parent, m.name].join(\"-\");\n\n        const hasChildMenus = allMenus.some(menu => menu.parent === m.name);\n        if (hasChildMenus) {\n            return React.cloneElement(\n                m.element,\n                { key },\n                <SidebarMenuItems menus={allMenus} where={{ parent: m.name }} />\n            );\n        }\n\n        if (m.hideIfEmpty) {\n            return null;\n        }\n\n        return React.cloneElement(m.element, { key });\n    });\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAQzB;AACA;AACA,OAAO,MAAMC,gBAAgB,GAAIC,KAAiB,IAAK;EACnD,MAAM;IAAEC,KAAK,EAAEC,QAAQ;IAAEC,KAAK,GAAG,CAAC;EAAE,CAAC,GAAGH,KAAK;EAC7C,MAAMI,aAAa,GAAGF,QAAQ,CAACG,MAAM,CAACC,IAAI,IAAI;IAC1C,MAAMC,WAAW,GAAGJ,KAAK,CAACK,MAAM,IAAI,IAAI;IACxC,MAAMC,UAAU,GAAGH,IAAI,CAACE,MAAM;IAC9B,IAAID,WAAW,KAAKE,UAAU,EAAE;MAC5B,OAAO,KAAK;IAChB;IAEA,MAAMC,SAAS,GAAGP,KAAK,CAACQ,IAAI,IAAI,EAAE;IAClC,MAAMC,QAAQ,GAAGN,IAAI,CAACK,IAAI,IAAI,EAAE;IAEhC,IAAID,SAAS,CAACG,MAAM,GAAG,CAAC,EAAE;MACtB;MACA,OAAOH,SAAS,CAACI,KAAK,CAACC,GAAG,IAAIH,QAAQ,CAACI,QAAQ,CAACD,GAAG,CAAC,CAAC;IACzD;IAEA,OAAOH,QAAQ,CAACC,MAAM,KAAK,CAAC;EAChC,CAAC,CAAC;EAEF,OAAOT,aAAa,CAACa,GAAG,CAACC,CAAC,IAAI;IAC1B,IAAI,eAACpB,KAAK,CAACqB,cAAc,CAACD,CAAC,CAACE,OAAO,CAAC,EAAE;MAClC,OAAO,IAAI;IACf;IAEA,MAAMC,GAAG,GAAG,CAACH,CAAC,CAACV,MAAM,EAAEU,CAAC,CAACI,IAAI,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;IAExC,MAAMC,aAAa,GAAGtB,QAAQ,CAACuB,IAAI,CAACnB,IAAI,IAAIA,IAAI,CAACE,MAAM,KAAKU,CAAC,CAACI,IAAI,CAAC;IACnE,IAAIE,aAAa,EAAE;MACf,oBAAO1B,KAAK,CAAC4B,YAAY,CACrBR,CAAC,CAACE,OAAO,EACT;QAAEC;MAAI,CAAC,eACPvB,KAAA,CAAA6B,aAAA,CAAC5B,gBAAgB;QAACE,KAAK,EAAEC,QAAS;QAACC,KAAK,EAAE;UAAEK,MAAM,EAAEU,CAAC,CAACI;QAAK;MAAE,CAAE,CACnE,CAAC;IACL;IAEA,IAAIJ,CAAC,CAACU,WAAW,EAAE;MACf,OAAO,IAAI;IACf;IAEA,oBAAO9B,KAAK,CAAC4B,YAAY,CAACR,CAAC,CAACE,OAAO,EAAE;MAAEC;IAAI,CAAC,CAAC;EACjD,CAAC,CAAC;AACN,CAAC","ignoreList":[]}
+{"version":3,"file":"Navigation/SidebarMenuItems.js","sources":["../../src/Navigation/SidebarMenuItems.tsx"],"sourcesContent":["import React from \"react\";\nimport type { MenuConfig } from \"@webiny/app-admin/config/AdminConfig/Menu.js\";\n\nexport interface MenusProps {\n    menus: MenuConfig[];\n    where?: { tags?: string[]; parent?: string };\n}\n\n// This component is called recursively to render root and nested menu items.\n// The menu items are defined via AdminConfig.\nexport const SidebarMenuItems = (props: MenusProps) => {\n    const { menus: allMenus, where = {} } = props;\n    const filteredMenus = allMenus.filter(menu => {\n        const whereParent = where.parent || null;\n        const menuParent = menu.parent;\n        if (whereParent !== menuParent) {\n            return false;\n        }\n\n        const whereTags = where.tags || [];\n        const menuTags = menu.tags || [];\n\n        if (whereTags.length > 0) {\n            // If not all tags are present, return false.\n            return whereTags.every(tag => menuTags.includes(tag));\n        }\n\n        return menuTags.length === 0;\n    });\n\n    return filteredMenus.map(m => {\n        if (!React.isValidElement(m.element)) {\n            return null;\n        }\n\n        const key = [m.parent, m.name].join(\"-\");\n\n        const hasChildMenus = allMenus.some(menu => menu.parent === m.name);\n        if (hasChildMenus) {\n            return React.cloneElement(\n                m.element,\n                { key },\n                <SidebarMenuItems menus={allMenus} where={{ parent: m.name }} />\n            );\n        }\n\n        if (m.hideIfEmpty) {\n            return null;\n        }\n\n        return React.cloneElement(m.element, { key });\n    });\n};\n"],"names":["SidebarMenuItems","props","allMenus","where","filteredMenus","menu","whereParent","menuParent","whereTags","menuTags","tag","m","React","key","hasChildMenus"],"mappings":";AAUO,MAAMA,mBAAmB,CAACC;IAC7B,MAAM,EAAE,OAAOC,QAAQ,EAAEC,QAAQ,CAAC,CAAC,EAAE,GAAGF;IACxC,MAAMG,gBAAgBF,SAAS,MAAM,CAACG,CAAAA;QAClC,MAAMC,cAAcH,MAAM,MAAM,IAAI;QACpC,MAAMI,aAAaF,KAAK,MAAM;QAC9B,IAAIC,gBAAgBC,YAChB,OAAO;QAGX,MAAMC,YAAYL,MAAM,IAAI,IAAI,EAAE;QAClC,MAAMM,WAAWJ,KAAK,IAAI,IAAI,EAAE;QAEhC,IAAIG,UAAU,MAAM,GAAG,GAEnB,OAAOA,UAAU,KAAK,CAACE,CAAAA,MAAOD,SAAS,QAAQ,CAACC;QAGpD,OAAOD,AAAoB,MAApBA,SAAS,MAAM;IAC1B;IAEA,OAAOL,cAAc,GAAG,CAACO,CAAAA;QACrB,IAAI,CAAC,WAAD,GAACC,MAAAA,cAAoB,CAACD,EAAE,OAAO,GAC/B,OAAO;QAGX,MAAME,MAAM;YAACF,EAAE,MAAM;YAAEA,EAAE,IAAI;SAAC,CAAC,IAAI,CAAC;QAEpC,MAAMG,gBAAgBZ,SAAS,IAAI,CAACG,CAAAA,OAAQA,KAAK,MAAM,KAAKM,EAAE,IAAI;QAClE,IAAIG,eACA,OAAO,WAAP,GAAOF,MAAAA,YAAkB,CACrBD,EAAE,OAAO,EACT;YAAEE;QAAI,iBACN,oBAACb,kBAAgBA;YAAC,OAAOE;YAAU,OAAO;gBAAE,QAAQS,EAAE,IAAI;YAAC;;QAInE,IAAIA,EAAE,WAAW,EACb,OAAO;QAGX,OAAO,WAAP,GAAOC,MAAAA,YAAkB,CAACD,EAAE,OAAO,EAAE;YAAEE;QAAI;IAC/C;AACJ"}