@carbon/react 1.112.0 → 1.113.0-rc.0

package/es/index.js

@@ -14,31 +14,31 @@ import { TextDirection } from "./components/Text/TextDirection.js";
 import { useIdPrefix } from "./internal/useIdPrefix.js";
 import AccordionItem from "./components/Accordion/AccordionItem.js";
 import SkeletonText from "./components/SkeletonText/SkeletonText.js";
-import AccordionSkeleton from "./components/Accordion/Accordion.Skeleton.js";
+import { AccordionSkeleton } from "./components/Accordion/Accordion.Skeleton.js";
 import AspectRatio from "./components/AspectRatio/AspectRatio.js";
 import Breadcrumb from "./components/Breadcrumb/Breadcrumb.js";
 import Link from "./components/Link/Link.js";
 import BreadcrumbItem from "./components/Breadcrumb/BreadcrumbItem.js";
-import BreadcrumbSkeleton from "./components/Breadcrumb/Breadcrumb.Skeleton.js";
+import { BreadcrumbSkeleton } from "./components/Breadcrumb/Breadcrumb.Skeleton.js";
 import { FeatureFlags, useFeatureFlag, useFeatureFlags } from "./components/FeatureFlags/index.js";
 import { Popover, PopoverContent } from "./components/Popover/index.js";
 import { DefinitionTooltip } from "./components/Tooltip/DefinitionTooltip.js";
 import { Tooltip } from "./components/Tooltip/Tooltip.js";
 import { IconButton, IconButtonKinds } from "./components/IconButton/index.js";
 import Button, { ButtonKinds, ButtonSizes, ButtonTooltipAlignments, ButtonTooltipPositions } from "./components/Button/Button.js";
-import ButtonSkeleton from "./components/Button/Button.Skeleton.js";
+import { ButtonSkeleton } from "./components/Button/Button.Skeleton.js";
 import ButtonSet from "./components/ButtonSet/ButtonSet.js";
-import Toggletip, { ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel } from "./components/Toggletip/index.js";
+import { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel } from "./components/Toggletip/index.js";
 import { AILabel, AILabelActions, AILabelContent } from "./components/AILabel/index.js";
 import Checkbox from "./components/Checkbox/Checkbox.js";
-import CheckboxSkeleton from "./components/Checkbox/Checkbox.Skeleton.js";
+import { CheckboxSkeleton } from "./components/Checkbox/Checkbox.Skeleton.js";
 import CheckboxGroup from "./components/CheckboxGroup/CheckboxGroup.js";
 import { ClassPrefix } from "./components/ClassPrefix/index.js";
 import Copy from "./components/Copy/Copy.js";
 import { Layout } from "./components/Layout/index.js";
 import CopyButton from "./components/CopyButton/CopyButton.js";
 import CodeSnippet from "./components/CodeSnippet/CodeSnippet.js";
-import CodeSnippetSkeleton from "./components/CodeSnippet/CodeSnippet.Skeleton.js";
+import { CodeSnippetSkeleton } from "./components/CodeSnippet/CodeSnippet.Skeleton.js";
 import Form from "./components/Form/Form.js";
 import { FormContext } from "./components/FluidForm/FormContext.js";
 import FluidForm from "./components/FluidForm/FluidForm.js";
@@ -58,7 +58,7 @@ import { ComposedModalPresence, withComposedModalPresence } from "./components/C
 import ComposedModal, { ModalBody } from "./components/ComposedModal/ComposedModal.js";
 import ContainedListItem_default from "./components/ContainedList/ContainedListItem/index.js";
 import Search from "./components/Search/Search.js";
-import SearchSkeleton from "./components/Search/Search.Skeleton.js";
+import { SearchSkeleton } from "./components/Search/Search.Skeleton.js";
 import ExpandableSearch from "./components/ExpandableSearch/ExpandableSearch.js";
 import ContainedList from "./components/ContainedList/ContainedList.js";
 import Switch from "./components/Switch/Switch.js";
@@ -66,7 +66,7 @@ import IconSwitch from "./components/Switch/IconSwitch.js";
 import { ContentSwitcher } from "./components/ContentSwitcher/ContentSwitcher.js";
 import useContextMenu from "./components/ContextMenu/useContextMenu.js";
 import DangerButton from "./components/DangerButton/DangerButton.js";
-import Table from "./components/DataTable/Table.js";
+import { Table } from "./components/DataTable/Table.js";
 import TableActionList from "./components/DataTable/TableActionList.js";
 import TableBatchAction from "./components/DataTable/TableBatchAction.js";
 import TableBatchActions from "./components/DataTable/TableBatchActions.js";
@@ -91,33 +91,33 @@ import OverflowMenuItem from "./components/OverflowMenuItem/OverflowMenuItem.js"
 import TableToolbarAction from "./components/DataTable/TableToolbarAction.js";
 import TableToolbarContent from "./components/DataTable/TableToolbarContent.js";
 import TableToolbarSearch from "./components/DataTable/TableToolbarSearch.js";
-import OverflowMenu from "./components/OverflowMenu/index.js";
+import { OverflowMenu } from "./components/OverflowMenu/index.js";
 import TableToolbarMenu from "./components/DataTable/TableToolbarMenu.js";
 import { DataTable } from "./components/DataTable/DataTable.js";
 import DataTableSkeleton from "./components/DataTableSkeleton/DataTableSkeleton.js";
 import DatePickerInput from "./components/DatePickerInput/DatePickerInput.js";
 import DatePicker from "./components/DatePicker/DatePicker.js";
-import DatePickerSkeleton from "./components/DatePicker/DatePicker.Skeleton.js";
+import { DatePickerSkeleton } from "./components/DatePicker/DatePicker.Skeleton.js";
 import Dropdown from "./components/Dropdown/Dropdown.js";
-import DropdownSkeleton from "./components/Dropdown/Dropdown.Skeleton.js";
+import { DropdownSkeleton } from "./components/Dropdown/Dropdown.Skeleton.js";
 import { ErrorBoundaryContext } from "./components/ErrorBoundary/ErrorBoundaryContext.js";
 import ErrorBoundary from "./components/ErrorBoundary/ErrorBoundary.js";
 import Filename from "./components/FileUploader/Filename.js";
 import FileUploaderButton from "./components/FileUploader/FileUploaderButton.js";
 import FileUploader from "./components/FileUploader/FileUploader.js";
-import FileUploaderSkeleton from "./components/FileUploader/FileUploader.Skeleton.js";
+import { FileUploaderSkeleton } from "./components/FileUploader/FileUploader.Skeleton.js";
 import FileUploaderDropContainer from "./components/FileUploader/FileUploaderDropContainer.js";
 import FileUploaderItem from "./components/FileUploader/FileUploaderItem.js";
 import FormGroup from "./components/FormGroup/FormGroup.js";
 import FormItem from "./components/FormItem/FormItem.js";
 import FormLabel from "./components/FormLabel/FormLabel.js";
 import { GridSettings } from "./components/Grid/GridContext.js";
-import { FlexGridComponent } from "./components/Grid/FlexGrid.js";
-import { GridAsGridComponent } from "./components/Grid/Grid.js";
+import { FlexGrid as FlexGridComponent } from "./components/Grid/FlexGrid.js";
+import { Grid as GridAsGridComponent } from "./components/Grid/Grid.js";
 import Row from "./components/Grid/Row.js";
 import Column from "./components/Grid/Column.js";
-import { ColumnHangComponent } from "./components/Grid/ColumnHang.js";
-import IconSkeleton from "./components/Icon/Icon.Skeleton.js";
+import { ColumnHang as ColumnHangComponent } from "./components/Grid/ColumnHang.js";
+import { IconSkeleton } from "./components/Icon/Icon.Skeleton.js";
 import { IdPrefix } from "./components/IdPrefix/index.js";
 import ListItem from "./components/ListItem/ListItem.js";
 import { MenuButton } from "./components/MenuButton/index.js";
@@ -134,20 +134,20 @@ import Tag from "./components/Tag/Tag.js";
 import DismissibleTag from "./components/Tag/DismissibleTag.js";
 import OperationalTag from "./components/Tag/OperationalTag.js";
 import SelectableTag from "./components/Tag/SelectableTag.js";
-import TagSkeleton from "./components/Tag/Tag.Skeleton.js";
+import { TagSkeleton } from "./components/Tag/Tag.Skeleton.js";
 import { PageHeader_exports } from "./components/PageHeader/index.js";
 import Select from "./components/Select/Select.js";
-import SelectSkeleton from "./components/Select/Select.Skeleton.js";
+import { SelectSkeleton } from "./components/Select/Select.Skeleton.js";
 import SelectItem from "./components/SelectItem/SelectItem.js";
 import Pagination from "./components/Pagination/Pagination.js";
-import PaginationSkeleton from "./components/Pagination/Pagination.Skeleton.js";
+import { PaginationSkeleton } from "./components/Pagination/Pagination.Skeleton.js";
 import PaginationNav from "./components/PaginationNav/PaginationNav.js";
 import ControlledPasswordInput from "./components/TextInput/ControlledPasswordInput.js";
 import PasswordInput from "./components/TextInput/PasswordInput.js";
 import PrimaryButton from "./components/PrimaryButton/PrimaryButton.js";
-import ProgressIndicatorSkeleton from "./components/ProgressIndicator/ProgressIndicator.Skeleton.js";
+import { ProgressIndicatorSkeleton } from "./components/ProgressIndicator/ProgressIndicator.Skeleton.js";
 import { ProgressIndicator, ProgressStep } from "./components/ProgressIndicator/ProgressIndicator.js";
-import RadioButtonSkeleton from "./components/RadioButton/RadioButton.Skeleton.js";
+import { RadioButtonSkeleton } from "./components/RadioButton/RadioButton.Skeleton.js";
 import RadioButtonGroup from "./components/RadioButtonGroup/RadioButtonGroup.js";
 import RadioTile from "./components/RadioTile/RadioTile.js";
 import SecondaryButton from "./components/SecondaryButton/SecondaryButton.js";
@@ -163,17 +163,17 @@ import { StructuredListBody, StructuredListCell, StructuredListHead, StructuredL
 import StructuredListSkeleton from "./components/StructuredList/StructuredList.Skeleton.js";
 import { IconTab, Tab, TabList, TabListVertical, TabPanel, TabPanels, Tabs, TabsVertical } from "./components/Tabs/Tabs.js";
 import TabContent from "./components/TabContent/TabContent.js";
-import TabsSkeleton from "./components/Tabs/Tabs.Skeleton.js";
+import { TabsSkeleton } from "./components/Tabs/Tabs.Skeleton.js";
 import TextArea from "./components/TextArea/TextArea.js";
-import TextAreaSkeleton from "./components/TextArea/TextArea.Skeleton.js";
+import { TextAreaSkeleton } from "./components/TextArea/TextArea.Skeleton.js";
 import TextInput from "./components/TextInput/TextInput.js";
-import TextInputSkeleton from "./components/TextInput/TextInput.Skeleton.js";
+import { TextInputSkeleton } from "./components/TextInput/TextInput.Skeleton.js";
 import { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent } from "./components/Tile/Tile.js";
 import { TileGroup } from "./components/TileGroup/TileGroup.js";
 import TimePicker from "./components/TimePicker/TimePicker.js";
 import TimePickerSelect from "./components/TimePickerSelect/TimePickerSelect.js";
-import Toggle from "./components/Toggle/Toggle.js";
-import ToggleSkeleton from "./components/Toggle/Toggle.Skeleton.js";
+import { Toggle } from "./components/Toggle/Toggle.js";
+import { ToggleSkeleton } from "./components/Toggle/Toggle.Skeleton.js";
 import { ToggleSmallSkeleton } from "./components/ToggleSmall/ToggleSmall.Skeleton.js";
 import TreeNode from "./components/TreeView/TreeNode.js";
 import TreeView from "./components/TreeView/TreeView.js";
@@ -183,7 +183,7 @@ import HeaderContainer from "./components/UIShell/HeaderContainer.js";
 import HeaderGlobalAction from "./components/UIShell/HeaderGlobalAction.js";
 import HeaderGlobalBar from "./components/UIShell/HeaderGlobalBar.js";
 import HeaderMenuItem from "./components/UIShell/HeaderMenuItem.js";
-import HeaderMenu from "./components/UIShell/HeaderMenu.js";
+import { HeaderMenu } from "./components/UIShell/HeaderMenu.js";
 import HeaderMenuButton from "./components/UIShell/HeaderMenuButton.js";
 import HeaderName from "./components/UIShell/HeaderName.js";
 import HeaderNavigation from "./components/UIShell/HeaderNavigation.js";
@@ -203,7 +203,7 @@ import SideNavItem from "./components/UIShell/SideNavItem.js";
 import SideNavItems from "./components/UIShell/SideNavItems.js";
 import SideNavLinkText from "./components/UIShell/SideNavLinkText.js";
 import SideNavLink from "./components/UIShell/SideNavLink.js";
-import SideNavMenu from "./components/UIShell/SideNavMenu.js";
+import { SideNavMenu } from "./components/UIShell/SideNavMenu.js";
 import SideNavMenuItem from "./components/UIShell/SideNavMenuItem.js";
 import SideNavSwitcher from "./components/UIShell/SideNavSwitcher.js";
 import UnorderedList from "./components/UnorderedList/UnorderedList.js";
@@ -234,8 +234,8 @@ import { OverflowMenuV2 } from "./components/OverflowMenuV2/index.js";
 import Pagination$1 from "./components/Pagination/experimental/Pagination.js";
 import PageSelector from "./components/Pagination/experimental/PageSelector.js";
 import ProgressBar from "./components/ProgressBar/ProgressBar.js";
-import IconIndicator from "./components/IconIndicator/index.js";
-import ShapeIndicator from "./components/ShapeIndicator/index.js";
+import { IconIndicator } from "./components/IconIndicator/index.js";
+import { ShapeIndicator } from "./components/ShapeIndicator/index.js";
 import ChatButton from "./components/ChatButton/ChatButton.js";
 import ChatButtonSkeleton from "./components/ChatButton/ChatButton.Skeleton.js";
 import AISkeletonPlaceholder from "./components/AISkeleton/AISkeletonPlaceholder.js";

package/es/internal/FloatingMenu.js

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { warning } from "./warning.js";
 import { PrefixContext } from "./usePrefix.js";
 import { Tab } from "./keyboard/keys.js";
 import { match } from "./keyboard/match.js";
 import { selectorFocusable, selectorTabbable } from "./keyboard/navigation.js";
-import { warning } from "./warning.js";
 import { wrapFocus, wrapFocusWithoutSentinels } from "./wrapFocus.js";
 import { OptimizedResize } from "./OptimizedResize.js";
 import { enabled } from "@carbon/feature-flags";
@@ -26,6 +26,7 @@ import ReactDOM from "react-dom";
 const DIRECTION_LEFT = "left";
 const DIRECTION_RIGHT = "right";
 const DIRECTION_BOTTOM = "bottom";
+const defaultTarget = () => document.body;
 /**
 * Computes the floating menu's position based on the menu size, trigger element
 * position, offset, direction, and container.
@@ -64,10 +65,11 @@ const getFloatingPosition = ({ menuSize, refPosition, offset, direction, scrollX
 const FloatingMenu = ({ children, flipped, focusTrap, menuDirection = DIRECTION_BOTTOM, menuOffset = {
 	top: 0,
 	left: 0
-}, menuRef: externalMenuRef, onPlace, selectorPrimaryFocus, styles, target = () => document.body, triggerRef, updateOrientation }) => {
+}, menuRef: externalMenuRef, onPlace, selectorPrimaryFocus, styles, target = defaultTarget, triggerRef, updateOrientation }) => {
 	const prefix = useContext(PrefixContext);
 	const [floatingPosition, setFloatingPosition] = useState(void 0);
 	const menuBodyRef = useRef(null);
+	const floatingPositionRef = useRef(void 0);
 	const startSentinelRef = useRef(null);
 	const endSentinelRef = useRef(null);
 	const placeInProgressRef = useRef(false);
@@ -113,10 +115,11 @@ const FloatingMenu = ({ children, flipped, focusTrap, menuDirection = DIRECTION_
 					position: getComputedStyle(target()).position
 				}
 			});
-			setFloatingPosition((prev) => {
-				if (prev && prev.left === newFloatingPosition.left && prev.top === newFloatingPosition.top) return prev;
-				return newFloatingPosition;
-			});
+			const previousFloatingPosition = floatingPositionRef.current;
+			if (!previousFloatingPosition || previousFloatingPosition.left !== newFloatingPosition.left || previousFloatingPosition.top !== newFloatingPosition.top) {
+				floatingPositionRef.current = newFloatingPosition;
+				setFloatingPosition(newFloatingPosition);
+			}
 			if (!isAdjustment) {
 				const newMenuSize = menuBody.getBoundingClientRect();
 				if (newMenuSize.width !== menuSize.width || newMenuSize.height !== menuSize.height) updateMenuPosition(true);
@@ -138,12 +141,12 @@ const FloatingMenu = ({ children, flipped, focusTrap, menuDirection = DIRECTION_
 		focusTarget.focus();
 		if (focusTarget === menuBody) warning(focusableNode === null, "Floating Menus must have at least a programmatically focusable child. This can be accomplished by adding tabIndex=\"-1\" to the content element.");
 	};
-	const handleMenuRef = (node) => {
+	const handleMenuRef = useCallback((node) => {
 		menuBodyRef.current = node;
 		placeInProgressRef.current = !!node;
 		if (externalMenuRef) externalMenuRef(node);
 		if (node) updateMenuPosition();
-	};
+	}, [externalMenuRef, updateMenuPosition]);
 	useEffect(() => {
 		if (placeInProgressRef.current && floatingPosition && menuBodyRef.current) {
 			if (!menuBodyRef.current.contains(document.activeElement)) focusMenuContent(menuBodyRef.current);
@@ -253,4 +256,4 @@ const FloatingMenu = ({ children, flipped, focusTrap, menuDirection = DIRECTION_
 	return null;
 };
 //#endregion
-export { DIRECTION_BOTTOM, FloatingMenu };
+export { DIRECTION_BOTTOM, DIRECTION_LEFT, DIRECTION_RIGHT, FloatingMenu };

package/es/internal/motion/MotionSurface.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 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.
+ */
+import React, { type HTMLAttributes, type ReactNode } from 'react';
+import type { MotionSurfaceName } from '@carbon/motion';
+type SafeDivProps = Omit<HTMLAttributes<HTMLDivElement>, 'onAnimationStart' | 'onDrag' | 'onDragEnd' | 'onDragStart'>;
+export interface MotionSurfaceProps extends SafeDivProps {
+    surface: MotionSurfaceName;
+    surfaceId?: string;
+    open?: boolean;
+    onExitComplete?: () => void;
+    children?: ReactNode;
+}
+/**
+ * Animates its children according to a named @carbon/motion surface
+ *
+ * Reveal surfaces enter/exit between surface keyframes. Shared-element
+ * surfaces morph from the `MotionSurfaceOrigin` with the same `surfaceId`.
+ * When a shared-element surface also defines enter/exit keyframes, those
+ * are applied as `animate`/`exit` on top of the layout morph.
+ *
+ * When users prefer reduced motion, render as plain element and
+ * mount/unmount immediately - no Motion runs at all
+ */
+export declare const MotionSurface: React.ForwardRefExoticComponent<MotionSurfaceProps & React.RefAttributes<HTMLDivElement>>;
+export interface MotionSurfaceOriginProps extends SafeDivProps {
+    surface: MotionSurfaceName;
+    surfaceId: string;
+    children?: ReactNode;
+}
+export declare const MotionSurfaceOrigin: React.ForwardRefExoticComponent<MotionSurfaceOriginProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/internal/motion/useMotionEnabled.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2026
+ */
+/**
+ * Accessibility gate for surface API
+ *
+ * Surface entrypoints check this hook and bail before doing any
+ * motion work. When users request reduced motion, don't run surfaces at
+ * all - components fall back to their default rendering (and their baseline
+ * CSS transitions, which have their own `prefers-reduced-motion`)
+ *
+ */
+export declare function useMotionEnabled(): boolean;

package/es/internal/motion/useMotionSurface.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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.
+ */
+import { type MotionSurfaceName } from '@carbon/motion';
+import type { TargetAndTransition, Transition } from 'motion/react';
+interface ResolvedSurfaceBase {
+    enabled: boolean;
+    enterTransition: Transition;
+    exitTransition: Transition;
+}
+export interface ResolvedRevealSurface extends ResolvedSurfaceBase {
+    kind: 'reveal';
+    initial: TargetAndTransition;
+    animate: TargetAndTransition;
+    exit: TargetAndTransition;
+}
+export interface ResolvedSharedElementSurface extends ResolvedSurfaceBase {
+    kind: 'shared-element';
+    origin?: 'trigger';
+    animate?: TargetAndTransition;
+    exit?: TargetAndTransition;
+}
+export type ResolvedMotionSurface = ResolvedRevealSurface | ResolvedSharedElementSurface;
+/**
+ * resolve named Carbon motion surfaces to Motion-ready values
+ * definitions stay in `@carbon/motion`; this hook only translates tokens
+ * (duration/easing names) into the numeric forms `motion/react` consumes
+ */
+export declare function useMotionSurface(name: MotionSurfaceName): ResolvedMotionSurface;
+export {};

package/es/internal/useId.js

@@ -67,4 +67,4 @@ function useFallbackId(id) {
 	return id ?? fallback;
 }
 //#endregion
-export { useFallbackId, useId };
+export { useCompatibleId, useFallbackId, useId };

package/es/internal/useOverflowItems.js

@@ -31,7 +31,8 @@ const useOverflowItems = (items, containerRef, offsetRef, maxItems, onChange) =>
 	const handleResize = () => {
 		if (containerRef.current) {
 			const offset = offsetRef?.current?.offsetWidth || 0;
-			setMaxWidth(containerRef.current.offsetWidth - offset);
+			const newMax = containerRef.current.offsetWidth - offset;
+			setMaxWidth(newMax);
 		}
 	};
 	useResizeObserver({

package/es/internal/usePresence.d.ts

@@ -5,7 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { type RefObject } from 'react';
-export declare const usePresence: (ref: RefObject<HTMLElement | null>, isOpen: boolean) => {
+export declare const usePresence: (ref: RefObject<HTMLElement | null>, isOpen: boolean, 
+/**
+ * Number of pending JS-driven exit animations (e.g. motion surfaces)
+ * registered through the presence context. The exit does not finish while
+ * holds are outstanding, since those animations are invisible to
+ * `getAnimations()`.
+ */
+exitHoldCount?: number) => {
     /**
      * Indicates whether the ref object is supposed to be mounted
      */

package/es/internal/usePresence.js

@@ -15,7 +15,7 @@ import { useState } from "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.
 */
-const usePresence = (ref, isOpen) => {
+const usePresence = (ref, isOpen, exitHoldCount = 0) => {
 	const prefix = usePrefix();
 	const [exitState, setExitState] = useState(isOpen ? "idle" : "finished");
 	const isExiting = exitState === "active";
@@ -28,6 +28,7 @@ const usePresence = (ref, isOpen) => {
 	}, [isOpen]);
 	useIsomorphicEffect(() => {
 		if (!ref.current || !isExiting) return;
+		if (exitHoldCount > 0) return;
 		if (!("getAnimations" in ref.current)) {
 			setExitState("finished");
 			return;
@@ -48,7 +49,8 @@ const usePresence = (ref, isOpen) => {
 	}, [
 		ref,
 		isExiting,
-		prefix
+		prefix,
+		exitHoldCount
 	]);
 	return {
 		/**

package/es/internal/usePresenceContext.d.ts

@@ -18,7 +18,19 @@ export interface PresenceContext {
      * Returns if the caller is exclusive to this presence context
      */
     isPresenceExclusive: (id: string) => boolean;
+    /**
+     * Registers a pending JS-driven exit animation (e.g. a motion surface)
+     * that `getAnimations()` cannot observe. The presence exit does not finish
+     * until the returned release function is called.
+     */
+    holdExit: () => () => void;
 }
+/**
+ * Generic channel for presence providers (ModalPresence,
+ * ComposedModalPresence). Lets presence-aware children — like MotionSurface —
+ * register exit holds without depending on component-level context modules.
+ */
+export declare const PresenceHoldContext: import("react").Context<PresenceContext | undefined>;
 /**
  * Returns if the presence node is present and the context value to be used by a presence context, e.g. ModalPresence.
  */

package/es/internal/usePresenceContext.js

@@ -6,7 +6,7 @@
  */
 
 import { usePresence } from "./usePresence.js";
-import { useCallback, useMemo, useRef } from "react";
+import { createContext, useCallback, useMemo, useRef, useState } from "react";
 //#region src/internal/usePresenceContext.ts
 /**
 * Copyright IBM Corp. 2025
@@ -15,30 +15,48 @@ import { useCallback, useMemo, useRef } from "react";
 * LICENSE file in the root directory of this source tree.
 */
 /**
+* Generic channel for presence providers (ModalPresence,
+* ComposedModalPresence). Lets presence-aware children — like MotionSurface —
+* register exit holds without depending on component-level context modules.
+*/
+const PresenceHoldContext = createContext(void 0);
+/**
 * Returns if the presence node is present and the context value to be used by a presence context, e.g. ModalPresence.
 */
 const usePresenceContext = (open, initialPresenceId) => {
 	const presenceIdRef = useRef(initialPresenceId);
 	const presenceRef = useRef(null);
 	const prevPresenceRef = useRef(null);
+	const [exitHoldCount, setExitHoldCount] = useState(0);
 	if (!initialPresenceId && prevPresenceRef.current && !presenceRef.current) presenceIdRef.current = null;
 	prevPresenceRef.current = presenceRef.current;
-	const { isPresent, isExiting } = usePresence(presenceRef, open);
+	const { isPresent, isExiting } = usePresence(presenceRef, open, exitHoldCount);
 	const isPresenceExclusive = useCallback((id) => {
 		if (!id) return false;
 		if (presenceIdRef.current && presenceIdRef.current !== id) return false;
 		presenceIdRef.current = id;
 		return true;
 	}, []);
+	const holdExit = useCallback(() => {
+		setExitHoldCount((count) => count + 1);
+		let released = false;
+		return () => {
+			if (released) return;
+			released = true;
+			setExitHoldCount((count) => count - 1);
+		};
+	}, []);
 	return [isPresent, useMemo(() => ({
 		presenceRef,
 		isPresenceExclusive,
-		isExiting
+		isExiting,
+		holdExit
 	}), [
 		presenceRef,
 		isPresenceExclusive,
-		isExiting
+		isExiting,
+		holdExit
 	])];
 };
 //#endregion
-export { usePresenceContext };
+export { PresenceHoldContext, usePresenceContext };

package/es/tools/wrapComponent.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../internal/usePrefix.js";
-import classNames from "classnames";
 import React from "react";
+import cx from "classnames";
 import PropTypes from "prop-types";
 //#region src/tools/wrapComponent.ts
 /**
@@ -28,7 +28,7 @@ const wrapComponent = ({ name, className: getClassName, type }) => {
 	*/
 	function Component({ className: baseClassName, ...other }) {
 		const prefix = usePrefix();
-		const componentClass = classNames(typeof getClassName === "function" ? getClassName(prefix) : getClassName, baseClassName);
+		const componentClass = cx(typeof getClassName === "function" ? getClassName(prefix) : getClassName, baseClassName);
 		return React.createElement(type, {
 			...other,
 			className: !!componentClass ? componentClass : void 0

package/lib/components/AILabel/index.js

@@ -11,10 +11,10 @@ const require_useId = require("../../internal/useId.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
 const require_index = require("../IconButton/index.js");
 const require_index$1 = require("../Toggletip/index.js");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -97,7 +97,7 @@ const AILabel = react.default.forwardRef(function AILabel({ aiText = "AI", aiTex
 			label: revertLabel,
 			...rest,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.Undo, {})
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$1.default, {
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index$1.Toggletip, {
 			align,
 			autoAlign,
 			alignmentAxisOffset: isSmallIcon ? -24 : 0,
@@ -118,7 +118,7 @@ const AILabel = react.default.forwardRef(function AILabel({ aiText = "AI", aiTex
 });
 AILabel.displayName = "AILabel";
 AILabel.propTypes = {
-	...require_index$1.default.propTypes,
+	...require_index$1.Toggletip.propTypes,
 	/**
 	* Specify the content you want rendered inside the `AILabel` ToggleTip
 	*/

package/lib/components/AISkeleton/AISkeletonIcon.js

@@ -8,10 +8,10 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_SkeletonIcon = require("../SkeletonIcon/SkeletonIcon.js");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");

package/lib/components/AISkeleton/AISkeletonPlaceholder.js

@@ -8,10 +8,10 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_SkeletonPlaceholder = require("../SkeletonPlaceholder/SkeletonPlaceholder.js");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");

package/lib/components/AISkeleton/AISkeletonText.js

@@ -8,10 +8,10 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_SkeletonText = require("../SkeletonText/SkeletonText.js");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");

package/lib/components/Accordion/Accordion.Skeleton.js

@@ -8,10 +8,10 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_index = require("../SkeletonText/index.js");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -82,4 +82,5 @@ function AccordionSkeletonItem() {
 	});
 }
 //#endregion
+exports.AccordionSkeleton = AccordionSkeleton;
 exports.default = AccordionSkeleton;

package/lib/components/Accordion/Accordion.js

@@ -8,10 +8,10 @@
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
 const require_AccordionProvider = require("./AccordionProvider.js");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");

package/lib/components/Accordion/AccordionItem.js

@@ -13,10 +13,10 @@ const require_keys = require("../../internal/keyboard/keys.js");
 const require_match = require("../../internal/keyboard/match.js");
 const require_useId = require("../../internal/useId.js");
 const require_deprecate = require("../../prop-types/deprecate.js");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");

package/lib/components/AspectRatio/AspectRatio.js

@@ -7,10 +7,10 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
-let classnames = require("classnames");
-classnames = require_runtime.__toESM(classnames);
 let react = require("react");
 react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
 let prop_types = require("prop-types");
 prop_types = require_runtime.__toESM(prop_types);
 let react_jsx_runtime = require("react/jsx-runtime");