@topconsultnpm/sdkui-react 6.21.0-dev4.5 → 6.21.0-dev4.6

package/lib/components/NewComponents/ContextMenu/TMContextMenu.js

@@ -395,26 +395,31 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
             ];
         });
     };
-    // Caps overflowing submenus with max-height + scroll so every item stays reachable.
     useLayoutEffect(() => {
         if (hoveredSubmenus.length === 0)
             return;
-        const padding = 8;
-        const submenus = document.querySelectorAll('[data-submenu="true"]');
-        submenus.forEach(el => {
-            const rect = el.getBoundingClientRect();
-            const overflowsTop = rect.top < padding;
-            const overflowsBottom = rect.bottom > window.innerHeight - padding;
-            if (!overflowsTop && !overflowsBottom)
-                return;
-            const available = overflowsTop
-                ? rect.bottom - padding
-                : window.innerHeight - rect.top - padding;
-            const newMax = Math.max(80, available);
-            el.style.maxHeight = `${newMax}px`;
-            el.style.overflowY = 'auto';
-            el.style.overflowX = 'hidden';
-        });
+        const capSubmenus = () => {
+            const padding = 8;
+            const submenus = document.querySelectorAll('[data-submenu="true"]');
+            submenus.forEach(el => {
+                el.style.maxHeight = '';
+                el.style.overflowY = '';
+                el.style.overflowX = '';
+                const rect = el.getBoundingClientRect();
+                const opensUp = el.dataset.openUp === 'true';
+                const available = opensUp
+                    ? rect.bottom - padding
+                    : window.innerHeight - rect.top - padding;
+                if (rect.height <= available)
+                    return;
+                el.style.maxHeight = `${Math.max(80, available)}px`;
+                el.style.overflowY = 'auto';
+                el.style.overflowX = 'hidden';
+            });
+        };
+        capSubmenus();
+        window.addEventListener('resize', capSubmenus);
+        return () => window.removeEventListener('resize', capSubmenus);
     }, [hoveredSubmenus]);
     const handleMouseLeave = (depth = 0) => {
         if (isMobile)
@@ -495,6 +500,6 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
                     // display: 'inline-block',
                     WebkitTouchCallout: isIOS ? 'none' : undefined,
                     WebkitUserSelect: isIOS ? 'none' : undefined,
-                }, children: children })), menuState.visible && createPortal(_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, "$needsScroll": needsScroll, "$maxHeight": maxHeight, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }), document.body)] }));
+                }, children: children })), menuState.visible && createPortal(_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, "$needsScroll": needsScroll, "$maxHeight": maxHeight, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", "data-open-up": submenu.openUp ? 'true' : 'false', onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }), document.body)] }));
 };
 export default TMContextMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.21.0-dev4.5",
+    "version": "6.21.0-dev4.6",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",