@carbon/react 1.77.0 → 1.78.0

package/es/internal/wrapFocus.js

@@ -67,7 +67,7 @@ function wrapFocus(_ref) {
  * @param {object} options The options.
  * @param {Node|null} options.containerNode
  * @param {EventTarget} options.currentActiveNode The DOM node that has focus.
- * @param {KeyboardEvent} options.event The DOM event
+ * @param {React.KeyboardEvent} options.event The DOM event
  */
 function wrapFocusWithoutSentinels(_ref2) {
   let {

package/lib/components/Accordion/AccordionItem.js

@@ -19,8 +19,8 @@ var useId = require('../../internal/useId.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var AccordionProvider = require('./AccordionProvider.js');
-var Text = require('../Text/Text.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 }; }

package/lib/components/BadgeIndicator/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 from 'react';
+interface BadgeIndicatorProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * Count of badge indicator
+     */
+    count?: number;
+    /**
+     * Provide an `id` to uniquely identify the BadgeIndidcator
+     */
+    id?: string;
+}
+export declare const BadgeIndicator: React.ForwardRefExoticComponent<BadgeIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export default BadgeIndicator;

package/lib/components/BadgeIndicator/index.js

@@ -0,0 +1,56 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const BadgeIndicator = /*#__PURE__*/React__default["default"].forwardRef(function BadgeIndicatorContent(_ref, ref) {
+  let {
+    className: customClassName,
+    count,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"](`${prefix}--badge-indicator`, customClassName, {
+    [`${prefix}--badge-indicator--count`]: count
+  });
+  const displayCount = count && count > 999 ? '999+' : count;
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: classNames,
+    ref: ref
+  }, rest), displayCount);
+});
+BadgeIndicator.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Count of badge indicator
+   */
+  count: PropTypes__default["default"].number,
+  /**
+   * Provide an `id` to uniquely identify the BadgeIndidcator
+   */
+  id: PropTypes__default["default"].string
+};
+
+exports.BadgeIndicator = BadgeIndicator;
+exports["default"] = BadgeIndicator;

package/lib/components/Breadcrumb/Breadcrumb.d.ts

@@ -19,6 +19,11 @@ export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
      * Optional prop to omit the trailing slash for the breadcrumbs
      */
     noTrailingSlash?: boolean;
+    /**
+     * Specify the size of the Breadcrumb. Currently
+     * supports the following: `sm` & `md` (default: 'md')
+     */
+    size?: 'sm' | 'md';
 }
 declare const Breadcrumb: ForwardRefReturn<HTMLElement, BreadcrumbProps>;
 export default Breadcrumb;

package/lib/components/Breadcrumb/Breadcrumb.js

@@ -27,12 +27,14 @@ const Breadcrumb = /*#__PURE__*/React__default["default"].forwardRef(function Br
     children,
     className: customClassNameNav,
     noTrailingSlash,
+    size,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const className = cx__default["default"]({
     [`${prefix}--breadcrumb`]: true,
-    [`${prefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash
+    [`${prefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash,
+    [`${prefix}--breadcrumb--sm`]: size === 'sm'
   });
   return /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({
     className: customClassNameNav,
@@ -59,7 +61,11 @@ Breadcrumb.propTypes = {
   /**
    * Optional prop to omit the trailing slash for the breadcrumbs
    */
-  noTrailingSlash: PropTypes__default["default"].bool
+  noTrailingSlash: PropTypes__default["default"].bool,
+  /**
+   * Specify the size of the Breadcrumb. Currently supports the following:
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md'])
 };
 
 exports["default"] = Breadcrumb;

package/lib/components/Button/Button.d.ts

@@ -67,6 +67,15 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * Can be one of: start, center, or end.
      */
     tooltipAlignment?: ButtonTooltipAlignment;
+    /**
+     * Enable drop shadow for tooltips for icon-only buttons.
+     */
+    tooltipDropShadow?: boolean;
+    /**
+     * Enable high-contrast theme for tooltips on icon-only buttons.
+     * Defaults to true.
+     */
+    tooltipHighContrast?: boolean;
     /**
      * Specify the direction of the tooltip for icon-only buttons.
      * Can be either top, right, bottom, or left.

package/lib/components/Button/Button.js

@@ -38,6 +38,8 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef((props, ref) =>
     autoAlign = false,
     children,
     hasIconOnly = false,
+    tooltipHighContrast = true,
+    tooltipDropShadow = false,
     iconDescription,
     kind = 'primary',
     onBlur,
@@ -90,6 +92,8 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef((props, ref) =>
       label: iconDescription,
       kind: kind,
       size: size,
+      highContrast: tooltipHighContrast,
+      dropShadow: tooltipDropShadow,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
       onFocus: onFocus,
@@ -224,6 +228,15 @@ Button.propTypes = {
    * Can be one of: start, center, or end.
    */
   tooltipAlignment: PropTypes__default["default"].oneOf(['start', 'center', 'end']),
+  /**
+   * Enable drop shadow for tooltips for icon-only buttons.
+   */
+  tooltipDropShadow: PropTypes__default["default"].bool,
+  /**
+   * Enable high-contrast theme for tooltips for icon-only buttons.
+   * Defaults to true.
+   */
+  tooltipHighContrast: PropTypes__default["default"].bool,
   /**
    * Specify the direction of the tooltip for icon-only buttons.
    * Can be either top, right, bottom, or left.

package/lib/components/ComboBox/ComboBox.js

@@ -28,9 +28,9 @@ require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var react = require('@floating-ui/react');
 var index = require('../FeatureFlags/index.js');
-var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.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 }; }
@@ -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 = () => {
@@ -476,11 +476,22 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         }
       }
     },
+    initialSelectedItem: initialSelectedItem,
+    inputId: id,
+    stateReducer,
+    isItemDisabled(item, _index) {
+      return item?.disabled;
+    },
+    ...downshiftProps,
     onStateChange: _ref6 => {
       let {
         type,
         selectedItem: newSelectedItem
       } = _ref6;
+      downshiftProps?.onStateChange?.({
+        type,
+        selectedItem: newSelectedItem
+      });
       if (type === Downshift.useCombobox.stateChangeTypes.ItemClick && !isEqual__default["default"](selectedItemProp, newSelectedItem)) {
         onChange({
           selectedItem: newSelectedItem
@@ -492,14 +503,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
           selectedItem: newSelectedItem
         });
       }
-    },
-    initialSelectedItem: initialSelectedItem,
-    inputId: id,
-    stateReducer,
-    isItemDisabled(item, _index) {
-      return item?.disabled;
-    },
-    ...downshiftProps
+    }
   });
   React.useEffect(() => {
     // Used to expose the downshift actions to consumers for use with downshiftProps

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/Dropdown/Dropdown.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 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.

package/lib/components/Dropdown/Dropdown.js

@@ -330,11 +330,12 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     }
     return /*#__PURE__*/React__default["default"].isValidElement(element) ? element : null;
   }, [slug, decorator]);
+  const labelProps = ! /*#__PURE__*/React.isValidElement(titleText) ? getLabelProps() : null;
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
     className: titleClasses
-  }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
+  }, labelProps), titleText), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
     onFocus: handleFocus,
     onBlur: handleFocus,
     size: size,

package/lib/components/FileUploader/FileUploader.js

@@ -19,8 +19,8 @@ var Button = require('../Button/Button.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../Text/index.js');
 var useId = require('../../internal/useId.js');
-var Text = require('../Text/Text.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 }; }

package/lib/components/FileUploader/FileUploaderItem.js

@@ -20,8 +20,8 @@ var noopFn = require('../../internal/noopFn.js');
 require('../Text/index.js');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
-var Text = require('../Text/Text.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 }; }

package/lib/components/IconButton/index.d.ts

@@ -20,6 +20,11 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * **Experimental**: Will attempt to automatically align the tooltip
      */
     autoAlign?: boolean;
+    /**
+     * **Experimental**: Display a badge on the button. An empty/dot badge if 0, a numbered badge if > 0.
+     * Must be used with size="lg" and kind="ghost"
+     */
+    badgeCount?: number;
     /**
      * Optionally specify an href for your IconButton to become an `<a>` element
      */
@@ -68,7 +73,8 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * Provide the label to be rendered inside of the Tooltip. The label will use
      * `aria-labelledby` and will fully describe the child node that is provided.
      * This means that if you have text in the child node it will not be
-     * announced to the screen reader.
+     * announced to the screen reader. If using the badgeCount = 0 then provide a
+     * label with describing there is a new notification.
      */
     label: ReactNode;
     /**

package/lib/components/IconButton/index.js

@@ -15,9 +15,11 @@ var React = require('react');
 var cx = require('classnames');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
+var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var ButtonBase = require('../Button/ButtonBase.js');
 var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.js');
+var index = require('../BadgeIndicator/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -43,6 +45,7 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
   let {
     align,
     autoAlign = false,
+    badgeCount,
     children,
     className,
     closeOnActivation = true,
@@ -63,6 +66,10 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
   const tooltipClasses = cx__default["default"](wrapperClasses, `${prefix}--icon-tooltip`, {
     [`${prefix}--icon-tooltip--disabled`]: disabled
   });
+  if (badgeCount && (kind !== 'ghost' || size !== 'lg')) {
+    console.warn("The prop BadgeCount must be used with hasIconOnly=true, kind='ghost' and size='lg'");
+  }
+  const badgeId = useId.useId('badge-indicator');
   return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
     align: align,
     autoAlign: autoAlign,
@@ -81,8 +88,12 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
     size: size,
     className: cx__default["default"](`${prefix}--btn--icon-only`, {
       [`${prefix}--btn--selected`]: isSelected
-    }, className)
-  }), children));
+    }, className),
+    "aria-describedby": badgeCount && badgeId
+  }), children, !disabled && badgeCount !== undefined && /*#__PURE__*/React__default["default"].createElement(index.BadgeIndicator, {
+    id: badgeId,
+    count: badgeCount > 0 ? badgeCount : undefined
+  })));
 });
 IconButton.propTypes = {
   /**
@@ -118,6 +129,11 @@ IconButton.propTypes = {
    * **Experimental**: Will attempt to automatically align the tooltip
    */
   autoAlign: PropTypes__default["default"].bool,
+  /**
+   * **Experimental**: Display a badge on the button. An empty/dot badge if 0, a numbered badge if > 0.
+   * Must be used with size="lg", kind="ghost" and hasIconOnly=true
+   */
+  badgeCount: PropTypes__default["default"].number,
   /**
    * Optionally specify an href for your IconButton to become an `<a>` element
    */

package/lib/components/IconIndicator/index.d.ts

@@ -7,7 +7,7 @@
 import React from 'react';
 export declare const IconIndicatorKinds: string[];
 export type IconIndicatorKind = (typeof IconIndicatorKinds)[number];
-interface IconIndicatorProps {
+export interface IconIndicatorProps {
     /**
      * Specify an optional className to add.
      */

package/lib/components/InlineLoading/InlineLoading.js

@@ -76,10 +76,7 @@ const InlineLoading = _ref => {
     }
     return undefined;
   };
-
-  // TODO: Should this element only be constructed, similar to
-  // `loadingAnimation`, if `description` is specified?
-  const loadingText = /*#__PURE__*/React__default["default"].createElement("div", {
+  const loadingText = description && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--inline-loading__text`
   }, description);
   const loading = getLoading();
@@ -90,7 +87,7 @@ const InlineLoading = _ref => {
     className: loadingClasses
   }, rest, {
     "aria-live": rest['aria-live'] ?? 'assertive'
-  }), loadingAnimation, description && loadingText);
+  }), loadingAnimation, loadingText);
 };
 InlineLoading.propTypes = {
   /**

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;
     /**