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

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/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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/dnd",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.4",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,16 +18,16 @@
   },
   "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"
+    "@react-aria/i18n": "^3.3.5",
+    "@react-aria/interactions": "^3.8.0",
+    "@react-aria/live-announcer": "^3.0.2",
+    "@react-aria/overlays": "^3.7.4",
+    "@react-aria/utils": "^3.11.1",
+    "@react-aria/visually-hidden": "^3.2.4",
+    "@react-stately/dnd": "3.0.0-alpha.3",
+    "@react-stately/selection": "^3.9.1",
+    "@react-types/button": "^3.4.2",
+    "@react-types/shared": "^3.11.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1",
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9920ffaa2596a03c4498a15cb940bd2f4ba5cd6a"
+  "gitHead": "54c2366c4f31bd4bf619126131cd583c12972acc"
 }

package/src/DragManager.ts

@@ -119,7 +119,9 @@ const CANCELED_EVENTS = [
   'touchstart',
   'touchmove',
   'touchend',
-  'keyup'
+  'keyup',
+  'focusin',
+  'focusout'
 ];
 
 const CLICK_EVENTS = [
@@ -166,17 +168,9 @@ class DragSession {
       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()]));

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/useDrop.ts

@@ -10,11 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {DragEvent, HTMLAttributes, RefObject, useLayoutEffect, useRef, useState} from 'react';
+import {DragEvent, HTMLAttributes, RefObject,  useRef, useState} from 'react';
 import * as DragManager from './DragManager';
 import {DragTypes, readFromDataTransfer} from './utils';
 import {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, DROP_OPERATION_ALLOWED, DROP_OPERATION_TO_DROP_EFFECT} from './constants';
 import {DropActivateEvent, DropEnterEvent, DropEvent, DropExitEvent, DropMoveEvent, DropOperation, DragTypes as IDragTypes} from '@react-types/shared';
+import {useLayoutEffect} from '@react-aria/utils';
 import {useVirtualDrop} from './useVirtualDrop';
 
 interface DropOptions {
@@ -43,12 +44,13 @@ export function useDrop(options: DropOptions): DropResult {
     x: 0,
     y: 0,
     dragEnterCount: 0,
-    dropEffect: 'none',
+    dropEffect: 'none' as DataTransfer['dropEffect'],
     dropActivateTimer: null
   }).current;
 
   let onDragOver = (e: DragEvent) => {
     e.preventDefault();
+    e.stopPropagation();
 
     if (e.clientX === state.x && e.clientY === state.y) {
       e.dataTransfer.dropEffect = state.dropEffect;
@@ -92,6 +94,7 @@ export function useDrop(options: DropOptions): DropResult {
   };
 
   let onDragEnter = (e: DragEvent) => {
+    e.stopPropagation();
     state.dragEnterCount++;
     if (state.dragEnterCount > 1) {
       return;
@@ -132,6 +135,7 @@ export function useDrop(options: DropOptions): DropResult {
   };
 
   let onDragLeave = (e: DragEvent) => {
+    e.stopPropagation();
     state.dragEnterCount--;
     if (state.dragEnterCount > 0) {
       return;
@@ -152,6 +156,7 @@ export function useDrop(options: DropOptions): DropResult {
 
   let onDrop = (e: DragEvent) => {
     e.preventDefault();
+    e.stopPropagation();
 
     if (typeof options.onDrop === 'function') {
       let dropOperation = DROP_EFFECT_TO_DROP_OPERATION[state.dropEffect];

package/src/useDroppableCollection.ts

@@ -10,12 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
+import {Collection, DropEvent, DropOperation, DroppableCollectionProps, DropPosition, DropTarget, KeyboardDelegate, Node} from '@react-types/shared';
 import * as DragManager from './DragManager';
-import {DropOperation, DroppableCollectionProps, DropPosition, DropTarget, KeyboardDelegate} from '@react-types/shared';
 import {DroppableCollectionState} from '@react-stately/dnd';
 import {getTypes} from './utils';
-import {HTMLAttributes, RefObject, useEffect, useRef} from 'react';
-import {mergeProps} from '@react-aria/utils';
+import {HTMLAttributes, Key, RefObject, useCallback, useEffect, useRef} from 'react';
+import {mergeProps, useLayoutEffect} from '@react-aria/utils';
+import {setInteractionModality} from '@react-aria/interactions';
 import {useAutoScroll} from './useAutoScroll';
 import {useDrop} from './useDrop';
 import {useDroppableCollectionId} from './utils';
@@ -29,6 +30,13 @@ interface DroppableCollectionResult {
   collectionProps: HTMLAttributes<HTMLElement>
 }
 
+interface DroppingState {
+  collection: Collection<Node<unknown>>,
+  focusedKey: Key,
+  selectedKeys: Set<Key>,
+  timeout: NodeJS.Timeout
+}
+
 const DROP_POSITIONS: DropPosition[] = ['before', 'on', 'after'];
 
 export function useDroppableCollection(props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>): DroppableCollectionResult {
@@ -96,18 +104,103 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
     },
     onDrop(e) {
       if (state.target && typeof props.onDrop === 'function') {
-        props.onDrop({
-          type: 'drop',
-          x: e.x, // todo
-          y: e.y,
-          target: state.target,
-          items: e.items,
-          dropOperation: e.dropOperation
-        });
+        onDrop(e, state.target);
       }
     }
   });
 
+  let droppingState = useRef<DroppingState>(null);
+  let onDrop = useCallback((e: DropEvent, target: DropTarget) => {
+    let {state} = localState;
+
+    // Focus the collection.
+    state.selectionManager.setFocused(true);
+
+    // Save some state of the collection/selection before the drop occurs so we can compare later.
+    let focusedKey = state.selectionManager.focusedKey;
+    droppingState.current = {
+      timeout: null,
+      focusedKey,
+      collection: state.collection,
+      selectedKeys: state.selectionManager.selectedKeys
+    };
+
+    localState.props.onDrop({
+      type: 'drop',
+      x: e.x, // todo
+      y: e.y,
+      target,
+      items: e.items,
+      dropOperation: e.dropOperation
+    });
+
+    // Wait for a short time period after the onDrop is called to allow the data to be read asynchronously
+    // and for React to re-render. If an insert occurs during this time, it will be selected/focused below.
+    // If items are not "immediately" inserted by the onDrop handler, the application will need to handle
+    // selecting and focusing those items themselves.
+    droppingState.current.timeout = setTimeout(() => {
+      // If focus didn't move already (e.g. due to an insert), and the user dropped on an item,
+      // focus that item and show the focus ring to give the user feedback that the drop occurred.
+      // Also show the focus ring if the focused key is not selected, e.g. in case of a reorder.
+      let {state} = localState;
+      if (state.selectionManager.focusedKey === focusedKey) {
+        if (target.type === 'item' && target.dropPosition === 'on' && state.collection.getItem(target.key) != null) {
+          state.selectionManager.setFocusedKey(target.key);
+          state.selectionManager.setFocused(true);
+          setInteractionModality('keyboard');
+        } else if (!state.selectionManager.isSelected(focusedKey)) {
+          setInteractionModality('keyboard');
+        }
+      }
+
+      droppingState.current = null;
+    }, 50);
+  }, [localState]);
+
+  // eslint-disable-next-line arrow-body-style
+  useEffect(() => {
+    return () => {
+      if (droppingState.current) {
+        clearTimeout(droppingState.current.timeout);
+      }
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    // If an insert occurs during a drop, we want to immediately select these items to give
+    // feedback to the user that a drop occurred. Only do this if the selection didn't change
+    // since the drop started so we don't override if the user or application did something.
+    if (
+      droppingState.current &&
+      state.selectionManager.isFocused &&
+      state.collection.size > droppingState.current.collection.size &&
+      state.selectionManager.isSelectionEqual(droppingState.current.selectedKeys)
+    ) {
+      let newKeys = new Set<Key>();
+      for (let key of state.collection.getKeys()) {
+        if (!droppingState.current.collection.getItem(key)) {
+          newKeys.add(key);
+        }
+      }
+
+      state.selectionManager.setSelectedKeys(newKeys);
+
+      // If the focused item didn't change since the drop occurred, also focus the first
+      // inserted item. If selection is disabled, then also show the focus ring so there
+      // is some indication that items were added.
+      if (state.selectionManager.focusedKey === droppingState.current.focusedKey) {
+        let first = newKeys.keys().next().value;
+        state.selectionManager.setFocusedKey(first);
+
+        if (state.selectionManager.selectionMode === 'none') {
+          setInteractionModality('keyboard');
+        }
+      }
+
+      droppingState.current = null;
+    }
+  });
+
   useEffect(() => {
     let getNextTarget = (target: DropTarget, wrap = true): DropTarget => {
       if (!target) {
@@ -120,6 +213,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       let nextKey = target.type === 'item'
         ? keyboardDelegate.getKeyBelow(target.key)
         : keyboardDelegate.getFirstKey();
+      let dropPosition: DropPosition = 'before';
 
       if (target.type === 'item') {
         let positionIndex = DROP_POSITIONS.indexOf(target.dropPosition);
@@ -131,6 +225,12 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
             dropPosition: nextDropPosition
           };
         }
+
+        // If the last drop position was 'after', then 'before' on the next key is equivalent.
+        // Switch to 'on' instead.
+        if (target.dropPosition === 'after') {
+          dropPosition = 'on';
+        }
       }
 
       if (nextKey == null) {
@@ -146,7 +246,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       return {
         type: 'item',
         key: nextKey,
-        dropPosition: DROP_POSITIONS[0]
+        dropPosition
       };
     };
 
@@ -155,6 +255,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       let nextKey = target?.type === 'item'
         ? keyboardDelegate.getKeyAbove(target.key)
         : keyboardDelegate.getLastKey();
+      let dropPosition: DropPosition = !target || target.type === 'root' ? 'after' : 'on';
 
       if (target?.type === 'item') {
         let positionIndex = DROP_POSITIONS.indexOf(target.dropPosition);
@@ -166,6 +267,12 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
             dropPosition: nextDropPosition
           };
         }
+
+        // If the last drop position was 'before', then 'after' on the previous key is equivalent.
+        // Switch to 'on' instead.
+        if (target.dropPosition === 'before') {
+          dropPosition = 'on';
+        }
       }
 
       if (nextKey == null) {
@@ -181,7 +288,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       return {
         type: 'item',
         key: nextKey,
-        dropPosition: !target || target.type === 'root' ? 'after' : 'on'
+        dropPosition
       };
     };
 
@@ -205,7 +312,6 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
           seenRoot++;
         }
       } while (
-        target &&
         operation === 'cancel' &&
         !localState.state.isDropTarget(target) &&
         seenRoot < 2
@@ -232,7 +338,52 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       },
       onDropEnter(e, drag) {
         let types = getTypes(drag.items);
-        let target = nextValidTarget(null, types, drag.allowedDropOperations, getNextTarget);
+        let selectionManager = localState.state.selectionManager;
+        let target: DropTarget;
+
+        // When entering the droppable collection for the first time, the default drop target
+        // is after the focused key.
+        let key = selectionManager.focusedKey;
+        let dropPosition: DropPosition = 'after';
+
+        // If the focused key is a cell, get the parent item instead.
+        // For now, we assume that individual cells cannot be dropped on.
+        let item = localState.state.collection.getItem(key);
+        if (item?.type === 'cell') {
+          key = item.parentKey;
+        }
+
+        // If the focused item is also selected, the default drop target is after the last selected item.
+        // But if the focused key is the first selected item, then default to before the first selected item.
+        // This is to make reordering lists slightly easier. If you select top down, we assume you want to
+        // move the items down. If you select bottom up, we assume you want to move the items up.
+        if (selectionManager.isSelected(key)) {
+          if (selectionManager.selectedKeys.size > 1 && selectionManager.firstSelectedKey === key) {
+            dropPosition = 'before';
+          } else {
+            key = selectionManager.lastSelectedKey;
+          }
+        }
+
+        if (key != null) {
+          target = {
+            type: 'item',
+            key,
+            dropPosition
+          };
+
+          // If the default target is not valid, find the next one that is.
+          if (localState.state.getDropOperation(target, types, drag.allowedDropOperations) === 'cancel') {
+            target = nextValidTarget(target, types, drag.allowedDropOperations, getNextTarget, false)
+              ?? nextValidTarget(target, types, drag.allowedDropOperations, getPreviousTarget, false);
+          }
+        }
+
+        // If no focused key, then start from the root.
+        if (!target) {
+          target = nextValidTarget(null, types, drag.allowedDropOperations, getNextTarget);
+        }
+
         localState.state.setTarget(target);
       },
       onDropExit() {
@@ -257,14 +408,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       },
       onDrop(e, target) {
         if (localState.state.target && typeof localState.props.onDrop === 'function') {
-          localState.props.onDrop({
-            type: 'drop',
-            x: e.x, // todo
-            y: e.y,
-            target: target || localState.state.target,
-            items: e.items,
-            dropOperation: e.dropOperation
-          });
+          onDrop(e, target || localState.state.target);
         }
       },
       onKeyDown(e, drag) {
@@ -382,7 +526,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         }
       }
     });
-  }, [localState, ref]);
+  }, [localState, ref, onDrop]);
 
   let id = useDroppableCollectionId(state);
   return {

package/src/utils.ts

@@ -154,7 +154,7 @@ export class DragTypes implements IDragTypes {
 
     // In Safari, when dragging files, the dataTransfer.items list is empty, but dataTransfer.types contains "Files".
     // Unfortunately, this doesn't tell us what types of files the user is dragging, so we need to assume that any
-    // type the user checks for is included.
+    // type the user checks for is included. See https://bugs.webkit.org/show_bug.cgi?id=223517.
     this.includesUnknownTypes = !hasFiles && dataTransfer.types.includes('Files');
   }
 
@@ -208,10 +208,11 @@ export function readFromDataTransfer(dataTransfer: DataTransfer) {
         if (typeof item.webkitGetAsEntry === 'function') {
           let entry: FileSystemEntry = item.webkitGetAsEntry();
           if (!entry) {
-            // For some reason, Chrome and Firefox include an item with type image/png when copy
-            // and pasting any file or directory (no matter the type), but return `null` for both
+            // For some reason, Firefox includes an item with type image/png when copy
+            // and pasting any file or directory (no matter the type), but returns `null` for both
             // item.getAsFile() and item.webkitGetAsEntry(). Safari works as expected. Ignore this
-            // item if this happens.
+            // item if this happens. See https://bugzilla.mozilla.org/show_bug.cgi?id=1699743.
+            // This was recently fixed in Chrome Canary: https://bugs.chromium.org/p/chromium/issues/detail?id=1175483.
             continue;
           }
 
@@ -276,25 +277,6 @@ function createDirectoryItem(entry: any): DirectoryItem {
   };
 }
 
-interface FileSystemFileEntry {
-  isFile: true,
-  isDirectory: false,
-  name: string,
-  file(successCallback: (file: File) => void, errorCallback?: (error: Error) => void): void
-}
-
-interface FileSystemDirectoryEntry {
-  isDirectory: true,
-  isFile: false,
-  name: string,
-  createReader(): FileSystemDirectoryReader
-}
-
-type FileSystemEntry = FileSystemFileEntry | FileSystemDirectoryEntry;
-interface FileSystemDirectoryReader {
-  readEntries(successCallback: (entries: FileSystemEntry[]) => void, errorCallback?: (error: Error) => void): void
-}
-
 async function *getEntries(item: FileSystemDirectoryEntry): AsyncIterable<FileItem | DirectoryItem> {
   let reader = item.createReader();
 
@@ -308,7 +290,7 @@ async function *getEntries(item: FileSystemDirectoryEntry): AsyncIterable<FileIt
 
     for (let entry of entries) {
       if (entry.isFile) {
-        let file = await getEntryFile(entry);
+        let file = await getEntryFile(entry as FileSystemFileEntry);
         yield createFileItem(file);
       } else if (entry.isDirectory) {
         yield createDirectoryItem(entry);