@hexure/ui 1.13.2 → 1.13.3

package/dist/esm/index.js

@@ -299,7 +299,7 @@ Heading.defaultProps = {
     type: 'primary',
 };
 
-const Wrapper$i = styled.div `
+const Wrapper$h = styled.div `
   position: fixed;
   top: 0;
   right: 0;
@@ -323,7 +323,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,
@@ -333,7 +333,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;
@@ -377,7 +377,7 @@ const Alert = (_a) => {
             icon: 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,
@@ -456,7 +456,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;
@@ -483,7 +483,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,
@@ -498,7 +498,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;
@@ -580,7 +580,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));
@@ -598,7 +598,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;
@@ -607,7 +607,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;
@@ -668,7 +668,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,
@@ -681,7 +681,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);
@@ -722,30 +722,77 @@ 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')};
   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', }) => {
-    const [show_menu, toggleMenu] = 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 = 'right', format = 'primary', menuWidth = '200px', enableHover = true, enableClick = false, }) => {
+    const [showMenu, toggleMenu] = useState(false);
+    const handleMouseEnter = () => {
+        if (!disabled && enableHover) {
+            toggleMenu(true);
+        }
+    };
+    const handleMouseLeave = () => {
+        if (!disabled && enableHover) {
+            toggleMenu(false);
+        }
+    };
+    const handleClick = () => {
+        if (enableClick) {
+            toggleMenu(!showMenu);
+        }
+    };
+    return (React.createElement(MenuWrapper, { onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
         React.createElement(Button, { disabled: disabled, format: format, icon: mdiDotsHorizontal, small: small }, label),
-        show_menu ? (React.createElement(StyledMoreMenu, { "$menuWidth": menuWidth, "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems })) : null));
+        showMenu && (React.createElement(StyledMoreMenu, { "$menuWidth": menuWidth, "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems }))));
 };
 
 const Wrapper$c = styled.div `