@carbon/react 1.78.1 → 1.78.2

package/es/components/Modal/Modal.js

@@ -17,21 +17,20 @@ import ButtonSet from '../ButtonSet/ButtonSet.js';
 import InlineLoading from '../InlineLoading/InlineLoading.js';
 import { Layer } from '../Layer/index.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
-import wrapFocus, { elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
+import wrapFocus, { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { Escape, Enter } from '../../internal/keyboard/keys.js';
-import { match } from '../../internal/keyboard/match.js';
 import { IconButton } from '../IconButton/index.js';
 import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import deprecate from '../../prop-types/deprecate.js';
-import { unstable__Dialog } from '../Dialog/index.js';
 import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
+import { match } from '../../internal/keyboard/match.js';
 import { Text } from '../Text/Text.js';
+import { Escape, Enter, Tab } from '../../internal/keyboard/keys.js';
 
 const ModalSizes = ['xs', 'sm', 'md', 'lg'];
 const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
@@ -87,7 +86,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     [`${prefix}--btn--loading`]: loadingStatus !== 'inactive'
   });
   const loadingActive = loadingStatus !== 'inactive';
-  const enableDialogElement = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels') || useFeatureFlag('enable-dialog-element');
+  const focusTrapWithoutSentinels = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
   function isCloseButton(element) {
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
   }
@@ -100,6 +99,13 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
       if (match(evt, Enter) && shouldSubmitOnEnter && !isCloseButton(evt.target)) {
         onRequestSubmit(evt);
       }
+      if (focusTrapWithoutSentinels && match(evt, Tab) && innerModal.current) {
+        wrapFocusWithoutSentinels({
+          containerNode: innerModal.current,
+          currentActiveNode: evt.target,
+          event: evt
+        });
+      }
     }
   }
   function handleOnClick(evt) {
@@ -175,46 +181,40 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   }
   useEffect(() => {
     return () => {
-      if (!enableDialogElement) {
-        toggleClass(document.body, `${prefix}--body--with-modal-open`, false);
-      }
+      toggleClass(document.body, `${prefix}--body--with-modal-open`, false);
     };
-  }, [prefix, enableDialogElement]);
+  }, [prefix]);
   useEffect(() => {
-    if (!enableDialogElement) {
-      toggleClass(document.body, `${prefix}--body--with-modal-open`, open ?? false);
-    }
-  }, [open, prefix, enableDialogElement]);
+    toggleClass(document.body, `${prefix}--body--with-modal-open`, open ?? false);
+  }, [open, prefix]);
   useEffect(() => {
-    if (!enableDialogElement && !open && launcherButtonRef) {
+    if (!open && launcherButtonRef) {
       setTimeout(() => {
         if ('current' in launcherButtonRef) {
           launcherButtonRef.current?.focus();
         }
       });
     }
-  }, [open, launcherButtonRef, enableDialogElement]);
+  }, [open, launcherButtonRef]);
   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(() => {
     if (contentRef.current) {
       setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
@@ -254,84 +254,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     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.createElement(unstable__Dialog, {
-    open: open,
-    modal: true,
-    ref: innerModal,
-    role: isAlertDialog ? 'alertdialog' : '',
-    "aria-describedby": isAlertDialog ? modalBodyId : '',
-    className: containerClasses,
-    "aria-label": ariaLabel
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--modal-header`
-  }, modalLabel && /*#__PURE__*/React__default.createElement(Text, {
-    as: "h2",
-    id: modalLabelId,
-    className: `${prefix}--modal-header__label`
-  }, modalLabel), /*#__PURE__*/React__default.createElement(Text, {
-    as: "h2",
-    id: modalHeadingId,
-    className: `${prefix}--modal-header__heading`
-  }, modalHeading), decorator ? /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--modal--inner__decorator`
-  }, normalizedDecorator) : '', /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--modal-close-button`
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
-    className: modalCloseButtonClass,
-    label: closeButtonLabel,
-    onClick: onRequestClose,
-    "aria-label": closeButtonLabel,
-    align: "left",
-    ref: button
-  }, /*#__PURE__*/React__default.createElement(Close, {
-    size: 20,
-    "aria-hidden": "true",
-    tabIndex: "-1",
-    className: `${modalCloseButtonClass}__icon`
-  })))), /*#__PURE__*/React__default.createElement(Layer, _extends({
-    ref: contentRef,
-    id: modalBodyId,
-    className: contentClasses
-  }, hasScrollingContentProps), children), !passiveModal && /*#__PURE__*/React__default.createElement(ButtonSet, {
-    className: footerClasses,
-    "aria-busy": loadingActive
-  }, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map((_ref3, i) => {
-    let {
-      buttonText,
-      onClick: onButtonClick
-    } = _ref3;
-    return /*#__PURE__*/React__default.createElement(Button, {
-      key: `${buttonText}-${i}`,
-      kind: "secondary",
-      onClick: onButtonClick
-    }, buttonText);
-  }) : secondaryButtonText && /*#__PURE__*/React__default.createElement(Button, {
-    disabled: loadingActive,
-    kind: "secondary",
-    onClick: onSecondaryButtonClick,
-    ref: secondaryButton
-  }, secondaryButtonText), /*#__PURE__*/React__default.createElement(Button, {
-    className: primaryButtonClass,
-    kind: danger ? 'danger' : 'primary',
-    disabled: loadingActive || primaryButtonDisabled,
-    onClick: onRequestSubmit,
-    ref: button
-  }, loadingStatus === 'inactive' ? primaryButtonText : /*#__PURE__*/React__default.createElement(InlineLoading, {
-    status: loadingStatus,
-    description: loadingDescription,
-    iconDescription: loadingIconDescription,
-    className: `${prefix}--inline-loading--btn`,
-    onSuccess: onLoadingSuccess
-  })))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !enableDialogElement && /*#__PURE__*/React__default.createElement("span", {
-    ref: startTrap,
-    tabIndex: 0,
-    role: "link",
-    className: `${prefix}--visually-hidden`
-  }, "Focus sentinel"), /*#__PURE__*/React__default.createElement("div", _extends({
+  const modalBody = /*#__PURE__*/React__default.createElement("div", _extends({
     ref: innerModal,
     role: "dialog"
   }, alertDialogProps, {
@@ -358,11 +281,11 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   }, hasScrollingContentProps), children), !passiveModal && /*#__PURE__*/React__default.createElement(ButtonSet, {
     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.createElement(Button, {
       key: `${buttonText}-${i}`,
       kind: "secondary",
@@ -385,21 +308,26 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     iconDescription: loadingIconDescription,
     className: `${prefix}--inline-loading--btn`,
     onSuccess: onLoadingSuccess
-  })))), !enableDialogElement && /*#__PURE__*/React__default.createElement("span", {
-    ref: endTrap,
-    tabIndex: 0,
-    role: "link",
-    className: `${prefix}--visually-hidden`
-  }, "Focus sentinel"));
+  }))));
   return /*#__PURE__*/React__default.createElement(Layer, _extends({}, rest, {
     level: 0,
     onKeyDown: handleKeyDown,
     onClick: composeEventHandlers([rest?.onClick, handleOnClick]),
-    onBlur: !enableDialogElement ? handleBlur : () => {},
+    onBlur: !focusTrapWithoutSentinels ? handleBlur : () => {},
     className: modalClasses,
     role: "presentation",
     ref: ref
-  }), modalBody);
+  }), !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("span", {
+    ref: startTrap,
+    tabIndex: 0,
+    role: "link",
+    className: `${prefix}--visually-hidden`
+  }, "Focus sentinel"), modalBody, !focusTrapWithoutSentinels && /*#__PURE__*/React__default.createElement("span", {
+    ref: endTrap,
+    tabIndex: 0,
+    role: "link",
+    className: `${prefix}--visually-hidden`
+  }, "Focus sentinel"));
 });
 Modal.propTypes = {
   /**

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

@@ -13,8 +13,8 @@ import Button, { ButtonKinds } from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 import { warning } from '../../internal/warning.js';
 import { noopFn } from '../../internal/noopFn.js';
-import { Escape } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
+import { Escape } from '../../internal/keyboard/keys.js';
 
 let didWarnAboutDeprecation = false;
 class ModalWrapper extends React__default.Component {

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -17,8 +17,6 @@ import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import ListBox from '../ListBox/index.js';
 import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
 import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
-import { Escape, Space, Enter, Delete, Tab, Home, End } from '../../internal/keyboard/keys.js';
-import { match } from '../../internal/keyboard/match.js';
 import { defaultItemToString } from './tools/itemToString.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import deprecate from '../../prop-types/deprecate.js';
@@ -29,7 +27,9 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useSelection } from '../../internal/Selection.js';
 import { useFloating, flip, size, hide, autoUpdate } from '@floating-ui/react';
+import { match } from '../../internal/keyboard/match.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
+import { Escape, Space, Enter, Delete, Tab, Home, End } from '../../internal/keyboard/keys.js';
 
 const {
   InputBlur,
@@ -414,7 +414,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
   });
   function clearInputValue(event) {
     const value = textInput.current?.value;
-    if (value?.length === 1 || event && 'key' in event && match(event, Escape)) {
+    if (value?.length === 1 || event && match(event, Escape)) {
       setInputValue('');
     } else {
       setInputValue(value ?? '');

package/es/components/MultiSelect/MultiSelect.js

@@ -19,8 +19,6 @@ import { useSelection } from '../../internal/Selection.js';
 import { useId } from '../../internal/useId.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import deprecate from '../../prop-types/deprecate.js';
-import { Delete, Escape, Space, ArrowDown, Enter } from '../../internal/keyboard/keys.js';
-import { match } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
@@ -29,7 +27,9 @@ import '../Checkbox/Checkbox.Skeleton.js';
 import { noopFn } from '../../internal/noopFn.js';
 import { useFloating, flip, size, hide, autoUpdate } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
+import { match } from '../../internal/keyboard/match.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
+import { Delete, Escape, Space, ArrowDown, Enter } from '../../internal/keyboard/keys.js';
 
 const {
   ItemClick,

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

@@ -16,8 +16,6 @@ import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useNoInteractiveChildren, useInteractiveChildrenNeedDescription } from '../../internal/useNoInteractiveChildren.js';
-import { Tab, Escape } from '../../internal/keyboard/keys.js';
-import { match, matches } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';
@@ -25,7 +23,9 @@ import wrapFocus, { wrapFocusWithoutSentinels } from '../../internal/wrapFocus.j
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { warning } from '../../internal/warning.js';
 import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
+import { match, matches } from '../../internal/keyboard/match.js';
 import { Text } from '../Text/Text.js';
+import { Tab, Escape } from '../../internal/keyboard/keys.js';
 
 /**
  * Conditionally call a callback when the escape key is pressed
@@ -145,7 +145,8 @@ NotificationButton.propTypes = {
    */
   notificationType: PropTypes.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.oneOfType([PropTypes.func, PropTypes.object]),
   /**

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

@@ -8,8 +8,6 @@
 import { defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { FloatingMenu, DIRECTION_TOP, DIRECTION_BOTTOM } from '../../internal/FloatingMenu.js';
 import React__default from 'react';
-import { ArrowUp, ArrowRight, ArrowDown, ArrowLeft, Escape } from '../../internal/keyboard/keys.js';
-import { matches } from '../../internal/keyboard/match.js';
 import ClickListener from '../../internal/ClickListener.js';
 import { IconButton } from '../IconButton/index.js';
 import { OverflowMenuVertical } from '@carbon/icons-react';
@@ -21,6 +19,8 @@ import invariant from 'invariant';
 import mergeRefs from '../../tools/mergeRefs.js';
 import { noopFn } from '../../internal/noopFn.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { matches } from '../../internal/keyboard/match.js';
+import { ArrowUp, ArrowRight, ArrowDown, ArrowLeft, Escape } from '../../internal/keyboard/keys.js';
 
 const getInstanceId = setupGetInstanceId();
 const on = function (element) {
@@ -488,7 +488,7 @@ _defineProperty(OverflowMenu, "propTypes", {
    */
   open: PropTypes.bool,
   /**
-   * A component used to render an icon.
+   * Function called to override icon rendering.
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**

package/es/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/es/components/OverflowMenu/next/index.js

@@ -165,7 +165,7 @@ OverflowMenu.propTypes = {
    */
   menuAlignment: PropTypes.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.oneOfType([PropTypes.func, PropTypes.object]),

package/es/components/OverflowMenuItem/OverflowMenuItem.js

@@ -9,12 +9,12 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default from 'react';
-import { ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
-import { match } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { warning } from '../../internal/warning.js';
 import '../Text/index.js';
+import { match } from '../../internal/keyboard/match.js';
 import { Text } from '../Text/Text.js';
+import { ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
 
 const OverflowMenuItem = /*#__PURE__*/React__default.forwardRef(function OverflowMenuItem(_ref, ref) {
   let {