@carbon/react 1.78.0-rc.0 → 1.78.1

package/lib/components/Modal/Modal.js

@@ -19,22 +19,23 @@ 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$1 = require('../Layer/index.js');
+var index$3 = 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 }; }
 
@@ -96,7 +97,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     [`${prefix}--btn--loading`]: loadingStatus !== 'inactive'
   });
   const loadingActive = loadingStatus !== 'inactive';
-  const focusTrapWithoutSentinels = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  const enableDialogElement = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels') || index.useFeatureFlag('enable-dialog-element');
   function isCloseButton(element) {
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
   }
@@ -109,13 +110,6 @@ 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) {
@@ -191,40 +185,46 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
   }
   React.useEffect(() => {
     return () => {
-      toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, false);
+      if (!enableDialogElement) {
+        toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, false);
+      }
     };
-  }, [prefix]);
+  }, [prefix, enableDialogElement]);
   React.useEffect(() => {
-    toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, open ?? false);
-  }, [open, prefix]);
+    if (!enableDialogElement) {
+      toggleClass["default"](document.body, `${prefix}--body--with-modal-open`, open ?? false);
+    }
+  }, [open, prefix, enableDialogElement]);
   React.useEffect(() => {
-    if (!open && launcherButtonRef) {
+    if (!enableDialogElement && !open && launcherButtonRef) {
       setTimeout(() => {
         if ('current' in launcherButtonRef) {
           launcherButtonRef.current?.focus();
         }
       });
     }
-  }, [open, launcherButtonRef]);
+  }, [open, launcherButtonRef, enableDialogElement]);
   React.useEffect(() => {
-    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 (!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);
       }
-    };
-    if (open) {
-      focusButton(innerModal.current);
     }
-  }, [open, selectorPrimaryFocus, danger, prefix]);
+  }, [open, selectorPrimaryFocus, danger, prefix, enableDialogElement]);
   useIsomorphicEffect["default"](() => {
     if (contentRef.current) {
       setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
@@ -264,7 +264,84 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     tabIndex: "-1",
     className: `${modalCloseButtonClass}__icon`
   })));
-  const modalBody = /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+
+  // 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"]({
     ref: innerModal,
     role: "dialog"
   }, alertDialogProps, {
@@ -284,18 +361,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$1.Layer, _rollupPluginBabelHelpers["extends"]({
+  }, normalizedDecorator) : '', !passiveModal && modalButton), /*#__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) => {
+  }, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map((_ref4, i) => {
     let {
       buttonText,
       onClick: onButtonClick
-    } = _ref3;
+    } = _ref4;
     return /*#__PURE__*/React__default["default"].createElement(Button["default"], {
       key: `${buttonText}-${i}`,
       kind: "secondary",
@@ -318,26 +395,21 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     iconDescription: loadingIconDescription,
     className: `${prefix}--inline-loading--btn`,
     onSuccess: onLoadingSuccess
-  }))));
-  return /*#__PURE__*/React__default["default"].createElement(index$1.Layer, _rollupPluginBabelHelpers["extends"]({}, rest, {
+  })))), !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, {
     level: 0,
     onKeyDown: handleKeyDown,
     onClick: events.composeEventHandlers([rest?.onClick, handleOnClick]),
-    onBlur: !focusTrapWithoutSentinels ? handleBlur : () => {},
+    onBlur: !enableDialogElement ? handleBlur : () => {},
     className: modalClasses,
     role: "presentation",
     ref: ref
-  }), !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"));
+  }), modalBody);
 });
 Modal.propTypes = {
   /**

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 match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -21,6 +21,8 @@ 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');
@@ -31,9 +33,7 @@ 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 && match.match(event, keys.Escape)) {
+    if (value?.length === 1 || event && 'key' in event && match.match(event, keys.Escape)) {
       setInputValue('');
     } else {
       setInputValue(value ?? '');

package/lib/components/MultiSelect/MultiSelect.js

@@ -23,6 +23,8 @@ 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');
@@ -31,9 +33,7 @@ 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, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React, { type ReactNode, type MouseEvent, type ComponentType, type FunctionComponent, type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
+import React, { type ReactNode, type MouseEvent, type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
 import { type ButtonProps } from '../Button';
 export interface NotificationActionButtonProps extends ButtonProps<'button'> {
     /**
@@ -71,16 +71,9 @@ export interface NotificationButtonProps extends ButtonHTMLAttributes<HTMLButton
      */
     notificationType?: 'toast' | 'inline' | 'actionable';
     /**
-     * Optional prop to allow overriding the icon rendering.
-     * Can be a React component class
+     * A component used to render an icon.
      */
-    renderIcon?: ComponentType<{
-        className?: string;
-        name?: string;
-    }> | FunctionComponent<{
-        className?: string;
-        name?: string;
-    }>;
+    renderIcon?: React.ElementType;
 }
 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 {
@@ -108,8 +101,7 @@ export declare namespace NotificationButton {
          */
         notificationType: PropTypes.Requireable<string>;
         /**
-         * Optional prop to allow overriding the icon rendering.
-         * Can be a React component class
+         * A component used to render an icon.
          */
         renderIcon: PropTypes.Requireable<object>;
         /**

package/lib/components/Notification/Notification.js

@@ -20,6 +20,8 @@ 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');
@@ -27,9 +29,7 @@ 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,8 +155,7 @@ NotificationButton.propTypes = {
    */
   notificationType: PropTypes__default["default"].oneOf(['toast', 'inline', 'actionable']),
   /**
-   * Optional prop to allow overriding the icon rendering.
-   * Can be a React component class
+   * A component used to render an icon.
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**
@@ -740,11 +739,9 @@ function Callout(_ref8) {
     [`${prefix}--actionable-notification--${kind}`]: kind,
     [`${prefix}--actionable-notification--hide-close-button`]: true
   });
-  const ref = React.useRef(null);
-  useNoInteractiveChildren.useInteractiveChildrenNeedDescription(ref, `interactive child node(s) should have an \`aria-describedby\` property with a value matching the value of \`titleId\``);
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    ref: ref
-  }, rest, {
+  const childrenContainer = React.useRef(null);
+  useNoInteractiveChildren.useInteractiveChildrenNeedDescription(childrenContainer, `interactive child node(s) should have an \`aria-describedby\` property with a value matching the value of \`titleId\``);
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: containerClassName
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--actionable-notification__details`
@@ -753,6 +750,7 @@ function Callout(_ref8) {
     kind: kind,
     iconDescription: statusIconDescription || `${kind} icon`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: childrenContainer,
     className: `${prefix}--actionable-notification__text-wrapper`
   }, title && /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "div",

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

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

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -12,6 +12,8 @@ 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');
@@ -23,8 +25,6 @@ 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,
   /**
-   * Function called to override icon rendering.
+   * A component used to render an icon.
    */
   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, 2023
+ * Copyright IBM Corp. 2020, 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.
@@ -27,7 +27,7 @@ interface OverflowMenuProps {
      */
     menuAlignment?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
     /**
-     * Optionally provide a custom icon to be rendered on the trigger button.
+     * A component used to render an icon.
      */
     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']),
   /**
-   * Optionally provide a custom icon to be rendered on the trigger button.
+   * A component used to render an icon.
    */
   // @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]),

package/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -13,12 +13,12 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var warning = require('../../internal/warning.js');
 require('../Text/index.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/ProgressIndicator/ProgressIndicator.js

@@ -13,12 +13,12 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../Text/index.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/RadioTile/RadioTile.js

@@ -14,15 +14,15 @@ var iconsReact = require('@carbon/icons-react');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var noopFn = require('../../internal/noopFn.js');
 require('../Text/index.js');
 var index = require('../FeatureFlags/index.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/Search/Search.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -62,8 +62,7 @@ export interface SearchProps extends InputPropsBase {
      */
     placeholder?: string;
     /**
-     * Rendered icon for the Search.
-     * Can be a React component class
+     * A component used to render an icon.
      */
     renderIcon?: ComponentType | FunctionComponent;
     /**

package/lib/components/Search/Search.js

@@ -14,7 +14,8 @@ var iconsReact = require('@carbon/icons-react');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
-var index = require('../../internal/focus/index.js');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var events = require('../../tools/events.js');
@@ -22,8 +23,6 @@ var useMergedRefs = require('../../internal/useMergedRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.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 }; }
 
@@ -100,7 +99,7 @@ const Search = /*#__PURE__*/React__default["default"].forwardRef(function Search
     onChange(clearedEvt);
     onClear();
     setHasContent(false);
-    index.focus(inputRef);
+    inputRef.current?.focus();
   }
   function handleChange(event) {
     setHasContent(event.target.value !== '');
@@ -231,8 +230,7 @@ Search.propTypes = {
    */
   placeholder: PropTypes__default["default"].string,
   /**
-   * Rendered icon for the Search.
-   * Can be a React component class
+   * A component used to render an icon.
    */
   // @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]),