@carbon/ibm-products 2.54.0-canary.36 → 2.54.0-canary.37

package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -10,7 +10,7 @@ import React__default, { useState, useRef, useEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
-import { usePrefix, Breadcrumb, BreadcrumbItem, OverflowMenu, Link, Tooltip, OverflowMenuItem } from '@carbon/react';
+import { usePrefix, Breadcrumb, BreadcrumbItem, OverflowMenu, Link, Tooltip, unstable_FeatureFlags, MenuItem } from '@carbon/react';
 import { pkg } from '../../settings.js';
 import { OverflowMenuHorizontal, ArrowLeft } from '@carbon/react/icons';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
@@ -61,12 +61,20 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
   // eslint-disable-next-line react/prop-types
   var BreadcrumbOverflowMenu = function BreadcrumbOverflowMenu(_ref2) {
     var overflowItems = _ref2.overflowItems;
+    var handleClick = function handleClick(evt, item) {
+      var _item$props, _item$props2, _item$props2$onClick;
+      if (item !== null && item !== void 0 && (_item$props = item.props) !== null && _item$props !== void 0 && _item$props.href) {
+        window.location.href = item.props.href;
+      }
+      item === null || item === void 0 || (_item$props2 = item.props) === null || _item$props2 === void 0 || (_item$props2$onClick = _item$props2.onClick) === null || _item$props2$onClick === void 0 || _item$props2$onClick.call(_item$props2, evt);
+    };
     return /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
       key: "breadcrumb-overflow-".concat(internalId.current)
+    }, /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
+      enableV12Overflowmenu: true
     }, /*#__PURE__*/React__default.createElement(OverflowMenu, {
-      align: overflowTooltipAlign,
       "aria-label": overflowAriaLabel,
-      iconDescription: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
+      label: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
       ,
       renderIcon: function renderIcon(props) {
         return /*#__PURE__*/React__default.createElement(OverflowMenuHorizontal, _extends({
@@ -74,17 +82,18 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
         }, props));
       },
       className: "".concat(blockClass, "__overflow-menu"),
-      menuOptionsClass: "".concat(blockClass, "__overflow-menu-options")
+      tooltipAlignment: overflowTooltipAlign
     },
     // eslint-disable-next-line react/prop-types
     overflowItems.map(function (item, index) {
-      return /*#__PURE__*/React__default.createElement(OverflowMenuItem, {
+      return /*#__PURE__*/React__default.createElement(MenuItem, {
         key: "breadcrumb-overflow-menu-item-".concat(internalId.current, "-").concat(index),
-        href: item.props.href,
-        onClick: item.props.onClick,
-        itemText: item.props.children
+        onClick: function onClick(evt) {
+          return handleClick(evt, item);
+        },
+        label: item.props.children
       });
-    })));
+    }))));
   };
 
   // create hidden sizing items

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -63,12 +63,20 @@ exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
   // eslint-disable-next-line react/prop-types
   var BreadcrumbOverflowMenu = function BreadcrumbOverflowMenu(_ref2) {
     var overflowItems = _ref2.overflowItems;
+    var handleClick = function handleClick(evt, item) {
+      var _item$props, _item$props2, _item$props2$onClick;
+      if (item !== null && item !== void 0 && (_item$props = item.props) !== null && _item$props !== void 0 && _item$props.href) {
+        window.location.href = item.props.href;
+      }
+      item === null || item === void 0 || (_item$props2 = item.props) === null || _item$props2 === void 0 || (_item$props2$onClick = _item$props2.onClick) === null || _item$props2$onClick === void 0 || _item$props2$onClick.call(_item$props2, evt);
+    };
     return /*#__PURE__*/React.createElement(react.BreadcrumbItem, {
       key: "breadcrumb-overflow-".concat(internalId.current)
+    }, /*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
+      enableV12Overflowmenu: true
     }, /*#__PURE__*/React.createElement(react.OverflowMenu, {
-      align: overflowTooltipAlign,
       "aria-label": overflowAriaLabel,
-      iconDescription: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
+      label: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
       ,
       renderIcon: function renderIcon(props) {
         return /*#__PURE__*/React.createElement(icons.OverflowMenuHorizontal, _rollupPluginBabelHelpers.extends({
@@ -76,17 +84,18 @@ exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
         }, props));
       },
       className: "".concat(blockClass, "__overflow-menu"),
-      menuOptionsClass: "".concat(blockClass, "__overflow-menu-options")
+      tooltipAlignment: overflowTooltipAlign
     },
     // eslint-disable-next-line react/prop-types
     overflowItems.map(function (item, index) {
-      return /*#__PURE__*/React.createElement(react.OverflowMenuItem, {
+      return /*#__PURE__*/React.createElement(react.MenuItem, {
         key: "breadcrumb-overflow-menu-item-".concat(internalId.current, "-").concat(index),
-        href: item.props.href,
-        onClick: item.props.onClick,
-        itemText: item.props.children
+        onClick: function onClick(evt) {
+          return handleClick(evt, item);
+        },
+        label: item.props.children
       });
-    })));
+    }))));
   };
 
   // create hidden sizing items

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.54.0-canary.36+1d049e04a",
+  "version": "2.54.0-canary.37+f716852c9",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -96,7 +96,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/ibm-products-styles": "^2.51.0-rc.0",
+    "@carbon/ibm-products-styles": "^2.50.0-canary.37+f716852c9",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -120,5 +120,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "1d049e04aef8410f4c5da8b2eb4fe84e15e1d1ce"
+  "gitHead": "f716852c979a0b9556e853fad7e7a7774b4c6579"
 }

package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss

@@ -89,7 +89,6 @@ $_block-class: #{c4p-settings.$pkg-prefix}--breadcrumb-with-overflow;
     text-overflow: ellipsis;
   }
 }
-
-.#{$_block-class}__overflow-menu-options.#{$_block-class}__overflow-menu-options {
-  z-index: utilities.z('header');
+.#{$_block-class}__overflow-menu {
+  line-height: 0;
 }