@react-aria/dnd 3.0.0-alpha.6 → 3.0.0-alpha.9

package/dist/types.d.ts

@@ -1,13 +1,13 @@
 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 { DragEndEvent, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, DropOperation, DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropMoveEvent, DragTypes, DroppableCollectionProps, DropTarget, KeyboardDelegate, DropItem } from "@react-types/shared";
+import React, { HTMLAttributes, RefObject, Key } from "react";
 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;
+    preview?: RefObject<DragPreviewRenderer>;
     getAllowedDropOperations?: () => DropOperation[];
 }
 interface DragResult {
@@ -31,25 +31,25 @@ interface DropResult {
     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;
@@ -71,5 +71,9 @@ interface ClipboardResult {
     clipboardProps: HTMLAttributes<HTMLElement>;
 }
 export function useClipboard(options: ClipboardProps): ClipboardResult;
+export interface DragPreviewProps {
+    children: (items: DragItem[]) => JSX.Element;
+}
+export let DragPreview: React.ForwardRefExoticComponent<DragPreviewProps & React.RefAttributes<DragPreviewRenderer>>;
 
 //# sourceMappingURL=types.d.ts.map

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","packages/@react-aria/dnd/src/index.ts"],"sourcesContent":[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 * from './useDrag';\nexport * from './useDrop';\nexport * from './useDroppableCollection';\nexport * from './useDroppableItem';\nexport * from './useDropIndicator';\nexport * from './useDraggableItem';\nexport * from './useClipboard';\n"],"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/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/DragPreview.tsx","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 * from './useDrag';\nexport * from './useDrop';\nexport * from './useDroppableCollection';\nexport * from './useDroppableItem';\nexport * from './useDropIndicator';\nexport * from './useDraggableItem';\nexport * from './useClipboard';\nexport {DragPreview} from './DragPreview';\n\nexport type {DragPreviewProps} 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.6",
+  "version": "3.0.0-alpha.9",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,23 +18,23 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-aria/i18n": "^3.3.7",
-    "@react-aria/interactions": "^3.8.2",
-    "@react-aria/live-announcer": "^3.0.4",
-    "@react-aria/overlays": "^3.8.0",
-    "@react-aria/utils": "^3.11.3",
-    "@react-aria/visually-hidden": "^3.2.6",
-    "@react-stately/dnd": "3.0.0-alpha.5",
-    "@react-stately/selection": "^3.9.3",
-    "@react-types/button": "^3.4.4",
-    "@react-types/shared": "^3.11.2"
+    "@react-aria/i18n": "^3.4.0",
+    "@react-aria/interactions": "^3.9.0",
+    "@react-aria/live-announcer": "^3.1.0",
+    "@react-aria/overlays": "^3.9.0",
+    "@react-aria/utils": "^3.13.0",
+    "@react-aria/visually-hidden": "^3.3.0",
+    "@react-stately/dnd": "3.0.0-alpha.7",
+    "@react-stately/selection": "^3.10.0",
+    "@react-types/button": "^3.5.0",
+    "@react-types/shared": "^3.13.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": "ed8d8d984c2f7f2c31e8b18795b97858a95e4729"
+  "gitHead": "8f921ec5094e7c2b3c301bcb6133372e35a2052b"
 }

package/src/DragManager.ts

@@ -156,6 +156,7 @@ class DragSession {
   private mutationImmediate: NodeJS.Immediate;
   private restoreAriaHidden: () => void;
   private formatMessage: (key: string) => string;
+  private isVirtualClick: boolean;
 
   constructor(target: DragTarget, formatMessage: (key: string) => string) {
     this.dragTarget = target;
@@ -165,6 +166,7 @@ class DragSession {
     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);
   }
 
@@ -173,6 +175,7 @@ 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);
@@ -191,6 +194,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);
@@ -276,22 +280,26 @@ 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) {
@@ -538,3 +546,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/index.ts

@@ -17,3 +17,6 @@ export * from './useDroppableItem';
 export * from './useDropIndicator';
 export * from './useDraggableItem';
 export * from './useClipboard';
+export {DragPreview} from './DragPreview';
+
+export type {DragPreviewProps} from './DragPreview';

package/src/useDrag.ts

@@ -11,13 +11,12 @@
  */
 
 import {AriaButtonProps} from '@react-types/button';
-import {DragEndEvent, DragItem, DragMoveEvent, DragStartEvent, DropOperation, PressEvent} from '@react-types/shared';
-import {DragEvent, HTMLAttributes, useRef, useState} from 'react';
+import {DragEndEvent, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, DropOperation, PressEvent} from '@react-types/shared';
+import {DragEvent, HTMLAttributes, RefObject, useRef, useState} from 'react';
 import * as DragManager from './DragManager';
 import {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, EFFECT_ALLOWED} from './constants';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import ReactDOM from 'react-dom';
 import {useDescription, useGlobalListeners} from '@react-aria/utils';
 import {useDragModality} from './utils';
 import {useMessageFormatter} from '@react-aria/i18n';
@@ -28,7 +27,7 @@ interface DragOptions {
   onDragMove?: (e: DragMoveEvent) => void,
   onDragEnd?: (e: DragEndEvent) => void,
   getItems: () => DragItem[],
-  renderPreview?: (items: DragItem[]) => JSX.Element,
+  preview?: RefObject<DragPreviewRenderer>,
   getAllowedDropOperations?: () => DropOperation[]
 }
 
@@ -65,6 +64,18 @@ export function useDrag(options: DragOptions): DragResult {
   let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();
 
   let onDragStart = (e: DragEvent) => {
+    if (e.defaultPrevented) {
+      return;
+    }
+
+    if (typeof options.onDragStart === 'function') {
+      options.onDragStart({
+        type: 'dragstart',
+        x: e.clientX,
+        y: e.clientY
+      });
+    }
+
     let items = options.getItems();
     writeToDataTransfer(e.dataTransfer, items);
 
@@ -78,22 +89,10 @@ export function useDrag(options: DragOptions): DragResult {
       e.dataTransfer.effectAllowed = EFFECT_ALLOWED[allowed] || 'none';
     }
 
-    // If there is a renderPreview function, use it to render a custom preview image that will
+    // If there is a preview option, use it to render a custom preview image that will
     // appear under the pointer while dragging. If not, the element itself is dragged by the browser.
-    if (typeof options.renderPreview === 'function') {
-      let preview = options.renderPreview(items);
-      if (preview) {
-        // Create an off-screen div to render the preview into.
-        let node = document.createElement('div');
-        node.style.zIndex = '-100';
-        node.style.position = 'absolute';
-        node.style.top = '0';
-        node.style.left = '-100000px';
-        document.body.appendChild(node);
-
-        // Call renderPreview to get a JSX element, and render it into the div with React DOM.
-        ReactDOM.render(preview, node);
-
+    if (typeof options.preview?.current === 'function') {
+      options.preview.current(items, node => {
         // Compute the offset that the preview will appear under the mouse.
         // If possible, this is based on the point the user clicked on the target.
         // If the preview is much smaller, then just use the center point of the preview.
@@ -106,13 +105,12 @@ export function useDrag(options: DragOptions): DragResult {
           y = size.height / 2;
         }
 
-        e.dataTransfer.setDragImage(node, x, y);
+        // Rounding height to an even number prevents blurry preview seen on some screens
+        let height = 2 * Math.round(rect.height / 2);
+        node.style.height = `${height}px`;
 
-        // Remove the preview from the DOM after a frame so the browser has time to paint.
-        requestAnimationFrame(() => {
-          document.body.removeChild(node);
-        });
-      }
+        e.dataTransfer.setDragImage(node, x, y);
+      });
     }
 
     // Enforce that drops are handled by useDrop.
@@ -124,14 +122,6 @@ export function useDrag(options: DragOptions): DragResult {
       }
     }, {capture: true, once: true});
 
-    if (typeof options.onDragStart === 'function') {
-      options.onDragStart({
-        type: 'dragstart',
-        x: e.clientX,
-        y: e.clientY
-      });
-    }
-
     state.x = e.clientX;
     state.y = e.clientY;
 

package/src/useDraggableItem.ts

@@ -33,9 +33,7 @@ export function useDraggableItem(props: DraggableItemProps, state: DraggableColl
     getItems() {
       return state.getItems(props.key);
     },
-    renderPreview() {
-      return state.renderPreview(props.key);
-    },
+    preview: state.preview,
     onDragStart(e) {
       state.startDrag(props.key, e);
     },
@@ -48,11 +46,11 @@ export function useDraggableItem(props: DraggableItemProps, state: DraggableColl
   });
 
   let item = state.collection.getItem(props.key);
-  let numSelectedKeys = state.selectionManager.selectedKeys.size;
+  let numKeysForDrag = state.getKeysForDrag(props.key).size;
   let isSelected = state.selectionManager.isSelected(props.key);
   let message: string;
-  if (isSelected && numSelectedKeys > 1) {
-    message = formatMessage('dragSelectedItems', {count: numSelectedKeys});
+  if (isSelected && numKeysForDrag > 1) {
+    message = formatMessage('dragSelectedItems', {count: numKeysForDrag});
   } else {
     message = formatMessage('dragItem', {itemText: item?.textValue ?? ''});
   }

package/src/useDropIndicator.ts

@@ -21,11 +21,11 @@ import {useDroppableItem} from './useDroppableItem';
 import {useId} from '@react-aria/utils';
 import {useMessageFormatter} from '@react-aria/i18n';
 
-interface DropIndicatorProps {
+export interface DropIndicatorProps {
   target: DropTarget
 }
 
-interface DropIndicatorAria {
+export interface DropIndicatorAria {
   dropIndicatorProps: HTMLAttributes<HTMLElement>
 }
 

package/src/useDroppableCollection.ts

@@ -21,12 +21,12 @@ import {useAutoScroll} from './useAutoScroll';
 import {useDrop} from './useDrop';
 import {useDroppableCollectionId} from './utils';
 
-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>
 }
 
@@ -68,11 +68,6 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         return 'cancel';
       }
 
-      if (state.isDropTarget(target)) {
-        localState.nextTarget = target;
-        return localState.dropOperation;
-      }
-
       localState.dropOperation = state.getDropOperation(target, types, allowedOperations);
 
       // If the target doesn't accept the drop, see if the root accepts it instead.

package/src/useDroppableItem.ts

@@ -17,11 +17,11 @@ import {getTypes} from './utils';
 import {HTMLAttributes, RefObject, useEffect} from 'react';
 import {useVirtualDrop} from './useVirtualDrop';
 
-interface DroppableItemOptions {
+export interface DroppableItemOptions {
   target: DropTarget
 }
 
-interface DroppableItemResult {
+export interface DroppableItemResult {
   dropProps: HTMLAttributes<HTMLElement>
 }