@base-ui/react 1.4.1 → 1.5.0

package/toggle/Toggle.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Toggle = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useControlled = require("@base-ui/utils/useControlled");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _error = require("@base-ui/utils/error");
@@ -32,7 +31,7 @@ const Toggle = exports.Toggle = /*#__PURE__*/React.forwardRef(function Toggle(co
     disabled: disabledProp = false,
     form,
     // never participates in form validation
-    onPressedChange: onPressedChangeProp,
+    onPressedChange,
     pressed: pressedProp,
     render,
     type,
@@ -63,12 +62,6 @@ const Toggle = exports.Toggle = /*#__PURE__*/React.forwardRef(function Toggle(co
     name: 'Toggle',
     state: 'pressed'
   });
-  const onPressedChange = (0, _useStableCallback.useStableCallback)((nextPressed, eventDetails) => {
-    if (value) {
-      groupContext?.setGroupValue?.(value, nextPressed, eventDetails);
-    }
-    onPressedChangeProp?.(nextPressed, eventDetails);
-  });
   const {
     getButtonProps,
     buttonRef
@@ -86,7 +79,10 @@ const Toggle = exports.Toggle = /*#__PURE__*/React.forwardRef(function Toggle(co
     onClick(event) {
       const nextPressed = !pressed;
       const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent);
-      onPressedChange(nextPressed, details);
+      if (value) {
+        groupContext?.setGroupValue?.(value, nextPressed, details);
+      }
+      onPressedChange?.(nextPressed, details);
       if (details.isCanceled) {
         return;
       }

package/toggle-group/ToggleGroup.d.ts

@@ -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/toggle-group/ToggleGroup.js

@@ -9,6 +9,7 @@ exports.ToggleGroup = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useControlled = require("@base-ui/utils/useControlled");
+var _empty = require("@base-ui/utils/empty");
 var _useRenderElement = require("../internals/useRenderElement");
 var _CompositeRoot = require("../internals/composite/root/CompositeRoot");
 var _ToolbarRootContext = require("../toolbar/root/ToolbarRootContext");
@@ -46,17 +47,11 @@ const ToggleGroup = exports.ToggleGroup = /*#__PURE__*/React.forwardRef(function
     ...elementProps
   } = componentProps;
   const toolbarContext = (0, _ToolbarRootContext.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] = (0, _useControlled.useControlled)({
     controlled: valueProp,
-    default: defaultValue,
+    default: valueProp === undefined ? defaultValueProp ?? _empty.EMPTY_ARRAY : undefined,
     name: 'ToggleGroup',
     state: 'value'
   });
@@ -72,13 +67,11 @@ const ToggleGroup = exports.ToggleGroup = /*#__PURE__*/React.forwardRef(function
     } 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/toolbar/link/ToolbarLink.d.ts

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

package/toolbar/link/ToolbarLink.js

@@ -11,8 +11,7 @@ var _ToolbarRootContext = require("../root/ToolbarRootContext");
 var _CompositeItem = require("../../internals/composite/item/CompositeItem");
 var _jsxRuntime = require("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/tooltip/arrow/TooltipArrow.js

@@ -19,14 +19,12 @@ var _TooltipRootContext = require("../root/TooltipRootContext");
  */
 const TooltipArrow = exports.TooltipArrow = /*#__PURE__*/React.forwardRef(function TooltipArrow(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;
   const store = (0, _TooltipRootContext.useTooltipRootContext)();
-  const open = store.useState('open');
-  const instantType = store.useState('instantType');
   const {
     arrowRef,
     side,
@@ -34,6 +32,8 @@ const TooltipArrow = exports.TooltipArrow = /*#__PURE__*/React.forwardRef(functi
     arrowUncentered,
     arrowStyles
   } = (0, _TooltipPositionerContext.useTooltipPositionerContext)();
+  const open = store.useState('open');
+  const instantType = store.useState('instantType');
   const state = {
     open,
     side,

package/tooltip/popup/TooltipPopup.js

@@ -28,8 +28,8 @@ const stateAttributesMapping = {
  */
 const TooltipPopup = exports.TooltipPopup = /*#__PURE__*/React.forwardRef(function TooltipPopup(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;
@@ -43,6 +43,8 @@ const TooltipPopup = exports.TooltipPopup = /*#__PURE__*/React.forwardRef(functi
   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');
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
     open,
     ref: store.context.popupRef,
@@ -52,12 +54,11 @@ const TooltipPopup = exports.TooltipPopup = /*#__PURE__*/React.forwardRef(functi
       }
     }
   });
-  const disabled = store.useState('disabled');
-  const closeDelay = store.useState('closeDelay');
   (0, _floatingUiReact.useHoverFloatingInteraction)(floatingContext, {
     enabled: !disabled,
     closeDelay
   });
+  const setPopupElement = store.useStateSetter('popupElement');
   const state = {
     open,
     side,
@@ -67,7 +68,7 @@ const TooltipPopup = exports.TooltipPopup = /*#__PURE__*/React.forwardRef(functi
   };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
-    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
+    ref: [forwardedRef, store.context.popupRef, setPopupElement],
     props: [popupProps, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), elementProps],
     stateAttributesMapping
   });

package/tooltip/root/TooltipRoot.js

@@ -14,6 +14,7 @@ var _TooltipRootContext = require("./TooltipRootContext");
 var _floatingUiReact = require("../../floating-ui-react");
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _popups = require("../../utils/popups");
+var _mergeProps = require("../../merge-props");
 var _TooltipStore = require("../store/TooltipStore");
 var _reasons = require("../../internals/reasons");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -61,23 +62,18 @@ const TooltipRoot = exports.TooltipRoot = (0, _fastHooks.fastComponent)(function
   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
   });
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (openState && disabled) {
-      store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.disabled));
-    }
-  }, [openState, disabled, store]);
   store.useSyncedValue('disabled', disabled);
   (0, _popups.useImplicitActiveTrigger)(store);
   const {
     forceUnmount,
     transitionStatus
   } = (0, _popups.useOpenStateTransitions)(open, store);
-  const floatingRootContext = store.select('floatingRootContext');
   const isInstantPhase = store.useState('isInstantPhase');
   const instantType = store.useState('instantType');
   const lastOpenChangeReason = store.useState('lastOpenChangeReason');
@@ -88,6 +84,11 @@ const TooltipRoot = exports.TooltipRoot = (0, _fastHooks.fastComponent)(function
   // 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);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (openState && disabled) {
+      store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.disabled));
+    }
+  }, [openState, disabled, store]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (transitionStatus === 'ending' && lastOpenChangeReason === _reasons.REASONS.none || transitionStatus !== 'ending' && isInstantPhase) {
       // Capture the current instant type so we can restore it later
@@ -116,6 +117,25 @@ const TooltipRoot = exports.TooltipRoot = (0, _fastHooks.fastComponent)(function
     unmount: forceUnmount,
     close: handleImperativeClose
   }), [forceUnmount, handleImperativeClose]);
+  const shouldRenderInteractions = open || mounted || !disabled && trackCursorAxis !== 'none';
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TooltipRootContext.TooltipRootContext.Provider, {
+    value: store,
+    children: [shouldRenderInteractions && /*#__PURE__*/(0, _jsxRuntime.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 = (0, _floatingUiReact.useDismiss)(floatingRootContext, {
     enabled: !disabled,
     referencePress: () => store.select('closeOnClick')
@@ -124,24 +144,13 @@ const TooltipRoot = exports.TooltipRoot = (0, _fastHooks.fastComponent)(function
     enabled: !disabled && trackCursorAxis !== 'none',
     axis: trackCursorAxis === 'none' ? undefined : trackCursorAxis
   });
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getTriggerProps
-  } = (0, _floatingUiReact.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(() => (0, _mergeProps.mergeProps)(clientPoint.reference, dismiss.reference), [clientPoint.reference, dismiss.reference]);
+  const inactiveTriggerProps = React.useMemo(() => (0, _mergeProps.mergeProps)(clientPoint.trigger, dismiss.trigger), [clientPoint.trigger, dismiss.trigger]);
+  const popupProps = React.useMemo(() => (0, _mergeProps.mergeProps)(_popups.FOCUSABLE_POPUP_PROPS, clientPoint.floating, dismiss.floating), [clientPoint.floating, dismiss.floating]);
+  (0, _popups.usePopupInteractionProps)(store, {
     activeTriggerProps,
     inactiveTriggerProps,
     popupProps
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipRootContext.TooltipRootContext.Provider, {
-    value: store,
-    children: typeof children === 'function' ? children({
-      payload
-    }) : children
-  });
-});
-if (process.env.NODE_ENV !== "production") TooltipRoot.displayName = "TooltipRoot";
+  return null;
+}

package/tooltip/store/TooltipHandle.js

@@ -50,7 +50,7 @@ class TooltipHandle {
    * Indicates whether the tooltip is currently open.
    */
   get isOpen() {
-    return this.store.state.open;
+    return this.store.select('open');
   }
 }
 

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;
@@ -32,6 +32,8 @@ declare const selectors: {
     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;
@@ -49,6 +51,8 @@ declare const selectors: {
     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;
@@ -66,6 +70,8 @@ declare const selectors: {
     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;
@@ -83,6 +89,8 @@ declare const selectors: {
     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;
@@ -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("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -117,6 +146,8 @@ declare const selectors: {
     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;
@@ -134,6 +165,8 @@ declare const selectors: {
     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;
@@ -151,6 +184,8 @@ declare const selectors: {
     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;
@@ -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("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -185,6 +241,8 @@ declare const selectors: {
     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;
@@ -202,6 +260,8 @@ declare const selectors: {
     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;
@@ -219,6 +279,8 @@ declare const selectors: {
     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;
@@ -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("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -253,6 +336,8 @@ declare const selectors: {
     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;
@@ -270,6 +355,8 @@ declare const selectors: {
     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;
@@ -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,8 +8,7 @@ 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 _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _reasons = require("../../internals/reasons");
 var _popups = require("../../utils/popups");
 const selectors = {
@@ -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;
   }
 }