@hexure/ui 1.13.22 → 1.13.24

package/dist/cjs/index.js

@@ -115,6 +115,77 @@ const Accordion = (_a) => {
         open ? children : null));
 };
 
+const StyledComponent = styled.p `
+  color: ${props => Colors[props.$color || 'BLACK'].Hex};
+  font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
+  line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
+  letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
+  font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
+  font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
+  text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  margin: ${props => props.$margin || '0px'};
+  padding: ${props => props.$padding || '0px'};
+  text-align: ${props => props.$align || 'left'};
+  box-sizing: border-box;
+`;
+const Copy = ({ children, align = '', margin = '', padding = '', type = 'default', color = 'BLACK', }) => {
+    return (React.createElement(StyledComponent, { "$align": align, "$color": color, "$margin": margin, "$padding": padding, "$type": type }, children));
+};
+Copy.defaultProps = {
+    type: 'default',
+};
+
+const Wrapper$h = styled.div `
+  display: inline-block;
+  position: relative;
+  height: 16px;
+`;
+const StyledIcon$6 = styled(Icon) `
+  width: 16px;
+  height: 16px;
+  margin: 0px 6px;
+  color: ${props => props.theme.PRIMARY_COLOR.Hex};
+  cursor: pointer;
+`;
+StyledIcon$6.defaultProps = { theme: EditableTheme };
+const positions = {
+    'right-top': {
+        top: '0px',
+        left: '28px',
+    },
+    'right-bottom': {
+        bottom: '0px',
+        left: '28px',
+    },
+    'right-center': {
+        top: '50%',
+        left: '28px',
+        transform: 'translateY(-50%)',
+    },
+    'left-top': {
+        top: '0px',
+        right: '28px',
+    },
+    'left-bottom': {
+        bottom: '0px',
+        right: '28px',
+    },
+    'left-center': {
+        top: '50%',
+        right: '28px',
+        transform: 'translateY(-50%)',
+    },
+};
+const Content$3 = styled.div(props => (Object.assign({ position: 'absolute', borderRadius: '4px', borderWidth: '1px', borderStyle: 'solid', borderColor: props.theme.PRIMARY_COLOR.Hex, background: '#ffffff', boxShadow: '0px 5px 30px -10px rgba(0, 0, 0, 0.5)', width: props.$width || '240px', padding: '10px 12px', zIndex: 9999 }, positions[props.$position])));
+Content$3.defaultProps = { theme: EditableTheme };
+const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }) => {
+    const [show_content, toggleContent] = React.useState(false);
+    return (React.createElement(Wrapper$h, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
+        trigger || React.createElement(StyledIcon$6, { path: js.mdiInformationOutline }),
+        show_content ? (React.createElement(Content$3, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
+};
+
 const StyledButton = styled.button `
   height: ${props => (props.$small ? '30px' : '40px')};
   line-height: 1em;
@@ -165,7 +236,7 @@ const Label$5 = styled.span `
   font-weight: 500;
   line-height: 1;
 `;
-const StyledIcon$6 = styled.span `
+const StyledIcon$5 = styled.span `
   margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
   margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
   display: flex;
@@ -190,7 +261,7 @@ const Badge$1 = styled.span `
   margin-right: ${props => (props.$small ? '-5px' : '-10px')};
 `;
 const Button = (_a) => {
-    var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary' } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format"]);
+    var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary', toolTip, title = '' } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format", "toolTip", "title"]);
     const theme = React.useContext(styled.ThemeContext) || EditableTheme;
     const has_children = children && children.length > 0;
     const button_type_mapping = {
@@ -224,32 +295,15 @@ const Button = (_a) => {
         },
     };
     const format_styles = button_type_mapping[format];
-    return (React.createElement(StyledButton, Object.assign({ "$bg_color": format_styles.background_color, "$border_color": format_styles.border_color, "$disabled": disabled || loading, "$hasChildren": !!has_children, "$margin": margin, "$small": small, onClick: disabled || loading ? undefined : onClick, type: isForm ? 'submit' : undefined }, accessibleProps),
+    const button_view = (React.createElement(StyledButton, Object.assign({ "$bg_color": format_styles.background_color, "$border_color": format_styles.border_color, "$disabled": disabled || loading, "$hasChildren": !!has_children, "$margin": margin, "$small": small, onClick: disabled || loading ? undefined : onClick, title: title, type: isForm ? 'submit' : undefined }, accessibleProps),
         children ? (React.createElement(Label$5, { "$content_color": format_styles.content_color, "$small": small }, children)) : null,
-        icon && !badge ? (React.createElement(StyledIcon$6, { "$hasChildren": !!has_children },
+        icon && !badge ? (React.createElement(StyledIcon$5, { "$hasChildren": !!has_children },
             React.createElement(Icon, { color: format ? format_styles.content_color : '#fff', path: loading ? js.mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
         badge && !icon ? (React.createElement(Badge$1, { "$bg_color": format_styles.badge_bg_color, "$content_color": format_styles.badge_content_color, "$small": small }, badge)) : null));
-};
-
-const StyledComponent = styled.p `
-  color: ${props => Colors[props.$color || 'BLACK'].Hex};
-  font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
-  line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
-  letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
-  font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
-  font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
-  text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  margin: ${props => props.$margin || '0px'};
-  padding: ${props => props.$padding || '0px'};
-  text-align: ${props => props.$align || 'left'};
-  box-sizing: border-box;
-`;
-const Copy = ({ children, align = '', margin = '', padding = '', type = 'default', color = 'BLACK', }) => {
-    return (React.createElement(StyledComponent, { "$align": align, "$color": color, "$margin": margin, "$padding": padding, "$type": type }, children));
-};
-Copy.defaultProps = {
-    type: 'default',
+    if (toolTip && Object.keys(toolTip).length) {
+        return (React.createElement(Tooltip, Object.assign({}, toolTip, { trigger: (toolTip === null || toolTip === void 0 ? void 0 : toolTip.trigger) || button_view }), toolTip === null || toolTip === void 0 ? void 0 : toolTip.children));
+    }
+    return button_view;
 };
 
 const H1 = styled.h1 `
@@ -301,7 +355,7 @@ Heading.defaultProps = {
     type: 'primary',
 };
 
-const Wrapper$h = styled.div `
+const Wrapper$g = styled.div `
   position: fixed;
   top: 0;
   right: 0;
@@ -325,7 +379,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$h, Object.assign({}, accessibleProps),
+    return (React.createElement(Wrapper$g, 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 +389,7 @@ const ActionDialog = (_a) => {
                 primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' }))) : null)) : null)));
 };
 
-const Wrapper$g = styled.div `
+const Wrapper$f = styled.div `
   border: 1px solid #f1f1f1;
   border-radius: 4px;
   border-left-width: 4px;
@@ -346,7 +400,7 @@ const Wrapper$g = styled.div `
   padding: ${({ $small }) => ($small ? '11px' : '20px')};
   box-sizing: border-box;
 `;
-const StyledIcon$5 = styled(Icon) `
+const StyledIcon$4 = styled(Icon) `
   flex-shrink: 0;
 `;
 const Action$1 = styled.div `
@@ -379,8 +433,8 @@ const Alert = (_a) => {
             icon: js.mdiCheckboxMarkedCircleOutline,
         },
     };
-    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' }),
+    return (React.createElement(Wrapper$f, Object.assign({}, accessibleProps, { "$small": small, style: { borderLeftColor: type_mapping[type].color } }),
+        React.createElement(StyledIcon$4, { 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,
             description ? (React.createElement(Copy, { margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
@@ -458,7 +512,7 @@ const AppHeader = ({ logoUrl, buttons = [] }) => {
         React.createElement(Buttons, null, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b)))))));
 };
 
-const Wrapper$f = styled.div `
+const Wrapper$e = styled.div `
   display: inline-block;
   border-radius: 4px;
   padding: 4px 6px;
@@ -467,7 +521,7 @@ const Wrapper$f = styled.div `
   box-sizing: border-box;
   cursor: ${props => (props.$removable ? 'pointer' : 'default')};
 `;
-const Content$3 = styled.div `
+const Content$2 = styled.div `
   display: flex;
   align-items: center;
 `;
@@ -485,8 +539,8 @@ 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$f, Object.assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps),
-        React.createElement(Content$3, null,
+    return (React.createElement(Wrapper$e, Object.assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps),
+        React.createElement(Content$2, null,
             React.createElement(Label$4, { "$color": color }, children),
             removable ? (React.createElement(Remove$1, null,
                 React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: js.mdiClose, size: '15px' }))) : null)));
@@ -500,9 +554,12 @@ const SidebarContainer = styled.div `
   padding: 12px 0px;
   width: ${props => (props.$isOpen ? props.$width : '60px')};
 `;
-const MenuWrapper$1 = styled.div `
+const MenuWrapper$1 = styled.button `
   display: flex;
   align-items: center;
+  border: 0px;
+  background-color: transparent;
+  padding-left: 0px;
   border-left-width: 4px;
   border-left-style: solid;
   border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
@@ -582,7 +639,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$1, { "$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, title: collapsed ? (nav_item === null || nav_item === void 0 ? void 0 : nav_item.title) || nav_item.label : '' },
                     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 +657,7 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
                 }, small: true }))));
 };
 
-const Wrapper$e = styled.div `
+const Wrapper$d = styled.div `
   border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
   border-radius: 8px;
   box-sizing: border-box;
@@ -609,7 +666,7 @@ const Wrapper$e = styled.div `
   justify-content: space-between;
   padding: 16px 20px;
 `;
-Wrapper$e.defaultProps = { theme: EditableTheme };
+Wrapper$d.defaultProps = { theme: EditableTheme };
 const Left = styled.div `
   box-sizing: border-box;
   display: flex;
@@ -670,7 +727,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$e, Object.assign({}, accessibleProps),
+    return (React.createElement(Wrapper$d, Object.assign({}, accessibleProps),
         React.createElement(Left, null,
             React.createElement(Info$1, null,
                 React.createElement(Selected, null,
@@ -683,7 +740,7 @@ const BulkActionBar = (_a) => {
             React.createElement(ErrorMsg, null, errorMsg))) : null));
 };
 
-const Wrapper$d = styled.div `
+const Wrapper$c = styled.div `
   background: #fff;
   border-radius: 8px;
   box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
@@ -729,7 +786,7 @@ Title$1.defaultProps = {
 };
 const MoreMenu = (_a) => {
     var { maxHeight, menuItems = [] } = _a, accessibleProps = __rest(_a, ["maxHeight", "menuItems"]);
-    return (React.createElement(Wrapper$d, Object.assign({ "$maxHeight": maxHeight }, accessibleProps), menuItems.map((item, i) => {
+    return (React.createElement(Wrapper$c, Object.assign({ "$maxHeight": maxHeight }, accessibleProps), menuItems.map((item, i) => {
         var _a;
         return (React.createElement(MenuItem, { key: i, onClick: item.onClick },
             item.icon ? (React.createElement(Icon, { color: item.disabled ? Colors.LIGHT_GRAY.Hex : Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
@@ -823,56 +880,6 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
         showMenu && (React.createElement(StyledMoreMenu, { "$left": menuPosition.left, "$menuWidth": menuWidth, "$top": menuPosition.top, maxHeight: maxHeight, menuItems: menuItems }))));
 };
 
-const Wrapper$c = styled.div `
-  display: inline-block;
-  position: relative;
-  height: 16px;
-`;
-const StyledIcon$4 = styled(Icon) `
-  width: 16px;
-  height: 16px;
-  margin: 0px 6px;
-  color: ${props => props.theme.PRIMARY_COLOR.Hex};
-  cursor: pointer;
-`;
-StyledIcon$4.defaultProps = { theme: EditableTheme };
-const positions = {
-    'right-top': {
-        top: '0px',
-        left: '28px',
-    },
-    'right-bottom': {
-        bottom: '0px',
-        left: '28px',
-    },
-    'right-center': {
-        top: '50%',
-        left: '28px',
-        transform: 'translateY(-50%)',
-    },
-    'left-top': {
-        top: '0px',
-        right: '28px',
-    },
-    'left-bottom': {
-        bottom: '0px',
-        right: '28px',
-    },
-    'left-center': {
-        top: '50%',
-        right: '28px',
-        transform: 'translateY(-50%)',
-    },
-};
-const Content$2 = styled.div(props => (Object.assign({ position: 'absolute', borderRadius: '4px', borderWidth: '1px', borderStyle: 'solid', borderColor: props.theme.PRIMARY_COLOR.Hex, background: '#ffffff', boxShadow: '0px 5px 30px -10px rgba(0, 0, 0, 0.5)', width: props.$width || '240px', padding: '10px 12px', zIndex: 9999 }, positions[props.$position])));
-Content$2.defaultProps = { theme: EditableTheme };
-const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }) => {
-    const [show_content, toggleContent] = React.useState(false);
-    return (React.createElement(Wrapper$c, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
-        trigger || React.createElement(StyledIcon$4, { path: js.mdiInformationOutline }),
-        show_content ? (React.createElement(Content$2, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
-};
-
 const Wrapper$b = styled.label `
   border-radius: 4px;
   padding: 4px 0px 4px 6px;