@carbon/react 1.78.2 → 1.79.0-rc.0

package/lib/components/Link/Link.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.
@@ -31,8 +31,7 @@ export interface LinkBaseProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
      */
     inline?: boolean;
     /**
-     * @description Optional prop to render an icon next to the link.
-     *   Can be a React component class
+     * A component used to render an icon.
      */
     renderIcon?: ComponentType;
     /**

package/lib/components/Link/Link.js

@@ -92,8 +92,7 @@ Link.propTypes = {
    */
   inline: PropTypes__default["default"].bool,
   /**
-   * Optional prop to render an icon next to the link.
-   * 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]),
   /**

package/lib/components/ListBox/ListBoxMenuItem.d.ts

@@ -1,10 +1,10 @@
 /**
- * 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 React, { ForwardedRef, ReactNode } from 'react';
+import { ForwardedRef, ReactNode, type Ref } from 'react';
 import { ForwardRefReturn, ReactAttr } from '../../types/common';
 export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
     /**
@@ -30,7 +30,7 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
     title?: string;
 }
 export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLLIElement> & {
-    menuItemOptionRef?: React.Ref<HTMLDivElement>;
+    menuItemOptionRef?: Ref<HTMLDivElement>;
 }) | null;
 export type ListBoxMenuItemComponent = ForwardRefReturn<ListBoxMenuItemForwardedRef, ListBoxMenuItemProps>;
 declare const _default: ListBoxMenuItemComponent;

package/lib/components/ListBox/ListBoxMenuItem.js

@@ -14,6 +14,7 @@ var cx = require('classnames');
 var React = require('react');
 var PropTypes = require('prop-types');
 var usePrefix = require('../../internal/usePrefix.js');
+var useMergedRefs = require('../../internal/useMergedRefs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -21,24 +22,42 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-function useIsTruncated(ref) {
+/**
+ * Determines if the content of an element is truncated.
+ *
+ * Merges a forwarded ref with a local ref to check the element's dimensions.
+ *
+ * @template T
+ * @param forwardedRef - A ref passed from the parent component.
+ * @param deps - Dependencies to re-run the truncation check.
+ * @returns An object containing the truncation state and the merged ref.
+ */
+const useIsTruncated = function (forwardedRef) {
+  let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  const localRef = React.useRef(null);
+  const mergedRef = useMergedRefs.useMergedRefs([...(forwardedRef ? [forwardedRef] : []), localRef]);
   const [isTruncated, setIsTruncated] = React.useState(false);
   React.useEffect(() => {
-    const element = ref.current;
-    const {
-      offsetWidth,
-      scrollWidth
-    } = element;
-    setIsTruncated(offsetWidth < scrollWidth);
-  }, [ref, setIsTruncated]);
-  return isTruncated;
-}
+    const element = localRef.current;
+    if (element) {
+      const {
+        offsetWidth,
+        scrollWidth
+      } = element;
+      setIsTruncated(offsetWidth < scrollWidth);
+    }
+  }, [localRef, ...deps]);
+  return {
+    isTruncated,
+    ref: mergedRef
+  };
+};
 /**
  * `ListBoxMenuItem` is a helper component for managing the container class
  * name, alongside any classes for any corresponding states, for a generic list
  * box menu item.
  */
-const ListBoxMenuItem = /*#__PURE__*/React__default["default"].forwardRef(function ListBoxMenuItem(_ref, forwardedRef) {
+const ListBoxMenuItem = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
   let {
     children,
     isActive = false,
@@ -47,8 +66,11 @@ const ListBoxMenuItem = /*#__PURE__*/React__default["default"].forwardRef(functi
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const ref = React.useRef(null);
-  const isTruncated = useIsTruncated(forwardedRef?.menuItemOptionRef || ref);
+  const menuItemOptionRefProp = forwardedRef && typeof forwardedRef !== 'function' ? forwardedRef.menuItemOptionRef : undefined;
+  const {
+    isTruncated,
+    ref: menuItemOptionRef
+  } = useIsTruncated(menuItemOptionRefProp, [children]);
   const className = cx__default["default"](`${prefix}--list-box__menu-item`, {
     [`${prefix}--list-box__menu-item--active`]: isActive,
     [`${prefix}--list-box__menu-item--highlighted`]: isHighlighted
@@ -58,7 +80,7 @@ const ListBoxMenuItem = /*#__PURE__*/React__default["default"].forwardRef(functi
     title: isTruncated ? title : undefined
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--list-box__menu-item__option`,
-    ref: forwardedRef?.menuItemOptionRef || ref
+    ref: menuItemOptionRef
   }, children));
 });
 ListBoxMenuItem.displayName = 'ListBoxMenuItem';

package/lib/components/Menu/Menu.js

@@ -14,14 +14,14 @@ var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 var ReactDOM = require('react-dom');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.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');
-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/Menu/MenuItem.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2023
+ * Copyright IBM Corp. 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.
@@ -31,7 +31,7 @@ export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
      */
     onClick?: (event: KeyboardEvent<HTMLLIElement> | MouseEvent<HTMLLIElement>) => void;
     /**
-     * Sets the menu item's icon.
+     * A component used to render an icon.
      */
     renderIcon?: FC;
     /**

package/lib/components/Menu/MenuItem.js

@@ -15,6 +15,8 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var react = require('@floating-ui/react');
 var iconsReact = require('@carbon/icons-react');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var useControllableState = require('../../internal/useControllableState.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
@@ -22,9 +24,7 @@ var Menu = require('./Menu.js');
 var MenuContext = require('./MenuContext.js');
 require('../Text/index.js');
 var useLayoutDirection = require('../LayoutDirection/useLayoutDirection.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 }; }
 
@@ -222,7 +222,7 @@ MenuItem.propTypes = {
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   onClick: PropTypes__default["default"].func,
   /**
-   * Sets the menu item's icon.
+   * A component used to render an icon.
    */
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),

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/MultiSelect/index.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.

package/lib/components/MultiSelect/index.js

@@ -9,17 +9,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var deprecateFieldOnObject = require('../../internal/deprecateFieldOnObject.js');
 var MultiSelect = require('./MultiSelect.js');
 var FilterableMultiSelect = require('./FilterableMultiSelect.js');
 
-FilterableMultiSelect["default"].displayName = 'MultiSelect.Filterable';
-// @ts-expect-error: The attribute indeed does not exist on the object,
-// but since it is already deprecated, we do not have to fix it.
-MultiSelect["default"].Filterable = FilterableMultiSelect["default"];
-if (process.env.NODE_ENV !== "production") {
-  deprecateFieldOnObject.deprecateFieldOnObject(MultiSelect["default"], 'Filterable', FilterableMultiSelect["default"]);
-}
+FilterableMultiSelect["default"].displayName = 'FilterableMultiSelect';
 
 exports.MultiSelect = MultiSelect["default"];
 exports["default"] = MultiSelect["default"];

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]),
   /**