@carbon/react 1.78.1 → 1.78.2

package/lib/components/Modal/Modal.js

@@ -19,23 +19,22 @@ var Button = require('../Button/Button.js');
 require('../Button/Button.Skeleton.js');
 var ButtonSet = require('../ButtonSet/ButtonSet.js');
 var InlineLoading = require('../InlineLoading/InlineLoading.js');
-var index$3 = require('../Layer/index.js');
+var index$1 = require('../Layer/index.js');
 var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
 var wrapFocus = require('../../internal/wrapFocus.js');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var keys = require('../../internal/keyboard/keys.js');
-var match = require('../../internal/keyboard/match.js');
 var index$2 = require('../IconButton/index.js');
 var noopFn = require('../../internal/noopFn.js');
 require('../Text/index.js');
 var index = require('../FeatureFlags/index.js');
 var events = require('../../tools/events.js');
 var deprecate = require('../../prop-types/deprecate.js');
-var index$1 = require('../Dialog/index.js');
 var debounce = require('../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.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 }; }
 
@@ -97,7 +96,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     [`${prefix}--btn--loading`]: loadingStatus !== 'inactive'
   });
   const loadingActive = loadingStatus !== 'inactive';
-  const enableDialogElement = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels') || index.useFeatureFlag('enable-dialog-element');
+  const focusTrapWithoutSentinels = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
   function isCloseButton(element) {
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
   }
@@ -110,6 +109,13 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
       if (match.match(evt, keys.Enter) && shouldSubmitOnEnter && !isCloseButton(evt.target)) {
         onRequestSubmit(evt);
       }
+      if (focusTrapWithoutSentinels && match.match(evt, keys.Tab) && innerModal.current) {
+        wrapFocus.wrapFocusWithoutSentinels({
+          containerNode: innerModal.current,
+          currentActiveNode: evt.target,
+          event: evt
+        });
+      }
     }
   }
   function handleOnClick(evt) {
@@ -185,46 +191,40 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
   }
   React.useEffect(() => {
     return () => {
-      if (!enableDialogElement) {
-        toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, false);
-      }
+      toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, false);
     };
-  }, [prefix, enableDialogElement]);
+  }, [prefix]);
   React.useEffect(() => {
-    if (!enableDialogElement) {
-      toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, open ?? false);
-    }
-  }, [open, prefix, enableDialogElement]);
+    toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, open ?? false);
+  }, [open, prefix]);
   React.useEffect(() => {
-    if (!enableDialogElement && !open && launcherButtonRef) {
+    if (!open && launcherButtonRef) {
       setTimeout(() => {
         if ('current' in launcherButtonRef) {
           launcherButtonRef.current?.focus();
         }
       });
     }
-  }, [open, launcherButtonRef, enableDialogElement]);
+  }, [open, launcherButtonRef]);
   React.useEffect(() => {
-    if (!enableDialogElement) {
-      const initialFocus = focusContainerElement => {
-        const containerElement = focusContainerElement || innerModal.current;
-        const primaryFocusElement = containerElement ? containerElement.querySelector(danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus) : null;
-        if (primaryFocusElement) {
-          return primaryFocusElement;
-        }
-        return button && button.current;
-      };
-      const focusButton = focusContainerElement => {
-        const target = initialFocus(focusContainerElement);
-        if (target !== null) {
-          target.focus();
-        }
-      };
-      if (open) {
-        focusButton(innerModal.current);
+    const initialFocus = focusContainerElement => {
+      const containerElement = focusContainerElement || innerModal.current;
+      const primaryFocusElement = containerElement ? containerElement.querySelector(danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus) : null;
+      if (primaryFocusElement) {
+        return primaryFocusElement;
+      }
+      return button && button.current;
+    };
+    const focusButton = focusContainerElement => {
+      const target = initialFocus(focusContainerElement);
+      if (target !== null) {
+        target.focus();
       }
+    };
+    if (open) {
+      focusButton(innerModal.current);
     }
-  }, [open, selectorPrimaryFocus, danger, prefix, enableDialogElement]);
+  }, [open, selectorPrimaryFocus, danger, prefix]);
   useIsomorphicEffect["default"](() => {
     if (contentRef.current) {
       setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
@@ -264,84 +264,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     tabIndex: "-1",
     className: `${modalCloseButtonClass}__icon`
   })));
-
-  // alertdialog is the only permitted aria role for a native dialog element
-  // https://www.w3.org/TR/html-aria/#docconformance:~:text=Role%3A-,alertdialog,-.%20(dialog%20is
-  const isAlertDialog = alert && !passiveModal;
-  const modalBody = enableDialogElement ? /*#__PURE__*/React__default["default"].createElement(index$1.unstable__Dialog, {
-    open: open,
-    modal: true,
-    ref: innerModal,
-    role: isAlertDialog ? 'alertdialog' : '',
-    "aria-describedby": isAlertDialog ? modalBodyId : '',
-    className: containerClasses,
-    "aria-label": ariaLabel
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--modal-header`
-  }, modalLabel && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-    as: "h2",
-    id: modalLabelId,
-    className: `${prefix}--modal-header__label`
-  }, modalLabel), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-    as: "h2",
-    id: modalHeadingId,
-    className: `${prefix}--modal-header__heading`
-  }, modalHeading), decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--modal--inner__decorator`
-  }, normalizedDecorator) : '', /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--modal-close-button`
-  }, /*#__PURE__*/React__default["default"].createElement(index$2.IconButton, {
-    className: modalCloseButtonClass,
-    label: closeButtonLabel,
-    onClick: onRequestClose,
-    "aria-label": closeButtonLabel,
-    align: "left",
-    ref: button
-  }, /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {
-    size: 20,
-    "aria-hidden": "true",
-    tabIndex: "-1",
-    className: `${modalCloseButtonClass}__icon`
-  })))), /*#__PURE__*/React__default["default"].createElement(index$3.Layer, _rollupPluginBabelHelpers["extends"]({
-    ref: contentRef,
-    id: modalBodyId,
-    className: contentClasses
-  }, hasScrollingContentProps), children), !passiveModal && /*#__PURE__*/React__default["default"].createElement(ButtonSet["default"], {
-    className: footerClasses,
-    "aria-busy": loadingActive
-  }, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map((_ref3, i) => {
-    let {
-      buttonText,
-      onClick: onButtonClick
-    } = _ref3;
-    return /*#__PURE__*/React__default["default"].createElement(Button["default"], {
-      key: `${buttonText}-${i}`,
-      kind: "secondary",
-      onClick: onButtonClick
-    }, buttonText);
-  }) : secondaryButtonText && /*#__PURE__*/React__default["default"].createElement(Button["default"], {
-    disabled: loadingActive,
-    kind: "secondary",
-    onClick: onSecondaryButtonClick,
-    ref: secondaryButton
-  }, secondaryButtonText), /*#__PURE__*/React__default["default"].createElement(Button["default"], {
-    className: primaryButtonClass,
-    kind: danger ? 'danger' : 'primary',
-    disabled: loadingActive || primaryButtonDisabled,
-    onClick: onRequestSubmit,
-    ref: button
-  }, loadingStatus === 'inactive' ? primaryButtonText : /*#__PURE__*/React__default["default"].createElement(InlineLoading["default"], {
-    status: loadingStatus,
-    description: loadingDescription,
-    iconDescription: loadingIconDescription,
-    className: `${prefix}--inline-loading--btn`,
-    onSuccess: onLoadingSuccess
-  })))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !enableDialogElement && /*#__PURE__*/React__default["default"].createElement("span", {
-    ref: startTrap,
-    tabIndex: 0,
-    role: "link",
-    className: `${prefix}--visually-hidden`
-  }, "Focus sentinel"), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+  const modalBody = /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     ref: innerModal,
     role: "dialog"
   }, alertDialogProps, {
@@ -361,18 +284,18 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     className: `${prefix}--modal-header__heading`
   }, modalHeading), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--modal--inner__decorator`
-  }, normalizedDecorator) : '', !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement(index$3.Layer, _rollupPluginBabelHelpers["extends"]({
+  }, normalizedDecorator) : '', !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement(index$1.Layer, _rollupPluginBabelHelpers["extends"]({
     ref: contentRef,
     id: modalBodyId,
     className: contentClasses
   }, hasScrollingContentProps), children), !passiveModal && /*#__PURE__*/React__default["default"].createElement(ButtonSet["default"], {
     className: footerClasses,
     "aria-busy": loadingActive
-  }, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map((_ref4, i) => {
+  }, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map((_ref3, i) => {
     let {
       buttonText,
       onClick: onButtonClick
-    } = _ref4;
+    } = _ref3;
     return /*#__PURE__*/React__default["default"].createElement(Button["default"], {
       key: `${buttonText}-${i}`,
       kind: "secondary",
@@ -395,21 +318,26 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     iconDescription: loadingIconDescription,
     className: `${prefix}--inline-loading--btn`,
     onSuccess: onLoadingSuccess
-  })))), !enableDialogElement && /*#__PURE__*/React__default["default"].createElement("span", {
-    ref: endTrap,
-    tabIndex: 0,
-    role: "link",
-    className: `${prefix}--visually-hidden`
-  }, "Focus sentinel"));
-  return /*#__PURE__*/React__default["default"].createElement(index$3.Layer, _rollupPluginBabelHelpers["extends"]({}, rest, {
+  }))));
+  return /*#__PURE__*/React__default["default"].createElement(index$1.Layer, _rollupPluginBabelHelpers["extends"]({}, rest, {
     level: 0,
     onKeyDown: handleKeyDown,
     onClick: events.composeEventHandlers([rest?.onClick, handleOnClick]),
-    onBlur: !enableDialogElement ? handleBlur : () => {},
+    onBlur: !focusTrapWithoutSentinels ? handleBlur : () => {},
     className: modalClasses,
     role: "presentation",
     ref: ref
-  }), modalBody);
+  }), !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("span", {
+    ref: startTrap,
+    tabIndex: 0,
+    role: "link",
+    className: `${prefix}--visually-hidden`
+  }, "Focus sentinel"), modalBody, !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("span", {
+    ref: endTrap,
+    tabIndex: 0,
+    role: "link",
+    className: `${prefix}--visually-hidden`
+  }, "Focus sentinel"));
 });
 Modal.propTypes = {
   /**

package/lib/components/Modal/next/index.d.ts

@@ -0,0 +1,171 @@
+/**
+ * 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, { ReactNode } from 'react';
+import { ReactAttr } from '../../../types/common';
+import { InlineLoadingStatus } from '../../InlineLoading/InlineLoading';
+export declare const ModalSizes: readonly ["xs", "sm", "md", "lg"];
+export type ModalSize = (typeof ModalSizes)[number];
+export interface ModalSecondaryButton {
+    buttonText?: string | ReactNode;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export interface BaseModalProps extends ReactAttr<HTMLDivElement> {
+    /**
+     * Required props for the accessibility label of the header
+     */
+    'aria-label'?: string;
+    /**
+     * Provide the contents of your Modal
+     */
+    children?: ReactNode;
+    /**
+     * Specify an optional className to be applied to the modal root node
+     */
+    className?: string;
+    /**
+     * Specify an label for the close button of the modal; defaults to close
+     */
+    closeButtonLabel?: string;
+    /**
+     * Specify whether the Modal is for dangerous actions
+     */
+    danger?: boolean;
+    /**
+     * **Experimental**: Provide a decorator component to be rendered inside the `Modal` component
+     */
+    decorator?: ReactNode;
+    /**
+     * Specify whether the modal contains scrolling content
+     */
+    hasScrollingContent?: boolean;
+    /**
+     * Specify the DOM element ID of the top-level node.
+     */
+    id?: string;
+    /**
+     * Specify whether or not the Modal content should have any inner padding.
+     */
+    isFullWidth?: boolean;
+    /**
+     * Specify the description for the loading text
+     */
+    loadingDescription?: string;
+    /**
+     * Specify the description for the loading text
+     */
+    loadingIconDescription?: string;
+    /**
+     * Specify loading status
+     */
+    loadingStatus?: InlineLoadingStatus;
+    /**
+     * Specify a label to be read by screen readers on the modal root node
+     */
+    modalAriaLabel?: string;
+    /**
+     * Specify the content of the modal header title.
+     */
+    modalHeading?: ReactNode;
+    /**
+     * Specify the content of the modal header label.
+     */
+    modalLabel?: ReactNode;
+    /**
+     * Specify a handler for keypresses.
+     * @deprecated this property is unused
+     */
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+    /**
+     * Specify an optional handler to be invoked when loading is
+     * successful
+     */
+    onLoadingSuccess?: () => void;
+    /**
+     * Specify a handler for closing modal.
+     * The handler should care of closing modal, e.g. changing `open` prop.
+     */
+    onRequestClose?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify a handler for "submitting" modal.
+     * The handler should care of closing modal, e.g. changing `open` prop, if necessary.
+     */
+    onRequestSubmit?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify a handler for the secondary button.
+     * Useful if separate handler from `onRequestClose` is desirable
+     */
+    onSecondarySubmit?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify whether the Modal is currently open
+     */
+    open?: boolean;
+    /**
+     * Prevent closing on click outside of modal
+     */
+    preventCloseOnClickOutside?: boolean;
+    /**
+     * Specify whether the Button should be disabled, or not
+     */
+    primaryButtonDisabled?: boolean;
+    /**
+     * Specify the text for the primary button
+     */
+    primaryButtonText?: ReactNode;
+    /**
+     * Specify the text for the secondary button
+     */
+    secondaryButtonText?: ReactNode;
+    /**
+     * Specify an array of config objects for secondary buttons
+     */
+    secondaryButtons?: ModalSecondaryButton[];
+    /**
+     * Specify a CSS selector that matches the DOM element that should
+     * be focused when the Modal opens
+     */
+    selectorPrimaryFocus?: string;
+    /**
+     * Specify CSS selectors that match DOM elements working as floating menus.
+     * Focusing on those elements won't trigger "focus-wrap" behavior
+     */
+    selectorsFloatingMenus?: string[];
+    /**
+     * Specify if Enter key should be used as "submit" action
+     */
+    shouldSubmitOnEnter?: boolean;
+    /**
+     * Specify the size variant.
+     */
+    size?: ModalSize;
+}
+interface PassiveModal extends BaseModalProps {
+    /**
+     * Specify whether the modal should be button-less
+     */
+    passiveModal?: true;
+    /**
+     * Specify whether the Modal is displaying an alert, error or warning. Should
+     * go hand in hand with the `danger` prop. This changes the `role` to
+     * `alertdialog` and cannot be used with passive modals.
+     */
+    alert?: never;
+}
+interface NonPassiveModal extends BaseModalProps {
+    /**
+     * Specify whether the modal should be button-less
+     */
+    passiveModal?: false;
+    /**
+     * Specify whether the Modal is displaying an alert, error or warning. Should
+     * go hand in hand with the `danger` prop. This changes the `role` to
+     * `alertdialog` and cannot be used with passive modals.
+     */
+    alert?: boolean;
+}
+export type ModalProps = PassiveModal | NonPassiveModal;
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export default Modal;

package/lib/components/ModalWrapper/ModalWrapper.js

@@ -17,8 +17,8 @@ var Button = require('../Button/Button.js');
 require('../Button/Button.Skeleton.js');
 var warning = require('../../internal/warning.js');
 var noopFn = require('../../internal/noopFn.js');
-var keys = require('../../internal/keyboard/keys.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 }; }
 

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -21,8 +21,6 @@ var MultiSelectPropTypes = require('./MultiSelectPropTypes.js');
 var index = require('../ListBox/index.js');
 var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
 var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
-var keys = require('../../internal/keyboard/keys.js');
-var match = require('../../internal/keyboard/match.js');
 var itemToString = require('./tools/itemToString.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
@@ -33,7 +31,9 @@ require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var Selection = require('../../internal/Selection.js');
 var react = require('@floating-ui/react');
+var match = require('../../internal/keyboard/match.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
+var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -426,7 +426,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
   });
   function clearInputValue(event) {
     const value = textInput.current?.value;
-    if (value?.length === 1 || event && 'key' in event && match.match(event, keys.Escape)) {
+    if (value?.length === 1 || event && match.match(event, keys.Escape)) {
       setInputValue('');
     } else {
       setInputValue(value ?? '');

package/lib/components/MultiSelect/MultiSelect.js

@@ -23,8 +23,6 @@ var Selection = require('../../internal/Selection.js');
 var useId = require('../../internal/useId.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
-var keys = require('../../internal/keyboard/keys.js');
-var match = require('../../internal/keyboard/match.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
@@ -33,7 +31,9 @@ require('../Checkbox/Checkbox.Skeleton.js');
 var noopFn = require('../../internal/noopFn.js');
 var react = require('@floating-ui/react');
 var index = require('../FeatureFlags/index.js');
+var match = require('../../internal/keyboard/match.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.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/Notification/Notification.d.ts

@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * 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 PropTypes from 'prop-types';
-import React, { type ReactNode, type MouseEvent, type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
+import React, { type ReactNode, type MouseEvent, type ComponentType, type FunctionComponent, type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
 import { type ButtonProps } from '../Button';
 export interface NotificationActionButtonProps extends ButtonProps<'button'> {
     /**
@@ -71,9 +71,16 @@ export interface NotificationButtonProps extends ButtonHTMLAttributes<HTMLButton
      */
     notificationType?: 'toast' | 'inline' | 'actionable';
     /**
-     * A component used to render an icon.
+     * Optional prop to allow overriding the icon rendering.
+     * Can be a React component class
      */
-    renderIcon?: React.ElementType;
+    renderIcon?: ComponentType<{
+        className?: string;
+        name?: string;
+    }> | FunctionComponent<{
+        className?: string;
+        name?: string;
+    }>;
 }
 export declare function NotificationButton({ 'aria-label': ariaLabel, ariaLabel: deprecatedAriaLabel, className, type, renderIcon: IconTag, name, notificationType, ...rest }: NotificationButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace NotificationButton {
@@ -101,7 +108,8 @@ export declare namespace NotificationButton {
          */
         notificationType: PropTypes.Requireable<string>;
         /**
-         * A component used to render an icon.
+         * Optional prop to allow overriding the icon rendering.
+         * Can be a React component class
          */
         renderIcon: PropTypes.Requireable<object>;
         /**

package/lib/components/Notification/Notification.js

@@ -20,8 +20,6 @@ var Button = require('../Button/Button.js');
 require('../Button/Button.Skeleton.js');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.js');
-var keys = require('../../internal/keyboard/keys.js');
-var match = require('../../internal/keyboard/match.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useId = require('../../internal/useId.js');
 var noopFn = require('../../internal/noopFn.js');
@@ -29,7 +27,9 @@ var wrapFocus = require('../../internal/wrapFocus.js');
 var index = require('../FeatureFlags/index.js');
 var warning = require('../../internal/warning.js');
 var deprecateValuesWithin = require('../../prop-types/deprecateValuesWithin.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 }; }
 
@@ -155,7 +155,8 @@ NotificationButton.propTypes = {
    */
   notificationType: PropTypes__default["default"].oneOf(['toast', 'inline', 'actionable']),
   /**
-   * A component used to render an icon.
+   * Optional prop to allow overriding the icon rendering.
+   * Can be a React component class
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**

package/lib/components/OverflowMenu/OverflowMenu.d.ts

@@ -5,9 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { type MenuDirection, type MenuOffset } from '../../internal/FloatingMenu';
-import React from 'react';
+import React, { ComponentType } from 'react';
 import PropTypes from 'prop-types';
 export declare const getMenuOffset: MenuOffset;
+type IconProps = {
+    className?: string;
+    'aria-label'?: string;
+};
 export interface OverflowMenuProps {
     /**
      * Specify a label to be read by screen readers on the container node
@@ -85,9 +89,9 @@ export interface OverflowMenuProps {
      */
     open?: boolean;
     /**
-     * A component used to render an icon.
+     * Function called to override icon rendering.
      */
-    renderIcon?: React.ElementType;
+    renderIcon?: ComponentType<IconProps>;
     /**
      * Specify a CSS selector that matches the DOM element that should
      * be focused when the OverflowMenu opens
@@ -204,7 +208,7 @@ declare class OverflowMenu extends React.Component<OverflowMenuProps, OverflowMe
          */
         open: PropTypes.Requireable<boolean>;
         /**
-         * A component used to render an icon.
+         * Function called to override icon rendering.
          */
         renderIcon: PropTypes.Requireable<object>;
         /**

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -12,8 +12,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var FloatingMenu = require('../../internal/FloatingMenu.js');
 var React = require('react');
-var keys = require('../../internal/keyboard/keys.js');
-var match = require('../../internal/keyboard/match.js');
 var ClickListener = require('../../internal/ClickListener.js');
 var index = require('../IconButton/index.js');
 var iconsReact = require('@carbon/icons-react');
@@ -25,6 +23,8 @@ var invariant = require('invariant');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var noopFn = require('../../internal/noopFn.js');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.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 }; }
 
@@ -499,7 +499,7 @@ _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "propTypes", {
    */
   open: PropTypes__default["default"].bool,
   /**
-   * A component used to render an icon.
+   * Function called to override icon rendering.
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**

package/lib/components/OverflowMenu/next/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2025
+ * Copyright IBM Corp. 2020, 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.
@@ -27,7 +27,7 @@ interface OverflowMenuProps {
      */
     menuAlignment?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
     /**
-     * A component used to render an icon.
+     * Optionally provide a custom icon to be rendered on the trigger button.
      */
     renderIcon?: ComponentType | FunctionComponent;
     /**

package/lib/components/OverflowMenu/next/index.js

@@ -175,7 +175,7 @@ OverflowMenu.propTypes = {
    */
   menuAlignment: PropTypes__default["default"].oneOf(['top-start', 'top-end', 'bottom-start', 'bottom-end']),
   /**
-   * A component used to render an icon.
+   * Optionally provide a custom icon to be rendered on the trigger button.
    */
   // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),