@react-aria/dnd 3.0.0-alpha.0 → 3.0.0-alpha.11

package/dist/types.d.ts

@@ -1,22 +1,8 @@
-import { AriaButtonProps } from "@react-types/button";
-import { DragEndEvent, DragItem, DragMoveEvent, DragStartEvent, DropOperation, DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropMoveEvent, DragTypes, DroppableCollectionProps, DropTarget, KeyboardDelegate, DropItem } from "@react-types/shared";
-import { HTMLAttributes, RefObject, Key } from "react";
+import React, { HTMLAttributes, RefObject, Key } from "react";
+import { DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropMoveEvent, DropOperation, DragTypes, DroppableCollectionProps, DropTarget, KeyboardDelegate, DragEndEvent, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, DOMAttributes, DropItem } from "@react-types/shared";
 import { DroppableCollectionState, DraggableCollectionState } from "@react-stately/dnd";
-interface DragOptions {
-    onDragStart?: (e: DragStartEvent) => void;
-    onDragMove?: (e: DragMoveEvent) => void;
-    onDragEnd?: (e: DragEndEvent) => void;
-    getItems: () => DragItem[];
-    renderPreview?: (items: DragItem[]) => JSX.Element;
-    getAllowedDropOperations?: () => DropOperation[];
-}
-interface DragResult {
-    dragProps: HTMLAttributes<HTMLElement>;
-    dragButtonProps: AriaButtonProps;
-    isDragging: boolean;
-}
-export function useDrag(options: DragOptions): DragResult;
-interface DropOptions {
+import { AriaButtonProps } from "@react-types/button";
+export interface DropOptions {
     ref: RefObject<HTMLElement>;
     getDropOperation?: (types: DragTypes, allowedOperations: DropOperation[]) => DropOperation;
     getDropOperationForPoint?: (types: DragTypes, allowedOperations: DropOperation[], x: number, y: number) => DropOperation;
@@ -26,49 +12,67 @@ interface DropOptions {
     onDropExit?: (e: DropExitEvent) => void;
     onDrop?: (e: DropEvent) => void;
 }
-interface DropResult {
+export interface DropResult {
     dropProps: HTMLAttributes<HTMLElement>;
     isDropTarget: boolean;
 }
 export function useDrop(options: DropOptions): DropResult;
-interface DroppableCollectionOptions extends DroppableCollectionProps {
+export interface DroppableCollectionOptions extends DroppableCollectionProps {
     keyboardDelegate: KeyboardDelegate;
     getDropTargetFromPoint: (x: number, y: number) => DropTarget | null;
 }
-interface DroppableCollectionResult {
+export interface DroppableCollectionResult {
     collectionProps: HTMLAttributes<HTMLElement>;
 }
 export function useDroppableCollection(props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DroppableCollectionResult;
-interface DroppableItemOptions {
+export interface DroppableItemOptions {
     target: DropTarget;
 }
-interface DroppableItemResult {
+export interface DroppableItemResult {
     dropProps: HTMLAttributes<HTMLElement>;
 }
 export function useDroppableItem(options: DroppableItemOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DroppableItemResult;
-interface DropIndicatorProps {
+export interface DropIndicatorProps {
     target: DropTarget;
 }
-interface DropIndicatorAria {
+export interface DropIndicatorAria {
     dropIndicatorProps: HTMLAttributes<HTMLElement>;
 }
 export function useDropIndicator(props: DropIndicatorProps, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DropIndicatorAria;
-interface DraggableItemProps {
+export interface DragOptions {
+    onDragStart?: (e: DragStartEvent) => void;
+    onDragMove?: (e: DragMoveEvent) => void;
+    onDragEnd?: (e: DragEndEvent) => void;
+    getItems: () => DragItem[];
+    preview?: RefObject<DragPreviewRenderer>;
+    getAllowedDropOperations?: () => DropOperation[];
+}
+export interface DragResult {
+    dragProps: HTMLAttributes<HTMLElement>;
+    dragButtonProps: AriaButtonProps;
+    isDragging: boolean;
+}
+export function useDrag(options: DragOptions): DragResult;
+export interface DraggableItemProps {
     key: Key;
 }
-interface DraggableItemResult {
+export interface DraggableItemResult {
     dragProps: HTMLAttributes<HTMLElement>;
     dragButtonProps: AriaButtonProps;
 }
 export function useDraggableItem(props: DraggableItemProps, state: DraggableCollectionState): DraggableItemResult;
-interface ClipboardProps {
+export interface DragPreviewProps {
+    children: (items: DragItem[]) => JSX.Element;
+}
+export let DragPreview: React.ForwardRefExoticComponent<DragPreviewProps & React.RefAttributes<DragPreviewRenderer>>;
+export interface ClipboardProps {
     getItems?: () => DragItem[];
     onCopy?: () => void;
     onCut?: () => void;
     onPaste?: (items: DropItem[]) => void;
 }
-interface ClipboardResult {
-    clipboardProps: HTMLAttributes<HTMLElement>;
+export interface ClipboardResult {
+    clipboardProps: DOMAttributes;
 }
 export function useClipboard(options: ClipboardProps): ClipboardResult;
 

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":"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","sources":["./packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/constants.ts","./packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/utils.ts","./packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/DragManager.ts","./packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDrag.ts","./packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useVirtualDrop.ts","./packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDrop.ts","./packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useAutoScroll.ts","./packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDroppableCollection.ts","./packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDroppableItem.ts","./packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDropIndicator.ts","./packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDraggableItem.ts","./packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useClipboard.ts","./packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":"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","sources":["packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/constants.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/utils.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/DragManager.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useAutoScroll.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useVirtualDrop.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDrop.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDroppableCollection.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDroppableItem.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDropIndicator.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDrag.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useDraggableItem.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/DragPreview.tsx","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/useClipboard.ts","packages/@react-aria/dnd/src/packages/@react-aria/dnd/src/index.ts","packages/@react-aria/dnd/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport type {DroppableCollectionOptions, DroppableCollectionResult} from './useDroppableCollection';\nexport type {DroppableItemOptions, DroppableItemResult} from './useDroppableItem';\nexport type {DropIndicatorProps, DropIndicatorAria} from './useDropIndicator';\nexport type {DraggableItemProps, DraggableItemResult} from './useDraggableItem';\nexport type {DragPreviewProps} from './DragPreview';\nexport type {DragOptions, DragResult} from './useDrag';\nexport type {DropOptions, DropResult} from './useDrop';\nexport type {ClipboardProps, ClipboardResult} from './useClipboard';\n\nexport {useDrag} from './useDrag';\nexport {useDrop} from './useDrop';\nexport {useDroppableCollection} from './useDroppableCollection';\nexport {useDroppableItem} from './useDroppableItem';\nexport {useDropIndicator} from './useDropIndicator';\nexport {useDraggableItem} from './useDraggableItem';\nexport {useClipboard} from './useClipboard';\nexport {DragPreview} from './DragPreview';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/dnd",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.11",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,23 +18,24 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-aria/i18n": "^3.3.0",
-    "@react-aria/interactions": "^3.3.4",
-    "@react-aria/live-announcer": "3.0.0-rc.0",
-    "@react-aria/overlays": "^3.6.2",
-    "@react-aria/utils": "^3.7.0",
-    "@react-aria/visually-hidden": "^3.2.1",
-    "@react-stately/dnd": "3.0.0-alpha.0",
-    "@react-stately/selection": "^3.4.0",
-    "@react-types/button": "^3.2.1",
-    "@react-types/shared": "^3.5.0"
+    "@internationalized/string": "^3.0.0",
+    "@react-aria/i18n": "^3.5.0",
+    "@react-aria/interactions": "^3.10.0",
+    "@react-aria/live-announcer": "^3.1.1",
+    "@react-aria/overlays": "^3.10.0",
+    "@react-aria/utils": "^3.13.2",
+    "@react-aria/visually-hidden": "^3.4.0",
+    "@react-stately/dnd": "3.0.0-alpha.9",
+    "@react-stately/selection": "^3.10.2",
+    "@react-types/button": "^3.6.0",
+    "@react-types/shared": "^3.14.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9920ffaa2596a03c4498a15cb940bd2f4ba5cd6a"
+  "gitHead": "cd7c0ec917122c7612f653c22f8ed558f8b66ecd"
 }

package/src/DragManager.ts

@@ -12,8 +12,10 @@
 
 import {announce} from '@react-aria/live-announcer';
 import {ariaHideOutside} from '@react-aria/overlays';
-import {DragEndEvent, DragItem, DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropItem, DropOperation, DropTarget as DroppableCollectionTarget} from '@react-types/shared';
+import {DragEndEvent, DragItem, DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropItem, DropOperation, DropTarget as DroppableCollectionTarget, FocusableElement} from '@react-types/shared';
 import {getDragModality, getTypes} from './utils';
+import {getInteractionModality} from '@react-aria/interactions';
+import type {LocalizedStringFormatter} from '@internationalized/string';
 import {useEffect, useState} from 'react';
 
 let dropTargets = new Map<Element, DropTarget>();
@@ -22,7 +24,7 @@ let dragSession: DragSession = null;
 let subscriptions = new Set<() => void>();
 
 interface DropTarget {
-  element: HTMLElement,
+  element: FocusableElement,
   getDropOperation?: (types: Set<string>, allowedOperations: DropOperation[]) => DropOperation,
   onDropEnter?: (e: DropEnterEvent, dragTarget: DragTarget) => void,
   onDropExit?: (e: DropExitEvent) => void,
@@ -42,7 +44,7 @@ export function registerDropTarget(target: DropTarget) {
 }
 
 interface DroppableItem {
-  element: HTMLElement,
+  element: FocusableElement,
   target: DroppableCollectionTarget,
   getDropOperation?: (types: Set<string>, allowedOperations: DropOperation[]) => DropOperation
 }
@@ -55,22 +57,24 @@ export function registerDropItem(item: DroppableItem) {
 }
 
 interface DragTarget {
-  element: HTMLElement,
+  element: FocusableElement,
   items: DragItem[],
   allowedDropOperations: DropOperation[],
   onDragEnd?: (e: DragEndEvent) => void
 }
 
-export function beginDragging(target: DragTarget, formatMessage: (key: string) => string) {
+export function beginDragging(target: DragTarget, stringFormatter: LocalizedStringFormatter) {
   if (dragSession) {
     throw new Error('Cannot begin dragging while already dragging');
   }
 
-  dragSession = new DragSession(target, formatMessage);
+  dragSession = new DragSession(target, stringFormatter);
   requestAnimationFrame(() => {
     dragSession.setup();
-
-    if (getDragModality() === 'keyboard') {
+    if (
+      getDragModality() === 'keyboard' ||
+      (getDragModality() === 'touch' && getInteractionModality() === 'virtual')
+    ) {
       dragSession.next();
     }
   });
@@ -101,6 +105,16 @@ function endDragging() {
   }
 }
 
+export function isValidDropTarget(element: Element): boolean {
+  for (let target of dropTargets.keys()) {
+    if (target.contains(element)) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
 const CANCELED_EVENTS = [
   'pointerdown',
   'pointermove',
@@ -119,7 +133,9 @@ const CANCELED_EVENTS = [
   'touchstart',
   'touchmove',
   'touchend',
-  'keyup'
+  'keyup',
+  'focusin',
+  'focusout'
 ];
 
 const CLICK_EVENTS = [
@@ -141,19 +157,22 @@ class DragSession {
   currentDropItem: DroppableItem;
   dropOperation: DropOperation;
   private mutationObserver: MutationObserver;
-  private mutationImmediate: NodeJS.Immediate;
   private restoreAriaHidden: () => void;
-  private formatMessage: (key: string) => string;
+  private stringFormatter: LocalizedStringFormatter;
+  private isVirtualClick: boolean;
+  private initialFocused: boolean;
 
-  constructor(target: DragTarget, formatMessage: (key: string) => string) {
+  constructor(target: DragTarget, stringFormatter: LocalizedStringFormatter) {
     this.dragTarget = target;
-    this.formatMessage = formatMessage;
+    this.stringFormatter = stringFormatter;
 
     this.onKeyDown = this.onKeyDown.bind(this);
     this.onFocus = this.onFocus.bind(this);
     this.onBlur = this.onBlur.bind(this);
     this.onClick = this.onClick.bind(this);
+    this.onPointerDown = this.onPointerDown.bind(this);
     this.cancelEvent = this.cancelEvent.bind(this);
+    this.initialFocused = false;
   }
 
   setup() {
@@ -161,25 +180,18 @@ class DragSession {
     window.addEventListener('focus', this.onFocus, true);
     window.addEventListener('blur', this.onBlur, true);
     document.addEventListener('click', this.onClick, true);
+    document.addEventListener('pointerdown', this.onPointerDown, true);
 
     for (let event of CANCELED_EVENTS) {
       document.addEventListener(event, this.cancelEvent, true);
     }
 
-    this.mutationObserver = new MutationObserver(() => {
-      // JSDOM has a bug where MutationObserver enters an infinite loop if mutations
-      // occur inside a MutationObserver callback. If running in Node, wait until
-      // the next tick to update valid drop targets.
-      // See https://github.com/jsdom/jsdom/issues/3096
-      if (typeof setImmediate === 'function') {
-        this.mutationImmediate = setImmediate(() => this.updateValidDropTargets());
-      } else {
-        this.updateValidDropTargets();
-      }
-    });
+    this.mutationObserver = new MutationObserver(() =>
+      this.updateValidDropTargets()
+    );
     this.updateValidDropTargets();
 
-    announce(this.formatMessage(MESSAGES[getDragModality()]));
+    announce(this.stringFormatter.format(MESSAGES[getDragModality()]));
   }
 
   teardown() {
@@ -187,6 +199,7 @@ class DragSession {
     window.removeEventListener('focus', this.onFocus, true);
     window.removeEventListener('blur', this.onBlur, true);
     document.removeEventListener('click', this.onClick, true);
+    document.removeEventListener('pointerdown', this.onPointerDown, true);
 
     for (let event of CANCELED_EVENTS) {
       document.removeEventListener(event, this.cancelEvent, true);
@@ -194,9 +207,6 @@ class DragSession {
 
     this.mutationObserver.disconnect();
     this.restoreAriaHidden();
-    if (this.mutationImmediate) {
-      clearImmediate(this.mutationImmediate);
-    }
   }
 
   onKeyDown(e: KeyboardEvent) {
@@ -272,25 +282,34 @@ class DragSession {
 
   onClick(e: MouseEvent) {
     this.cancelEvent(e);
+    if (e.detail === 0 || this.isVirtualClick) {
+      if (e.target === this.dragTarget.element) {
+        this.cancel();
+        return;
+      }
 
-    if (e.detail !== 0) {
-      return;
-    }
-
-    if (e.target === this.dragTarget.element) {
-      this.cancel();
-      return;
+      let dropTarget = this.validDropTargets.find(target => target.element.contains(e.target as HTMLElement));
+      if (dropTarget) {
+        let item = dropItems.get(e.target as HTMLElement);
+        this.setCurrentDropTarget(dropTarget, item);
+        this.drop(item);
+      }
     }
+  }
 
-    let dropTarget = this.validDropTargets.find(target => target.element.contains(e.target as HTMLElement));
-    if (dropTarget) {
-      let item = dropItems.get(e.target as HTMLElement);
-      this.setCurrentDropTarget(dropTarget, item);
-      this.drop(item);
-    }
+  onPointerDown(e: PointerEvent) {
+    // Android Talkback double tap has e.detail = 1 for onClick. Detect the virtual click in onPointerDown before onClick fires
+    // so we can properly perform cancel and drop operations.
+    this.cancelEvent(e);
+    this.isVirtualClick = isVirtualPointerEvent(e);
   }
 
   cancelEvent(e: Event) {
+    // Allow focusin and focusout on the drag target so focus ring works properly.
+    if ((e.type === 'focusin' || e.type === 'focusout') && e.target === this.dragTarget?.element) {
+      return;
+    }
+
     // Allow default for events that might cancel a click event
     if (!CLICK_EVENTS.includes(e.type)) {
       e.preventDefault();
@@ -429,6 +448,13 @@ class DragSession {
 
       item?.element.focus();
       this.currentDropItem = item;
+
+      // Annouce first drop target after drag start announcement finishes.
+      // Otherwise, it will never get announced because drag start announcement is assertive.
+      if (!this.initialFocused) {
+        announce(item?.element.getAttribute('aria-label'), 'polite');
+        this.initialFocused = true;
+      }
     }
   }
 
@@ -446,6 +472,12 @@ class DragSession {
       });
     }
 
+    // Blur and re-focus the drop target so that the focus ring appears.
+    if (this.currentDropTarget) {
+      this.currentDropTarget.element.blur();
+      this.currentDropTarget.element.focus();
+    }
+
     this.setCurrentDropTarget(null);
     endDragging();
   }
@@ -456,7 +488,7 @@ class DragSession {
       this.dragTarget.element.focus();
     }
 
-    announce(this.formatMessage('dropCanceled'));
+    announce(this.stringFormatter.format('dropCanceled'));
   }
 
   drop(item?: DroppableItem) {
@@ -494,7 +526,7 @@ class DragSession {
     }
 
     this.end();
-    announce(this.formatMessage('dropComplete'));
+    announce(this.stringFormatter.format('dropComplete'));
   }
 
   activate() {
@@ -523,3 +555,19 @@ function findValidDropTargets(options: DragTarget) {
     return true;
   });
 }
+
+function isVirtualPointerEvent(event: PointerEvent) {
+  // If the pointer size is zero, then we assume it's from a screen reader.
+  // Android TalkBack double tap will sometimes return a event with width and height of 1
+  // and pointerType === 'mouse' so we need to check for a specific combination of event attributes.
+  // Cannot use "event.pressure === 0" as the sole check due to Safari pointer events always returning pressure === 0
+  // instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216
+  return (
+    (event.width === 0 && event.height === 0) ||
+    (event.width === 1 &&
+      event.height === 1 &&
+      event.pressure === 0 &&
+      event.detail === 0
+    )
+  );
+}

package/src/DragPreview.tsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {DragItem, DragPreviewRenderer} from '@react-types/shared';
+import {flushSync} from 'react-dom';
+import React, {RefObject, useImperativeHandle, useRef, useState} from 'react';
+
+export interface DragPreviewProps {
+  children: (items: DragItem[]) => JSX.Element
+}
+
+function DragPreview(props: DragPreviewProps, ref: RefObject<DragPreviewRenderer>) {
+  let render = props.children;
+  let [children, setChildren] = useState<JSX.Element>(null);
+  let domRef = useRef(null);
+
+  useImperativeHandle(ref, () => (items: DragItem[], callback: (node: HTMLElement) => void) => {
+    // This will be called during the onDragStart event by useDrag. We need to render the
+    // preview synchronously before this event returns so we can call event.dataTransfer.setDragImage.
+    flushSync(() => {
+      setChildren(render(items));
+    });
+
+    // Yield back to useDrag to set the drag image.
+    callback(domRef.current);
+
+    // Remove the preview from the DOM after a frame so the browser has time to paint.
+    requestAnimationFrame(() => {
+      setChildren(null);
+    });
+  }, [render]);
+
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <div style={{zIndex: -100, position: 'absolute', top: 0, left: -100000}} ref={domRef}>
+      {children}
+    </div>
+  );
+}
+
+let _DragPreview = React.forwardRef(DragPreview);
+export {_DragPreview as DragPreview};

package/src/constants.ts

@@ -10,6 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+import {DropOperation} from '@react-types/shared';
+
 export enum DROP_OPERATION {
   none = 0,
   cancel = 0,
@@ -31,7 +33,7 @@ export const DROP_OPERATION_ALLOWED = {
 
 export const EFFECT_ALLOWED = invert(DROP_OPERATION_ALLOWED);
 export const DROP_EFFECT = invert(DROP_OPERATION);
-export const DROP_EFFECT_TO_DROP_OPERATION = {
+export const DROP_EFFECT_TO_DROP_OPERATION: {[name: string]: DropOperation} = {
   none: 'cancel',
   link: 'link',
   copy: 'copy',

package/src/index.ts

@@ -10,10 +10,20 @@
  * governing permissions and limitations under the License.
  */
 
-export * from './useDrag';
-export * from './useDrop';
-export * from './useDroppableCollection';
-export * from './useDroppableItem';
-export * from './useDropIndicator';
-export * from './useDraggableItem';
-export * from './useClipboard';
+export type {DroppableCollectionOptions, DroppableCollectionResult} from './useDroppableCollection';
+export type {DroppableItemOptions, DroppableItemResult} from './useDroppableItem';
+export type {DropIndicatorProps, DropIndicatorAria} from './useDropIndicator';
+export type {DraggableItemProps, DraggableItemResult} from './useDraggableItem';
+export type {DragPreviewProps} from './DragPreview';
+export type {DragOptions, DragResult} from './useDrag';
+export type {DropOptions, DropResult} from './useDrop';
+export type {ClipboardProps, ClipboardResult} from './useClipboard';
+
+export {useDrag} from './useDrag';
+export {useDrop} from './useDrop';
+export {useDroppableCollection} from './useDroppableCollection';
+export {useDroppableItem} from './useDroppableItem';
+export {useDropIndicator} from './useDropIndicator';
+export {useDraggableItem} from './useDraggableItem';
+export {useClipboard} from './useClipboard';
+export {DragPreview} from './DragPreview';

package/src/useClipboard.ts

@@ -11,20 +11,20 @@
  */
 
 import {chain} from '@react-aria/utils';
-import {DragItem, DropItem} from '@react-types/shared';
-import {HTMLAttributes, useEffect, useRef} from 'react';
+import {DOMAttributes, DragItem, DropItem} from '@react-types/shared';
 import {readFromDataTransfer, writeToDataTransfer} from './utils';
+import {useEffect, useRef} from 'react';
 import {useFocus} from '@react-aria/interactions';
 
-interface ClipboardProps {
+export interface ClipboardProps {
   getItems?: () => DragItem[],
   onCopy?: () => void,
   onCut?: () => void,
   onPaste?: (items: DropItem[]) => void
 }
 
-interface ClipboardResult {
-  clipboardProps: HTMLAttributes<HTMLElement>
+export interface ClipboardResult {
+  clipboardProps: DOMAttributes
 }
 
 const globalEvents = new Map();