@carbon/react 1.112.0-rc.0 → 1.113.0-rc.0

package/lib/components/UIShell/SwitcherDivider.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");

package/lib/components/UIShell/SwitcherItem.js

@@ -11,10 +11,10 @@ const require_keys = require("../../internal/keyboard/keys.js");
 const require_match = require("../../internal/keyboard/match.js");
 const require_AriaPropTypes = require("../../prop-types/AriaPropTypes.js");
 const require_Link = require("./Link.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/UnorderedList/UnorderedList.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");

package/lib/feature-flags.js

@@ -16,6 +16,7 @@
 	"enable-css-custom-properties": true,
 	"enable-css-grid": true,
 	"enable-v11-release": true,
+	"enable-v12-release": false,
 	"enable-experimental-tile-contrast": false,
 	"enable-tile-contrast": false,
 	"enable-v12-tile-radio-icons": false,

package/lib/index.js

@@ -7,6 +7,7 @@
 
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("./_virtual/_rolldown/runtime.js");
 require("./feature-flags.js");
 const require_usePrefix = require("./internal/usePrefix.js");
 const require_Accordion = require("./components/Accordion/Accordion.js");
@@ -259,29 +260,29 @@ exports.AISkeletonPlaceholder = require_AISkeletonPlaceholder.default;
 exports.AISkeletonText = require_AISkeletonText.default;
 exports.Accordion = require_Accordion.default;
 exports.AccordionItem = require_AccordionItem.default;
-exports.AccordionSkeleton = require_Accordion_Skeleton.default;
+exports.AccordionSkeleton = require_Accordion_Skeleton.AccordionSkeleton;
 exports.ActionableNotification = require_Notification.ActionableNotification;
 exports.AspectRatio = require_AspectRatio.default;
 exports.Breadcrumb = require_Breadcrumb.default;
 exports.BreadcrumbItem = require_BreadcrumbItem.default;
-exports.BreadcrumbSkeleton = require_Breadcrumb_Skeleton.default;
+exports.BreadcrumbSkeleton = require_Breadcrumb_Skeleton.BreadcrumbSkeleton;
 exports.Button = require_Button.default;
 exports.ButtonKinds = require_Button.ButtonKinds;
 exports.ButtonSet = require_ButtonSet.default;
 exports.ButtonSizes = require_Button.ButtonSizes;
-exports.ButtonSkeleton = require_Button_Skeleton.default;
+exports.ButtonSkeleton = require_Button_Skeleton.ButtonSkeleton;
 exports.ButtonTooltipAlignments = require_Button.ButtonTooltipAlignments;
 exports.ButtonTooltipPositions = require_Button.ButtonTooltipPositions;
 exports.Callout = require_Notification.Callout;
 exports.Checkbox = require_Checkbox.default;
 exports.CheckboxGroup = require_CheckboxGroup.default;
-exports.CheckboxSkeleton = require_Checkbox_Skeleton.default;
+exports.CheckboxSkeleton = require_Checkbox_Skeleton.CheckboxSkeleton;
 exports.ClassPrefix = require_index$5.ClassPrefix;
 exports.ClickableTile = require_Tile.ClickableTile;
 exports.CodeSnippet = require_CodeSnippet.default;
-exports.CodeSnippetSkeleton = require_CodeSnippet_Skeleton.default;
+exports.CodeSnippetSkeleton = require_CodeSnippet_Skeleton.CodeSnippetSkeleton;
 exports.Column = require_Column.default;
-exports.ColumnHang = require_ColumnHang.ColumnHangComponent;
+exports.ColumnHang = require_ColumnHang.ColumnHang;
 exports.ComboBox = require_ComboBox.default;
 exports.ComboButton = require_index$7.ComboButton;
 exports.ComposedModal = require_ComposedModal.default;
@@ -298,11 +299,11 @@ exports.DataTable = require_DataTable.DataTable;
 exports.DataTableSkeleton = require_DataTableSkeleton.default;
 exports.DatePicker = require_DatePicker.default;
 exports.DatePickerInput = require_DatePickerInput.default;
-exports.DatePickerSkeleton = require_DatePicker_Skeleton.default;
+exports.DatePickerSkeleton = require_DatePicker_Skeleton.DatePickerSkeleton;
 exports.DefinitionTooltip = require_DefinitionTooltip.DefinitionTooltip;
 exports.DismissibleTag = require_DismissibleTag.default;
 exports.Dropdown = require_Dropdown.default;
-exports.DropdownSkeleton = require_Dropdown_Skeleton.default;
+exports.DropdownSkeleton = require_Dropdown_Skeleton.DropdownSkeleton;
 exports.ErrorBoundary = require_ErrorBoundary.default;
 exports.ErrorBoundaryContext = require_ErrorBoundaryContext.ErrorBoundaryContext;
 exports.ExpandableSearch = require_ExpandableSearch.default;
@@ -312,10 +313,10 @@ exports.FileUploader = require_FileUploader.default;
 exports.FileUploaderButton = require_FileUploaderButton.default;
 exports.FileUploaderDropContainer = require_FileUploaderDropContainer.default;
 exports.FileUploaderItem = require_FileUploaderItem.default;
-exports.FileUploaderSkeleton = require_FileUploader_Skeleton.default;
+exports.FileUploaderSkeleton = require_FileUploader_Skeleton.FileUploaderSkeleton;
 exports.Filename = require_Filename.default;
 exports.FilterableMultiSelect = require_FilterableMultiSelect.FilterableMultiSelect;
-exports.FlexGrid = require_FlexGrid.FlexGridComponent;
+exports.FlexGrid = require_FlexGrid.FlexGrid;
 exports.FluidComboBox = require_FluidComboBox.default;
 exports.FluidComboBoxSkeleton = require_FluidComboBox_Skeleton.default;
 exports.FluidDatePicker = require_FluidDatePicker.default;
@@ -346,14 +347,14 @@ exports.FormGroup = require_FormGroup.default;
 exports.FormItem = require_FormItem.default;
 exports.FormLabel = require_FormLabel.default;
 exports.GlobalTheme = require_index$19.GlobalTheme;
-exports.Grid = require_Grid.GridAsGridComponent;
+exports.Grid = require_Grid.Grid;
 exports.GridSettings = require_GridContext.GridSettings;
 exports.HStack = require_HStack.HStack;
 exports.Header = require_Header.default;
 exports.HeaderContainer = require_HeaderContainer.default;
 exports.HeaderGlobalAction = require_HeaderGlobalAction.default;
 exports.HeaderGlobalBar = require_HeaderGlobalBar.default;
-exports.HeaderMenu = require_HeaderMenu.default;
+exports.HeaderMenu = require_HeaderMenu.HeaderMenu;
 exports.HeaderMenuButton = require_HeaderMenuButton.default;
 exports.HeaderMenuItem = require_HeaderMenuItem.default;
 exports.HeaderName = require_HeaderName.default;
@@ -363,7 +364,7 @@ exports.HeaderSideNavItems = require_HeaderSideNavItems.default;
 exports.Heading = require_index$11.Heading;
 exports.IconButton = require_index$2.IconButton;
 exports.IconButtonKinds = require_index$2.IconButtonKinds;
-exports.IconSkeleton = require_Icon_Skeleton.default;
+exports.IconSkeleton = require_Icon_Skeleton.IconSkeleton;
 exports.IconSwitch = require_IconSwitch.default;
 exports.IconTab = require_Tabs.IconTab;
 exports.IdPrefix = require_index$13.IdPrefix;
@@ -394,11 +395,11 @@ exports.NumberInput = require_NumberInput.NumberInput;
 exports.NumberInputSkeleton = require_NumberInput_Skeleton.default;
 exports.OperationalTag = require_OperationalTag.default;
 exports.OrderedList = require_OrderedList.default;
-exports.OverflowMenu = require_index$12.default;
+exports.OverflowMenu = require_index$12.OverflowMenu;
 exports.OverflowMenuItem = require_OverflowMenuItem.default;
 exports.Pagination = require_Pagination.default;
 exports.PaginationNav = require_PaginationNav.default;
-exports.PaginationSkeleton = require_Pagination_Skeleton.default;
+exports.PaginationSkeleton = require_Pagination_Skeleton.PaginationSkeleton;
 exports.PasswordInput = require_PasswordInput.default;
 exports.Popover = require_index$1.Popover;
 exports.PopoverContent = require_index$1.PopoverContent;
@@ -406,21 +407,21 @@ exports.PrefixContext = require_usePrefix.PrefixContext;
 exports.PrimaryButton = require_PrimaryButton.default;
 exports.ProgressBar = require_ProgressBar.default;
 exports.ProgressIndicator = require_ProgressIndicator.ProgressIndicator;
-exports.ProgressIndicatorSkeleton = require_ProgressIndicator_Skeleton.default;
+exports.ProgressIndicatorSkeleton = require_ProgressIndicator_Skeleton.ProgressIndicatorSkeleton;
 exports.ProgressStep = require_ProgressIndicator.ProgressStep;
 exports.RadioButton = require_RadioButton.default;
 exports.RadioButtonGroup = require_RadioButtonGroup.default;
-exports.RadioButtonSkeleton = require_RadioButton_Skeleton.default;
+exports.RadioButtonSkeleton = require_RadioButton_Skeleton.RadioButtonSkeleton;
 exports.RadioTile = require_RadioTile.default;
 exports.Row = require_Row.default;
 exports.Search = require_Search.default;
-exports.SearchSkeleton = require_Search_Skeleton.default;
+exports.SearchSkeleton = require_Search_Skeleton.SearchSkeleton;
 exports.SecondaryButton = require_SecondaryButton.default;
 exports.Section = require_index$11.Section;
 exports.Select = require_Select.default;
 exports.SelectItem = require_SelectItem.default;
 exports.SelectItemGroup = require_SelectItemGroup.default;
-exports.SelectSkeleton = require_Select_Skeleton.default;
+exports.SelectSkeleton = require_Select_Skeleton.SelectSkeleton;
 exports.SelectableTag = require_SelectableTag.default;
 exports.SelectableTile = require_Tile.SelectableTile;
 exports.SideNav = require_SideNav.default;
@@ -433,7 +434,7 @@ exports.SideNavItem = require_SideNavItem.default;
 exports.SideNavItems = require_SideNavItems.default;
 exports.SideNavLink = require_SideNavLink.default;
 exports.SideNavLinkText = require_SideNavLinkText.default;
-exports.SideNavMenu = require_SideNavMenu.default;
+exports.SideNavMenu = require_SideNavMenu.SideNavMenu;
 exports.SideNavMenuItem = require_SideNavMenuItem.default;
 exports.SideNavSwitcher = require_SideNavSwitcher.default;
 exports.SkeletonIcon = require_SkeletonIcon.default;
@@ -461,7 +462,7 @@ exports.TabList = require_Tabs.TabList;
 exports.TabListVertical = require_Tabs.TabListVertical;
 exports.TabPanel = require_Tabs.TabPanel;
 exports.TabPanels = require_Tabs.TabPanels;
-exports.Table = require_Table.default;
+exports.Table = require_Table.Table;
 exports.TableActionList = require_TableActionList.default;
 exports.TableBatchAction = require_TableBatchAction.default;
 exports.TableBatchActions = require_TableBatchActions.default;
@@ -484,14 +485,14 @@ exports.TableToolbarContent = require_TableToolbarContent.default;
 exports.TableToolbarMenu = require_TableToolbarMenu.default;
 exports.TableToolbarSearch = require_TableToolbarSearch.default;
 exports.Tabs = require_Tabs.Tabs;
-exports.TabsSkeleton = require_Tabs_Skeleton.default;
+exports.TabsSkeleton = require_Tabs_Skeleton.TabsSkeleton;
 exports.TabsVertical = require_Tabs.TabsVertical;
 exports.Tag = require_Tag.default;
-exports.TagSkeleton = require_Tag_Skeleton.default;
+exports.TagSkeleton = require_Tag_Skeleton.TagSkeleton;
 exports.TextArea = require_TextArea.default;
-exports.TextAreaSkeleton = require_TextArea_Skeleton.default;
+exports.TextAreaSkeleton = require_TextArea_Skeleton.TextAreaSkeleton;
 exports.TextInput = require_TextInput.default;
-exports.TextInputSkeleton = require_TextInput_Skeleton.default;
+exports.TextInputSkeleton = require_TextInput_Skeleton.TextInputSkeleton;
 exports.Theme = require_index$19.Theme;
 exports.ThemeContext = require_index$19.ThemeContext;
 exports.Tile = require_Tile.Tile;
@@ -501,10 +502,10 @@ exports.TileGroup = require_TileGroup.TileGroup;
 exports.TimePicker = require_TimePicker.default;
 exports.TimePickerSelect = require_TimePickerSelect.default;
 exports.ToastNotification = require_Notification.ToastNotification;
-exports.Toggle = require_Toggle.default;
-exports.ToggleSkeleton = require_Toggle_Skeleton.default;
+exports.Toggle = require_Toggle.Toggle;
+exports.ToggleSkeleton = require_Toggle_Skeleton.ToggleSkeleton;
 exports.ToggleSmallSkeleton = require_ToggleSmall_Skeleton.ToggleSmallSkeleton;
-exports.Toggletip = require_index$3.default;
+exports.Toggletip = require_index$3.Toggletip;
 exports.ToggletipActions = require_index$3.ToggletipActions;
 exports.ToggletipButton = require_index$3.ToggletipButton;
 exports.ToggletipContent = require_index$3.ToggletipContent;
@@ -555,14 +556,14 @@ exports.preview__FluidTextInputSkeleton = require_FluidTextInput_Skeleton.defaul
 exports.preview__FluidTimePicker = require_FluidTimePicker.default;
 exports.preview__FluidTimePickerSelect = require_FluidTimePickerSelect.default;
 exports.preview__FluidTimePickerSkeleton = require_FluidTimePicker_Skeleton.default;
-exports.preview__IconIndicator = require_index$17.default;
+exports.preview__IconIndicator = require_index$17.IconIndicator;
 Object.defineProperty(exports, "preview__PageHeader", {
 	enumerable: true,
 	get: function() {
 		return require_index$15.PageHeader_exports;
 	}
 });
-exports.preview__ShapeIndicator = require_index$18.default;
+exports.preview__ShapeIndicator = require_index$18.ShapeIndicator;
 exports.preview__Slug = require_index$4.AILabel;
 exports.preview__SlugActions = require_index$4.AILabelActions;
 exports.preview__SlugContent = require_index$4.AILabelContent;
@@ -604,14 +605,14 @@ exports.unstable__FluidTextInputSkeleton = require_FluidTextInput_Skeleton.defau
 exports.unstable__FluidTimePicker = require_FluidTimePicker.default;
 exports.unstable__FluidTimePickerSelect = require_FluidTimePickerSelect.default;
 exports.unstable__FluidTimePickerSkeleton = require_FluidTimePicker_Skeleton.default;
-exports.unstable__IconIndicator = require_index$17.default;
+exports.unstable__IconIndicator = require_index$17.IconIndicator;
 Object.defineProperty(exports, "unstable__PageHeader", {
 	enumerable: true,
 	get: function() {
 		return require_index$15.PageHeader_exports;
 	}
 });
-exports.unstable__ShapeIndicator = require_index$18.default;
+exports.unstable__ShapeIndicator = require_index$18.ShapeIndicator;
 exports.unstable__Slug = require_index$4.AILabel;
 exports.unstable__SlugActions = require_index$4.AILabelActions;
 exports.unstable__SlugContent = require_index$4.AILabelContent;

package/lib/internal/FloatingMenu.js

@@ -6,11 +6,11 @@
  */
 
 const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_warning = require("./warning.js");
 const require_usePrefix = require("./usePrefix.js");
 const require_keys = require("./keyboard/keys.js");
 const require_match = require("./keyboard/match.js");
 const require_navigation = require("./keyboard/navigation.js");
-const require_warning = require("./warning.js");
 const require_wrapFocus = require("./wrapFocus.js");
 const require_OptimizedResize = require("./OptimizedResize.js");
 let _carbon_feature_flags = require("@carbon/feature-flags");
@@ -29,6 +29,7 @@ react_dom = require_runtime.__toESM(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.
@@ -67,10 +68,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 = (0, react.useContext)(require_usePrefix.PrefixContext);
 	const [floatingPosition, setFloatingPosition] = (0, react.useState)(void 0);
 	const menuBodyRef = (0, react.useRef)(null);
+	const floatingPositionRef = (0, react.useRef)(void 0);
 	const startSentinelRef = (0, react.useRef)(null);
 	const endSentinelRef = (0, react.useRef)(null);
 	const placeInProgressRef = (0, react.useRef)(false);
@@ -116,10 +118,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);
@@ -141,12 +144,12 @@ const FloatingMenu = ({ children, flipped, focusTrap, menuDirection = DIRECTION_
 		focusTarget.focus();
 		if (focusTarget === menuBody) require_warning.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 = (0, react.useCallback)((node) => {
 		menuBodyRef.current = node;
 		placeInProgressRef.current = !!node;
 		if (externalMenuRef) externalMenuRef(node);
 		if (node) updateMenuPosition();
-	};
+	}, [externalMenuRef, updateMenuPosition]);
 	(0, react.useEffect)(() => {
 		if (placeInProgressRef.current && floatingPosition && menuBodyRef.current) {
 			if (!menuBodyRef.current.contains(document.activeElement)) focusMenuContent(menuBodyRef.current);
@@ -257,4 +260,6 @@ const FloatingMenu = ({ children, flipped, focusTrap, menuDirection = DIRECTION_
 };
 //#endregion
 exports.DIRECTION_BOTTOM = DIRECTION_BOTTOM;
+exports.DIRECTION_LEFT = DIRECTION_LEFT;
+exports.DIRECTION_RIGHT = DIRECTION_RIGHT;
 exports.FloatingMenu = FloatingMenu;

package/lib/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/lib/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/lib/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/lib/internal/useId.js

@@ -69,5 +69,6 @@ function useFallbackId(id) {
 	return id ?? fallback;
 }
 //#endregion
+exports.useCompatibleId = useCompatibleId;
 exports.useFallbackId = useFallbackId;
 exports.useId = useId;

package/lib/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);
 		}
 	};
 	require_useResizeObserver.useResizeObserver({

package/lib/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/lib/internal/usePresence.js

@@ -15,7 +15,7 @@ let react = require("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 = require_usePrefix.usePrefix();
 	const [exitState, setExitState] = (0, react.useState)(isOpen ? "idle" : "finished");
 	const isExiting = exitState === "active";
@@ -28,6 +28,7 @@ const usePresence = (ref, isOpen) => {
 	}, [isOpen]);
 	require_useIsomorphicEffect.default(() => {
 		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/lib/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/lib/internal/usePresenceContext.js

@@ -15,30 +15,49 @@ let react = require("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 = (0, react.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 = (0, react.useRef)(initialPresenceId);
 	const presenceRef = (0, react.useRef)(null);
 	const prevPresenceRef = (0, react.useRef)(null);
+	const [exitHoldCount, setExitHoldCount] = (0, react.useState)(0);
 	if (!initialPresenceId && prevPresenceRef.current && !presenceRef.current) presenceIdRef.current = null;
 	prevPresenceRef.current = presenceRef.current;
-	const { isPresent, isExiting } = require_usePresence.usePresence(presenceRef, open);
+	const { isPresent, isExiting } = require_usePresence.usePresence(presenceRef, open, exitHoldCount);
 	const isPresenceExclusive = (0, react.useCallback)((id) => {
 		if (!id) return false;
 		if (presenceIdRef.current && presenceIdRef.current !== id) return false;
 		presenceIdRef.current = id;
 		return true;
 	}, []);
+	const holdExit = (0, react.useCallback)(() => {
+		setExitHoldCount((count) => count + 1);
+		let released = false;
+		return () => {
+			if (released) return;
+			released = true;
+			setExitHoldCount((count) => count - 1);
+		};
+	}, []);
 	return [isPresent, (0, react.useMemo)(() => ({
 		presenceRef,
 		isPresenceExclusive,
-		isExiting
+		isExiting,
+		holdExit
 	}), [
 		presenceRef,
 		isPresenceExclusive,
-		isExiting
+		isExiting,
+		holdExit
 	])];
 };
 //#endregion
+exports.PresenceHoldContext = PresenceHoldContext;
 exports.usePresenceContext = usePresenceContext;

package/lib/tools/wrapComponent.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);
 //#region src/tools/wrapComponent.ts