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

package/dist/module.js

@@ -1,10 +1,10 @@
-import {useRef as $fP8tg$useRef, useState as $fP8tg$useState, useEffect as $fP8tg$useEffect, useCallback as $fP8tg$useCallback} from "react";
-import $fP8tg$reactdom from "react-dom";
+import $fP8tg$react, {useRef as $fP8tg$useRef, useState as $fP8tg$useState, useEffect as $fP8tg$useEffect, useCallback as $fP8tg$useCallback, useImperativeHandle as $fP8tg$useImperativeHandle} from "react";
 import {useGlobalListeners as $fP8tg$useGlobalListeners, useDescription as $fP8tg$useDescription, useId as $fP8tg$useId, useLayoutEffect as $fP8tg$useLayoutEffect, mergeProps as $fP8tg$mergeProps, getScrollParent as $fP8tg$getScrollParent, isWebKit as $fP8tg$isWebKit, isIOS as $fP8tg$isIOS, chain as $fP8tg$chain} from "@react-aria/utils";
 import {useMessageFormatter as $fP8tg$useMessageFormatter} from "@react-aria/i18n";
 import {announce as $fP8tg$announce} from "@react-aria/live-announcer";
 import {ariaHideOutside as $fP8tg$ariaHideOutside} from "@react-aria/overlays";
 import {useInteractionModality as $fP8tg$useInteractionModality, getInteractionModality as $fP8tg$getInteractionModality, setInteractionModality as $fP8tg$setInteractionModality, useFocus as $fP8tg$useFocus} from "@react-aria/interactions";
+import {flushSync as $fP8tg$flushSync} from "react-dom";
 
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
@@ -347,6 +347,7 @@ class $67560de7c78cb232$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 $67560de7c78cb232$var$CANCELED_EVENTS)document.addEventListener(event, this.cancelEvent, true);
         this.mutationObserver = new MutationObserver(()=>this.updateValidDropTargets()
         );
@@ -358,6 +359,7 @@ class $67560de7c78cb232$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 $67560de7c78cb232$var$CANCELED_EVENTS)document.removeEventListener(event, this.cancelEvent, true);
         this.mutationObserver.disconnect();
         this.restoreAriaHidden();
@@ -407,19 +409,26 @@ class $67560de7c78cb232$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 = $67560de7c78cb232$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 = $67560de7c78cb232$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 = $67560de7c78cb232$var$isVirtualPointerEvent(e);
+    }
     cancelEvent(e) {
         var ref;
         // Allow focusin and focusout on the drag target so focus ring works properly.
@@ -604,6 +613,7 @@ class $67560de7c78cb232$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);
     }
 }
@@ -617,6 +627,14 @@ function $67560de7c78cb232$var$findValidDropTargets(options) {
         return true;
     });
 }
+function $67560de7c78cb232$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;
+}
 
 
 
@@ -799,7 +817,6 @@ $c530af5bd0e7e6c6$exports = {
 
 
 
-
 const $8253ed7ece74b463$var$MESSAGES = {
     keyboard: {
         start: 'dragDescriptionKeyboard',
@@ -825,6 +842,13 @@ function $8253ed7ece74b463$export$7941f8aafa4b6021(options) {
     let [isDragging, setDragging] = $fP8tg$useState(false);
     let { addGlobalListener: addGlobalListener , removeAllGlobalListeners: removeAllGlobalListeners  } = $fP8tg$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();
         $7252cd45fc48c07c$export$f9c1490890ddd063(e1.dataTransfer, items);
         if (typeof options.getAllowedDropOperations === 'function') {
@@ -833,38 +857,25 @@ function $8253ed7ece74b463$export$7941f8aafa4b6021(options) {
             for (let operation of allowedOperations)allowed |= $103790afe9474d1c$export$60b7b4bcf3903d8e[operation] || $103790afe9474d1c$export$60b7b4bcf3903d8e.none;
             e1.dataTransfer.effectAllowed = $103790afe9474d1c$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.
-                $fP8tg$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 (!$67560de7c78cb232$export$7454aff2e161f241(e.target)) {
@@ -876,11 +887,6 @@ function $8253ed7ece74b463$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
@@ -1253,10 +1259,6 @@ function $4b52e4eff84e5217$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') {
@@ -1706,9 +1708,7 @@ function $fd98cf7cbf233429$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);
         },
@@ -1720,12 +1720,12 @@ function $fd98cf7cbf233429$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 : ''
@@ -1828,5 +1828,41 @@ function $9fcc7f0d70d084ee$export$2314ca2a3e892862(options1) {
 
 
 
-export {$8253ed7ece74b463$export$7941f8aafa4b6021 as useDrag, $5c06e4929e123553$export$ccdee5eaf73cf661 as useDrop, $4b52e4eff84e5217$export$f4e2f423c21f7b04 as useDroppableCollection, $bfaab576ce1c580e$export$f7b0c5d28b66b6a5 as useDroppableItem, $ddf25448c71fc93a$export$8d0e41d2815afac5 as useDropIndicator, $fd98cf7cbf233429$export$b35afafff42da2d9 as useDraggableItem, $9fcc7f0d70d084ee$export$2314ca2a3e892862 as useClipboard};
+function $ad0e3f3d9c50e4ba$var$DragPreview(props, ref) {
+    let render = props.children;
+    let [children, setChildren] = $fP8tg$useState(null);
+    let domRef = $fP8tg$useRef(null);
+    $fP8tg$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.
+            $fP8tg$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__*/ $fP8tg$react.createElement("div", {
+        style: {
+            zIndex: -100,
+            position: 'absolute',
+            top: 0,
+            left: -100000
+        },
+        ref: domRef
+    }, children));
+}
+let $ad0e3f3d9c50e4ba$export$905ab40ac2179daa = /*#__PURE__*/ $fP8tg$react.forwardRef($ad0e3f3d9c50e4ba$var$DragPreview);
+
+
+
+
+export {$ad0e3f3d9c50e4ba$export$905ab40ac2179daa as DragPreview, $8253ed7ece74b463$export$7941f8aafa4b6021 as useDrag, $5c06e4929e123553$export$ccdee5eaf73cf661 as useDrop, $4b52e4eff84e5217$export$f4e2f423c21f7b04 as useDroppableCollection, $bfaab576ce1c580e$export$f7b0c5d28b66b6a5 as useDroppableItem, $ddf25448c71fc93a$export$8d0e41d2815afac5 as useDropIndicator, $fd98cf7cbf233429$export$b35afafff42da2d9 as useDraggableItem, $9fcc7f0d70d084ee$export$2314ca2a3e892862 as useClipboard};
 //# sourceMappingURL=module.js.map