@uxf/cms 13.0.3 → 14.1.0

package/lib/layout/layout.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Layout = void 0;
+const compiler_runtime_1 = require("react/compiler-runtime");
 const rem_1 = require("@uxf/styles/units/rem");
 const loader_1 = require("@uxf/ui/loader/loader");
 const head_1 = __importDefault(require("next/head"));
@@ -13,35 +14,132 @@ const breadcrumbs_1 = require("./breadcrumbs");
 const layout_container_1 = require("./layout-container");
 const sidebar_1 = require("./sidebar");
 const styles_1 = require("./styles");
-const Layout = (props) => {
+const Layout = props => {
     var _a, _b;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(head_1.default, null,
-            react_1.default.createElement("meta", { content: "width=device-width, initial-scale=1", name: "viewport" }),
-            react_1.default.createElement("meta", { charSet: "utf-8" }),
-            react_1.default.createElement("title", null, `${props.title} | ${props.appName}`)),
-        react_1.default.createElement("div", { className: "uxf-cms-layout" },
+    const $ = (0, compiler_runtime_1.c)(33);
+    let t0;
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = react_1.default.createElement("meta", { content: "width=device-width, initial-scale=1", name: "viewport" });
+        t1 = react_1.default.createElement("meta", { charSet: "utf-8" });
+        $[0] = t0;
+        $[1] = t1;
+    }
+    else {
+        t0 = $[0];
+        t1 = $[1];
+    }
+    const t2 = `${props.title} | ${props.appName}`;
+    let t3;
+    if ($[2] !== t2) {
+        t3 = react_1.default.createElement(head_1.default, null,
+            t0,
+            t1,
+            react_1.default.createElement("title", null, t2));
+        $[2] = t2;
+        $[3] = t3;
+    }
+    else {
+        t3 = $[3];
+    }
+    let t4;
+    if ($[4] !== props.Logo || $[5] !== props.menuConfiguration) {
+        t4 = react_1.default.createElement(sidebar_1.Sidebar, { Logo: props.Logo, menuConfiguration: props.menuConfiguration });
+        $[4] = props.Logo;
+        $[5] = props.menuConfiguration;
+        $[6] = t4;
+    }
+    else {
+        t4 = $[6];
+    }
+    const t5 = `uxf-cms-layout__main ${(_a = props.mainClassName) !== null && _a !== void 0 ? _a : ""}`;
+    let t6;
+    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+        t6 = {
+            "--drawer-width": (0, rem_1.rem)(styles_1.drawerWidth)
+        };
+        $[7] = t6;
+    }
+    else {
+        t6 = $[7];
+    }
+    let t7;
+    if ($[8] !== props.Avatar || $[9] !== props.CustomHeader || $[10] !== props.Header || $[11] !== props.MessageBar || $[12] !== props.TitleRightContainer || $[13] !== props.ToolbarRight || $[14] !== props.breadcrumbs || $[15] !== props.children || $[16] !== props.containerType || $[17] !== props.headerContainerType || $[18] !== props.loading || $[19] !== props.stickyHeader || $[20] !== props.subtitle || $[21] !== props.title) {
+        t7 = props.loading ? react_1.default.createElement("div", { className: "uxf-cms-layout__loading" },
+            react_1.default.createElement("div", { className: "uxf-cms-layout__loading-inner" },
+                react_1.default.createElement(loader_1.Loader, null),
+                react_1.default.createElement("p", { className: "uxf-cms-layout__loading-text" }, "Na\u010D\u00EDt\u00E1m\u2026"))) : react_1.default.createElement(react_1.default.Fragment, null,
+            props.CustomHeader ? props.CustomHeader : react_1.default.createElement("div", { className: `${props.Header ? "uxf-cms-layout__header" : ""} ${props.stickyHeader ? "uxf-cms-layout__header--sticky" : ""}` },
+                props.ToolbarRight && react_1.default.createElement("div", { className: "uxf-cms-layout__toolbar" }, props.ToolbarRight),
+                props.MessageBar,
+                react_1.default.createElement(layout_container_1.LayoutContainer, { className: "uxf-cms-layout__container--basic", type: (_b = props.headerContainerType) !== null && _b !== void 0 ? _b : props.containerType },
+                    react_1.default.createElement("div", { className: "uxf-cms-layout__avatar-title-wrapper" },
+                        props.Avatar,
+                        react_1.default.createElement("div", { className: "uxf-cms-layout__breadcrumbs-title-wrapper" },
+                            props.breadcrumbs && react_1.default.createElement(breadcrumbs_1.Breadcrumbs, { items: props.breadcrumbs }),
+                            react_1.default.createElement("div", { className: "uxf-cms-layout__title-wrapper" },
+                                react_1.default.createElement("h1", { className: "uxf-cms-layout__title" }, props.title),
+                                props.TitleRightContainer),
+                            props.subtitle,
+                            props.Header)))),
+            react_1.default.createElement(layout_container_1.LayoutContainer, { type: props.containerType }, props.children));
+        $[8] = props.Avatar;
+        $[9] = props.CustomHeader;
+        $[10] = props.Header;
+        $[11] = props.MessageBar;
+        $[12] = props.TitleRightContainer;
+        $[13] = props.ToolbarRight;
+        $[14] = props.breadcrumbs;
+        $[15] = props.children;
+        $[16] = props.containerType;
+        $[17] = props.headerContainerType;
+        $[18] = props.loading;
+        $[19] = props.stickyHeader;
+        $[20] = props.subtitle;
+        $[21] = props.title;
+        $[22] = t7;
+    }
+    else {
+        t7 = $[22];
+    }
+    let t8;
+    if ($[23] !== props.FooterBar || $[24] !== t5 || $[25] !== t7) {
+        t8 = react_1.default.createElement("main", { className: t5, style: t6 },
+            t7,
+            props.FooterBar);
+        $[23] = props.FooterBar;
+        $[24] = t5;
+        $[25] = t7;
+        $[26] = t8;
+    }
+    else {
+        t8 = $[26];
+    }
+    let t9;
+    if ($[27] !== t4 || $[28] !== t8) {
+        t9 = react_1.default.createElement("div", { className: "uxf-cms-layout" },
             react_1.default.createElement("div", { className: "uxf-cms-layout__wrapper" },
-                react_1.default.createElement(sidebar_1.Sidebar, { Logo: props.Logo, menuConfiguration: props.menuConfiguration }),
-                react_1.default.createElement("main", { className: `uxf-cms-layout__main ${(_a = props.mainClassName) !== null && _a !== void 0 ? _a : ""}`, style: { "--drawer-width": (0, rem_1.rem)(styles_1.drawerWidth) } },
-                    props.loading ? (react_1.default.createElement("div", { className: "uxf-cms-layout__loading" },
-                        react_1.default.createElement("div", { className: "uxf-cms-layout__loading-inner" },
-                            react_1.default.createElement(loader_1.Loader, null),
-                            react_1.default.createElement("p", { className: "uxf-cms-layout__loading-text" }, "Na\u010D\u00EDt\u00E1m\u2026")))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                        props.CustomHeader ? (props.CustomHeader) : (react_1.default.createElement("div", { className: `${props.Header ? "uxf-cms-layout__header" : ""} ${props.stickyHeader ? "uxf-cms-layout__header--sticky" : ""}` },
-                            props.ToolbarRight && (react_1.default.createElement("div", { className: "uxf-cms-layout__toolbar" }, props.ToolbarRight)),
-                            props.MessageBar,
-                            react_1.default.createElement(layout_container_1.LayoutContainer, { className: "uxf-cms-layout__container--basic", type: (_b = props.headerContainerType) !== null && _b !== void 0 ? _b : props.containerType },
-                                react_1.default.createElement("div", { className: "uxf-cms-layout__avatar-title-wrapper" },
-                                    props.Avatar,
-                                    react_1.default.createElement("div", { className: "uxf-cms-layout__breadcrumbs-title-wrapper" },
-                                        props.breadcrumbs && react_1.default.createElement(breadcrumbs_1.Breadcrumbs, { items: props.breadcrumbs }),
-                                        react_1.default.createElement("div", { className: "uxf-cms-layout__title-wrapper" },
-                                            react_1.default.createElement("h1", { className: "uxf-cms-layout__title" }, props.title),
-                                            props.TitleRightContainer),
-                                        props.subtitle,
-                                        props.Header))))),
-                        react_1.default.createElement(layout_container_1.LayoutContainer, { type: props.containerType }, props.children))),
-                    props.FooterBar)))));
+                t4,
+                t8));
+        $[27] = t4;
+        $[28] = t8;
+        $[29] = t9;
+    }
+    else {
+        t9 = $[29];
+    }
+    let t10;
+    if ($[30] !== t3 || $[31] !== t9) {
+        t10 = react_1.default.createElement(react_1.default.Fragment, null,
+            t3,
+            t9);
+        $[30] = t3;
+        $[31] = t9;
+        $[32] = t10;
+    }
+    else {
+        t10 = $[32];
+    }
+    return t10;
 };
 exports.Layout = Layout;

package/lib/layout/sidebar.js

@@ -34,54 +34,85 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sidebar = void 0;
+const compiler_runtime_1 = require("react/compiler-runtime");
+const use_media_query_1 = require("@uxf/core-react/hooks/use-media-query");
 const rem_1 = require("@uxf/styles/units/rem");
 const react_1 = __importStar(require("react"));
 const tw_screens_1 = require("../../ui/tw-tokens/tw-screens");
+const use_visual_viewport_height_1 = require("../../utils/use-visual-viewport-height");
 const menu_1 = require("../menu");
 const mobile_bar_1 = require("../menu/mobile-bar");
 const user_menu_1 = require("../menu/ui/user-menu");
 const styles_1 = require("./styles");
-const uxfLogo = (react_1.default.createElement("svg", { height: "30", viewBox: "0 0 179 40", width: "134" },
+const uxfLogo = react_1.default.createElement("svg", { height: "30", viewBox: "0 0 179 40", width: "134" },
     react_1.default.createElement("path", { clipRule: "evenodd", d: "M33.563 12.874a9.103 9.103 0 0 0 0-12.874L20.69 12.874l.107.105a9.103 9.103 0 0 0 12.766-.105Zm-20.69-6.437a9.103 9.103 0 0 1 .106 12.766l-.105.107L0 6.437a9.103 9.103 0 0 1 12.874 0ZM40 33.563 27.127 20.69l-.106.107a9.103 9.103 0 0 0 12.98 12.766Zm-20.69-6.437-.107-.105A9.103 9.103 0 0 0 6.437 40l12.874-12.874Z", fill: "#FFF", fillRule: "evenodd" }),
-    react_1.default.createElement("path", { clipRule: "evenodd", d: "m84.325 7.295 5.133 8.675h.199l5.158-8.675h6.078l-7.768 12.727 7.942 12.727h-6.19l-5.22-8.687h-.199l-5.22 8.687h-6.165l7.967-12.727-7.818-12.727h6.103Zm-24.194 0v16.07c0 .97.214 1.832.64 2.586a4.58 4.58 0 0 0 1.809 1.777c.779.431 1.686.647 2.722.647 1.044 0 1.953-.216 2.728-.647a4.591 4.591 0 0 0 1.802-1.777c.427-.754.64-1.616.64-2.585V7.296h5.382v16.53c0 1.856-.441 3.48-1.324 4.872-.882 1.392-2.115 2.475-3.697 3.25-1.583.775-3.426 1.162-5.531 1.162-2.113 0-3.96-.387-5.543-1.162-1.583-.775-2.813-1.858-3.692-3.25-.878-1.392-1.317-3.016-1.317-4.872V7.296h5.381ZM170.25 13.41c2.411 0 4.311.51 5.698 1.529 1.388 1.019 2.198 2.407 2.43 4.164l-4.847.298a2.555 2.555 0 0 0-.534-1.125 2.942 2.942 0 0 0-1.075-.808c-.444-.203-.972-.304-1.585-.304-.821 0-1.512.172-2.076.515-.563.344-.845.802-.845 1.374 0 .456.182.84.547 1.156.364.315.99.567 1.877.758l3.455.696c1.856.381 3.24.994 4.151 1.84.912.845 1.367 1.955 1.367 3.33 0 1.252-.366 2.35-1.1 3.294-.733.945-1.736 1.68-3.007 2.206-1.272.526-2.737.79-4.394.79-2.527 0-4.539-.529-6.034-1.585-1.496-1.057-2.372-2.496-2.629-4.32l5.208-.273c.157.77.538 1.357 1.143 1.759.605.402 1.38.603 2.324.603.928 0 1.676-.18 2.244-.54.567-.361.855-.827.864-1.4-.009-.48-.212-.875-.609-1.186-.398-.31-1.011-.55-1.84-.715l-3.306-.659c-1.864-.372-3.25-1.019-4.157-1.938-.908-.92-1.361-2.093-1.361-3.518 0-1.226.333-2.283 1-3.17.667-.886 1.608-1.57 2.821-2.05 1.214-.48 2.637-.72 4.27-.72Zm-36.686.373a12.285 12.285 0 0 0-3.051-.373c-1.525 0-2.865.23-4.021.69-1.156.46-2.098 1.114-2.827 1.964-.73.849-1.219 1.854-1.467 3.014l4.897.397c.182-.63.555-1.153 1.119-1.572.563-.418 1.321-.627 2.274-.627.903 0 1.601.215 2.094.646.493.43.74 1.04.74 1.827v.075c0 .405-.153.712-.46.92-.307.206-.8.362-1.479.465-.68.104-1.574.214-2.685.33-.944.09-1.845.248-2.703.472a7.698 7.698 0 0 0-2.293.994 4.727 4.727 0 0 0-1.591 1.74c-.39.721-.584 1.612-.584 2.673 0 1.259.275 2.31.826 3.15a5.147 5.147 0 0 0 2.256 1.902c.953.427 2.038.64 3.257.64.944 0 1.777-.126 2.498-.38a5.55 5.55 0 0 0 1.852-1.055 5.31 5.31 0 0 0 1.23-1.573h.149v2.648h5.022V19.873c0-1.135-.22-2.11-.659-2.927a5.655 5.655 0 0 0-1.796-2.007 8.039 8.039 0 0 0-2.598-1.156Zm-13.424-2.05V7.294h-16.853v25.454h5.381V22.235h10.354v-4.438h-10.354v-6.065h11.472Zm32.603 1.677c1.326 0 2.482.29 3.468.87.986.58 1.753 1.407 2.3 2.48.546 1.073.82 2.35.82 3.834V32.75h-5.295V21.539c.008-1.169-.29-2.082-.895-2.74-.605-.66-1.437-.989-2.498-.989-.713 0-1.34.153-1.883.46a3.166 3.166 0 0 0-1.268 1.336c-.302.584-.458 1.286-.466 2.107V32.75h-5.295V13.659h5.047v3.368H147a5.358 5.358 0 0 1 2.126-2.641c.994-.65 2.2-.976 3.616-.976Zm-20.061 10.782c.286-.087.512-.184.678-.292v2.026c0 .671-.17 1.272-.51 1.802-.34.53-.808.951-1.404 1.262-.597.31-1.285.466-2.064.466-.812 0-1.481-.189-2.007-.566-.526-.377-.789-.925-.789-1.646 0-.497.128-.914.385-1.25.257-.335.617-.602 1.082-.801a6.547 6.547 0 0 1 1.628-.435l.969-.143a24.15 24.15 0 0 0 1.069-.186c.356-.071.677-.15.963-.237Z", fill: "#FFF", fillRule: "evenodd" })));
-const Sidebar = (props) => {
-    var _a, _b, _c;
-    const [deviceHeight, setDeviceHeight] = (0, react_1.useState)(0);
+    react_1.default.createElement("path", { clipRule: "evenodd", d: "m84.325 7.295 5.133 8.675h.199l5.158-8.675h6.078l-7.768 12.727 7.942 12.727h-6.19l-5.22-8.687h-.199l-5.22 8.687h-6.165l7.967-12.727-7.818-12.727h6.103Zm-24.194 0v16.07c0 .97.214 1.832.64 2.586a4.58 4.58 0 0 0 1.809 1.777c.779.431 1.686.647 2.722.647 1.044 0 1.953-.216 2.728-.647a4.591 4.591 0 0 0 1.802-1.777c.427-.754.64-1.616.64-2.585V7.296h5.382v16.53c0 1.856-.441 3.48-1.324 4.872-.882 1.392-2.115 2.475-3.697 3.25-1.583.775-3.426 1.162-5.531 1.162-2.113 0-3.96-.387-5.543-1.162-1.583-.775-2.813-1.858-3.692-3.25-.878-1.392-1.317-3.016-1.317-4.872V7.296h5.381ZM170.25 13.41c2.411 0 4.311.51 5.698 1.529 1.388 1.019 2.198 2.407 2.43 4.164l-4.847.298a2.555 2.555 0 0 0-.534-1.125 2.942 2.942 0 0 0-1.075-.808c-.444-.203-.972-.304-1.585-.304-.821 0-1.512.172-2.076.515-.563.344-.845.802-.845 1.374 0 .456.182.84.547 1.156.364.315.99.567 1.877.758l3.455.696c1.856.381 3.24.994 4.151 1.84.912.845 1.367 1.955 1.367 3.33 0 1.252-.366 2.35-1.1 3.294-.733.945-1.736 1.68-3.007 2.206-1.272.526-2.737.79-4.394.79-2.527 0-4.539-.529-6.034-1.585-1.496-1.057-2.372-2.496-2.629-4.32l5.208-.273c.157.77.538 1.357 1.143 1.759.605.402 1.38.603 2.324.603.928 0 1.676-.18 2.244-.54.567-.361.855-.827.864-1.4-.009-.48-.212-.875-.609-1.186-.398-.31-1.011-.55-1.84-.715l-3.306-.659c-1.864-.372-3.25-1.019-4.157-1.938-.908-.92-1.361-2.093-1.361-3.518 0-1.226.333-2.283 1-3.17.667-.886 1.608-1.57 2.821-2.05 1.214-.48 2.637-.72 4.27-.72Zm-36.686.373a12.285 12.285 0 0 0-3.051-.373c-1.525 0-2.865.23-4.021.69-1.156.46-2.098 1.114-2.827 1.964-.73.849-1.219 1.854-1.467 3.014l4.897.397c.182-.63.555-1.153 1.119-1.572.563-.418 1.321-.627 2.274-.627.903 0 1.601.215 2.094.646.493.43.74 1.04.74 1.827v.075c0 .405-.153.712-.46.92-.307.206-.8.362-1.479.465-.68.104-1.574.214-2.685.33-.944.09-1.845.248-2.703.472a7.698 7.698 0 0 0-2.293.994 4.727 4.727 0 0 0-1.591 1.74c-.39.721-.584 1.612-.584 2.673 0 1.259.275 2.31.826 3.15a5.147 5.147 0 0 0 2.256 1.902c.953.427 2.038.64 3.257.64.944 0 1.777-.126 2.498-.38a5.55 5.55 0 0 0 1.852-1.055 5.31 5.31 0 0 0 1.23-1.573h.149v2.648h5.022V19.873c0-1.135-.22-2.11-.659-2.927a5.655 5.655 0 0 0-1.796-2.007 8.039 8.039 0 0 0-2.598-1.156Zm-13.424-2.05V7.294h-16.853v25.454h5.381V22.235h10.354v-4.438h-10.354v-6.065h11.472Zm32.603 1.677c1.326 0 2.482.29 3.468.87.986.58 1.753 1.407 2.3 2.48.546 1.073.82 2.35.82 3.834V32.75h-5.295V21.539c.008-1.169-.29-2.082-.895-2.74-.605-.66-1.437-.989-2.498-.989-.713 0-1.34.153-1.883.46a3.166 3.166 0 0 0-1.268 1.336c-.302.584-.458 1.286-.466 2.107V32.75h-5.295V13.659h5.047v3.368H147a5.358 5.358 0 0 1 2.126-2.641c.994-.65 2.2-.976 3.616-.976Zm-20.061 10.782c.286-.087.512-.184.678-.292v2.026c0 .671-.17 1.272-.51 1.802-.34.53-.808.951-1.404 1.262-.597.31-1.285.466-2.064.466-.812 0-1.481-.189-2.007-.566-.526-.377-.789-.925-.789-1.646 0-.497.128-.914.385-1.25.257-.335.617-.602 1.082-.801a6.547 6.547 0 0 1 1.628-.435l.969-.143a24.15 24.15 0 0 0 1.069-.186c.356-.071.677-.15.963-.237Z", fill: "#FFF", fillRule: "evenodd" }));
+const Sidebar = props => {
+    var _a, _b, _d, _e;
+    const $ = (0, compiler_runtime_1.c)(10);
+    const deviceHeight = (_a = (0, use_visual_viewport_height_1.useVisualViewportHeight)()) !== null && _a !== void 0 ? _a : 0;
     const [isMenuOpen, setIsMenuOpen] = (0, react_1.useState)(false);
-    const toggleMenu = () => setIsMenuOpen((prev) => !prev);
-    (0, react_1.useEffect)(() => {
-        const handler = () => { var _a, _b; return setDeviceHeight((_b = (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : window.innerHeight); };
-        handler();
-        window.addEventListener("resize", handler);
-        return () => {
-            window.removeEventListener("resize", handler);
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        const handler = () => {
-            if (!window.matchMedia(`(min-width: ${tw_screens_1.twScreens.md})`).matches && isMenuOpen) {
-                document.body.style.overflow = "hidden";
-            }
-            else {
-                document.body.style.overflow = "";
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = () => setIsMenuOpen(_temp);
+        $[0] = t0;
+    }
+    else {
+        t0 = $[0];
+    }
+    const toggleMenu = t0;
+    const isDesktop = (0, use_media_query_1.useMediaQuery)(`(min-width: ${tw_screens_1.twScreens.md})`);
+    const isPageLocked = isMenuOpen && !isDesktop;
+    let t1;
+    let t2;
+    if ($[1] !== isPageLocked) {
+        t1 = () => {
+            if (!isPageLocked) {
+                return;
             }
+            const previousOverflow = document.body.style.overflow;
+            document.body.style.overflow = "hidden";
+            return () => {
+                document.body.style.overflow = previousOverflow;
+            };
         };
-        handler();
-        window.addEventListener("resize", handler);
-        return () => {
-            document.body.style.overflow = "";
-            window.removeEventListener("resize", handler);
-        };
-    }, [isMenuOpen]);
-    return ((_a = props.CustomSidebar) !== null && _a !== void 0 ? _a : (react_1.default.createElement("div", { className: "uxf-cms-sidebar", style: { "--drawer-width": (0, rem_1.rem)(styles_1.drawerWidth) } },
-        react_1.default.createElement("div", { className: `uxf-cms-sidebar__content ${isMenuOpen ? "uxf-cms-sidebar__content--open" : "uxf-cms-sidebar__content--closed"}`, style: { "--device-height": (0, rem_1.rem)(deviceHeight) } },
-            react_1.default.createElement("div", { className: "uxf-cms-sidebar__logo" }, (_b = props.Logo) !== null && _b !== void 0 ? _b : uxfLogo),
-            props.menuConfiguration && props.menuConfiguration.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("div", { className: `uxf-cms-sidebar__nav ${((_c = props.menuConfiguration.at(0)) === null || _c === void 0 ? void 0 : _c.type) === "super-section"
-                        ? "uxf-cms-sidebar__nav--super-section"
-                        : ""}` },
-                    react_1.default.createElement(menu_1.Menu, { menu: props.menuConfiguration })),
-                react_1.default.createElement(user_menu_1.UserMenu, { menu: props.menuConfiguration })))),
-        props.menuConfiguration && (react_1.default.createElement(mobile_bar_1.MobileBar, { menuConfiguration: props.menuConfiguration, toggleMenu: toggleMenu })))));
+        t2 = [isPageLocked];
+        $[1] = isPageLocked;
+        $[2] = t1;
+        $[3] = t2;
+    }
+    else {
+        t1 = $[2];
+        t2 = $[3];
+    }
+    (0, react_1.useEffect)(t1, t2);
+    let t3;
+    if ($[4] !== deviceHeight || $[5] !== isMenuOpen || $[6] !== props.CustomSidebar || $[7] !== props.Logo || $[8] !== props.menuConfiguration) {
+        t3 = (_b = props.CustomSidebar) !== null && _b !== void 0 ? _b : react_1.default.createElement("div", { className: "uxf-cms-sidebar", style: {
+                "--drawer-width": (0, rem_1.rem)(styles_1.drawerWidth)
+            } },
+            react_1.default.createElement("div", { className: `uxf-cms-sidebar__content ${isMenuOpen ? "uxf-cms-sidebar__content--open" : "uxf-cms-sidebar__content--closed"}`, style: {
+                    "--device-height": (0, rem_1.rem)(deviceHeight)
+                } },
+                react_1.default.createElement("div", { className: "uxf-cms-sidebar__logo" }, (_d = props.Logo) !== null && _d !== void 0 ? _d : uxfLogo),
+                props.menuConfiguration && props.menuConfiguration.length > 0 && react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("div", { className: `uxf-cms-sidebar__nav ${((_e = props.menuConfiguration.at(0)) === null || _e === void 0 ? void 0 : _e.type) === "super-section" ? "uxf-cms-sidebar__nav--super-section" : ""}` },
+                        react_1.default.createElement(menu_1.Menu, { menu: props.menuConfiguration })),
+                    react_1.default.createElement(user_menu_1.UserMenu, { menu: props.menuConfiguration }))),
+            props.menuConfiguration && react_1.default.createElement(mobile_bar_1.MobileBar, { menuConfiguration: props.menuConfiguration, toggleMenu: toggleMenu }));
+        $[4] = deviceHeight;
+        $[5] = isMenuOpen;
+        $[6] = props.CustomSidebar;
+        $[7] = props.Logo;
+        $[8] = props.menuConfiguration;
+        $[9] = t3;
+    }
+    else {
+        t3 = $[9];
+    }
+    return t3;
 };
 exports.Sidebar = Sidebar;
+function _temp(prev) {
+    return !prev;
+}

package/lib/menu/ui/menu-item.js

@@ -50,9 +50,12 @@ const MenuItem = (props) => {
     const firstVisibleChild = visibleChildren.at(0);
     const isInitiallyOpen = (isActive || hasActiveChildren) && props.item.children.length > 0;
     const [isSubmenuOpen, setIsSubmenuOpen] = (0, react_1.useState)(isInitiallyOpen);
-    (0, react_1.useEffect)(() => {
+    // Follow the route during render instead of in an effect, which first rendered one commit with the old value.
+    const [previousIsInitiallyOpen, setPreviousIsInitiallyOpen] = (0, react_1.useState)(isInitiallyOpen);
+    if (isInitiallyOpen !== previousIsInitiallyOpen) {
+        setPreviousIsInitiallyOpen(isInitiallyOpen);
         setIsSubmenuOpen(isInitiallyOpen);
-    }, [isInitiallyOpen]);
+    }
     const toggle = () => setIsSubmenuOpen((prev) => !prev);
     if (!props.item.isVisible(loggedUser) ||
         (props.item.children.length !== 0 && !props.item.hasVisibleChildren(loggedUser))) {

package/lib/menu/ui/sub-menu/sub-menu-mobile.js

@@ -34,29 +34,77 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubMenuMobile = SubMenuMobile;
+const compiler_runtime_1 = require("react/compiler-runtime");
 const use_composed_refs_1 = require("@uxf/core-react/hooks/use-composed-refs");
 const react_1 = __importStar(require("react"));
 const sub_menu_item_1 = require("./sub-menu-item");
 const use_sub_menu_1 = require("./use-sub-menu");
 function SubMenuMobile(props) {
-    const subMenu = (0, use_sub_menu_1.useSubMenu)({ isMobile: true });
-    // Any element can be the trigger; its props are only passed through.
+    const $ = (0, compiler_runtime_1.c)(13);
+    const { ref } = props;
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = {
+            isMobile: true
+        };
+        $[0] = t0;
+    }
+    else {
+        t0 = $[0];
+    }
+    const subMenu = (0, use_sub_menu_1.useSubMenu)(t0);
     const trigger = props.children;
-    const stableRef = (0, use_composed_refs_1.useComposedRefs)(props.ref, subMenu.refs.setReference, trigger.props.ref);
-    // `ref` goes after the spread: since React 19 the trigger's props carry its own ref.
-    const referenceProps = {
-        ...trigger.props,
-        ref: stableRef,
-        "data-state": subMenu.open ? "open" : "closed",
-    };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        (0, react_1.cloneElement)(trigger, subMenu.getReferenceProps(referenceProps)),
-        subMenu.open && (react_1.default.createElement("div", { ...subMenu.getFloatingProps({
+    const stableRef = (0, use_composed_refs_1.useComposedRefs)(ref, subMenu.refs.setReference, trigger.props.ref);
+    const t1 = subMenu.open ? "open" : "closed";
+    let t2;
+    if ($[1] !== stableRef || $[2] !== subMenu || $[3] !== t1 || $[4] !== trigger) {
+        const referenceProps = {
+            ...trigger.props,
+            ref: stableRef,
+            "data-state": t1
+        };
+        t2 = (0, react_1.cloneElement)(trigger, subMenu.getReferenceProps(referenceProps));
+        $[1] = stableRef;
+        $[2] = subMenu;
+        $[3] = t1;
+        $[4] = trigger;
+        $[5] = t2;
+    }
+    else {
+        t2 = $[5];
+    }
+    let t3;
+    if ($[6] !== props.content || $[7] !== props.title || $[8] !== subMenu) {
+        t3 = subMenu.open && react_1.default.createElement("div", { ...subMenu.getFloatingProps({
                 className: "uxf-cms-sidebar__scrollbar uxf-cms-sub-menu__wrapper-mobile",
                 ref: subMenu.refs.setFloating,
-                style: subMenu.floatingStyles,
+                style: subMenu.floatingStyles
             }) },
             react_1.default.createElement("div", { className: "uxf-cms-sub-menu__title" }, props.title),
-            props.content.map((item, index) => (react_1.default.createElement(sub_menu_item_1.SubMenuItem, { item: item, key: index })))))));
+            props.content.map(_temp));
+        $[6] = props.content;
+        $[7] = props.title;
+        $[8] = subMenu;
+        $[9] = t3;
+    }
+    else {
+        t3 = $[9];
+    }
+    let t4;
+    if ($[10] !== t2 || $[11] !== t3) {
+        t4 = react_1.default.createElement(react_1.default.Fragment, null,
+            t2,
+            t3);
+        $[10] = t2;
+        $[11] = t3;
+        $[12] = t4;
+    }
+    else {
+        t4 = $[12];
+    }
+    return t4;
+}
+function _temp(item, index) {
+    return react_1.default.createElement(sub_menu_item_1.SubMenuItem, { item: item, key: index });
 }
 SubMenuMobile.displayName = "SubMenuMobile";

package/lib/menu/ui/sub-menu/sub-menu.js

@@ -34,27 +34,79 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubMenu = SubMenu;
+const compiler_runtime_1 = require("react/compiler-runtime");
 const use_composed_refs_1 = require("@uxf/core-react/hooks/use-composed-refs");
 const react_1 = __importStar(require("react"));
 const sub_menu_item_1 = require("./sub-menu-item");
 const use_sub_menu_1 = require("./use-sub-menu");
 function SubMenu(props) {
-    const subMenu = (0, use_sub_menu_1.useSubMenu)({ isMobile: false });
-    // Any element can be the trigger; its props are only passed through.
+    const $ = (0, compiler_runtime_1.c)(14);
+    const { ref } = props;
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = {
+            isMobile: false
+        };
+        $[0] = t0;
+    }
+    else {
+        t0 = $[0];
+    }
+    const subMenu = (0, use_sub_menu_1.useSubMenu)(t0);
     const trigger = props.children;
-    const stableRef = (0, use_composed_refs_1.useComposedRefs)(props.ref, subMenu.refs.setReference, trigger.props.ref);
-    // `ref` goes after the spread: since React 19 the trigger's props carry its own ref.
-    const referenceProps = {
-        ...trigger.props,
-        ref: stableRef,
-        "data-state": subMenu.open ? "open" : "closed",
-    };
-    return (react_1.default.createElement("div", { className: "uxf-cms-sub-menu" },
-        (0, react_1.cloneElement)(trigger, subMenu.getReferenceProps(referenceProps)),
-        subMenu.open && (react_1.default.createElement("div", { ...subMenu.getFloatingProps({
+    const stableRef = (0, use_composed_refs_1.useComposedRefs)(ref, subMenu.refs.setReference, trigger.props.ref);
+    const t1 = subMenu.open ? "open" : "closed";
+    let t2;
+    let t3;
+    if ($[1] !== stableRef || $[2] !== subMenu || $[3] !== t1 || $[4] !== trigger) {
+        const referenceProps = {
+            ...trigger.props,
+            ref: stableRef,
+            "data-state": t1
+        };
+        t2 = "uxf-cms-sub-menu";
+        t3 = (0, react_1.cloneElement)(trigger, subMenu.getReferenceProps(referenceProps));
+        $[1] = stableRef;
+        $[2] = subMenu;
+        $[3] = t1;
+        $[4] = trigger;
+        $[5] = t2;
+        $[6] = t3;
+    }
+    else {
+        t2 = $[5];
+        t3 = $[6];
+    }
+    let t4;
+    if ($[7] !== props.content || $[8] !== subMenu) {
+        t4 = subMenu.open && react_1.default.createElement("div", { ...subMenu.getFloatingProps({
                 ref: subMenu.refs.setFloating,
                 style: subMenu.floatingStyles,
-                className: "uxf-cms-sidebar__scrollbar uxf-cms-sub-menu__wrapper",
-            }) }, props.content.map((item, index) => (react_1.default.createElement(sub_menu_item_1.SubMenuItem, { item: item, key: index })))))));
+                className: "uxf-cms-sidebar__scrollbar uxf-cms-sub-menu__wrapper"
+            }) }, props.content.map(_temp));
+        $[7] = props.content;
+        $[8] = subMenu;
+        $[9] = t4;
+    }
+    else {
+        t4 = $[9];
+    }
+    let t5;
+    if ($[10] !== t2 || $[11] !== t3 || $[12] !== t4) {
+        t5 = react_1.default.createElement("div", { className: t2 },
+            t3,
+            t4);
+        $[10] = t2;
+        $[11] = t3;
+        $[12] = t4;
+        $[13] = t5;
+    }
+    else {
+        t5 = $[13];
+    }
+    return t5;
+}
+function _temp(item, index) {
+    return react_1.default.createElement(sub_menu_item_1.SubMenuItem, { item: item, key: index });
 }
 SubMenu.displayName = "SubMenu";