@carbon/react 1.78.0-rc.0 → 1.78.1

package/lib/components/ListBox/ListBoxMenuItem.js

@@ -14,6 +14,7 @@ var cx = require('classnames');
 var React = require('react');
 var PropTypes = require('prop-types');
 var usePrefix = require('../../internal/usePrefix.js');
+var useMergedRefs = require('../../internal/useMergedRefs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -21,24 +22,42 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-function useIsTruncated(ref) {
+/**
+ * Determines if the content of an element is truncated.
+ *
+ * Merges a forwarded ref with a local ref to check the element's dimensions.
+ *
+ * @template T
+ * @param forwardedRef - A ref passed from the parent component.
+ * @param deps - Dependencies to re-run the truncation check.
+ * @returns An object containing the truncation state and the merged ref.
+ */
+const useIsTruncated = function (forwardedRef) {
+  let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  const localRef = React.useRef(null);
+  const mergedRef = useMergedRefs.useMergedRefs([...(forwardedRef ? [forwardedRef] : []), localRef]);
   const [isTruncated, setIsTruncated] = React.useState(false);
   React.useEffect(() => {
-    const element = ref.current;
-    const {
-      offsetWidth,
-      scrollWidth
-    } = element;
-    setIsTruncated(offsetWidth < scrollWidth);
-  }, [ref, setIsTruncated]);
-  return isTruncated;
-}
+    const element = localRef.current;
+    if (element) {
+      const {
+        offsetWidth,
+        scrollWidth
+      } = element;
+      setIsTruncated(offsetWidth < scrollWidth);
+    }
+  }, [localRef, ...deps]);
+  return {
+    isTruncated,
+    ref: mergedRef
+  };
+};
 /**
  * `ListBoxMenuItem` is a helper component for managing the container class
  * name, alongside any classes for any corresponding states, for a generic list
  * box menu item.
  */
-const ListBoxMenuItem = /*#__PURE__*/React__default["default"].forwardRef(function ListBoxMenuItem(_ref, forwardedRef) {
+const ListBoxMenuItem = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
   let {
     children,
     isActive = false,
@@ -47,8 +66,11 @@ const ListBoxMenuItem = /*#__PURE__*/React__default["default"].forwardRef(functi
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const ref = React.useRef(null);
-  const isTruncated = useIsTruncated(forwardedRef?.menuItemOptionRef || ref);
+  const menuItemOptionRefProp = forwardedRef && typeof forwardedRef !== 'function' ? forwardedRef.menuItemOptionRef : undefined;
+  const {
+    isTruncated,
+    ref: menuItemOptionRef
+  } = useIsTruncated(menuItemOptionRefProp, [children]);
   const className = cx__default["default"](`${prefix}--list-box__menu-item`, {
     [`${prefix}--list-box__menu-item--active`]: isActive,
     [`${prefix}--list-box__menu-item--highlighted`]: isHighlighted
@@ -58,7 +80,7 @@ const ListBoxMenuItem = /*#__PURE__*/React__default["default"].forwardRef(functi
     title: isTruncated ? title : undefined
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--list-box__menu-item__option`,
-    ref: forwardedRef?.menuItemOptionRef || ref
+    ref: menuItemOptionRef
   }, children));
 });
 ListBoxMenuItem.displayName = 'ListBoxMenuItem';

package/lib/components/Menu/Menu.d.ts

@@ -27,6 +27,7 @@ export interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
      */
     menuAlignment?: string;
     /**
+     * @deprecated Menus now always support both icons as well as selectable items and nesting.
      * The mode of this menu. Defaults to full.
      * `full` supports nesting and selectable menu items, but no icons.
      * `basic` supports icons but no nesting or selectable menu items.

package/lib/components/Menu/Menu.js

@@ -14,14 +14,14 @@ var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 var ReactDOM = require('react-dom');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var warning = require('../../internal/warning.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var MenuContext = require('./MenuContext.js');
 var environment = require('../../internal/environment.js');
 var useLayoutDirection = require('../LayoutDirection/useLayoutDirection.js');
-var match = require('../../internal/keyboard/match.js');
-var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -38,7 +38,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
     containerRef,
     label,
     menuAlignment,
-    mode = 'full',
+    mode,
     onClose,
     onOpen,
     open,
@@ -54,14 +54,10 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
   const focusReturn = React.useRef(null);
   const context = React.useContext(MenuContext.MenuContext);
   const isRoot = context.state.isRoot;
-  if (context.state.mode === 'basic' && !isRoot) {
-    process.env.NODE_ENV !== "production" ? warning.warning(false, 'Nested menus are not supported when the menu is in "basic" mode.') : void 0;
-  }
   const menuSize = isRoot ? size : context.state.size;
   const [childState, childDispatch] = React.useReducer(MenuContext.menuReducer, {
     ...context.state,
     isRoot: false,
-    mode,
     size,
     requestCloseRoot: isRoot ? handleClose : context.state.requestCloseRoot
   });
@@ -293,6 +289,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
     [`${prefix}--menu--open`]: open,
     [`${prefix}--menu--shown`]: open && !legacyAutoalign || position[0] >= 0 && position[1] >= 0,
     [`${prefix}--menu--with-icons`]: childContext.state.hasIcons,
+    [`${prefix}--menu--with-selectable-items`]: childContext.state.hasSelectableItems,
     [`${prefix}--autoalign`]: !legacyAutoalign
   });
   const rendered = /*#__PURE__*/React__default["default"].createElement(MenuContext.MenuContext.Provider, {
@@ -330,13 +327,14 @@ Menu.propTypes = {
    */
   menuAlignment: PropTypes__default["default"].string,
   /**
+   * **Deprecated**: Menus now always support both icons as well as selectable items and nesting.
    * The mode of this menu. Defaults to full.
    * `full` supports nesting and selectable menu items, but no icons.
    * `basic` supports icons but no nesting or selectable menu items.
    *
    * **This prop is not intended for use and will be set by the respective implementation (like useContextMenu, MenuButton, and ComboButton).**
    */
-  mode: PropTypes__default["default"].oneOf(['full', 'basic']),
+  mode: deprecate["default"](PropTypes__default["default"].oneOf(['full', 'basic']), 'Menus now always support both icons as well as selectable items and nesting.'),
   /**
    * Provide an optional function to be called when the Menu should be closed.
    */

package/lib/components/Menu/MenuContext.d.ts

@@ -6,13 +6,13 @@
  */
 import { KeyboardEvent, RefObject } from 'react';
 type ActionType = {
-    type: 'enableIcons' | 'registerItem';
+    type: 'enableIcons' | 'enableSelectableItems' | 'registerItem';
     payload: any;
 };
 type StateType = {
     isRoot: boolean;
-    mode: 'full' | 'basic';
     hasIcons: boolean;
+    hasSelectableItems: boolean;
     size: 'xs' | 'sm' | 'md' | 'lg' | null;
     items: any[];
     requestCloseRoot: (e: Pick<KeyboardEvent<HTMLUListElement>, 'type'>) => void;
@@ -20,13 +20,13 @@ type StateType = {
 declare function menuReducer(state: StateType, action: ActionType): {
     hasIcons: boolean;
     isRoot: boolean;
-    mode: "full" | "basic";
+    hasSelectableItems: boolean;
     size: "xs" | "sm" | "md" | "lg" | null;
     items: any[];
     requestCloseRoot: (e: Pick<KeyboardEvent<HTMLUListElement>, "type">) => void;
 };
 type DispatchFuncProps = {
-    type: 'registerItem' | 'enableIcons';
+    type: ActionType['type'];
     payload: {
         ref: RefObject<HTMLLIElement>;
         disabled: boolean;

package/lib/components/Menu/MenuContext.js

@@ -13,8 +13,8 @@ var React = require('react');
 
 const menuDefaultState = {
   isRoot: true,
-  mode: 'full',
   hasIcons: false,
+  hasSelectableItems: false,
   size: null,
   items: [],
   requestCloseRoot: () => {}
@@ -26,6 +26,11 @@ function menuReducer(state, action) {
         ...state,
         hasIcons: true
       };
+    case 'enableSelectableItems':
+      return {
+        ...state,
+        hasSelectableItems: true
+      };
     case 'registerItem':
       return {
         ...state,

package/lib/components/Menu/MenuItem.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023
+ * Copyright IBM Corp. 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -31,7 +31,7 @@ export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
      */
     onClick?: (event: KeyboardEvent<HTMLLIElement> | MouseEvent<HTMLLIElement>) => void;
     /**
-     * Only applicable if the parent menu is in `basic` mode. Sets the menu item's icon.
+     * A component used to render an icon.
      */
     renderIcon?: FC;
     /**

package/lib/components/Menu/MenuItem.js

@@ -15,17 +15,16 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var react = require('@floating-ui/react');
 var iconsReact = require('@carbon/icons-react');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 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');
 var useLayoutDirection = require('../LayoutDirection/useLayoutDirection.js');
-var match = require('../../internal/keyboard/match.js');
 var Text = require('../Text/Text.js');
-var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -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.
+   * A component used to render an 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,