@base-ui/react 1.4.0 → 1.5.0

package/esm/toast/title/ToastTitle.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useId } from '@base-ui/utils/useId';
 import { useToastRootContext } from "../root/ToastRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * A title that labels the toast.

package/esm/toast/useToastManager.d.ts

@@ -48,7 +48,7 @@ export interface ToastObject<Data extends object> {
    */
   updateKey?: number | undefined;
   /**
-   * Determines if the toast was closed due to the limit being reached.
+   * Determines if the toast was limited because the toast limit was exceeded.
    */
   limited?: boolean | undefined;
   /**

package/esm/toast/viewport/ToastViewport.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A container viewport for toasts.
  * Renders a `<div>` element.

package/esm/toast/viewport/ToastViewport.js

@@ -9,7 +9,7 @@ import { useTimeout } from '@base-ui/utils/useTimeout';
 import { activeElement, contains, getTarget } from "../../floating-ui-react/utils.js";
 import { FocusGuard } from "../../utils/FocusGuard.js";
 import { useToastProviderContext } from "../provider/ToastProviderContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { isFocusVisible } from "../utils/focusVisible.js";
 import { ToastViewportCssVars } from "./ToastViewportCssVars.js";
 
@@ -40,6 +40,7 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
   const prevFocusElement = store.useState('prevFocusElement');
   const frontmostHeight = toasts[0]?.height ?? 0;
   const hasTransitioningToasts = React.useMemo(() => toasts.some(toast => toast.transitionStatus === 'ending'), [toasts]);
+  const highPriorityToasts = React.useMemo(() => toasts.filter(toast => toast.priority === 'high'), [toasts]);
 
   // Listen globally for F6 so we can force-focus the viewport.
   React.useEffect(() => {
@@ -229,7 +230,6 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
       })
     }]
   });
-  const highPriorityToasts = React.useMemo(() => toasts.filter(toast => toast.priority === 'high'), [toasts]);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [!isEmpty && prevFocusElement && /*#__PURE__*/_jsx(FocusGuard, {
       onFocus: handleFocusGuard

package/esm/toggle/Toggle.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NativeButtonProps } from "../utils/types.js";
-import { type BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../utils/reasons.js";
+import type { BaseUIComponentProps, NativeButtonProps } from "../internals/types.js";
+import { type BaseUIChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../internals/reasons.js";
 /**
  * A two-state button that can be on or off.
  * Renders a `<button>` element.

package/esm/toggle/Toggle.js

@@ -1,17 +1,16 @@
 'use client';
 
 import * as React from 'react';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useControlled } from '@base-ui/utils/useControlled';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { error } from '@base-ui/utils/error';
-import { useBaseUiId } from "../utils/useBaseUiId.js";
-import { useRenderElement } from "../utils/useRenderElement.js";
+import { useBaseUiId } from "../internals/useBaseUiId.js";
+import { useRenderElement } from "../internals/useRenderElement.js";
 import { useToggleGroupContext } from "../toggle-group/ToggleGroupContext.js";
-import { useButton } from "../use-button/useButton.js";
-import { CompositeItem } from "../composite/item/CompositeItem.js";
-import { createChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../utils/reasons.js";
+import { useButton } from "../internals/use-button/useButton.js";
+import { CompositeItem } from "../internals/composite/item/CompositeItem.js";
+import { createChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../internals/reasons.js";
 
 /**
  * A two-state button that can be on or off.
@@ -27,7 +26,7 @@ export const Toggle = /*#__PURE__*/React.forwardRef(function Toggle(componentPro
     disabled: disabledProp = false,
     form,
     // never participates in form validation
-    onPressedChange: onPressedChangeProp,
+    onPressedChange,
     pressed: pressedProp,
     render,
     type,
@@ -58,12 +57,6 @@ export const Toggle = /*#__PURE__*/React.forwardRef(function Toggle(componentPro
     name: 'Toggle',
     state: 'pressed'
   });
-  const onPressedChange = useStableCallback((nextPressed, eventDetails) => {
-    if (value) {
-      groupContext?.setGroupValue?.(value, nextPressed, eventDetails);
-    }
-    onPressedChangeProp?.(nextPressed, eventDetails);
-  });
   const {
     getButtonProps,
     buttonRef
@@ -81,7 +74,10 @@ export const Toggle = /*#__PURE__*/React.forwardRef(function Toggle(componentPro
     onClick(event) {
       const nextPressed = !pressed;
       const details = createChangeEventDetails(REASONS.none, event.nativeEvent);
-      onPressedChange(nextPressed, details);
+      if (value) {
+        groupContext?.setGroupValue?.(value, nextPressed, details);
+      }
+      onPressedChange?.(nextPressed, details);
       if (details.isCanceled) {
         return;
       }

package/esm/toggle-group/ToggleGroup.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, Orientation } from "../utils/types.js";
-import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../utils/reasons.js";
+import type { BaseUIComponentProps, Orientation } from "../internals/types.js";
+import type { BaseUIChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../internals/reasons.js";
 /**
  * Provides a shared state to a series of toggle buttons.
  *
@@ -29,13 +29,13 @@ export interface ToggleGroupState {
 }
 export interface ToggleGroupProps<Value extends string> extends BaseUIComponentProps<'div', ToggleGroupState> {
   /**
-   * The open state of the toggle group represented by an array of
+   * The pressed state of the toggle group represented by an array of
    * the values of all pressed toggle buttons.
    * This is the controlled counterpart of `defaultValue`.
    */
   value?: readonly Value[] | undefined;
   /**
-   * The open state of the toggle group represented by an array of
+   * The pressed state of the toggle group represented by an array of
    * the values of all pressed toggle buttons.
    * This is the uncontrolled counterpart of `value`.
    */

package/esm/toggle-group/ToggleGroup.js

@@ -3,8 +3,9 @@
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useControlled } from '@base-ui/utils/useControlled';
-import { useRenderElement } from "../utils/useRenderElement.js";
-import { CompositeRoot } from "../composite/root/CompositeRoot.js";
+import { EMPTY_ARRAY } from '@base-ui/utils/empty';
+import { useRenderElement } from "../internals/useRenderElement.js";
+import { CompositeRoot } from "../internals/composite/root/CompositeRoot.js";
 import { useToolbarRootContext } from "../toolbar/root/ToolbarRootContext.js";
 import { ToggleGroupContext } from "./ToggleGroupContext.js";
 import { ToggleGroupDataAttributes } from "./ToggleGroupDataAttributes.js";
@@ -40,17 +41,11 @@ export const ToggleGroup = /*#__PURE__*/React.forwardRef(function ToggleGroup(co
     ...elementProps
   } = componentProps;
   const toolbarContext = useToolbarRootContext(true);
-  const defaultValue = React.useMemo(() => {
-    if (valueProp === undefined) {
-      return defaultValueProp ?? [];
-    }
-    return undefined;
-  }, [valueProp, defaultValueProp]);
   const isValueInitialized = React.useMemo(() => valueProp !== undefined || defaultValueProp !== undefined, [valueProp, defaultValueProp]);
   const disabled = (toolbarContext?.disabled ?? false) || disabledProp;
   const [groupValue, setValueState] = useControlled({
     controlled: valueProp,
-    default: defaultValue,
+    default: valueProp === undefined ? defaultValueProp ?? EMPTY_ARRAY : undefined,
     name: 'ToggleGroup',
     state: 'value'
   });
@@ -66,13 +61,11 @@ export const ToggleGroup = /*#__PURE__*/React.forwardRef(function ToggleGroup(co
     } else {
       newGroupValue = nextPressed ? [newValue] : [];
     }
-    if (Array.isArray(newGroupValue)) {
-      onValueChange?.(newGroupValue, eventDetails);
-      if (eventDetails.isCanceled) {
-        return;
-      }
-      setValueState(newGroupValue);
+    onValueChange?.(newGroupValue, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
     }
+    setValueState(newGroupValue);
   });
   const state = {
     disabled,

package/esm/toggle-group/ToggleGroupContext.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { Orientation } from "../utils/types.js";
-import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
-import type { BaseUIEventReasons } from "../utils/reasons.js";
+import type { Orientation } from "../internals/types.js";
+import type { BaseUIChangeEventDetails } from "../internals/createBaseUIEventDetails.js";
+import type { BaseUIEventReasons } from "../internals/reasons.js";
 export interface ToggleGroupContext<Value> {
   value: readonly Value[];
   setGroupValue: (newValue: Value, nextPressed: boolean, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;

package/esm/toolbar/button/ToolbarButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+import { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 import type { ToolbarRootState } from "../root/ToolbarRoot.js";
 /**
  * A button that can be used as-is or as a trigger for other components.

package/esm/toolbar/button/ToolbarButton.js

@@ -1,10 +1,10 @@
 'use client';
 
 import * as React from 'react';
-import { useButton } from "../../use-button/index.js";
+import { useButton } from "../../internals/use-button/index.js";
 import { useToolbarRootContext } from "../root/ToolbarRootContext.js";
 import { useToolbarGroupContext } from "../group/ToolbarGroupContext.js";
-import { CompositeItem } from "../../composite/item/CompositeItem.js";
+import { CompositeItem } from "../../internals/composite/item/CompositeItem.js";
 
 /**
  * A button that can be used as-is or as a trigger for other components.

package/esm/toolbar/group/ToolbarGroup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 import type { ToolbarRootState } from "../root/ToolbarRoot.js";
 /**
  * Groups several toolbar items or toggles.

package/esm/toolbar/group/ToolbarGroup.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useToolbarRootContext } from "../root/ToolbarRootContext.js";
 import { ToolbarGroupContext } from "./ToolbarGroupContext.js";
 

package/esm/toolbar/index.parts.d.ts

@@ -4,4 +4,4 @@ export { ToolbarGroup as Group } from "./group/ToolbarGroup.js";
 export { ToolbarButton as Button } from "./button/ToolbarButton.js";
 export { ToolbarLink as Link } from "./link/ToolbarLink.js";
 export { ToolbarInput as Input } from "./input/ToolbarInput.js";
-export { type Orientation } from "../utils/types.js";
+export { type Orientation } from "../internals/types.js";

package/esm/toolbar/input/ToolbarInput.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 import type { ToolbarRootState } from "../root/ToolbarRoot.js";
 /**
  * A native input element that integrates with Toolbar keyboard navigation.

package/esm/toolbar/input/ToolbarInput.js

@@ -2,10 +2,10 @@
 
 import * as React from 'react';
 import { useFocusableWhenDisabled } from "../../utils/useFocusableWhenDisabled.js";
-import { ARROW_LEFT, ARROW_RIGHT, stopEvent } from "../../composite/composite.js";
+import { ARROW_LEFT, ARROW_RIGHT, stopEvent } from "../../internals/composite/composite.js";
 import { useToolbarRootContext } from "../root/ToolbarRootContext.js";
 import { useToolbarGroupContext } from "../group/ToolbarGroupContext.js";
-import { CompositeItem } from "../../composite/item/CompositeItem.js";
+import { CompositeItem } from "../../internals/composite/item/CompositeItem.js";
 
 /**
  * A native input element that integrates with Toolbar keyboard navigation.

package/esm/toolbar/link/ToolbarLink.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { ToolbarRoot } from "../root/ToolbarRoot.js";
 /**
  * A link component.

package/esm/toolbar/link/ToolbarLink.js

@@ -2,11 +2,10 @@
 
 import * as React from 'react';
 import { useToolbarRootContext } from "../root/ToolbarRootContext.js";
-import { CompositeItem } from "../../composite/item/CompositeItem.js";
+import { CompositeItem } from "../../internals/composite/item/CompositeItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const TOOLBAR_LINK_METADATA = {
-  // links cannot be disabled, this metadata is only used for deriving `disabledIndices``
-  // TODO: better name
+  // Links cannot be disabled, but they still occupy a focusable composite item slot.
   focusableWhenDisabled: true
 };
 

package/esm/toolbar/root/ToolbarRoot.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps, Orientation as BaseOrientation } from "../../utils/types.js";
+import { BaseUIComponentProps, Orientation as BaseOrientation } from "../../internals/types.js";
 /**
  * A container for grouping a set of controls, such as buttons, toggle groups, or menus.
  * Renders a `<div>` element.

package/esm/toolbar/root/ToolbarRoot.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { CompositeRoot } from "../../composite/root/CompositeRoot.js";
+import { CompositeRoot } from "../../internals/composite/root/CompositeRoot.js";
 import { ToolbarRootContext } from "./ToolbarRootContext.js";
 
 /**

package/esm/toolbar/root/ToolbarRootContext.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { Orientation } from "../../utils/types.js";
-import type { CompositeMetadata } from "../../composite/list/CompositeList.js";
+import type { Orientation } from "../../internals/types.js";
+import type { CompositeMetadata } from "../../internals/composite/list/CompositeList.js";
 import type { ToolbarRoot } from "./ToolbarRoot.js";
 export interface ToolbarRootContext {
   disabled: boolean;

package/esm/toolbar/separator/ToolbarSeparator.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import { Separator, type SeparatorState } from "../../separator/index.js";
 /**
  * A separator element accessible to screen readers.

package/esm/tooltip/arrow/TooltipArrow.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { Side, Align } from "../../utils/useAnchorPositioning.js";
 /**
  * Displays an element positioned against the tooltip anchor.

package/esm/tooltip/arrow/TooltipArrow.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { useTooltipPositionerContext } from "../positioner/TooltipPositionerContext.js";
 import { popupStateMapping } from "../../utils/popupStateMapping.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useTooltipRootContext } from "../root/TooltipRootContext.js";
 
 /**
@@ -14,14 +14,12 @@ import { useTooltipRootContext } from "../root/TooltipRootContext.js";
  */
 export const TooltipArrow = /*#__PURE__*/React.forwardRef(function TooltipArrow(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;
   const store = useTooltipRootContext();
-  const open = store.useState('open');
-  const instantType = store.useState('instantType');
   const {
     arrowRef,
     side,
@@ -29,6 +27,8 @@ export const TooltipArrow = /*#__PURE__*/React.forwardRef(function TooltipArrow(
     arrowUncentered,
     arrowStyles
   } = useTooltipPositionerContext();
+  const open = store.useState('open');
+  const instantType = store.useState('instantType');
   const state = {
     open,
     side,

package/esm/tooltip/popup/TooltipPopup.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { Align, Side } from "../../utils/useAnchorPositioning.js";
-import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * A container for the tooltip contents.
  * Renders a `<div>` element.

package/esm/tooltip/popup/TooltipPopup.js

@@ -4,9 +4,9 @@ import * as React from 'react';
 import { useTooltipRootContext } from "../root/TooltipRootContext.js";
 import { useTooltipPositionerContext } from "../positioner/TooltipPositionerContext.js";
 import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.js";
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
-import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
 import { useHoverFloatingInteraction } from "../../floating-ui-react/index.js";
 const stateAttributesMapping = {
@@ -22,8 +22,8 @@ const stateAttributesMapping = {
  */
 export const TooltipPopup = /*#__PURE__*/React.forwardRef(function TooltipPopup(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;
@@ -37,6 +37,8 @@ export const TooltipPopup = /*#__PURE__*/React.forwardRef(function TooltipPopup(
   const transitionStatus = store.useState('transitionStatus');
   const popupProps = store.useState('popupProps');
   const floatingContext = store.useState('floatingRootContext');
+  const disabled = store.useState('disabled');
+  const closeDelay = store.useState('closeDelay');
   useOpenChangeComplete({
     open,
     ref: store.context.popupRef,
@@ -46,12 +48,11 @@ export const TooltipPopup = /*#__PURE__*/React.forwardRef(function TooltipPopup(
       }
     }
   });
-  const disabled = store.useState('disabled');
-  const closeDelay = store.useState('closeDelay');
   useHoverFloatingInteraction(floatingContext, {
     enabled: !disabled,
     closeDelay
   });
+  const setPopupElement = store.useStateSetter('popupElement');
   const state = {
     open,
     side,
@@ -61,7 +62,7 @@ export const TooltipPopup = /*#__PURE__*/React.forwardRef(function TooltipPopup(
   };
   const element = useRenderElement('div', componentProps, {
     state,
-    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
+    ref: [forwardedRef, store.context.popupRef, setPopupElement],
     props: [popupProps, getDisabledMountTransitionStyles(transitionStatus), elementProps],
     stateAttributesMapping
   });

package/esm/tooltip/positioner/TooltipPositioner.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Positions the tooltip against the trigger.
  * Renders a `<div>` element.

package/esm/tooltip/positioner/TooltipPositioner.js

@@ -5,7 +5,7 @@ import { useTooltipRootContext } from "../root/TooltipRootContext.js";
 import { TooltipPositionerContext } from "./TooltipPositionerContext.js";
 import { useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
 import { useTooltipPortalContext } from "../portal/TooltipPortalContext.js";
-import { POPUP_COLLISION_AVOIDANCE } from "../../utils/constants.js";
+import { POPUP_COLLISION_AVOIDANCE } from "../../internals/constants.js";
 import { adaptiveOrigin } from "../../utils/adaptiveOriginMiddleware.js";
 import { usePositioner } from "../../utils/usePositioner.js";
 

package/esm/tooltip/root/TooltipRoot.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { type BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import { type BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { type PayloadChildRenderFunction } from "../../utils/popups/index.js";
 import { type TooltipHandle } from "../store/TooltipHandle.js";
-import { REASONS } from "../../utils/reasons.js";
+import { REASONS } from "../../internals/reasons.js";
 /**
  * Groups all parts of the tooltip.
  * Doesn't render its own HTML element.

package/esm/tooltip/root/TooltipRoot.js

@@ -5,11 +5,12 @@ import { fastComponent } from '@base-ui/utils/fastHooks';
 import { useOnFirstRender } from '@base-ui/utils/useOnFirstRender';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { TooltipRootContext } from "./TooltipRootContext.js";
-import { useClientPoint, useDismiss, useInteractions } from "../../floating-ui-react/index.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { useImplicitActiveTrigger, useOpenStateTransitions } from "../../utils/popups/index.js";
+import { useClientPoint, useDismiss } from "../../floating-ui-react/index.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { FOCUSABLE_POPUP_PROPS, useImplicitActiveTrigger, useOpenStateTransitions, usePopupInteractionProps } from "../../utils/popups/index.js";
+import { mergeProps } from "../../merge-props/index.js";
 import { TooltipStore } from "../store/TooltipStore.js";
-import { REASONS } from "../../utils/reasons.js";
+import { REASONS } from "../../internals/reasons.js";
 
 /**
  * Groups all parts of the tooltip.
@@ -17,7 +18,7 @@ import { REASONS } from "../../utils/reasons.js";
  *
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const TooltipRoot = fastComponent(function TooltipRoot(props) {
   const {
     disabled = false,
@@ -56,23 +57,18 @@ export const TooltipRoot = fastComponent(function TooltipRoot(props) {
   const openState = store.useState('open');
   const open = !disabled && openState;
   const activeTriggerId = store.useState('activeTriggerId');
+  const mounted = store.useState('mounted');
   const payload = store.useState('payload');
   store.useSyncedValues({
     trackCursorAxis,
     disableHoverablePopup
   });
-  useIsoLayoutEffect(() => {
-    if (openState && disabled) {
-      store.setOpen(false, createChangeEventDetails(REASONS.disabled));
-    }
-  }, [openState, disabled, store]);
   store.useSyncedValue('disabled', disabled);
   useImplicitActiveTrigger(store);
   const {
     forceUnmount,
     transitionStatus
   } = useOpenStateTransitions(open, store);
-  const floatingRootContext = store.select('floatingRootContext');
   const isInstantPhase = store.useState('isInstantPhase');
   const instantType = store.useState('instantType');
   const lastOpenChangeReason = store.useState('lastOpenChangeReason');
@@ -83,6 +79,11 @@ export const TooltipRoot = fastComponent(function TooltipRoot(props) {
   // Otherwise, allow the animation to play. In particular, do not disable animations
   // during the 'ending' phase unless it's due to a sibling opening.
   const previousInstantTypeRef = React.useRef(null);
+  useIsoLayoutEffect(() => {
+    if (openState && disabled) {
+      store.setOpen(false, createChangeEventDetails(REASONS.disabled));
+    }
+  }, [openState, disabled, store]);
   useIsoLayoutEffect(() => {
     if (transitionStatus === 'ending' && lastOpenChangeReason === REASONS.none || transitionStatus !== 'ending' && isInstantPhase) {
       // Capture the current instant type so we can restore it later
@@ -105,12 +106,31 @@ export const TooltipRoot = fastComponent(function TooltipRoot(props) {
     }
   }, [store, activeTriggerId, open]);
   const handleImperativeClose = React.useCallback(() => {
-    store.setOpen(false, createTooltipEventDetails(store, REASONS.imperativeAction));
+    store.setOpen(false, createChangeEventDetails(REASONS.imperativeAction));
   }, [store]);
   React.useImperativeHandle(actionsRef, () => ({
     unmount: forceUnmount,
     close: handleImperativeClose
   }), [forceUnmount, handleImperativeClose]);
+  const shouldRenderInteractions = open || mounted || !disabled && trackCursorAxis !== 'none';
+  return /*#__PURE__*/_jsxs(TooltipRootContext.Provider, {
+    value: store,
+    children: [shouldRenderInteractions && /*#__PURE__*/_jsx(TooltipInteractions, {
+      store: store,
+      disabled: disabled,
+      trackCursorAxis: trackCursorAxis
+    }), typeof children === 'function' ? children({
+      payload
+    }) : children]
+  });
+});
+if (process.env.NODE_ENV !== "production") TooltipRoot.displayName = "TooltipRoot";
+function TooltipInteractions({
+  store,
+  disabled,
+  trackCursorAxis
+}) {
+  const floatingRootContext = store.useState('floatingRootContext');
   const dismiss = useDismiss(floatingRootContext, {
     enabled: !disabled,
     referencePress: () => store.select('closeOnClick')
@@ -119,31 +139,13 @@ export const TooltipRoot = fastComponent(function TooltipRoot(props) {
     enabled: !disabled && trackCursorAxis !== 'none',
     axis: trackCursorAxis === 'none' ? undefined : trackCursorAxis
   });
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getTriggerProps
-  } = useInteractions([dismiss, clientPoint]);
-  const activeTriggerProps = React.useMemo(() => getReferenceProps(), [getReferenceProps]);
-  const inactiveTriggerProps = React.useMemo(() => getTriggerProps(), [getTriggerProps]);
-  const popupProps = React.useMemo(() => getFloatingProps(), [getFloatingProps]);
-  store.useSyncedValues({
+  const activeTriggerProps = React.useMemo(() => mergeProps(clientPoint.reference, dismiss.reference), [clientPoint.reference, dismiss.reference]);
+  const inactiveTriggerProps = React.useMemo(() => mergeProps(clientPoint.trigger, dismiss.trigger), [clientPoint.trigger, dismiss.trigger]);
+  const popupProps = React.useMemo(() => mergeProps(FOCUSABLE_POPUP_PROPS, clientPoint.floating, dismiss.floating), [clientPoint.floating, dismiss.floating]);
+  usePopupInteractionProps(store, {
     activeTriggerProps,
     inactiveTriggerProps,
     popupProps
   });
-  return /*#__PURE__*/_jsx(TooltipRootContext.Provider, {
-    value: store,
-    children: typeof children === 'function' ? children({
-      payload
-    }) : children
-  });
-});
-if (process.env.NODE_ENV !== "production") TooltipRoot.displayName = "TooltipRoot";
-function createTooltipEventDetails(store, reason) {
-  const details = createChangeEventDetails(reason);
-  details.preventUnmountOnClose = () => {
-    store.set('preventUnmountingOnClose', true);
-  };
-  return details;
+  return null;
 }

package/esm/tooltip/store/TooltipHandle.js

@@ -1,7 +1,7 @@
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import { TooltipStore } from "./TooltipStore.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 
 /**
  * A handle to control a tooltip imperatively and to associate detached triggers with it.
@@ -43,7 +43,7 @@ export class TooltipHandle {
    * Indicates whether the tooltip is currently open.
    */
   get isOpen() {
-    return this.store.state.open;
+    return this.store.select('open');
   }
 }