@carbon/react 1.78.0-rc.0 → 1.78.1

package/es/components/ListBox/ListBoxMenuItem.d.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 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.
  */
-import React, { ForwardedRef, ReactNode } from 'react';
+import { ForwardedRef, ReactNode, type Ref } from 'react';
 import { ForwardRefReturn, ReactAttr } from '../../types/common';
 export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
     /**
@@ -30,7 +30,7 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
     title?: string;
 }
 export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLLIElement> & {
-    menuItemOptionRef?: React.Ref<HTMLDivElement>;
+    menuItemOptionRef?: Ref<HTMLDivElement>;
 }) | null;
 export type ListBoxMenuItemComponent = ForwardRefReturn<ListBoxMenuItemForwardedRef, ListBoxMenuItemProps>;
 declare const _default: ListBoxMenuItemComponent;

package/es/components/ListBox/ListBoxMenuItem.js

@@ -7,28 +7,47 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
-import React__default, { useRef, useState, useEffect } from 'react';
+import React__default, { forwardRef, useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { useMergedRefs } from '../../internal/useMergedRefs.js';
 
-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 = useRef(null);
+  const mergedRef = useMergedRefs([...(forwardedRef ? [forwardedRef] : []), localRef]);
   const [isTruncated, setIsTruncated] = useState(false);
   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.forwardRef(function ListBoxMenuItem(_ref, forwardedRef) {
+const ListBoxMenuItem = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   let {
     children,
     isActive = false,
@@ -37,8 +56,11 @@ const ListBoxMenuItem = /*#__PURE__*/React__default.forwardRef(function ListBoxM
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const ref = 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(`${prefix}--list-box__menu-item`, {
     [`${prefix}--list-box__menu-item--active`]: isActive,
     [`${prefix}--list-box__menu-item--highlighted`]: isHighlighted
@@ -48,7 +70,7 @@ const ListBoxMenuItem = /*#__PURE__*/React__default.forwardRef(function ListBoxM
     title: isTruncated ? title : undefined
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--list-box__menu-item__option`,
-    ref: forwardedRef?.menuItemOptionRef || ref
+    ref: menuItemOptionRef
   }, children));
 });
 ListBoxMenuItem.displayName = 'ListBoxMenuItem';

package/es/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/es/components/Menu/Menu.js

@@ -10,14 +10,14 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { forwardRef, useRef, useContext, useReducer, useMemo, useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
+import { Escape, ArrowLeft, ArrowUp, ArrowDown } from '../../internal/keyboard/keys.js';
+import { match } from '../../internal/keyboard/match.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { warning } from '../../internal/warning.js';
+import deprecate from '../../prop-types/deprecate.js';
 import { MenuContext, menuReducer } from './MenuContext.js';
 import { canUseDOM } from '../../internal/environment.js';
 import { useLayoutDirection } from '../LayoutDirection/useLayoutDirection.js';
-import { match } from '../../internal/keyboard/match.js';
-import { Escape, ArrowLeft, ArrowUp, ArrowDown } from '../../internal/keyboard/keys.js';
 
 const spacing = 8; // distance to keep to window edges, in px
 
@@ -28,7 +28,7 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
     containerRef,
     label,
     menuAlignment,
-    mode = 'full',
+    mode,
     onClose,
     onOpen,
     open,
@@ -44,14 +44,10 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref, forwardRef) {
   const focusReturn = useRef(null);
   const context = useContext(MenuContext);
   const isRoot = context.state.isRoot;
-  if (context.state.mode === 'basic' && !isRoot) {
-    process.env.NODE_ENV !== "production" ? 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] = useReducer(menuReducer, {
     ...context.state,
     isRoot: false,
-    mode,
     size,
     requestCloseRoot: isRoot ? handleClose : context.state.requestCloseRoot
   });
@@ -283,6 +279,7 @@ const Menu = /*#__PURE__*/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.createElement(MenuContext.Provider, {
@@ -320,13 +317,14 @@ Menu.propTypes = {
    */
   menuAlignment: PropTypes.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.oneOf(['full', 'basic']),
+  mode: deprecate(PropTypes.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/es/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/es/components/Menu/MenuContext.js

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

package/es/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/es/components/Menu/MenuItem.js

@@ -10,20 +10,19 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { forwardRef, useState, useContext, useRef, useEffect } from 'react';
 import { useFloating, autoUpdate, offset, useInteractions, useHover, safePolygon, FloatingFocusManager } from '@floating-ui/react';
-import { CaretLeft, CaretRight, Checkmark } from '@carbon/icons-react';
+import { Checkmark, CaretLeft, CaretRight } from '@carbon/icons-react';
+import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
+import { match } from '../../internal/keyboard/match.js';
 import { useControllableState } from '../../internal/useControllableState.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { warning } from '../../internal/warning.js';
 import { Menu } from './Menu.js';
 import { MenuContext } from './MenuContext.js';
 import '../Text/index.js';
 import { useLayoutDirection } from '../LayoutDirection/useLayoutDirection.js';
-import { match } from '../../internal/keyboard/match.js';
 import { Text } from '../Text/Text.js';
-import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 
-var _CaretLeft, _CaretRight;
+var _Checkmark, _CaretLeft, _CaretRight;
 const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
   let {
     children,
@@ -134,15 +133,14 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
       setRtl(false);
     }
   }, [direction]);
-  const iconsAllowed = context.state.mode === 'basic' || rest.role === 'menuitemcheckbox' || rest.role === 'menuitemradio';
   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]);
   useEffect(() => {
     Object.keys(floatingStyles).forEach(style => {
       if (refs.floating.current && style !== 'position') {
@@ -166,8 +164,10 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
     onClick: handleClick,
     onKeyDown: handleKeyDown
   }, getReferenceProps()), /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--menu-item__selection-icon`
+  }, rest['aria-checked'] && (_Checkmark || (_Checkmark = /*#__PURE__*/React__default.createElement(Checkmark, null)))), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--menu-item__icon`
-  }, iconsAllowed && IconElement && /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement(Text, {
+  }, IconElement && /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement(Text, {
     as: "div",
     className: `${prefix}--menu-item__label`,
     title: label
@@ -212,7 +212,7 @@ MenuItem.propTypes = {
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   onClick: PropTypes.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.oneOfType([PropTypes.func, PropTypes.object]),
@@ -233,9 +233,6 @@ const MenuItemSelectable = /*#__PURE__*/forwardRef(function MenuItemSelectable(_
   } = _ref2;
   const prefix = usePrefix();
   const context = useContext(MenuContext);
-  if (context.state.mode === 'basic') {
-    process.env.NODE_ENV !== "production" ? warning(false, 'MenuItemSelectable is not supported when the menu is in "basic" mode.') : void 0;
-  }
   const [checked, setChecked] = useControllableState({
     value: selected,
     onChange,
@@ -245,13 +242,13 @@ const MenuItemSelectable = /*#__PURE__*/forwardRef(function MenuItemSelectable(_
     setChecked(!checked);
   }
   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(className, `${prefix}--menu-item-selectable--selected`);
   return /*#__PURE__*/React__default.createElement(MenuItem, _extends({}, rest, {
     ref: forwardRef,
@@ -259,7 +256,6 @@ const MenuItemSelectable = /*#__PURE__*/forwardRef(function MenuItemSelectable(_
     className: classNames,
     role: "menuitemcheckbox",
     "aria-checked": checked,
-    renderIcon: checked ? Checkmark : undefined,
     onClick: handleClick
   }));
 });
@@ -334,9 +330,6 @@ const MenuItemRadioGroup = /*#__PURE__*/forwardRef(function MenuItemRadioGroup(_
   } = _ref4;
   const prefix = usePrefix();
   const context = useContext(MenuContext);
-  if (context.state.mode === 'basic') {
-    process.env.NODE_ENV !== "production" ? warning(false, 'MenuItemRadioGroup is not supported when the menu is in "basic" mode.') : void 0;
-  }
   const [selection, setSelection] = useControllableState({
     value: selectedItem,
     onChange,
@@ -346,13 +339,13 @@ const MenuItemRadioGroup = /*#__PURE__*/forwardRef(function MenuItemRadioGroup(_
     setSelection(item);
   }
   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(className, `${prefix}--menu-item-radio-group`);
   return /*#__PURE__*/React__default.createElement("li", {
     className: classNames,
@@ -366,7 +359,6 @@ const MenuItemRadioGroup = /*#__PURE__*/forwardRef(function MenuItemRadioGroup(_
     label: itemToString(item),
     role: "menuitemradio",
     "aria-checked": item === selection,
-    renderIcon: item === selection ? Checkmark : undefined,
     onClick: e => {
       handleClick(item);
     }

package/es/components/MenuButton/index.js

@@ -73,6 +73,15 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, forwardRef)
     // “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: autoUpdate
@@ -87,7 +96,11 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, forwardRef)
   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]);
@@ -126,7 +139,6 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, forwardRef)
     id: id,
     legacyAutoalign: false,
     label: label,
-    mode: "basic",
     size: size$1,
     open: open,
     onClose: handleClose,