@codebit-programando-solucoes/codebit-web-antd 1.1.49 → 1.1.51

package/dist/components/UserMenu.d.ts

@@ -11,12 +11,21 @@ export interface UserMenuProps {
     onItemClick?: (key: string) => void;
     /** Icon shown next to the avatar to indicate the dropdown affordance. Defaults to `<DownOutlined />`. */
     caretIcon?: ReactNode;
+    /**
+     * How items carrying `children` are rendered. `'submenu'` keeps Ant Design's sideways flyout; `'group'` renders them inline, inside the panel's own scroll container; `'auto'`
+     * (the default) picks `'group'` on touch devices, where a flyout has neither the horizontal room nor a reliable hover to open on. A `disabled` parent always stays a submenu,
+     * since that is what keeps its children unreachable.
+     */
+    nestedItemsMode?: 'auto' | 'group' | 'submenu';
 }
 
 /**
  * Header user-profile control. Renders the current user's avatar and, when `items` is non-empty, a dropdown showing the user's name/subtitle followed by the given menu items (e.g.
  * a "Minhas preferências" entry supplied by the host application).
  *
+ * The dropdown is given a real height budget: the popup is measured against the room left under the trigger when it opens, and the item list becomes the one scrolling region
+ * inside it, so a long menu stays fully reachable on a phone instead of running off the bottom of the screen.
+ *
  * @param props - Component props
  * @returns React.JSX.Element - Avatar, optionally wrapped in a Dropdown
  * @component

package/dist/index.cjs

@@ -779,6 +779,7 @@ var __webpack_exports__ = {};
                 document.documentElement.classList.remove('dark-theme');
                 target.classList.remove('dark-theme');
             }
+            document.documentElement.style.colorScheme = isDarkMode ? 'dark' : 'light';
             document.documentElement.style.setProperty('--color-primary', resolvedColors.primary[isDarkMode ? 'dark' : 'light']);
         }, [
             isDarkMode,
@@ -1169,11 +1170,6 @@ var __webpack_exports__ = {};
     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,
@@ -1186,17 +1182,23 @@ var __webpack_exports__ = {};
         trigger: "trigger-tlcps4",
         avatar: "avatar-Tmnqa_",
         caret: "caret-OWS8_0",
+        popupRoot: "popupRoot-MxWPmX",
         panel: "panel-GCcfCo",
+        divider: "divider-JJjJVy",
         userInfo: "userInfo-fDuDn1",
         userName: "userName-sIs1iq",
         userSubtitle: "userSubtitle-Fflhaw",
-        divider: "divider-JJjJVy",
         menu: "menu-cuORr_"
     };
     const OPEN_KEYS = new Set([
         'Enter',
         ' '
     ]);
+    const COARSE_POINTER_QUERY = '(pointer: coarse)';
+    const TRIGGER_TO_POPUP_OFFSET = 4;
+    const VIEWPORT_GUTTER = 8;
+    const MIN_POPUP_HEIGHT = 160;
+    const MAX_HEIGHT_VAR = '--codebit-user-menu-max-height';
     const { Text } = external_antd_namespaceObject.Typography;
     function getInitials(name) {
         const parts = name?.trim().split(/\s+/).filter(Boolean) ?? [];
@@ -1210,6 +1212,23 @@ var __webpack_exports__ = {};
         ];
         return `${first[0]}${last[0]}`.toUpperCase();
     }
+    function computeMaxHeight(trigger) {
+        if (!trigger) return null;
+        const viewportHeight = Math.min(document.documentElement.clientHeight, globalThis.visualViewport?.height ?? 1 / 0);
+        return Math.max(MIN_POPUP_HEIGHT, viewportHeight - trigger.getBoundingClientRect().bottom - TRIGGER_TO_POPUP_OFFSET - VIEWPORT_GUTTER);
+    }
+    function toGroupItems(items) {
+        return items.map((item)=>{
+            if (!item || 'object' != typeof item) return item;
+            if (!item.children || item.disabled) return item;
+            return {
+                key: item.key,
+                label: item.label,
+                type: 'group',
+                children: toGroupItems(item.children)
+            };
+        });
+    }
     function UserMenuPanel({ user, items, onItemClick }) {
         return /*#__PURE__*/ (0, jsx_runtime.jsxs)("div", {
             className: UserMenu_module.panel,
@@ -1255,10 +1274,48 @@ var __webpack_exports__ = {};
                 onItemClick: onItemClick
             });
     }
-    function UserMenu({ user, items = [], onItemClick, caretIcon = /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.DownOutlined, {}) }) {
+    function UserMenu({ user, items = [], onItemClick, caretIcon = /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.DownOutlined, {}), nestedItemsMode = 'auto' }) {
         const { t } = useCodebitWebAntdTranslation();
         const [open, setOpen] = (0, external_react_.useState)(false);
+        const [maxHeight, setMaxHeight] = (0, external_react_.useState)(null);
+        const [coarsePointer, setCoarsePointer] = (0, external_react_.useState)(false);
+        const triggerRef = (0, external_react_.useRef)(null);
         const initials = getInitials(user?.name);
+        (0, external_react_.useEffect)(()=>{
+            const pointerQuery = globalThis.matchMedia?.(COARSE_POINTER_QUERY);
+            if (!pointerQuery) return;
+            const syncPointer = (event)=>setCoarsePointer(event.matches);
+            setCoarsePointer(pointerQuery.matches);
+            pointerQuery.addEventListener('change', syncPointer);
+            return ()=>pointerQuery.removeEventListener('change', syncPointer);
+        }, []);
+        (0, external_react_.useEffect)(()=>{
+            if (!open) return;
+            const remeasure = ()=>setMaxHeight(computeMaxHeight(triggerRef.current));
+            const visualViewport = globalThis.visualViewport;
+            globalThis.addEventListener('resize', remeasure);
+            globalThis.addEventListener('orientationchange', remeasure);
+            visualViewport?.addEventListener('resize', remeasure);
+            return ()=>{
+                globalThis.removeEventListener('resize', remeasure);
+                globalThis.removeEventListener('orientationchange', remeasure);
+                visualViewport?.removeEventListener('resize', remeasure);
+            };
+        }, [
+            open
+        ]);
+        const resolvedItems = (0, external_react_.useMemo)(()=>{
+            const asGroups = 'group' === nestedItemsMode || 'auto' === nestedItemsMode && coarsePointer;
+            return asGroups ? toGroupItems(items) : items;
+        }, [
+            items,
+            nestedItemsMode,
+            coarsePointer
+        ]);
+        const handleOpenChange = (nextOpen)=>{
+            if (nextOpen) setMaxHeight(computeMaxHeight(triggerRef.current));
+            setOpen(nextOpen);
+        };
         const handleItemClick = (key)=>{
             setOpen(false);
             onItemClick?.(key);
@@ -1273,10 +1330,15 @@ var __webpack_exports__ = {};
                 'click'
             ],
             open: open,
-            onOpenChange: setOpen,
+            onOpenChange: handleOpenChange,
             placement: 'bottomRight',
-            popupRender: createPopupRender(user, items, handleItemClick),
+            rootClassName: UserMenu_module.popupRoot,
+            overlayStyle: null === maxHeight ? void 0 : {
+                [MAX_HEIGHT_VAR]: `${maxHeight}px`
+            },
+            popupRender: createPopupRender(user, resolvedItems, handleItemClick),
             children: /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Space, {
+                ref: triggerRef,
                 className: UserMenu_module.trigger,
                 role: 'button',
                 tabIndex: 0,
@@ -1286,7 +1348,7 @@ var __webpack_exports__ = {};
                 onKeyDown: (event)=>{
                     if (!OPEN_KEYS.has(event.key)) return;
                     event.preventDefault();
-                    setOpen((wasOpen)=>!wasOpen);
+                    handleOpenChange(!open);
                 },
                 children: [
                     avatar,
@@ -1308,7 +1370,12 @@ var __webpack_exports__ = {};
         }),
         items: external_prop_types_default().arrayOf(external_prop_types_default().object),
         onItemClick: external_prop_types_default().func,
-        caretIcon: external_prop_types_default().node
+        caretIcon: external_prop_types_default().node,
+        nestedItemsMode: external_prop_types_default().oneOf([
+            'auto',
+            'group',
+            'submenu'
+        ])
     };
     function useErrorMessage() {
         const { t } = useCodebitWebAntdTranslation();

package/dist/index.css

@@ -112,6 +112,16 @@ html.dark-theme {
   height: var(--antd-control-height-lg);
 }
 
+.header-vgc67L .ant-space {
+  height: 100%;
+}
+
+.header-vgc67L .ant-space .ant-space-item {
+  vertical-align: middle;
+  height: 100%;
+  display: inline-flex;
+}
+
 .secondarySidebarTrigger-dD6WGB {
   margin-right: var(--antd-padding-xs);
 }
@@ -130,7 +140,7 @@ html.dark-theme {
 }
 
 .content-OZHp2h {
-  padding: var(--antd-padding-xxs) var(--antd-padding) var(--antd-padding) var(--antd-padding);
+  padding: 0 var(--antd-padding-xs) var(--antd-padding-xs) var(--antd-padding-xs);
   position: relative;
 }
 
@@ -148,6 +158,10 @@ html.dark-theme {
   font-size: var(--antd-font-size-xs);
 }
 
+.popupRoot-MxWPmX.ant-dropdown {
+  max-height: calc(var(--codebit-user-menu-max-height, calc(100vh - var(--antd-control-height-lg, 40px)  - var(--antd-margin-xxs, 4px)  - var(--antd-margin-xs, 8px)))  - env(safe-area-inset-bottom, 0px));
+}
+
 .panel-GCcfCo {
   background: var(--antd-color-bg-elevated);
   border: 1px solid var(--antd-color-border-secondary);
@@ -155,15 +169,22 @@ html.dark-theme {
   min-width: 200px;
   max-width: 280px;
   box-shadow: var(--antd-shadow-lg);
+  max-height: calc(var(--codebit-user-menu-max-height, calc(100vh - var(--antd-control-height-lg, 40px)  - var(--antd-margin-xxs, 4px)  - var(--antd-margin-xs, 8px)))  - env(safe-area-inset-bottom, 0px));
   flex-direction: column;
   display: flex;
   overflow: hidden;
 }
 
+.panel-GCcfCo > .divider-JJjJVy {
+  flex-shrink: 0;
+  margin: 0;
+}
+
 .userInfo-fDuDn1 {
   padding: var(--antd-padding-xs) var(--antd-padding-sm);
   gap: var(--antd-margin-xxs);
   flex-direction: column;
+  flex-shrink: 0;
   display: flex;
 }
 
@@ -180,13 +201,13 @@ html.dark-theme {
   overflow: hidden;
 }
 
-.divider-JJjJVy {
-  margin: 0;
-}
-
 .menu-cuORr_ {
+  overscroll-behavior: contain;
   background: none;
   border-inline-end: none;
+  flex: 0 auto;
+  min-height: 0;
+  overflow-y: auto;
 }
 
 .menu-cuORr_ .ant-dropdown-menu-title-content {
@@ -196,6 +217,31 @@ html.dark-theme {
   overflow: hidden;
 }
 
+.menu-cuORr_ .ant-dropdown-menu-item-group-title {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+@media (width <= 480px) {
+  .panel-GCcfCo {
+    max-width: min(360px, 100vw - var(--antd-margin-xs, 8px)  - var(--antd-margin, 16px));
+  }
+}
+
+@media (pointer: coarse) {
+  .menu-cuORr_ .ant-dropdown-menu-item, .menu-cuORr_ .ant-dropdown-menu-submenu-title {
+    min-height: 44px;
+  }
+
+  .trigger-tlcps4 {
+    min-height: var(--antd-control-height-lg, 40px);
+    padding-inline: var(--antd-padding-xxs, 4px);
+    margin-inline: calc(var(--antd-padding-xxs, 4px) * -1);
+    align-items: center;
+  }
+}
+
 .listCard-ISftFd {
   width: 100%;
   height: 100%;

package/package.json

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