@hexure/ui 1.13.2 → 1.13.4

package/dist/cjs/index.js

@@ -301,7 +301,7 @@ Heading.defaultProps = {
     type: 'primary',
 };
 
-const Wrapper$i = styled.div `
+const Wrapper$h = styled.div `
   position: fixed;
   top: 0;
   right: 0;
@@ -325,7 +325,7 @@ const Buttons$1 = styled.div `
 `;
 const ActionDialog = (_a) => {
     var { description, title, primaryButton, secondaryButton, tertiaryButton, style = {} } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton", "style"]);
-    return (React.createElement(Wrapper$i, Object.assign({}, accessibleProps),
+    return (React.createElement(Wrapper$h, Object.assign({}, accessibleProps),
         React.createElement(Container$4, { "$customStyle": style, open: true },
             title ? (React.createElement(Heading, { margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
             description ? React.createElement(Copy, { align: 'center' }, description) : null,
@@ -335,7 +335,7 @@ const ActionDialog = (_a) => {
                 primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' }))) : null)) : null)));
 };
 
-const Wrapper$h = styled.div `
+const Wrapper$g = styled.div `
   border: 1px solid #f1f1f1;
   border-radius: 4px;
   border-left-width: 4px;
@@ -379,7 +379,7 @@ const Alert = (_a) => {
             icon: js.mdiCheckboxMarkedCircleOutline,
         },
     };
-    return (React.createElement(Wrapper$h, Object.assign({}, accessibleProps, { "$small": small, style: { borderLeftColor: type_mapping[type].color } }),
+    return (React.createElement(Wrapper$g, Object.assign({}, accessibleProps, { "$small": small, style: { borderLeftColor: type_mapping[type].color } }),
         React.createElement(StyledIcon$5, { color: type_mapping[type].color, path: type_mapping[type].icon, size: small ? '20px' : '30px' }),
         React.createElement("div", null,
             title && !small ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
@@ -458,7 +458,7 @@ const AppHeader = ({ logoUrl, buttons = [] }) => {
         React.createElement(Buttons, null, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b)))))));
 };
 
-const Wrapper$g = styled.div `
+const Wrapper$f = styled.div `
   display: inline-block;
   border-radius: 4px;
   padding: 4px 6px;
@@ -485,7 +485,7 @@ const Remove$1 = styled.div `
 `;
 const Tag = (_a) => {
     var { children, color = 'PRIMARY', removable, onClick } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
-    return (React.createElement(Wrapper$g, Object.assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps),
+    return (React.createElement(Wrapper$f, Object.assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps),
         React.createElement(Content$3, null,
             React.createElement(Label$4, { "$color": color }, children),
             removable ? (React.createElement(Remove$1, null,
@@ -500,7 +500,7 @@ const SidebarContainer = styled.div `
   padding: 12px 0px;
   width: ${props => (props.$isOpen ? props.$width : '60px')};
 `;
-const MenuWrapper = styled.div `
+const MenuWrapper$1 = styled.div `
   display: flex;
   align-items: center;
   border-left-width: 4px;
@@ -582,7 +582,7 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
     return (React.createElement(SidebarContainer, { "$isOpen": !collapsed, "$width": defaultWidth },
         React.createElement(SidebarMenuContainer, null, menu.map(nav_item => {
             return (React.createElement(React.Fragment, { key: nav_item.label },
-                React.createElement(MenuWrapper, { "$active": !!nav_item.is_active, "$color": theme.PRIMARY_COLOR, onClick: nav_item.onClick },
+                React.createElement(MenuWrapper$1, { "$active": !!nav_item.is_active, "$color": theme.PRIMARY_COLOR, onClick: nav_item.onClick },
                     React.createElement(MenuIcon, { "$active": !!nav_item.is_active, path: nav_item.icon }),
                     collapsed ? null : (React.createElement(MenuLabel, { "$active": nav_item.is_active, "$color": theme.PRIMARY_COLOR }, nav_item.label))),
                 nav_item.is_active && nav_item.menu && !collapsed ? (React.createElement(SubMenu, null, nav_item.menu.map(menu_item => (React.createElement(SubMenuItem, { "$active": menu_item.is_active, "$color": theme.PRIMARY_COLOR, key: menu_item.label, onClick: menu_item.onClick }, menu_item.label))))) : null));
@@ -600,7 +600,7 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
                 }, small: true }))));
 };
 
-const Wrapper$f = styled.div `
+const Wrapper$e = styled.div `
   border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
   border-radius: 8px;
   box-sizing: border-box;
@@ -609,7 +609,7 @@ const Wrapper$f = styled.div `
   justify-content: space-between;
   padding: 16px 20px;
 `;
-Wrapper$f.defaultProps = { theme: EditableTheme };
+Wrapper$e.defaultProps = { theme: EditableTheme };
 const Left = styled.div `
   box-sizing: border-box;
   display: flex;
@@ -670,7 +670,7 @@ const ErrorMsg = styled.span `
 `;
 const BulkActionBar = (_a) => {
     var { actions = [], errorMsg, onClear, selectedCount = 0 } = _a, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
-    return (React.createElement(Wrapper$f, Object.assign({}, accessibleProps),
+    return (React.createElement(Wrapper$e, Object.assign({}, accessibleProps),
         React.createElement(Left, null,
             React.createElement(Info$1, null,
                 React.createElement(Selected, null,
@@ -683,7 +683,7 @@ const BulkActionBar = (_a) => {
             React.createElement(ErrorMsg, null, errorMsg))) : null));
 };
 
-const Wrapper$e = styled.div `
+const Wrapper$d = styled.div `
   background: #fff;
   border-radius: 8px;
   box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
@@ -724,30 +724,93 @@ const Title$1 = styled.span `
 `;
 const MoreMenu = (_a) => {
     var { maxHeight, menuItems = [] } = _a, accessibleProps = __rest(_a, ["maxHeight", "menuItems"]);
-    return (React.createElement(Wrapper$e, Object.assign({ "$maxHeight": maxHeight }, accessibleProps), menuItems.map((item, i) => {
+    return (React.createElement(Wrapper$d, Object.assign({ "$maxHeight": maxHeight }, accessibleProps), menuItems.map((item, i) => {
         return (React.createElement(MenuItem, { key: i, onClick: item.onClick },
             item.icon ? (React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
             React.createElement(Title$1, null, item.label)));
     })));
 };
 
-const Wrapper$d = styled.div `
+const MenuWrapper = styled.div `
   position: relative;
   display: inline-block;
 `;
 const StyledMoreMenu = styled(MoreMenu) `
-  position: absolute;
-  right: ${props => (props.$position === 'right' ? '0px' : 'auto')};
-  left: ${props => (props.$position === 'left' ? '0px' : 'auto')};
-  top: ${props => (props.$small ? '30px' : '40px')};
+  position: fixed;
+  top: ${props => props.$top};
+  left: ${props => props.$left};
   width: ${props => props.$menuWidth};
+  max-height: ${props => props.maxHeight};
   z-index: 10;
 `;
-const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'right', format = 'primary', menuWidth = '200px', }) => {
-    const [show_menu, toggleMenu] = React.useState(false);
-    return (React.createElement(Wrapper$d, { onMouseEnter: disabled ? undefined : toggleMenu.bind(null, true), onMouseLeave: disabled ? undefined : toggleMenu.bind(null, 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);
+        }
+    };
+    const handleMouseLeave = () => {
+        if (!disabled && enableHover) {
+            toggleMenu(false);
+        }
+    };
+    const handleClick = () => {
+        if (enableClick) {
+            toggleMenu(!showMenu);
+        }
+    };
+    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),
-        show_menu ? (React.createElement(StyledMoreMenu, { "$menuWidth": menuWidth, "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems })) : null));
+        showMenu && (React.createElement(StyledMoreMenu, { "$left": menuPosition.left, "$menuWidth": menuWidth, "$top": menuPosition.top, maxHeight: maxHeight, menuItems: menuItems }))));
 };
 
 const Wrapper$c = styled.div `