@carbon/react 1.78.2 → 1.79.0

package/es/components/Layer/index.js

@@ -24,9 +24,9 @@ function useLayer() {
     level
   };
 }
-const LayerRenderFunction = /*#__PURE__*/React__default.forwardRef(function Layer(_ref, ref) {
+const Layer = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
-    as = 'div',
+    as,
     className: customClassName,
     children,
     level: overrideLevel,
@@ -38,7 +38,7 @@ const LayerRenderFunction = /*#__PURE__*/React__default.forwardRef(function Laye
   const className = cx(`${prefix}--layer-${levels[level]}`, customClassName);
   // The level should be between MIN_LEVEL and MAX_LEVEL
   const value = Math.max(MIN_LEVEL, Math.min(level + 1, MAX_LEVEL));
-  const BaseComponent = as;
+  const BaseComponent = as || 'div';
   return /*#__PURE__*/React__default.createElement(LayerContext.Provider, {
     value: value
   }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
@@ -47,8 +47,8 @@ const LayerRenderFunction = /*#__PURE__*/React__default.forwardRef(function Laye
     className: className
   }), children));
 });
-LayerRenderFunction.displayName = 'Layer';
-LayerRenderFunction.propTypes = {
+Layer.displayName = 'Layer';
+Layer.propTypes = {
   /**
    * Specify a custom component or element to be rendered as the top-level
    * element in the component
@@ -68,6 +68,5 @@ LayerRenderFunction.propTypes = {
    */
   level: PropTypes.oneOf([0, 1, 2])
 };
-const Layer = LayerRenderFunction;
 
 export { Layer, useLayer };

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

@@ -82,8 +82,7 @@ Link.propTypes = {
    */
   inline: PropTypes.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.oneOfType([PropTypes.func, PropTypes.object]),
   /**

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

@@ -7,28 +7,47 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
-import React__default, { useRef, useState, useEffect } from 'react';
+import React__default, { forwardRef, useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { usePrefix } from '../../internal/usePrefix.js';
+import { useMergedRefs } from '../../internal/useMergedRefs.js';
 
-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 = useRef(null);
+  const mergedRef = useMergedRefs([...(forwardedRef ? [forwardedRef] : []), localRef]);
   const [isTruncated, setIsTruncated] = useState(false);
   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.forwardRef(function ListBoxMenuItem(_ref, forwardedRef) {
+const ListBoxMenuItem = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   let {
     children,
     isActive = false,
@@ -37,8 +56,11 @@ const ListBoxMenuItem = /*#__PURE__*/React__default.forwardRef(function ListBoxM
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const ref = 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(`${prefix}--list-box__menu-item`, {
     [`${prefix}--list-box__menu-item--active`]: isActive,
     [`${prefix}--list-box__menu-item--highlighted`]: isHighlighted
@@ -48,7 +70,7 @@ const ListBoxMenuItem = /*#__PURE__*/React__default.forwardRef(function ListBoxM
     title: isTruncated ? title : undefined
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--list-box__menu-item__option`,
-    ref: forwardedRef?.menuItemOptionRef || ref
+    ref: menuItemOptionRef
   }, children));
 });
 ListBoxMenuItem.displayName = 'ListBoxMenuItem';

package/es/components/Menu/Menu.js

@@ -10,14 +10,14 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { forwardRef, useRef, useContext, useReducer, useMemo, useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
+import { Escape, ArrowLeft, ArrowUp, ArrowDown } from '../../internal/keyboard/keys.js';
+import { match } from '../../internal/keyboard/match.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { MenuContext, menuReducer } from './MenuContext.js';
 import { canUseDOM } from '../../internal/environment.js';
 import { useLayoutDirection } from '../LayoutDirection/useLayoutDirection.js';
-import { match } from '../../internal/keyboard/match.js';
-import { Escape, ArrowLeft, ArrowUp, ArrowDown } from '../../internal/keyboard/keys.js';
 
 const spacing = 8; // distance to keep to window edges, in px
 

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

@@ -11,6 +11,8 @@ import PropTypes from 'prop-types';
 import React__default, { forwardRef, useState, useContext, useRef, useEffect } from 'react';
 import { useFloating, autoUpdate, offset, useInteractions, useHover, safePolygon, FloatingFocusManager } from '@floating-ui/react';
 import { Checkmark, CaretLeft, CaretRight } from '@carbon/icons-react';
+import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
+import { match } from '../../internal/keyboard/match.js';
 import { useControllableState } from '../../internal/useControllableState.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -18,9 +20,7 @@ import { Menu } from './Menu.js';
 import { MenuContext } from './MenuContext.js';
 import '../Text/index.js';
 import { useLayoutDirection } from '../LayoutDirection/useLayoutDirection.js';
-import { match } from '../../internal/keyboard/match.js';
 import { Text } from '../Text/Text.js';
-import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 
 var _Checkmark, _CaretLeft, _CaretRight;
 const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(_ref, forwardRef) {
@@ -212,7 +212,7 @@ MenuItem.propTypes = {
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   onClick: PropTypes.func,
   /**
-   * Sets the menu item's icon.
+   * A component used to render an icon.
    */
   // @ts-ignore-next-line -- avoid spurious (?) TS2322 error
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

package/es/components/Modal/Modal.js

@@ -17,20 +17,21 @@ 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, { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
+import wrapFocus, { 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) {
@@ -86,7 +87,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     [`${prefix}--btn--loading`]: loadingStatus !== 'inactive'
   });
   const loadingActive = loadingStatus !== 'inactive';
-  const focusTrapWithoutSentinels = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  const enableDialogElement = useFeatureFlag('enable-experimental-focus-wrap-without-sentinels') || useFeatureFlag('enable-dialog-element');
   function isCloseButton(element) {
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
   }
@@ -99,13 +100,6 @@ 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) {
@@ -181,40 +175,46 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   }
   useEffect(() => {
     return () => {
-      toggleClass(document.body, `${prefix}--body--with-modal-open`, false);
+      if (!enableDialogElement) {
+        toggleClass(document.body, `${prefix}--body--with-modal-open`, false);
+      }
     };
-  }, [prefix]);
+  }, [prefix, enableDialogElement]);
   useEffect(() => {
-    toggleClass(document.body, `${prefix}--body--with-modal-open`, open ?? false);
-  }, [open, prefix]);
+    if (!enableDialogElement) {
+      toggleClass(document.body, `${prefix}--body--with-modal-open`, open ?? false);
+    }
+  }, [open, prefix, enableDialogElement]);
   useEffect(() => {
-    if (!open && launcherButtonRef) {
+    if (!enableDialogElement && !open && launcherButtonRef) {
       setTimeout(() => {
         if ('current' in launcherButtonRef) {
           launcherButtonRef.current?.focus();
         }
       });
     }
-  }, [open, launcherButtonRef]);
+  }, [open, launcherButtonRef, enableDialogElement]);
   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(() => {
     if (contentRef.current) {
       setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);
@@ -254,7 +254,84 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     tabIndex: "-1",
     className: `${modalCloseButtonClass}__icon`
   })));
-  const modalBody = /*#__PURE__*/React__default.createElement("div", _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.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({
     ref: innerModal,
     role: "dialog"
   }, alertDialogProps, {
@@ -281,11 +358,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((_ref3, i) => {
+  }, Array.isArray(secondaryButtons) && secondaryButtons.length <= 2 ? secondaryButtons.map((_ref4, i) => {
     let {
       buttonText,
       onClick: onButtonClick
-    } = _ref3;
+    } = _ref4;
     return /*#__PURE__*/React__default.createElement(Button, {
       key: `${buttonText}-${i}`,
       kind: "secondary",
@@ -308,26 +385,21 @@ 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: !focusTrapWithoutSentinels ? handleBlur : () => {},
+    onBlur: !enableDialogElement ? handleBlur : () => {},
     className: modalClasses,
     role: "presentation",
     ref: ref
-  }), !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"));
+  }), modalBody);
 });
 Modal.propTypes = {
   /**

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 { match } from '../../internal/keyboard/match.js';
 import { Escape } from '../../internal/keyboard/keys.js';
+import { match } from '../../internal/keyboard/match.js';
 
 let didWarnAboutDeprecation = false;
 class ModalWrapper extends React__default.Component {

package/es/components/MultiSelect/FilterableMultiSelect.js

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

package/es/components/MultiSelect/MultiSelect.js

@@ -19,6 +19,8 @@ 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';
@@ -27,9 +29,7 @@ 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/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/es/components/MultiSelect/index.js

@@ -5,16 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { deprecateFieldOnObject } from '../../internal/deprecateFieldOnObject.js';
 import MultiSelect from './MultiSelect.js';
 export { default as MultiSelect, default } from './MultiSelect.js';
 import FilterableMultiSelect from './FilterableMultiSelect.js';
 export { default as FilterableMultiSelect } from './FilterableMultiSelect.js';
 
-FilterableMultiSelect.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.Filterable = FilterableMultiSelect;
-if (process.env.NODE_ENV !== "production") {
-  deprecateFieldOnObject(MultiSelect, 'Filterable', FilterableMultiSelect);
-}
+FilterableMultiSelect.displayName = 'FilterableMultiSelect';

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

@@ -16,6 +16,8 @@ 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';
@@ -23,9 +25,7 @@ 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,8 +145,7 @@ NotificationButton.propTypes = {
    */
   notificationType: PropTypes.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.oneOfType([PropTypes.func, PropTypes.object]),
   /**