import * as React from 'react'; export interface PointerDragPosition { /** * The data passed to `onPointerDown` when the drag session started. */ data: TData; /** * The pointer type of the drag session: `'mouse'`, `'pen'` or `'touch'`. */ pointerType: string; clientX: number; clientY: number; /** * The topmost element at the pointer position. * With pointer capture, the event target is always the capture element, so drop targets must be found with this. * Elements with `pointer-events: none`, like a drag preview, and elements matching `hitTestIgnoreSelector` are ignored. */ elementAtPoint: Element | null; /** * Whether the pointer is within the bounds of the capture element. */ isInside: boolean; } export interface UsePointerDragOptions { /** * Returns the element that captures the pointer during a drag. * It must stay mounted during the whole drag session, so the handle that started it must not be used. * Virtualization can unmount the handle while it's being dragged. * @returns {HTMLElement | null | undefined} The capture element. */ getCaptureElement: () => HTMLElement | null | undefined; /** * Time in ms a touch pointer must be held still before the drag starts. * Moving earlier cancels the drag and lets the browser scroll instead. * @default 300 */ touchDelay?: number; /** * Distance in px a touch pointer can move during `touchDelay` without canceling the drag. * @default 8 */ touchTolerance?: number; /** * Distance in px a mouse or pen pointer must move before the drag starts. * @default 5 */ mouseDistance?: number; /** * Selector of elements to skip when finding `elementAtPoint`, with their descendants. * For overlays that must keep receiving events from other inputs, so they can't use `pointer-events: none`. */ hitTestIgnoreSelector?: string; /** * Called when the activation constraints are met. * @param {PointerDragPosition} position The pointer position. * @returns {boolean | void} `false` to refuse the drag, for example when it isn't allowed anymore. * The session ends without `onDragCancel`, and the pointer is released. */ onDragStart?: (position: PointerDragPosition) => boolean | void; onDragMove?: (position: PointerDragPosition) => void; onDragEnd?: (position: PointerDragPosition) => void; /** * Called when a started drag stops without a drop: `Escape`, `pointercancel`, lost pointer capture, or `cancel()`. * @param {TData} data The data of the drag session. */ onDragCancel?: (data: TData) => void; } export interface UsePointerDragReturnValue { /** * Starts a pending drag session. The drag starts once the activation constraints are met. * Ignored while another session is pending or active. * @param {PointerEvent | React.PointerEvent} event The `pointerdown` event on the drag handle. * @param {TData} data The data passed to the drag callbacks, for example the id of the dragged item. */ onPointerDown: (event: PointerEvent | React.PointerEvent, data: TData) => void; /** * Stops the current session. Calls `onDragCancel` if the drag had started. */ cancel: () => void; } /** * Returns the topmost element at the given viewport position, in the document or shadow root of `element`. * @param {HTMLElement | null} element An element of the document or shadow root to hit-test. * @param {number} x The horizontal viewport position. * @param {number} y The vertical viewport position. * @param {string} ignoreSelector Selector of elements to skip, with their descendants. * @returns {Element | null} The element at the position, or `null` when hit-testing isn't supported. */ export declare function getElementAtPoint(element: HTMLElement | null, x: number, y: number, ignoreSelector?: string): Element | null; /** * Drag and drop based on Pointer Events, which works with mouse, pen and touch input. * The HTML drag and drop API doesn't work reliably on touch screens. */ export declare function usePointerDrag(options: UsePointerDragOptions): UsePointerDragReturnValue;