@base-ui/react 1.2.0 → 1.3.0

package/esm/utils/useAnchorPositioning.d.ts

@@ -19,50 +19,65 @@ export type OffsetFunction = (data: {
 interface SideFlipMode {
   /**
    * How to avoid collisions on the side axis.
+   * - `'flip'`: If there is not enough space, place the popup on the opposite side.
+   * - `'none'`: Keep the preferred side even if it overflows.
    */
-  side?: ('flip' | 'none') | undefined;
+  side?: 'flip' | 'none' | undefined;
   /**
    * How to avoid collisions on the align axis.
+   * - `'flip'`: If there is not enough space, swap `'start'` and `'end'` alignment.
+   * - `'shift'`: Keep the alignment and shift the popup to fit within the boundary.
+   * - `'none'`: Keep the preferred alignment even if it overflows.
    */
-  align?: ('flip' | 'shift' | 'none') | undefined;
+  align?: 'flip' | 'shift' | 'none' | undefined;
   /**
    * If both sides on the preferred axis do not fit, determines whether to fallback
    * to a side on the perpendicular axis and which logical side to prefer.
+   * - `'start'`: Prefer the logical start side on the perpendicular axis.
+   * - `'end'`: Prefer the logical end side on the perpendicular axis.
+   * - `'none'`: Do not fallback to the perpendicular axis.
    */
-  fallbackAxisSide?: ('start' | 'end' | 'none') | undefined;
+  fallbackAxisSide?: 'start' | 'end' | 'none' | undefined;
 }
 interface SideShiftMode {
   /**
    * How to avoid collisions on the side axis.
+   * - `'shift'`: Keep the preferred side and shift the popup to fit within the boundary.
+   * - `'none'`: Keep the preferred side even if it overflows.
    */
-  side?: ('shift' | 'none') | undefined;
+  side?: 'shift' | 'none' | undefined;
   /**
    * How to avoid collisions on the align axis.
+   * - `'shift'`: Keep the alignment and shift the popup to fit within the boundary.
+   * - `'none'`: Keep the preferred alignment even if it overflows.
    */
-  align?: ('shift' | 'none') | undefined;
+  align?: 'shift' | 'none' | undefined;
   /**
    * If both sides on the preferred axis do not fit, determines whether to fallback
    * to a side on the perpendicular axis and which logical side to prefer.
+   * - `'start'`: Prefer the logical start side on the perpendicular axis.
+   * - `'end'`: Prefer the logical end side on the perpendicular axis.
+   * - `'none'`: Do not fallback to the perpendicular axis.
    */
-  fallbackAxisSide?: ('start' | 'end' | 'none') | undefined;
+  fallbackAxisSide?: 'start' | 'end' | 'none' | undefined;
 }
 export type CollisionAvoidance = SideFlipMode | SideShiftMode;
 /**
  * Provides standardized anchor positioning behavior for floating elements. Wraps Floating UI's
  * `useFloating` hook.
  */
-export declare function useAnchorPositioning(params: useAnchorPositioning.Parameters): useAnchorPositioning.ReturnValue;
+export declare function useAnchorPositioning(params: UseAnchorPositioningParameters): UseAnchorPositioningReturnValue;
 export interface UseAnchorPositioningSharedParameters {
   /**
    * An element to position the popup against.
    * By default, the popup will be positioned against the trigger.
    */
-  anchor?: (Element | null | VirtualElement | React.RefObject<Element | null> | (() => Element | VirtualElement | null)) | undefined;
+  anchor?: Element | null | VirtualElement | React.RefObject<Element | null> | (() => Element | VirtualElement | null) | undefined;
   /**
    * Determines which CSS `position` property to use.
    * @default 'absolute'
    */
-  positionMethod?: ('absolute' | 'fixed') | undefined;
+  positionMethod?: 'absolute' | 'fixed' | undefined;
   /**
    * Which side of the anchor element to align the popup against.
    * May automatically change to avoid collisions.
@@ -93,7 +108,7 @@ export interface UseAnchorPositioningSharedParameters {
    *
    * @default 0
    */
-  sideOffset?: (number | OffsetFunction) | undefined;
+  sideOffset?: number | OffsetFunction | undefined;
   /**
    * How to align the popup relative to the specified side.
    * @default 'center'
@@ -123,7 +138,7 @@ export interface UseAnchorPositioningSharedParameters {
    *
    * @default 0
    */
-  alignOffset?: (number | OffsetFunction) | undefined;
+  alignOffset?: number | OffsetFunction | undefined;
   /**
    * An element or a rectangle that delimits the area that the popup is confined to.
    * @default 'clipping-ancestors'
@@ -155,6 +170,30 @@ export interface UseAnchorPositioningSharedParameters {
   /**
    * Determines how to handle collisions when positioning the popup.
    *
+   * `side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):
+   * - `'flip'`: keep the requested side when it fits; otherwise try the opposite side
+   *   (`top` and `bottom`, or `left` and `right`).
+   * - `'shift'`: never change side; keep the requested side and move the popup within
+   *   the clipping boundary so it stays visible.
+   * - `'none'`: do not correct side-axis overflow.
+   *
+   * `align` controls overflow on the alignment axis (`start`/`center`/`end`):
+   * - `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.
+   * - `'shift'`: keep side and requested alignment, then nudge the popup along the
+   *   alignment axis to fit.
+   * - `'none'`: do not correct alignment-axis overflow.
+   *
+   * `fallbackAxisSide` controls fallback behavior on the perpendicular axis when the
+   * preferred axis cannot fit:
+   * - `'start'`: allow perpendicular fallback and try the logical start side first
+   *   (`top` before `bottom`, or `left` before `right` in LTR).
+   * - `'end'`: allow perpendicular fallback and try the logical end side first
+   *   (`bottom` before `top`, or `right` before `left` in LTR).
+   * - `'none'`: do not fallback to the perpendicular axis.
+   *
+   * When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.
+   * If `align` is omitted, it defaults to `'flip'`.
+   *
    * @example
    * ```jsx
    * <Positioner
@@ -169,9 +208,9 @@ export interface UseAnchorPositioningSharedParameters {
    */
   collisionAvoidance?: CollisionAvoidance | undefined;
 }
-export interface UseAnchorPositioningParameters extends useAnchorPositioning.SharedParameters {
+export interface UseAnchorPositioningParameters extends UseAnchorPositioningSharedParameters {
   keepMounted?: boolean | undefined;
-  trackCursorAxis?: ('none' | 'x' | 'y' | 'both') | undefined;
+  trackCursorAxis?: 'none' | 'x' | 'y' | 'both' | undefined;
   floatingRootContext?: FloatingRootContext | undefined;
   mounted: boolean;
   disableAnchorTracking: boolean;
@@ -196,9 +235,5 @@ export interface UseAnchorPositioningReturnValue {
   isPositioned: boolean;
   update: () => void;
 }
-export declare namespace useAnchorPositioning {
-  type SharedParameters = UseAnchorPositioningSharedParameters;
-  type Parameters = UseAnchorPositioningParameters;
-  type ReturnValue = UseAnchorPositioningReturnValue;
-}
+export interface UseAnchorPositioningState {}
 export {};

package/esm/utils/useAnchorPositioning.js

@@ -202,17 +202,26 @@ export function useAnchorPositioning(params) {
       elements: {
         floating
       },
-      rects: {
-        reference
-      },
       availableWidth,
-      availableHeight
+      availableHeight,
+      rects
     }) {
       const floatingStyle = floating.style;
       floatingStyle.setProperty('--available-width', `${availableWidth}px`);
       floatingStyle.setProperty('--available-height', `${availableHeight}px`);
-      floatingStyle.setProperty('--anchor-width', `${reference.width}px`);
-      floatingStyle.setProperty('--anchor-height', `${reference.height}px`);
+
+      // Snap anchor dimensions to device pixels to ensure the popup's visual width matches the anchor's one.
+      const dpr = window.devicePixelRatio || 1;
+      const {
+        x,
+        y,
+        width,
+        height
+      } = rects.reference;
+      const anchorWidth = (Math.round((x + width) * dpr) - Math.round(x * dpr)) / dpr;
+      const anchorHeight = (Math.round((y + height) * dpr) - Math.round(y * dpr)) / dpr;
+      floatingStyle.setProperty('--anchor-width', `${anchorWidth}px`);
+      floatingStyle.setProperty('--anchor-height', `${anchorHeight}px`);
     }
   }), arrow(() => ({
     // `transform-origin` calculations rely on an element existing. If the arrow hasn't been set,

package/esm/utils/useFocusableWhenDisabled.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare function useFocusableWhenDisabled(parameters: useFocusableWhenDisabled.Parameters): useFocusableWhenDisabled.ReturnValue;
+export declare function useFocusableWhenDisabled(parameters: UseFocusableWhenDisabledParameters): UseFocusableWhenDisabledReturnValue;
 interface FocusableWhenDisabledProps {
   'aria-disabled'?: boolean | undefined;
   disabled?: boolean | undefined;
@@ -33,8 +33,5 @@ export interface UseFocusableWhenDisabledParameters {
 export interface UseFocusableWhenDisabledReturnValue {
   props: FocusableWhenDisabledProps;
 }
-export declare namespace useFocusableWhenDisabled {
-  type Parameters = UseFocusableWhenDisabledParameters;
-  type ReturnValue = UseFocusableWhenDisabledReturnValue;
-}
+export interface UseFocusableWhenDisabledState {}
 export {};

package/esm/utils/useMixedToggleClickHandler.d.ts

@@ -3,7 +3,7 @@
  * For example, a button that opens a popup on mousedown and closes it on click.
  * This hook prevents the popup from closing immediately after the mouse button is released.
  */
-export declare function useMixedToggleClickHandler(params: useMixedToggleClickHandler.Parameters): Readonly<{}>;
+export declare function useMixedToggleClickHandler(params: UseMixedToggleClickHandlerParameters): Readonly<{}>;
 export interface UseMixedToggleClickHandlerParameters {
   /**
    * Whether the mixed toggle click handler is enabled.
@@ -19,6 +19,4 @@ export interface UseMixedToggleClickHandlerParameters {
    */
   open: boolean;
 }
-export declare namespace useMixedToggleClickHandler {
-  type Parameters = UseMixedToggleClickHandlerParameters;
-}
+export interface UseMixedToggleClickHandlerState {}

package/esm/utils/useOpenChangeComplete.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 /**
  * Calls the provided function when the CSS open/close animation or transition completes.
  */
-export declare function useOpenChangeComplete(parameters: useOpenChangeComplete.Parameters): void;
+export declare function useOpenChangeComplete(parameters: UseOpenChangeCompleteParameters): void;
 export interface UseOpenChangeCompleteParameters {
   /**
    * Whether the hook is enabled.
@@ -22,6 +22,4 @@ export interface UseOpenChangeCompleteParameters {
    */
   onComplete: () => void;
 }
-export declare namespace useOpenChangeComplete {
-  type Parameters = UseOpenChangeCompleteParameters;
-}
+export interface UseOpenChangeCompleteState {}

package/esm/utils/useOpenInteractionType.d.ts

@@ -7,7 +7,6 @@ import { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
  */
 export declare function useOpenInteractionType(open: boolean): {
   openMethod: InteractionType | null;
-  reset: () => void;
   triggerProps: {
     onClick: (event: React.MouseEvent | React.PointerEvent) => void;
     onPointerDown: (event: React.PointerEvent) => void;

package/esm/utils/useOpenInteractionType.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useEnhancedClickHandler } from '@base-ui/utils/useEnhancedClickHandler';
 import { isIOS } from '@base-ui/utils/detectBrowser';
+import { useValueChanged } from "./useValueChanged.js";
 
 /**
  * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component.
@@ -21,19 +22,20 @@ export function useOpenInteractionType(open) {
       isIOS ? 'touch' : ''));
     }
   });
-  const reset = React.useCallback(() => {
-    setOpenMethod(null);
-  }, []);
+  useValueChanged(open, previousOpen => {
+    if (previousOpen && !open) {
+      setOpenMethod(null);
+    }
+  });
   const {
     onClick,
     onPointerDown
   } = useEnhancedClickHandler(handleTriggerClick);
   return React.useMemo(() => ({
     openMethod,
-    reset,
     triggerProps: {
       onClick,
       onPointerDown
     }
-  }), [openMethod, reset, onClick, onPointerDown]);
+  }), [openMethod, onClick, onPointerDown]);
 }

package/esm/utils/usePopupAutoResize.js

@@ -8,7 +8,6 @@ import { NOOP } from '@base-ui/utils/empty';
 import { useAnimationsFinished } from "./useAnimationsFinished.js";
 import { getCssDimensions } from "./getCssDimensions.js";
 import { EMPTY_OBJECT } from "./constants.js";
-const supportsResizeObserver = typeof ResizeObserver !== 'undefined';
 const DEFAULT_ENABLED = () => true;
 
 /**
@@ -53,7 +52,7 @@ export function usePopupAutoResize(parameters) {
   }, [side, direction]);
   useIsoLayoutEffect(() => {
     // Reset the state when the popup is closed.
-    if (!mounted || !enabled() || !supportsResizeObserver) {
+    if (!mounted || !enabled() || typeof ResizeObserver !== 'function') {
       restoreAnchoringStylesRef.current = NOOP;
       isInitialRenderRef.current = true;
       committedDimensionsRef.current = null;

package/esm/utils/usePopupViewport.js

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import { inertValue } from '@base-ui/utils/inertValue';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { usePreviousValue } from '@base-ui/utils/usePreviousValue';
@@ -74,13 +75,13 @@ export function usePopupViewport(parameters) {
       const offset = calculateRelativePosition(previousActiveTrigger, activeTrigger);
       setNewTriggerOffset(offset);
       cleanupFrame.request(() => {
-        cleanupFrame.request(() => {
+        ReactDOM.flushSync(() => {
           setShowStartingStyleAttribute(false);
-          onAnimationsFinished(() => {
-            setPreviousContentNode(null);
-            setPreviousContentDimensions(null);
-            capturedNodeRef.current = null;
-          });
+        });
+        onAnimationsFinished(() => {
+          setPreviousContentNode(null);
+          setPreviousContentDimensions(null);
+          capturedNodeRef.current = null;
         });
       });
       lastHandledTriggerRef.current = activeTrigger;
@@ -121,8 +122,10 @@ export function usePopupViewport(parameters) {
         inert: inertValue(true),
         ref: previousContainerRef,
         style: {
-          [cssVars.popupWidth]: `${previousContentDimensions?.width}px`,
-          [cssVars.popupHeight]: `${previousContentDimensions?.height}px`,
+          ...(previousContentDimensions ? {
+            [cssVars.popupWidth]: `${previousContentDimensions.width}px`,
+            [cssVars.popupHeight]: `${previousContentDimensions.height}px`
+          } : null),
           position: 'absolute'
         },
         "data-ending-style": showStartingStyleAttribute ? undefined : ''

package/esm/utils/useRegisteredLabelId.d.ts

@@ -0,0 +1 @@
+export declare function useRegisteredLabelId(idProp: string | undefined, setLabelId: (id: string | undefined) => void): string | undefined;

package/esm/utils/useRegisteredLabelId.js

@@ -0,0 +1,14 @@
+'use client';
+
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useBaseUiId } from "./useBaseUiId.js";
+export function useRegisteredLabelId(idProp, setLabelId) {
+  const id = useBaseUiId(idProp);
+  useIsoLayoutEffect(() => {
+    setLabelId(id);
+    return () => {
+      setLabelId(undefined);
+    };
+  }, [id, setLabelId]);
+  return id;
+}

package/esm/utils/useRenderElement.d.ts

@@ -9,7 +9,7 @@ type IntrinsicTagName = keyof React.JSX.IntrinsicElements;
  * @param componentProps An object containing the `render` and `className` props to be used for element customization. Other props are ignored.
  * @param params Additional parameters for rendering the element.
  */
-export declare function useRenderElement<State extends Record<string, any>, RenderedElementType extends Element, TagName extends IntrinsicTagName | undefined, Enabled extends boolean | undefined = undefined>(element: TagName, componentProps: useRenderElement.ComponentProps<State>, params?: useRenderElement.Parameters<State, RenderedElementType, TagName, Enabled>): Enabled extends false ? null : React.ReactElement;
+export declare function useRenderElement<State extends Record<string, any>, RenderedElementType extends Element, TagName extends IntrinsicTagName | undefined, Enabled extends boolean | undefined = undefined>(element: TagName, componentProps: UseRenderElementComponentProps<State>, params?: UseRenderElementParameters<State, RenderedElementType, TagName, Enabled>): Enabled extends false ? null : React.ReactElement;
 type RenderFunctionProps<TagName> = TagName extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[TagName] : React.HTMLAttributes<any>;
 export type UseRenderElementParameters<State, RenderedElementType extends Element, TagName, Enabled extends boolean | undefined> = {
   /**
@@ -25,7 +25,7 @@ export type UseRenderElementParameters<State, RenderedElementType extends Elemen
   /**
    * The ref to apply to the rendered element.
    */
-  ref?: (React.Ref<RenderedElementType> | (React.Ref<RenderedElementType> | undefined)[]) | undefined;
+  ref?: React.Ref<RenderedElementType> | (React.Ref<RenderedElementType> | undefined)[] | undefined;
   /**
    * The state of the component.
    */
@@ -33,7 +33,7 @@ export type UseRenderElementParameters<State, RenderedElementType extends Elemen
   /**
    * Intrinsic props to be spread on the rendered element.
    */
-  props?: (RenderFunctionProps<TagName> | Array<RenderFunctionProps<TagName> | undefined | ((props: RenderFunctionProps<TagName>) => RenderFunctionProps<TagName>)>) | undefined;
+  props?: RenderFunctionProps<TagName> | Array<RenderFunctionProps<TagName> | undefined | ((props: RenderFunctionProps<TagName>) => RenderFunctionProps<TagName>)> | undefined;
   /**
    * A mapping of state to `data-*` attributes.
    */
@@ -44,7 +44,7 @@ export interface UseRenderElementComponentProps<State> {
    * The class name to apply to the rendered element.
    * Can be a string or a function that accepts the state and returns a string.
    */
-  className?: (string | ((state: State) => string | undefined)) | undefined;
+  className?: string | ((state: State) => string | undefined) | undefined;
   /**
    * The render prop or React element to override the default element.
    */
@@ -53,10 +53,7 @@ export interface UseRenderElementComponentProps<State> {
    * The style to apply to the rendered element.
    * Can be a style object or a function that accepts the state and returns a style object.
    */
-  style?: (React.CSSProperties | ((state: State) => React.CSSProperties | undefined)) | undefined;
-}
-export declare namespace useRenderElement {
-  type Parameters<State, RenderedElementType extends Element, TagName, Enabled extends boolean | undefined> = UseRenderElementParameters<State, RenderedElementType, TagName, Enabled>;
-  type ComponentProps<State> = UseRenderElementComponentProps<State>;
+  style?: React.CSSProperties | ((state: State) => React.CSSProperties | undefined) | undefined;
 }
+export interface UseRenderElementState {}
 export {};

package/esm/utils/useRenderElement.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { useMergedRefs, useMergedRefsN } from '@base-ui/utils/useMergedRefs';
 import { getReactElementRef } from '@base-ui/utils/getReactElementRef';
 import { mergeObjects } from '@base-ui/utils/mergeObjects';
+import { warn } from '@base-ui/utils/warn';
 import { getStateAttributesProps } from "./getStateAttributesProps.js";
 import { resolveClassName } from "./resolveClassName.js";
 import { resolveStyle } from "./resolveStyle.js";
@@ -82,6 +83,9 @@ const REACT_LAZY_TYPE = Symbol.for('react.lazy');
 function evaluateRenderProp(element, render, props, state) {
   if (render) {
     if (typeof render === 'function') {
+      if (process.env.NODE_ENV !== 'production') {
+        warnIfRenderPropLooksLikeComponent(render);
+      }
       return render(props, state);
     }
     const mergedProps = mergeProps(props, render.props);
@@ -118,6 +122,17 @@ function evaluateRenderProp(element, render, props, state) {
   // to annotate it correctly.
   throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: Render element or function are not defined.' : _formatErrorMessage(8));
 }
+function warnIfRenderPropLooksLikeComponent(renderFn) {
+  const functionName = renderFn.name;
+  if (functionName.length === 0) {
+    return;
+  }
+  const firstCharacterCode = functionName.charCodeAt(0);
+  if (firstCharacterCode < 65 || firstCharacterCode > 90) {
+    return;
+  }
+  warn(`The \`render\` prop received a function named \`${functionName}\` that starts with an uppercase letter.`, 'This usually means a React component was passed directly as `render={Component}`.', 'Base UI calls `render` as a plain function, which can break the Rules of Hooks during reconciliation.', 'If this is an intentional render callback, rename it to start with a lowercase letter.', 'Use `render={<Component />}` or `render={(props) => <Component {...props} />}` instead.', 'https://base-ui.com/r/invalid-render-prop');
+}
 function renderTag(Tag, props) {
   if (Tag === 'button') {
     return /*#__PURE__*/_createElement("button", {

package/esm/utils/useSwipeDismiss.d.ts

@@ -11,98 +11,97 @@ export declare function getElementTransform(element: HTMLElement): {
   y: number;
   scale: number;
 };
-export declare function useSwipeDismiss(options: useSwipeDismiss.Options): useSwipeDismiss.ReturnValue;
-export declare namespace useSwipeDismiss {
-  interface SwipeDismissDetails {
-    nativeEvent: PointerEvent | TouchEvent;
+export declare function useSwipeDismiss(options: UseSwipeDismissOptions): UseSwipeDismissReturnValue;
+export interface UseSwipeDismissState {}
+export interface UseSwipeDismissDetails {
+  nativeEvent: PointerEvent | TouchEvent;
+  direction: SwipeDirection | undefined;
+}
+export type UseSwipeDismissProgressDetails = SwipeProgressDetailsInternal;
+export interface UseSwipeDismissOptions {
+  enabled: boolean;
+  directions: SwipeDirection[];
+  elementRef: React.RefObject<HTMLElement | null>;
+  movementCssVars: {
+    x: string;
+    y: string;
+  };
+  /**
+   * The minimum distance (in pixels) the pointer must travel from the initial swipe point
+   * before the gesture is considered a dismiss.
+   * @default 40
+   */
+  swipeThreshold?: number | ((details: {
+    element: HTMLElement;
+    direction: SwipeDirection;
+  }) => number) | undefined;
+  /**
+   * If provided, swiping will only begin once this returns true.
+   * The predicate is evaluated on start and on subsequent move events while the pointer is down.
+   */
+  canStart?: ((position: {
+    x: number;
+    y: number;
+  }, details: UseSwipeDismissDetails) => boolean) | undefined;
+  /**
+   * If true, swiping won't start when the gesture begins within a scrollable element.
+   * This helps avoid conflicts between scrolling content and swipe-to-dismiss.
+   * @default false
+   */
+  ignoreScrollableAncestors?: boolean | undefined;
+  /**
+   * If false, touch interactions can start swiping on interactive elements
+   * that are ignored during pointer swipes.
+   * @default true
+   */
+  ignoreSelectorWhenTouch?: boolean | undefined;
+  /**
+   * Whether to update drag offsets in React state on every move.
+   * Disable for event-only usage to avoid re-renders.
+   * @default true
+   */
+  trackDrag?: boolean | undefined;
+  onSwipeStart?: ((event: PointerEvent | TouchEvent) => void) | undefined;
+  onProgress?: ((progress: number, details?: UseSwipeDismissProgressDetails) => void) | undefined;
+  /**
+   * Called when the swipe interaction starts or ends.
+   */
+  onSwipingChange?: ((swiping: boolean) => void) | undefined;
+  /**
+   * Called when the swipe interaction ends. Returning `true` or `false`
+   * overrides the default dismissal behavior.
+   */
+  onRelease?: ((details: {
+    event: PointerEvent | TouchEvent;
     direction: SwipeDirection | undefined;
-  }
-  type SwipeProgressDetails = SwipeProgressDetailsInternal;
-  interface Options {
-    enabled: boolean;
-    directions: SwipeDirection[];
-    elementRef: React.RefObject<HTMLElement | null>;
-    movementCssVars: {
-      x: string;
-      y: string;
-    };
-    /**
-     * The minimum distance (in pixels) the pointer must travel from the initial swipe point
-     * before the gesture is considered a dismiss.
-     * @default 40
-     */
-    swipeThreshold?: number | ((details: {
-      element: HTMLElement;
-      direction: SwipeDirection;
-    }) => number) | undefined;
-    /**
-     * If provided, swiping will only begin once this returns true.
-     * The predicate is evaluated on start and on subsequent move events while the pointer is down.
-     */
-    canStart?: ((position: {
-      x: number;
-      y: number;
-    }, details: SwipeDismissDetails) => boolean) | undefined;
-    /**
-     * If true, swiping won't start when the gesture begins within a scrollable element.
-     * This helps avoid conflicts between scrolling content and swipe-to-dismiss.
-     * @default false
-     */
-    ignoreScrollableAncestors?: boolean | undefined;
-    /**
-     * If false, touch interactions can start swiping on interactive elements
-     * that are ignored during pointer swipes.
-     * @default true
-     */
-    ignoreSelectorWhenTouch?: boolean | undefined;
-    /**
-     * Whether to update drag offsets in React state on every move.
-     * Disable for event-only usage to avoid re-renders.
-     * @default true
-     */
-    trackDrag?: boolean | undefined;
-    onSwipeStart?: ((event: PointerEvent | TouchEvent) => void) | undefined;
-    onProgress?: ((progress: number, details?: SwipeProgressDetailsInternal) => void) | undefined;
-    /**
-     * Called when the swipe interaction starts or ends.
-     */
-    onSwipingChange?: ((swiping: boolean) => void) | undefined;
-    /**
-     * Called when the swipe interaction ends. Returning `true` or `false`
-     * overrides the default dismissal behavior.
-     */
-    onRelease?: ((details: {
-      event: PointerEvent | TouchEvent;
-      direction: SwipeDirection | undefined;
-      deltaX: number;
-      deltaY: number;
-      velocityX: number;
-      velocityY: number;
-      releaseVelocityX: number;
-      releaseVelocityY: number;
-    }) => boolean | void) | undefined;
-    onDismiss?: ((event: PointerEvent | TouchEvent, details: {
-      direction: SwipeDirection;
-    }) => void) | undefined;
-  }
-  interface ReturnValue {
-    swiping: boolean;
-    swipeDirection: SwipeDirection | undefined;
-    dragDismissed: boolean;
-    getPointerProps: () => {
-      onPointerDown?: ((event: React.PointerEvent) => void) | undefined;
-      onPointerMove?: ((event: React.PointerEvent) => void) | undefined;
-      onPointerUp?: ((event: React.PointerEvent) => void) | undefined;
-      onPointerCancel?: ((event: React.PointerEvent) => void) | undefined;
-    };
-    getTouchProps: () => {
-      onTouchStart?: ((event: React.TouchEvent) => void) | undefined;
-      onTouchMove?: ((event: React.TouchEvent) => void) | undefined;
-      onTouchEnd?: ((event: React.TouchEvent) => void) | undefined;
-      onTouchCancel?: ((event: React.TouchEvent) => void) | undefined;
-    };
-    getDragStyles: () => React.CSSProperties;
-    reset: () => void;
-  }
+    deltaX: number;
+    deltaY: number;
+    velocityX: number;
+    velocityY: number;
+    releaseVelocityX: number;
+    releaseVelocityY: number;
+  }) => boolean | void) | undefined;
+  onDismiss?: ((event: PointerEvent | TouchEvent, details: {
+    direction: SwipeDirection;
+  }) => void) | undefined;
+}
+export interface UseSwipeDismissReturnValue {
+  swiping: boolean;
+  swipeDirection: SwipeDirection | undefined;
+  dragDismissed: boolean;
+  getPointerProps: () => {
+    onPointerDown?: ((event: React.PointerEvent) => void) | undefined;
+    onPointerMove?: ((event: React.PointerEvent) => void) | undefined;
+    onPointerUp?: ((event: React.PointerEvent) => void) | undefined;
+    onPointerCancel?: ((event: React.PointerEvent) => void) | undefined;
+  };
+  getTouchProps: () => {
+    onTouchStart?: ((event: React.TouchEvent) => void) | undefined;
+    onTouchMove?: ((event: React.TouchEvent) => void) | undefined;
+    onTouchEnd?: ((event: React.TouchEvent) => void) | undefined;
+    onTouchCancel?: ((event: React.TouchEvent) => void) | undefined;
+  };
+  getDragStyles: () => React.CSSProperties;
+  reset: () => void;
 }
 export {};

package/esm/utils/useSwipeDismiss.js

@@ -6,6 +6,7 @@ import { ownerDocument } from '@base-ui/utils/owner';
 import { contains, getTarget } from "../floating-ui-react/utils.js";
 import { findScrollableTouchTarget, hasScrollableAncestor } from "./scrollable.js";
 import { clamp } from "./clamp.js";
+import { getElementAtPoint } from "./getElementAtPoint.js";
 const DEFAULT_SWIPE_THRESHOLD = 40;
 const REVERSE_CANCEL_THRESHOLD = 10;
 const MIN_DRAG_THRESHOLD = 1;
@@ -308,7 +309,7 @@ export function useSwipeDismiss(options) {
   }
   function getTargetAtPoint(position, nativeEvent) {
     const doc = ownerDocument(elementRef.current);
-    const elementAtPoint = typeof doc?.elementFromPoint === 'function' ? doc.elementFromPoint(position.x, position.y) : null;
+    const elementAtPoint = getElementAtPoint(doc, position.x, position.y);
     const target = elementAtPoint ?? getTarget(nativeEvent);
     return target;
   }