@hexure/ui 1.13.67 → 1.13.69

package/dist/cjs/index.js

@@ -2803,7 +2803,19 @@ const StyledButton = styled.button `
     return '0px';
 }};
   outline: none;
-  background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
+  background: ${props => {
+    if (props.$disabled) {
+        if (props.$format === 'secondary') {
+            return '#66666626';
+        }
+        else {
+            return '#e7e6e6';
+        }
+    }
+    else {
+        return props.$bg_color || props.theme.PRIMARY_COLOR.Hex;
+    }
+}};
   width: ${props => {
     if (props.$hasChildren) {
         return 'auto';
@@ -2822,7 +2834,19 @@ const StyledButton = styled.button `
   opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
   border-width: 1px;
   border-style: solid;
-  border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
+  border-color: ${props => {
+    if (props.$disabled) {
+        if (props.$format === 'secondary') {
+            return '#66666680';
+        }
+        else {
+            return '#e7e6e6';
+        }
+    }
+    else {
+        return props.$border_color || props.theme.PRIMARY_COLOR.Hex;
+    }
+}};
   box-sizing: border-box;
 
   &:active,
@@ -2898,10 +2922,15 @@ const Button = (_a) => {
     };
     const format_styles = button_type_mapping[format];
     const baseId = dataItemid || 'button';
-    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, "$iconPosition": iconPosition, "$margin": margin, "$small": small, disabled: disabled || loading, onClick: disabled || loading ? undefined : onClick, title: title, type: type || (isForm ? 'submit' : undefined) }, accessibleProps, { "data-itemid": `${baseId}-styled-button` }),
-        children ? (React.createElement(Label$5, { "$content_color": format_styles.content_color, "$small": small, "data-itemid": `${baseId}-label` }, children)) : null,
+    const button_view = (React.createElement(StyledButton, Object.assign({ "$bg_color": format_styles.background_color, "$border_color": format_styles.border_color, "$disabled": disabled || loading, "$format": format, "$hasChildren": !!has_children, "$iconPosition": iconPosition, "$margin": margin, "$small": small, disabled: disabled || loading, onClick: disabled || loading ? undefined : onClick, title: title, type: type || (isForm ? 'submit' : undefined) }, accessibleProps, { "data-itemid": `${baseId}-styled-button` }),
+        children ? (React.createElement(Label$5, { "$content_color": disabled || loading ? '#666666' : format_styles.content_color, "$small": small, "data-itemid": `${baseId}-label` }, children)) : null,
         icon && !badge ? (React.createElement(StyledIcon$5, { "$hasChildren": !!has_children, "data-itemid": `${baseId}-icon` },
-            React.createElement(Icon, { color: format ? format_styles === null || format_styles === void 0 ? void 0 : format_styles.content_color : '#fff', "data-itemid": `${baseId}-icon-svg`, path: loading ? js.mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
+            React.createElement(Icon, { color: (() => {
+                    if (disabled || loading) {
+                        return '#666666';
+                    }
+                    return format ? format_styles.content_color : '#fff';
+                })(), "data-itemid": `${baseId}-icon-svg`, 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, "data-itemid": `${baseId}-badge` }, badge)) : null));
     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));
@@ -3128,6 +3157,15 @@ const Wrapper$e = styled.div `
   color: #ffffff;
   box-sizing: border-box;
   cursor: ${props => (props.$removable ? 'pointer' : 'default')};
+  ${props => props.$rotate &&
+    `
+    transform: rotate(270deg); 
+    transform-origin: top left;
+    width: max-content;
+    position: absolute;
+    top: -11px;
+    left: 3px;
+  `}
 `;
 const Content$2 = styled.div `
   display: flex;
@@ -3146,9 +3184,9 @@ const Remove$1 = styled.div `
   align-items: center;
 `;
 const Tag = (_a) => {
-    var { children, color = 'PRIMARY', removable, onClick, dataItemid } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick", "dataItemid"]);
+    var { children, color = 'PRIMARY', removable, onClick, dataItemid, rotate } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick", "dataItemid", "rotate"]);
     const baseId = dataItemid || 'tag';
-    return (React.createElement(Wrapper$e, Object.assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
+    return (React.createElement(Wrapper$e, Object.assign({ "$color": color, "$removable": removable, "$rotate": rotate, onClick: onClick }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
         React.createElement(Content$2, { "data-itemid": `${baseId}-content` },
             React.createElement(Label$4, { "$color": color, "data-itemid": `${baseId}-label` }, children),
             removable ? (React.createElement(Remove$1, { "data-itemid": `${baseId}-remove` },
@@ -3230,7 +3268,7 @@ const SubMenuItem = styled.a `
 `;
 const Footer = styled.div `
   padding: 20px 14px 0px;
-  display: flex;
+  display: ${props => (props.$isOpen ? 'flex' : 'inline')};
   align-items: center;
 `;
 const FooterInfo = styled.div `
@@ -3238,6 +3276,9 @@ const FooterInfo = styled.div `
   flex-direction: column;
   flex: 1;
   align-items: flex-start;
+  ${props => !props.$isOpen &&
+    `position: relative;
+  `}
 `;
 const SidebarMenuContainer = styled.div `
   flex-grow: 1;
@@ -3258,10 +3299,10 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px', dataIte
                     return (React.createElement(SubMenuItem, { "$active": menu_item.is_active, "$color": theme.PRIMARY_COLOR, "data-itemid": `${menuItemId}-sub-menu-item`, key: menuItemId, onClick: menu_item.onClick }, menu_item.label));
                 }))) : null));
         })),
-        React.createElement(Footer, { "data-itemid": `${baseId}-footer` },
-            collapsed ? null : (React.createElement(FooterInfo, { "data-itemid": `${baseId}-footer-info` },
-                footerTag ? React.createElement(Tag, { "data-itemid": `${baseId}-footer-tag` }, footerTag) : null,
-                React.createElement(Copy, { "data-itemid": `${baseId}-footer-copy`, margin: '8px 0 0 0', type: 'small' },
+        React.createElement(Footer, { "$isOpen": !collapsed, "data-itemid": `${baseId}-footer` },
+            React.createElement(FooterInfo, { "$isOpen": !collapsed, "data-itemid": `${baseId}-footer-info` },
+                footerTag && (React.createElement(Tag, { "data-itemid": `${baseId}-footer-tag`, rotate: collapsed }, footerTag)),
+                !collapsed && (React.createElement(Copy, { "data-itemid": `${baseId}-footer-copy`, margin: '8px 0 0 0', type: 'small' },
                     "\u00A9 ",
                     new Date().getFullYear(),
                     " Hexure"))),