@hexure/ui 1.13.4 → 1.13.5

package/dist/cjs/index.js

@@ -736,6 +736,9 @@ const MenuWrapper = styled.div `
   display: inline-block;
 `;
 const StyledMoreMenu = styled(MoreMenu) `
+  position: fixed;
+  top: ${props => props.$top};
+  left: ${props => props.$left};
   position: fixed;
   top: ${props => props.$top};
   left: ${props => props.$left};
@@ -764,45 +767,46 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
     };
     React.useEffect(() => {
         if (showMenu && menuWrapperRef.current) {
-            const rect = menuWrapperRef.current.getBoundingClientRect();
-            let top = rect.top;
-            let left = rect.left;
+            const wrapperRect = menuWrapperRef.current.getBoundingClientRect();
+            const menuWidthInt = parseInt(menuWidth, 10);
+            let top = wrapperRect.top;
+            let left = wrapperRect.left;
             switch (position) {
                 case 'top':
-                    top = rect.top - rect.height;
-                    left = rect.left;
+                    top = wrapperRect.top - 142; // Menu above the wrapper
+                    left = wrapperRect.left;
                     break;
                 case 'bottom':
-                    top = rect.bottom;
-                    left = rect.left;
+                    top = wrapperRect.bottom; // Menu below the wrapper
+                    left = wrapperRect.left;
                     break;
                 case 'left':
-                    top = rect.top;
-                    left = rect.left - rect.width;
+                    top = wrapperRect.top;
+                    left = wrapperRect.left - menuWidthInt; // Menu to the left of the wrapper
                     break;
                 case 'right':
-                    top = rect.top;
-                    left = rect.right;
-                    break;
-                case 'bottomRight':
-                    top = rect.bottom;
-                    left = rect.left;
+                    top = wrapperRect.top;
+                    left = wrapperRect.right; // Menu to the right of the wrapper
                     break;
                 case 'bottomLeft':
-                    top = rect.bottom;
-                    left = rect.right - parseInt(menuWidth, 10);
+                    top = wrapperRect.bottom;
+                    left = wrapperRect.right - menuWidthInt;
+                    break;
+                case 'bottomRight':
+                    top = wrapperRect.bottom;
+                    left = wrapperRect.left;
                     break;
                 case 'topRight':
-                    top = rect.top - parseInt(menuWidth, 10);
-                    left = rect.left;
+                    top = wrapperRect.top - 142;
+                    left = wrapperRect.right - 24;
                     break;
                 case 'topLeft':
-                    top = rect.top - parseInt(menuWidth, 10);
-                    left = rect.right - parseInt(menuWidth, 10);
+                    top = wrapperRect.top - 142;
+                    left = wrapperRect.left - 188;
                     break;
                 default:
-                    top = rect.bottom;
-                    left = rect.left;
+                    top = wrapperRect.bottom;
+                    left = wrapperRect.left;
                     break;
             }
             setMenuPosition({ top: `${top}px`, left: `${left}px` });
@@ -899,8 +903,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;
@@ -2308,8 +2312,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;