@hexure/ui 1.13.3 → 1.13.4

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect, useRef } from 'react';
+import React, { useContext, useState, useRef, useEffect } from 'react';
 import styled, { ThemeContext, keyframes } from 'styled-components';
 import Icon, { Icon as Icon$1 } from '@mdi/react';
 import { mdiChevronUp, mdiChevronDown, mdiLoading, mdiInformationOutline, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiClose, mdiChevronRight, mdiChevronLeft, mdiDotsHorizontal, mdiMinusCircle, mdiFolderPlusOutline, mdiCheck } from '@mdi/js';
@@ -734,47 +734,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] = useState(false);
+    const [menuPosition, setMenuPosition] = useState({ top: '0px', left: '0px' });
+    const menuWrapperRef = useRef(null);
     const handleMouseEnter = () => {
         if (!disabled && enableHover) {
             toggleMenu(true);
@@ -790,9 +760,55 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
             toggleMenu(!showMenu);
         }
     };
-    return (React.createElement(MenuWrapper, { onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
+    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: 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 `