@base-ui/react 1.2.0 → 1.4.0

package/floating-ui-react/components/FloatingRootStore.d.ts

@@ -3,8 +3,10 @@ import { ReactStore } from '@base-ui/utils/store';
 import type { FloatingEvents, ContextData, ReferenceType } from "../types.js";
 import { type BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { type PopupTriggerMap } from "../../utils/popups/index.js";
+import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
 export interface FloatingRootState {
   open: boolean;
+  transitionStatus: TransitionStatus | undefined;
   domReferenceElement: Element | null;
   referenceElement: ReferenceType | null;
   floatingElement: HTMLElement | null;
@@ -19,11 +21,11 @@ export interface FloatingRootStoreContext {
   readonly dataRef: React.RefObject<ContextData>;
   readonly events: FloatingEvents;
   nested: boolean;
-  noEmit: boolean;
   readonly triggerElements: PopupTriggerMap;
 }
 declare const selectors: {
   open: (state: FloatingRootState) => boolean;
+  transitionStatus: (state: FloatingRootState) => TransitionStatus;
   domReferenceElement: (state: FloatingRootState) => Element | null;
   referenceElement: (state: FloatingRootState) => ReferenceType | null;
   floatingElement: (state: FloatingRootState) => HTMLElement | null;
@@ -31,16 +33,30 @@ declare const selectors: {
 };
 interface FloatingRootStoreOptions {
   open: boolean;
+  transitionStatus: TransitionStatus | undefined;
   referenceElement: ReferenceType | null;
   floatingElement: HTMLElement | null;
   triggerElements: PopupTriggerMap;
   floatingId: string | undefined;
+  /**
+   * When true, `setOpen` only forwards to `onOpenChange`.
+   * The popup store owns `dispatchOpenChange(...)` in this mode.
+   */
+  syncOnly: boolean;
   nested: boolean;
-  noEmit: boolean;
   onOpenChange: ((open: boolean, eventDetails: BaseUIChangeEventDetails<string>) => void) | undefined;
 }
 export declare class FloatingRootStore extends ReactStore<Readonly<FloatingRootState>, FloatingRootStoreContext, typeof selectors> {
+  private readonly syncOnly;
   constructor(options: FloatingRootStoreOptions);
+  /**
+   * Syncs the event used by hover logic to distinguish hover-open from click-like interaction.
+   */
+  syncOpenEvent: (newOpen: boolean, event: Event | undefined) => void;
+  /**
+   * Runs the root-owned side effects for an open state change.
+   */
+  dispatchOpenChange: (newOpen: boolean, eventDetails: BaseUIChangeEventDetails<string>) => void;
   /**
    * Emits the `openchange` event through the internal event emitter and calls the `onOpenChange` handler with the provided arguments.
    *

package/floating-ui-react/components/FloatingRootStore.js

@@ -9,6 +9,7 @@ var _createEventEmitter = require("../utils/createEventEmitter");
 var _utils = require("../utils");
 const selectors = {
   open: (0, _store.createSelector)(state => state.open),
+  transitionStatus: (0, _store.createSelector)(state => state.transitionStatus),
   domReferenceElement: (0, _store.createSelector)(state => state.domReferenceElement),
   referenceElement: (0, _store.createSelector)(state => state.positionReference ?? state.referenceElement),
   floatingElement: (0, _store.createSelector)(state => state.floatingElement),
@@ -17,8 +18,8 @@ const selectors = {
 class FloatingRootStore extends _store.ReactStore {
   constructor(options) {
     const {
+      syncOnly,
       nested,
-      noEmit,
       onOpenChange,
       triggerElements,
       ...initialState
@@ -34,11 +35,38 @@ class FloatingRootStore extends _store.ReactStore {
       },
       events: (0, _createEventEmitter.createEventEmitter)(),
       nested,
-      noEmit,
       triggerElements
     }, selectors);
+    this.syncOnly = syncOnly;
   }
 
+  /**
+   * Syncs the event used by hover logic to distinguish hover-open from click-like interaction.
+   */
+  syncOpenEvent = (newOpen, event) => {
+    if (!newOpen || !this.state.open ||
+    // Prevent a pending hover-open from overwriting a click-open event, while allowing
+    // click events to upgrade a hover-open.
+    event != null && (0, _utils.isClickLikeEvent)(event)) {
+      this.context.dataRef.current.openEvent = newOpen ? event : undefined;
+    }
+  };
+
+  /**
+   * Runs the root-owned side effects for an open state change.
+   */
+  dispatchOpenChange = (newOpen, eventDetails) => {
+    this.syncOpenEvent(newOpen, eventDetails.event);
+    const details = {
+      open: newOpen,
+      reason: eventDetails.reason,
+      nativeEvent: eventDetails.event,
+      nested: this.context.nested,
+      triggerElement: eventDetails.trigger
+    };
+    this.context.events.emit('openchange', details);
+  };
+
   /**
    * Emits the `openchange` event through the internal event emitter and calls the `onOpenChange` handler with the provided arguments.
    *
@@ -46,22 +74,11 @@ class FloatingRootStore extends _store.ReactStore {
    * @param eventDetails Details about the event that triggered the open state change.
    */
   setOpen = (newOpen, eventDetails) => {
-    if (!newOpen || !this.state.open ||
-    // Prevent a pending hover-open from overwriting a click-open event, while allowing
-    // click events to upgrade a hover-open.
-    (0, _utils.isClickLikeEvent)(eventDetails.event)) {
-      this.context.dataRef.current.openEvent = newOpen ? eventDetails.event : undefined;
-    }
-    if (!this.context.noEmit) {
-      const details = {
-        open: newOpen,
-        reason: eventDetails.reason,
-        nativeEvent: eventDetails.event,
-        nested: this.context.nested,
-        triggerElement: eventDetails.trigger
-      };
-      this.context.events.emit('openchange', details);
+    if (this.syncOnly) {
+      this.context.onOpenChange?.(newOpen, eventDetails);
+      return;
     }
+    this.dispatchOpenChange(newOpen, eventDetails);
     this.context.onOpenChange?.(newOpen, eventDetails);
   };
 }

package/floating-ui-react/hooks/useClick.d.ts

@@ -12,7 +12,7 @@ export interface UseClickProps {
    * Keyboard clicks work as normal.
    * @default 'click'
    */
-  event?: ('click' | 'mousedown' | 'mousedown-only') | undefined;
+  event?: 'click' | 'mousedown' | 'mousedown-only' | undefined;
   /**
    * Whether to toggle the open state with repeated clicks.
    * @default true
@@ -40,7 +40,7 @@ export interface UseClickProps {
    * The reason for the click.
    * @default REASONS.triggerPress
    */
-  reason?: (typeof REASONS.triggerPress | typeof REASONS.inputPress) | undefined;
+  reason?: typeof REASONS.triggerPress | typeof REASONS.inputPress | undefined;
 }
 /**
  * Opens or closes the floating element when clicking the reference element.

package/floating-ui-react/hooks/useClick.js

@@ -10,7 +10,8 @@ var React = _interopRequireWildcard(require("react"));
 var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _constants = require("../../utils/constants");
-var _utils = require("../utils");
+var _element = require("../utils/element");
+var _event = require("../utils/event");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 /**
@@ -43,7 +44,7 @@ function useClick(context, props = {}) {
 
       // Ignore all buttons except for the "main" button.
       // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
-      if (event.button !== 0 || eventOption === 'click' || (0, _utils.isMouseLikePointerType)(pointerType, true) && ignoreMouse) {
+      if (event.button !== 0 || eventOption === 'click' || (0, _event.isMouseLikePointerType)(pointerType, true) && ignoreMouse) {
         return;
       }
       const openEvent = dataRef.current.openEvent;
@@ -53,8 +54,9 @@ function useClick(context, props = {}) {
 
       // Animations sometimes won't run on a typeable element if using a rAF.
       // Focus is always set on these elements. For touch, we may delay opening.
-      if ((0, _utils.isTypeableElement)(nativeEvent.target)) {
-        const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(reason, nativeEvent, nativeEvent.target);
+      const target = (0, _element.getTarget)(nativeEvent);
+      if ((0, _element.isTypeableElement)(target)) {
+        const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(reason, nativeEvent, target);
         if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
           touchOpenTimeout.start(touchOpenDelay, () => {
             store.setOpen(true, details);
@@ -91,13 +93,13 @@ function useClick(context, props = {}) {
         pointerTypeRef.current = undefined;
         return;
       }
-      if ((0, _utils.isMouseLikePointerType)(pointerType, true) && ignoreMouse) {
+      if ((0, _event.isMouseLikePointerType)(pointerType, true) && ignoreMouse) {
         return;
       }
       const open = store.select('open');
       const openEvent = dataRef.current.openEvent;
       const hasClickedOnInactiveTrigger = store.select('domReferenceElement') !== event.currentTarget;
-      const nextOpen = open && hasClickedOnInactiveTrigger || !(open && toggle && (openEvent && stickIfOpen ? (0, _utils.isClickLikeEvent)(openEvent) : true));
+      const nextOpen = open && hasClickedOnInactiveTrigger || !(open && toggle && (openEvent && stickIfOpen ? (0, _event.isClickLikeEvent)(openEvent) : true));
       const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(reason, event.nativeEvent, event.currentTarget);
       if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
         touchOpenTimeout.start(touchOpenDelay, () => {

package/floating-ui-react/hooks/useClientPoint.d.ts

@@ -12,7 +12,7 @@ export interface UseClientPointProps {
    * floating element is also interactive.
    * @default 'both'
    */
-  axis?: ('x' | 'y' | 'both') | undefined;
+  axis?: 'x' | 'y' | 'both' | undefined;
 }
 /**
  * Positions the floating element relative to a client point (in the viewport),

package/floating-ui-react/hooks/useClientPoint.js

@@ -8,8 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.useClientPoint = useClientPoint;
 var React = _interopRequireWildcard(require("react"));
 var _dom = require("@floating-ui/utils/dom");
+var _addEventListener = require("@base-ui/utils/addEventListener");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _utils = require("../utils");
+var _element = require("../utils/element");
+var _event = require("../utils/event");
 function createVirtualElement(domElement, data) {
   let offsetX = null;
   let offsetY = null;
@@ -119,28 +121,27 @@ function useClientPoint(context, props = {}) {
   // mouse even if the floating element is transitioning out. On touch
   // devices, this is undesirable because the floating element will move to
   // the dismissal touch point.
-  const openCheck = (0, _utils.isMouseLikePointerType)(pointerType) ? floating : open;
+  const openCheck = (0, _event.isMouseLikePointerType)(pointerType) ? floating : open;
   const addListener = React.useCallback(() => {
     if (!openCheck || !enabled) {
       return undefined;
     }
     const win = (0, _dom.getWindow)(floating);
     function handleMouseMove(event) {
-      const target = (0, _utils.getTarget)(event);
-      if (!(0, _utils.contains)(floating, target)) {
+      const target = (0, _element.getTarget)(event);
+      if (!(0, _element.contains)(floating, target)) {
         setReference(event.clientX, event.clientY);
       } else {
-        win.removeEventListener('mousemove', handleMouseMove);
+        cleanupListenerRef.current?.();
         cleanupListenerRef.current = null;
       }
     }
     if (!dataRef.current.openEvent || isMouseBasedEvent(dataRef.current.openEvent)) {
-      win.addEventListener('mousemove', handleMouseMove);
       const cleanup = () => {
-        win.removeEventListener('mousemove', handleMouseMove);
+        cleanupListenerRef.current?.();
         cleanupListenerRef.current = null;
       };
-      cleanupListenerRef.current = cleanup;
+      cleanupListenerRef.current = (0, _addEventListener.addEventListener)(win, 'mousemove', handleMouseMove);
       return cleanup;
     }
     store.set('positionReference', domReference);

package/floating-ui-react/hooks/useDismiss.d.ts

@@ -24,9 +24,11 @@ export interface UseDismissProps {
    * Whether to dismiss the floating element upon pressing the reference
    * element. You likely want to ensure the `move` option in the `useHover()`
    * Hook has been disabled when this is in use.
+   *
+   * A lazy getter invoked when handling reference press events.
    * @default false
    */
-  referencePress?: boolean | undefined;
+  referencePress?: (() => boolean) | undefined;
   /**
    * The type of event to use to determine a "press".
    * - `down` is `pointerdown` on mouse input, but special iOS-like touch handling on touch input.
@@ -47,33 +49,27 @@ export interface UseDismissProps {
    * ```
    * @default true
    */
-  outsidePress?: (boolean | ((event: MouseEvent | TouchEvent) => boolean)) | undefined;
+  outsidePress?: boolean | ((event: MouseEvent | TouchEvent) => boolean) | undefined;
   /**
    * The type of event to use to determine an outside "press".
    * - `intentional` requires the user to click outside intentionally, firing on `pointerup` for mouse, and requiring minimal `touchmove`s for touch.
    * - `sloppy` fires on `pointerdown` for mouse, while for touch it fires on `touchend` (within 1 second) or while scrolling away after `touchstart`.
    */
-  outsidePressEvent?: (PressType | {
+  outsidePressEvent?: PressType | {
     mouse: PressType;
     touch: PressType;
   } | (() => PressType | {
     mouse: PressType;
     touch: PressType;
-  })) | undefined;
-  /**
-   * Whether to dismiss the floating element upon scrolling an overflow
-   * ancestor.
-   * @default false
-   */
-  ancestorScroll?: boolean | undefined;
+  }) | undefined;
   /**
    * Determines whether event listeners bubble upwards through a tree of
    * floating elements.
    */
-  bubbles?: (boolean | {
+  bubbles?: boolean | {
     escapeKey?: boolean | undefined;
     outsidePress?: boolean | undefined;
-  }) | undefined;
+  } | undefined;
   /**
    * External FlatingTree to use when the one provided by context can't be used.
    */