@carbon/react 1.107.0 → 1.108.0-rc.0

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

@@ -13,7 +13,7 @@ import PropTypes from "prop-types";
 import { jsx } from "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/es/components/ComposedModal/ComposedModal.js

@@ -26,6 +26,7 @@ import { elementOrParentIsFloatingMenu, wrapFocus, wrapFocusWithoutSentinels } f
 import { Dialog } from "../Dialog/Dialog.js";
 import { useComposedModalState } from "./useComposedModalState.js";
 import { ComposedModalPresence, ComposedModalPresenceContext, useExclusiveComposedModalPresenceContext } from "./ComposedModalPresence.js";
+import { isTopmostVisibleModal } from "../Modal/isTopmostVisibleModal.js";
 import classNames from "classnames";
 import React, { Children, cloneElement, useContext, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
@@ -98,9 +99,14 @@ const ComposedModalDialog = React.forwardRef(function ComposedModalDialog({ ["ar
 	const button = useRef(null);
 	const startSentinel = useRef(null);
 	const endSentinel = useRef(null);
+	const modalRef = useRef(null);
 	const onMouseDownTarget = useRef(null);
 	const presenceContext = useContext(ComposedModalPresenceContext);
-	const mergedRefs = useMergeRefs([ref, presenceContext?.presenceRef]);
+	const mergedRefs = useMergeRefs([
+		modalRef,
+		ref,
+		presenceContext?.presenceRef
+	]);
 	const enablePresence = useFeatureFlag("enable-presence") || presenceContext?.autoEnablePresence;
 	const open = externalOpen || enablePresence;
 	const modalState = useComposedModalState(open);
@@ -184,15 +190,14 @@ const ComposedModalDialog = React.forwardRef(function ComposedModalDialog({ ["ar
 	useEffect(() => {
 		if (!open) return;
 		const handleEscapeKey = (event) => {
-			if (match(event, Escape)) {
+			if (match(event, Escape) && 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]);
 	useEffect(() => {

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

@@ -8,7 +8,7 @@
 import { createContext } from "react";
 //#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/es/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/es/components/FileUploader/FileUploader.js

@@ -154,9 +154,14 @@ const FileUploader = forwardRef(({ accept, buttonKind, buttonLabel, className, d
 				});
 			} else setLegacyFileNames([]);
 		},
-		...enhancedFileUploaderEnabled && { getCurrentFiles() {
-			return [...fileItems];
-		} }
+		...enhancedFileUploaderEnabled && {
+			getCurrentFiles() {
+				return [...fileItems];
+			},
+			setCurrentFiles: (files) => {
+				setFileItems(files);
+			}
+		}
 	}), [
 		enhancedFileUploaderEnabled,
 		fileItems,
@@ -167,12 +172,14 @@ const FileUploader = forwardRef(({ accept, buttonKind, buttonLabel, className, d
 		[className]: className
 	});
 	const getHelperLabelClasses = (baseClass) => classNames(baseClass, { [`${prefix}--label-description--disabled`]: disabled });
-	const selectedFileClasses = classNames(`${prefix}--file__selected-file`, {
+	const getSelectedFileClasses = (file) => classNames(`${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) => ({
@@ -211,7 +218,7 @@ const FileUploader = forwardRef(({ accept, buttonKind, buttonLabel, className, d
 			/* @__PURE__ */ jsx("div", {
 				className: `${prefix}--file-container`,
 				children: displayFiles.length === 0 ? null : displayFiles.map((file) => /* @__PURE__ */ jsxs("span", {
-					className: selectedFileClasses,
+					className: getSelectedFileClasses(file),
 					ref: (node) => {
 						nodes[file.index] = node;
 					},
@@ -225,6 +232,7 @@ const FileUploader = forwardRef(({ accept, buttonKind, buttonLabel, className, d
 						className: `${prefix}--file__state-container`,
 						children: /* @__PURE__ */ jsx(Filename, {
 							name: file.name,
+							disabled: file.disabled,
 							iconDescription,
 							status: filenameStatus,
 							onKeyDown: (evt) => {

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

@@ -25,7 +25,7 @@ import { jsx, jsxs } from "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 = noopFn, invalid, errorSubject, errorBody, size, className, ...other }) {
+function FileUploaderItem({ uuid, name, status = "uploading", iconDescription, onDelete = noopFn, invalid, errorSubject, errorBody, size, className, disabled, ...other }) {
 	const textRef = useRef(null);
 	const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
 	const prefix = usePrefix();
@@ -34,7 +34,8 @@ function FileUploaderItem({ uuid, name, status = "uploading", iconDescription, o
 	const classes = classNames(`${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) => {
@@ -89,6 +90,7 @@ function FileUploaderItem({ uuid, name, status = "uploading", iconDescription, o
 					className: `${prefix}--file__state-container`,
 					children: /* @__PURE__ */ jsx(Filename, {
 						name,
+						disabled,
 						iconDescription,
 						status,
 						invalid,

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

@@ -18,7 +18,7 @@ import { CheckmarkFilled, Close, WarningFilled } from "@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 = usePrefix();
 	switch (status) {
 		case "uploading": return /* @__PURE__ */ jsx(Loading_default, {
@@ -28,6 +28,7 @@ function Filename({ iconDescription = "Uploading file", status = "uploading", in
 			className: `${prefix}--file-loading`
 		});
 		case "edit": return /* @__PURE__ */ jsxs(Fragment, { children: [invalid && /* @__PURE__ */ jsx(WarningFilled, { className: `${prefix}--file-invalid` }), /* @__PURE__ */ jsx("button", {
+			disabled,
 			"aria-label": `${iconDescription} - ${name}`,
 			className: `${prefix}--file-close`,
 			type: "button",

package/es/components/Menu/MenuItem.js

@@ -21,7 +21,7 @@ import React, { forwardRef, useContext, useEffect, useRef, useState } from "reac
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CaretLeft, CaretRight, Checkmark } from "@carbon/icons-react";
-import { FloatingFocusManager, autoUpdate, offset, safePolygon, useFloating, useHover, useInteractions } from "@floating-ui/react";
+import { FloatingFocusManager, autoUpdate, flip, offset, safePolygon, useFloating, useHover, useInteractions } from "@floating-ui/react";
 //#region src/components/Menu/MenuItem.tsx
 /**
 * Copyright IBM Corp. 2023, 2026
@@ -34,13 +34,21 @@ const MenuItem = forwardRef(function MenuItem({ children, className, dangerDescr
 	const [rtl, setRtl] = useState(false);
 	const { refs, floatingStyles, context: floatingContext } = 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: autoUpdate,
-		middleware: [offset({
-			mainAxis: -6,
+		middleware: [flip(), offset(({ placement }) => ({
+			mainAxis: placement.startsWith("left") ? 10 : -6,
 			crossAxis: -6
-		})],
+		}))],
 		strategy: "fixed"
 	});
 	const { getReferenceProps, getFloatingProps } = useInteractions([useHover(floatingContext, {

package/es/components/Modal/Modal.js

@@ -29,6 +29,7 @@ import { toggleClass } from "../../tools/toggleClass.js";
 import { requiredIfGivenPropIsTruthy } from "../../prop-types/requiredIfGivenPropIsTruthy.js";
 import { elementOrParentIsFloatingMenu, wrapFocus, wrapFocusWithoutSentinels } from "../../internal/wrapFocus.js";
 import { Dialog } from "../Dialog/Dialog.js";
+import { isTopmostVisibleModal } from "./isTopmostVisibleModal.js";
 import { usePreviousValue } from "../../internal/usePreviousValue.js";
 import { ModalPresence, ModalPresenceContext, useExclusiveModalPresenceContext } from "./ModalPresence.js";
 import classNames from "classnames";
@@ -78,6 +79,7 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 	const secondaryButton = useRef(null);
 	const contentRef = useRef(null);
 	const innerModal = useRef(null);
+	const modalRef = useRef(null);
 	const startTrap = useRef(null);
 	const endTrap = useRef(null);
 	const wrapFocusTimeout = useRef(null);
@@ -89,7 +91,11 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 	const primaryButtonClass = classNames({ [`${prefix}--btn--loading`]: loadingStatus !== "inactive" });
 	const loadingActive = loadingStatus !== "inactive";
 	const presenceContext = useContext(ModalPresenceContext);
-	const mergedRefs = useMergedRefs([ref, presenceContext?.presenceRef]);
+	const mergedRefs = useMergedRefs([
+		modalRef,
+		ref,
+		presenceContext?.presenceRef
+	]);
 	const enablePresence = useFeatureFlag("enable-presence") || presenceContext?.autoEnablePresence;
 	const open = externalOpen || enablePresence;
 	const prevOpen = usePreviousValue(open);
@@ -103,14 +109,19 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 	}
 	function handleKeyDown(evt) {
 		const { target } = evt;
-		evt.stopPropagation();
 		if (open && target instanceof HTMLElement) {
-			if (match(evt, Enter) && shouldSubmitOnEnter && !isCloseButton(target) && document.activeElement !== button.current) onRequestSubmit(evt);
-			if (focusTrapWithoutSentinels && !enableDialogElement && match(evt, Tab) && innerModal.current) wrapFocusWithoutSentinels({
-				containerNode: innerModal.current,
-				currentActiveNode: target,
-				event: evt
-			});
+			if (match(evt, Enter) && shouldSubmitOnEnter && !isCloseButton(target) && document.activeElement !== button.current) {
+				evt.stopPropagation();
+				onRequestSubmit(evt);
+			}
+			if (focusTrapWithoutSentinels && !enableDialogElement && match(evt, Tab) && innerModal.current) {
+				evt.stopPropagation();
+				wrapFocusWithoutSentinels({
+					containerNode: innerModal.current,
+					currentActiveNode: target,
+					event: evt
+				});
+			}
 		}
 	}
 	function handleOnClick(evt) {
@@ -187,15 +198,14 @@ const ModalDialog = React.forwardRef(function ModalDialog({ "aria-label": ariaLa
 	useEffect(() => {
 		if (!open) return;
 		const handleEscapeKey = (event) => {
-			if (match(event, Escape)) {
+			if (match(event, Escape) && 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]);
 	useEffect(() => {

package/es/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/es/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
+export { isTopmostVisibleModal };

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -25,6 +25,7 @@ import ListBoxTrigger from "../ListBox/next/ListBoxTrigger.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
 import { defaultFilterItems } from "./filter.js";
 import { sortingPropTypes } from "./MultiSelectPropTypes.js";
+import { isSelectAllItem } from "./tools/isSelectAllItem.js";
 import { defaultCompareItems, defaultSortItems } from "./tools/sorting.js";
 import { useSelection } from "../../internal/Selection.js";
 import classNames from "classnames";
@@ -60,8 +61,8 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 		itemToString,
 		filterItems
 	]);
-	const nonSelectAllItems = useMemo(() => filteredItems.filter((item) => !item.isSelectAll), [filteredItems]);
-	const selectAll = filteredItems.some((item) => item.isSelectAll);
+	const nonSelectAllItems = useMemo(() => filteredItems.filter((item) => !isSelectAllItem(item)), [filteredItems]);
+	const selectAll = filteredItems.some(isSelectAllItem);
 	const { selectedItems: controlledSelectedItems, onItemChange, clearSelection, toggleAll } = useSelection({
 		disabled,
 		initialSelectedItems,
@@ -129,7 +130,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 		setIsOpen(open);
 	}, [open]);
 	const sortedItems = useMemo(() => {
-		const selectAllItem = items.find((item) => item.isSelectAll);
+		const selectAllItem = items.find(isSelectAllItem);
 		const selectableRealItems = nonSelectAllItems.filter((item) => !item.disabled);
 		const sortedReal = sortItems(nonSelectAllItems, {
 			selectedItems: {
@@ -265,7 +266,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 		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 (isSelectAllItem(changes.selectedItem)) handleSelectAllClick();
 				else onItemChange(changes.selectedItem);
 				setHighlightedIndex(changes.selectedItem);
 				return {
@@ -273,7 +274,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 					highlightedIndex: state.highlightedIndex
 				};
 			case ItemClick:
-				if (changes.selectedItem.isSelectAll) handleSelectAllClick();
+				if (isSelectAllItem(changes.selectedItem)) handleSelectAllClick();
 				else onItemChange(changes.selectedItem);
 				setHighlightedIndex(changes.selectedItem);
 				return changes;
@@ -371,7 +372,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 	const candidate = slug ?? decorator;
 	const candidateIsAILabel = isComponentElement(candidate, AILabel);
 	const normalizedDecorator = candidateIsAILabel ? cloneElement(candidate, { size: "mini" }) : candidate;
-	const selectedItemsLength = controlledSelectedItems.filter((item) => !item.isSelectAll).length;
+	const selectedItemsLength = controlledSelectedItems.filter((item) => !isSelectAllItem(item)).length;
 	const className = classNames(`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, {
 		[`${prefix}--multi-select--invalid`]: normalizedProps.invalid,
 		[`${prefix}--multi-select--invalid--focused`]: inputFocused && normalizedProps.invalid,
@@ -528,7 +529,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 						children: isOpen ? sortedItems.map((item, index) => {
 							let isChecked;
 							let isIndeterminate = false;
-							if (item.isSelectAll) {
+							if (isSelectAllItem(item)) {
 								isChecked = selectAllStatus.checked;
 								isIndeterminate = selectAllStatus.indeterminate;
 							} else isChecked = controlledSelectedItems.filter((selected) => isEqual(selected, item)).length > 0;
@@ -542,7 +543,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
 							return /* @__PURE__ */ jsx(ListBox.MenuItem, {
 								"aria-label": itemText,
 								"aria-checked": isIndeterminate ? "mixed" : isChecked,
-								isActive: isChecked && !item["isSelectAll"],
+								isActive: isChecked && !isSelectAllItem(item),
 								isHighlighted: highlightedIndex === index,
 								title: itemText,
 								disabled,

package/es/components/MultiSelect/MultiSelect.js

@@ -23,6 +23,7 @@ import { FormContext } from "../FluidForm/FormContext.js";
 import ListBox from "../ListBox/index.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
 import { sortingPropTypes } from "./MultiSelectPropTypes.js";
+import { isSelectAllItem } from "./tools/isSelectAllItem.js";
 import { defaultCompareItems, defaultSortItems } from "./tools/sorting.js";
 import { useSelection } from "../../internal/Selection.js";
 import classNames from "classnames";
@@ -50,7 +51,7 @@ const MultiSelect = React.forwardRef(({ autoAlign = false, className: containerC
 			return true;
 		});
 	}, [items]);
-	const selectAll = filteredItems.some((item) => item.isSelectAll);
+	const selectAll = filteredItems.some(isSelectAllItem);
 	const prefix = usePrefix();
 	const { isFluid } = useContext(FormContext);
 	const multiSelectInstanceId = useId();
@@ -280,7 +281,7 @@ const MultiSelect = React.forwardRef(({ autoAlign = false, className: containerC
 	const candidate = slug ?? decorator;
 	const normalizedDecorator = isComponentElement(candidate, AILabel) ? cloneElement(candidate, { size: "mini" }) : candidate;
 	const itemsSelectedText = selectedItems.length > 0 && selectedItems.map((item) => item?.text);
-	const selectedItemsLength = selectAll ? selectedItems.filter((item) => !item.isSelectAll).length : selectedItems.length;
+	const selectedItemsLength = selectAll ? selectedItems.filter((item) => !isSelectAllItem(item)).length : selectedItems.length;
 	const menuProps = useMemo(() => getMenuProps({
 		ref: enableFloatingStyles ? refs.setFloating : null,
 		hidden: !isOpen
@@ -294,9 +295,9 @@ const MultiSelect = React.forwardRef(({ autoAlign = false, className: containerC
 	const labelProps = isValidElement(titleText) ? { id: allLabelProps.id } : allLabelProps;
 	const getSelectionStats = useCallback((selectedItems, filteredItems) => {
 		return {
-			hasIndividualSelections: selectedItems.some((selected) => !selected.isSelectAll),
-			nonSelectAllSelectedCount: selectedItems.filter((selected) => !selected.isSelectAll).length,
-			totalSelectableCount: filteredItems.filter((item) => !item.isSelectAll && !item.disabled).length
+			hasIndividualSelections: selectedItems.some((selected) => !isSelectAllItem(selected)),
+			nonSelectAllSelectedCount: selectedItems.filter((selected) => !isSelectAllItem(selected)).length,
+			totalSelectableCount: filteredItems.filter((item) => !isSelectAllItem(item) && !item.disabled).length
 		};
 	}, [selectedItems, filteredItems]);
 	return /* @__PURE__ */ jsxs("div", {
@@ -372,15 +373,15 @@ const MultiSelect = React.forwardRef(({ autoAlign = false, className: containerC
 						...menuProps,
 						children: isOpen && sortItems(filteredItems, sortOptions).map((item, index) => {
 							const { hasIndividualSelections, nonSelectAllSelectedCount, totalSelectableCount } = getSelectionStats(selectedItems, filteredItems);
-							const isChecked = item.isSelectAll ? nonSelectAllSelectedCount === totalSelectableCount && totalSelectableCount > 0 : selectedItems.some((selected) => isEqual(selected, item));
-							const isIndeterminate = item.isSelectAll && hasIndividualSelections && nonSelectAllSelectedCount < totalSelectableCount;
+							const isChecked = isSelectAllItem(item) ? nonSelectAllSelectedCount === totalSelectableCount && totalSelectableCount > 0 : selectedItems.some((selected) => isEqual(selected, item));
+							const isIndeterminate = isSelectAllItem(item) && hasIndividualSelections && nonSelectAllSelectedCount < totalSelectableCount;
 							const itemProps = getItemProps({
 								item,
 								["aria-selected"]: isChecked
 							});
 							const itemText = itemToString(item);
 							return /* @__PURE__ */ jsx(ListBox.MenuItem, {
-								isActive: isChecked && !item["isSelectAll"],
+								isActive: isChecked && !isSelectAllItem(item),
 								"aria-label": itemText,
 								"aria-checked": isIndeterminate ? "mixed" : isChecked,
 								isHighlighted: highlightedIndex === index,

package/es/components/MultiSelect/tools/isSelectAllItem.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 isSelectAllItem: (item: unknown) => item is {
+    isSelectAll?: boolean;
+};

package/es/components/MultiSelect/tools/isSelectAllItem.js

@@ -0,0 +1,17 @@
+/**
+ * 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/MultiSelect/tools/isSelectAllItem.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 isSelectAllItem = (item) => typeof item === "object" && item !== null && "isSelectAll" in item;
+//#endregion
+export { isSelectAllItem };

package/es/components/MultiSelect/tools/sorting.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { isSelectAllItem } from "./isSelectAllItem.js";
 //#region src/components/MultiSelect/tools/sorting.ts
-const isSelectAllItem = (item) => typeof item === "object" && item !== null && "isSelectAll" in item;
 /**
 * Use `localeCompare` with the `numeric` option enabled to sort two
 * alphanumeric strings.

package/es/components/OverflowMenu/OverflowMenu.js

@@ -12,15 +12,13 @@ import { setupGetInstanceId } from "../../tools/setupGetInstanceId.js";
 import { noopFn } from "../../internal/noopFn.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { deprecateValuesWithin } from "../../prop-types/deprecateValuesWithin.js";
-import { isComponentElement } from "../../internal/utils.js";
 import { mapPopoverAlign } from "../../tools/mapPopoverAlign.js";
 import { IconButton } from "../IconButton/index.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
-import OverflowMenuItem from "../OverflowMenuItem/OverflowMenuItem.js";
 import { DIRECTION_BOTTOM, FloatingMenu } from "../../internal/FloatingMenu.js";
 import { useOutsideClick } from "../../internal/useOutsideClick.js";
 import classNames from "classnames";
-import React, { Children, cloneElement, forwardRef, useCallback, useContext, useEffect, useRef, useState } from "react";
+import React, { Children, cloneElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { OverflowMenuVertical } from "@carbon/icons-react";
@@ -224,14 +222,17 @@ const OverflowMenu = forwardRef(({ align, ["aria-label"]: ariaLabel = null, aria
 	});
 	const overflowMenuIconClasses = classNames(`${prefix}--overflow-menu__icon`, iconClass);
 	const childrenWithProps = Children.toArray(children).map((child, index) => {
-		if (isComponentElement(child, OverflowMenuItem)) return cloneElement(child, {
-			closeMenu: child.props.closeMenu || closeMenuAndFocus,
-			handleOverflowMenuItemFocus,
-			ref: (el) => {
-				menuItemRefs.current[index] = el;
-			},
-			index
-		});
+		if (isValidElement(child)) {
+			const childElement = child;
+			return cloneElement(childElement, {
+				closeMenu: childElement.props.closeMenu || closeMenuAndFocus,
+				handleOverflowMenuItemFocus,
+				ref: (el) => {
+					menuItemRefs.current[index] = el;
+				},
+				index
+			});
+		}
 		return null;
 	});
 	const wrappedMenuBody = /* @__PURE__ */ jsx(FloatingMenu, {

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

@@ -4,6 +4,10 @@
  * 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
+ */
 import React, { type ElementType } from 'react';
 import PropTypes from 'prop-types';
 import { TYPES } from '../Tag/Tag';