@kaizen/components 0.0.0-canary-guidance-block-codemod-20251215033932 → 0.0.0-canary-02-titleblock-20251217005236

package/codemods/migrateGuidanceBlockActionsToActionsSlot/transformActionsToActionsSlot.spec.ts

@@ -194,4 +194,109 @@ describe('transformActionsToActionsSlot()', () => {
       printAst(outputAst).replace(/\s+/g, ' '),
     )
   })
+
+  it('removes primary: true and applies variantOverride as secondary for primary actions', () => {
+    const inputAst = parseJsx(`
+      <GuidanceBlock
+        actions={{
+          primary: {
+            label: 'Action',
+            onClick: () => {},
+            primary: true,
+          },
+        }}
+      />`)
+    const outputAst = parseJsx(`
+      <GuidanceBlock
+        actionsSlot={<><Button onPress={() => {}} variant="secondary" size="large" icon={<Icon name="arrow_forward" shouldMirrorInRTL isPresentational/>} iconPosition="end">Action</Button></>}
+      />
+      `)
+
+    expect(transformInput(inputAst)).toBe(printAst(outputAst))
+  })
+
+  it('removes secondary: true and applies variantOverride as secondary for primary actions', () => {
+    const inputAst = parseJsx(`
+      <GuidanceBlock
+        actions={{
+          primary: {
+            label: 'Action',
+            onClick: () => {},
+            secondary: true,
+          },
+        }}
+      />`)
+    const outputAst = parseJsx(`
+      <GuidanceBlock
+        actionsSlot={<><Button onPress={() => {}} variant="secondary" size="large" icon={<Icon name="arrow_forward" shouldMirrorInRTL isPresentational/>} iconPosition="end">Action</Button></>}
+      />
+      `)
+
+    expect(transformInput(inputAst)).toBe(printAst(outputAst))
+  })
+
+  it('removes primary: true and applies variantOverride as tertiary for secondary actions', () => {
+    const inputAst = parseJsx(`
+      <GuidanceBlock
+        actions={{
+          secondary: {
+            label: 'Secondary Action',
+            onClick: () => {},
+            primary: true,
+          },
+        }}
+      />`)
+    const outputAst = parseJsx(`
+      <GuidanceBlock
+        actionsSlot={<><Button onPress={() => {}} variant="tertiary" size="large">Secondary Action</Button></>}
+      />
+      `)
+
+    expect(transformInput(inputAst)).toBe(printAst(outputAst))
+  })
+
+  it('removes secondary: true and applies variantOverride as tertiary for secondary actions', () => {
+    const inputAst = parseJsx(`
+      <GuidanceBlock
+        actions={{
+          secondary: {
+            label: 'Secondary Action',
+            onClick: () => {},
+            secondary: true,
+          },
+        }}
+      />`)
+    const outputAst = parseJsx(`
+      <GuidanceBlock
+        actionsSlot={<><Button onPress={() => {}} variant="tertiary" size="large">Secondary Action</Button></>}
+      />
+      `)
+
+    expect(transformInput(inputAst)).toBe(printAst(outputAst))
+  })
+
+  it('applies correct variants for both primary and secondary actions with primary: true', () => {
+    const inputAst = parseJsx(`
+      <GuidanceBlock
+        actions={{
+          primary: {
+            label: 'Primary',
+            onClick: () => {},
+            primary: true,
+          },
+          secondary: {
+            label: 'Secondary',
+            onClick: () => {},
+            primary: true,
+          },
+        }}
+      />`)
+    const outputAst = parseJsx(`
+      <GuidanceBlock
+        actionsSlot={<><Button onPress={() => {}} variant="secondary" size="large" icon={<Icon name="arrow_forward" shouldMirrorInRTL isPresentational/>} iconPosition="end">Primary</Button><Button onPress={() => {}} variant="tertiary" size="large">Secondary</Button></>}
+      />
+      `)
+
+    expect(transformInput(inputAst)).toBe(printAst(outputAst))
+  })
 })

package/codemods/utils/transformV1ButtonPropsToButtonOrLinkButton.ts

@@ -64,9 +64,9 @@ export const transformButtonProp = (
       return oldValue ? createStringProp('size', buttonSizeMap[oldValue]) : undefined
     }
     case 'primary':
-      return createStringProp('variant', 'primary')
+      return null
     case 'secondary':
-      return createStringProp('variant', 'tertiary')
+      return null
     case 'destructive':
       return null
     default:
@@ -89,7 +89,6 @@ export const transformV1ButtonPropsToButtonOrLinkButton = (
 ): TransformButtonProp => {
   let childrenValue: ts.JsxAttributeValue | undefined
   let hasSizeProp = false
-  let hasVariant = false
   let hasLinkAttr = false
   let hasIconProp = false
 
@@ -122,10 +121,6 @@ export const transformV1ButtonPropsToButtonOrLinkButton = (
         ]
       }
 
-      if (propName === 'primary' || propName === 'secondary' || variantOverride) {
-        hasVariant = true
-      }
-
       if (propName === 'size') {
         hasSizeProp = true
       }
@@ -179,13 +174,8 @@ export const transformV1ButtonPropsToButtonOrLinkButton = (
     return acc
   }, [])
 
-  if (!hasVariant) {
-    newProps.push(createStringProp('variant', 'secondary'))
-  }
-
-  if (variantOverride) {
-    newProps.push(createStringProp('variant', variantOverride))
-  }
+  // Always add variant from variantOverride, or default to 'secondary'
+  newProps.push(createStringProp('variant', variantOverride ?? 'secondary'))
 
   if (!hasSizeProp) {
     newProps.push(createStringProp('size', 'large'))

package/dist/cjs/src/MenuV1/index.cjs

@@ -1,17 +1,18 @@
 'use strict';
 
 var Menu$1 = require('./Menu.cjs');
-var MenuHeading$1 = require('./subcomponents/MenuHeading/MenuHeading.cjs');
+require('tslib');
+require('react');
+require('classnames');
+require('../Heading/Heading.cjs');
 var MenuItem$1 = require('./subcomponents/MenuItem/MenuItem.cjs');
 var MenuList$1 = require('./subcomponents/MenuList/MenuList.cjs');
 require('./subcomponents/StatelessMenu/StatelessMenu.cjs');
 
 // Since we can't add a deprecation flag on a * export
 var Menu = Menu$1.Menu;
-var MenuHeading = MenuHeading$1.MenuHeading;
 var MenuItem = MenuItem$1.MenuItem;
 var MenuList = MenuList$1.MenuList;
 exports.Menu = Menu;
-exports.MenuHeading = MenuHeading;
 exports.MenuItem = MenuItem;
 exports.MenuList = MenuList;

package/dist/cjs/src/TitleBlock/TitleBlock.cjs

@@ -12,7 +12,6 @@ var Select = require('../Select/Select.cjs');
 var Tag = require('../Tag/Tag.cjs');
 var useMediaQueries = require('../utils/useMediaQueries.cjs');
 var MainActions = require('./subcomponents/MainActions.cjs');
-var MobileActions = require('./subcomponents/MobileActions.cjs');
 var SecondaryActions = require('./subcomponents/SecondaryActions.cjs');
 var utils = require('./utils.cjs');
 var TitleBlock_module = require('./TitleBlock.module.scss.cjs');
@@ -117,6 +116,12 @@ var Breadcrumb = function (_a) {
       name: "arrow_back",
       isPresentational: true,
       shouldMirrorInRTL: true
+    })), React__default.default.createElement("div", {
+      className: TitleBlock_module.staticIcon
+    }, React__default.default.createElement(Icon.Icon, {
+      name: "arrow_back",
+      isPresentational: true,
+      shouldMirrorInRTL: true
     })), React__default.default.createElement("span", {
       className: TitleBlock_module.breadcrumbTextLink,
       "data-automation-id": textAutomationId,
@@ -172,7 +177,7 @@ var renderNavigationTabs = function (navigationTabs, collapse, ariaLabel) {
  * {@link https://cultureamp.design/?path=/docs/components-titleblock-api-specification--docs Storybook}
  */
 var TitleBlock = function (_a) {
-  var _b, _c, _d, _e;
+  var _b, _c, _d;
   var title = _a.title,
     variant = _a.variant,
     breadcrumb = _a.breadcrumb,
@@ -188,32 +193,30 @@ var TitleBlock = function (_a) {
     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.useMediaQueries().queries,
-    isSmall = _q.isSmall,
-    isMedium = _q.isMedium;
+  var _o = useMediaQueries.useMediaQueries().queries,
+    isSmall = _o.isSmall,
+    isMedium = _o.isMedium;
   var isSmallOrMediumViewport = isMedium || isSmall;
   return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("div", {
     id: id,
@@ -266,19 +269,19 @@ var TitleBlock = function (_a) {
     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) && React__default.default.createElement(MainActions.MainActions, {
+  })))))), ((_c = primaryAction !== null && primaryAction !== void 0 ? primaryAction : defaultAction) !== null && _c !== void 0 ? _c : secondaryActions) && React__default.default.createElement(MainActions.MainActions, {
     primaryAction: primaryAction,
     defaultAction: defaultAction,
-    reversed: utils.isReversed(variant),
-    overflowMenuItems: utils.createTabletOverflowMenuItems(secondaryActions, secondaryOverflowMenuItems),
-    showOverflowMenu: isSmallOrMediumViewport
+    secondaryActions: secondaryActions,
+    secondaryOverflowMenuItems: secondaryOverflowMenuItems,
+    reversed: utils.isReversed(variant)
   })))), React__default.default.createElement("div", {
     className: TitleBlock_module.rowBelowSeparator
   }, React__default.default.createElement("div", {
     className: TitleBlock_module.rowBelowSeparatorInner
   }, React__default.default.createElement("div", {
     className: TitleBlock_module.rowBelowSeparatorInnerContent
-  }, ((_e = sectionTitle !== null && sectionTitle !== void 0 ? sectionTitle : sectionTitleDescription) !== null && _e !== void 0 ? _e : renderSectionTitle) && React__default.default.createElement("div", {
+  }, ((_d = sectionTitle !== null && sectionTitle !== void 0 ? sectionTitle : sectionTitleDescription) !== null && _d !== void 0 ? _d : renderSectionTitle) && React__default.default.createElement("div", {
     className: TitleBlock_module.sectionTitleContainer
   }, React__default.default.createElement("div", {
     className: TitleBlock_module.sectionTitleInner
@@ -291,14 +294,7 @@ var TitleBlock = function (_a) {
     secondaryActions: secondaryActions,
     secondaryOverflowMenuItems: secondaryOverflowMenuItems,
     reversed: utils.isReversed(variant)
-  })))), React__default.default.createElement(MobileActions.MobileActions, {
-    primaryAction: primaryAction,
-    defaultAction: defaultAction,
-    secondaryActions: secondaryActions,
-    secondaryOverflowMenuItems: secondaryOverflowMenuItems,
-    drawerHandleLabelIconPosition: primaryAction && 'iconPosition' in primaryAction ? primaryAction.iconPosition : undefined,
-    autoHide: autoHideMobileActionsMenu
-  })));
+  }))))));
 };
 TitleBlock.displayName = 'TitleBlock';
 exports.TitleBlock = TitleBlock;

package/dist/cjs/src/TitleBlock/TitleBlock.module.scss.cjs

@@ -47,9 +47,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"
 };
 module.exports = styles;

package/dist/cjs/src/TitleBlock/subcomponents/MainActions.cjs

@@ -6,6 +6,8 @@ var Button = require('../../ButtonV1/Button/Button.cjs');
 var IconButton = require('../../ButtonV1/IconButton/IconButton.cjs');
 var Icon = require('../../Icon/Icon.cjs');
 var index = require('../../MenuV1/index.cjs');
+require('../TitleBlock.cjs');
+require('./NavigationTabs.cjs');
 var constants = require('../constants.cjs');
 var utils = require('../utils.cjs');
 var TitleBlockMenuItem = require('./TitleBlockMenuItem.cjs');
@@ -17,16 +19,94 @@ function _interopDefault(e) {
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
+var renderSecondaryAndOverflowMenu = function (secondaryOverflowMenuItems, reversed) {
+  if (!secondaryOverflowMenuItems) return undefined;
+  return React__default.default.createElement(index.Menu, {
+    align: "right",
+    button: React__default.default.createElement(IconButton.IconButton, {
+      label: 'Open secondary and overflow menu',
+      reversed: reversed,
+      icon: React__default.default.createElement(Icon.Icon, {
+        name: "more_horiz",
+        isPresentational: true
+      }),
+      id: constants.TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID,
+      classNameOverride: MainActions_module.overflowMenuButton
+    })
+  }, React__default.default.createElement(index.MenuList, null, secondaryOverflowMenuItems.map(function (menuItem, i) {
+    return React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__assign({
+      key: i
+    }, menuItem));
+  })));
+};
 var 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 = utils.createTabletOverflowMenuItems(secondaryActions, secondaryOverflowMenuItems);
+  // Prepend defaultAction to the combined list if it exists
+  var allMenuItems = defaultActionMenuItem ? tslib.__spreadArray([defaultActionMenuItem], combinedSecondaryOverflowItems, true) : combinedSecondaryOverflowItems;
+  if (allMenuItems.length > 0) {
+    secondaryAndOverflowMenu.push({
+      key: 'overflowMenu',
+      node: renderSecondaryAndOverflowMenu(allMenuItems, reversed)
+    });
+  }
+  var defaultActionItem = defaultAction ? [{
+    key: 'defaultAction',
+    node: React__default.default.createElement(Button.Button, tslib.__assign({
+      classNameOverride: MainActions_module.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: React__default.default.createElement("div", {
+      className: MainActions_module.defaultActionButtonMinimized
+    }, React__default.default.createElement(index.Menu, {
+      align: "right",
+      button: React__default.default.createElement(IconButton.IconButton, {
+        label: 'Open default action overflow menu',
+        reversed: reversed,
+        icon: React__default.default.createElement(Icon.Icon, {
+          name: "more_horiz",
+          isPresentational: true
+        }),
+        id: constants.TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID
+      })
+    }, React__default.default.createElement(index.MenuList, null, defaultActionMenuItem && React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__assign({}, defaultActionMenuItem)))))
+  }] : [];
   if (primaryAction && utils.isMenuGroupNotButton(primaryAction)) {
     var menuContent = primaryAction.menuItems.map(function (item, idx) {
       return React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__assign({}, item, {
@@ -35,14 +115,7 @@ var MainActions = function (_a) {
         "data-testid": "main-action-primary-menu-item-".concat(idx)
       }));
     });
-    items = tslib.__spreadArray(tslib.__spreadArray([], defaultAction ? [{
-      key: 'defaultAction',
-      node: React__default.default.createElement(Button.Button, tslib.__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 = tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([], defaultActionItem, true), defaultActionItemMinimized, true), primaryAction ? [{
       key: 'primaryAction',
       node: React__default.default.createElement(index.Menu, {
         align: "right",
@@ -64,18 +137,11 @@ var MainActions = function (_a) {
       }, React__default.default.createElement(index.MenuList, null, menuContent))
     }] : [], true);
   } else {
-    items = tslib.__spreadArray(tslib.__spreadArray([], defaultAction ? [{
-      key: 'defaultAction',
-      node: React__default.default.createElement(Button.Button, tslib.__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 = tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([], defaultActionItem, true), defaultActionItemMinimized, true), primaryAction ? [{
       key: 'primaryAction',
       node: React__default.default.createElement(Button.Button, tslib.__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 ? tslib.__assign(tslib.__assign({}, primaryAction.badge), {
@@ -84,27 +150,6 @@ var MainActions = function (_a) {
       }))
     }] : [], true);
   }
-  if (overflowMenuItems && showOverflowMenu && overflowMenuItems.length > 0) {
-    items = tslib.__spreadArray([{
-      key: 'overflowMenu',
-      node: React__default.default.createElement(index.Menu, {
-        align: "right",
-        button: React__default.default.createElement(IconButton.IconButton, {
-          id: constants.TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID,
-          label: "Open secondary menu",
-          reversed: reversed,
-          icon: React__default.default.createElement(Icon.Icon, {
-            name: "more_horiz",
-            isPresentational: true
-          })
-        })
-      }, React__default.default.createElement(index.MenuList, null, overflowMenuItems.map(function (menuItem, idx) {
-        return React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__assign({}, menuItem, {
-          key: "main-action-overflow-item-menu-item-".concat(idx)
-        }));
-      })))
-    }], items, true);
-  }
   return React__default.default.createElement("div", {
     className: MainActions_module.mainActionsContainer
   }, React__default.default.createElement(Toolbar.Toolbar, {

package/dist/cjs/src/TitleBlock/subcomponents/MainActions.module.scss.cjs

@@ -1,6 +1,8 @@
 'use strict';
 
 var styles = {
-  "mainActionsContainer": "MainActions-module_mainActionsContainer__pk-78"
+  "mainActionsContainer": "MainActions-module_mainActionsContainer__pk-78",
+  "defaultActionButtonMinimized": "MainActions-module_defaultActionButtonMinimized__XePRS",
+  "defaultActionButton": "MainActions-module_defaultActionButton__VbER1"
 };
 module.exports = styles;

package/dist/cjs/src/TitleBlock/subcomponents/SecondaryActions.cjs

@@ -8,6 +8,7 @@ var Icon = require('../../Icon/Icon.cjs');
 var index = require('../../MenuV1/index.cjs');
 var TitleBlock_module = require('../TitleBlock.module.scss.cjs');
 var constants = require('../constants.cjs');
+var utils = require('../utils.cjs');
 var TitleBlockMenuItem = require('./TitleBlockMenuItem.cjs');
 var Toolbar = require('./Toolbar.cjs');
 function _interopDefault(e) {
@@ -17,23 +18,53 @@ function _interopDefault(e) {
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed) {
-  if (!secondaryOverflowMenuItems) return undefined;
-  return React__default.default.createElement(index.Menu, {
+  if (!secondaryOverflowMenuItems || secondaryOverflowMenuItems.length === 0) return undefined;
+  return React__default.default.createElement("div", {
+    className: TitleBlock_module.secondaryOverflowMenu
+  }, React__default.default.createElement(index.Menu, {
+    align: "right",
+    button: React__default.default.createElement(Button.Button, {
+      secondary: true,
+      reversed: reversed,
+      label: "Menu",
+      "data-automation-id": constants.TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID,
+      "data-testid": constants.TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID,
+      icon: React__default.default.createElement(Icon.Icon, {
+        name: "keyboard_arrow_down",
+        isPresentational: true
+      }),
+      iconPosition: 'end'
+    })
+  }, React__default.default.createElement(index.MenuList, null, secondaryOverflowMenuItems.map(function (menuItem, i) {
+    return React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__assign({
+      key: i
+    }, menuItem));
+  }))));
+};
+// New: combined overflow menu (secondary actions converted + overflow menu items)
+var renderCombinedSecondaryOverflowMenu = function (secondaryActions, secondaryOverflowMenuItems, reversed) {
+  var secondaryConverted = secondaryActions ? utils.convertSecondaryActionsToMenuItems(secondaryActions) : [];
+  var overflowItems = secondaryOverflowMenuItems !== null && secondaryOverflowMenuItems !== void 0 ? secondaryOverflowMenuItems : [];
+  if (secondaryConverted.length === 0 && overflowItems.length === 0) return undefined;
+  var combined = tslib.__spreadArray(tslib.__spreadArray([], secondaryConverted, true), overflowItems, true);
+  return React__default.default.createElement("div", {
+    className: TitleBlock_module.secondaryOverflowCombinedMenu
+  }, React__default.default.createElement(index.Menu, {
     align: "right",
     button: React__default.default.createElement(IconButton.IconButton, {
-      label: "Open secondary menu",
+      label: "Open combined secondary + overflow menu",
       reversed: reversed,
       icon: React__default.default.createElement(Icon.Icon, {
         name: "more_horiz",
         isPresentational: true
       }),
-      id: constants.TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID
+      id: "".concat(constants.TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID, "__combined")
     })
-  }, React__default.default.createElement(index.MenuList, null, secondaryOverflowMenuItems.map(function (menuItem, i) {
+  }, React__default.default.createElement(index.MenuList, null, combined.map(function (menuItem, i) {
     return React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__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)
@@ -47,9 +78,10 @@ var SecondaryActions = function (_a) {
   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: React__default.default.createElement(index.Menu, {
+        key: "titleblock_secondary_action_".concat(i),
+        node: React__default.default.createElement("div", {
+          className: TitleBlock_module.secondaryButtonContainer
+        }, React__default.default.createElement(index.Menu, {
           align: "right",
           button: React__default.default.createElement(Button.Button, {
             secondary: true,
@@ -65,7 +97,7 @@ var SecondaryActions = function (_a) {
           return React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__assign({
             key: i2
           }, menuItem));
-        })))
+        }))))
       };
     } else {
       if ('onClick' in action && 'href' in action) {
@@ -74,21 +106,26 @@ var SecondaryActions = function (_a) {
       }
       return {
         key: "".concat(i),
-        // We shouldn't use an index here, see note above
-        node: React__default.default.createElement(Button.Button, tslib.__assign({
+        node: React__default.default.createElement("div", {
+          className: TitleBlock_module.secondaryButtonContainer
+        }, React__default.default.createElement(Button.Button, tslib.__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 = tslib.__spreadArray(tslib.__spreadArray([], secondaryActionsAsToolbarItems, true), overflowMenu ? [{
+  var combinedOverflowMenu = renderCombinedSecondaryOverflowMenu(secondaryActions, secondaryOverflowMenuItems, reversed);
+  var toolbarItems = tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([], secondaryActionsAsToolbarItems, true), overflowMenu ? [{
     key: 'overflowMenu',
     node: overflowMenu
+  }] : [], true), combinedOverflowMenu ? [{
+    key: 'combinedOverflowMenu',
+    node: combinedOverflowMenu
   }] : [], true);
   return React__default.default.createElement("div", {
     className: TitleBlock_module.secondaryActionsContainer

package/dist/esm/src/MenuV1/index.mjs

@@ -1,12 +1,14 @@
 import { Menu as Menu$1 } from './Menu.mjs';
-import { MenuHeading as MenuHeading$1 } from './subcomponents/MenuHeading/MenuHeading.mjs';
+import 'tslib';
+import 'react';
+import 'classnames';
+import '../Heading/Heading.mjs';
 import { MenuItem as MenuItem$1 } from './subcomponents/MenuItem/MenuItem.mjs';
 import { MenuList as MenuList$1 } from './subcomponents/MenuList/MenuList.mjs';
 import './subcomponents/StatelessMenu/StatelessMenu.mjs';
 
 // Since we can't add a deprecation flag on a * export
 var Menu = Menu$1;
-var MenuHeading = MenuHeading$1;
 var MenuItem = MenuItem$1;
 var MenuList = MenuList$1;
-export { Menu, MenuHeading, MenuItem, MenuList };
+export { Menu, MenuItem, MenuList };