@kaizen/components 2.2.4 → 2.3.1

package/dist/esm/src/TitleBlock/subcomponents/MainActions.mjs

@@ -1,25 +1,105 @@
-import { __assign, __spreadArray } from 'tslib';
+import { __spreadArray, __assign } from 'tslib';
 import React from 'react';
 import { Button } from '../../ButtonV1/Button/Button.mjs';
 import { IconButton } from '../../ButtonV1/IconButton/IconButton.mjs';
 import { Icon } from '../../Icon/Icon.mjs';
 import { Menu, MenuList } from '../../MenuV1/index.mjs';
+import '../TitleBlock.mjs';
+import './NavigationTabs.mjs';
 import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from '../constants.mjs';
-import { isMenuGroupNotButton } from '../utils.mjs';
+import { createTabletOverflowMenuItems, isMenuGroupNotButton } from '../utils.mjs';
 import { TitleBlockMenuItem } from './TitleBlockMenuItem.mjs';
 import { Toolbar } from './Toolbar.mjs';
 import styles from './MainActions.module.scss.mjs';
+var renderSecondaryAndOverflowMenu = function (secondaryOverflowMenuItems, reversed) {
+  if (!secondaryOverflowMenuItems) return undefined;
+  return /*#__PURE__*/React.createElement(Menu, {
+    align: "right",
+    button: /*#__PURE__*/React.createElement(IconButton, {
+      label: 'Open secondary and overflow menu',
+      reversed: reversed,
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        name: "more_horiz",
+        isPresentational: true
+      }),
+      id: TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID,
+      classNameOverride: styles.overflowMenuButton
+    })
+  }, /*#__PURE__*/React.createElement(MenuList, null, secondaryOverflowMenuItems.map(function (menuItem, i) {
+    return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({
+      key: i
+    }, menuItem));
+  })));
+};
 const MainActions = /*#__PURE__*/function () {
   const MainActions = function (_a) {
-    var _b, _c, _d, _e;
+    var _b, _c, _d;
     var primaryAction = _a.primaryAction,
       defaultAction = _a.defaultAction,
-      _f = _a.reversed,
-      reversed = _f === void 0 ? false : _f,
-      overflowMenuItems = _a.overflowMenuItems,
-      _g = _a.showOverflowMenu,
-      showOverflowMenu = _g === void 0 ? false : _g;
+      secondaryActions = _a.secondaryActions,
+      secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
+      _e = _a.reversed,
+      reversed = _e === void 0 ? false : _e;
     var items;
+    // Build combined secondary + overflow menu items once, to be spread into the toolbar items
+    var secondaryAndOverflowMenu = [];
+    // Convert defaultAction to menu item format and prepend to combined list
+    var defaultActionMenuItem;
+    if (defaultAction) {
+      if ('component' in defaultAction) {
+        defaultActionMenuItem = defaultAction;
+      } else if ('onClick' in defaultAction) {
+        defaultActionMenuItem = {
+          label: defaultAction.label,
+          icon: defaultAction.icon,
+          onClick: defaultAction.onClick,
+          disabled: defaultAction.disabled
+        };
+      } else if ('href' in defaultAction) {
+        defaultActionMenuItem = {
+          label: defaultAction.label,
+          icon: defaultAction.icon,
+          href: defaultAction.href,
+          disabled: defaultAction.disabled
+        };
+      }
+    }
+    var combinedSecondaryOverflowItems = createTabletOverflowMenuItems(secondaryActions, secondaryOverflowMenuItems);
+    // Prepend defaultAction to the combined list if it exists
+    var allMenuItems = defaultActionMenuItem ? __spreadArray([defaultActionMenuItem], combinedSecondaryOverflowItems, true) : combinedSecondaryOverflowItems;
+    if (allMenuItems.length > 0) {
+      secondaryAndOverflowMenu.push({
+        key: 'overflowMenu',
+        node: renderSecondaryAndOverflowMenu(allMenuItems, reversed)
+      });
+    }
+    var defaultActionItem = defaultAction ? [{
+      key: 'defaultAction',
+      node: (/*#__PURE__*/React.createElement(Button, __assign({
+        classNameOverride: styles.defaultActionButton
+      }, defaultAction, {
+        reversed: (_b = defaultAction.reversed) !== null && _b !== void 0 ? _b : reversed,
+        "data-automation-id": "title-block-default-action-button",
+        "data-testid": "title-block-default-action-button"
+      })))
+    }] : [];
+    var defaultActionItemMinimized = defaultAction ? [{
+      key: 'defaultActionMinimized',
+      node: (/*#__PURE__*/React.createElement("div", {
+        className: styles.defaultActionButtonMinimized
+      }, /*#__PURE__*/React.createElement(Menu, {
+        align: "right",
+        button: /*#__PURE__*/React.createElement(IconButton, {
+          label: 'Open default action overflow menu',
+          reversed: reversed,
+          icon: /*#__PURE__*/React.createElement(Icon, {
+            name: "more_horiz",
+            isPresentational: true
+          }),
+          id: TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID
+        })
+      }, /*#__PURE__*/React.createElement(MenuList, null, defaultActionMenuItem && /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({}, defaultActionMenuItem))))))
+    }] : [];
     if (primaryAction && isMenuGroupNotButton(primaryAction)) {
       var menuContent = primaryAction.menuItems.map(function (item, idx) {
         return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({}, item, {
@@ -28,14 +108,7 @@ const MainActions = /*#__PURE__*/function () {
           "data-testid": "main-action-primary-menu-item-".concat(idx)
         }));
       });
-      items = __spreadArray(__spreadArray([], defaultAction ? [{
-        key: 'defaultAction',
-        node: (/*#__PURE__*/React.createElement(Button, __assign({}, defaultAction, {
-          reversed: (_b = defaultAction.reversed) !== null && _b !== void 0 ? _b : reversed,
-          "data-automation-id": "title-block-default-action-button",
-          "data-testid": "title-block-default-action-button"
-        })))
-      }] : [], true), primaryAction ? [{
+      items = __spreadArray(__spreadArray(__spreadArray([], defaultActionItem, true), defaultActionItemMinimized, true), primaryAction ? [{
         key: 'primaryAction',
         node: (/*#__PURE__*/React.createElement(Menu, {
           align: "right",
@@ -57,18 +130,11 @@ const MainActions = /*#__PURE__*/function () {
         }, /*#__PURE__*/React.createElement(MenuList, null, menuContent)))
       }] : [], true);
     } else {
-      items = __spreadArray(__spreadArray([], defaultAction ? [{
-        key: 'defaultAction',
-        node: (/*#__PURE__*/React.createElement(Button, __assign({}, defaultAction, {
-          reversed: (_c = defaultAction.reversed) !== null && _c !== void 0 ? _c : reversed,
-          "data-automation-id": "title-block-default-action-button",
-          "data-testid": "title-block-default-action-button"
-        })))
-      }] : [], true), primaryAction ? [{
+      items = __spreadArray(__spreadArray(__spreadArray([], defaultActionItem, true), defaultActionItemMinimized, true), primaryAction ? [{
         key: 'primaryAction',
         node: (/*#__PURE__*/React.createElement(Button, __assign({}, primaryAction, {
-          primary: (_d = primaryAction.primary) !== null && _d !== void 0 ? _d : true,
-          reversed: (_e = primaryAction.reversed) !== null && _e !== void 0 ? _e : reversed,
+          primary: (_c = primaryAction.primary) !== null && _c !== void 0 ? _c : true,
+          reversed: (_d = primaryAction.reversed) !== null && _d !== void 0 ? _d : reversed,
           "data-automation-id": "title-block-primary-action-button",
           "data-testid": "title-block-primary-action-button",
           badge: primaryAction.badge ? __assign(__assign({}, primaryAction.badge), {
@@ -77,27 +143,6 @@ const MainActions = /*#__PURE__*/function () {
         })))
       }] : [], true);
     }
-    if (overflowMenuItems && showOverflowMenu && overflowMenuItems.length > 0) {
-      items = __spreadArray([{
-        key: 'overflowMenu',
-        node: (/*#__PURE__*/React.createElement(Menu, {
-          align: "right",
-          button: /*#__PURE__*/React.createElement(IconButton, {
-            id: TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID,
-            label: "Open secondary menu",
-            reversed: reversed,
-            icon: /*#__PURE__*/React.createElement(Icon, {
-              name: "more_horiz",
-              isPresentational: true
-            })
-          })
-        }, /*#__PURE__*/React.createElement(MenuList, null, overflowMenuItems.map(function (menuItem, idx) {
-          return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({}, menuItem, {
-            key: "main-action-overflow-item-menu-item-".concat(idx)
-          }));
-        }))))
-      }], items, true);
-    }
     return /*#__PURE__*/React.createElement("div", {
       className: styles.mainActionsContainer
     }, /*#__PURE__*/React.createElement(Toolbar, {

package/dist/esm/src/TitleBlock/subcomponents/MainActions.module.scss.mjs

@@ -1,4 +1,6 @@
 var styles = {
-  "mainActionsContainer": "MainActions-module_mainActionsContainer__pk-78"
+  "mainActionsContainer": "MainActions-module_mainActionsContainer__pk-78",
+  "defaultActionButtonMinimized": "MainActions-module_defaultActionButtonMinimized__XePRS",
+  "defaultActionButton": "MainActions-module_defaultActionButton__VbER1"
 };
 export { styles as default };

package/dist/esm/src/TitleBlock/subcomponents/SecondaryActions.mjs

@@ -6,26 +6,57 @@ import { Icon } from '../../Icon/Icon.mjs';
 import { Menu, MenuList } from '../../MenuV1/index.mjs';
 import styles from '../TitleBlock.module.scss.mjs';
 import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from '../constants.mjs';
+import { convertSecondaryActionsToMenuItems } from '../utils.mjs';
 import { TitleBlockMenuItem } from './TitleBlockMenuItem.mjs';
 import { Toolbar } from './Toolbar.mjs';
 var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed) {
-  if (!secondaryOverflowMenuItems) return undefined;
-  return /*#__PURE__*/React.createElement(Menu, {
+  if (!secondaryOverflowMenuItems || secondaryOverflowMenuItems.length === 0) return undefined;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.secondaryOverflowMenu
+  }, /*#__PURE__*/React.createElement(Menu, {
+    align: "right",
+    button: /*#__PURE__*/React.createElement(Button, {
+      secondary: true,
+      reversed: reversed,
+      label: "Menu",
+      "data-automation-id": TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID,
+      "data-testid": TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID,
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        name: "keyboard_arrow_down",
+        isPresentational: true
+      }),
+      iconPosition: 'end'
+    })
+  }, /*#__PURE__*/React.createElement(MenuList, null, secondaryOverflowMenuItems.map(function (menuItem, i) {
+    return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({
+      key: i
+    }, menuItem));
+  }))));
+};
+// New: combined overflow menu (secondary actions converted + overflow menu items)
+var renderCombinedSecondaryOverflowMenu = function (secondaryActions, secondaryOverflowMenuItems, reversed) {
+  var secondaryConverted = secondaryActions ? convertSecondaryActionsToMenuItems(secondaryActions) : [];
+  var overflowItems = secondaryOverflowMenuItems !== null && secondaryOverflowMenuItems !== void 0 ? secondaryOverflowMenuItems : [];
+  if (secondaryConverted.length === 0 && overflowItems.length === 0) return undefined;
+  var combined = __spreadArray(__spreadArray([], secondaryConverted, true), overflowItems, true);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.secondaryOverflowCombinedMenu
+  }, /*#__PURE__*/React.createElement(Menu, {
     align: "right",
     button: /*#__PURE__*/React.createElement(IconButton, {
-      label: "Open secondary menu",
+      label: "Open combined secondary + overflow menu",
       reversed: reversed,
       icon: /*#__PURE__*/React.createElement(Icon, {
         name: "more_horiz",
         isPresentational: true
       }),
-      id: TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID
+      id: "".concat(TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID, "__combined")
     })
-  }, /*#__PURE__*/React.createElement(MenuList, null, secondaryOverflowMenuItems.map(function (menuItem, i) {
+  }, /*#__PURE__*/React.createElement(MenuList, null, combined.map(function (menuItem, i) {
     return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({
       key: i
     }, menuItem));
-  })));
+  }))));
 };
 // Unfortunately, you'll notice below, that I needed to use the array index,
 // against react best practices (https://reactjs.org/docs/lists-and-keys.html)
@@ -40,9 +71,10 @@ const SecondaryActions = /*#__PURE__*/function () {
     var secondaryActionsAsToolbarItems = secondaryActions ? secondaryActions.map(function (action, i) {
       if ('menuItems' in action) {
         return {
-          key: "".concat(i),
-          // We shouldn't use an index here, see note above
-          node: (/*#__PURE__*/React.createElement(Menu, {
+          key: "titleblock_secondary_action_".concat(i),
+          node: (/*#__PURE__*/React.createElement("div", {
+            className: styles.secondaryButtonContainer
+          }, /*#__PURE__*/React.createElement(Menu, {
             align: "right",
             button: /*#__PURE__*/React.createElement(Button, {
               secondary: true,
@@ -58,7 +90,7 @@ const SecondaryActions = /*#__PURE__*/function () {
             return /*#__PURE__*/React.createElement(TitleBlockMenuItem, __assign({
               key: i2
             }, menuItem));
-          }))))
+          })))))
         };
       } else {
         if ('onClick' in action && 'href' in action) {
@@ -67,21 +99,26 @@ const SecondaryActions = /*#__PURE__*/function () {
         }
         return {
           key: "".concat(i),
-          // We shouldn't use an index here, see note above
-          node: (/*#__PURE__*/React.createElement(Button, __assign({
+          node: (/*#__PURE__*/React.createElement("div", {
+            className: styles.secondaryButtonContainer
+          }, /*#__PURE__*/React.createElement(Button, __assign({
             secondary: true,
             reversed: reversed
           }, action, {
             "data-automation-id": "title-block-secondary-actions-button",
             "data-testid": "title-block-secondary-actions-button"
-          })))
+          }))))
         };
       }
     }) : [];
     var overflowMenu = renderSecondaryOverflowMenu(secondaryOverflowMenuItems, reversed);
-    var toolbarItems = __spreadArray(__spreadArray([], secondaryActionsAsToolbarItems, true), overflowMenu ? [{
+    var combinedOverflowMenu = renderCombinedSecondaryOverflowMenu(secondaryActions, secondaryOverflowMenuItems, reversed);
+    var toolbarItems = __spreadArray(__spreadArray(__spreadArray([], secondaryActionsAsToolbarItems, true), overflowMenu ? [{
       key: 'overflowMenu',
       node: overflowMenu
+    }] : [], true), combinedOverflowMenu ? [{
+      key: 'combinedOverflowMenu',
+      node: combinedOverflowMenu
     }] : [], true);
     return /*#__PURE__*/React.createElement("div", {
       className: styles.secondaryActionsContainer