@webiny/app-admin-ui 6.3.0 → 6.4.0-beta.0

package/Dialog/DialogContainer.js

@@ -1,71 +1,59 @@
-import React, { useCallback, useEffect, useState } from "react";
+import react, { useCallback, useEffect, useState } from "react";
 import { useUi } from "@webiny/app/hooks/useUi.js";
 import { Dialog } from "@webiny/admin-ui";
-export const DialogContainer = () => {
-  const ui = useUi();
-  const [isLoading, setIsLoading] = useState(false);
-  const message = ui.dialog?.message;
-  const {
-    dataTestId,
-    title,
-    loading,
-    actions = {
-      cancel: null,
-      accept: {
-        label: "OK"
-      }
-    },
-    style,
-    onClose,
-    showCloseButton
-  } = ui.dialog?.options || {};
-  const hideDialog = useCallback(() => {
-    ui.setState(ui => ({
-      ...ui,
-      dialog: null
-    }));
-    if (typeof onClose === "function") {
-      onClose();
-    }
-  }, [ui]);
-
-  /**
-   * We need this part because message can change while the dialog is opened and in loading state.
-   */
-  useEffect(() => {
-    setIsLoading(false);
-  }, [ui.dialog?.message]);
-  const handleConfirm = async () => {
-    if (!actions.accept.onClick) {
-      /**
-       * Should not happen as users should define "accept.onClick" function, but just in case lets show the information.
-       * Possible to happen in development process.
-       */
-      console.info("There is no actions.accept.onClick callback defined.");
-      hideDialog();
-      return;
-    }
-    setIsLoading(true);
-    await actions.accept.onClick();
-    setIsLoading(false);
-    hideDialog();
-  };
-  return /*#__PURE__*/React.createElement(Dialog, {
-    open: !!message,
-    onClose: hideDialog,
-    "data-testid": dataTestId,
-    style: style,
-    showCloseButton: showCloseButton,
-    title: title,
-    actions: !actions.cancel && !actions.accept ? null : /*#__PURE__*/React.createElement(React.Fragment, null, actions.cancel && /*#__PURE__*/React.createElement(Dialog.CancelAction, {
-      onClick: actions.cancel.onClick,
-      text: actions.cancel.label
-    }), actions.accept && /*#__PURE__*/React.createElement(Dialog.ConfirmAction, {
-      onClick: handleConfirm,
-      text: actions.accept.label,
-      "data-testid": "confirmationdialog-confirm-action"
-    }))
-  }, isLoading ? loading : null, message);
+const DialogContainer = ()=>{
+    const ui = useUi();
+    const [isLoading, setIsLoading] = useState(false);
+    const message = ui.dialog?.message;
+    const { dataTestId, title, loading, actions = {
+        cancel: null,
+        accept: {
+            label: "OK"
+        }
+    }, style, onClose, showCloseButton } = ui.dialog?.options || {};
+    const hideDialog = useCallback(()=>{
+        ui.setState((ui)=>({
+                ...ui,
+                dialog: null
+            }));
+        if ("function" == typeof onClose) onClose();
+    }, [
+        ui
+    ]);
+    useEffect(()=>{
+        setIsLoading(false);
+    }, [
+        ui.dialog?.message
+    ]);
+    const handleConfirm = async ()=>{
+        if (!actions.accept.onClick) {
+            console.info("There is no actions.accept.onClick callback defined.");
+            hideDialog();
+            return;
+        }
+        setIsLoading(true);
+        await actions.accept.onClick();
+        setIsLoading(false);
+        hideDialog();
+    };
+    return /*#__PURE__*/ react.createElement(Dialog, {
+        open: !!message,
+        onClose: hideDialog,
+        "data-testid": dataTestId,
+        style: style,
+        showCloseButton: showCloseButton,
+        title: title,
+        loading: isLoading ? loading : false,
+        actions: actions.cancel || actions.accept ? /*#__PURE__*/ react.createElement(react.Fragment, null, actions.cancel && /*#__PURE__*/ react.createElement(Dialog.CancelAction, {
+            onClick: actions.cancel.onClick,
+            text: actions.cancel.label
+        }), actions.accept && /*#__PURE__*/ react.createElement(Dialog.ConfirmAction, {
+            onClick: handleConfirm,
+            text: actions.accept.label,
+            "data-testid": "confirmationdialog-confirm-action"
+        })) : null
+    }, message);
 };
+export { DialogContainer };
 
 //# sourceMappingURL=DialogContainer.js.map

package/Dialog/DialogContainer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useState","useUi","Dialog","DialogContainer","ui","isLoading","setIsLoading","message","dialog","dataTestId","title","loading","actions","cancel","accept","label","style","onClose","showCloseButton","options","hideDialog","setState","handleConfirm","onClick","console","info","createElement","open","Fragment","CancelAction","text","ConfirmAction"],"sources":["DialogContainer.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useUi } from \"@webiny/app/hooks/useUi.js\";\nimport { Dialog } from \"@webiny/admin-ui\";\n\nexport const DialogContainer = () => {\n    const ui = useUi();\n    const [isLoading, setIsLoading] = useState(false);\n    const message: React.ReactNode = ui.dialog?.message;\n\n    const {\n        dataTestId,\n        title,\n        loading,\n        actions = { cancel: null, accept: { label: \"OK\" } },\n        style,\n        onClose,\n        showCloseButton\n    } = ui.dialog?.options || {};\n\n    const hideDialog = useCallback(() => {\n        ui.setState(ui => ({ ...ui, dialog: null }));\n        if (typeof onClose === \"function\") {\n            onClose();\n        }\n    }, [ui]);\n\n    /**\n     * We need this part because message can change while the dialog is opened and in loading state.\n     */\n    useEffect(() => {\n        setIsLoading(false);\n    }, [ui.dialog?.message]);\n\n    const handleConfirm = async () => {\n        if (!actions.accept.onClick) {\n            /**\n             * Should not happen as users should define \"accept.onClick\" function, but just in case lets show the information.\n             * Possible to happen in development process.\n             */\n            console.info(\"There is no actions.accept.onClick callback defined.\");\n            hideDialog();\n            return;\n        }\n        setIsLoading(true);\n        await actions.accept.onClick();\n        setIsLoading(false);\n        hideDialog();\n    };\n\n    return (\n        <Dialog\n            open={!!message}\n            onClose={hideDialog}\n            data-testid={dataTestId}\n            style={style}\n            showCloseButton={showCloseButton}\n            title={title}\n            actions={\n                !actions.cancel && !actions.accept ? null : (\n                    <>\n                        {actions.cancel && (\n                            <Dialog.CancelAction\n                                onClick={actions.cancel.onClick}\n                                text={actions.cancel.label}\n                            />\n                        )}\n                        {actions.accept && (\n                            <Dialog.ConfirmAction\n                                onClick={handleConfirm}\n                                text={actions.accept.label}\n                                data-testid={\"confirmationdialog-confirm-action\"}\n                            />\n                        )}\n                    </>\n                )\n            }\n        >\n            {isLoading ? loading : null}\n            {message}\n        </Dialog>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC/D,SAASC,KAAK,QAAQ,4BAA4B;AAClD,SAASC,MAAM,QAAQ,kBAAkB;AAEzC,OAAO,MAAMC,eAAe,GAAGA,CAAA,KAAM;EACjC,MAAMC,EAAE,GAAGH,KAAK,CAAC,CAAC;EAClB,MAAM,CAACI,SAAS,EAAEC,YAAY,CAAC,GAAGN,QAAQ,CAAC,KAAK,CAAC;EACjD,MAAMO,OAAwB,GAAGH,EAAE,CAACI,MAAM,EAAED,OAAO;EAEnD,MAAM;IACFE,UAAU;IACVC,KAAK;IACLC,OAAO;IACPC,OAAO,GAAG;MAAEC,MAAM,EAAE,IAAI;MAAEC,MAAM,EAAE;QAAEC,KAAK,EAAE;MAAK;IAAE,CAAC;IACnDC,KAAK;IACLC,OAAO;IACPC;EACJ,CAAC,GAAGd,EAAE,CAACI,MAAM,EAAEW,OAAO,IAAI,CAAC,CAAC;EAE5B,MAAMC,UAAU,GAAGtB,WAAW,CAAC,MAAM;IACjCM,EAAE,CAACiB,QAAQ,CAACjB,EAAE,KAAK;MAAE,GAAGA,EAAE;MAAEI,MAAM,EAAE;IAAK,CAAC,CAAC,CAAC;IAC5C,IAAI,OAAOS,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAAC,CAAC;IACb;EACJ,CAAC,EAAE,CAACb,EAAE,CAAC,CAAC;;EAER;AACJ;AACA;EACIL,SAAS,CAAC,MAAM;IACZO,YAAY,CAAC,KAAK,CAAC;EACvB,CAAC,EAAE,CAACF,EAAE,CAACI,MAAM,EAAED,OAAO,CAAC,CAAC;EAExB,MAAMe,aAAa,GAAG,MAAAA,CAAA,KAAY;IAC9B,IAAI,CAACV,OAAO,CAACE,MAAM,CAACS,OAAO,EAAE;MACzB;AACZ;AACA;AACA;MACYC,OAAO,CAACC,IAAI,CAAC,sDAAsD,CAAC;MACpEL,UAAU,CAAC,CAAC;MACZ;IACJ;IACAd,YAAY,CAAC,IAAI,CAAC;IAClB,MAAMM,OAAO,CAACE,MAAM,CAACS,OAAO,CAAC,CAAC;IAC9BjB,YAAY,CAAC,KAAK,CAAC;IACnBc,UAAU,CAAC,CAAC;EAChB,CAAC;EAED,oBACIvB,KAAA,CAAA6B,aAAA,CAACxB,MAAM;IACHyB,IAAI,EAAE,CAAC,CAACpB,OAAQ;IAChBU,OAAO,EAAEG,UAAW;IACpB,eAAaX,UAAW;IACxBO,KAAK,EAAEA,KAAM;IACbE,eAAe,EAAEA,eAAgB;IACjCR,KAAK,EAAEA,KAAM;IACbE,OAAO,EACH,CAACA,OAAO,CAACC,MAAM,IAAI,CAACD,OAAO,CAACE,MAAM,GAAG,IAAI,gBACrCjB,KAAA,CAAA6B,aAAA,CAAA7B,KAAA,CAAA+B,QAAA,QACKhB,OAAO,CAACC,MAAM,iBACXhB,KAAA,CAAA6B,aAAA,CAACxB,MAAM,CAAC2B,YAAY;MAChBN,OAAO,EAAEX,OAAO,CAACC,MAAM,CAACU,OAAQ;MAChCO,IAAI,EAAElB,OAAO,CAACC,MAAM,CAACE;IAAM,CAC9B,CACJ,EACAH,OAAO,CAACE,MAAM,iBACXjB,KAAA,CAAA6B,aAAA,CAACxB,MAAM,CAAC6B,aAAa;MACjBR,OAAO,EAAED,aAAc;MACvBQ,IAAI,EAAElB,OAAO,CAACE,MAAM,CAACC,KAAM;MAC3B,eAAa;IAAoC,CACpD,CAEP;EAET,GAEAV,SAAS,GAAGM,OAAO,GAAG,IAAI,EAC1BJ,OACG,CAAC;AAEjB,CAAC","ignoreList":[]}
+{"version":3,"file":"Dialog/DialogContainer.js","sources":["../../src/Dialog/DialogContainer.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { useUi } from \"@webiny/app/hooks/useUi.js\";\nimport { Dialog } from \"@webiny/admin-ui\";\n\nexport const DialogContainer = () => {\n    const ui = useUi();\n    const [isLoading, setIsLoading] = useState(false);\n    const message: React.ReactNode = ui.dialog?.message;\n\n    const {\n        dataTestId,\n        title,\n        loading,\n        actions = { cancel: null, accept: { label: \"OK\" } },\n        style,\n        onClose,\n        showCloseButton\n    } = ui.dialog?.options || {};\n\n    const hideDialog = useCallback(() => {\n        ui.setState(ui => ({ ...ui, dialog: null }));\n        if (typeof onClose === \"function\") {\n            onClose();\n        }\n    }, [ui]);\n\n    /**\n     * We need this part because message can change while the dialog is opened and in loading state.\n     */\n    useEffect(() => {\n        setIsLoading(false);\n    }, [ui.dialog?.message]);\n\n    const handleConfirm = async () => {\n        if (!actions.accept.onClick) {\n            /**\n             * Should not happen as users should define \"accept.onClick\" function, but just in case lets show the information.\n             * Possible to happen in development process.\n             */\n            console.info(\"There is no actions.accept.onClick callback defined.\");\n            hideDialog();\n            return;\n        }\n        setIsLoading(true);\n        await actions.accept.onClick();\n        setIsLoading(false);\n        hideDialog();\n    };\n\n    return (\n        <Dialog\n            open={!!message}\n            onClose={hideDialog}\n            data-testid={dataTestId}\n            style={style}\n            showCloseButton={showCloseButton}\n            title={title}\n            loading={isLoading ? loading : false}\n            actions={\n                !actions.cancel && !actions.accept ? null : (\n                    <>\n                        {actions.cancel && (\n                            <Dialog.CancelAction\n                                onClick={actions.cancel.onClick}\n                                text={actions.cancel.label}\n                            />\n                        )}\n                        {actions.accept && (\n                            <Dialog.ConfirmAction\n                                onClick={handleConfirm}\n                                text={actions.accept.label}\n                                data-testid={\"confirmationdialog-confirm-action\"}\n                            />\n                        )}\n                    </>\n                )\n            }\n        >\n            {message}\n        </Dialog>\n    );\n};\n"],"names":["DialogContainer","ui","useUi","isLoading","setIsLoading","useState","message","dataTestId","title","loading","actions","style","onClose","showCloseButton","hideDialog","useCallback","useEffect","handleConfirm","console","Dialog"],"mappings":";;;AAIO,MAAMA,kBAAkB;IAC3B,MAAMC,KAAKC;IACX,MAAM,CAACC,WAAWC,aAAa,GAAGC,SAAS;IAC3C,MAAMC,UAA2BL,GAAG,MAAM,EAAE;IAE5C,MAAM,EACFM,UAAU,EACVC,KAAK,EACLC,OAAO,EACPC,UAAU;QAAE,QAAQ;QAAM,QAAQ;YAAE,OAAO;QAAK;IAAE,CAAC,EACnDC,KAAK,EACLC,OAAO,EACPC,eAAe,EAClB,GAAGZ,GAAG,MAAM,EAAE,WAAW,CAAC;IAE3B,MAAMa,aAAaC,YAAY;QAC3Bd,GAAG,QAAQ,CAACA,CAAAA,KAAO;gBAAE,GAAGA,EAAE;gBAAE,QAAQ;YAAK;QACzC,IAAI,AAAmB,cAAnB,OAAOW,SACPA;IAER,GAAG;QAACX;KAAG;IAKPe,UAAU;QACNZ,aAAa;IACjB,GAAG;QAACH,GAAG,MAAM,EAAE;KAAQ;IAEvB,MAAMgB,gBAAgB;QAClB,IAAI,CAACP,QAAQ,MAAM,CAAC,OAAO,EAAE;YAKzBQ,QAAQ,IAAI,CAAC;YACbJ;YACA;QACJ;QACAV,aAAa;QACb,MAAMM,QAAQ,MAAM,CAAC,OAAO;QAC5BN,aAAa;QACbU;IACJ;IAEA,OAAO,WAAP,GACI,oBAACK,QAAMA;QACH,MAAM,CAAC,CAACb;QACR,SAASQ;QACT,eAAaP;QACb,OAAOI;QACP,iBAAiBE;QACjB,OAAOL;QACP,SAASL,YAAYM,UAAU;QAC/B,SACI,AAACC,QAAQ,MAAM,IAAKA,QAAQ,MAAM,GAAU,WAAP,GACjC,0CACKA,QAAQ,MAAM,IAAI,WAAJ,GACX,oBAACS,OAAO,YAAY;YAChB,SAAST,QAAQ,MAAM,CAAC,OAAO;YAC/B,MAAMA,QAAQ,MAAM,CAAC,KAAK;YAGjCA,QAAQ,MAAM,IAAI,WAAJ,GACX,oBAACS,OAAO,aAAa;YACjB,SAASF;YACT,MAAMP,QAAQ,MAAM,CAAC,KAAK;YAC1B,eAAa;cAZQ;OAmBxCJ;AAGb"}

package/Dialog/DialogProvider.js

@@ -1,11 +1,8 @@
-import React from "react";
+import react from "react";
 import { DialogContainer } from "./DialogContainer.js";
-export const DialogProvider = Component => {
-  return function DialogProviderProps({
-    children
-  }) {
-    return /*#__PURE__*/React.createElement(Component, null, children, /*#__PURE__*/React.createElement(DialogContainer, null));
-  };
-};
+const DialogProvider = (Component)=>function({ children }) {
+        return /*#__PURE__*/ react.createElement(Component, null, children, /*#__PURE__*/ react.createElement(DialogContainer, null));
+    };
+export { DialogProvider };
 
 //# sourceMappingURL=DialogProvider.js.map

package/Dialog/DialogProvider.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","DialogContainer","DialogProvider","Component","DialogProviderProps","children","createElement"],"sources":["DialogProvider.tsx"],"sourcesContent":["import React from \"react\";\nimport { DialogContainer } from \"./DialogContainer.js\";\n\nexport interface DialogProviderProps {\n    children?: React.ReactNode;\n}\n\nexport const DialogProvider = (Component: React.ComponentType<DialogProviderProps>) => {\n    return function DialogProviderProps({ children }: DialogProviderProps) {\n        return (\n            <Component>\n                {children}\n                <DialogContainer />\n            </Component>\n        );\n    };\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AAMxB,OAAO,MAAMC,cAAc,GAAIC,SAAmD,IAAK;EACnF,OAAO,SAASC,mBAAmBA,CAAC;IAAEC;EAA8B,CAAC,EAAE;IACnE,oBACIL,KAAA,CAAAM,aAAA,CAACH,SAAS,QACLE,QAAQ,eACTL,KAAA,CAAAM,aAAA,CAACL,eAAe,MAAE,CACX,CAAC;EAEpB,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"file":"Dialog/DialogProvider.js","sources":["../../src/Dialog/DialogProvider.tsx"],"sourcesContent":["import React from \"react\";\nimport { DialogContainer } from \"./DialogContainer.js\";\n\nexport interface DialogProviderProps {\n    children?: React.ReactNode;\n}\n\nexport const DialogProvider = (Component: React.ComponentType<DialogProviderProps>) => {\n    return function DialogProviderProps({ children }: DialogProviderProps) {\n        return (\n            <Component>\n                {children}\n                <DialogContainer />\n            </Component>\n        );\n    };\n};\n"],"names":["DialogProvider","Component","children","DialogContainer"],"mappings":";;AAOO,MAAMA,iBAAiB,CAACC,YACpB,SAA6B,EAAEC,QAAQ,EAAuB;QACjE,OAAO,WAAP,GACI,oBAACD,WAAAA,MACIC,UAAAA,WAAAA,GACD,oBAACC,iBAAeA;IAG5B"}

package/Dialog.js

@@ -1,13 +1,9 @@
-import React from "react";
+import react from "react";
 import { Provider } from "@webiny/app-admin";
 import { DialogProvider } from "./Dialog/DialogProvider.js";
-
-// This implements the global dialog, which is controlled via the
-// `useDialog` hook (`packages/app-admin/src/hooks/useDialog.ts`).
-export const Dialog = () => {
-  return /*#__PURE__*/React.createElement(Provider, {
-    hoc: DialogProvider
-  });
-};
+const Dialog = ()=>/*#__PURE__*/ react.createElement(Provider, {
+        hoc: DialogProvider
+    });
+export { Dialog };
 
 //# sourceMappingURL=Dialog.js.map

package/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Provider","DialogProvider","Dialog","createElement","hoc"],"sources":["Dialog.tsx"],"sourcesContent":["import React from \"react\";\nimport { Provider } from \"@webiny/app-admin\";\nimport { DialogProvider } from \"./Dialog/DialogProvider.js\";\n\n// This implements the global dialog, which is controlled via the\n// `useDialog` hook (`packages/app-admin/src/hooks/useDialog.ts`).\nexport const Dialog = () => {\n    return <Provider hoc={DialogProvider} />;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,cAAc;;AAEvB;AACA;AACA,OAAO,MAAMC,MAAM,GAAGA,CAAA,KAAM;EACxB,oBAAOH,KAAA,CAAAI,aAAA,CAACH,QAAQ;IAACI,GAAG,EAAEH;EAAe,CAAE,CAAC;AAC5C,CAAC","ignoreList":[]}
+{"version":3,"file":"Dialog.js","sources":["../src/Dialog.tsx"],"sourcesContent":["import React from \"react\";\nimport { Provider } from \"@webiny/app-admin\";\nimport { DialogProvider } from \"./Dialog/DialogProvider.js\";\n\n// This implements the global dialog, which is controlled via the\n// `useDialog` hook (`packages/app-admin/src/hooks/useDialog.ts`).\nexport const Dialog = () => {\n    return <Provider hoc={DialogProvider} />;\n};\n"],"names":["Dialog","Provider","DialogProvider"],"mappings":";;;AAMO,MAAMA,SAAS,IACX,WAAP,GAAO,oBAACC,UAAQA;QAAC,KAAKC"}

package/Layout.js

@@ -1,34 +1,26 @@
-import React from "react";
-import Helmet from "react-helmet";
+import react from "react";
+import react_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();
-    const widthClassNames = {
-      "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"
-    }, children)));
-  };
-});
+const Layout_Layout = LayoutRenderer.createDecorator(()=>function({ 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
+        };
+        return /*#__PURE__*/ react.createElement(react.Fragment, null, title ? /*#__PURE__*/ react.createElement(react_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 ? void 0 : 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"
+        }, children)));
+    });
+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 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"],"names":["Layout","LayoutRenderer","title","startElement","hideNavigation","children","pinned","useSidebar","widthClassNames","Helmet","Navigation","cn","undefined","HeaderBar","TenantSelector","UserMenu"],"mappings":";;;;AAMO,MAAMA,gBAASC,eAAe,eAAe,CAAC,IAC1C,SAAgB,EACnBC,KAAK,EACLC,eAAe,IAAI,EACnBC,iBAAiB,KAAK,EACtBC,QAAQ,EACE;QACV,MAAM,EAAEC,MAAM,EAAE,GAAGC;QAEnB,MAAMC,kBAAkB;YACpB,yDAAyDF;YACzD,0DAA0D,CAACA;QAC/D;QAEA,OAAO,WAAP,GACI,0CACKJ,QAAQ,WAARA,GAAQ,oBAACO,cAAMA;YAAC,OAAOP;aAAY,MACnCE,iBAAiB,OAAO,WAAP,GAAO,oBAACM,YAAUA,OAAAA,WAAAA,GACpC,oBAAC;YACG,WAAWC,GACP,+EACAP,iBAAiBQ,SAAYJ;yBAGjC,oBAACK,WAASA;YACN,OAAOV;YACP,mBACI,oBAAC;gBAAI,WAAW;6BACZ,oBAACW,gBAAcA,OAAAA,WAAAA,GACf,oBAACC,UAAQA;0BAIrB,oBAAC;YAAK,WAAW;WAA4CV;IAI7E"}

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"}

package/Navigation/SidebarProvider.js

@@ -1,34 +1,26 @@
-import React, { useMemo } from "react";
-import { SidebarProvider as AdminUiSidebar } from "@webiny/admin-ui";
+import react, { useMemo } from "react";
+import { SidebarProvider as admin_ui_SidebarProvider } from "@webiny/admin-ui";
 import { useLocalStorage, useLocalStorageValue } from "@webiny/app";
 const SIDEBAR_STATE_KEY = "navigation/state";
-export const SidebarProvider = Component => {
-  return function SidebarProvider(props) {
-    const rawState = useLocalStorageValue(SIDEBAR_STATE_KEY);
-    const {
-      set
-    } = useLocalStorage();
-    const state = useMemo(() => {
-      try {
-        if (typeof rawState === "object" && rawState !== null) {
-          return rawState;
-        }
-        if (typeof rawState === "string") {
-          return JSON.parse(rawState);
-        }
-      } catch {
-        // Ignore parse errors
-      }
-      return undefined;
-    }, [rawState]);
-    const onChangeState = newState => {
-      set(SIDEBAR_STATE_KEY, JSON.stringify(newState));
+const SidebarProvider_SidebarProvider = (Component)=>function(props) {
+        const rawState = useLocalStorageValue(SIDEBAR_STATE_KEY);
+        const { set } = useLocalStorage();
+        const state = useMemo(()=>{
+            try {
+                if ("object" == typeof rawState && null !== rawState) return rawState;
+                if ("string" == typeof rawState) return JSON.parse(rawState);
+            } catch  {}
+        }, [
+            rawState
+        ]);
+        const onChangeState = (newState)=>{
+            set(SIDEBAR_STATE_KEY, JSON.stringify(newState));
+        };
+        return /*#__PURE__*/ react.createElement(admin_ui_SidebarProvider, {
+            state: state,
+            onChangeState: onChangeState
+        }, /*#__PURE__*/ react.createElement(Component, props));
     };
-    return /*#__PURE__*/React.createElement(AdminUiSidebar, {
-      state: state,
-      onChangeState: onChangeState
-    }, /*#__PURE__*/React.createElement(Component, props));
-  };
-};
+export { SidebarProvider_SidebarProvider as SidebarProvider };
 
 //# sourceMappingURL=SidebarProvider.js.map