@hexure/ui 1.8.4 → 1.8.6

package/dist/cjs/types/components/Button/Button.d.ts

@@ -20,7 +20,7 @@ export interface ButtonProps extends AccessibleProps {
     /** If enabled, the small button format will be used. */
     small?: boolean;
     /** Define which button format to display. By default the Primary button will be used.  */
-    format?: 'primary' | 'secondary' | 'red';
+    format?: 'primary' | 'secondary' | 'red' | 'green';
 }
 declare const Button: FC<ButtonProps>;
 export default Button;

package/dist/cjs/types/components/ButtonMenu/ButtonMenu.d.ts

@@ -5,7 +5,8 @@ export interface ButtonMenuProps {
     label: string;
     small?: boolean;
     menuItems: Array<MenuItemProps>;
-    maxHeight?: string | number;
+    menuWidth?: string;
+    maxHeight?: string;
     position?: 'left' | 'right';
     format?: 'primary' | 'secondary';
 }

package/dist/cjs/types/components/PageHeader/PageHeader.d.ts

@@ -8,13 +8,14 @@ export interface PageHeaderProps {
     }>;
     actions?: Array<{
         disabled?: boolean;
-        format?: 'primary' | 'secondary' | 'red';
+        format?: 'primary' | 'secondary' | 'red' | 'green';
         icon?: string;
         label: string;
         onClick?: (e: any) => void;
     }>;
     buttonMenu?: {
         disabled?: boolean;
+        format?: 'primary' | 'secondary';
         icon?: string;
         label: string;
         menuItems: Array<MenuItemProps>;

package/dist/esm/index.js

@@ -2059,6 +2059,13 @@ const button_type_mapping = {
         badge_bg_color: '#fff',
         badge_content_color: Colors.RED.Hex,
     },
+    green: {
+        background_color: Colors.GREEN.Hex,
+        border_color: Colors.GREEN.Hex,
+        content_color: '#fff',
+        badge_bg_color: '#fff',
+        badge_content_color: Colors.GREEN.Hex,
+    },
 };
 const StyledButton = styled.button `
   height: ${props => (props.$small ? '30px' : '40px')};
@@ -2444,13 +2451,14 @@ const StyledMoreMenu = styled(MoreMenu) `
   right: ${props => (props.$position === 'right' ? '0px' : 'auto')};
   left: ${props => (props.$position === 'left' ? '0px' : 'auto')};
   top: ${props => (props.$small ? '30px' : '40px')};
+  width: ${props => props.$menuWidth};
   z-index: 10;
 `;
-const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'right', format = 'primary', }) => {
+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) },
         React.createElement(Button, { disabled: disabled, format: format, icon: mdiDotsHorizontal, small: small }, label),
-        show_menu ? (React.createElement(StyledMoreMenu, { "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems })) : null));
+        show_menu ? (React.createElement(StyledMoreMenu, { "$menuWidth": menuWidth, "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems })) : null));
 };
 
 const Wrapper$c = styled.label `
@@ -3806,14 +3814,14 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu }) => {
         React.createElement(Info, null,
             React.createElement(Heading, { type: 'secondary' }, title),
             breadcrumbs ? (React.createElement(Breadcrumbs, null, breadcrumbs.map((crumb, i) => {
-                return (React.createElement(React.Fragment, null,
+                return (React.createElement(React.Fragment, { key: i },
                     crumb.onClick ? (React.createElement(Link, { onClick: crumb.onClick, small: true }, crumb.label)) : (React.createElement(Copy, { type: 'small' }, crumb.label)),
                     i + 1 < breadcrumbs.length ? React.createElement(Icon$1, { path: mdiChevronRight, size: '14px' }) : null));
             }))) : null),
         actions ? (React.createElement(Actions, null,
-            actions.map(action => {
+            actions.map((action, i) => {
                 const { label } = action, buttonProps = __rest(action, ["label"]);
-                return (React.createElement(Button, Object.assign({}, buttonProps, { small: true }), label));
+                return (React.createElement(Button, Object.assign({}, buttonProps, { key: i, small: true }), label));
             }),
             menuItems.length ? (React.createElement(ButtonMenu, { label: label, menuItems: menuItems, small: true })) : null)) : null));
 };