@carbon/react 1.107.0 → 1.108.0-rc.0

package/es/components/PageHeader/PageHeader.js

@@ -13,6 +13,7 @@ import AspectRatio from "../AspectRatio/AspectRatio.js";
 import { Popover, PopoverContent } from "../Popover/index.js";
 import { DefinitionTooltip } from "../Tooltip/DefinitionTooltip.js";
 import { MenuItem } from "../Menu/MenuItem.js";
+import { deprecateComponent } from "../../prop-types/deprecateComponent.js";
 import { GridAsGridComponent } from "../Grid/Grid.js";
 import Column from "../Grid/Column.js";
 import { MenuButton } from "../MenuButton/index.js";
@@ -33,7 +34,18 @@ import { breakpoints } from "@carbon/layout";
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
+/**
+* @deprecated PageHeader has moved to Carbon for IBM Products.
+* See https://github.com/carbon-design-system/carbon/issues/21926
+*/
+const pageHeaderDeprecationMessage = (componentName) => `The \`${componentName}\` component in \`@carbon/react\` has been deprecated and moved to \`@carbon/ibm-products\`. See https://github.com/carbon-design-system/carbon/issues/21926`;
+const usePageHeaderDeprecation = (componentName) => {
+	useEffect(() => {
+		deprecateComponent(componentName, pageHeaderDeprecationMessage(componentName));
+	}, [componentName]);
+};
 const PageHeader = React.forwardRef(({ className, children, ...other }, ref) => {
+	usePageHeaderDeprecation("PageHeader");
 	return /* @__PURE__ */ jsx("div", {
 		className: classNames({ [`${usePrefix()}--page-header`]: true }, className),
 		ref,
@@ -43,6 +55,7 @@ const PageHeader = React.forwardRef(({ className, children, ...other }, ref) =>
 });
 PageHeader.displayName = "PageHeader";
 const PageHeaderBreadcrumbBar = React.forwardRef(({ border = true, className, children, renderIcon: IconElement, contentActions, contentActionsFlush, pageActions, pageActionsFlush, ...other }, ref) => {
+	usePageHeaderDeprecation("PageHeaderBreadcrumbBar");
 	const prefix = usePrefix();
 	const classNames$1 = classNames({
 		[`${prefix}--page-header__breadcrumb-bar`]: true,
@@ -79,6 +92,7 @@ const PageHeaderBreadcrumbBar = React.forwardRef(({ border = true, className, ch
 });
 PageHeaderBreadcrumbBar.displayName = "PageHeaderBreadcrumbBar";
 const PageHeaderContent = React.forwardRef(({ className, children, title, renderIcon: IconElement, contextualActions, pageActions, ...other }, ref) => {
+	usePageHeaderDeprecation("PageHeaderContent");
 	const prefix = usePrefix();
 	const classNames$2 = classNames({ [`${prefix}--page-header__content`]: true }, className);
 	const titleRef = useRef(null);
@@ -141,6 +155,7 @@ PageHeaderContent.propTypes = {
 	pageActions: PropTypes.node
 };
 const PageHeaderContentPageActions = ({ className, children, menuButtonLabel = "Actions", actions, ...other }) => {
+	usePageHeaderDeprecation("PageHeaderContentPageActions");
 	const classNames$3 = classNames({ [`${usePrefix()}--page-header__content__page-actions`]: true }, className);
 	const containerRef = useRef(null);
 	const offsetRef = useRef(null);
@@ -194,6 +209,7 @@ PageHeaderContentPageActions.propTypes = {
 	actions: PropTypes.oneOfType([PropTypes.node, PropTypes.array])
 };
 const PageHeaderContentText = ({ className, children, subtitle, ...other }) => {
+	usePageHeaderDeprecation("PageHeaderContentText");
 	const prefix = usePrefix();
 	return /* @__PURE__ */ jsxs("div", {
 		className: classNames({ [`${prefix}--page-header__content__body`]: true }, className),
@@ -212,6 +228,7 @@ PageHeaderContentText.propTypes = {
 	subtitle: PropTypes.string
 };
 const PageHeaderHeroImage = ({ className, children, ...other }) => {
+	usePageHeaderDeprecation("PageHeaderHeroImage");
 	const classNames$4 = classNames({ [`${usePrefix()}--page-header__hero-image`]: true }, className);
 	const isLg = useMatchMedia(`(min-width: ${breakpoints.lg.width})`);
 	return /* @__PURE__ */ jsx(AspectRatio, {
@@ -227,6 +244,7 @@ PageHeaderHeroImage.propTypes = {
 	className: PropTypes.string
 };
 const PageHeaderTabBar = React.forwardRef(({ className, children, tags = [], ...other }, ref) => {
+	usePageHeaderDeprecation("PageHeaderTabBar");
 	const prefix = usePrefix();
 	const classNames$5 = classNames({ [`${prefix}--page-header__tab-bar`]: true }, className);
 	const [openPopover, setOpenPopover] = useState(false);

package/es/components/PageHeader/index.d.ts

@@ -4,5 +4,9 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/**
+ * @deprecated PageHeader has moved to Carbon for IBM Products.
+ * See https://github.com/carbon-design-system/carbon/issues/21926
+ */
 export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderTabBar, PageHeaderHeroImage, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, TabBar, HeroImage, } from './PageHeader';
 export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, } from './PageHeader';

package/es/components/UIShell/SwitcherDivider.d.ts

@@ -7,7 +7,7 @@
 import PropTypes from 'prop-types';
 export interface SwitcherDividerProps {
     /**
-     * Optionally provide a custom class to apply to the underlying `<li>` node
+     * Optionally provide a custom class to apply to the underlying `<hr>` node
      */
     className?: string;
 }
@@ -15,7 +15,7 @@ declare const SwitcherDivider: {
     ({ className: customClassName, ...other }: SwitcherDividerProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
-         * Optionally provide a custom class to apply to the underlying `<li>` node
+         * Optionally provide a custom class to apply to the underlying `<hr>` node
          */
         className: PropTypes.Requireable<string>;
     };

package/es/components/UIShell/SwitcherDivider.js

@@ -13,10 +13,10 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/UIShell/SwitcherDivider.tsx
 const SwitcherDivider = ({ className: customClassName, ...other }) => {
 	const classNames$1 = classNames(`${usePrefix()}--switcher__item--divider`, { [customClassName || ""]: !!customClassName });
-	return /* @__PURE__ */ jsx("hr", {
+	return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("hr", {
 		...other,
 		className: classNames$1
-	});
+	}) });
 };
 SwitcherDivider.propTypes = { className: PropTypes.string };
 //#endregion

package/es/internal/warning.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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/Button/Button.d.ts

@@ -4,7 +4,7 @@
  * 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, { type ReactNode } from 'react';
+import React from 'react';
 import { IconButtonKind } from '../IconButton';
 import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 export declare const ButtonKinds: readonly ["primary", "secondary", "danger", "ghost", "danger--primary", "danger--ghost", "danger--tertiary", "tertiary"];
@@ -82,6 +82,6 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     tooltipPosition?: ButtonTooltipPosition;
 }
 export type ButtonProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, ButtonBaseProps>;
-export type ButtonComponent = <T extends React.ElementType = 'button'>(props: ButtonProps<T>) => ReactNode;
+export type ButtonComponent = <T extends React.ElementType = 'button'>(props: ButtonProps<T>, context?: any) => React.ReactElement | any;
 declare const _default: ButtonComponent;
 export default _default;

package/lib/components/ChatButton/ChatButton.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2024, 2025
+ * Copyright IBM Corp. 2024, 2026
  *
  * 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/ChatButton/ChatButton.js

@@ -17,7 +17,7 @@ prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/ChatButton/ChatButton.tsx
 /**
-* Copyright IBM Corp. 2024, 2025
+* Copyright IBM Corp. 2024, 2026
 *
 * 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/ComposedModal/ComposedModal.js

@@ -27,6 +27,7 @@ const require_wrapFocus = require("../../internal/wrapFocus.js");
 const require_Dialog = require("../Dialog/Dialog.js");
 const require_useComposedModalState = require("./useComposedModalState.js");
 const require_ComposedModalPresence = require("./ComposedModalPresence.js");
+const require_isTopmostVisibleModal = require("../Modal/isTopmostVisibleModal.js");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
 let react = require("react");
@@ -102,9 +103,14 @@ const ComposedModalDialog = react.default.forwardRef(function ComposedModalDialo
 	const button = (0, react.useRef)(null);
 	const startSentinel = (0, react.useRef)(null);
 	const endSentinel = (0, react.useRef)(null);
+	const modalRef = (0, react.useRef)(null);
 	const onMouseDownTarget = (0, react.useRef)(null);
 	const presenceContext = (0, react.useContext)(require_ComposedModalPresence.ComposedModalPresenceContext);
-	const mergedRefs = (0, _floating_ui_react.useMergeRefs)([ref, presenceContext?.presenceRef]);
+	const mergedRefs = (0, _floating_ui_react.useMergeRefs)([
+		modalRef,
+		ref,
+		presenceContext?.presenceRef
+	]);
 	const enablePresence = require_index.useFeatureFlag("enable-presence") || presenceContext?.autoEnablePresence;
 	const open = externalOpen || enablePresence;
 	const modalState = require_useComposedModalState.useComposedModalState(open);
@@ -188,15 +194,14 @@ const ComposedModalDialog = react.default.forwardRef(function ComposedModalDialo
 	(0, react.useEffect)(() => {
 		if (!open) return;
 		const handleEscapeKey = (event) => {
-			if (require_match.match(event, require_keys.Escape)) {
+			if (require_match.match(event, require_keys.Escape) && require_isTopmostVisibleModal.isTopmostVisibleModal(modalRef.current, prefix)) {
 				event.preventDefault();
-				event.stopPropagation();
 				closeModal(event);
 			}
 		};
-		document.addEventListener("keydown", handleEscapeKey, true);
+		document.addEventListener("keydown", handleEscapeKey);
 		return () => {
-			document.removeEventListener("keydown", handleEscapeKey, true);
+			document.removeEventListener("keydown", handleEscapeKey);
 		};
 	}, [open]);
 	(0, react.useEffect)(() => {

package/lib/components/ErrorBoundary/ErrorBoundaryContext.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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/ErrorBoundary/ErrorBoundaryContext.js

@@ -8,7 +8,7 @@
 require("../../_virtual/_rolldown/runtime.js");
 //#region src/components/ErrorBoundary/ErrorBoundaryContext.ts
 /**
-* Copyright IBM Corp. 2016, 2023
+* Copyright IBM Corp. 2016, 2026
 *
 * 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/FileUploader/FileUploader.d.ts

@@ -11,6 +11,7 @@ interface FileItem {
     file: File & {
         invalidFileType?: boolean;
     };
+    disabled?: boolean;
 }
 export interface FileChangeData {
     addedFiles: FileItem[];
@@ -113,6 +114,10 @@ export interface FileUploaderHandle {
      * Get current files (only available when 'enable-enhanced-file-uploader' feature flag is enabled)
      */
     getCurrentFiles?: () => FileItem[];
+    /**
+     * Set current files (only available when 'enable-enhanced-file-uploader' feature flag is enabled)
+     */
+    setCurrentFiles?: (files: FileItem[]) => void;
 }
 declare const FileUploader: {
     (props: FileUploaderProps): React.ReactElement;

package/lib/components/FileUploader/FileUploader.js

@@ -158,9 +158,14 @@ const FileUploader = (0, react.forwardRef)(({ accept, buttonKind, buttonLabel, c
 				});
 			} else setLegacyFileNames([]);
 		},
-		...enhancedFileUploaderEnabled && { getCurrentFiles() {
-			return [...fileItems];
-		} }
+		...enhancedFileUploaderEnabled && {
+			getCurrentFiles() {
+				return [...fileItems];
+			},
+			setCurrentFiles: (files) => {
+				setFileItems(files);
+			}
+		}
 	}), [
 		enhancedFileUploaderEnabled,
 		fileItems,
@@ -171,12 +176,14 @@ const FileUploader = (0, react.forwardRef)(({ accept, buttonKind, buttonLabel, c
 		[className]: className
 	});
 	const getHelperLabelClasses = (baseClass) => (0, classnames.default)(baseClass, { [`${prefix}--label-description--disabled`]: disabled });
-	const selectedFileClasses = (0, classnames.default)(`${prefix}--file__selected-file`, {
+	const getSelectedFileClasses = (file) => (0, classnames.default)(`${prefix}--file__selected-file`, {
 		[`${prefix}--file__selected-file--md`]: size === "field" || size === "md",
-		[`${prefix}--file__selected-file--sm`]: size === "small" || size === "sm"
+		[`${prefix}--file__selected-file--sm`]: size === "small" || size === "sm",
+		[`${prefix}--file__selected-file--disabled`]: file.disabled
 	});
 	const displayFiles = enhancedFileUploaderEnabled ? fileItems.map((item, index) => ({
 		name: item.name,
+		disabled: item.disabled,
 		key: item.uuid,
 		index
 	})) : legacyFileNames.map((name, index) => ({
@@ -215,7 +222,7 @@ const FileUploader = (0, react.forwardRef)(({ accept, buttonKind, buttonLabel, c
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: `${prefix}--file-container`,
 				children: displayFiles.length === 0 ? null : displayFiles.map((file) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: selectedFileClasses,
+					className: getSelectedFileClasses(file),
 					ref: (node) => {
 						nodes[file.index] = node;
 					},
@@ -229,6 +236,7 @@ const FileUploader = (0, react.forwardRef)(({ accept, buttonKind, buttonLabel, c
 						className: `${prefix}--file__state-container`,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Filename.default, {
 							name: file.name,
+							disabled: file.disabled,
 							iconDescription,
 							status: filenameStatus,
 							onKeyDown: (evt) => {

package/lib/components/FileUploader/FileUploaderItem.d.ts

@@ -7,6 +7,10 @@
 import PropTypes from 'prop-types';
 import React, { type HTMLAttributes } from 'react';
 export interface FileUploaderItemProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Specify whether file uploader item is disabled
+     */
+    disabled?: boolean;
     /**
      * Error message body for an invalid file upload
      */
@@ -52,7 +56,7 @@ export interface FileUploaderItemProps extends HTMLAttributes<HTMLSpanElement> {
      */
     uuid?: string;
 }
-declare function FileUploaderItem({ uuid, name, status, iconDescription, onDelete, invalid, errorSubject, errorBody, size, className, ...other }: FileUploaderItemProps): import("react/jsx-runtime").JSX.Element;
+declare function FileUploaderItem({ uuid, name, status, iconDescription, onDelete, invalid, errorSubject, errorBody, size, className, disabled, ...other }: FileUploaderItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace FileUploaderItem {
     var propTypes: {
         /**

package/lib/components/FileUploader/FileUploaderItem.js

@@ -29,7 +29,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
-function FileUploaderItem({ uuid, name, status = "uploading", iconDescription, onDelete = require_noopFn.noopFn, invalid, errorSubject, errorBody, size, className, ...other }) {
+function FileUploaderItem({ uuid, name, status = "uploading", iconDescription, onDelete = require_noopFn.noopFn, invalid, errorSubject, errorBody, size, className, disabled, ...other }) {
 	const textRef = (0, react.useRef)(null);
 	const [isEllipsisApplied, setIsEllipsisApplied] = (0, react.useState)(false);
 	const prefix = require_usePrefix.usePrefix();
@@ -38,7 +38,8 @@ function FileUploaderItem({ uuid, name, status = "uploading", iconDescription, o
 	const classes = (0, classnames.default)(`${prefix}--file__selected-file`, className, {
 		[`${prefix}--file__selected-file--invalid`]: invalid,
 		[`${prefix}--file__selected-file--md`]: size === "md",
-		[`${prefix}--file__selected-file--sm`]: size === "sm"
+		[`${prefix}--file__selected-file--sm`]: size === "sm",
+		[`${prefix}--file__selected-file--disabled`]: disabled
 	});
 	const isInvalid = invalid ? `${prefix}--file-filename-container-wrap-invalid` : `${prefix}--file-filename-container-wrap`;
 	const filterSpaceName = (name) => {
@@ -93,6 +94,7 @@ function FileUploaderItem({ uuid, name, status = "uploading", iconDescription, o
 					className: `${prefix}--file__state-container`,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Filename.default, {
 						name,
+						disabled,
 						iconDescription,
 						status,
 						invalid,

package/lib/components/FileUploader/Filename.d.ts

@@ -17,6 +17,10 @@ export interface FilenameProps extends Omit<HTMLAttributes<HTMLElement> & SVGAtt
      * Provide a description of the SVG icon to denote file upload status
      */
     iconDescription?: string;
+    /**
+     * Specify whether the file uploader item is disabled
+     */
+    disabled?: boolean;
     /**
      * Specify if the file is invalid
      */
@@ -34,7 +38,7 @@ export interface FilenameProps extends Omit<HTMLAttributes<HTMLElement> & SVGAtt
      */
     tabIndex?: number;
 }
-declare function Filename({ iconDescription, status, invalid, name, tabIndex, ['aria-describedby']: ariaDescribedBy, ...rest }: FilenameProps): import("react/jsx-runtime").JSX.Element | null;
+declare function Filename({ iconDescription, status, invalid, disabled, name, tabIndex, ['aria-describedby']: ariaDescribedBy, ...rest }: FilenameProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace Filename {
     var propTypes: {
         /**

package/lib/components/FileUploader/Filename.js

@@ -21,7 +21,7 @@ let _carbon_icons_react = require("@carbon/icons-react");
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
-function Filename({ iconDescription = "Uploading file", status = "uploading", invalid, name, tabIndex = 0, ["aria-describedby"]: ariaDescribedBy, ...rest }) {
+function Filename({ iconDescription = "Uploading file", status = "uploading", invalid, disabled, name, tabIndex = 0, ["aria-describedby"]: ariaDescribedBy, ...rest }) {
 	const prefix = require_usePrefix.usePrefix();
 	switch (status) {
 		case "uploading": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
@@ -31,6 +31,7 @@ function Filename({ iconDescription = "Uploading file", status = "uploading", in
 			className: `${prefix}--file-loading`
 		});
 		case "edit": return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [invalid && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.WarningFilled, { className: `${prefix}--file-invalid` }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			disabled,
 			"aria-label": `${iconDescription} - ${name}`,
 			className: `${prefix}--file-close`,
 			type: "button",

package/lib/components/Menu/MenuItem.js

@@ -38,13 +38,21 @@ const MenuItem = (0, react.forwardRef)(function MenuItem({ children, className,
 	const [rtl, setRtl] = (0, react.useState)(false);
 	const { refs, floatingStyles, context: floatingContext } = (0, _floating_ui_react.useFloating)({
 		open: submenuOpen,
-		onOpenChange: setSubmenuOpen,
+		onOpenChange: (open, event) => {
+			if (open) setSubmenuOpen(true);
+			else {
+				const relatedTarget = event && "relatedTarget" in event ? event.relatedTarget : null;
+				if (relatedTarget instanceof Node && menuItem.current?.contains(relatedTarget)) return;
+				setSubmenuOpen(false);
+				if (!(relatedTarget instanceof HTMLElement && relatedTarget.closest("[role=\"menuitem\"]")?.querySelector("[role=\"menu\"]"))) menuItem.current?.focus();
+			}
+		},
 		placement: rtl ? "left-start" : "right-start",
 		whileElementsMounted: _floating_ui_react.autoUpdate,
-		middleware: [(0, _floating_ui_react.offset)({
-			mainAxis: -6,
+		middleware: [(0, _floating_ui_react.flip)(), (0, _floating_ui_react.offset)(({ placement }) => ({
+			mainAxis: placement.startsWith("left") ? 10 : -6,
 			crossAxis: -6
-		})],
+		}))],
 		strategy: "fixed"
 	});
 	const { getReferenceProps, getFloatingProps } = (0, _floating_ui_react.useInteractions)([(0, _floating_ui_react.useHover)(floatingContext, {

package/lib/components/Modal/Modal.js

@@ -30,6 +30,7 @@ const require_toggleClass = require("../../tools/toggleClass.js");
 const require_requiredIfGivenPropIsTruthy = require("../../prop-types/requiredIfGivenPropIsTruthy.js");
 const require_wrapFocus = require("../../internal/wrapFocus.js");
 const require_Dialog = require("../Dialog/Dialog.js");
+const require_isTopmostVisibleModal = require("./isTopmostVisibleModal.js");
 const require_usePreviousValue = require("../../internal/usePreviousValue.js");
 const require_ModalPresence = require("./ModalPresence.js");
 let classnames = require("classnames");
@@ -82,6 +83,7 @@ const ModalDialog = react.default.forwardRef(function ModalDialog({ "aria-label"
 	const secondaryButton = (0, react.useRef)(null);
 	const contentRef = (0, react.useRef)(null);
 	const innerModal = (0, react.useRef)(null);
+	const modalRef = (0, react.useRef)(null);
 	const startTrap = (0, react.useRef)(null);
 	const endTrap = (0, react.useRef)(null);
 	const wrapFocusTimeout = (0, react.useRef)(null);
@@ -93,7 +95,11 @@ const ModalDialog = react.default.forwardRef(function ModalDialog({ "aria-label"
 	const primaryButtonClass = (0, classnames.default)({ [`${prefix}--btn--loading`]: loadingStatus !== "inactive" });
 	const loadingActive = loadingStatus !== "inactive";
 	const presenceContext = (0, react.useContext)(require_ModalPresence.ModalPresenceContext);
-	const mergedRefs = require_useMergedRefs.useMergedRefs([ref, presenceContext?.presenceRef]);
+	const mergedRefs = require_useMergedRefs.useMergedRefs([
+		modalRef,
+		ref,
+		presenceContext?.presenceRef
+	]);
 	const enablePresence = require_index.useFeatureFlag("enable-presence") || presenceContext?.autoEnablePresence;
 	const open = externalOpen || enablePresence;
 	const prevOpen = require_usePreviousValue.usePreviousValue(open);
@@ -107,14 +113,19 @@ const ModalDialog = react.default.forwardRef(function ModalDialog({ "aria-label"
 	}
 	function handleKeyDown(evt) {
 		const { target } = evt;
-		evt.stopPropagation();
 		if (open && target instanceof HTMLElement) {
-			if (require_match.match(evt, require_keys.Enter) && shouldSubmitOnEnter && !isCloseButton(target) && document.activeElement !== button.current) onRequestSubmit(evt);
-			if (focusTrapWithoutSentinels && !enableDialogElement && require_match.match(evt, require_keys.Tab) && innerModal.current) require_wrapFocus.wrapFocusWithoutSentinels({
-				containerNode: innerModal.current,
-				currentActiveNode: target,
-				event: evt
-			});
+			if (require_match.match(evt, require_keys.Enter) && shouldSubmitOnEnter && !isCloseButton(target) && document.activeElement !== button.current) {
+				evt.stopPropagation();
+				onRequestSubmit(evt);
+			}
+			if (focusTrapWithoutSentinels && !enableDialogElement && require_match.match(evt, require_keys.Tab) && innerModal.current) {
+				evt.stopPropagation();
+				require_wrapFocus.wrapFocusWithoutSentinels({
+					containerNode: innerModal.current,
+					currentActiveNode: target,
+					event: evt
+				});
+			}
 		}
 	}
 	function handleOnClick(evt) {
@@ -191,15 +202,14 @@ const ModalDialog = react.default.forwardRef(function ModalDialog({ "aria-label"
 	(0, react.useEffect)(() => {
 		if (!open) return;
 		const handleEscapeKey = (event) => {
-			if (require_match.match(event, require_keys.Escape)) {
+			if (require_match.match(event, require_keys.Escape) && require_isTopmostVisibleModal.isTopmostVisibleModal(modalRef.current, prefix)) {
 				event.preventDefault();
-				event.stopPropagation();
 				onRequestClose(event);
 			}
 		};
-		document.addEventListener("keydown", handleEscapeKey, true);
+		document.addEventListener("keydown", handleEscapeKey);
 		return () => {
-			document.removeEventListener("keydown", handleEscapeKey, true);
+			document.removeEventListener("keydown", handleEscapeKey);
 		};
 	}, [open]);
 	(0, react.useEffect)(() => {

package/lib/components/Modal/isTopmostVisibleModal.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare const isTopmostVisibleModal: (node: HTMLElement | null, prefix: string) => boolean;

package/lib/components/Modal/isTopmostVisibleModal.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright IBM Corp. 2016, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+//#region src/components/Modal/isTopmostVisibleModal.ts
+/**
+* Copyright IBM Corp. 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const isTopmostVisibleModal = (node, prefix) => {
+	if (!node) return false;
+	const visibleModals = document.querySelectorAll(`.${prefix}--modal.is-visible`);
+	return visibleModals.item(visibleModals.length - 1) === node;
+};
+//#endregion
+exports.isTopmostVisibleModal = isTopmostVisibleModal;

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -26,6 +26,7 @@ const require_ListBoxTrigger = require("../ListBox/next/ListBoxTrigger.js");
 const require_mergeRefs = require("../../tools/mergeRefs.js");
 const require_filter = require("./filter.js");
 const require_MultiSelectPropTypes = require("./MultiSelectPropTypes.js");
+const require_isSelectAllItem = require("./tools/isSelectAllItem.js");
 const require_sorting = require("./tools/sorting.js");
 const require_Selection = require("../../internal/Selection.js");
 let classnames = require("classnames");
@@ -66,8 +67,8 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
 		itemToString,
 		filterItems
 	]);
-	const nonSelectAllItems = (0, react.useMemo)(() => filteredItems.filter((item) => !item.isSelectAll), [filteredItems]);
-	const selectAll = filteredItems.some((item) => item.isSelectAll);
+	const nonSelectAllItems = (0, react.useMemo)(() => filteredItems.filter((item) => !require_isSelectAllItem.isSelectAllItem(item)), [filteredItems]);
+	const selectAll = filteredItems.some(require_isSelectAllItem.isSelectAllItem);
 	const { selectedItems: controlledSelectedItems, onItemChange, clearSelection, toggleAll } = require_Selection.useSelection({
 		disabled,
 		initialSelectedItems,
@@ -135,7 +136,7 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
 		setIsOpen(open);
 	}, [open]);
 	const sortedItems = (0, react.useMemo)(() => {
-		const selectAllItem = items.find((item) => item.isSelectAll);
+		const selectAllItem = items.find(require_isSelectAllItem.isSelectAllItem);
 		const selectableRealItems = nonSelectAllItems.filter((item) => !item.disabled);
 		const sortedReal = sortItems(nonSelectAllItems, {
 			selectedItems: {
@@ -271,7 +272,7 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
 		switch (type) {
 			case InputKeyDownEnter:
 				if (sortedItems.length === 0) return changes;
-				if (changes.selectedItem && changes.selectedItem.disabled !== true) if (changes.selectedItem.isSelectAll) handleSelectAllClick();
+				if (changes.selectedItem && changes.selectedItem.disabled !== true) if (require_isSelectAllItem.isSelectAllItem(changes.selectedItem)) handleSelectAllClick();
 				else onItemChange(changes.selectedItem);
 				setHighlightedIndex(changes.selectedItem);
 				return {
@@ -279,7 +280,7 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
 					highlightedIndex: state.highlightedIndex
 				};
 			case ItemClick:
-				if (changes.selectedItem.isSelectAll) handleSelectAllClick();
+				if (require_isSelectAllItem.isSelectAllItem(changes.selectedItem)) handleSelectAllClick();
 				else onItemChange(changes.selectedItem);
 				setHighlightedIndex(changes.selectedItem);
 				return changes;
@@ -377,7 +378,7 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
 	const candidate = slug ?? decorator;
 	const candidateIsAILabel = require_utils.isComponentElement(candidate, require_index.AILabel);
 	const normalizedDecorator = candidateIsAILabel ? (0, react.cloneElement)(candidate, { size: "mini" }) : candidate;
-	const selectedItemsLength = controlledSelectedItems.filter((item) => !item.isSelectAll).length;
+	const selectedItemsLength = controlledSelectedItems.filter((item) => !require_isSelectAllItem.isSelectAllItem(item)).length;
 	const className = (0, classnames.default)(`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, {
 		[`${prefix}--multi-select--invalid`]: normalizedProps.invalid,
 		[`${prefix}--multi-select--invalid--focused`]: inputFocused && normalizedProps.invalid,
@@ -534,7 +535,7 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
 						children: isOpen ? sortedItems.map((item, index) => {
 							let isChecked;
 							let isIndeterminate = false;
-							if (item.isSelectAll) {
+							if (require_isSelectAllItem.isSelectAllItem(item)) {
 								isChecked = selectAllStatus.checked;
 								isIndeterminate = selectAllStatus.indeterminate;
 							} else isChecked = controlledSelectedItems.filter((selected) => (0, react_fast_compare.default)(selected, item)).length > 0;
@@ -548,7 +549,7 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
 							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default.MenuItem, {
 								"aria-label": itemText,
 								"aria-checked": isIndeterminate ? "mixed" : isChecked,
-								isActive: isChecked && !item["isSelectAll"],
+								isActive: isChecked && !require_isSelectAllItem.isSelectAllItem(item),
 								isHighlighted: highlightedIndex === index,
 								title: itemText,
 								disabled,