@react-aria/dnd - npm Package Compare versions

Comparing version 3.0.0-alpha.7 to 3.0.0-alpha.8

package.json

 {
   "name": "@react-aria/dnd",
-  "version": "3.0.0-alpha.7",
+  "version": "3.0.0-alpha.8",
   "description": "Spectrum UI components in React",
@@ -21,12 +21,12 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/i18n": "^3.3.8",
-    "@react-aria/interactions": "^3.8.3",
-    "@react-aria/live-announcer": "^3.0.5",
-    "@react-aria/overlays": "^3.8.1",
-    "@react-aria/utils": "^3.11.3",
-    "@react-aria/visually-hidden": "^3.2.7",
-    "@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.3.9",
+    "@react-aria/interactions": "^3.8.4",
+    "@react-aria/live-announcer": "^3.0.6",
+    "@react-aria/overlays": "^3.8.2",
+    "@react-aria/utils": "^3.12.0",
+    "@react-aria/visually-hidden": "^3.2.8",
+    "@react-stately/dnd": "3.0.0-alpha.6",
+    "@react-stately/selection": "^3.9.4",
+    "@react-types/button": "^3.4.5",
+    "@react-types/shared": "^3.12.0"
   },
@@ -40,3 +40,3 @@ "peerDependencies": {
   },
-  "gitHead": "e7708349a637642a30d33a11ca4a75ad5829eaa3"
+  "gitHead": "6a503b715e0dbbf92038cd7f08b1bcdde4c78e82"
 }

src/DragManager.ts

@@ -159,2 +159,3 @@ /*
   private formatMessage: (key: string) => string;
+  private isVirtualClick: boolean;
 
@@ -169,2 +170,3 @@ constructor(target: DragTarget, formatMessage: (key: string) => string) {
     this.onClick = this.onClick.bind(this);
+    this.onPointerDown = this.onPointerDown.bind(this);
     this.cancelEvent = this.cancelEvent.bind(this);
@@ -178,2 +180,3 @@ }
     document.addEventListener('click', this.onClick, true);
+    document.addEventListener('pointerdown', this.onPointerDown, true);
 
@@ -197,2 +200,3 @@ for (let event of CANCELED_EVENTS) {
     document.removeEventListener('click', this.onClick, true);
+    document.removeEventListener('pointerdown', this.onPointerDown, true);
 
@@ -283,18 +287,22 @@ for (let event of CANCELED_EVENTS) {
     this.cancelEvent(e);
+    if (e.detail === 0 || this.isVirtualClick) {
+      if (e.target === this.dragTarget.element) {
+        this.cancel();
+        return;
+      }
 
-    if (e.detail !== 0) {
-      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);
+      }
     }
+  }
 
-    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);
-    }
+  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);
   }
@@ -546,1 +554,17 @@
 }
+
+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
+    )
+  );
+}

src/useDrag.ts

@@ -109,2 +109,6 @@ /*
 
+        // 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`;
+        
         e.dataTransfer.setDragImage(node, x, y);
@@ -111,0 +115,0 @@

src/useDraggableItem.ts

@@ -51,7 +51,7 @@ /*
   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 {
@@ -58,0 +58,0 @@ message = formatMessage('dragItem', {itemText: item?.textValue ?? ''});

No alert changes

Improved metrics

Total package byte prevSize

808177

increased by1.16%

Lines of code

6055

increased by1.15%

Dependency changes

• + Added@react-stately/dnd@3.0.0-alpha.6(transitive)

• - Removed@react-stately/dnd@3.0.0-alpha.5(transitive)

• Updated@react-aria/i18n@^3.3.9

• Updated@react-aria/interactions@^3.8.4

• Updated@react-aria/live-announcer@^3.0.6

• Updated@react-aria/overlays@^3.8.2

• Updated@react-aria/utils@^3.12.0

• Updated@react-aria/visually-hidden@^3.2.8

• Updated@react-stately/dnd@3.0.0-alpha.6

• Updated@react-stately/selection@^3.9.4

• Updated@react-types/button@^3.4.5

• Updated@react-types/shared@^3.12.0