@hexure/ui 1.13.3 → 1.13.4

package/dist/cjs/index.js

@@ -736,47 +736,17 @@ const MenuWrapper = styled.div `
   display: inline-block;
 `;
 const StyledMoreMenu = styled(MoreMenu) `
-  position: absolute;
+  position: fixed;
+  top: ${props => props.$top};
+  left: ${props => props.$left};
   width: ${props => props.$menuWidth};
   max-height: ${props => props.maxHeight};
   z-index: 10;
-
-  ${props => {
-    switch (props.$position) {
-        case 'top':
-            return `
-          bottom: 100%;
-          left: 0;
-          transform: translateY(-5px); /* Adjust this value as needed */
-        `;
-        case 'bottom':
-            return `
-          top: 100%;
-          left: 0;
-          transform: translateY(5px); /* Adjust this value as needed */
-        `;
-        case 'left':
-            return `
-          right: 100%;
-          top: 0;
-          transform: translateX(-5px); /* Adjust this value as needed */
-        `;
-        case 'right':
-            return `
-          left: 100%;
-          top: 0;
-          transform: translateX(5px); /* Adjust this value as needed */
-        `;
-        default:
-            return `
-          top: 0;
-          left: 0;
-        `;
-    }
-}}
 `;
-const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'right', format = 'primary', menuWidth = '200px', enableHover = true, enableClick = false, }) => {
+const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'bottomLeft', format = 'primary', menuWidth = '200px', enableHover = true, enableClick = false, }) => {
     const [showMenu, toggleMenu] = React.useState(false);
+    const [menuPosition, setMenuPosition] = React.useState({ top: '0px', left: '0px' });
+    const menuWrapperRef = React.useRef(null);
     const handleMouseEnter = () => {
         if (!disabled && enableHover) {
             toggleMenu(true);
@@ -792,9 +762,55 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
             toggleMenu(!showMenu);
         }
     };
-    return (React.createElement(MenuWrapper, { onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+    React.useEffect(() => {
+        if (showMenu && menuWrapperRef.current) {
+            const rect = menuWrapperRef.current.getBoundingClientRect();
+            let top = rect.top;
+            let left = rect.left;
+            switch (position) {
+                case 'top':
+                    top = rect.top - rect.height;
+                    left = rect.left;
+                    break;
+                case 'bottom':
+                    top = rect.bottom;
+                    left = rect.left;
+                    break;
+                case 'left':
+                    top = rect.top;
+                    left = rect.left - rect.width;
+                    break;
+                case 'right':
+                    top = rect.top;
+                    left = rect.right;
+                    break;
+                case 'bottomRight':
+                    top = rect.bottom;
+                    left = rect.left;
+                    break;
+                case 'bottomLeft':
+                    top = rect.bottom;
+                    left = rect.right - parseInt(menuWidth, 10);
+                    break;
+                case 'topRight':
+                    top = rect.top - parseInt(menuWidth, 10);
+                    left = rect.left;
+                    break;
+                case 'topLeft':
+                    top = rect.top - parseInt(menuWidth, 10);
+                    left = rect.right - parseInt(menuWidth, 10);
+                    break;
+                default:
+                    top = rect.bottom;
+                    left = rect.left;
+                    break;
+            }
+            setMenuPosition({ top: `${top}px`, left: `${left}px` });
+        }
+    }, [showMenu, position, menuWidth]);
+    return (React.createElement(MenuWrapper, { onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuWrapperRef },
         React.createElement(Button, { disabled: disabled, format: format, icon: js.mdiDotsHorizontal, small: small }, label),
-        showMenu && (React.createElement(StyledMoreMenu, { "$menuWidth": menuWidth, "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems }))));
+        showMenu && (React.createElement(StyledMoreMenu, { "$left": menuPosition.left, "$menuWidth": menuWidth, "$top": menuPosition.top, maxHeight: maxHeight, menuItems: menuItems }))));
 };
 
 const Wrapper$c = styled.div `