@base-ui/react 1.4.0 → 1.5.0

package/tooltip/store/TooltipStore.d.ts

@@ -18,7 +18,7 @@ export type Context = PopupStoreContext<TooltipRoot.ChangeEventDetails> & {
 };
 declare const selectors: {
   disabled: (state: State<unknown>) => boolean;
-  instantType: (state: State<unknown>) => "focus" | "delay" | "dismiss" | undefined;
+  instantType: (state: State<unknown>) => "delay" | "focus" | "dismiss" | undefined;
   isInstantPhase: (state: State<unknown>) => boolean;
   trackCursorAxis: (state: State<unknown>) => "none" | "both" | "x" | "y";
   disableHoverablePopup: (state: State<unknown>) => boolean;
@@ -30,8 +30,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -47,8 +49,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -64,8 +68,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -76,13 +82,15 @@ declare const selectors: {
     activeTriggerProps: import("../../index.js").HTMLProps;
     inactiveTriggerProps: import("../../index.js").HTMLProps;
     popupProps: import("../../index.js").HTMLProps;
-  }) => import("../../utils/useTransitionStatus.js").TransitionStatus;
+  }) => import("../../internals/useTransitionStatus.js").TransitionStatus;
   floatingRootContext: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -94,12 +102,33 @@ declare const selectors: {
     inactiveTriggerProps: import("../../index.js").HTMLProps;
     popupProps: import("../../index.js").HTMLProps;
   }) => import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore;
+  triggerCount: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => number;
   preventUnmountingOnClose: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -115,8 +144,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -132,8 +163,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -149,8 +182,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -162,12 +197,33 @@ declare const selectors: {
     inactiveTriggerProps: import("../../index.js").HTMLProps;
     popupProps: import("../../index.js").HTMLProps;
   }) => Element | null;
+  popupId: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => string | undefined;
   isTriggerActive: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -183,8 +239,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -200,8 +258,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -217,8 +277,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -230,12 +292,33 @@ declare const selectors: {
     inactiveTriggerProps: import("../../index.js").HTMLProps;
     popupProps: import("../../index.js").HTMLProps;
   }, isActive: boolean) => import("../../index.js").HTMLProps;
+  triggerPopupId: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }, triggerId: string | undefined) => string | undefined;
   popupProps: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -251,8 +334,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -268,8 +353,10 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -283,8 +370,9 @@ declare const selectors: {
   }) => HTMLElement | null;
 };
 export declare class TooltipStore<Payload> extends ReactStore<Readonly<State<Payload>>, Context, typeof selectors> {
-  constructor(initialState?: Partial<State<Payload>>);
+  constructor(initialState?: Partial<State<Payload>>, floatingId?: string | undefined, nested?: boolean);
   setOpen: (nextOpen: boolean, eventDetails: Omit<TooltipRoot.ChangeEventDetails, "preventUnmountOnClose">) => void;
+  cancelPendingOpen(event: MouseEvent | PointerEvent): void;
   static useStore<Payload>(externalStore: TooltipStore<Payload> | undefined, initialState?: Partial<State<Payload>>): TooltipStore<Payload>;
 }
 export {};

package/tooltip/store/TooltipStore.js

@@ -8,9 +8,8 @@ exports.TooltipStore = void 0;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _store = require("@base-ui/utils/store");
-var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
-var _floatingUiReact = require("../../floating-ui-react");
-var _reasons = require("../../utils/reasons");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _popups = require("../../utils/popups");
 const selectors = {
   ..._popups.popupStoreSelectors,
@@ -25,15 +24,18 @@ const selectors = {
   hasViewport: (0, _store.createSelector)(state => state.hasViewport)
 };
 class TooltipStore extends _store.ReactStore {
-  constructor(initialState) {
-    super({
+  constructor(initialState, floatingId, nested = false) {
+    const triggerElements = new _popups.PopupTriggerMap();
+    const state = {
       ...createInitialState(),
       ...initialState
-    }, {
+    };
+    state.floatingRootContext = (0, _popups.createPopupFloatingRootContext)(triggerElements, floatingId, nested);
+    super(state, {
       popupRef: /*#__PURE__*/React.createRef(),
       onOpenChange: undefined,
       onOpenChangeComplete: undefined,
-      triggerElements: new _popups.PopupTriggerMap()
+      triggerElements
     }, selectors);
   }
   setOpen = (nextOpen, eventDetails) => {
@@ -61,14 +63,7 @@ class TooltipStore extends _store.ReactStore {
       } else if (reason === _reasons.REASONS.triggerHover) {
         updatedState.instantType = undefined;
       }
-
-      // If a popup is closing, the `trigger` may be null.
-      // We want to keep the previous value so that exit animations are played and focus is returned correctly.
-      const newTriggerId = eventDetails.trigger?.id ?? null;
-      if (newTriggerId || nextOpen) {
-        updatedState.activeTriggerId = newTriggerId;
-        updatedState.activeTriggerElement = eventDetails.trigger ?? null;
-      }
+      (0, _popups.setOpenTriggerState)(updatedState, nextOpen, eventDetails.trigger);
       this.update(updatedState);
     };
     if (isHover) {
@@ -79,24 +74,16 @@ class TooltipStore extends _store.ReactStore {
       changeState();
     }
   };
-  static useStore(externalStore, initialState) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const internalStore = (0, _useRefWithInit.useRefWithInit)(() => {
-      return new TooltipStore(initialState);
-    }).current;
-    const store = externalStore ?? internalStore;
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const floatingRootContext = (0, _floatingUiReact.useSyncedFloatingRootContext)({
-      popupStore: store,
-      onOpenChange: store.setOpen
-    });
+  // Used by trigger clicks to clear a delayed hover open without reporting a public open-state change.
+  cancelPendingOpen(event) {
+    this.state.floatingRootContext.dispatchOpenChange(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerPress, event));
+  }
+  static useStore(externalStore, initialState) {
+    /* eslint-disable react-hooks/rules-of-hooks */
+    const store = (0, _popups.usePopupStore)(externalStore, (floatingId, nested) => new TooltipStore(initialState, floatingId, nested)).store;
+    /* eslint-enable react-hooks/rules-of-hooks */
 
-    // It's safe to set this here because when this code runs for the first time,
-    // nothing has had a chance to subscribe to the `store` yet.
-    // For subsequent renders, the `floatingRootContext` reference remains the same,
-    // so it's basically a no-op.
-    store.state.floatingRootContext = floatingRootContext;
     return store;
   }
 }

package/tooltip/trigger/TooltipTrigger.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 { TooltipHandle } from "../store/TooltipHandle.js";
 /**
  * An element to attach the tooltip to.

package/tooltip/trigger/TooltipTrigger.js

@@ -9,16 +9,58 @@ Object.defineProperty(exports, "__esModule", {
 exports.TooltipTrigger = void 0;
 var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
+var _dom = require("@floating-ui/utils/dom");
 var _fastHooks = require("@base-ui/utils/fastHooks");
+var _useTimeout = require("@base-ui/utils/useTimeout");
+var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _TooltipRootContext = require("../root/TooltipRootContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _popups = require("../../utils/popups");
-var _useBaseUiId = require("../../utils/useBaseUiId");
+var _useBaseUiId = require("../../internals/useBaseUiId");
 var _TooltipProviderContext = require("../provider/TooltipProviderContext");
 var _floatingUiReact = require("../../floating-ui-react");
+var _element = require("../../floating-ui-react/utils/element");
+var _event = require("../../floating-ui-react/utils/event");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _TooltipTriggerDataAttributes = require("./TooltipTriggerDataAttributes");
+var _useHoverInteractionSharedState = require("../../floating-ui-react/hooks/useHoverInteractionSharedState");
 var _constants = require("../utils/constants");
+const TOOLTIP_TRIGGER_IDENTIFIER = 'data-base-ui-tooltip-trigger';
+function getTargetElement(event) {
+  if ('composedPath' in event) {
+    const path = event.composedPath();
+    for (let i = 0; i < path.length; i += 1) {
+      const element = path[i];
+      if ((0, _dom.isElement)(element)) {
+        return element;
+      }
+    }
+  }
+  const target = event.target;
+  if ((0, _dom.isElement)(target)) {
+    return target;
+  }
+  return null;
+}
+function closestEnabledTooltipTrigger(element) {
+  let current = element;
+  while (current) {
+    if (current.hasAttribute(TOOLTIP_TRIGGER_IDENTIFIER)) {
+      return current;
+    }
+    const parentElement = current.parentElement;
+    if (parentElement) {
+      current = parentElement;
+      continue;
+    }
+    const root = current.getRootNode();
+    current = 'host' in root && (0, _dom.isElement)(root.host) ? root.host : null;
+  }
+  return null;
+}
+
 /**
  * An element to attach the tooltip to.
  * Renders a `<button>` element.
@@ -27,8 +69,9 @@ var _constants = require("../utils/constants");
  */
 const TooltipTrigger = exports.TooltipTrigger = (0, _fastHooks.fastComponentRef)(function TooltipTrigger(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     handle,
     payload,
     disabled: disabledProp,
@@ -36,7 +79,6 @@ const TooltipTrigger = exports.TooltipTrigger = (0, _fastHooks.fastComponentRef)
     closeOnClick = true,
     closeDelay,
     id: idProp,
-    style,
     ...elementProps
   } = componentProps;
   const rootContext = (0, _TooltipRootContext.useTooltipRootContext)(true);
@@ -67,29 +109,55 @@ const TooltipTrigger = exports.TooltipTrigger = (0, _fastHooks.fastComponentRef)
   } = (0, _floatingUiReact.useDelayGroup)(floatingRootContext, {
     open: isOpenedByThisTrigger
   });
+  const hoverInteraction = (0, _useHoverInteractionSharedState.useHoverInteractionSharedState)(floatingRootContext);
   store.useSyncedValue('isInstantPhase', isInstantPhase);
   const rootDisabled = store.useState('disabled');
   const disabled = disabledProp ?? rootDisabled;
+  const disabledRef = (0, _useValueAsRef.useValueAsRef)(disabled);
   const trackCursorAxis = store.useState('trackCursorAxis');
   const disableHoverablePopup = store.useState('disableHoverablePopup');
+  const isNestedTriggerHoveredRef = React.useRef(false);
+  const nestedTriggerOpenTimeout = (0, _useTimeout.useTimeout)();
+  // Local copy so it can be cleared on mouseLeave without resetting the hover hook's own pointerType.
+  const pointerTypeRef = React.useRef(undefined);
+  function getOpenDelay() {
+    const providerDelay = providerContext?.delay;
+    const groupOpenValue = typeof delayRef.current === 'object' ? delayRef.current.open : undefined;
+    let computedOpenDelay = delayWithDefault;
+    if (hasProvider) {
+      if (groupOpenValue !== 0) {
+        computedOpenDelay = delay ?? providerDelay ?? delayWithDefault;
+      } else {
+        computedOpenDelay = 0;
+      }
+    }
+    return computedOpenDelay;
+  }
+  function isEnabledNestedTriggerTarget(target) {
+    const triggerEl = triggerElementRef.current;
+    if (!triggerEl || !target) {
+      return false;
+    }
+    const nearestTrigger = closestEnabledTooltipTrigger(target);
+    return nearestTrigger !== null && nearestTrigger !== triggerEl && (0, _element.contains)(triggerEl, nearestTrigger);
+  }
+  function detectNestedTriggerHover(target) {
+    const nestedTriggerHovered = isEnabledNestedTriggerTarget(target);
+    isNestedTriggerHoveredRef.current = nestedTriggerHovered;
+    if (nestedTriggerHovered) {
+      hoverInteraction.openChangeTimeout.clear();
+      hoverInteraction.restTimeout.clear();
+      hoverInteraction.restTimeoutPending = false;
+      nestedTriggerOpenTimeout.clear();
+    }
+    return nestedTriggerHovered;
+  }
   const hoverProps = (0, _floatingUiReact.useHoverReferenceInteraction)(floatingRootContext, {
     enabled: !disabled,
     mouseOnly: true,
     move: false,
     handleClose: !disableHoverablePopup && trackCursorAxis !== 'both' ? (0, _floatingUiReact.safePolygon)() : null,
-    restMs() {
-      const providerDelay = providerContext?.delay;
-      const groupOpenValue = typeof delayRef.current === 'object' ? delayRef.current.open : undefined;
-      let computedRestMs = delayWithDefault;
-      if (hasProvider) {
-        if (groupOpenValue !== 0) {
-          computedRestMs = delay ?? providerDelay ?? delayWithDefault;
-        } else {
-          computedRestMs = 0;
-        }
-      }
-      return computedRestMs;
-    },
+    restMs: getOpenDelay,
     delay() {
       const closeValue = typeof delayRef.current === 'object' ? delayRef.current.close : undefined;
       let computedCloseDelay = closeDelayWithDefault;
@@ -102,24 +170,88 @@ const TooltipTrigger = exports.TooltipTrigger = (0, _fastHooks.fastComponentRef)
     },
     triggerElementRef,
     isActiveTrigger: isTriggerActive,
-    isClosing: () => store.select('transitionStatus') === 'ending'
+    isClosing: () => store.select('transitionStatus') === 'ending',
+    shouldOpen() {
+      return !isNestedTriggerHoveredRef.current;
+    }
   });
   const focusProps = (0, _floatingUiReact.useFocus)(floatingRootContext, {
     enabled: !disabled
   }).reference;
+  const handleNestedTriggerHover = event => {
+    const wasNestedTriggerHovered = isNestedTriggerHoveredRef.current;
+    const target = getTargetElement(event);
+    const nestedTriggerHovered = detectNestedTriggerHover(target);
+    const triggerEl = triggerElementRef.current;
+    const targetInsideTrigger = triggerEl && target && (0, _element.contains)(triggerEl, target);
+
+    // Only close hover-opened parents. Focus/click-like opens remain owned by
+    // their original interaction and should not be clobbered by nested hover.
+    if (nestedTriggerHovered && store.select('open') && store.select('lastOpenChangeReason') === _reasons.REASONS.triggerHover) {
+      store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event));
+      return;
+    }
+    if (wasNestedTriggerHovered && !nestedTriggerHovered && targetInsideTrigger && !disabledRef.current && !store.select('open') && triggerEl &&
+    // Match the hover hook's non-strict mouse fallback for mouse-only event sequences.
+    (0, _event.isMouseLikePointerType)(pointerTypeRef.current)) {
+      const open = () => {
+        if (!isNestedTriggerHoveredRef.current && !disabledRef.current && !store.select('open')) {
+          store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event, triggerEl));
+        }
+      };
+      const openDelay = getOpenDelay();
+
+      // With `move: false`, the hover hook only listens to mouseenter/mouseleave
+      // on the parent trigger. Leaving a nested child for the parent area fires
+      // no event the hook can react to, so reopen locally.
+      if (openDelay === 0) {
+        nestedTriggerOpenTimeout.clear();
+        open();
+      } else {
+        nestedTriggerOpenTimeout.start(openDelay, open);
+      }
+    }
+  };
+  const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
+  const shouldApplyRootTriggerProps = isMountedByThisTrigger || trackCursorAxis !== 'none';
   const state = {
     open: isOpenedByThisTrigger
   };
-  const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
   const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
     state,
     ref: [forwardedRef, registerTrigger, triggerElementRef],
-    props: [hoverProps, focusProps, rootTriggerProps, {
-      onPointerDown() {
+    props: [hoverProps, focusProps, shouldApplyRootTriggerProps ? rootTriggerProps : undefined, {
+      onMouseOver(event) {
+        handleNestedTriggerHover(event.nativeEvent);
+      },
+      onFocus(event) {
+        if (isEnabledNestedTriggerTarget(getTargetElement(event.nativeEvent))) {
+          event.preventBaseUIHandler();
+        }
+      },
+      onMouseLeave() {
+        isNestedTriggerHoveredRef.current = false;
+        nestedTriggerOpenTimeout.clear();
+        pointerTypeRef.current = undefined;
+      },
+      onPointerEnter(event) {
+        pointerTypeRef.current = event.pointerType;
+      },
+      onPointerDown(event) {
+        pointerTypeRef.current = event.pointerType;
         store.set('closeOnClick', closeOnClick);
+        if (closeOnClick && !store.select('open')) {
+          store.cancelPendingOpen(event.nativeEvent);
+        }
+      },
+      onClick(event) {
+        if (closeOnClick && !store.select('open')) {
+          store.cancelPendingOpen(event.nativeEvent);
+        }
       },
       id: thisTriggerId,
-      [_TooltipTriggerDataAttributes.TooltipTriggerDataAttributes.triggerDisabled]: disabled ? '' : undefined
+      [_TooltipTriggerDataAttributes.TooltipTriggerDataAttributes.triggerDisabled]: disabled ? '' : undefined,
+      [TOOLTIP_TRIGGER_IDENTIFIER]: disabled ? undefined : ''
     }, elementProps],
     stateAttributesMapping: _popupStateMapping.triggerOpenStateMapping
   });

package/tooltip/viewport/TooltipViewport.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A viewport for displaying content transitions.
- * This component is only required if one popup can be opened by multiple triggers, its content change based on the trigger
- * and switching between them is animated.
+ * This component is only required if one popup can be opened by multiple triggers, its content
+ * changes based on the trigger, and switching between them is animated.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)

package/tooltip/viewport/TooltipViewport.js

@@ -9,7 +9,7 @@ exports.TooltipViewport = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _TooltipRootContext = require("../root/TooltipRootContext");
 var _TooltipPositionerContext = require("../positioner/TooltipPositionerContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _TooltipViewportCssVars = require("./TooltipViewportCssVars");
 var _usePopupViewport = require("../../utils/usePopupViewport");
 const stateAttributesMapping = {
@@ -20,8 +20,8 @@ const stateAttributesMapping = {
 
 /**
  * A viewport for displaying content transitions.
- * This component is only required if one popup can be opened by multiple triggers, its content change based on the trigger
- * and switching between them is animated.
+ * This component is only required if one popup can be opened by multiple triggers, its content
+ * changes based on the trigger, and switching between them is animated.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)

package/tooltip/viewport/TooltipViewportDataAttributes.d.ts

@@ -11,7 +11,7 @@ export declare enum TooltipViewportDataAttributes {
    * Indicates the direction from which the popup was activated.
    * This can be used to create directional animations based on how the popup was triggered.
    * Contains space-separated values for both horizontal and vertical axes.
-   * @type {`${'left' | 'right'} {'top' | 'bottom'}`}
+   * @type {`${'left' | 'right'} ${'top' | 'bottom'}`}
    */
   activationDirection = "data-activation-direction",
   /**

package/tooltip/viewport/TooltipViewportDataAttributes.js

@@ -17,7 +17,7 @@ let TooltipViewportDataAttributes = exports.TooltipViewportDataAttributes = /*#_
    * Indicates the direction from which the popup was activated.
    * This can be used to create directional animations based on how the popup was triggered.
    * Contains space-separated values for both horizontal and vertical axes.
-   * @type {`${'left' | 'right'} {'top' | 'bottom'}`}
+   * @type {`${'left' | 'right'} ${'top' | 'bottom'}`}
    */
   TooltipViewportDataAttributes["activationDirection"] = "data-activation-direction";
   /**

package/types/index.d.ts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-export type { BaseUIChangeEventDetails, BaseUIGenericEventDetails } from "../utils/createBaseUIEventDetails.js";
+export type { BaseUIChangeEventDetails, BaseUIGenericEventDetails } from "../internals/createBaseUIEventDetails.js";
 export type HTMLProps<T = any> = React.HTMLAttributes<T> & {
   ref?: React.Ref<T> | undefined;
 };