@kaizen/components 2.2.3 → 2.3.0

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

package/dist/styles.css

@@ -10018,199 +10018,33 @@
     margin-inline-end: 0;
     margin-inline-start: calc(1.5rem / 2);
   }
-  @container (max-width: calc(768px - 1px)) {
-    .MainActions-module_mainActionsContainer__pk-78 {
-      display: none;
-    }
-  }
-}
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/* stylelint-disable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/** THIS IS AN AUTOGENERATED FILE **/
-/* 16px */
-/* 16px */
-/* 16px */
-/*
-  Because these components are deprecated, we've kept any inline/non-token values as values from the Zen theme to prevent any style regressions,
-  as this is what consumers would have expected when pulling them in a the time.
-*/
-/* stylelint-enable scss/at-if-no-null, declaration-block-no-redundant-longhand-properties */
-/** THIS IS AN AUTOGENERATED FILE **/
-@layer kz-components {
-  /* stylelint-disable no-descending-specificity */
-  .MobileActions-module_mobileActionsContainer__XoepA {
+  .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButtonMinimized__XePRS {
     display: none;
-    z-index: 1030;
-    flex-direction: column;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    border-start-start-radius: var(--border-solid-border-radius, 7px);
-    border-start-end-radius: var(--border-solid-border-radius, 7px);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    overflow: hidden;
-    transform: translateY(calc(100% - 60px));
-    transition: 0.4s ease;
-    animation: MobileActions-module_slide-up__xezn3 1s ease;
-  }
-  .MobileActions-module_mobileActionsContainer__XoepA.MobileActions-module_isOpen__D40v5 {
-    transform: translateY(0%);
-  }
-  .MobileActions-module_mobileActionsContainer__XoepA.MobileActions-module_isOpen__D40v5 .MobileActions-module_mobileActionsMenuContainer__x--Eb {
-    visibility: visible;
-  }
-  @container (max-width: calc(768px - 1px)) {
-    .MobileActions-module_mobileActionsContainer__XoepA {
-      display: flex;
-    }
-  }
-  .MobileActions-module_mobileActionsTopRow__RXNFZ {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 60px;
-  }
-  .MobileActions-module_mobileActionsTopRow__RXNFZ.MobileActions-module_mobileActionsTopRowSingleButton__5EjiI {
-    justify-content: center;
-  }
-  .MobileActions-module_mobileActionsMenuContainer__x--Eb {
-    visibility: hidden;
-    width: 100%;
-    background: var(--color-white, #ffffff);
-    padding: var(--spacing-xs, 0.375rem) 0;
-    transition: visibility 0.4s;
-  }
-  .MobileActions-module_drawerHandleIcon__q9ewm {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-inline-end: calc(1.5rem / 2);
-    margin-inline-start: 0;
-  }
-  .MobileActions-module_drawerHandleLabelText__MwJTA + .MobileActions-module_drawerHandleIcon__q9ewm {
     margin-inline-end: 0;
-    margin-inline-start: calc(1.5rem / 2);
-  }
-  .MobileActions-module_mobileActionsPrimaryLabel__8yfuH {
-    text-align: left;
-    text-decoration: none;
-    color: var(--color-white, #ffffff);
-    font-family: var(--typography-button-primary-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
-    font-weight: var(--typography-button-primary-font-weight, 500);
-    font-size: var(--typography-button-primary-font-size, 1.125rem);
-    line-height: var(--typography-button-primary-line-height, 1.5rem);
-    letter-spacing: var(--typography-button-primary-letter-spacing, normal);
-    padding-inline-end: 0;
-    padding-inline-start: 1.125rem;
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU {
-    display: flex;
-    position: relative;
-    justify-content: flex-start;
-    align-items: center;
-    height: 100%;
-    border: 0;
-    box-sizing: border-box;
-    color: var(--color-white, #ffffff);
-    background-color: var(--color-blue-500, #0168b3);
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:focus,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:focus {
-    background-color: var(--color-blue-600, #004970);
-    outline: none;
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:focus-visible,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:focus-visible {
-    height: 52px;
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:focus-visible::after,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:focus-visible::after {
-    content: "";
-    position: absolute;
-    background: transparent;
-    border-width: 2px;
-    border-style: var(--border-focus-ring-border-style, solid);
-    border-color: var(--color-blue-500, #0168b3);
-    inset: calc(-1 * calc(var(--border-focus-ring-border-width, 2px) * 2));
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:hover,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:hover {
-    text-decoration: none;
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:only-child,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:only-child {
-    flex-basis: 100%;
-    border-start-start-radius: var(--border-solid-border-radius, 7px);
-    border-start-end-radius: var(--border-solid-border-radius, 7px);
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:only-child:focus-visible,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:only-child:focus-visible {
-    flex-basis: calc(100% - 8px);
   }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:only-child:focus-visible::after,
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:only-child:focus-visible::after {
-    border-start-start-radius: var(--border-focus-ring-border-radius, 10px);
-    border-start-end-radius: var(--border-focus-ring-border-radius, 10px);
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:not(:only-child) {
-    flex: 0 0 calc(100% - 3.75rem);
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:not(:only-child):focus-visible {
-    flex-basis: calc(100% - 3.75rem - 8px);
-    margin-left: 4px;
-    border-start-start-radius: var(--border-solid-border-radius, 7px);
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:not(:only-child):focus-visible + .MobileActions-module_mobileActionsExpandButton__XuHNU {
-    border-color: var(--color-white, #ffffff);
-  }
-  .MobileActions-module_mobileActionsPrimaryButton__Xsvo-:not(:only-child):focus-visible::after {
-    border-start-start-radius: var(--border-focus-ring-border-radius, 10px);
-  }
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:not(:only-child) {
-    flex: 0 0 3.75rem;
-    border-left: 2px solid var(--color-blue-200, #bde2f5);
-    justify-content: center;
-  }
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:not(:only-child):focus-visible {
-    border-color: var(--color-white, #ffffff);
-    flex-basis: calc(3.75rem - 8px);
-    margin-right: 4px;
-    border-start-end-radius: var(--border-solid-border-radius, 7px);
-  }
-  .MobileActions-module_mobileActionsExpandButton__XuHNU:not(:only-child):focus-visible::after {
-    border-start-end-radius: var(--border-focus-ring-border-radius, 10px);
-  }
-  .MobileActions-module_mobileActionsChevronSquare__SPIsI {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    position: absolute;
-    inset-inline-end: 20px;
-    inset-inline-start: auto;
-  }
-  /* stylelint-enable no-descending-specificity */
-}
-@keyframes MobileActions-module_slide-up__xezn3 {
-  0% {
-    transform: translateY(100%);
-  }
-  50% {
-    transform: translateY(100%);
-  }
-  100% {
-    transform: translateY(calc(100% - 60px));
+  @container (max-width: 511px) {
+    .MainActions-module_mainActionsContainer__pk-78 {
+      padding-top: 12px;
+      justify-content: flex-start;
+      padding-left: 1.25rem;
+    }
+    @media (max-width: 511px) {
+      .MainActions-module_mainActionsContainer__pk-78 {
+        padding-top: 0;
+        padding-left: 3.375rem;
+      }
+    }
+    @media (max-width: 360px) {
+      .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButton__VbER1 {
+        display: none;
+        margin-inline-end: 0;
+      }
+      .MainActions-module_mainActionsContainer__pk-78 .MainActions-module_defaultActionButtonMinimized__XePRS {
+        display: flex;
+        margin-inline-end: 3px;
+        margin-left: -0.5rem;
+      }
+    }
   }
 }
 /** THIS IS AN AUTOGENERATED FILE **/
@@ -10289,6 +10123,11 @@
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRowInner__SlArS {
     border-bottom: 1px solid var(--color-gray-300, #eaeaec);
   }
+  @container (max-width: 511px) {
+    .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_titleRowInner__SlArS {
+      padding-bottom: 12px;
+    }
+  }
   .TitleBlock-module_titleRowInnerContent__NhTHV {
     position: relative;
     display: flex;
@@ -10309,6 +10148,11 @@
       border-bottom: none;
     }
   }
+  @container (max-width: 511px) {
+    .TitleBlock-module_titleRowInnerContent__NhTHV {
+      flex-wrap: wrap;
+    }
+  }
   .TitleBlock-module_title__c5JWR {
     display: flex;
     align-items: center;
@@ -10391,10 +10235,10 @@
   }
   @container (max-width: calc(1080px - 1px)) {
     .TitleBlock-module_titleTextOverride__VhhQU.TitleBlock-module_titleTextOverride__VhhQU {
-      font-size: var(--typography-heading-4-font-size, 1.125rem);
-      line-height: var(--typography-heading-4-line-height, 1.5rem);
-      letter-spacing: var(--typography-heading-4-letter-spacing, normal);
-      padding: 0;
+      font-size: var(--typography-heading-3-font-size, 1.375rem);
+      line-height: var(--typography-heading-3-line-height, 1.875rem);
+      letter-spacing: var(--typography-heading-3-letter-spacing, normal);
+      padding: 8px 0;
     }
   }
   .TitleBlock-module_avatar__mEjJ8 {
@@ -10429,7 +10273,6 @@
   @container (max-width: calc(1080px - 1px)) {
     .TitleBlock-module_hamburger__qe4R0 {
       display: flex;
-      align-items: center;
     }
   }
   .TitleBlock-module_subtitle__AI9tj {
@@ -10665,10 +10508,17 @@
   .TitleBlock-module_lightVariant__1EeLV .TitleBlock-module_secondaryActionsContainer__-4q0l, .TitleBlock-module_educationVariant__YvpWa .TitleBlock-module_secondaryActionsContainer__-4q0l, .TitleBlock-module_adminVariant__s95nS .TitleBlock-module_secondaryActionsContainer__-4q0l {
     color: var(--color-blue-500, #0168b3);
   }
+  .TitleBlock-module_secondaryActionsContainer__-4q0l .TitleBlock-module_secondaryOverflowCombinedMenu__CTddK {
+    display: none;
+  }
   @container (max-width: calc(1080px - 1px)) {
-    .TitleBlock-module_secondaryActionsContainer__-4q0l {
+    .TitleBlock-module_secondaryActionsContainer__-4q0l .TitleBlock-module_secondaryButtonContainer__xFL9X,
+    .TitleBlock-module_secondaryActionsContainer__-4q0l .TitleBlock-module_secondaryOverflowMenu__gvmgW {
       display: none;
     }
+    .TitleBlock-module_secondaryActionsContainer__-4q0l .TitleBlock-module_secondaryOverflowCombinedMenu__CTddK {
+      display: flex;
+    }
   }
   .TitleBlock-module_breadcrumb__lVNKz {
     appearance: none;
@@ -10717,11 +10567,6 @@
       }
     }
   }
-  @container (max-width: calc(1080px - 1px)) {
-    .TitleBlock-module_breadcrumb__lVNKz {
-      display: none;
-    }
-  }
   .TitleBlock-module_breadcrumbTextLink__ngx82 {
     clip-path: rect(0 0 0 0);
     height: 1px;
@@ -10815,6 +10660,11 @@
     color: var(--color-blue-500, #0168b3);
     background-color: rgba(var(--color-blue-500-rgb, 1, 104, 179), 0.1);
   }
+  @container (max-width: calc(1080px - 1px)) {
+    .TitleBlock-module_circle__68z-T {
+      display: none;
+    }
+  }
   /* stylelint-enable no-descending-specificity */
 }
 @keyframes TitleBlock-module_slide-fade__o5TnP {

package/dist/types/TitleBlock/TitleBlock.d.ts

@@ -4,6 +4,6 @@ import { type TitleBlockProps } from './types';
  * {@link https://cultureamp.design/?path=/docs/components-titleblock-api-specification--docs Storybook}
  */
 export declare const TitleBlock: {
-    ({ title, variant, breadcrumb, avatar, subtitle, sectionTitle, sectionTitleDescription, renderSectionTitle, pageSwitcherSelect, handleHamburgerClick, primaryAction, defaultAction, secondaryActions, secondaryOverflowMenuItems, navigationTabs, collapseNavigationAreaWhenPossible, textDirection, surveyStatus, id, titleAutomationId, avatarAutomationId, subtitleAutomationId, sectionTitleAutomationId, sectionTitleDescriptionAutomationId, breadcrumbAutomationId, breadcrumbTextAutomationId, autoHideMobileActionsMenu, }: TitleBlockProps): JSX.Element;
+    ({ title, variant, breadcrumb, avatar, subtitle, sectionTitle, sectionTitleDescription, renderSectionTitle, pageSwitcherSelect, handleHamburgerClick, primaryAction, defaultAction, secondaryActions, secondaryOverflowMenuItems, navigationTabs, collapseNavigationAreaWhenPossible, textDirection, surveyStatus, id, titleAutomationId, avatarAutomationId, subtitleAutomationId, sectionTitleAutomationId, sectionTitleDescriptionAutomationId, breadcrumbAutomationId, breadcrumbTextAutomationId, }: TitleBlockProps): JSX.Element;
     displayName: string;
 };

package/dist/types/TitleBlock/subcomponents/MainActions.d.ts

@@ -1,13 +1,14 @@
-import { type DefaultActionProps, type PrimaryActionProps, type TitleBlockMenuItemProps } from '../types';
+import { type DefaultActionProps, type PrimaryActionProps, type SecondaryActionsProps, type TitleBlockMenuItemProps } from '../types';
 type MainActionsProps = {
     primaryAction?: PrimaryActionProps;
     defaultAction?: DefaultActionProps;
     reversed?: boolean;
-    overflowMenuItems?: TitleBlockMenuItemProps[];
+    secondaryActions?: SecondaryActionsProps;
+    secondaryOverflowMenuItems?: TitleBlockMenuItemProps[];
     showOverflowMenu?: boolean;
 };
 export declare const MainActions: {
-    ({ primaryAction, defaultAction, reversed, overflowMenuItems, showOverflowMenu, }: MainActionsProps): JSX.Element;
+    ({ primaryAction, defaultAction, secondaryActions, secondaryOverflowMenuItems, reversed, }: MainActionsProps): JSX.Element;
     displayName: string;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "2.2.3",
+  "version": "2.3.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",