@hexure/ui 1.13.66 → 1.13.68

package/dist/cjs/index.js

@@ -2751,7 +2751,7 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, d
             border-style: solid;
             border-color: #0193D7;
             background: #ffffff;
-            boxShadow: 0px 5px 30px -10px rgba(0, 0, 0, 0.5);
+            box-shadow: 0px 5px 30px -10px rgba(0, 0, 0, 0.5);
             color: #000;
             max-width: ${width};
             z-index: 9999; /* Ensure tooltip is above other elements */
@@ -3128,6 +3128,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 +3155,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 +3239,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 +3247,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 +3270,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"))),
@@ -5517,6 +5529,13 @@ const StepLine = styled.div `
   transition: background-color 0.5s ease-in-out;
 `;
 const Container$2 = styled.div ``;
+const ContainerExtraProps = styled.div `
+  color: #b60000;
+  cursor: ${props => (props.$cursorPointer ? 'pointer' : 'auto')};
+  text-shadow: none;
+  font-size: 0.8em;
+  padding-top: 3px;
+`;
 const ProgressBarFill = styled.div `
   width: 110px;
   height: 12px;
@@ -5551,6 +5570,7 @@ const ProgressBarFill = styled.div `
 const ProgressBar = ({ steps, showStepLine = false, dataItemid }) => {
     const baseId = dataItemid || 'progress-bar';
     return (React.createElement(Steps, { "data-itemid": `${baseId}-steps` }, steps.map((step, i) => {
+        var _a, _b;
         const stepId = `${baseId}-step-${i}`;
         return (React.createElement(React.Fragment, { key: i },
             i !== 0 && showStepLine && (React.createElement(StepLine, { "$active": step.active, "data-itemid": `${stepId}-line` })),
@@ -5559,11 +5579,12 @@ const ProgressBar = ({ steps, showStepLine = false, dataItemid }) => {
                     React.createElement(StyledIcon$2, { "data-itemid": `${stepId}-icon`, path: js.mdiCheckboxMarkedCircleOutline, size: '32px' }))) : (React.createElement(StepIndicator, { "$active": step.active, "data-itemid": `${stepId}-indicator` }, i + 1)),
                 React.createElement(StepLabel, { "data-itemid": `${stepId}-label` },
                     step.label,
-                    step.percentComplete !== undefined && (React.createElement(ProgressBarFill, { "$percent": step.percentComplete, "data-itemid": `${stepId}-fill` },
+                    !(step === null || step === void 0 ? void 0 : step.extraProps) && step.percentComplete !== undefined && (React.createElement(ProgressBarFill, { "$percent": step.percentComplete, "data-itemid": `${stepId}-fill` },
                         React.createElement(Container$2, { className: 'progress-bar-fill' }),
                         React.createElement(Container$2, { className: 'progress-percentage', "data-itemid": `${stepId}-percentage` },
                             step.percentComplete,
-                            "%")))))));
+                            "%"))),
+                    (step === null || step === void 0 ? void 0 : step.extraProps) && (React.createElement(ContainerExtraProps, { "$cursorPointer": !!((_a = step.extraProps) === null || _a === void 0 ? void 0 : _a.onClick), "data-itemid": `${stepId}-extra-props`, onClick: (_b = step.extraProps) === null || _b === void 0 ? void 0 : _b.onClick, title: step.extraProps.title }, step.extraProps.title))))));
     })));
 };