@carbon/react 1.78.0-rc.0 → 1.78.0

package/lib/components/Menu/MenuItem.js

@@ -18,7 +18,6 @@ var iconsReact = require('@carbon/icons-react');
 var useControllableState = require('../../internal/useControllableState.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var warning = require('../../internal/warning.js');
 var Menu = require('./Menu.js');
 var MenuContext = require('./MenuContext.js');
 require('../Text/index.js');
@@ -33,7 +32,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _CaretLeft, _CaretRight;
+var _Checkmark, _CaretLeft, _CaretRight;
 const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRef) {
   let {
     children,
@@ -144,15 +143,14 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRe
       setRtl(false);
     }
   }, [direction]);
-  const iconsAllowed = context.state.mode === 'basic' || rest.role === 'menuitemcheckbox' || rest.role === 'menuitemradio';
   React.useEffect(() => {
-    if (iconsAllowed && IconElement && !context.state.hasIcons) {
+    if (IconElement && !context.state.hasIcons) {
       // @ts-ignore - TODO: Should we be passing payload?
       context.dispatch({
         type: 'enableIcons'
       });
     }
-  }, [iconsAllowed, IconElement, context.state.hasIcons, context]);
+  }, [IconElement, context.state.hasIcons, context]);
   React.useEffect(() => {
     Object.keys(floatingStyles).forEach(style => {
       if (refs.floating.current && style !== 'position') {
@@ -176,8 +174,10 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(_ref, forwardRe
     onClick: handleClick,
     onKeyDown: handleKeyDown
   }, getReferenceProps()), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--menu-item__selection-icon`
+  }, rest['aria-checked'] && (_Checkmark || (_Checkmark = /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkmark, null)))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--menu-item__icon`
-  }, iconsAllowed && IconElement && /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
+  }, IconElement && /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "div",
     className: `${prefix}--menu-item__label`,
     title: label
@@ -222,7 +222,7 @@ MenuItem.propTypes = {
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   onClick: PropTypes__default["default"].func,
   /**
-   * Only applicable if the parent menu is in `basic` mode. Sets the menu item's icon.
+   * Sets the menu item's icon.
    */
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
@@ -243,9 +243,6 @@ const MenuItemSelectable = /*#__PURE__*/React.forwardRef(function MenuItemSelect
   } = _ref2;
   const prefix = usePrefix.usePrefix();
   const context = React.useContext(MenuContext.MenuContext);
-  if (context.state.mode === 'basic') {
-    process.env.NODE_ENV !== "production" ? warning.warning(false, 'MenuItemSelectable is not supported when the menu is in "basic" mode.') : void 0;
-  }
   const [checked, setChecked] = useControllableState.useControllableState({
     value: selected,
     onChange,
@@ -255,13 +252,13 @@ const MenuItemSelectable = /*#__PURE__*/React.forwardRef(function MenuItemSelect
     setChecked(!checked);
   }
   React.useEffect(() => {
-    if (!context.state.hasIcons) {
+    if (!context.state.hasSelectableItems) {
       // @ts-ignore - TODO: Should we be passing payload?
       context.dispatch({
-        type: 'enableIcons'
+        type: 'enableSelectableItems'
       });
     }
-  }, [context.state.hasIcons, context]);
+  }, [context.state.hasSelectableItems, context]);
   const classNames = cx__default["default"](className, `${prefix}--menu-item-selectable--selected`);
   return /*#__PURE__*/React__default["default"].createElement(MenuItem, _rollupPluginBabelHelpers["extends"]({}, rest, {
     ref: forwardRef,
@@ -269,7 +266,6 @@ const MenuItemSelectable = /*#__PURE__*/React.forwardRef(function MenuItemSelect
     className: classNames,
     role: "menuitemcheckbox",
     "aria-checked": checked,
-    renderIcon: checked ? iconsReact.Checkmark : undefined,
     onClick: handleClick
   }));
 });
@@ -344,9 +340,6 @@ const MenuItemRadioGroup = /*#__PURE__*/React.forwardRef(function MenuItemRadioG
   } = _ref4;
   const prefix = usePrefix.usePrefix();
   const context = React.useContext(MenuContext.MenuContext);
-  if (context.state.mode === 'basic') {
-    process.env.NODE_ENV !== "production" ? warning.warning(false, 'MenuItemRadioGroup is not supported when the menu is in "basic" mode.') : void 0;
-  }
   const [selection, setSelection] = useControllableState.useControllableState({
     value: selectedItem,
     onChange,
@@ -356,13 +349,13 @@ const MenuItemRadioGroup = /*#__PURE__*/React.forwardRef(function MenuItemRadioG
     setSelection(item);
   }
   React.useEffect(() => {
-    if (!context.state.hasIcons) {
+    if (!context.state.hasSelectableItems) {
       // @ts-ignore - TODO: Should we be passing payload?
       context.dispatch({
-        type: 'enableIcons'
+        type: 'enableSelectableItems'
       });
     }
-  }, [context.state.hasIcons, context]);
+  }, [context.state.hasSelectableItems, context]);
   const classNames = cx__default["default"](className, `${prefix}--menu-item-radio-group`);
   return /*#__PURE__*/React__default["default"].createElement("li", {
     className: classNames,
@@ -376,7 +369,6 @@ const MenuItemRadioGroup = /*#__PURE__*/React.forwardRef(function MenuItemRadioG
     label: itemToString(item),
     role: "menuitemradio",
     "aria-checked": item === selection,
-    renderIcon: item === selection ? iconsReact.Checkmark : undefined,
     onClick: e => {
       handleClick(item);
     }

package/lib/components/MenuButton/index.js

@@ -83,6 +83,15 @@ const MenuButton = /*#__PURE__*/React.forwardRef(function MenuButton(_ref, forwa
     // “break” the floating element out of a clipping ancestor.
     // https://floating-ui.com/docs/misc#clipping
     strategy: 'fixed',
+    // Submenus are using a fixed position to break out of the parent menu's
+    // box avoiding clipping while allowing for vertical scroll. When an
+    // element is using transform it establishes a new containing block
+    // block for all of its descendants. Therefore, its padding box will be
+    // used for fixed-positioned descendants. This would cause the submenu
+    // to be clipped by its parent menu.
+    // Reference: https://www.w3.org/TR/2019/CR-css-transforms-1-20190214/#current-transformation-matrix-computation
+    // Reference: https://github.com/carbon-design-system/carbon/pull/18153#issuecomment-2498548835
+    transform: false,
     // Middleware order matters, arrow should be last
     middleware: middlewares,
     whileElementsMounted: react.autoUpdate
@@ -97,7 +106,11 @@ const MenuButton = /*#__PURE__*/React.forwardRef(function MenuButton(_ref, forwa
   React.useLayoutEffect(() => {
     Object.keys(floatingStyles).forEach(style => {
       if (refs.floating.current) {
-        refs.floating.current.style[style] = floatingStyles[style];
+        let value = floatingStyles[style];
+        if (['top', 'right', 'bottom', 'left'].includes(style) && Number(value)) {
+          value += 'px';
+        }
+        refs.floating.current.style[style] = value;
       }
     });
   }, [floatingStyles, refs.floating, middlewareData, placement, open]);
@@ -136,7 +149,6 @@ const MenuButton = /*#__PURE__*/React.forwardRef(function MenuButton(_ref, forwa
     id: id,
     legacyAutoalign: false,
     label: label,
-    mode: "basic",
     size: size,
     open: open,
     onClose: handleClose,

package/lib/components/Notification/Notification.js

@@ -740,11 +740,9 @@ function Callout(_ref8) {
     [`${prefix}--actionable-notification--${kind}`]: kind,
     [`${prefix}--actionable-notification--hide-close-button`]: true
   });
-  const ref = React.useRef(null);
-  useNoInteractiveChildren.useInteractiveChildrenNeedDescription(ref, `interactive child node(s) should have an \`aria-describedby\` property with a value matching the value of \`titleId\``);
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    ref: ref
-  }, rest, {
+  const childrenContainer = React.useRef(null);
+  useNoInteractiveChildren.useInteractiveChildrenNeedDescription(childrenContainer, `interactive child node(s) should have an \`aria-describedby\` property with a value matching the value of \`titleId\``);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: containerClassName
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--actionable-notification__details`
@@ -753,6 +751,7 @@ function Callout(_ref8) {
     kind: kind,
     iconDescription: statusIconDescription || `${kind} icon`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: childrenContainer,
     className: `${prefix}--actionable-notification__text-wrapper`
   }, title && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "div",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.78.0-rc.0",
+  "version": "1.78.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -52,9 +52,9 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/icons-react": "^11.57.0-rc.0",
+    "@carbon/icons-react": "^11.57.0",
     "@carbon/layout": "^11.30.0",
-    "@carbon/styles": "^1.77.0-rc.0",
+    "@carbon/styles": "^1.77.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -79,7 +79,7 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@carbon/test-utils": "^10.35.0",
-    "@carbon/themes": "^11.48.0-rc.0",
+    "@carbon/themes": "^11.48.0",
     "@figma/code-connect": "^1.2.4",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^28.0.0",
@@ -146,5 +146,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "9134345acdba15a2406b4a7df9781bccf0a32ab6"
+  "gitHead": "7ffd4731509c6e3d768cfb9029478b27db8f807d"
 }