@kaizen/components 0.0.0-canary-guidance-block-codemod-20251215033932 → 0.0.0-canary-01-titleblock-20251216220648

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

@@ -10,9 +10,8 @@ import { Select } from '../Select/Select.mjs';
 import { Tag } from '../Tag/Tag.mjs';
 import { useMediaQueries } from '../utils/useMediaQueries.mjs';
 import { MainActions } from './subcomponents/MainActions.mjs';
-import { MobileActions } from './subcomponents/MobileActions.mjs';
 import { SecondaryActions } from './subcomponents/SecondaryActions.mjs';
-import { isReversed, createTabletOverflowMenuItems } from './utils.mjs';
+import { isReversed } from './utils.mjs';
 import styles from './TitleBlock.module.scss.mjs';
 var renderTag = function (surveyStatus) {
   var tagVariant;
@@ -108,6 +107,12 @@ var Breadcrumb = function (_a) {
       name: "arrow_back",
       isPresentational: true,
       shouldMirrorInRTL: true
+    })), /*#__PURE__*/React.createElement("div", {
+      className: styles.staticIcon
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "arrow_back",
+      isPresentational: true,
+      shouldMirrorInRTL: true
     })), /*#__PURE__*/React.createElement("span", {
       className: styles.breadcrumbTextLink,
       "data-automation-id": textAutomationId,
@@ -164,7 +169,7 @@ var renderNavigationTabs = function (navigationTabs, collapse, ariaLabel) {
  */
 const TitleBlock = /*#__PURE__*/function () {
   const TitleBlock = function (_a) {
-    var _b, _c, _d, _e;
+    var _b, _c, _d;
     var title = _a.title,
       variant = _a.variant,
       breadcrumb = _a.breadcrumb,
@@ -180,32 +185,30 @@ const TitleBlock = /*#__PURE__*/function () {
       secondaryActions = _a.secondaryActions,
       secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
       navigationTabs = _a.navigationTabs,
-      _f = _a.collapseNavigationAreaWhenPossible,
-      collapseNavigationAreaWhenPossible = _f === void 0 ? false : _f,
+      _e = _a.collapseNavigationAreaWhenPossible,
+      collapseNavigationAreaWhenPossible = _e === void 0 ? false : _e,
       textDirection = _a.textDirection,
       surveyStatus = _a.surveyStatus,
       id = _a.id,
-      _g = _a.titleAutomationId,
-      titleAutomationId = _g === void 0 ? 'TitleBlock__Title' : _g,
-      _h = _a.avatarAutomationId,
-      avatarAutomationId = _h === void 0 ? 'TitleBlock__Avatar' : _h,
-      _j = _a.subtitleAutomationId,
-      subtitleAutomationId = _j === void 0 ? 'TitleBlock__Subtitle' : _j,
-      _k = _a.sectionTitleAutomationId,
-      sectionTitleAutomationId = _k === void 0 ? 'TitleBlock__SectionTitle' : _k,
-      _l = _a.sectionTitleDescriptionAutomationId,
-      sectionTitleDescriptionAutomationId = _l === void 0 ? 'TitleBlock__SectionTitleDescription' : _l,
-      _m = _a.breadcrumbAutomationId,
-      breadcrumbAutomationId = _m === void 0 ? 'TitleBlock__Breadcrumb' : _m,
-      _o = _a.breadcrumbTextAutomationId,
-      breadcrumbTextAutomationId = _o === void 0 ? 'TitleBlock__BreadcrumbText' : _o,
-      _p = _a.autoHideMobileActionsMenu,
-      autoHideMobileActionsMenu = _p === void 0 ? false : _p;
+      _f = _a.titleAutomationId,
+      titleAutomationId = _f === void 0 ? 'TitleBlock__Title' : _f,
+      _g = _a.avatarAutomationId,
+      avatarAutomationId = _g === void 0 ? 'TitleBlock__Avatar' : _g,
+      _h = _a.subtitleAutomationId,
+      subtitleAutomationId = _h === void 0 ? 'TitleBlock__Subtitle' : _h,
+      _j = _a.sectionTitleAutomationId,
+      sectionTitleAutomationId = _j === void 0 ? 'TitleBlock__SectionTitle' : _j,
+      _k = _a.sectionTitleDescriptionAutomationId,
+      sectionTitleDescriptionAutomationId = _k === void 0 ? 'TitleBlock__SectionTitleDescription' : _k,
+      _l = _a.breadcrumbAutomationId,
+      breadcrumbAutomationId = _l === void 0 ? 'TitleBlock__Breadcrumb' : _l,
+      _m = _a.breadcrumbTextAutomationId,
+      breadcrumbTextAutomationId = _m === void 0 ? 'TitleBlock__BreadcrumbText' : _m;
     var hasNavigationTabs = navigationTabs && navigationTabs.length > 0;
     var collapseNavigationArea = collapseNavigationAreaWhenPossible && !hasNavigationTabs && secondaryActions === undefined;
-    var _q = useMediaQueries().queries,
-      isSmall = _q.isSmall,
-      isMedium = _q.isMedium;
+    var _o = useMediaQueries().queries,
+      isSmall = _o.isSmall,
+      isMedium = _o.isMedium;
     var isSmallOrMediumViewport = isMedium || isSmall;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       id: id,
@@ -258,19 +261,19 @@ const TitleBlock = /*#__PURE__*/function () {
       variant: "secondary",
       reversed: true,
       fullWidth: true
-    }))))))), ((_d = (_c = primaryAction !== null && primaryAction !== void 0 ? primaryAction : defaultAction) !== null && _c !== void 0 ? _c : secondaryActions) !== null && _d !== void 0 ? _d : secondaryOverflowMenuItems) && (/*#__PURE__*/React.createElement(MainActions, {
+    }))))))), ((_c = primaryAction !== null && primaryAction !== void 0 ? primaryAction : defaultAction) !== null && _c !== void 0 ? _c : secondaryActions) && (/*#__PURE__*/React.createElement(MainActions, {
       primaryAction: primaryAction,
       defaultAction: defaultAction,
-      reversed: isReversed(variant),
-      overflowMenuItems: createTabletOverflowMenuItems(secondaryActions, secondaryOverflowMenuItems),
-      showOverflowMenu: isSmallOrMediumViewport
+      secondaryActions: secondaryActions,
+      secondaryOverflowMenuItems: secondaryOverflowMenuItems,
+      reversed: isReversed(variant)
     }))))), /*#__PURE__*/React.createElement("div", {
       className: styles.rowBelowSeparator
     }, /*#__PURE__*/React.createElement("div", {
       className: styles.rowBelowSeparatorInner
     }, /*#__PURE__*/React.createElement("div", {
       className: styles.rowBelowSeparatorInnerContent
-    }, ((_e = sectionTitle !== null && sectionTitle !== void 0 ? sectionTitle : sectionTitleDescription) !== null && _e !== void 0 ? _e : renderSectionTitle) && (/*#__PURE__*/React.createElement("div", {
+    }, ((_d = sectionTitle !== null && sectionTitle !== void 0 ? sectionTitle : sectionTitleDescription) !== null && _d !== void 0 ? _d : renderSectionTitle) && (/*#__PURE__*/React.createElement("div", {
       className: styles.sectionTitleContainer
     }, /*#__PURE__*/React.createElement("div", {
       className: styles.sectionTitleInner
@@ -283,14 +286,7 @@ const TitleBlock = /*#__PURE__*/function () {
       secondaryActions: secondaryActions,
       secondaryOverflowMenuItems: secondaryOverflowMenuItems,
       reversed: isReversed(variant)
-    }))))), /*#__PURE__*/React.createElement(MobileActions, {
-      primaryAction: primaryAction,
-      defaultAction: defaultAction,
-      secondaryActions: secondaryActions,
-      secondaryOverflowMenuItems: secondaryOverflowMenuItems,
-      drawerHandleLabelIconPosition: primaryAction && 'iconPosition' in primaryAction ? primaryAction.iconPosition : undefined,
-      autoHide: autoHideMobileActionsMenu
-    })));
+    })))))));
   };
   TitleBlock.displayName = 'TitleBlock';
   return TitleBlock;

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

@@ -45,9 +45,13 @@ var styles = {
   "navigationTabEdgeShadowRight": "TitleBlock-module_navigationTabEdgeShadowRight__xkIWc",
   "navigationTabEdgeShadowLeft": "TitleBlock-module_navigationTabEdgeShadowLeft__9pGhR",
   "secondaryActionsContainer": "TitleBlock-module_secondaryActionsContainer__-4q0l",
+  "secondaryOverflowCombinedMenu": "TitleBlock-module_secondaryOverflowCombinedMenu__CTddK",
+  "secondaryButtonContainer": "TitleBlock-module_secondaryButtonContainer__xFL9X",
+  "secondaryOverflowMenu": "TitleBlock-module_secondaryOverflowMenu__gvmgW",
   "slide-fade": "TitleBlock-module_slide-fade__o5TnP",
   "reverse-slide-fade": "TitleBlock-module_reverse-slide-fade__LZZ98",
   "breadcrumbText": "TitleBlock-module_breadcrumbText__vDi0k",
-  "circle": "TitleBlock-module_circle__68z-T"
+  "circle": "TitleBlock-module_circle__68z-T",
+  "staticIcon": "TitleBlock-module_staticIcon__5jeBS"
 };
 export { styles as default };

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