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

package/dist/main.js

@@ -1,11 +1,14 @@
 var $4vY0V$react = require("react");
-var $4vY0V$reactdom = require("react-dom");
 var $4vY0V$reactariautils = require("@react-aria/utils");
 var $4vY0V$reactariai18n = require("@react-aria/i18n");
 var $4vY0V$reactarialiveannouncer = require("@react-aria/live-announcer");
 var $4vY0V$reactariaoverlays = require("@react-aria/overlays");
 var $4vY0V$reactariainteractions = require("@react-aria/interactions");
+var $4vY0V$reactdom = require("react-dom");
 
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
 function $parcel$exportWildcard(dest, source) {
   Object.keys(source).forEach(function(key) {
     if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
@@ -25,9 +28,8 @@ function $parcel$exportWildcard(dest, source) {
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
+
+$parcel$export(module.exports, "DragPreview", () => $2dccaca1f4baa446$export$905ab40ac2179daa);
 var $dc204e8ec58447a6$exports = {};
 
 $parcel$export($dc204e8ec58447a6$exports, "useDrag", () => $dc204e8ec58447a6$export$7941f8aafa4b6021);
@@ -363,6 +365,7 @@ class $28e10663603f5ea1$var$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 $28e10663603f5ea1$var$CANCELED_EVENTS)document.addEventListener(event, this.cancelEvent, true);
         this.mutationObserver = new MutationObserver(()=>this.updateValidDropTargets()
         );
@@ -374,6 +377,7 @@ class $28e10663603f5ea1$var$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 $28e10663603f5ea1$var$CANCELED_EVENTS)document.removeEventListener(event, this.cancelEvent, true);
         this.mutationObserver.disconnect();
         this.restoreAriaHidden();
@@ -423,19 +427,26 @@ class $28e10663603f5ea1$var$DragSession {
     }
     onClick(e) {
         this.cancelEvent(e);
-        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)
-        );
-        if (dropTarget) {
-            let item = $28e10663603f5ea1$var$dropItems.get(e.target);
-            this.setCurrentDropTarget(dropTarget, item);
-            this.drop(item);
+        if (e.detail === 0 || this.isVirtualClick) {
+            if (e.target === this.dragTarget.element) {
+                this.cancel();
+                return;
+            }
+            let dropTarget = this.validDropTargets.find((target)=>target.element.contains(e.target)
+            );
+            if (dropTarget) {
+                let item = $28e10663603f5ea1$var$dropItems.get(e.target);
+                this.setCurrentDropTarget(dropTarget, item);
+                this.drop(item);
+            }
         }
     }
+    onPointerDown(e) {
+        // 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 = $28e10663603f5ea1$var$isVirtualPointerEvent(e);
+    }
     cancelEvent(e) {
         var ref;
         // Allow focusin and focusout on the drag target so focus ring works properly.
@@ -620,6 +631,7 @@ class $28e10663603f5ea1$var$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);
     }
 }
@@ -633,6 +645,14 @@ function $28e10663603f5ea1$var$findValidDropTargets(options) {
         return true;
     });
 }
+function $28e10663603f5ea1$var$isVirtualPointerEvent(event) {
+    // 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;
+}
 
 
 
@@ -815,7 +835,6 @@ $d624b4da796f302a$exports = {
 
 
 
-
 const $dc204e8ec58447a6$var$MESSAGES = {
     keyboard: {
         start: 'dragDescriptionKeyboard',
@@ -841,6 +860,13 @@ function $dc204e8ec58447a6$export$7941f8aafa4b6021(options) {
     let [isDragging, setDragging] = $4vY0V$react.useState(false);
     let { addGlobalListener: addGlobalListener , removeAllGlobalListeners: removeAllGlobalListeners  } = $4vY0V$reactariautils.useGlobalListeners();
     let onDragStart = (e1)=>{
+        var ref;
+        if (e1.defaultPrevented) return;
+        if (typeof options.onDragStart === 'function') options.onDragStart({
+            type: 'dragstart',
+            x: e1.clientX,
+            y: e1.clientY
+        });
         let items = options.getItems();
         $4620ae0dc40f0031$export$f9c1490890ddd063(e1.dataTransfer, items);
         if (typeof options.getAllowedDropOperations === 'function') {
@@ -849,38 +875,25 @@ function $dc204e8ec58447a6$export$7941f8aafa4b6021(options) {
             for (let operation of allowedOperations)allowed |= $76b1e110a27b1ccd$export$60b7b4bcf3903d8e[operation] || $76b1e110a27b1ccd$export$60b7b4bcf3903d8e.none;
             e1.dataTransfer.effectAllowed = $76b1e110a27b1ccd$export$dd0165308d8bff45[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.
-                ($parcel$interopDefault($4vY0V$reactdom)).render(preview, 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.
-                let size = node.getBoundingClientRect();
-                let rect = e1.currentTarget.getBoundingClientRect();
-                let x = e1.clientX - rect.x;
-                let y = e1.clientY - rect.y;
-                if (x > size.width || y > size.height) {
-                    x = size.width / 2;
-                    y = size.height / 2;
-                }
-                e1.dataTransfer.setDragImage(node, x, y);
-                // Remove the preview from the DOM after a frame so the browser has time to paint.
-                requestAnimationFrame(()=>{
-                    document.body.removeChild(node);
-                });
+        if (typeof ((ref = options.preview) === null || ref === void 0 ? void 0 : ref.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.
+            let size = node.getBoundingClientRect();
+            let rect = e1.currentTarget.getBoundingClientRect();
+            let x = e1.clientX - rect.x;
+            let y = e1.clientY - rect.y;
+            if (x > size.width || y > size.height) {
+                x = size.width / 2;
+                y = size.height / 2;
             }
-        }
+            // 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`;
+            e1.dataTransfer.setDragImage(node, x, y);
+        });
         // Enforce that drops are handled by useDrop.
         addGlobalListener(window, 'drop', (e)=>{
             if (!$28e10663603f5ea1$export$7454aff2e161f241(e.target)) {
@@ -892,11 +905,6 @@ function $dc204e8ec58447a6$export$7941f8aafa4b6021(options) {
             capture: true,
             once: true
         });
-        if (typeof options.onDragStart === 'function') options.onDragStart({
-            type: 'dragstart',
-            x: e1.clientX,
-            y: e1.clientY
-        });
         state.x = e1.clientX;
         state.y = e1.clientY;
         // Wait a frame before we set dragging to true so that the browser has time to
@@ -1269,10 +1277,6 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state1, ref2) {
                 localState.nextTarget = null;
                 return 'cancel';
             }
-            if (state1.isDropTarget(target)) {
-                localState.nextTarget = target;
-                return localState.dropOperation;
-            }
             localState.dropOperation = state1.getDropOperation(target, types, allowedOperations);
             // If the target doesn't accept the drop, see if the root accepts it instead.
             if (localState.dropOperation === 'cancel') {
@@ -1722,9 +1726,7 @@ function $0cbbd00cda972c67$export$b35afafff42da2d9(props, state) {
         getItems () {
             return state.getItems(props.key);
         },
-        renderPreview () {
-            return state.renderPreview(props.key);
-        },
+        preview: state.preview,
         onDragStart (e) {
             state.startDrag(props.key, e);
         },
@@ -1736,12 +1738,12 @@ function $0cbbd00cda972c67$export$b35afafff42da2d9(props, state) {
         }
     });
     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;
     var ref;
-    if (isSelected && numSelectedKeys > 1) message = formatMessage('dragSelectedItems', {
-        count: numSelectedKeys
+    if (isSelected && numKeysForDrag > 1) message = formatMessage('dragSelectedItems', {
+        count: numKeysForDrag
     });
     else message = formatMessage('dragItem', {
         itemText: (ref = item === null || item === void 0 ? void 0 : item.textValue) !== null && ref !== void 0 ? ref : ''
@@ -1842,6 +1844,42 @@ function $74f3dedaa4d234b4$export$2314ca2a3e892862(options1) {
 }
 
 
+
+
+function $2dccaca1f4baa446$var$DragPreview(props, ref) {
+    let render = props.children;
+    let [children, setChildren] = $4vY0V$react.useState(null);
+    let domRef = $4vY0V$react.useRef(null);
+    $4vY0V$react.useImperativeHandle(ref, ()=>(items, callback)=>{
+            // 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.
+            $4vY0V$reactdom.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(/*#__PURE__*/ ($parcel$interopDefault($4vY0V$react)).createElement("div", {
+        style: {
+            zIndex: -100,
+            position: 'absolute',
+            top: 0,
+            left: -100000
+        },
+        ref: domRef
+    }, children));
+}
+let $2dccaca1f4baa446$export$905ab40ac2179daa = /*#__PURE__*/ ($parcel$interopDefault($4vY0V$react)).forwardRef($2dccaca1f4baa446$var$DragPreview);
+
+
 $parcel$exportWildcard(module.exports, $dc204e8ec58447a6$exports);
 $parcel$exportWildcard(module.exports, $1ca228bc9257ca16$exports);
 $parcel$exportWildcard(module.exports, $7f93a158ac20b90a$exports);