@codebit-programando-solucoes/codebit-web-antd 1.1.45 → 1.1.47

package/dist/components/LoggedMainContainer.d.ts

@@ -4,6 +4,8 @@ import * as React from 'react';
 export interface LoggedMainContainerProps {
     /** Content to render in the main area */
     children: React.ReactNode;
+    /** Viewport width (px) below which the layout switches to the mobile drawer/header. Defaults to `768`. */
+    mobileBreakpoint?: number;
 }
 
 /**
@@ -17,7 +19,7 @@ export interface LoggedMainContainerProps {
  * - Role‑based menu filtering
  * - User logout functionality
  * - Application version display
- * - Header user-profile avatar/dropdown (see `UserMenu`), built from the `userMenuItems` config function
+ * - A `headerExtra` slot occupying the header's entire right-hand side — the host app composes its own theme toggle, user menu, etc. there (see `ThemeToggle`, `UserMenu`)
  *
  * This component must be used within a `CodebitConfigProvider` and `CodebitThemeContext` context to access configuration such as menu items, user data, and theme settings.
  *

package/dist/contexts/CodebitConfigContext.d.ts

@@ -62,21 +62,20 @@ export interface CodebitConfigContextType {
     /** Function that returns menu items configuration for items displayed above the logout button in the bottom menu. */
     bottomMenuItems?: (user?: LoggedUser) => MenuItem[];
     /**
-     * Function that returns menu items configuration for the header user-menu dropdown (opened by clicking the user avatar next to the theme toggle). Takes an optional
-     * `LoggedUser` object as parameter and returns an array of `MenuItem` objects. Clicks on these items invoke `onMenuClick` with the item's key, but — unlike
-     * `menuItems`/`bottomMenuItems` — never trigger the built-in navigation/logout behavior; the host application is fully responsible for reacting to the click (e.g. opening a
-     * modal).
+     * Renders the entire right-hand side of the header (where the theme toggle and user menu used to be hardcoded). Receives the current `LoggedUser` and returns whatever the host
+     * application wants there — typically `<ThemeToggle />`, a `<UserMenu />` built from its own items/click handling, and any app-specific controls, composed together. The
+     * library no longer assembles this area itself; `ThemeToggle` and `UserMenu` remain exported so the host app can reuse them.
      */
-    userMenuItems?: (user?: LoggedUser) => MenuItem[];
+    headerExtra?: (user?: LoggedUser) => React.ReactNode;
     /**
-     * Function invoked when a menu item is clicked. Receives the item's key.
-     *
-     * For clicks originating from `menuItems`/`bottomMenuItems` (sidebar navigation), the return value controls the built-in behavior:
+     * Function invoked when a menu item is clicked. Receives the item's key. Only covers `menuItems`/`bottomMenuItems` (sidebar navigation) clicks — the return value controls the
+     * built-in behavior:
      *
      * - Returning **`false`** cancels the internal action (navigation or logout).
      * - Returning **`true`** (or any other truthy value) lets the internal processing continue as usual.
      *
-     * For clicks originating from `userMenuItems` (header user-menu dropdown), there is no built-in action to cancel — the return value is ignored for these clicks.
+     * Clicks inside `headerExtra`'s content (e.g. a `UserMenu` composed there) are entirely the host application's responsibility — they don't go through this callback unless the
+     * host app chooses to wire it up that way itself.
      */
     onMenuClick?: (key: string) => boolean;
 }
@@ -97,24 +96,19 @@ export interface CodebitConfigProviderProps {
     secondarySidebarWidth?: number;
     /** Function that returns bottom‑menu items. */
     bottomMenuItems?: (user?: LoggedUser) => MenuItem[];
-    /**
-     * Function that returns items for the header user-menu dropdown (e.g. a "Minhas preferências" entry). Clicks on these items invoke `onMenuClick` but never trigger the
-     * built-in navigation/logout behavior — the host application is fully responsible for reacting to the click (e.g. opening a modal).
-     */
-    userMenuItems?: (user?: LoggedUser) => MenuItem[];
+    /** Renders the entire right-hand side of the header. See {@link CodebitConfigContextType.headerExtra} — same contract, this is just the prop the host app passes in. */
+    headerExtra?: (user?: LoggedUser) => React.ReactNode;
     /** Function to handle user logout. */
     doLogout: () => Promise<void>;
     /** Function to check login status and return user data. */
     checkLogin: () => Promise<any | null>;
     /**
-     * Callback executed when a menu item is clicked. Receives the item's key.
-     *
-     * For `menuItems`/`bottomMenuItems` clicks (sidebar navigation):
+     * Callback executed when a menu item is clicked. Receives the item's key. Only covers `menuItems`/`bottomMenuItems` (sidebar navigation) clicks:
      *
      * - Return **`false`** to **prevent** the default internal handling (navigation, logout, etc.).
      * - Return **`true`** (or any truthy value) to allow the default processing to proceed.
      *
-     * For `userMenuItems` clicks (header user-menu dropdown), the return value is ignored — there is no default action to prevent.
+     * Clicks inside `headerExtra`'s content are not routed through this callback automatically — wire that up yourself if you want to reuse the same handler.
      */
     onMenuClick?: (key: string) => boolean;
 }

package/dist/index.cjs

@@ -620,7 +620,7 @@ var __webpack_exports__ = {};
     const codebit_web_namespaceObject = require("@codebit-programando-solucoes/codebit-web");
     const logger = new codebit_web_namespaceObject.Logger('CodebitConfigContext');
     const CodebitConfigContext = /*#__PURE__*/ (0, external_react_.createContext)(null);
-    function CodebitConfigProvider({ children, menuItems, version = '1.0', showVersion = ()=>true, secondarySidebar, secondarySidebarWidth = 280, bottomMenuItems, userMenuItems, doLogout, checkLogin, onMenuClick }) {
+    function CodebitConfigProvider({ children, menuItems, version = '1.0', showVersion = ()=>true, secondarySidebar, secondarySidebarWidth = 280, bottomMenuItems, headerExtra, doLogout, checkLogin, onMenuClick }) {
         const [isLogged, setIsLogged] = (0, external_react_.useState)(null);
         const [user, setUser] = (0, external_react_.useState)(null);
         const logout = async ()=>{
@@ -665,7 +665,7 @@ var __webpack_exports__ = {};
                 secondarySidebar,
                 secondarySidebarWidth,
                 bottomMenuItems,
-                userMenuItems,
+                headerExtra,
                 onMenuClick
             }), [
             menuItems,
@@ -676,7 +676,7 @@ var __webpack_exports__ = {};
             secondarySidebar,
             secondarySidebarWidth,
             bottomMenuItems,
-            userMenuItems,
+            headerExtra,
             onMenuClick
         ]);
         return /*#__PURE__*/ (0, jsx_runtime.jsx)(CodebitConfigContext.Provider, {
@@ -692,7 +692,7 @@ var __webpack_exports__ = {};
         secondarySidebar: external_prop_types_default().func,
         secondarySidebarWidth: external_prop_types_default().number,
         bottomMenuItems: external_prop_types_default().func,
-        userMenuItems: external_prop_types_default().func,
+        headerExtra: external_prop_types_default().func,
         doLogout: external_prop_types_default().func.isRequired,
         checkLogin: external_prop_types_default().func.isRequired,
         onMenuClick: external_prop_types_default().func
@@ -878,21 +878,26 @@ var __webpack_exports__ = {};
         }),
         fontFamily: external_prop_types_default().string
     };
-    const ThemeToggle = ()=>{
-        const config = (0, external_react_.useContext)(CodebitThemeContext);
-        if (!config) throw new Error('ThemeToggle must be used within CodebitThemeContext');
-        (0, external_react_.useEffect)(()=>{
-            document.documentElement.style.colorScheme = config.isDarkMode ? 'dark' : 'light';
-        }, [
-            config.isDarkMode
-        ]);
-        return /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Switch, {
-            theme: config.isDarkMode ? 'dark' : 'light',
-            checked: config.isDarkMode,
-            onChange: (value)=>config.setIsDarkMode(value),
-            checkedChildren: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.MoonOutlined, {}),
-            unCheckedChildren: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.SunOutlined, {})
-        });
+    const LoggedMainContainer_module = {
+        layout: "layout-mL5o6I",
+        drawer: "drawer-oj0mJX",
+        drawerBody: "drawerBody-YtAN37",
+        drawerFlex: "drawerFlex-AGTAax",
+        sider: "sider-BDy1Bs",
+        siderLayout: "siderLayout-C8H0uI",
+        secondarySidebar: "secondarySidebar-P6J_Xn",
+        menu: "menu-KMvPt7",
+        menuContainer: "menuContainer-ahnhBu",
+        menuLabel: "menuLabel-csBJTc",
+        menuDescription: "menuDescription-d6BFBO",
+        menuSpacer: "menuSpacer-RIB3II",
+        versionMenu: "versionMenu-NM4uyG",
+        bottomMenu: "bottomMenu-VtOktS",
+        header: "header-vgc67L",
+        mobile: "mobile-mKGxb5",
+        secondarySidebarTrigger: "secondarySidebarTrigger-dD6WGB",
+        headerSpace: "headerSpace-Fd_iha",
+        content: "content-OZHp2h"
     };
     const external_react_i18next_namespaceObject = require("react-i18next");
     const external_i18next_namespaceObject = require("i18next");
@@ -916,157 +921,7 @@ var __webpack_exports__ = {};
     const useCodebitWebAntdTranslation = ()=>(0, external_react_i18next_namespaceObject.useTranslation)('codebitWebAntd', {
             i18n: i18n
         });
-    const UserMenu_module = {
-        trigger: "trigger-tlcps4",
-        avatar: "avatar-Tmnqa_",
-        caret: "caret-OWS8_0",
-        panel: "panel-GCcfCo",
-        userInfo: "userInfo-fDuDn1",
-        userName: "userName-sIs1iq",
-        userSubtitle: "userSubtitle-Fflhaw",
-        divider: "divider-JJjJVy",
-        menu: "menu-cuORr_"
-    };
-    const OPEN_KEYS = new Set([
-        'Enter',
-        ' '
-    ]);
-    const { Text } = external_antd_namespaceObject.Typography;
-    function getInitials(name) {
-        const parts = name?.trim().split(/\s+/).filter(Boolean) ?? [];
-        if (0 === parts.length) return '';
-        const first = [
-            ...parts[0]
-        ];
-        if (1 === parts.length) return first.slice(0, 2).join('').toUpperCase();
-        const last = [
-            ...parts.at(-1)
-        ];
-        return `${first[0]}${last[0]}`.toUpperCase();
-    }
-    function UserMenuPanel({ user, items, onItemClick }) {
-        return /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
-            className: UserMenu_module.panel,
-            children: [
-                /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
-                    className: UserMenu_module.userInfo,
-                    children: [
-                        /*#__PURE__*/ (0, jsx_runtime.jsx)(Text, {
-                            className: UserMenu_module.userName,
-                            strong: true,
-                            children: user?.name
-                        }),
-                        user?.subtitle && /*#__PURE__*/ (0, jsx_runtime.jsx)(Text, {
-                            className: UserMenu_module.userSubtitle,
-                            type: 'secondary',
-                            children: user.subtitle
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Divider, {
-                    className: UserMenu_module.divider
-                }),
-                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Menu, {
-                    className: UserMenu_module.menu,
-                    items: items,
-                    onClick: ({ key })=>onItemClick?.(key)
-                })
-            ]
-        });
-    }
-    UserMenuPanel.propTypes = {
-        user: external_prop_types_default().shape({
-            name: external_prop_types_default().string,
-            subtitle: external_prop_types_default().string
-        }),
-        items: external_prop_types_default().arrayOf(external_prop_types_default().object).isRequired,
-        onItemClick: external_prop_types_default().func
-    };
-    function createPopupRender(user, items, onItemClick) {
-        return ()=>/*#__PURE__*/ (0, jsx_runtime.jsx)(UserMenuPanel, {
-                user: user,
-                items: items,
-                onItemClick: onItemClick
-            });
-    }
-    function UserMenu({ user, items = [], onItemClick, caretIcon = /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.DownOutlined, {}) }) {
-        const { t } = useCodebitWebAntdTranslation();
-        const [open, setOpen] = (0, external_react_.useState)(false);
-        const initials = getInitials(user?.name);
-        const handleItemClick = (key)=>{
-            setOpen(false);
-            onItemClick?.(key);
-        };
-        const avatar = /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Avatar, {
-            className: UserMenu_module.avatar,
-            children: initials || /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.UserOutlined, {})
-        });
-        if (!items.length) return avatar;
-        return /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Dropdown, {
-            trigger: [
-                'click'
-            ],
-            open: open,
-            onOpenChange: setOpen,
-            placement: 'bottomRight',
-            popupRender: createPopupRender(user, items, handleItemClick),
-            children: /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Space, {
-                className: UserMenu_module.trigger,
-                role: 'button',
-                tabIndex: 0,
-                "aria-haspopup": 'menu',
-                "aria-expanded": open,
-                "aria-label": t('UserMenu.openMenu'),
-                onKeyDown: (event)=>{
-                    if (!OPEN_KEYS.has(event.key)) return;
-                    event.preventDefault();
-                    setOpen((wasOpen)=>!wasOpen);
-                },
-                children: [
-                    avatar,
-                    /*#__PURE__*/ (0, jsx_runtime.jsx)("span", {
-                        className: UserMenu_module.caret,
-                        children: caretIcon
-                    })
-                ]
-            })
-        });
-    }
-    UserMenu.propTypes = {
-        user: external_prop_types_default().shape({
-            name: external_prop_types_default().string,
-            email: external_prop_types_default().string,
-            id: external_prop_types_default().string,
-            roles: external_prop_types_default().arrayOf(external_prop_types_default().string),
-            subtitle: external_prop_types_default().string
-        }),
-        items: external_prop_types_default().arrayOf(external_prop_types_default().object),
-        onItemClick: external_prop_types_default().func,
-        caretIcon: external_prop_types_default().node
-    };
-    const LoggedMainContainer_module = {
-        layout: "layout-mL5o6I",
-        drawer: "drawer-oj0mJX",
-        drawerBody: "drawerBody-YtAN37",
-        drawerFlex: "drawerFlex-AGTAax",
-        sider: "sider-BDy1Bs",
-        siderLayout: "siderLayout-C8H0uI",
-        secondarySidebar: "secondarySidebar-P6J_Xn",
-        menu: "menu-KMvPt7",
-        menuContainer: "menuContainer-ahnhBu",
-        menuLabel: "menuLabel-csBJTc",
-        menuDescription: "menuDescription-d6BFBO",
-        menuSpacer: "menuSpacer-RIB3II",
-        versionMenu: "versionMenu-NM4uyG",
-        bottomMenu: "bottomMenu-VtOktS",
-        header: "header-vgc67L",
-        mobile: "mobile-mKGxb5",
-        headerSpace: "headerSpace-Fd_iha",
-        headerDivider: "headerDivider-yfEwNN",
-        content: "content-OZHp2h"
-    };
     const { Header, Sider, Content } = external_antd_namespaceObject.Layout;
-    const { Text: LoggedMainContainer_Text } = external_antd_namespaceObject.Typography;
     const MENU_KEY_APP_LOGOUT = 'app-logout';
     function filterMenuItemsByRole(items, user) {
         return items.filter((item)=>{
@@ -1075,7 +930,7 @@ var __webpack_exports__ = {};
             return item.roles.some((role)=>user.roles.includes(role));
         });
     }
-    function LoggedMainContainer({ children }) {
+    function LoggedMainContainer({ children, mobileBreakpoint = 768 }) {
         const [collapsed, setCollapsed] = (0, external_react_.useState)(true);
         const [isMobile, setIsMobile] = (0, external_react_.useState)(false);
         const [drawerVisible, setDrawerVisible] = (0, external_react_.useState)(false);
@@ -1086,7 +941,7 @@ var __webpack_exports__ = {};
         const navigate = (0, external_react_router_namespaceObject.useNavigate)();
         const location = (0, external_react_router_namespaceObject.useLocation)();
         if (!configCodebit || !configTheme) throw new Error('LoggedContainer must be used within CodebitConfigProvider and CodebitThemeContext');
-        const { logout, user, menuItems, version, showVersion, secondarySidebar, secondarySidebarWidth = 280, bottomMenuItems, userMenuItems, onMenuClick } = configCodebit;
+        const { logout, user, menuItems, version, showVersion, secondarySidebar, secondarySidebarWidth = 280, bottomMenuItems, headerExtra, onMenuClick } = configCodebit;
         const { isDarkMode } = configTheme;
         const theme = isDarkMode ? 'dark' : 'light';
         const allMenuItems = (0, external_react_.useMemo)(()=>[
@@ -1108,13 +963,6 @@ var __webpack_exports__ = {};
             bottomMenuItems,
             user
         ]);
-        const filteredUserMenuItems = (0, external_react_.useMemo)(()=>{
-            if (!userMenuItems) return [];
-            return filterMenuItemsByRole(userMenuItems(user), user);
-        }, [
-            userMenuItems,
-            user
-        ]);
         const memoizedBottomMenuItems = (0, external_react_.useMemo)(()=>[
                 ...filteredBottomMenuItems,
                 {
@@ -1166,11 +1014,6 @@ var __webpack_exports__ = {};
             isMobile,
             setDrawerVisible
         ]);
-        const handleUserMenuItemClick = (0, external_react_.useCallback)((key)=>{
-            onMenuClick?.(key);
-        }, [
-            onMenuClick
-        ]);
         const primaryMenu = (0, external_react_.useMemo)(()=>/*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Menu, {
                 theme: theme,
                 mode: 'inline',
@@ -1187,11 +1030,13 @@ var __webpack_exports__ = {};
             handleMenuClick
         ]);
         (0, external_react_.useEffect)(()=>{
-            const checkScreenSize = ()=>setIsMobile(window.innerWidth < 768);
+            const checkScreenSize = ()=>setIsMobile(window.innerWidth < mobileBreakpoint);
             checkScreenSize();
             window.addEventListener('resize', checkScreenSize);
             return ()=>window.removeEventListener('resize', checkScreenSize);
-        }, []);
+        }, [
+            mobileBreakpoint
+        ]);
         const menuContent = /*#__PURE__*/ (0, jsx_runtime.jsxs)(jsx_runtime.Fragment, {
             children: [
                 primaryMenu,
@@ -1282,40 +1127,29 @@ var __webpack_exports__ = {};
                         /*#__PURE__*/ (0, jsx_runtime.jsxs)(Header, {
                             className: `${LoggedMainContainer_module.header} ${isMobile ? LoggedMainContainer_module.mobile : ''}`,
                             children: [
-                                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Space, {
-                                    children: isMobile ? /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Button, {
-                                        type: 'text',
-                                        icon: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.MenuOutlined, {}),
-                                        onClick: ()=>setDrawerVisible(true)
-                                    }) : /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Button, {
-                                        type: 'text',
-                                        icon: collapsed ? /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.MenuUnfoldOutlined, {}) : /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.MenuFoldOutlined, {}),
-                                        onClick: ()=>setCollapsed(!collapsed)
-                                    })
-                                }),
                                 /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Space, {
-                                    size: isMobile ? 'small' : 'middle',
-                                    className: `${LoggedMainContainer_module.headerSpace} ${isMobile ? LoggedMainContainer_module.mobile : ''}`,
                                     children: [
+                                        isMobile ? /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Button, {
+                                            type: 'text',
+                                            icon: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.MenuOutlined, {}),
+                                            onClick: ()=>setDrawerVisible(true)
+                                        }) : /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Button, {
+                                            type: 'text',
+                                            icon: collapsed ? /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.MenuUnfoldOutlined, {}) : /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.MenuFoldOutlined, {}),
+                                            onClick: ()=>setCollapsed(!collapsed)
+                                        }),
                                         secondarySidebar && isMobile && /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Button, {
                                             type: 'text',
                                             icon: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.WechatOutlined, {}),
+                                            className: LoggedMainContainer_module.secondarySidebarTrigger,
                                             onClick: ()=>setSecondarySidebarDrawerVisible(true)
-                                        }),
-                                        !isMobile && /*#__PURE__*/ (0, jsx_runtime.jsx)(LoggedMainContainer_Text, {
-                                            children: t('LoggedMainContainer.theme')
-                                        }),
-                                        /*#__PURE__*/ (0, jsx_runtime.jsx)(ThemeToggle, {}),
-                                        /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Divider, {
-                                            type: 'vertical',
-                                            className: LoggedMainContainer_module.headerDivider
-                                        }),
-                                        /*#__PURE__*/ (0, jsx_runtime.jsx)(UserMenu, {
-                                            user: user,
-                                            items: filteredUserMenuItems,
-                                            onItemClick: handleUserMenuItemClick
                                         })
                                     ]
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Space, {
+                                    size: isMobile ? 'small' : 'middle',
+                                    className: `${LoggedMainContainer_module.headerSpace} ${isMobile ? LoggedMainContainer_module.mobile : ''}`,
+                                    children: headerExtra?.(user)
                                 })
                             ]
                         }),
@@ -1329,7 +1163,152 @@ var __webpack_exports__ = {};
         });
     }
     LoggedMainContainer.propTypes = {
-        children: external_prop_types_default().node.isRequired
+        children: external_prop_types_default().node.isRequired,
+        mobileBreakpoint: external_prop_types_default().number
+    };
+    const ThemeToggle = ()=>{
+        const config = (0, external_react_.useContext)(CodebitThemeContext);
+        if (!config) throw new Error('ThemeToggle must be used within CodebitThemeContext');
+        (0, external_react_.useEffect)(()=>{
+            document.documentElement.style.colorScheme = config.isDarkMode ? 'dark' : 'light';
+        }, [
+            config.isDarkMode
+        ]);
+        return /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Switch, {
+            theme: config.isDarkMode ? 'dark' : 'light',
+            checked: config.isDarkMode,
+            onChange: (value)=>config.setIsDarkMode(value),
+            checkedChildren: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.MoonOutlined, {}),
+            unCheckedChildren: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.SunOutlined, {})
+        });
+    };
+    const UserMenu_module = {
+        trigger: "trigger-tlcps4",
+        avatar: "avatar-Tmnqa_",
+        caret: "caret-OWS8_0",
+        panel: "panel-GCcfCo",
+        userInfo: "userInfo-fDuDn1",
+        userName: "userName-sIs1iq",
+        userSubtitle: "userSubtitle-Fflhaw",
+        divider: "divider-JJjJVy",
+        menu: "menu-cuORr_"
+    };
+    const OPEN_KEYS = new Set([
+        'Enter',
+        ' '
+    ]);
+    const { Text } = external_antd_namespaceObject.Typography;
+    function getInitials(name) {
+        const parts = name?.trim().split(/\s+/).filter(Boolean) ?? [];
+        if (0 === parts.length) return '';
+        const first = [
+            ...parts[0]
+        ];
+        if (1 === parts.length) return first.slice(0, 2).join('').toUpperCase();
+        const last = [
+            ...parts.at(-1)
+        ];
+        return `${first[0]}${last[0]}`.toUpperCase();
+    }
+    function UserMenuPanel({ user, items, onItemClick }) {
+        return /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
+            className: UserMenu_module.panel,
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
+                    className: UserMenu_module.userInfo,
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime.jsx)(Text, {
+                            className: UserMenu_module.userName,
+                            strong: true,
+                            children: user?.name
+                        }),
+                        user?.subtitle && /*#__PURE__*/ (0, jsx_runtime.jsx)(Text, {
+                            className: UserMenu_module.userSubtitle,
+                            type: 'secondary',
+                            children: user.subtitle
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Divider, {
+                    className: UserMenu_module.divider
+                }),
+                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Menu, {
+                    className: UserMenu_module.menu,
+                    items: items,
+                    onClick: ({ key })=>onItemClick?.(key)
+                })
+            ]
+        });
+    }
+    UserMenuPanel.propTypes = {
+        user: external_prop_types_default().shape({
+            name: external_prop_types_default().string,
+            subtitle: external_prop_types_default().string
+        }),
+        items: external_prop_types_default().arrayOf(external_prop_types_default().object).isRequired,
+        onItemClick: external_prop_types_default().func
+    };
+    function createPopupRender(user, items, onItemClick) {
+        return ()=>/*#__PURE__*/ (0, jsx_runtime.jsx)(UserMenuPanel, {
+                user: user,
+                items: items,
+                onItemClick: onItemClick
+            });
+    }
+    function UserMenu({ user, items = [], onItemClick, caretIcon = /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.DownOutlined, {}) }) {
+        const { t } = useCodebitWebAntdTranslation();
+        const [open, setOpen] = (0, external_react_.useState)(false);
+        const initials = getInitials(user?.name);
+        const handleItemClick = (key)=>{
+            setOpen(false);
+            onItemClick?.(key);
+        };
+        const avatar = /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Avatar, {
+            className: UserMenu_module.avatar,
+            children: initials || /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.UserOutlined, {})
+        });
+        if (!items.length) return avatar;
+        return /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Dropdown, {
+            trigger: [
+                'click'
+            ],
+            open: open,
+            onOpenChange: setOpen,
+            placement: 'bottomRight',
+            popupRender: createPopupRender(user, items, handleItemClick),
+            children: /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Space, {
+                className: UserMenu_module.trigger,
+                role: 'button',
+                tabIndex: 0,
+                "aria-haspopup": 'menu',
+                "aria-expanded": open,
+                "aria-label": t('UserMenu.openMenu'),
+                onKeyDown: (event)=>{
+                    if (!OPEN_KEYS.has(event.key)) return;
+                    event.preventDefault();
+                    setOpen((wasOpen)=>!wasOpen);
+                },
+                children: [
+                    avatar,
+                    /*#__PURE__*/ (0, jsx_runtime.jsx)("span", {
+                        className: UserMenu_module.caret,
+                        children: caretIcon
+                    })
+                ]
+            })
+        });
+    }
+    UserMenu.propTypes = {
+        user: external_prop_types_default().shape({
+            name: external_prop_types_default().string,
+            email: external_prop_types_default().string,
+            id: external_prop_types_default().string,
+            roles: external_prop_types_default().arrayOf(external_prop_types_default().string),
+            subtitle: external_prop_types_default().string
+        }),
+        items: external_prop_types_default().arrayOf(external_prop_types_default().object),
+        onItemClick: external_prop_types_default().func,
+        caretIcon: external_prop_types_default().node
     };
     function useErrorMessage() {
         const { t } = useCodebitWebAntdTranslation();

package/dist/index.css

@@ -13,61 +13,6 @@ html.dark-theme {
   height: 100dvh !important;
 }
 
-.trigger-tlcps4 {
-  cursor: pointer;
-}
-
-.avatar-Tmnqa_ {
-  background: var(--antd-color-primary);
-  flex-shrink: 0;
-}
-
-.caret-OWS8_0 {
-  color: var(--antd-color-text-secondary);
-  font-size: var(--antd-font-size-xs);
-}
-
-.panel-GCcfCo {
-  background: var(--antd-color-bg-elevated);
-  border: 1px solid var(--antd-color-border-secondary);
-  border-radius: var(--antd-border-radius-lg);
-  min-width: 200px;
-  max-width: 280px;
-  box-shadow: var(--antd-shadow-lg);
-  flex-direction: column;
-  display: flex;
-  overflow: hidden;
-}
-
-.userInfo-fDuDn1 {
-  padding: var(--antd-padding-xs) var(--antd-padding-sm);
-  gap: var(--antd-margin-xxs);
-  flex-direction: column;
-  display: flex;
-}
-
-.userName-sIs1iq {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.userSubtitle-Fflhaw {
-  font-size: var(--antd-font-size-sm);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.divider-JJjJVy {
-  margin: 0;
-}
-
-.menu-cuORr_ {
-  background: none;
-  border-inline-end: none;
-}
-
 .layout-mL5o6I {
   height: 100vh;
   position: fixed;
@@ -158,6 +103,7 @@ html.dark-theme {
   background: none;
   justify-content: space-between;
   align-items: center;
+  gap: 0;
   display: flex;
 }
 
@@ -166,18 +112,21 @@ html.dark-theme {
   height: var(--antd-control-height-lg);
 }
 
+.secondarySidebarTrigger-dD6WGB {
+  margin-right: var(--antd-padding-xs);
+}
+
 .headerSpace-Fd_iha {
   gap: var(--antd-margin);
+  min-width: 0;
 }
 
-.headerSpace-Fd_iha.mobile-mKGxb5 {
-  gap: var(--antd-margin-xs);
+.headerSpace-Fd_iha .ant-space-item {
+  min-width: 0;
 }
 
-.headerDivider-yfEwNN {
-  height: var(--antd-control-height-sm);
-  border-color: var(--antd-color-split);
-  margin: 0;
+.headerSpace-Fd_iha.mobile-mKGxb5 {
+  gap: var(--antd-margin-xs);
 }
 
 .content-OZHp2h {
@@ -185,6 +134,68 @@ html.dark-theme {
   position: relative;
 }
 
+.trigger-tlcps4 {
+  cursor: pointer;
+}
+
+.avatar-Tmnqa_ {
+  background: var(--antd-color-primary);
+  flex-shrink: 0;
+}
+
+.caret-OWS8_0 {
+  color: var(--antd-color-text-secondary);
+  font-size: var(--antd-font-size-xs);
+}
+
+.panel-GCcfCo {
+  background: var(--antd-color-bg-elevated);
+  border: 1px solid var(--antd-color-border-secondary);
+  border-radius: var(--antd-border-radius-lg);
+  min-width: 200px;
+  max-width: 280px;
+  box-shadow: var(--antd-shadow-lg);
+  flex-direction: column;
+  display: flex;
+  overflow: hidden;
+}
+
+.userInfo-fDuDn1 {
+  padding: var(--antd-padding-xs) var(--antd-padding-sm);
+  gap: var(--antd-margin-xxs);
+  flex-direction: column;
+  display: flex;
+}
+
+.userName-sIs1iq {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.userSubtitle-Fflhaw {
+  font-size: var(--antd-font-size-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.divider-JJjJVy {
+  margin: 0;
+}
+
+.menu-cuORr_ {
+  background: none;
+  border-inline-end: none;
+}
+
+.menu-cuORr_ .ant-dropdown-menu-title-content {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  overflow: hidden;
+}
+
 .listCard-ISftFd {
   width: 100%;
   height: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codebit-programando-solucoes/codebit-web-antd",
-  "version": "1.1.45",
+  "version": "1.1.47",
   "main": "./dist/index.cjs",
   "type": "module",
   "types": "./src/index.d.ts",