@hexure/ui 1.13.1 → 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 `
@@ -844,6 +891,7 @@ const Input$2 = styled.input `
 const Check$1 = styled.span `
   height: 17px;
   width: 17px;
+  min-width: 17px;
   background-color: #fff;
   border-width: 2px;
   border-style: solid;
@@ -871,7 +919,7 @@ const Label$3 = styled.span `
   font-size: ${FontSizes.DEFAULT};
   font-weight: 400;
   line-height: 1.6em;
-  color: ${props => props.color || Colors.BLACK.Hex};;
+  color: ${props => props.color || Colors.BLACK.Hex};
   margin-left: 6px;
   box-sizing: border-box;
 `;
@@ -1201,13 +1249,13 @@ const Drawer = (_a) => {
                     React.createElement(Button, { format: 'secondary', icon: mdiClose, small: true }))),
             React.createElement(ContentWrapper$1, null, children),
             primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar$1, null,
-                tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary' })) : null,
-                secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' })) : null,
-                primaryButton ? React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' })) : null)) : null),
+                tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary' }))) : null,
+                secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' }))) : null,
+                primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' }))) : null)) : null),
         scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
 };
 
-const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, (props.$customStyle))));
+const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.$customStyle)));
 const LabelRow = styled.div `
   display: flex;
   align-items: center;
@@ -1350,6 +1398,11 @@ const Files = styled.div `
   gap: 10px;
   margin: 20px;
 `;
+const MessageDiv = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
 const File = styled.div `
   display: flex;
   padding: 10px;
@@ -1369,7 +1422,7 @@ const Remove = styled(Icon) `
     fill: ${Colors.RED.Hex} !important;
   }
 `;
-const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, value = [], message, validateFile, }) => {
+const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, value = [], message, tooltipInfo = '', validateFile, }) => {
     const inputRef = useRef(null);
     const [files, setFiles] = useState(value || []);
     const [dragging, setDragging] = useState(false);
@@ -1481,7 +1534,10 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, val
                     React.createElement(StyledIcon$3, { path: mdiFolderPlusOutline }))),
                 React.createElement(Content, null,
                     React.createElement(Copy, { align: 'center', type: 'bold' }, "Drag & drop files here or click to select files"),
-                    message ? (React.createElement(Copy, { align: 'center', color: 'GRAY' }, message)) : null))) : null)));
+                    message ? (React.createElement(MessageDiv, null,
+                        React.createElement(Copy, { align: 'center', color: 'GRAY' }, message),
+                        tooltipInfo && (React.createElement("span", null,
+                            React.createElement(Tooltip, { children: tooltipInfo, position: 'left-center' }))))) : null))) : null)));
 };
 
 const getAgesFromDob = (dob) => {
@@ -1902,7 +1958,7 @@ const StepLine = styled.div `
 const ProgressBar = ({ steps, showStepLine = false }) => {
     return (React.createElement(Steps, null, steps.map((step, i) => {
         return (React.createElement(React.Fragment, null,
-            i !== 0 && showStepLine && (React.createElement(StepLine, { "$active": step.active })),
+            i !== 0 && showStepLine && React.createElement(StepLine, { "$active": step.active }),
             React.createElement(Step, { key: i },
                 step.complete ? (React.createElement(StyledIcon$2, { path: mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
                 React.createElement(StepLabel, null, step.label))));