@carbon/react 1.78.0-rc.0 → 1.78.0

package/es/components/ComboBox/ComboBox.js

@@ -215,7 +215,7 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
   const textInput = useRef(null);
   const comboBoxInstanceId = useId();
   const [isFocused, setIsFocused] = useState(false);
-  const savedOnInputChange = useRef(onInputChange);
+  const prevInputValue = useRef(inputValue);
   const prevSelectedItemProp = useRef(selectedItemProp);
 
   // fully controlled combobox: handle changes to selectedItemProp
@@ -246,12 +246,12 @@ const ComboBox = /*#__PURE__*/forwardRef((props, ref) => {
     itemToString,
     inputValue
   }) : defaultShouldFilterItem());
+
+  // call onInputChange whenever inputValue is updated
   useEffect(() => {
-    savedOnInputChange.current = onInputChange;
-  }, [onInputChange]);
-  useEffect(() => {
-    if (savedOnInputChange.current) {
-      savedOnInputChange.current(inputValue);
+    if (prevInputValue.current !== inputValue) {
+      prevInputValue.current = inputValue;
+      onInputChange && onInputChange(inputValue);
     }
   }, [inputValue]);
   const handleSelectionClear = () => {

package/es/components/ComboButton/index.js

@@ -166,7 +166,6 @@ const ComboButton = /*#__PURE__*/React__default.forwardRef(function ComboButton(
     ref: refs.setFloating,
     id: id,
     label: t('carbon.combo-button.additional-actions'),
-    mode: "basic",
     size: size$1,
     open: open,
     onClose: handleClose

package/es/components/ContextMenu/useContextMenu.d.ts

@@ -10,7 +10,6 @@ export interface ContextMenuProps {
     x: number;
     y: number;
     onClose: () => void;
-    mode: string;
 }
 /**
  * @param {TriggerType} [trigger=document] The element or ref which should trigger the Menu on right-click

package/es/components/ContextMenu/useContextMenu.js

@@ -41,8 +41,7 @@ function useContextMenu() {
     open,
     x: position[0],
     y: position[1],
-    onClose,
-    mode: 'full'
+    onClose
   };
 }
 

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

@@ -12,7 +12,7 @@ import React__default, { forwardRef, useRef, useContext, useReducer, useMemo, us
 import { createPortal } from 'react-dom';
 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';
@@ -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

@@ -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.
+     * Sets the menu item's icon.
      */
     renderIcon?: FC;
     /**

package/es/components/Menu/MenuItem.js

@@ -10,11 +10,10 @@ 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 { 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';
@@ -23,7 +22,7 @@ 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.
+   * Sets the menu item's 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,

package/es/components/Notification/Notification.js

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

package/lib/components/ComboBox/ComboBox.js

@@ -226,7 +226,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const textInput = React.useRef(null);
   const comboBoxInstanceId = useId.useId();
   const [isFocused, setIsFocused] = React.useState(false);
-  const savedOnInputChange = React.useRef(onInputChange);
+  const prevInputValue = React.useRef(inputValue);
   const prevSelectedItemProp = React.useRef(selectedItemProp);
 
   // fully controlled combobox: handle changes to selectedItemProp
@@ -257,12 +257,12 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     itemToString,
     inputValue
   }) : defaultShouldFilterItem());
+
+  // call onInputChange whenever inputValue is updated
   React.useEffect(() => {
-    savedOnInputChange.current = onInputChange;
-  }, [onInputChange]);
-  React.useEffect(() => {
-    if (savedOnInputChange.current) {
-      savedOnInputChange.current(inputValue);
+    if (prevInputValue.current !== inputValue) {
+      prevInputValue.current = inputValue;
+      onInputChange && onInputChange(inputValue);
     }
   }, [inputValue]);
   const handleSelectionClear = () => {

package/lib/components/ComboButton/index.js

@@ -176,7 +176,6 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     ref: refs.setFloating,
     id: id,
     label: t('carbon.combo-button.additional-actions'),
-    mode: "basic",
     size: size,
     open: open,
     onClose: handleClose

package/lib/components/ContextMenu/useContextMenu.d.ts

@@ -10,7 +10,6 @@ export interface ContextMenuProps {
     x: number;
     y: number;
     onClose: () => void;
-    mode: string;
 }
 /**
  * @param {TriggerType} [trigger=document] The element or ref which should trigger the Menu on right-click

package/lib/components/ContextMenu/useContextMenu.js

@@ -45,8 +45,7 @@ function useContextMenu() {
     open,
     x: position[0],
     y: position[1],
-    onClose,
-    mode: 'full'
+    onClose
   };
 }
 

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

@@ -16,7 +16,7 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 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');
@@ -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

@@ -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.
+     * Sets the menu item's icon.
      */
     renderIcon?: FC;
     /**