@kaizen/components 0.0.0-canary-04-titleblock-logic-20251211225600 → 0.0.0-canary-guidance-block-codemod-20251212045145

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

@@ -8,7 +8,6 @@ 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) {
@@ -18,60 +17,23 @@ function _interopDefault(e) {
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed) {
-  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) {
-  console.log('this is renderCombinedSecondaryOverflowMenu called');
-  var secondaryConverted = secondaryActions ? utils.convertSecondaryActionsToMenuItems(secondaryActions) : [];
-  var overflowItems = secondaryOverflowMenuItems !== null && secondaryOverflowMenuItems !== void 0 ? secondaryOverflowMenuItems : [];
-  console.log('this is secondaryConverted', secondaryConverted);
-  console.log('this is secondaryConverted:', secondaryConverted);
-  console.log('this is overflowItems:', overflowItems);
-  // Only render if we have at least one secondary action AND at least one overflow item to avoid duplicating single menus
-  // || overflowItems.length === 0
-  if (secondaryConverted.length === 0) return undefined;
-  var combined = tslib.__spreadArray(tslib.__spreadArray([], secondaryConverted, true), overflowItems, true);
-  console.log('this is combined:', combined);
-  return React__default.default.createElement("div", {
-    className: TitleBlock_module.secondaryOverflowCombinedMenu
-  }, React__default.default.createElement(index.Menu, {
+  if (!secondaryOverflowMenuItems) return undefined;
+  return React__default.default.createElement(index.Menu, {
     align: "right",
     button: React__default.default.createElement(IconButton.IconButton, {
-      label: "Open combined secondary + overflow menu",
+      label: "Open secondary menu",
       reversed: reversed,
       icon: React__default.default.createElement(Icon.Icon, {
         name: "more_horiz",
         isPresentational: true
       }),
-      id: "".concat(constants.TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID, "__combined")
+      id: constants.TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID
     })
-  }, React__default.default.createElement(index.MenuList, null, combined.map(function (menuItem, i) {
+  }, React__default.default.createElement(index.MenuList, null, secondaryOverflowMenuItems.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)
@@ -85,10 +47,9 @@ var SecondaryActions = function (_a) {
   var secondaryActionsAsToolbarItems = secondaryActions ? secondaryActions.map(function (action, i) {
     if ('menuItems' in action) {
       return {
-        key: "titleblock_secondary_action_".concat(i),
-        node: React__default.default.createElement("div", {
-          className: TitleBlock_module.secondaryButtonContainer
-        }, React__default.default.createElement(index.Menu, {
+        key: "".concat(i),
+        // We shouldn't use an index here, see note above
+        node: React__default.default.createElement(index.Menu, {
           align: "right",
           button: React__default.default.createElement(Button.Button, {
             secondary: true,
@@ -104,7 +65,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) {
@@ -113,28 +74,21 @@ var SecondaryActions = function (_a) {
       }
       return {
         key: "".concat(i),
-        node: React__default.default.createElement("div", {
-          className: TitleBlock_module.secondaryButtonContainer
-        }, React__default.default.createElement(Button.Button, tslib.__assign({
+        // We shouldn't use an index here, see note above
+        node: 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 combinedOverflowMenu = renderCombinedSecondaryOverflowMenu(secondaryActions, secondaryOverflowMenuItems, reversed);
-  console.log('SecondaryActions this is overflowMenu:', overflowMenu);
-  console.log('SecondaryActions this is combinedOverflowMenu :', combinedOverflowMenu);
-  var toolbarItems = tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([], secondaryActionsAsToolbarItems, true), overflowMenu ? [{
+  var toolbarItems = 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,14 +1,12 @@
 import { Menu as Menu$1 } from './Menu.mjs';
-import 'tslib';
-import 'react';
-import 'classnames';
-import '../Heading/Heading.mjs';
+import { MenuHeading as MenuHeading$1 } from './subcomponents/MenuHeading/MenuHeading.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, MenuItem, MenuList };
+export { Menu, MenuHeading, MenuItem, MenuList };

package/dist/esm/src/MenuV1/subcomponents/MenuHeading/MenuHeading.mjs

@@ -0,0 +1,21 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import { Heading } from '../../../Heading/Heading.mjs';
+import styles from './MenuHeading.module.scss.mjs';
+const MenuHeading = /*#__PURE__*/function () {
+  const MenuHeading = function (_a) {
+    var id = _a.id,
+      classNameOverride = _a.classNameOverride,
+      restProps = __rest(_a, ["id", "classNameOverride"]);
+    return /*#__PURE__*/React.createElement(Heading, __assign({
+      id: id,
+      variant: "heading-6",
+      tag: "span",
+      classNameOverride: classnames(styles.heading, classNameOverride)
+    }, restProps));
+  };
+  MenuHeading.displayName = 'MenuHeading';
+  return MenuHeading;
+}();
+export { MenuHeading };

package/dist/esm/src/MenuV1/subcomponents/MenuHeading/MenuHeading.module.scss.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "heading": "MenuHeading-module_heading__hrHGy"
+};
+export { styles as default };

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

@@ -10,8 +10,9 @@ 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 } from './utils.mjs';
+import { isReversed, createTabletOverflowMenuItems } from './utils.mjs';
 import styles from './TitleBlock.module.scss.mjs';
 var renderTag = function (surveyStatus) {
   var tagVariant;
@@ -107,12 +108,6 @@ 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,
@@ -169,7 +164,7 @@ var renderNavigationTabs = function (navigationTabs, collapse, ariaLabel) {
  */
 const TitleBlock = /*#__PURE__*/function () {
   const TitleBlock = function (_a) {
-    var _b, _c, _d;
+    var _b, _c, _d, _e;
     var title = _a.title,
       variant = _a.variant,
       breadcrumb = _a.breadcrumb,
@@ -185,30 +180,32 @@ const TitleBlock = /*#__PURE__*/function () {
       secondaryActions = _a.secondaryActions,
       secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
       navigationTabs = _a.navigationTabs,
-      _e = _a.collapseNavigationAreaWhenPossible,
-      collapseNavigationAreaWhenPossible = _e === void 0 ? false : _e,
+      _f = _a.collapseNavigationAreaWhenPossible,
+      collapseNavigationAreaWhenPossible = _f === void 0 ? false : _f,
       textDirection = _a.textDirection,
       surveyStatus = _a.surveyStatus,
       id = _a.id,
-      _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;
+      _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;
     var hasNavigationTabs = navigationTabs && navigationTabs.length > 0;
     var collapseNavigationArea = collapseNavigationAreaWhenPossible && !hasNavigationTabs && secondaryActions === undefined;
-    var _o = useMediaQueries().queries,
-      isSmall = _o.isSmall,
-      isMedium = _o.isMedium;
+    var _q = useMediaQueries().queries,
+      isSmall = _q.isSmall,
+      isMedium = _q.isMedium;
     var isSmallOrMediumViewport = isMedium || isSmall;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       id: id,
@@ -261,19 +258,19 @@ const TitleBlock = /*#__PURE__*/function () {
       variant: "secondary",
       reversed: true,
       fullWidth: true
-    }))))))), ((_c = primaryAction !== null && primaryAction !== void 0 ? primaryAction : defaultAction) !== null && _c !== void 0 ? _c : secondaryActions) && (/*#__PURE__*/React.createElement(MainActions, {
+    }))))))), ((_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, {
       primaryAction: primaryAction,
       defaultAction: defaultAction,
-      secondaryActions: secondaryActions,
-      secondaryOverflowMenuItems: secondaryOverflowMenuItems,
-      reversed: isReversed(variant)
+      reversed: isReversed(variant),
+      overflowMenuItems: createTabletOverflowMenuItems(secondaryActions, secondaryOverflowMenuItems),
+      showOverflowMenu: isSmallOrMediumViewport
     }))))), /*#__PURE__*/React.createElement("div", {
       className: styles.rowBelowSeparator
     }, /*#__PURE__*/React.createElement("div", {
       className: styles.rowBelowSeparatorInner
     }, /*#__PURE__*/React.createElement("div", {
       className: styles.rowBelowSeparatorInnerContent
-    }, ((_d = sectionTitle !== null && sectionTitle !== void 0 ? sectionTitle : sectionTitleDescription) !== null && _d !== void 0 ? _d : renderSectionTitle) && (/*#__PURE__*/React.createElement("div", {
+    }, ((_e = sectionTitle !== null && sectionTitle !== void 0 ? sectionTitle : sectionTitleDescription) !== null && _e !== void 0 ? _e : renderSectionTitle) && (/*#__PURE__*/React.createElement("div", {
       className: styles.sectionTitleContainer
     }, /*#__PURE__*/React.createElement("div", {
       className: styles.sectionTitleInner
@@ -286,7 +283,14 @@ 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,13 +45,9 @@ 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",
-  "staticIcon": "TitleBlock-module_staticIcon__5jeBS"
+  "circle": "TitleBlock-module_circle__68z-T"
 };
 export { styles as default };

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

@@ -1,105 +1,25 @@
-import { __spreadArray, __assign } from 'tslib';
+import { __assign, __spreadArray } 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 { createTabletOverflowMenuItems, isMenuGroupNotButton } from '../utils.mjs';
+import { 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;
+    var _b, _c, _d, _e;
     var primaryAction = _a.primaryAction,
       defaultAction = _a.defaultAction,
-      secondaryActions = _a.secondaryActions,
-      secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
-      _e = _a.reversed,
-      reversed = _e === void 0 ? false : _e;
+      _f = _a.reversed,
+      reversed = _f === void 0 ? false : _f,
+      overflowMenuItems = _a.overflowMenuItems,
+      _g = _a.showOverflowMenu,
+      showOverflowMenu = _g === void 0 ? false : _g;
     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, {
@@ -108,7 +28,14 @@ const MainActions = /*#__PURE__*/function () {
           "data-testid": "main-action-primary-menu-item-".concat(idx)
         }));
       });
-      items = __spreadArray(__spreadArray(__spreadArray([], defaultActionItem, true), defaultActionItemMinimized, true), primaryAction ? [{
+      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 ? [{
         key: 'primaryAction',
         node: (/*#__PURE__*/React.createElement(Menu, {
           align: "right",
@@ -130,11 +57,18 @@ const MainActions = /*#__PURE__*/function () {
         }, /*#__PURE__*/React.createElement(MenuList, null, menuContent)))
       }] : [], true);
     } else {
-      items = __spreadArray(__spreadArray(__spreadArray([], defaultActionItem, true), defaultActionItemMinimized, true), primaryAction ? [{
+      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 ? [{
         key: 'primaryAction',
         node: (/*#__PURE__*/React.createElement(Button, __assign({}, primaryAction, {
-          primary: (_c = primaryAction.primary) !== null && _c !== void 0 ? _c : true,
-          reversed: (_d = primaryAction.reversed) !== null && _d !== void 0 ? _d : reversed,
+          primary: (_d = primaryAction.primary) !== null && _d !== void 0 ? _d : true,
+          reversed: (_e = primaryAction.reversed) !== null && _e !== void 0 ? _e : reversed,
           "data-automation-id": "title-block-primary-action-button",
           "data-testid": "title-block-primary-action-button",
           badge: primaryAction.badge ? __assign(__assign({}, primaryAction.badge), {
@@ -143,6 +77,27 @@ 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,6 +1,4 @@
 var styles = {
-  "mainActionsContainer": "MainActions-module_mainActionsContainer__pk-78",
-  "defaultActionButtonMinimized": "MainActions-module_defaultActionButtonMinimized__XePRS",
-  "defaultActionButton": "MainActions-module_defaultActionButton__VbER1"
+  "mainActionsContainer": "MainActions-module_mainActionsContainer__pk-78"
 };
 export { styles as default };