@kaizen/components 0.0.0-canary-04-titleblock-logic-20251211225600 → 0.0.0-canary-05-titleblock-20251212010438

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

@@ -43,17 +43,10 @@ var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed
 };
 // 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;
+  if (secondaryConverted.length === 0 && overflowItems.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, {
@@ -127,8 +120,6 @@ var SecondaryActions = function (_a) {
   }) : [];
   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 ? [{
     key: 'overflowMenu',
     node: overflowMenu

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

@@ -35,17 +35,10 @@ var renderSecondaryOverflowMenu = function (secondaryOverflowMenuItems, reversed
 };
 // 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 ? 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;
+  if (secondaryConverted.length === 0 && overflowItems.length === 0) return undefined;
   var combined = __spreadArray(__spreadArray([], secondaryConverted, true), overflowItems, true);
-  console.log('this is combined:', combined);
   return /*#__PURE__*/React.createElement("div", {
     className: styles.secondaryOverflowCombinedMenu
   }, /*#__PURE__*/React.createElement(Menu, {
@@ -120,8 +113,6 @@ const SecondaryActions = /*#__PURE__*/function () {
     }) : [];
     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 = __spreadArray(__spreadArray(__spreadArray([], secondaryActionsAsToolbarItems, true), overflowMenu ? [{
       key: 'overflowMenu',
       node: overflowMenu

package/dist/styles.css

@@ -148,6 +148,7 @@
     font-family: var(--typography-heading-1-font-family);
     font-weight: var(--typography-heading-1-font-weight);
     letter-spacing: var(--typography-heading-3-letter-spacing);
+    overflow-wrap: normal;
   }
 
   .Avatar-module_initials__85roP.Avatar-module_longName__02zNk::before {
@@ -10522,6 +10523,11 @@
       display: flex;
     }
   }
+  @container (max-width: calc(768px - 1px)) {
+    .TitleBlock-module_secondaryActionsContainer__-4q0l {
+      margin-top: -3px;
+    }
+  }
   .TitleBlock-module_breadcrumb__lVNKz {
     appearance: none;
     display: inline;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-04-titleblock-logic-20251211225600",
+  "version": "0.0.0-canary-05-titleblock-20251212010438",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Avatar/Avatar.module.css

@@ -95,6 +95,7 @@
     font-family: var(--typography-heading-1-font-family);
     font-weight: var(--typography-heading-1-font-weight);
     letter-spacing: var(--typography-heading-3-letter-spacing);
+    overflow-wrap: normal;
   }
 
   .initials.longName::before {

package/src/TitleBlock/TitleBlock.module.scss

@@ -541,6 +541,10 @@
         display: flex;
       }
     }
+
+    @include title-block-small {
+      margin-top: -3px;
+    }
   }
 
   .breadcrumb {

package/src/TitleBlock/_docs/TitleBlock.stories.tsx

@@ -121,6 +121,33 @@ export const Viewports: Story = {
   },
 }
 
+export const WithNoSecondaryOverflow: Story = {
+  parameters: {
+    viewport: {
+      viewports: {
+        default: {
+          name: 'Above or equal to 1366',
+          styles: { width: '1366px', height: '800px' },
+          type: 'desktop',
+        },
+        under1366: {
+          name: 'Under 1366',
+          styles: { width: '1365px', height: '800px' },
+          type: 'desktop',
+        },
+      },
+      defaultViewport: 'default',
+    },
+    chromatic: {
+      disable: false,
+      viewports: [1365, 1366, 760, 360],
+    },
+  },
+  args: {
+    title: 'Test no secondary overflow menu items',
+    secondaryOverflowMenuItems: undefined,
+  },
+}
 export const HasLongTitle: Story = {
   parameters: {
     viewport: {
@@ -140,7 +167,7 @@ export const HasLongTitle: Story = {
     },
     chromatic: {
       disable: false,
-      viewports: [1365, 1366],
+      viewports: [1365, 1366, 760, 360],
     },
   },
   args: { title: 'A long title with over thirty characters' },

package/src/TitleBlock/subcomponents/SecondaryActions.tsx

@@ -52,20 +52,14 @@ const renderCombinedSecondaryOverflowMenu = (
   secondaryOverflowMenuItems?: TitleBlockMenuItemProps[],
   reversed?: boolean,
 ): JSX.Element | undefined => {
-  console.log('this is renderCombinedSecondaryOverflowMenu called')
   const secondaryConverted = secondaryActions
     ? convertSecondaryActionsToMenuItems(secondaryActions)
     : []
   const overflowItems = 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
+  if (secondaryConverted.length === 0 && overflowItems.length === 0) return undefined
   const combined = [...secondaryConverted, ...overflowItems]
-  console.log('this is combined:', combined)
+
   return (
     <div className={styles.secondaryOverflowCombinedMenu}>
       <Menu
@@ -161,9 +155,6 @@ export const SecondaryActions = ({
     reversed,
   )
 
-  console.log('SecondaryActions this is overflowMenu:', overflowMenu)
-  console.log('SecondaryActions this is combinedOverflowMenu :', combinedOverflowMenu)
-
   const toolbarItems = [
     ...secondaryActionsAsToolbarItems,
     ...(overflowMenu