@uxf/cms 10.0.0-beta.9 → 10.0.1

package/lib/menu/mobile-bar.js

@@ -4,19 +4,18 @@ var __importDefault = (this && this.__importDefault) || function (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 cx_1 = require("@uxf/core/utils/cx");
 const icon_1 = require("@uxf/ui/icon");
-const sub_menu_mobile_1 = require("./ui/sub-menu/sub-menu-mobile");
+const link_1 = __importDefault(require("next/link"));
+const react_1 = __importDefault(require("react"));
 const config_1 = require("../../config");
-const avatar_1 = require("@uxf/ui/avatar");
-const cx_1 = require("@uxf/core/utils/cx");
+const avatar_1 = require("../../ui/avatar");
+const get_avatar_user_letters_1 = require("../../ui/avatar/get-avatar-user-letters");
+const sub_menu_mobile_1 = require("./ui/sub-menu/sub-menu-mobile");
 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
+    const mobileBarMenu = props.menuConfiguration
         .flatMap((item) => {
         if (item.type === "link" || item.type === "section") {
             return item;
@@ -32,16 +31,15 @@ const MobileBar = (props) => {
         .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" },
+    const buttonClassName = (0, cx_1.cx)("uxf-cms-mobile-bar__button", 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: "uxf-cms-mobile-bar" },
         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("button", { type: "button", className: buttonClassName }, item.userMenuData ? (react_1.default.createElement(avatar_1.Avatar, { className: "uxf-cms-mobile-bar__avatar", letters: (0, get_avatar_user_letters_1.getAvatarUserLetters)(item.userMenuData.name), size: "sm", src: item.userMenuData.avatar, variant: "rounded" })) : (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" }))))));
+                        react_1.default.createElement(icon_1.Icon, { name: "caretDown", size: 16, className: "uxf-cms-mobile-bar__caret" }))))));
             }
             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 },
@@ -50,7 +48,7 @@ const MobileBar = (props) => {
             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("button", { type: "button", className: buttonClassName, onClick: props.toggleMenu },
             react_1.default.createElement(icon_1.Icon, { name: "bars", size: 24 }))));
 };
 exports.MobileBar = MobileBar;

package/lib/menu/model.d.ts

@@ -1,11 +1,12 @@
+import { ImageSource } from "@uxf/core/utils/resizer";
+import { IconName } from "@uxf/ui/icon/types";
+import { NextRouter } from "next/router";
+import { ReactElement, ReactNode } from "react";
 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;
+    avatar?: ImageSource;
     name: string;
     roles: string;
 };
@@ -18,6 +19,7 @@ export declare class MenuItem {
     private _routeParams?;
     private _isExternal?;
     private _icon?;
+    private _endElement?;
     private _activeItemResolver?;
     private _allowedRoles?;
     private _content?;
@@ -26,6 +28,7 @@ export declare class MenuItem {
     constructor(title: string, type: ItemType);
     setContent(content: ReactNode): MenuItem;
     setIcon(icon?: IconName): MenuItem;
+    setEndElement(endElement?: ReactElement): MenuItem;
     setChildren(children?: MenuItem[]): MenuItem;
     setRoute(route: string, routeParams?: object): MenuItem;
     setUrl(url: string): MenuItem;
@@ -45,6 +48,7 @@ export declare class MenuItem {
     get routeParams(): any;
     get isExternal(): boolean | undefined;
     get icon(): IconName | undefined;
+    get endElement(): ReactElement | undefined;
     get allowedRoles(): string[] | undefined;
     get content(): ReactNode;
     get userMenuData(): UserMenuData | undefined;

package/lib/menu/model.js

@@ -18,6 +18,10 @@ class MenuItem {
         this._icon = icon;
         return this;
     }
+    setEndElement(endElement) {
+        this._endElement = endElement;
+        return this;
+    }
     setChildren(children) {
         this._children = children !== null && children !== void 0 ? children : [];
         return this;
@@ -91,6 +95,9 @@ class MenuItem {
     get icon() {
         return this._icon;
     }
+    get endElement() {
+        return this._endElement;
+    }
     get allowedRoles() {
         return this._allowedRoles;
     }

package/lib/menu/types.d.ts

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

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

@@ -4,32 +4,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListItem = void 0;
-const react_1 = __importDefault(require("react"));
+const classes_1 = require("@uxf/core/constants/classes");
 const icon_1 = require("@uxf/ui/icon");
 const link_1 = __importDefault(require("next/link"));
-const sub_menu_1 = require("../sub-menu/sub-menu");
+const react_1 = __importDefault(require("react"));
 const config_1 = require("../../../../config");
+const sub_menu_1 = require("../sub-menu/sub-menu");
 const ListItem = (props) => {
+    var _a, _b, _c, _d;
+    const hasSubMenu = !!((_a = props.subMenu) === null || _a === void 0 ? void 0 : _a.length);
+    const Content = (_b = props.children) !== null && _b !== void 0 ? _b : (react_1.default.createElement("div", { className: `uxf-cms-menu__item uxf-cms-menu__item--basic ${props.selected ? classes_1.CLASSES.IS_SELECTED : ""}` },
+        react_1.default.createElement("div", { className: `uxf-cms-menu__icon-wrapper ${props.level === 1 ? "uxf-cms-menu__icon-wrapper--level-one" : ""}` }, !!props.icon && props.level !== 1 && react_1.default.createElement(icon_1.Icon, { name: props.icon, size: 16 })),
+        react_1.default.createElement("div", { className: "uxf-cms-menu__item-label" }, props.label),
+        react_1.default.createElement("div", { className: "uxf-cms-menu__item-end-element" }, props.endElement),
+        hasSubMenu && (react_1.default.createElement(icon_1.Icon, { name: "caretDown", size: 16, className: `uxf-cms-menu__caret ${!props.isOpen ? classes_1.CLASSES.IS_OPEN : ""}` }))));
     // 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) {
+    const Button = ({ className }) => (react_1.default.createElement("button", { type: "button", onClick: props.toggle, className: className }, Content));
+    if (props.href || props.route) {
+        if (props.subMenu && hasSubMenu && !props.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" })));
+                react_1.default.createElement(sub_menu_1.SubMenu, { content: props.subMenu },
+                    react_1.default.createElement(link_1.default, { href: (_c = props.href) !== null && _c !== void 0 ? _c : config_1.container.get("route")(props.route, props.params), target: props.isExternal ? "_blank" : undefined, rel: props.isExternal ? "noreferrer noopener" : undefined }, Content)),
+                react_1.default.createElement(Button, { className: "uxf-cms-menu__submenu-button uxf-cms-menu__submenu-button--initially-closed" })));
         }
         if (hasSubMenu) {
-            return react_1.default.createElement(Button, { className: "w-full md:pointer-events-none" });
+            return react_1.default.createElement(Button, { className: "uxf-cms-menu__submenu-button uxf-cms-menu__submenu-button--initially-open" });
         }
-        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 (react_1.default.createElement(link_1.default, { href: (_d = props.href) !== null && _d !== void 0 ? _d : config_1.container.get("route")(props.route, props.params), target: props.isExternal ? "_blank" : undefined, rel: props.isExternal ? "noreferrer noopener" : undefined }, Content));
     }
     return Content;
 };

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

@@ -1,18 +1,19 @@
-import { ReactElement } from "react";
 import { IconName } from "@uxf/ui/icon/types";
+import { ReactElement } from "react";
 import { MenuItem } from "../../model";
 export interface ListItemProps<RouteList> {
     children?: ReactElement;
+    endElement?: ReactElement;
+    href?: string;
     icon?: IconName;
+    isExternal?: boolean;
+    isInitiallyOpen?: boolean;
+    isOpen?: boolean;
     label: string;
     level?: number;
     params?: any;
     route?: keyof RouteList;
     selected?: boolean;
-    href?: string;
     subMenu?: MenuItem[];
-    isOpen?: boolean;
-    isInitiallyOpen?: boolean;
     toggle?: () => void;
-    isExternal?: boolean;
 }

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

@@ -7,13 +7,11 @@ 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)) {
+    if (!props.item.isVisible(loggedUser)) {
         return null;
     }
-    return react_1.default.createElement("div", null, item.content);
+    return react_1.default.createElement("div", { className: "uxf-cms-menu__item-wrapper uxf-cms-menu__item-wrapper--custom" }, props.item.content);
 };
 exports.MenuCustomItem = MenuCustomItem;

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

@@ -24,33 +24,32 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuItem = void 0;
+const router_1 = require("next/router");
 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 isActive = props.item.isActive(router, activeRoute);
+    const hasActiveChildren = props.item.hasActiveChildren(router, activeRoute);
     const useLoggedUser = config_1.container.get("useLoggedUser");
     const loggedUser = useLoggedUser();
-    const visibleChildren = item.children.filter((i) => i.isVisible(loggedUser));
+    const visibleChildren = props.item.children.filter((i) => i.isVisible(loggedUser));
     const firstVisibleChild = visibleChildren.length !== 0 ? visibleChildren[0] : undefined;
-    const isInitiallyOpen = (isActive || hasActiveChildren) && item.children.length > 0;
+    const isInitiallyOpen = (isActive || hasActiveChildren) && props.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))) {
+    if (!props.item.isVisible(loggedUser) ||
+        (props.item.children.length !== 0 && !props.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) => {
+    return (react_1.default.createElement("div", { className: "uxf-cms-menu__item-wrapper uxf-cms-menu__item-wrapper--basic" },
+        react_1.default.createElement(list_item_1.ListItem, { endElement: props.item.endElement, href: (_a = props.item.url) !== null && _a !== void 0 ? _a : firstVisibleChild === null || firstVisibleChild === void 0 ? void 0 : firstVisibleChild.url, icon: props.item.icon, isExternal: props.item.isExternal, isInitiallyOpen: isInitiallyOpen, isOpen: isSubmenuOpen, label: props.item.title, params: (_c = (_b = props.item.routeParams) !== null && _b !== void 0 ? _b : firstVisibleChild === null || firstVisibleChild === void 0 ? void 0 : firstVisibleChild.routeParams) !== null && _c !== void 0 ? _c : null, route: (_d = props.item.route) !== null && _d !== void 0 ? _d : firstVisibleChild === null || firstVisibleChild === void 0 ? void 0 : firstVisibleChild.route, selected: isActive, subMenu: props.item.children, toggle: toggle }),
+        isSubmenuOpen && (react_1.default.createElement("div", { className: "uxf-cms-menu__submenu-list" }, 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 }));
+            return (react_1.default.createElement(list_item_1.ListItem, { endElement: i.endElement, href: i.url, icon: i.icon, isExternal: i.isExternal, key: i.title, label: i.title, level: 1, params: i.routeParams, route: i.route, selected: isSelected }));
         })))));
 };
 exports.MenuItem = MenuItem;

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

@@ -26,16 +26,14 @@ 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 menu_item_1 = require("./menu-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 },
+    return (react_1.default.createElement("div", { className: `uxf-cms-menu__item-wrapper uxf-cms-menu__item-wrapper--super ${props.item.userMenuData ? "uxf-cms-menu__item-wrapper--user-menu" : ""}` },
+        props.item.isVisible(loggedUser) && (react_1.default.createElement("p", { className: "uxf-cms-menu__item uxf-cms-menu__item--super" }, props.item.title)),
+        props.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 }))))));
 };

package/lib/menu/ui/menu.js

@@ -25,11 +25,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
 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_item_1 = require("./menu-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 },
+    return (react_1.default.createElement("div", { className: "uxf-cms-menu" }, 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 }))))));

package/lib/menu/ui/sub-menu/{sub-menuItem.js → sub-menu-item.js}

@@ -4,21 +4,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubMenuItem = void 0;
+const link_1 = __importDefault(require("next/link"));
 const react_1 = __importDefault(require("react"));
 const config_1 = require("../../../../config");
-const link_1 = __importDefault(require("next/link"));
 const SubMenuItem = (props) => {
     var _a;
-    // eslint-disable-next-line react/destructuring-assignment
-    const { item } = props;
     const useLoggedUser = config_1.container.get("useLoggedUser");
     const loggedUser = useLoggedUser();
-    if (!item.isVisible(loggedUser)) {
+    if (!props.item.isVisible(loggedUser)) {
         return null;
     }
-    const Content = (react_1.default.createElement("div", { className: "hover:text-darkLight w-full bg-sidebar-highlight px-4 py-3.5 text-body text-darkMedium hover:bg-sidebar-background md:text-body2" }, item.title));
-    if (item.url || item.route) {
-        return (react_1.default.createElement(link_1.default, { href: (_a = item.url) !== null && _a !== void 0 ? _a : config_1.container.get("route")(item.route, item.routeParams), target: item.isExternal ? "_blank" : undefined, rel: item.isExternal ? "noreferrer noopener" : undefined }, Content));
+    const Content = react_1.default.createElement("div", { className: "uxf-cms-sub-menu__item" }, props.item.title);
+    if (props.item.url || props.item.route) {
+        return (react_1.default.createElement(link_1.default, { href: (_a = props.item.url) !== null && _a !== void 0 ? _a : config_1.container.get("route")(props.item.route, props.item.routeParams), target: props.item.isExternal ? "_blank" : undefined, rel: props.item.isExternal ? "noreferrer noopener" : undefined }, Content));
     }
     return Content;
 };

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

@@ -24,12 +24,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubMenuMobile = void 0;
+const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const react_1 = __importStar(require("react"));
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const sub_menu_item_1 = require("./sub-menu-item");
 const use_sub_menu_1 = require("./use-sub-menu");
-const composeRefs_1 = require("@uxf/core/utils/composeRefs");
-const sub_menuItem_1 = require("./sub-menuItem");
-exports.SubMenuMobile = (0, forwardRef_1.forwardRef)("SubMenuMobile", ({ children, content, title }, ref) => {
+exports.SubMenuMobile = (0, react_1.forwardRef)(({ children, content, title }, ref) => {
     const subMenu = (0, use_sub_menu_1.useSubMenu)({ isMobile: true });
     const stableRef = (0, react_1.useMemo)(() => (0, composeRefs_1.composeRefs)(ref, subMenu.refs.setReference, children.ref), [ref, subMenu.refs.setReference, children]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -39,10 +38,11 @@ exports.SubMenuMobile = (0, forwardRef_1.forwardRef)("SubMenuMobile", ({ childre
             "data-state": subMenu.open ? "open" : "closed",
         })),
         subMenu.open && (react_1.default.createElement("div", { ...subMenu.getFloatingProps({
-                className: "sidebar__scrollbar bg-sidebar-background rounded-xl overflow-y-auto z-dropdown w-[calc(100vw_-_32px)] shadow-lg left-4",
+                className: "uxf-cms-sidebar__scrollbar uxf-cms-sub-menu__wrapper-mobile",
                 ref: subMenu.refs.setFloating,
                 style: subMenu.floatingStyles,
             }) },
-            react_1.default.createElement("div", { className: "uxf-typo-body w-full bg-sidebar-background px-4 py-3.5 font-bold text-darkHigh" }, title),
-            content.map((item, index) => (react_1.default.createElement(sub_menuItem_1.SubMenuItem, { key: index, item: item })))))));
+            react_1.default.createElement("div", { className: "uxf-cms-sub-menu__title" }, title),
+            content.map((item, index) => (react_1.default.createElement(sub_menu_item_1.SubMenuItem, { key: index, item: item })))))));
 });
+exports.SubMenuMobile.displayName = "SubMenuMobile";

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

@@ -24,15 +24,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubMenu = void 0;
+const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const react_1 = __importStar(require("react"));
-const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const sub_menu_item_1 = require("./sub-menu-item");
 const use_sub_menu_1 = require("./use-sub-menu");
-const composeRefs_1 = require("@uxf/core/utils/composeRefs");
-const sub_menuItem_1 = require("./sub-menuItem");
-exports.SubMenu = (0, forwardRef_1.forwardRef)("SubMenu", ({ children, content }, ref) => {
+exports.SubMenu = (0, react_1.forwardRef)(({ children, content }, ref) => {
     const subMenu = (0, use_sub_menu_1.useSubMenu)({ isMobile: false });
     const stableRef = (0, react_1.useMemo)(() => (0, composeRefs_1.composeRefs)(ref, subMenu.refs.setReference, children.ref), [ref, subMenu.refs.setReference, children]);
-    return (react_1.default.createElement("div", { className: "hidden md:block" },
+    return (react_1.default.createElement("div", { className: "uxf-cms-sub-menu" },
         (0, react_1.cloneElement)(children, subMenu.getReferenceProps({
             ref: stableRef,
             ...children.props,
@@ -41,6 +40,7 @@ exports.SubMenu = (0, forwardRef_1.forwardRef)("SubMenu", ({ children, content }
         subMenu.open && (react_1.default.createElement("div", { ...subMenu.getFloatingProps({
                 ref: subMenu.refs.setFloating,
                 style: subMenu.floatingStyles,
-                className: "sidebar__scrollbar bg-sidebar-highlight rounded-xl overflow-y-auto z-dropdown max-w-64 shadow-lg w-full",
-            }) }, content.map((item, index) => (react_1.default.createElement(sub_menuItem_1.SubMenuItem, { key: index, item: item })))))));
+                className: "uxf-cms-sidebar__scrollbar uxf-cms-sub-menu__wrapper",
+            }) }, content.map((item, index) => (react_1.default.createElement(sub_menu_item_1.SubMenuItem, { key: index, item: item })))))));
 });
+exports.SubMenu.displayName = "SubMenu";

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

@@ -3,23 +3,35 @@ export interface SubMenuOptions {
     isMobile?: boolean;
 }
 export declare function useSubMenu(options: SubMenuOptions): {
-    placement: import("@floating-ui/react").Placement;
-    strategy: import("@floating-ui/react").Strategy;
-    middlewareData: import("@floating-ui/react").MiddlewareData;
+    placement: import("@floating-ui/utils").Placement;
+    strategy: import("@floating-ui/utils").Strategy;
+    middlewareData: import("@floating-ui/core").MiddlewareData;
     x: number;
     y: number;
+    isPositioned: boolean;
     update: () => void;
+    floatingStyles: import("react").CSSProperties;
+    refs: {
+        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: import("react").MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: {
+        reference: import("@floating-ui/react-dom").ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     context: {
         x: number;
         y: number;
-        placement: import("@floating-ui/react").Placement;
-        strategy: import("@floating-ui/react").Strategy;
-        middlewareData: import("@floating-ui/react").MiddlewareData;
-        update: () => void;
+        placement: import("@floating-ui/utils").Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
         isPositioned: boolean;
+        update: () => void;
         floatingStyles: import("react").CSSProperties;
         open: boolean;
-        onOpenChange: (open: boolean) => void;
+        onOpenChange: (open: boolean, event?: Event | undefined) => void;
         events: import("@floating-ui/react").FloatingEvents;
         dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
         nodeId: string | undefined;
@@ -27,10 +39,6 @@ export declare function useSubMenu(options: SubMenuOptions): {
         refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
         elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
     };
-    refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
-    elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
-    isPositioned: boolean;
-    floatingStyles: import("react").CSSProperties;
     getReferenceProps: (userProps?: import("react").HTMLProps<Element> | undefined) => Record<string, unknown>;
     getFloatingProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
     getItemProps: (userProps?: import("react").HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;

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

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSubMenu = void 0;
-const react_1 = require("react");
-const react_2 = require("@floating-ui/react");
+const react_1 = require("@floating-ui/react");
+const react_2 = require("react");
 function useSubMenu(options) {
-    const [open, setOpen] = (0, react_1.useState)(false);
-    const data = (0, react_2.useFloating)({
+    const [open, setOpen] = (0, react_2.useState)(false);
+    const data = (0, react_1.useFloating)({
         middleware: [
-            (0, react_2.offset)(options.isMobile ? 24 : 16),
-            (0, react_2.flip)(),
-            (0, react_2.shift)({ padding: 8 }),
-            (0, react_2.size)({
+            (0, react_1.offset)(options.isMobile ? 12 : 16),
+            (0, react_1.flip)(),
+            (0, react_1.shift)({ padding: 8 }),
+            (0, react_1.size)({
                 apply({ availableHeight, elements }) {
                     Object.assign(elements.floating.style, {
                         maxHeight: Math.max(240, availableHeight) + "px",
@@ -21,22 +21,22 @@ function useSubMenu(options) {
         onOpenChange: setOpen,
         open,
         placement: options.isMobile ? "top" : "right-start",
-        whileElementsMounted: (reference, floating, update) => (0, react_2.autoUpdate)(reference, floating, update, {
+        whileElementsMounted: (reference, floating, update) => (0, react_1.autoUpdate)(reference, floating, update, {
             elementResize: typeof ResizeObserver !== "undefined",
         }),
     });
     const context = data.context;
-    const hover = (0, react_2.useHover)(context, {
+    const hover = (0, react_1.useHover)(context, {
         move: false,
         delay: 200,
-        handleClose: (0, react_2.safePolygon)(),
+        handleClose: (0, react_1.safePolygon)(),
         enabled: !options.isMobile,
     });
-    const click = (0, react_2.useClick)(context, { enabled: !!options.isMobile });
-    const focus = (0, react_2.useFocus)(context);
-    const dismiss = (0, react_2.useDismiss)(context);
-    const interactions = (0, react_2.useInteractions)([hover, click, focus, dismiss]);
-    return (0, react_1.useMemo)(() => ({
+    const click = (0, react_1.useClick)(context, { enabled: !!options.isMobile });
+    const focus = (0, react_1.useFocus)(context);
+    const dismiss = (0, react_1.useDismiss)(context);
+    const interactions = (0, react_1.useInteractions)([hover, click, focus, dismiss]);
+    return (0, react_2.useMemo)(() => ({
         open,
         setOpen,
         ...interactions,

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

@@ -24,28 +24,28 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UserMenu = void 0;
-const react_1 = __importStar(require("react"));
-const avatar_1 = require("@uxf/ui/avatar");
+const classes_1 = require("@uxf/core/constants/classes");
 const icon_1 = require("@uxf/ui/icon");
+const react_1 = __importStar(require("react"));
+const avatar_1 = require("../../../ui/avatar");
+const get_avatar_user_letters_1 = require("../../../ui/avatar/get-avatar-user-letters");
 const list_item_1 = require("./list-item");
 const Component = (props) => {
     const [isSubmenuOpen, setIsSubmenuOpen] = (0, react_1.useState)(false);
     const hasSubmenu = props.submenu.length > 0;
     const toggle = hasSubmenu ? () => setIsSubmenuOpen((prev) => !prev) : undefined;
-    return (react_1.default.createElement("div", { className: "hidden border-t border-t-darkLow/10 p-3 pr-5 text-darkMedium md:block" },
-        react_1.default.createElement("button", { className: "flex w-full items-center text-left", onClick: toggle },
-            react_1.default.createElement(avatar_1.Avatar, { className: "mr-3 shrink-0", src: props.avatar }),
-            react_1.default.createElement("div", { className: "truncate" },
-                react_1.default.createElement("div", { className: "uxf-typo-body2 mb-1" }, props.name),
-                react_1.default.createElement("div", { className: "uxf-typo-caption truncate text-darkLow" }, props.roles)),
-            react_1.default.createElement("div", { className: "ml-auto" }, hasSubmenu && (react_1.default.createElement(icon_1.Icon, { name: "caretDown", size: 16, className: `ml-2 ${!isSubmenuOpen ? "-rotate-90" : ""}` })))),
-        isSubmenuOpen && (react_1.default.createElement("div", { className: "mt-4" }, props.submenu.map((item, index) => (react_1.default.createElement(list_item_1.ListItem, { label: item.title, route: item.route, params: item.routeParams, icon: item.icon, key: index })))))));
+    return (react_1.default.createElement("div", { className: `uxf-cms-user-menu ${isSubmenuOpen ? classes_1.CLASSES.IS_OPEN : ""}` },
+        react_1.default.createElement("button", { className: "uxf-cms-user-menu__button", onClick: toggle },
+            react_1.default.createElement(avatar_1.Avatar, { className: "uxf-cms-user-menu__avatar", letters: (0, get_avatar_user_letters_1.getAvatarUserLetters)(props.name), size: "sm", src: props.avatar, variant: "rounded" }),
+            react_1.default.createElement("div", { className: "uxf-cms-user-menu__label-wrapper" },
+                react_1.default.createElement("div", { className: "uxf-cms-user-menu__name" }, props.name),
+                react_1.default.createElement("div", { className: "uxf-cms-user-menu__roles" }, props.roles)),
+            react_1.default.createElement("div", { className: "uxf-cms-user-menu__caret-wrapper" }, hasSubmenu && (react_1.default.createElement(icon_1.Icon, { name: "caretDown", size: 16, className: `uxf-cms-user-menu__caret ${!isSubmenuOpen ? classes_1.CLASSES.IS_OPEN : ""}` })))),
+        isSubmenuOpen && (react_1.default.createElement("div", { className: "uxf-cms-user-menu__sub-menu" }, props.submenu.map((item, index) => (react_1.default.createElement(list_item_1.ListItem, { endElement: item.endElement, href: item.url, label: item.title, route: item.route, params: item.routeParams, icon: item.icon, key: index })))))));
 };
 const UserMenu = (props) => {
     var _a, _b, _c, _d, _e, _f;
-    // eslint-disable-next-line react/destructuring-assignment
-    const { menu } = props;
-    const userMenu = menu.find((item) => !!item.userMenuData);
+    const userMenu = props.menu.find((item) => !!item.userMenuData);
     return (react_1.default.createElement(Component, { submenu: (_a = userMenu === null || userMenu === void 0 ? void 0 : userMenu.children) !== null && _a !== void 0 ? _a : [], name: (_c = (_b = userMenu === null || userMenu === void 0 ? void 0 : userMenu.userMenuData) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : "Uživatel", roles: (_e = (_d = userMenu === null || userMenu === void 0 ? void 0 : userMenu.userMenuData) === null || _d === void 0 ? void 0 : _d.roles) !== null && _e !== void 0 ? _e : "nepřihlášený", avatar: (_f = userMenu === null || userMenu === void 0 ? void 0 : userMenu.userMenuData) === null || _f === void 0 ? void 0 : _f.avatar }));
 };
 exports.UserMenu = UserMenu;