@base-ui/react 1.4.1 → 1.5.0

package/tooltip/trigger/TooltipTrigger.js

@@ -9,7 +9,10 @@ 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("../../internals/useRenderElement");
@@ -17,8 +20,47 @@ var _popups = require("../../utils/popups");
 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

@@ -2,8 +2,8 @@ import * as React from 'react';
 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

@@ -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/unstable-use-media-query/index.js

@@ -12,7 +12,7 @@ function useMediaQuery(query, options) {
   // Wait for jsdom to support the match media feature.
   // All the browsers Base UI support have this built-in.
   // This defensive check is here for simplicity.
-  // Most of the time, the match media logic isn't central to people tests.
+  // Most of the time, the match media logic isn't central to people's tests.
   const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
   query = query.replace(/^@media( ?)/m, '');
   const {

package/utils/popups/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./inlineRect.js";
 export * from "./popupStoreUtils.js";
 export * from "./popupTriggerMap.js";
 export * from "./store.js";

package/utils/popups/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _inlineRect = require("./inlineRect");
+Object.keys(_inlineRect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _inlineRect[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _inlineRect[key];
+    }
+  });
+});
 var _popupStoreUtils = require("./popupStoreUtils");
 Object.keys(_popupStoreUtils).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/utils/popups/inlineRect.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { Middleware } from '@floating-ui/react-dom';
+export interface InlineRectCoords {
+  /** The x position in viewport coordinates. */
+  x: number;
+  /** The y position in viewport coordinates. */
+  y: number;
+  /** The line index under the pointer when coordinates were captured. */
+  lineIndex?: number | undefined;
+  /** The trigger element whose rects produced these coordinates. */
+  element: Element;
+}
+export declare function getInlineRectTriggerProps(coordsRef: React.RefObject<InlineRectCoords | undefined>, isOpen: boolean): Pick<React.HTMLAttributes<Element>, 'onFocus' | 'onMouseEnter' | 'onMouseMove'>;
+export declare function updateInlineRectCoords(coordsRef: React.RefObject<InlineRectCoords | undefined>, element: Element, clientX: number, clientY: number): InlineRectCoords | undefined;
+export declare function createInlineMiddleware(coordsRef: React.RefObject<InlineRectCoords | undefined>): Middleware;

package/utils/popups/inlineRect.js

@@ -0,0 +1,198 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createInlineMiddleware = createInlineMiddleware;
+exports.getInlineRectTriggerProps = getInlineRectTriggerProps;
+exports.updateInlineRectCoords = updateInlineRectCoords;
+var _dom = require("@floating-ui/utils/dom");
+// Floating UI ships an `inline()` middleware. This local version mirrors its line-rect
+// selection while adding trigger identity checks, delayed-open hit-line reuse, and
+// improved left/right edge grouping for Preview Card's reusable trigger model.
+
+function createRect(left, top, right, bottom) {
+  return {
+    left,
+    top,
+    right,
+    bottom,
+    x: left,
+    y: top,
+    width: right - left,
+    height: bottom - top
+  };
+}
+function copyRect(rect) {
+  return {
+    left: rect.left,
+    top: rect.top,
+    right: rect.right,
+    bottom: rect.bottom,
+    width: rect.width,
+    height: rect.height
+  };
+}
+function getLineRects(rects) {
+  const lines = [];
+  let previousRect;
+  let left = Number.POSITIVE_INFINITY;
+  let top = Number.POSITIVE_INFINITY;
+  let right = Number.NEGATIVE_INFINITY;
+  let bottom = Number.NEGATIVE_INFINITY;
+  for (const rect of Array.from(rects).sort((a, b) => a.top - b.top)) {
+    left = Math.min(left, rect.left);
+    top = Math.min(top, rect.top);
+    right = Math.max(right, rect.right);
+    bottom = Math.max(bottom, rect.bottom);
+    if (!previousRect || rect.top - previousRect.top > previousRect.height / 2) {
+      lines.push(copyRect(rect));
+    } else {
+      const line = lines[lines.length - 1];
+      line.left = Math.min(line.left, rect.left);
+      line.right = Math.max(line.right, rect.right);
+      line.bottom = Math.max(line.bottom, rect.bottom);
+      line.width = line.right - line.left;
+      line.height = line.bottom - line.top;
+    }
+    previousRect = rect;
+  }
+  return {
+    lines,
+    fallback: createRect(left, top, right, bottom)
+  };
+}
+function findLineIndex(lines, x, y) {
+  return lines.findIndex(lineRect => x > lineRect.left - 2 && x < lineRect.right + 2 && y > lineRect.top - 2 && y < lineRect.bottom + 2);
+}
+function createClientRect(rect) {
+  return createRect(rect.left, rect.top, rect.right, rect.bottom);
+}
+function getInlineRectCoords(element, clientX, clientY) {
+  const {
+    lines
+  } = getLineRects(element.getClientRects());
+  if (lines.length < 2) {
+    return undefined;
+  }
+  const lineIndex = findLineIndex(lines, clientX, clientY);
+  return {
+    x: clientX,
+    y: clientY,
+    lineIndex: lineIndex === -1 ? undefined : lineIndex,
+    element
+  };
+}
+function getInlineReferenceRect(reference, placement, coords) {
+  const {
+    lines,
+    fallback
+  } = getLineRects(reference.getClientRects());
+  if (lines.length < 2) {
+    return null;
+  }
+  const x = coords?.x;
+  const y = coords?.y;
+  const side = placement[0];
+  if (coords?.lineIndex != null && lines[coords.lineIndex]) {
+    return createClientRect(lines[coords.lineIndex]);
+  }
+  if (x != null && y != null) {
+    const lineIndex = findLineIndex(lines, x, y);
+    if (lineIndex !== -1) {
+      return createClientRect(lines[lineIndex]);
+    }
+  }
+  if (lines.length === 2 && lines[0].left > lines[1].right && x != null && y != null) {
+    return fallback;
+  }
+  if (side === 't' || side === 'b') {
+    const firstRect = lines[0];
+    const lastRect = lines[lines.length - 1];
+    const targetRect = side === 't' ? firstRect : lastRect;
+    return createRect(targetRect.left, firstRect.top, targetRect.right, lastRect.bottom);
+  }
+  const isLeft = side === 'l';
+  let left = lines[0].left;
+  let right = lines[0].right;
+  let edge = isLeft ? Number.POSITIVE_INFINITY : Number.NEGATIVE_INFINITY;
+  let targetFirstRect = lines[0];
+  let targetLastRect = lines[0];
+  for (const rect of lines) {
+    left = Math.min(left, rect.left);
+    right = Math.max(right, rect.right);
+    const nextEdge = isLeft ? rect.left : rect.right;
+    if (isLeft && nextEdge < edge || !isLeft && nextEdge > edge) {
+      edge = nextEdge;
+      targetFirstRect = rect;
+      targetLastRect = rect;
+    } else if (nextEdge === edge) {
+      targetLastRect = rect;
+    }
+  }
+  return createRect(left, targetFirstRect.top, right, targetLastRect.bottom);
+}
+function getContextElement(reference) {
+  if ('contextElement' in reference && reference.contextElement) {
+    return reference.contextElement;
+  }
+  return (0, _dom.isElement)(reference) ? reference : undefined;
+}
+function getInlineRectTriggerProps(coordsRef, isOpen) {
+  function updateCoords(event) {
+    updateInlineRectCoords(coordsRef, event.currentTarget, event.clientX, event.clientY);
+  }
+  function updateCoordsOnMove(event) {
+    if (!isOpen) {
+      updateCoords(event);
+    }
+  }
+  return {
+    onFocus() {
+      coordsRef.current = undefined;
+    },
+    onMouseEnter: updateCoords,
+    onMouseMove: updateCoordsOnMove
+  };
+}
+function updateInlineRectCoords(coordsRef, element, clientX, clientY) {
+  const nextCoords = getInlineRectCoords(element, clientX, clientY);
+  coordsRef.current = nextCoords;
+  return nextCoords;
+}
+function createInlineMiddleware(coordsRef) {
+  return {
+    name: 'inline',
+    async fn(state) {
+      const reference = state.elements.reference;
+      if (typeof reference?.getClientRects !== 'function') {
+        return {};
+      }
+      const contextElement = getContextElement(reference);
+      const coords = coordsRef.current;
+      const currentCoords = coords?.element === reference || coords?.element === contextElement ? coords : undefined;
+      const rect = getInlineReferenceRect(reference, state.placement, currentCoords);
+      if (!rect || typeof state.platform.getElementRects !== 'function') {
+        return {};
+      }
+      const resetRects = await state.platform.getElementRects({
+        reference: {
+          contextElement,
+          getBoundingClientRect() {
+            return rect;
+          }
+        },
+        floating: state.elements.floating,
+        strategy: state.strategy
+      });
+      if (state.rects.reference.x === resetRects.reference.x && state.rects.reference.y === resetRects.reference.y && state.rects.reference.width === resetRects.reference.width && state.rects.reference.height === resetRects.reference.height) {
+        return {};
+      }
+      return {
+        reset: {
+          rects: resetRects
+        }
+      };
+    }
+  };
+}

package/utils/popups/popupStoreUtils.d.ts

@@ -1,21 +1,35 @@
 import * as React from 'react';
 import { ReactStore } from '@base-ui/utils/store';
+import type { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
+import type { BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { PopupStoreState, PopupStoreContext, popupStoreSelectors, PopupStoreSelectors } from "./store.js";
+export declare const FOCUSABLE_POPUP_PROPS: {
+  tabIndex: number;
+  "data-base-ui-focusable": string;
+};
+type PopupStoreWithOpen<State extends PopupStoreState<unknown>, SetOpenEventDetails extends BaseUIChangeEventDetails<string>> = ReactStore<State, PopupStoreContext<never>, PopupStoreSelectors> & {
+  setOpen(open: boolean, eventDetails: SetOpenEventDetails): void;
+};
+export declare function usePopupStore<State extends PopupStoreState<unknown>, SetOpenEventDetails extends BaseUIChangeEventDetails<string>, Store extends PopupStoreWithOpen<State, SetOpenEventDetails>>(externalStore: Store | undefined, createStore: (floatingId: string | undefined, nested: boolean) => Store, treatPopupAsFloatingElement?: boolean): {
+  store: Store;
+  internalStore: Store | null;
+};
 /**
  * Returns a callback ref that registers/unregisters the trigger element in the store.
  *
  * @param store The Store instance where the trigger should be registered.
  */
-export declare function useTriggerRegistration<State extends PopupStoreState<any>>(id: string | undefined, store: ReactStore<State, PopupStoreContext<any>, PopupStoreSelectors>): (element: Element | null) => void;
+export declare function useTriggerRegistration<State extends PopupStoreState<unknown>>(id: string | undefined, store: ReactStore<State, PopupStoreContext<never>, PopupStoreSelectors>): (element: Element | null) => void;
+export declare function setOpenTriggerState(state: Partial<PopupStoreState<unknown>>, open: boolean, trigger: Element | undefined): void;
 /**
  * Sets up trigger data forwarding to the store.
  *
  * @param triggerId Id of the trigger.
- * @param triggerElement The trigger DOM element.
+ * @param triggerElementRef Ref for the trigger DOM element.
  * @param store The Store instance managing the popup state.
  * @param stateUpdates An object with state updates to apply when the trigger is active.
  */
-export declare function useTriggerDataForwarding<State extends PopupStoreState<any>>(triggerId: string | undefined, triggerElementRef: React.RefObject<Element | null>, store: ReactStore<State, PopupStoreContext<any>, typeof popupStoreSelectors>, stateUpdates: Omit<Partial<State>, 'activeTriggerId' | 'activeTriggerElement'>): {
+export declare function useTriggerDataForwarding<State extends PopupStoreState<unknown>>(triggerId: string | undefined, triggerElementRef: React.RefObject<Element | null>, store: ReactStore<State, PopupStoreContext<never>, typeof popupStoreSelectors>, stateUpdates: Omit<Partial<State>, 'activeTriggerId' | 'activeTriggerElement'>): {
   registerTrigger: (element: Element | null) => void;
   isMountedByThisTrigger: boolean;
 };
@@ -24,17 +38,16 @@ export type PayloadChildRenderFunction<Payload> = (arg: {
 }) => React.ReactNode;
 /**
  * Ensures that when there's only one trigger element registered, it is set as the active trigger.
- * This allows controlled popups to work correctly without an explicit triggerId, maintaining compatibility
- * with the contained triggers.
+ * This keeps triggerCount reactive while open and allows controlled popups to work correctly without
+ * an explicit triggerId, maintaining compatibility with contained triggers.
  *
  * This should be called on the Root part.
  *
- * @param open Whether the popup is open.
  * @param store The Store instance managing the popup state.
  */
-export declare function useImplicitActiveTrigger<State extends PopupStoreState<any>>(store: ReactStore<State, PopupStoreContext<any>, typeof popupStoreSelectors>): void;
+export declare function useImplicitActiveTrigger<State extends PopupStoreState<unknown>>(store: ReactStore<State, PopupStoreContext<never>, typeof popupStoreSelectors>): void;
 /**
- * Mangages the mounted state of the popup.
+ * Manages the mounted state of the popup.
  * Sets up the transition status listeners and handles unmounting when needed.
  * Updates the `mounted` and `transitionStatus` states in the store.
  *
@@ -44,7 +57,12 @@ export declare function useImplicitActiveTrigger<State extends PopupStoreState<a
  *
  * @returns A function to forcibly unmount the popup.
  */
-export declare function useOpenStateTransitions<State extends PopupStoreState<any>>(open: boolean, store: ReactStore<State, PopupStoreContext<any>, typeof popupStoreSelectors>, onUnmount?: () => void): {
+export declare function useOpenStateTransitions<State extends PopupStoreState<unknown>>(open: boolean, store: ReactStore<State, PopupStoreContext<never>, typeof popupStoreSelectors>, onUnmount?: () => void): {
   forceUnmount: () => void;
   transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
-};
+};
+export declare function usePopupInteractionProps<State extends PopupStoreState<unknown>>(store: ReactStore<State, PopupStoreContext<never>, typeof popupStoreSelectors>, statePart: Partial<State> & Pick<State, 'activeTriggerProps' | 'inactiveTriggerProps' | 'popupProps'>): void;
+export declare function usePopupRootSync<State extends PopupStoreState<unknown> & {
+  openMethod: InteractionType | null;
+}>(store: ReactStore<State, PopupStoreContext<never>, typeof popupStoreSelectors>, open: boolean): void;
+export {};