@base-ui/react 1.0.0 → 1.2.0

package/utils/useSwipeDismiss.d.ts

@@ -0,0 +1,108 @@
+import * as React from 'react';
+export type SwipeDirection = 'up' | 'down' | 'left' | 'right';
+type SwipeProgressDetailsInternal = {
+  deltaX: number;
+  deltaY: number;
+  direction: SwipeDirection | undefined;
+};
+export declare function getDisplacement(direction: SwipeDirection, deltaX: number, deltaY: number): number;
+export declare function getElementTransform(element: HTMLElement): {
+  x: number;
+  y: number;
+  scale: number;
+};
+export declare function useSwipeDismiss(options: useSwipeDismiss.Options): useSwipeDismiss.ReturnValue;
+export declare namespace useSwipeDismiss {
+  interface SwipeDismissDetails {
+    nativeEvent: 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;
+  }
+}
+export {};