import { Nullable } from './types'; /** * Class name applied to the drop zone while a drag operation is active * anywhere within the document. */ export declare const HONEY_HIGHLIGHT_DROP_ZONE_CLASS_NAME = "honey__highlight-drop-zone"; /** * Class name applied to the drop zone while the dragged item is directly * over the drop zone element. */ export declare const HONEY_HIGHLIGHT_DROP_ZONE_OVER_CLASS_NAME = "honey__highlight-drop-zone-over"; /** * Callback invoked once when a drag operation enters the document. * * @template Element - The drop zone element type. * * @param dropZoneElement - The current drop zone element, or `null` if it is not mounted. * @param e - The native drag event. */ export type UseHoneyDragAndDropStartHandler = (dropZoneElement: Nullable, e: DragEvent) => void; /** * Callback invoked when a drag operation ends. * * This can happen when the dragged item leaves the document or after a drop. * * @template Element - The drop zone element type. * * @param dropZoneElement - The current drop zone element, or `null` if it is not mounted. * @param e - The native drag event. */ export type UseHoneyDragAndDropEndHandler = (dropZoneElement: Nullable, e: DragEvent) => void; /** * Callback invoked when an item is dropped on the drop zone element. * * @template Element - The drop zone element type. * * @param dropZoneElement - The current drop zone element, or `null` if it is not mounted. * @param e - The native drag event. */ export type UseHoneyDragAndDropDropHandler = (dropZoneElement: Nullable, e: DragEvent) => void; /** * Callback ref used to register or unregister the drop zone element. * * Pass this handler to the target element's `ref` prop. * * @template Element - The drop zone element type. * * @param dropZoneElement - The mounted drop zone element, or `null` when unmounted. */ export type UseHoneyDragAndDropSetElementHandler = (dropZoneElement: Nullable) => void; /** * Options for configuring the `useDragAndDrop` hook. * * @template Element - The drop zone element type. */ export interface UseHoneyDragAndDropOptions { /** * Callback invoked when an item is dropped on the drop zone element. */ onDrop: UseHoneyDragAndDropDropHandler; /** * Optional callback invoked once when a drag operation enters the document. */ onDragStart?: UseHoneyDragAndDropStartHandler; /** * Optional callback invoked when a drag operation leaves the document or after drop. */ onDragEnd?: UseHoneyDragAndDropEndHandler; /** * Whether drag-and-drop handling is enabled. * * When disabled, event listeners are not attached and highlight classes are removed. * * @default true */ enabled?: boolean; } /** * Adds document-level drag tracking and drop-zone-specific drop handling. * * The hook highlights the drop zone when a drag operation enters the document, * applies an additional class when the dragged item is directly over the drop zone, * and invokes the provided callbacks for drag start, drag end, and drop events. * * Native event listeners are attached directly to the document and drop zone element. * Latest callback references are used internally, so changing callback props does not * require re-attaching all listeners. * * @template Element - The drop zone element type. * * @param options - Hook configuration. * * @returns An object containing a callback ref to assign to the drop zone element. * * @example * ```tsx * const { setDropZoneRef } = useDragAndDrop({ * onDrop: (dropZoneElement, e) => { * const files = Array.from(e.dataTransfer?.files ?? []); * * console.log(dropZoneElement, files); * }, * }); * * return
Drop files here
; * ``` */ export declare const useHoneyDragAndDrop: ({ onDragStart, onDragEnd, onDrop, enabled, }: UseHoneyDragAndDropOptions) => { dropZoneRef: import("react").RefObject>; setDropZoneRef: UseHoneyDragAndDropSetElementHandler; };