@hexure/ui 1.13.3 → 1.13.5

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,20 @@ const MenuWrapper = styled.div `
   display: inline-block;
 `;
 const StyledMoreMenu = styled(MoreMenu) `
-  position: absolute;
+  position: fixed;
+  top: ${props => props.$top};
+  left: ${props => props.$left};
+  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 +763,56 @@ 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 wrapperRect = menuWrapperRef.current.getBoundingClientRect();
+            const menuWidthInt = parseInt(menuWidth, 10);
+            let top = wrapperRect.top;
+            let left = wrapperRect.left;
+            switch (position) {
+                case 'top':
+                    top = wrapperRect.top - 142; // Menu above the wrapper
+                    left = wrapperRect.left;
+                    break;
+                case 'bottom':
+                    top = wrapperRect.bottom; // Menu below the wrapper
+                    left = wrapperRect.left;
+                    break;
+                case 'left':
+                    top = wrapperRect.top;
+                    left = wrapperRect.left - menuWidthInt; // Menu to the left of the wrapper
+                    break;
+                case 'right':
+                    top = wrapperRect.top;
+                    left = wrapperRect.right; // Menu to the right of the wrapper
+                    break;
+                case 'bottomLeft':
+                    top = wrapperRect.bottom;
+                    left = wrapperRect.right - menuWidthInt;
+                    break;
+                case 'bottomRight':
+                    top = wrapperRect.bottom;
+                    left = wrapperRect.left;
+                    break;
+                case 'topRight':
+                    top = wrapperRect.top - 142;
+                    left = wrapperRect.right - 24;
+                    break;
+                case 'topLeft':
+                    top = wrapperRect.top - 142;
+                    left = wrapperRect.left - 188;
+                    break;
+                default:
+                    top = wrapperRect.bottom;
+                    left = wrapperRect.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 `
@@ -881,8 +901,8 @@ const Input$2 = styled.input `
     border-color: ${Colors.MEDIUM_GRAY.Hex};
   }
   &:disabled + span {
-    background-color: #fff;
-    border-color: ${Colors.MEDIUM_GRAY.Hex};
+    background-color: #d3d3d3;
+    border-color: #d3d3d3;
   }
   &:checked + span:after {
     display: block;
@@ -2290,8 +2310,8 @@ const Input = styled.input `
     display: block;
   }
   &:disabled + span {
-    background-color: #fff;
-    border-color: ${Colors.MEDIUM_GRAY.Hex};
+    background-color: #d3d3d3;
+    border-color: #d3d3d3;
   }
   &:disabled + span:after {
     background-color: #fff;