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

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

@@ -12,6 +12,7 @@ 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');
@@ -116,12 +117,6 @@ 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,
@@ -177,7 +172,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;
+  var _b, _c, _d, _e;
   var title = _a.title,
     variant = _a.variant,
     breadcrumb = _a.breadcrumb,
@@ -193,30 +188,32 @@ var TitleBlock = function (_a) {
     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.useMediaQueries().queries,
-    isSmall = _o.isSmall,
-    isMedium = _o.isMedium;
+  var _q = useMediaQueries.useMediaQueries().queries,
+    isSmall = _q.isSmall,
+    isMedium = _q.isMedium;
   var isSmallOrMediumViewport = isMedium || isSmall;
   return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("div", {
     id: id,
@@ -269,19 +266,19 @@ var TitleBlock = function (_a) {
     variant: "secondary",
     reversed: true,
     fullWidth: true
-  })))))), ((_c = primaryAction !== null && primaryAction !== void 0 ? primaryAction : defaultAction) !== null && _c !== void 0 ? _c : secondaryActions) && React__default.default.createElement(MainActions.MainActions, {
+  })))))), ((_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, {
     primaryAction: primaryAction,
     defaultAction: defaultAction,
-    secondaryActions: secondaryActions,
-    secondaryOverflowMenuItems: secondaryOverflowMenuItems,
-    reversed: utils.isReversed(variant)
+    reversed: utils.isReversed(variant),
+    overflowMenuItems: utils.createTabletOverflowMenuItems(secondaryActions, secondaryOverflowMenuItems),
+    showOverflowMenu: isSmallOrMediumViewport
   })))), 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
-  }, ((_d = sectionTitle !== null && sectionTitle !== void 0 ? sectionTitle : sectionTitleDescription) !== null && _d !== void 0 ? _d : renderSectionTitle) && React__default.default.createElement("div", {
+  }, ((_e = sectionTitle !== null && sectionTitle !== void 0 ? sectionTitle : sectionTitleDescription) !== null && _e !== void 0 ? _e : renderSectionTitle) && React__default.default.createElement("div", {
     className: TitleBlock_module.sectionTitleContainer
   }, React__default.default.createElement("div", {
     className: TitleBlock_module.sectionTitleInner
@@ -294,7 +291,14 @@ 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,13 +47,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"
 };
 module.exports = styles;

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

@@ -6,8 +6,6 @@ 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');
@@ -19,94 +17,16 @@ 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;
+  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 = 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, {
@@ -115,7 +35,14 @@ var MainActions = function (_a) {
         "data-testid": "main-action-primary-menu-item-".concat(idx)
       }));
     });
-    items = tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([], defaultActionItem, true), defaultActionItemMinimized, true), primaryAction ? [{
+    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 ? [{
       key: 'primaryAction',
       node: React__default.default.createElement(index.Menu, {
         align: "right",
@@ -137,11 +64,18 @@ var MainActions = function (_a) {
       }, React__default.default.createElement(index.MenuList, null, menuContent))
     }] : [], true);
   } else {
-    items = tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([], defaultActionItem, true), defaultActionItemMinimized, true), primaryAction ? [{
+    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 ? [{
       key: 'primaryAction',
       node: React__default.default.createElement(Button.Button, tslib.__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 ? tslib.__assign(tslib.__assign({}, primaryAction.badge), {
@@ -150,6 +84,27 @@ 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,8 +1,6 @@
 'use strict';
 
 var styles = {
-  "mainActionsContainer": "MainActions-module_mainActionsContainer__pk-78",
-  "defaultActionButtonMinimized": "MainActions-module_defaultActionButtonMinimized__XePRS",
-  "defaultActionButton": "MainActions-module_defaultActionButton__VbER1"
+  "mainActionsContainer": "MainActions-module_mainActionsContainer__pk-78"
 };
 module.exports = styles;

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

@@ -0,0 +1,306 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classnames = require('classnames');
+var reactFocusOn = require('react-focus-on');
+var Icon = require('../../Icon/Icon.cjs');
+var index = require('../../MenuV1/index.cjs');
+var constants = require('../constants.cjs');
+var utils = require('../utils.cjs');
+var TitleBlockMenuItem = require('./TitleBlockMenuItem.cjs');
+var MobileActions_module = require('./MobileActions.module.scss.cjs');
+function _interopDefault(e) {
+  return e && e.__esModule ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var menuItemIsLink = function (item) {
+  return 'href' in item;
+};
+var defaultActionIsLink = function (action) {
+  return 'href' in action;
+};
+var defaultActionIsButton = function (action) {
+  return !('href' in action) && 'onClick' in action || 'component' in action;
+};
+var filterActions = function (menuItems, filterType) {
+  return menuItems.filter(function (item) {
+    return filterType === 'link' ? menuItemIsLink(item) : !menuItemIsLink(item);
+  });
+};
+/** Returns a filtered array of TitleBlockMenuItem based on actionType
+ * This is use to sort a selectively render the action into a specifc order
+ */
+var renderPrimaryActionDrawerContent = function (primaryAction, actionType) {
+  if (!primaryAction) return null;
+  if (utils.isMenuGroupNotButton(primaryAction)) {
+    var filteredActions = filterActions(primaryAction.menuItems, actionType);
+    return filteredActions.map(function (item, idx) {
+      var itemType = menuItemIsLink(item) ? 'link' : 'action';
+      return React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__assign({}, item, {
+        key: "title-block-mobile-actions-primary-".concat(itemType, "-").concat(idx),
+        "data-automation-id": "title-block-mobile-actions-primary-".concat(itemType, "-").concat(idx),
+        "data-testid": "title-block-mobile-actions-primary-".concat(itemType, "-").concat(idx)
+      }));
+    });
+  }
+  return null;
+};
+var renderDefaultLink = function (defaultAction) {
+  if (!defaultActionIsLink(defaultAction)) return;
+  if ('component' in defaultAction) {
+    return React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__assign({}, defaultAction, {
+      key: "title-block-mobile-actions-default-link",
+      "data-automation-id": "title-block-mobile-actions-default-link",
+      "data-testid": "title-block-mobile-actions-default-link"
+    }));
+  }
+  return React__default.default.createElement(index.MenuItem, {
+    href: defaultAction.href,
+    label: defaultAction.label,
+    icon: defaultAction.icon,
+    disabled: defaultAction.disabled,
+    key: "title-block-mobile-actions-default-link",
+    "data-automation-id": "title-block-mobile-actions-default-link",
+    "data-testid": "title-block-mobile-actions-default-link",
+    id: defaultAction.id
+  });
+};
+var renderDefaultAction = function (defaultAction) {
+  if (!defaultActionIsLink(defaultAction)) {
+    return React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__assign({}, defaultAction, {
+      key: "title-block-mobile-actions-default-action",
+      "data-automation-id": "title-block-mobile-actions-default-action",
+      "data-testid": "title-block-mobile-actions-default-action"
+    }));
+  }
+  return null;
+};
+var renderSecondaryActions = function (secondaryActions) {
+  if (!secondaryActions) return null;
+  var secondaryActionMenuItems = utils.convertSecondaryActionsToMenuItems(secondaryActions);
+  return secondaryActionMenuItems.map(function (item, idx) {
+    return React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__assign({}, item, {
+      key: "title-block-mobile-actions-secondary-action-".concat(idx),
+      "data-testid": "title-block-mobile-actions-secondary-action"
+    }));
+  });
+};
+var renderSecondaryOverflowMenuItems = function (secondaryOverflowMenuItems) {
+  return secondaryOverflowMenuItems.map(function (item, idx) {
+    return React__default.default.createElement(TitleBlockMenuItem.TitleBlockMenuItem, tslib.__assign({}, item, {
+      key: "title-block-mobile-actions-overflow-menu-item-".concat(idx),
+      "data-testid": "title-block-mobile-actions-overflow-menu-item"
+    }));
+  });
+};
+var DrawerMenuContent = function (_a) {
+  var _b, _c, _d;
+  var primaryAction = _a.primaryAction,
+    defaultAction = _a.defaultAction,
+    secondaryActions = _a.secondaryActions,
+    secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems;
+  var showOtherActionsHeading = (_c = (_b = defaultAction && defaultActionIsButton(defaultAction)) !== null && _b !== void 0 ? _b : secondaryActions) !== null && _c !== void 0 ? _c : secondaryOverflowMenuItems;
+  return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(index.MenuList, null, primaryAction && renderPrimaryActionDrawerContent(primaryAction, 'link'), defaultAction && renderDefaultLink(defaultAction), primaryAction && renderPrimaryActionDrawerContent(primaryAction, 'action')), ((_d = defaultAction !== null && defaultAction !== void 0 ? defaultAction : secondaryActions) !== null && _d !== void 0 ? _d : secondaryOverflowMenuItems) && React__default.default.createElement(index.MenuList, {
+    heading: showOtherActionsHeading ? React__default.default.createElement(index.MenuHeading, null, "Other actions") : undefined
+  }, defaultAction && renderDefaultAction(defaultAction), secondaryActions && renderSecondaryActions(secondaryActions), secondaryOverflowMenuItems && renderSecondaryOverflowMenuItems(secondaryOverflowMenuItems)));
+};
+var renderDrawerHandleLabel = function (label, icon, drawerHandleLabelIconPosition) {
+  if (drawerHandleLabelIconPosition === 'end') {
+    return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("span", {
+      className: MobileActions_module.drawerHandleLabelText,
+      "data-testid": "drawer-handle-lable-text"
+    }, label), React__default.default.createElement(React__default.default.Fragment, null, icon && React__default.default.createElement("span", {
+      className: MobileActions_module.drawerHandleIcon
+    }, icon)));
+  } else {
+    return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(React__default.default.Fragment, null, icon && React__default.default.createElement("span", {
+      className: MobileActions_module.drawerHandleIcon
+    }, icon)), React__default.default.createElement("span", {
+      className: MobileActions_module.drawerHandleLabelText,
+      "data-testid": "drawer-handle-lable-text"
+    }, label));
+  }
+};
+var ButtonOrLink = function (_a) {
+  var action = _a.action,
+    children = _a.children;
+  if (typeof action === 'object' && 'onClick' in action && 'href' in action) {
+    return React__default.default.createElement("a", {
+      onClick: action.onClick,
+      href: action.href,
+      className: classnames__default.default(MobileActions_module.mobileActionsPrimaryLabel, MobileActions_module.mobileActionsPrimaryButton),
+      "data-testid": "title-block-mobile-actions-primary-button"
+    }, children);
+  }
+  if (typeof action === 'function') {
+    return React__default.default.createElement("button", {
+      type: "button",
+      onClick: action,
+      className: classnames__default.default(MobileActions_module.mobileActionsPrimaryLabel, MobileActions_module.mobileActionsPrimaryButton),
+      "data-testid": "title-block-mobile-actions-primary-button"
+    }, children);
+  }
+  if (typeof action === 'string') {
+    return React__default.default.createElement("a", {
+      href: action,
+      className: classnames__default.default(MobileActions_module.mobileActionsPrimaryLabel, MobileActions_module.mobileActionsPrimaryButton),
+      "data-testid": "title-block-mobile-actions-primary-button"
+    }, children);
+  }
+  // when there's no action (e.g. primary button is disabled)
+  return React__default.default.createElement("button", {
+    type: "button",
+    className: classnames__default.default(MobileActions_module.mobileActionsPrimaryLabel, MobileActions_module.mobileActionsPrimaryButton),
+    "data-testid": "title-block-mobile-actions-primary-button"
+  }, children);
+};
+var getAction = function (primaryAction) {
+  if (primaryAction && !primaryAction.disabled) {
+    if (primaryAction.onClick && primaryAction.href) {
+      return {
+        href: primaryAction.href,
+        onClick: primaryAction.onClick
+      };
+    }
+    if (primaryAction.onClick) {
+      return primaryAction.onClick;
+    }
+    if (primaryAction.href) {
+      return primaryAction.href;
+    }
+  }
+  return undefined;
+};
+var DrawerHandle = function (_a) {
+  var _b;
+  var primaryAction = _a.primaryAction,
+    secondaryActions = _a.secondaryActions,
+    defaultAction = _a.defaultAction,
+    secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
+    drawerHandleLabelIconPosition = _a.drawerHandleLabelIconPosition,
+    toggleDisplay = _a.toggleDisplay,
+    isOpen = _a.isOpen;
+  var showDrawer = (_b = defaultAction !== null && defaultAction !== void 0 ? defaultAction : secondaryActions) !== null && _b !== void 0 ? _b : secondaryOverflowMenuItems;
+  if (primaryAction) {
+    // If the primary action is a menu
+    if (utils.isMenuGroupNotButton(primaryAction)) {
+      return React__default.default.createElement("div", {
+        className: classnames__default.default(MobileActions_module.mobileActionsTopRow, MobileActions_module.mobileActionsTopRowSingleButton),
+        "data-testid": "title-block-mobile-actions-drawer-handle"
+      }, React__default.default.createElement("button", {
+        type: "button",
+        className: classnames__default.default(MobileActions_module.mobileActionsExpandButton, MobileActions_module.mobileActionsPrimaryLabel),
+        onClick: toggleDisplay,
+        "aria-expanded": isOpen
+      }, primaryAction.label, React__default.default.createElement("span", {
+        className: MobileActions_module.mobileActionsChevronSquare
+      }, React__default.default.createElement(Icon.Icon, {
+        name: isOpen ? 'keyboard_arrow_down' : 'keyboard_arrow_up',
+        isPresentational: true
+      }))));
+    }
+    // If the primary action is a button, or has no onClick/href/action
+    return React__default.default.createElement("div", {
+      className: classnames__default.default(MobileActions_module.mobileActionsTopRow, !showDrawer && MobileActions_module.mobileActionsTopRowSingleButton),
+      "data-testid": "title-block-mobile-actions-drawer-handle"
+    }, 'component' in primaryAction ? React__default.default.createElement(primaryAction.component, tslib.__assign({
+      className: classnames__default.default(MobileActions_module.mobileActionsPrimaryLabel, MobileActions_module.mobileActionsPrimaryButton)
+    }, primaryAction), primaryAction.label && renderDrawerHandleLabel(primaryAction.label, primaryAction.icon, drawerHandleLabelIconPosition)) : React__default.default.createElement(ButtonOrLink, {
+      action: getAction(primaryAction)
+    }, renderDrawerHandleLabel(primaryAction.label, primaryAction.icon, drawerHandleLabelIconPosition)), showDrawer && React__default.default.createElement("button", {
+      type: "button",
+      className: MobileActions_module.mobileActionsExpandButton,
+      onClick: toggleDisplay,
+      "aria-expanded": isOpen,
+      id: constants.TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID,
+      "aria-label": "Other actions"
+    }, React__default.default.createElement(Icon.Icon, {
+      name: isOpen ? 'keyboard_arrow_down' : 'keyboard_arrow_up',
+      isPresentational: true
+    })));
+  }
+  // if there are default/secondary actions but no primary action
+  if (showDrawer) {
+    return React__default.default.createElement("div", {
+      className: classnames__default.default(MobileActions_module.mobileActionsTopRow, MobileActions_module.mobileActionsTopRowSingleButton),
+      "data-testid": "title-block-mobile-actions-drawer-handle"
+    }, React__default.default.createElement("button", {
+      type: "button",
+      className: classnames__default.default(MobileActions_module.mobileActionsExpandButton, MobileActions_module.mobileActionsPrimaryLabel),
+      onClick: toggleDisplay,
+      "aria-expanded": isOpen,
+      id: constants.TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID
+    }, renderDrawerHandleLabel('Other actions'), React__default.default.createElement("span", {
+      className: MobileActions_module.mobileActionsChevronSquare
+    }, React__default.default.createElement(Icon.Icon, {
+      name: isOpen ? 'keyboard_arrow_down' : 'keyboard_arrow_up',
+      isPresentational: true
+    }))));
+  }
+  return null;
+};
+var MobileActions = function (_a) {
+  var _b, _c;
+  var primaryAction = _a.primaryAction,
+    defaultAction = _a.defaultAction,
+    secondaryActions = _a.secondaryActions,
+    secondaryOverflowMenuItems = _a.secondaryOverflowMenuItems,
+    drawerHandleLabelIconPosition = _a.drawerHandleLabelIconPosition,
+    _d = _a.autoHide,
+    autoHide = _d === void 0 ? false : _d;
+  var _e = React.useState(false),
+    isOpen = _e[0],
+    setIsOpen = _e[1];
+  var menuContent = React__default.default.createRef();
+  var toggleDisplay = function () {
+    setIsOpen(!isOpen);
+  };
+  // This callback handler will not run when autoHide === "off"
+  var handleDocumentClickForAutoHide = React.useCallback(function (e) {
+    var _a;
+    if (isOpen && e.target instanceof Node && ((_a = menuContent.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+      setIsOpen(false);
+    }
+  },
+  // @todo: Fix if possible - avoiding breaking in eslint upgrade
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [menuContent]);
+  React.useEffect(function () {
+    if (autoHide) {
+      document.addEventListener('click', handleDocumentClickForAutoHide, true);
+    }
+    return function () {
+      if (autoHide) {
+        document.removeEventListener('click', handleDocumentClickForAutoHide, true);
+      }
+    };
+  }, [autoHide, handleDocumentClickForAutoHide]);
+  return React__default.default.createElement("div", {
+    className: classnames__default.default(MobileActions_module.mobileActionsContainer, isOpen && MobileActions_module.isOpen)
+  }, React__default.default.createElement(reactFocusOn.FocusOn, {
+    enabled: isOpen,
+    scrollLock: false
+  }, React__default.default.createElement(DrawerHandle, {
+    primaryAction: primaryAction,
+    secondaryActions: secondaryActions,
+    defaultAction: defaultAction,
+    secondaryOverflowMenuItems: secondaryOverflowMenuItems,
+    drawerHandleLabelIconPosition: drawerHandleLabelIconPosition,
+    toggleDisplay: toggleDisplay,
+    isOpen: isOpen
+  }), ((_c = (_b = defaultAction !== null && defaultAction !== void 0 ? defaultAction : secondaryActions) !== null && _b !== void 0 ? _b : secondaryOverflowMenuItems) !== null && _c !== void 0 ? _c : primaryAction && utils.isMenuGroupNotButton(primaryAction)) && React__default.default.createElement("div", {
+    ref: menuContent,
+    className: MobileActions_module.mobileActionsMenuContainer
+  }, React__default.default.createElement(DrawerMenuContent, {
+    primaryAction: primaryAction,
+    defaultAction: defaultAction,
+    secondaryActions: secondaryActions,
+    secondaryOverflowMenuItems: secondaryOverflowMenuItems
+  }))));
+};
+MobileActions.displayName = 'MobileActions';
+exports.MobileActions = MobileActions;

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

@@ -0,0 +1,16 @@
+'use strict';
+
+var styles = {
+  "mobileActionsContainer": "MobileActions-module_mobileActionsContainer__XoepA",
+  "isOpen": "MobileActions-module_isOpen__D40v5",
+  "mobileActionsMenuContainer": "MobileActions-module_mobileActionsMenuContainer__x--Eb",
+  "mobileActionsTopRow": "MobileActions-module_mobileActionsTopRow__RXNFZ",
+  "mobileActionsTopRowSingleButton": "MobileActions-module_mobileActionsTopRowSingleButton__5EjiI",
+  "drawerHandleIcon": "MobileActions-module_drawerHandleIcon__q9ewm",
+  "drawerHandleLabelText": "MobileActions-module_drawerHandleLabelText__MwJTA",
+  "mobileActionsPrimaryLabel": "MobileActions-module_mobileActionsPrimaryLabel__8yfuH",
+  "mobileActionsPrimaryButton": "MobileActions-module_mobileActionsPrimaryButton__Xsvo-",
+  "mobileActionsExpandButton": "MobileActions-module_mobileActionsExpandButton__XuHNU",
+  "mobileActionsChevronSquare": "MobileActions-module_mobileActionsChevronSquare__SPIsI"
+};
+module.exports = styles;