@uxf/cms 6.0.0-beta.8 → 10.0.0-beta.5

package/lib/{Menu → menu}/factory.d.ts

@@ -1,6 +1,10 @@
-import { MenuItem } from "./model";
+import { MenuItem, UserMenuData } from "./model";
 import { IconName } from "@uxf/ui/icon/types";
+import { ReactNode } from "react";
+export declare function createCustomContent(title: string, content: ReactNode): MenuItem;
+export declare function createSuperSection(title: string, children?: MenuItem[]): MenuItem;
 export declare function createSection(title: string, icon?: IconName, children?: MenuItem[]): MenuItem;
 export declare function createLink(title: string, routeName: string, routeParams?: any, icon?: IconName): MenuItem;
 export declare function createExternalLink(title: string, href: string, icon?: IconName): MenuItem;
+export declare function createUserMenu(userMenuData: UserMenuData, children?: MenuItem[]): MenuItem;
 export declare function createTableLink(title: string, entityAlias: string, icon?: IconName): MenuItem;

package/lib/menu/factory.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTableLink = exports.createUserMenu = exports.createExternalLink = exports.createLink = exports.createSection = exports.createSuperSection = exports.createCustomContent = void 0;
+const active_item_resolver_1 = require("./active-item-resolver");
+const model_1 = require("./model");
+function createCustomContent(title, content) {
+    return model_1.MenuItem.create(title, "custom").setContent(content);
+}
+exports.createCustomContent = createCustomContent;
+function createSuperSection(title, children) {
+    return model_1.MenuItem.create(title, "super-section").setChildren(children);
+}
+exports.createSuperSection = createSuperSection;
+function createSection(title, icon, children) {
+    return model_1.MenuItem.create(title, "section").setIcon(icon).setChildren(children);
+}
+exports.createSection = createSection;
+function createLink(title, routeName, routeParams, icon) {
+    return model_1.MenuItem.create(title, "link")
+        .setRoute(routeName, routeParams)
+        .setIcon(icon)
+        .setActiveResolver(active_item_resolver_1.ActiveItemResolver.anyOf([routeName]));
+}
+exports.createLink = createLink;
+function createExternalLink(title, href, icon) {
+    return model_1.MenuItem.create(title, "link").setIsExternal(true).setIcon(icon).setUrl(href);
+}
+exports.createExternalLink = createExternalLink;
+function createUserMenu(userMenuData, children) {
+    return model_1.MenuItem.create("Můj profil", "super-section").setUserMenuData(userMenuData).setChildren(children);
+}
+exports.createUserMenu = createUserMenu;
+function createTableLink(title, entityAlias, icon) {
+    return model_1.MenuItem.create(title, "link")
+        .setRoute("cms/table", { entityAlias })
+        .setIcon(icon)
+        .setActiveResolver(active_item_resolver_1.ActiveItemResolver.tableLink());
+}
+exports.createTableLink = createTableLink;

package/lib/menu/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./ui/menu";
+export * from "./ui/menu-item";
+export * from "./factory";
+export * from "./types";
+export * from "./active-item-resolver";

package/{forms/InviteUserForm → lib/menu}/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -10,6 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./InviteUserForm"), exports);
+__exportStar(require("./ui/menu"), exports);
+__exportStar(require("./ui/menu-item"), exports);
+__exportStar(require("./factory"), exports);
 __exportStar(require("./types"), exports);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZm9ybXMvSW52aXRlVXNlckZvcm0vaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7O0FBQUEsbURBQWlDO0FBQ2pDLDBDQUF3QiJ9
+__exportStar(require("./active-item-resolver"), exports);

package/lib/menu/mobile-bar.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { MenuItem } from "./model";
+export declare const MobileBar: FC<{
+    menuConfiguration: MenuItem[];
+    toggleMenu: () => void;
+}>;

package/lib/menu/mobile-bar.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileBar = void 0;
+const react_1 = __importDefault(require("react"));
+const link_1 = __importDefault(require("next/link"));
+const icon_1 = require("@uxf/ui/icon");
+const sub_menu_mobile_1 = require("./ui/sub-menu/sub-menu-mobile");
+const config_1 = require("../../config");
+const avatar_1 = require("@uxf/ui/avatar");
+const cx_1 = require("@uxf/core/utils/cx");
+const MobileBar = (props) => {
+    // eslint-disable-next-line react/destructuring-assignment
+    const { menuConfiguration, toggleMenu } = props;
+    const useLoggedUser = config_1.container.get("useLoggedUser");
+    const loggedUser = useLoggedUser();
+    const mobileBarMenu = menuConfiguration
+        .flatMap((item) => {
+        if (item.type === "link" || item.type === "section") {
+            return item;
+        }
+        if (item.userMenuData) {
+            return item;
+        }
+        if (item.type === "super-section") {
+            return item.children.filter((i) => i.type === "link" || i.type === "section");
+        }
+        return undefined;
+    })
+        .filter((i) => i)
+        .filter((item) => (item === null || item === void 0 ? void 0 : item.isVisible(loggedUser)) && (!item.children.length || item.hasVisibleChildren(loggedUser)))
+        .splice(0, 4);
+    const buttonClassName = (0, cx_1.cx)("flex h-10 grow items-center justify-center shrink-0", mobileBarMenu.length === 2 && "w-1/3", mobileBarMenu.length === 3 && "w-1/4", mobileBarMenu.length === 4 && "w-1/5");
+    return (react_1.default.createElement("div", { className: "fixed inset-x-0 bottom-0 flex h-16 items-center border-t border-gray-700 bg-sidebar-background px-1 text-darkMedium md:hidden" },
+        mobileBarMenu.map((item, index) => {
+            var _a, _b, _c, _d;
+            if (item.children.length) {
+                return (react_1.default.createElement(sub_menu_mobile_1.SubMenuMobile, { key: index, content: item.children, title: item.title },
+                    react_1.default.createElement("button", { type: "button", className: buttonClassName }, item.userMenuData ? (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(avatar_1.Avatar, { className: "h-7 w-7", src: item.userMenuData.avatar }))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(icon_1.Icon, { name: (_a = item.icon) !== null && _a !== void 0 ? _a : "", size: 24 }),
+                        react_1.default.createElement(icon_1.Icon, { name: "caretDown", size: 16, className: "ml-1" }))))));
+            }
+            if (item.url || item.route) {
+                return (react_1.default.createElement(link_1.default, { key: index, href: (_b = item.url) !== null && _b !== void 0 ? _b : config_1.container.get("route")(item.route, item.routeParams), target: item.isExternal ? "_blank" : undefined, rel: item.isExternal ? "noreferrer noopener" : undefined, className: buttonClassName },
+                    react_1.default.createElement(icon_1.Icon, { name: (_c = item.icon) !== null && _c !== void 0 ? _c : "user", size: 24 })));
+            }
+            return (react_1.default.createElement("span", { key: index, className: buttonClassName },
+                react_1.default.createElement(icon_1.Icon, { name: (_d = item.icon) !== null && _d !== void 0 ? _d : "user", size: 24 })));
+        }),
+        react_1.default.createElement("button", { type: "button", className: buttonClassName, onClick: toggleMenu },
+            react_1.default.createElement(icon_1.Icon, { name: "bars", size: 24 }))));
+};
+exports.MobileBar = MobileBar;

package/lib/{Menu → menu}/model.d.ts

@@ -1,33 +1,52 @@
-import { LoggedUser } from "../../config/Container";
+import { LoggedUser } from "../../config/container";
 import { Resolver } from "./types";
 import { NextRouter } from "next/router";
 import { IconName } from "@uxf/ui/icon/types";
+import { ReactNode } from "react";
+type ItemType = "custom" | "super-section" | "section" | "link";
+export type UserMenuData = {
+    avatar?: string;
+    name: string;
+    roles: string;
+};
 export declare class MenuItem {
+    private _type;
     private _title;
     private _children;
     private _url?;
     private _route?;
     private _routeParams?;
+    private _isExternal?;
     private _icon?;
     private _activeItemResolver?;
     private _allowedRoles?;
-    static create(title: string): MenuItem;
-    constructor(title: string);
+    private _content?;
+    private _userMenuData?;
+    static create(title: string, type: ItemType): MenuItem;
+    constructor(title: string, type: ItemType);
+    setContent(content: ReactNode): MenuItem;
     setIcon(icon?: IconName): MenuItem;
     setChildren(children?: MenuItem[]): MenuItem;
     setRoute(route: string, routeParams?: object): MenuItem;
     setUrl(url: string): MenuItem;
+    setIsExternal(isExternal: boolean): MenuItem;
+    setUserMenuData(userMenuData: UserMenuData): MenuItem;
     setActiveResolver(resolver: Resolver | null): MenuItem;
     setAllowedRoles(roles: string[]): MenuItem;
     isActive(router: NextRouter, activeRoute: string): boolean;
     hasActiveChildren(router: NextRouter, activeRoute: string): boolean;
     isVisible(loggedUser: LoggedUser): boolean;
     hasVisibleChildren(loggedUser: LoggedUser): boolean;
+    get type(): ItemType;
     get title(): string;
     get children(): MenuItem[];
     get url(): string | undefined;
     get route(): string | undefined;
     get routeParams(): any;
+    get isExternal(): boolean | undefined;
     get icon(): IconName | undefined;
     get allowedRoles(): string[] | undefined;
+    get content(): ReactNode;
+    get userMenuData(): UserMenuData | undefined;
 }
+export {};

package/lib/menu/model.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = void 0;
+class MenuItem {
+    static create(title, type) {
+        return new MenuItem(title, type);
+    }
+    constructor(title, type) {
+        this._title = title;
+        this._type = type;
+        this._children = [];
+    }
+    setContent(content) {
+        this._content = content;
+        return this;
+    }
+    setIcon(icon) {
+        this._icon = icon;
+        return this;
+    }
+    setChildren(children) {
+        this._children = children !== null && children !== void 0 ? children : [];
+        return this;
+    }
+    setRoute(route, routeParams) {
+        this._route = route;
+        this._routeParams = routeParams;
+        return this;
+    }
+    setUrl(url) {
+        this._url = url;
+        return this;
+    }
+    setIsExternal(isExternal) {
+        this._isExternal = isExternal;
+        return this;
+    }
+    setUserMenuData(userMenuData) {
+        this._userMenuData = userMenuData;
+        return this;
+    }
+    setActiveResolver(resolver) {
+        this._activeItemResolver = resolver ? resolver(this) : undefined;
+        return this;
+    }
+    setAllowedRoles(roles) {
+        this._allowedRoles = roles;
+        return this;
+    }
+    isActive(router, activeRoute) {
+        return !!(this._activeItemResolver && this._activeItemResolver(router, activeRoute));
+    }
+    hasActiveChildren(router, activeRoute) {
+        return this.children.some((item) => item.isActive(router, activeRoute));
+    }
+    isVisible(loggedUser) {
+        if (this._allowedRoles === undefined) {
+            return true;
+        }
+        for (const allowedRole of this._allowedRoles) {
+            if (loggedUser.roles.includes(allowedRole)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    hasVisibleChildren(loggedUser) {
+        return this.children.some((item) => item.isVisible(loggedUser));
+    }
+    get type() {
+        return this._type;
+    }
+    get title() {
+        return this._title;
+    }
+    get children() {
+        return this._children;
+    }
+    get url() {
+        return this._url;
+    }
+    get route() {
+        return this._route;
+    }
+    get routeParams() {
+        return this._routeParams;
+    }
+    get isExternal() {
+        return this._isExternal;
+    }
+    get icon() {
+        return this._icon;
+    }
+    get allowedRoles() {
+        return this._allowedRoles;
+    }
+    get content() {
+        return this._content;
+    }
+    get userMenuData() {
+        return this._userMenuData;
+    }
+}
+exports.MenuItem = MenuItem;

package/lib/menu/types.d.ts

@@ -0,0 +1,5 @@
+import { MenuItem } from "./model";
+import { NextRouter } from "next/router";
+export type RouterResolver = (router: NextRouter, activeRoute: string) => boolean;
+export type Resolver = (item: MenuItem) => RouterResolver;
+export type MenuConfiguration = MenuItem[];

package/lib/menu/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/menu/ui/list-item/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./list-item";
+export * from "./types";

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./list-item"), exports);
+__exportStar(require("./types"), exports);

package/lib/menu/ui/list-item/list-item.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from "react";
+import { ListItemProps } from "./types";
+export declare const ListItem: <T extends Record<string, any>>(props: ListItemProps<T>) => ReactElement;

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

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItem = void 0;
+const react_1 = __importDefault(require("react"));
+const icon_1 = require("@uxf/ui/icon");
+const link_1 = __importDefault(require("next/link"));
+const sub_menu_1 = require("../sub-menu/sub-menu");
+const config_1 = require("../../../../config");
+const ListItem = (props) => {
+    // eslint-disable-next-line react/destructuring-assignment
+    const { children, icon, label, level = 0, selected, href, route, params, subMenu, isOpen, toggle, isInitiallyOpen, isExternal, } = props;
+    const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
+    const Content = children !== null && children !== void 0 ? children : (react_1.default.createElement("div", { className: `mb-0.5 flex cursor-pointer items-center rounded-lg py-2.5 pl-2.5 pr-1 hover:bg-sidebar-hover ${selected ? "bg-sidebar-highlight font-bold text-darkHigh" : "bg-sidebar-background text-darkMedium"}` },
+        react_1.default.createElement("div", { className: level === 1 ? "w-9" : "w-7" }, !!icon && level !== 1 && react_1.default.createElement(icon_1.Icon, { name: icon, size: 16 })),
+        react_1.default.createElement("div", { className: "uxf-typo-body2" }, label),
+        hasSubMenu && (react_1.default.createElement(icon_1.Icon, { name: "caretDown", size: 16, className: `ml-auto mr-2 ${!isOpen ? "-rotate-90" : ""}` }))));
+    // eslint-disable-next-line react/destructuring-assignment
+    const Button = ({ className }) => (react_1.default.createElement("button", { type: "button", onClick: toggle, className: className }, Content));
+    if (href || route) {
+        if (hasSubMenu && !isInitiallyOpen) {
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(sub_menu_1.SubMenu, { content: subMenu },
+                    react_1.default.createElement(link_1.default, { href: href !== null && href !== void 0 ? href : config_1.container.get("route")(route, params), target: isExternal ? "_blank" : undefined, rel: isExternal ? "noreferrer noopener" : undefined }, Content)),
+                react_1.default.createElement(Button, { className: "w-full md:hidden" })));
+        }
+        if (hasSubMenu) {
+            return react_1.default.createElement(Button, { className: "w-full md:pointer-events-none" });
+        }
+        return (react_1.default.createElement(link_1.default, { href: href !== null && href !== void 0 ? href : config_1.container.get("route")(route, params), target: isExternal ? "_blank" : undefined, rel: isExternal ? "noreferrer noopener" : undefined }, Content));
+    }
+    return Content;
+};
+exports.ListItem = ListItem;

package/{ui/ListItem → lib/menu/ui/list-item}/types.d.ts

@@ -1,5 +1,6 @@
 import { ReactElement } from "react";
 import { IconName } from "@uxf/ui/icon/types";
+import { MenuItem } from "../../model";
 export interface ListItemProps<RouteList> {
     children?: ReactElement;
     icon?: IconName;
@@ -9,6 +10,9 @@ export interface ListItemProps<RouteList> {
     route?: keyof RouteList;
     selected?: boolean;
     href?: string;
-    hasSubItems?: boolean;
+    subMenu?: MenuItem[];
     isOpen?: boolean;
+    isInitiallyOpen?: boolean;
+    toggle?: () => void;
+    isExternal?: boolean;
 }

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/menu/ui/menu-custom-item.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { MenuItem as Model } from "../model";
+export interface MenuCustomItemProps {
+    item: Model;
+}
+export declare const MenuCustomItem: FC<MenuCustomItemProps>;

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

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuCustomItem = void 0;
+const react_1 = __importDefault(require("react"));
+const config_1 = require("../../../config");
+const MenuCustomItem = (props) => {
+    // eslint-disable-next-line react/destructuring-assignment
+    const { item } = props;
+    const useLoggedUser = config_1.container.get("useLoggedUser");
+    const loggedUser = useLoggedUser();
+    if (!item.isVisible(loggedUser)) {
+        return null;
+    }
+    return react_1.default.createElement("div", null, item.content);
+};
+exports.MenuCustomItem = MenuCustomItem;

package/lib/{Menu/ui/MenuItem.d.ts → menu/ui/menu-item.d.ts}

@@ -1,11 +1,6 @@
 import { FC } from "react";
 import { MenuItem as Model } from "../model";
 export interface MenuItemProps {
-    hasActiveChildren?: boolean;
-    idPrefix?: string;
-    isActive?: boolean;
     item: Model;
-    level?: number;
-    offset?: number;
 }
 export declare const MenuItem: FC<MenuItemProps>;

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

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = void 0;
+const react_1 = __importStar(require("react"));
+const config_1 = require("../../../config");
+const list_item_1 = require("./list-item");
+const router_1 = require("next/router");
+const MenuItem = (props) => {
+    var _a, _b, _c, _d;
+    // eslint-disable-next-line react/destructuring-assignment
+    const { item } = props;
+    const router = (0, router_1.useRouter)();
+    const activeRoute = config_1.container.get("useActiveRoute")();
+    const isActive = item.isActive(router, activeRoute);
+    const hasActiveChildren = item.hasActiveChildren(router, activeRoute);
+    const useLoggedUser = config_1.container.get("useLoggedUser");
+    const loggedUser = useLoggedUser();
+    const visibleChildren = item.children.filter((i) => i.isVisible(loggedUser));
+    const firstVisibleChild = visibleChildren.length !== 0 ? visibleChildren[0] : undefined;
+    const isInitiallyOpen = (isActive || hasActiveChildren) && item.children.length > 0;
+    const [isSubmenuOpen, setIsSubmenuOpen] = (0, react_1.useState)(isInitiallyOpen);
+    const toggle = () => setIsSubmenuOpen((prev) => !prev);
+    if (!item.isVisible(loggedUser) || (item.children.length !== 0 && !item.hasVisibleChildren(loggedUser))) {
+        return null;
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(list_item_1.ListItem, { label: item.title, icon: item.icon, href: (_a = item.url) !== null && _a !== void 0 ? _a : firstVisibleChild === null || firstVisibleChild === void 0 ? void 0 : firstVisibleChild.url, route: (_b = item.route) !== null && _b !== void 0 ? _b : firstVisibleChild === null || firstVisibleChild === void 0 ? void 0 : firstVisibleChild.route, params: (_d = (_c = item.routeParams) !== null && _c !== void 0 ? _c : firstVisibleChild === null || firstVisibleChild === void 0 ? void 0 : firstVisibleChild.routeParams) !== null && _d !== void 0 ? _d : null, selected: isActive, subMenu: item.children, isOpen: isSubmenuOpen, toggle: toggle, isInitiallyOpen: isInitiallyOpen, isExternal: item.isExternal }),
+        isSubmenuOpen && (react_1.default.createElement("div", null, visibleChildren.map((i) => {
+            const isSelected = i.isActive(router, activeRoute);
+            return (react_1.default.createElement(list_item_1.ListItem, { key: i.title, label: i.title, href: i.url, icon: i.icon, route: i.route, params: i.routeParams, level: 1, selected: isSelected, isExternal: i.isExternal }));
+        })))));
+};
+exports.MenuItem = MenuItem;

package/lib/menu/ui/menu-super-section-item.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { MenuItem as Model } from "../model";
+export interface MenuSuperSectionItemProps {
+    item: Model;
+}
+export declare const MenuSuperSectionItem: FC<MenuSuperSectionItemProps>;

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

@@ -0,0 +1,42 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuSuperSectionItem = void 0;
+const react_1 = __importStar(require("react"));
+const config_1 = require("../../../config");
+const menu_item_1 = require("./menu-item");
+const menu_custom_item_1 = require("./menu-custom-item");
+const MenuSuperSectionItem = (props) => {
+    // eslint-disable-next-line react/destructuring-assignment
+    const { item } = props;
+    const useLoggedUser = config_1.container.get("useLoggedUser");
+    const loggedUser = useLoggedUser();
+    return (react_1.default.createElement("div", { className: item.userMenuData ? "md:hidden" : undefined },
+        item.isVisible(loggedUser) && (react_1.default.createElement("p", { className: "uxf-typo-overline mb-3 mt-6 pl-2 uppercase text-darkLow" }, item.title)),
+        item.children.map((i, index) => (react_1.default.createElement(react_1.Fragment, { key: index },
+            i.type === "custom" && react_1.default.createElement(menu_custom_item_1.MenuCustomItem, { item: i }),
+            (i.type === "section" || i.type === "link") && react_1.default.createElement(menu_item_1.MenuItem, { item: i }))))));
+};
+exports.MenuSuperSectionItem = MenuSuperSectionItem;

package/lib/menu/ui/menu.js

@@ -0,0 +1,37 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+const react_1 = __importStar(require("react"));
+const menu_item_1 = require("./menu-item");
+const menu_custom_item_1 = require("./menu-custom-item");
+const menu_super_section_item_1 = require("./menu-super-section-item");
+const Menu = (props) => {
+    return (react_1.default.createElement("div", { className: "bg-sidebar-background px-2 pb-4" }, props.menu.map((item, index) => (react_1.default.createElement(react_1.Fragment, { key: index },
+        item.type === "custom" && react_1.default.createElement(menu_custom_item_1.MenuCustomItem, { item: item }),
+        item.type === "super-section" && react_1.default.createElement(menu_super_section_item_1.MenuSuperSectionItem, { item: item }),
+        (item.type === "section" || item.type === "link") && react_1.default.createElement(menu_item_1.MenuItem, { item: item }))))));
+};
+exports.Menu = Menu;

package/lib/menu/ui/sub-menu/sub-menu-mobile.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactElement } from "react";
+import { MenuItem as Model } from "../../model";
+export interface SubMenuProps {
+    children: ReactElement;
+    content: Model[];
+    title: string;
+}
+export declare const SubMenuMobile: React.ForwardRefExoticComponent<SubMenuProps & React.RefAttributes<HTMLElement>>;