Drag and Drop

/**
 * Provides drag behavior for an element
 * @param options - Drag configuration options
 * @returns Drag result with props and state
 */
function useDrag(options: DragOptions): DragResult;

/**
 * Provides drop behavior for an element
 * @param options - Drop configuration options
 * @returns Drop result with props and state
 */
function useDrop(options: DropOptions): DropResult;

interface DragOptions {
  /** Handler called when drag starts */
  onDragStart?: (e: DragStartEvent) => void;
  /** Handler called when drag ends */
  onDragEnd?: (e: DragEndEvent) => void;
  /** Data to transfer during drag operation */
  getItems: () => DragItem[];
  /** Preview element or render function */
  preview?: DragPreview;
  /** Whether drag is allowed */
  isDisabled?: boolean;
}

interface DropOptions {
  /** Handler called when items are dropped */
  onDrop?: (e: DropEvent) => void;
  /** Handler called when drag enters the drop zone */
  onDragEnter?: (e: DragEnterEvent) => void;
  /** Handler called when drag leaves the drop zone */
  onDragLeave?: (e: DragLeaveEvent) => void;
  /** Function to determine if drop is allowed */
  shouldAcceptDrop?: (types: Set<string>) => boolean;
  /** Whether drop is allowed */
  isDisabled?: boolean;
}

interface DragResult {
  /** Props to spread on the draggable element */
  dragProps: DOMAttributes<Element>;
  /** Whether the element is currently being dragged */
  isDragging: boolean;
}

interface DropResult {
  /** Props to spread on the drop target element */
  dropProps: DOMAttributes<Element>;
  /** Whether a drag is currently over the drop zone */
  isDropTarget: boolean;
}

/**
 * Provides drag and drop behavior for collections
 * @param props - Draggable collection configuration
 * @returns Collection drag utilities
 */
function useDraggableCollection(props: DraggableCollectionProps): DraggableCollectionResult;

/**
 * Provides drop behavior for collections
 * @param props - Droppable collection configuration
 * @returns Collection drop utilities
 */
function useDroppableCollection(props: DroppableCollectionProps): DroppableCollectionResult;

interface DraggableCollectionProps {
  /** Selection manager for the collection */
  selectionManager: SelectionManager;
  /** Handler called when drag starts */
  onDragStart?: (e: DragStartEvent) => void;
  /** Handler called when drag ends */
  onDragEnd?: (e: DragEndEvent) => void;
  /** Function to get drag data for items */
  getItems: (keys: Set<Key>) => DragItem[];
  /** Preview configuration */
  preview?: DragPreview;
}

interface DroppableCollectionProps {
  /** Collection state */
  collection: Collection<any>;
  /** Selection manager */
  selectionManager: SelectionManager;
  /** Handler for drop operations */
  onDrop?: (e: DropEvent) => void;
  /** Handler for reorder operations */
  onReorder?: (e: ReorderEvent) => void;
  /** Function to determine accepted drop types */
  shouldAcceptDrop?: (target: DropTarget, types: Set<string>) => boolean;
}

/**
 * Provides drag behavior for individual collection items
 * @param props - Draggable item configuration
 * @returns Item drag utilities
 */
function useDraggableItem(props: DraggableItemProps): DraggableItemResult;

/**
 * Provides drop behavior for individual collection items
 * @param props - Droppable item configuration
 * @returns Item drop utilities
 */
function useDroppableItem(props: DroppableItemProps): DroppableItemResult;

/**
 * Provides drop indicator for showing drop positions
 * @param props - Drop indicator configuration
 * @returns Drop indicator utilities
 */
function useDropIndicator(props: DropIndicatorProps): DropIndicatorResult;

interface DraggableItemProps {
  /** Item key */
  key: Key;
  /** Whether dragging is disabled for this item */
  isDisabled?: boolean;
  /** Whether the item has a drag handle */
  hasDragHandle?: boolean;
}

interface DroppableItemProps {  
  /** Item key */
  key: Key;
  /** Drop target configuration */
  target: DropTarget;
  /** Whether dropping is disabled for this item */
  isDisabled?: boolean;
}

interface DropIndicatorProps {
  /** Drop target for the indicator */
  target: DropTarget;
  /** Whether the indicator is disabled */
  isDisabled?: boolean;
}

/**
 * Provides clipboard functionality with drag and drop integration
 * @param options - Clipboard configuration
 * @returns Clipboard utilities
 */
function useClipboard(options: ClipboardOptions): ClipboardResult;

interface ClipboardOptions {
  /** Handler called when items are copied */
  onCopy?: (items: ClipboardItem[]) => void;
  /** Handler called when items are cut */
  onCut?: (items: ClipboardItem[]) => void;
  /** Handler called when items are pasted */
  onPaste?: (items: ClipboardItem[]) => void;
  /** Function to get clipboard data */
  getItems?: () => ClipboardItem[];
}

interface ClipboardResult {
  /** Copy selected items to clipboard */
  copy: () => void;
  /** Cut selected items to clipboard */
  cut: () => void;
  /** Paste items from clipboard */
  paste: () => void;
  /** Whether clipboard operations are available */
  isSupported: boolean;
}

/**
 * Component for rendering custom drag previews
 */
function DragPreview(props: DragPreviewProps): JSX.Element;

interface DragPreviewProps {
  /** Preview content to render */
  children: ReactNode;
  /** Offset from cursor position */
  offset?: { x: number; y: number };
  /** Whether to use default browser preview */
  useDefaultPreview?: boolean;
}

interface DragItem {
  /** Drag data type */
  type: string;
  /** Item data */
  data: any;
  /** Text representation */
  textValue?: string;
}

interface DragStartEvent {
  /** Items being dragged */
  items: DragItem[];
  /** Pointer type */
  pointerType: 'mouse' | 'touch' | 'pen' | 'keyboard';
}

interface DragEndEvent {
  /** Whether the drop was successful */
  isSuccessful: boolean;
  /** Operation performed */
  operation: 'move' | 'copy' | 'link' | 'cancel';
}

interface DropEvent {
  /** Items being dropped */
  items: DropItem[];
  /** Drop target */
  target: DropTarget;
  /** Drop operation */
  operation: 'move' | 'copy' | 'link';
}

interface DropTarget {
  /** Target type */
  type: 'item' | 'collection' | 'root';
  /** Target key (for item targets) */
  key?: Key;
  /** Drop position relative to target */
  dropPosition?: 'before' | 'after' | 'on';
}

interface ReorderEvent {
  /** Keys of items being reordered */
  keys: Set<Key>;
  /** Target drop position */
  target: DropTarget;
}

type DIRECTORY_DRAG_TYPE = 'application/vnd.react-aria.directory';

function isDirectoryDropItem(item: DropItem): boolean;
function isFileDropItem(item: DropItem): boolean;
function isTextDropItem(item: DropItem): boolean;

import { useDrag, useDrop } from "react-aria";

function DraggableItem({ item }) {
  let { dragProps, isDragging } = useDrag({
    getItems: () => [{ type: 'text/plain', data: item.text }],
    onDragEnd: (e) => console.log('Drag ended:', e.isSuccessful)
  });

  return (
    <div
      {...dragProps}
      className={`draggable-item ${isDragging ? 'dragging' : ''}`}
    >
      {item.text}
    </div>
  );
}

function DropZone({ onDrop }) {
  let { dropProps, isDropTarget } = useDrop({
    onDrop: (e) => onDrop(e.items),
    shouldAcceptDrop: (types) => types.has('text/plain')
  });

  return (
    <div
      {...dropProps}
      className={`drop-zone ${isDropTarget ? 'drop-target' : ''}`}
    >
      Drop items here
    </div>
  );
}