@react-aria/dnd 3.0.0-alpha.11 → 3.0.0-alpha.12

package/dist/main.js

@@ -21,6 +21,7 @@ $parcel$export(module.exports, "useDropIndicator", () => $c5557edbed563ebf$expor
 $parcel$export(module.exports, "useDraggableItem", () => $0cbbd00cda972c67$export$b35afafff42da2d9);
 $parcel$export(module.exports, "useClipboard", () => $74f3dedaa4d234b4$export$2314ca2a3e892862);
 $parcel$export(module.exports, "DragPreview", () => $2dccaca1f4baa446$export$905ab40ac2179daa);
+$parcel$export(module.exports, "ListDropTargetDelegate", () => $2268795bbb597ecb$export$fbd65d14c79e28cc);
 
 
 
@@ -285,12 +286,15 @@ function $28e10663603f5ea1$export$aef80212ac99c003(item) {
         $28e10663603f5ea1$var$dropItems.delete(item.element);
     };
 }
-function $28e10663603f5ea1$export$549dbcf8649bf3b2(target, stringFormatter) {
+function $28e10663603f5ea1$export$549dbcf8649bf3b2(target1, stringFormatter) {
     if ($28e10663603f5ea1$var$dragSession) throw new Error('Cannot begin dragging while already dragging');
-    $28e10663603f5ea1$var$dragSession = new $28e10663603f5ea1$var$DragSession(target, stringFormatter);
+    $28e10663603f5ea1$var$dragSession = new $28e10663603f5ea1$var$DragSession(target1, stringFormatter);
     requestAnimationFrame(()=>{
         $28e10663603f5ea1$var$dragSession.setup();
-        if ($4620ae0dc40f0031$export$1fb2158d224b542c() === 'keyboard' || $4620ae0dc40f0031$export$1fb2158d224b542c() === 'touch' && $4vY0V$reactariainteractions.getInteractionModality() === 'virtual') $28e10663603f5ea1$var$dragSession.next();
+        if ($4620ae0dc40f0031$export$1fb2158d224b542c() === 'keyboard' || $4620ae0dc40f0031$export$1fb2158d224b542c() === 'touch' && $4vY0V$reactariainteractions.getInteractionModality() === 'virtual') {
+            let target = $28e10663603f5ea1$var$dragSession.findNearestDropTarget();
+            $28e10663603f5ea1$var$dragSession.setCurrentDropTarget(target);
+        }
     });
     for (let cb of $28e10663603f5ea1$var$subscriptions)cb();
 }
@@ -516,6 +520,22 @@ class $28e10663603f5ea1$var$DragSession {
             } else this.setCurrentDropTarget(this.validDropTargets[this.validDropTargets.length - 1]);
         } else this.setCurrentDropTarget(this.validDropTargets[index - 1]);
     }
+    findNearestDropTarget() {
+        let dragTargetRect = this.dragTarget.element.getBoundingClientRect();
+        let minDistance = Infinity;
+        let nearest = null;
+        for (let dropTarget of this.validDropTargets){
+            let rect = dropTarget.element.getBoundingClientRect();
+            let dx = rect.left - dragTargetRect.left;
+            let dy = rect.top - dragTargetRect.top;
+            let dist = dx * dx + dy * dy;
+            if (dist < minDistance) {
+                minDistance = dist;
+                nearest = dropTarget;
+            }
+        }
+        return nearest;
+    }
     setCurrentDropTarget(dropTarget, item) {
         if (dropTarget !== this.currentDropTarget) {
             if (this.currentDropTarget && typeof this.currentDropTarget.onDropExit === 'function') {
@@ -2102,28 +2122,66 @@ function $1ca228bc9257ca16$export$ccdee5eaf73cf661(options) {
     let state = $4vY0V$react.useRef({
         x: 0,
         y: 0,
-        dragEnterCount: 0,
+        dragOverElements: new Set(),
         dropEffect: 'none',
+        effectAllowed: 'none',
         dropActivateTimer: null
     }).current;
+    let fireDropEnter = (e)=>{
+        setDropTarget(true);
+        if (typeof options.onDropEnter === 'function') {
+            let rect = e.currentTarget.getBoundingClientRect();
+            options.onDropEnter({
+                type: 'dropenter',
+                x: e.clientX - rect.x,
+                y: e.clientY - rect.y
+            });
+        }
+    };
+    let fireDropExit = (e)=>{
+        setDropTarget(false);
+        if (typeof options.onDropExit === 'function') {
+            let rect = e.currentTarget.getBoundingClientRect();
+            options.onDropExit({
+                type: 'dropexit',
+                x: e.clientX - rect.x,
+                y: e.clientY - rect.y
+            });
+        }
+    };
     let onDragOver = (e)=>{
         e.preventDefault();
         e.stopPropagation();
-        if (e.clientX === state.x && e.clientY === state.y) {
+        if (e.clientX === state.x && e.clientY === state.y && e.dataTransfer.effectAllowed === state.effectAllowed) {
             e.dataTransfer.dropEffect = state.dropEffect;
             return;
         }
         state.x = e.clientX;
         state.y = e.clientY;
+        let prevDropEffect = state.dropEffect;
+        // Update drop effect if allowed drop operations changed (e.g. user pressed modifier key).
+        if (e.dataTransfer.effectAllowed !== state.effectAllowed) {
+            let allowedOperations = $1ca228bc9257ca16$var$effectAllowedToOperations(e.dataTransfer.effectAllowed);
+            let dropOperation = allowedOperations[0];
+            if (typeof options.getDropOperation === 'function') {
+                let types = new $4620ae0dc40f0031$export$7f04ce188c91447c(e.dataTransfer);
+                dropOperation = $1ca228bc9257ca16$var$getDropOperation(e.dataTransfer.effectAllowed, options.getDropOperation(types, allowedOperations));
+            }
+            state.dropEffect = $76b1e110a27b1ccd$export$5eacb0769d26d3b2[dropOperation] || 'none';
+        }
         if (typeof options.getDropOperationForPoint === 'function') {
             let allowedOperations = $1ca228bc9257ca16$var$effectAllowedToOperations(e.dataTransfer.effectAllowed);
             let types = new $4620ae0dc40f0031$export$7f04ce188c91447c(e.dataTransfer);
             let rect = e.currentTarget.getBoundingClientRect();
-            let dropOperation = options.getDropOperationForPoint(types, allowedOperations, state.x - rect.x, state.y - rect.y);
+            let dropOperation = $1ca228bc9257ca16$var$getDropOperation(e.dataTransfer.effectAllowed, options.getDropOperationForPoint(types, allowedOperations, state.x - rect.x, state.y - rect.y));
             state.dropEffect = $76b1e110a27b1ccd$export$5eacb0769d26d3b2[dropOperation] || 'none';
         }
+        state.effectAllowed = e.dataTransfer.effectAllowed;
         e.dataTransfer.dropEffect = state.dropEffect;
-        if (typeof options.onDropMove === 'function') {
+        // If the drop operation changes, update state and fire events appropriately.
+        if (state.dropEffect === 'none' && prevDropEffect !== 'none') fireDropExit(e);
+        else if (state.dropEffect !== 'none' && prevDropEffect === 'none') fireDropEnter(e);
+        if (typeof options.onDropMove === 'function' && state.dropEffect !== 'none') {
             let rect = e.currentTarget.getBoundingClientRect();
             options.onDropMove({
                 type: 'dropmove',
@@ -2145,46 +2203,39 @@ function $1ca228bc9257ca16$export$ccdee5eaf73cf661(options) {
     };
     let onDragEnter = (e)=>{
         e.stopPropagation();
-        state.dragEnterCount++;
-        if (state.dragEnterCount > 1) return;
+        state.dragOverElements.add(e.target);
+        if (state.dragOverElements.size > 1) return;
         let allowedOperations = $1ca228bc9257ca16$var$effectAllowedToOperations(e.dataTransfer.effectAllowed);
         let dropOperation = allowedOperations[0];
         if (typeof options.getDropOperation === 'function') {
             let types = new $4620ae0dc40f0031$export$7f04ce188c91447c(e.dataTransfer);
-            dropOperation = options.getDropOperation(types, allowedOperations);
+            dropOperation = $1ca228bc9257ca16$var$getDropOperation(e.dataTransfer.effectAllowed, options.getDropOperation(types, allowedOperations));
         }
-        if (dropOperation !== 'cancel') setDropTarget(true);
         if (typeof options.getDropOperationForPoint === 'function') {
             let types = new $4620ae0dc40f0031$export$7f04ce188c91447c(e.dataTransfer);
             let rect = e.currentTarget.getBoundingClientRect();
-            dropOperation = options.getDropOperationForPoint(types, allowedOperations, e.clientX - rect.x, e.clientY - rect.y);
-        }
-        state.dropEffect = $76b1e110a27b1ccd$export$5eacb0769d26d3b2[dropOperation] || 'none';
-        e.dataTransfer.dropEffect = state.dropEffect;
-        if (typeof options.onDropEnter === 'function' && dropOperation !== 'cancel') {
-            let rect = e.currentTarget.getBoundingClientRect();
-            options.onDropEnter({
-                type: 'dropenter',
-                x: e.clientX - rect.x,
-                y: e.clientY - rect.y
-            });
+            dropOperation = $1ca228bc9257ca16$var$getDropOperation(e.dataTransfer.effectAllowed, options.getDropOperationForPoint(types, allowedOperations, e.clientX - rect.x, e.clientY - rect.y));
         }
         state.x = e.clientX;
         state.y = e.clientY;
+        state.effectAllowed = e.dataTransfer.effectAllowed;
+        state.dropEffect = $76b1e110a27b1ccd$export$5eacb0769d26d3b2[dropOperation] || 'none';
+        e.dataTransfer.dropEffect = state.dropEffect;
+        if (dropOperation !== 'cancel') fireDropEnter(e);
     };
     let onDragLeave = (e)=>{
         e.stopPropagation();
-        state.dragEnterCount--;
-        if (state.dragEnterCount > 0) return;
-        if (typeof options.onDropExit === 'function' && state.dropEffect !== 'none') {
-            let rect = e.currentTarget.getBoundingClientRect();
-            options.onDropExit({
-                type: 'dropexit',
-                x: e.clientX - rect.x,
-                y: e.clientY - rect.y
-            });
-        }
-        setDropTarget(false);
+        // We would use e.relatedTarget to detect if the drag is still inside the drop target,
+        // but it is always null in WebKit. https://bugs.webkit.org/show_bug.cgi?id=66547
+        // Instead, we track all of the targets of dragenter events in a set, and remove them
+        // in dragleave. When the set becomes empty, we've left the drop target completely.
+        // We must also remove any elements that are no longer in the DOM, because dragleave
+        // events will never be fired for these. This can happen, for example, with drop
+        // indicators between items, which disappear when the drop target changes.
+        state.dragOverElements.delete(e.target);
+        for (let element of state.dragOverElements)if (!e.currentTarget.contains(element)) state.dragOverElements.delete(element);
+        if (state.dragOverElements.size > 0) return;
+        if (state.dropEffect !== 'none') fireDropExit(e);
         clearTimeout(state.dropActivateTimer);
     };
     let onDrop = (e)=>{
@@ -2209,16 +2260,8 @@ function $1ca228bc9257ca16$export$ccdee5eaf73cf661(options) {
                 options.onDrop(event);
             }, 0);
         }
-        if (typeof options.onDropExit === 'function') {
-            let rect = e.currentTarget.getBoundingClientRect();
-            options.onDropExit({
-                type: 'dropexit',
-                x: e.clientX - rect.x,
-                y: e.clientY - rect.y
-            });
-        }
-        state.dragEnterCount = 0;
-        setDropTarget(false);
+        state.dragOverElements.clear();
+        fireDropExit(e);
         clearTimeout(state.dropActivateTimer);
     };
     let optionsRef = $4vY0V$react.useRef(options);
@@ -2264,6 +2307,11 @@ function $1ca228bc9257ca16$var$effectAllowedToOperations(effectAllowed) {
     if (allowedOperationsBits & $76b1e110a27b1ccd$export$60b7b4bcf3903d8e.link) allowedOperations.push('link');
     return allowedOperations;
 }
+function $1ca228bc9257ca16$var$getDropOperation(effectAllowed, operation) {
+    let allowedOperationsBits = $76b1e110a27b1ccd$export$9bbdfc78cf083e16[effectAllowed];
+    let op = $76b1e110a27b1ccd$export$60b7b4bcf3903d8e[operation];
+    return allowedOperationsBits & op ? operation : 'cancel';
+}
 
 
 
@@ -2341,22 +2389,23 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state1, ref2) {
     let autoScroll = $12cc069a1c69155b$export$6323452ca4533ed8(ref2);
     let { dropProps: dropProps  } = $1ca228bc9257ca16$export$ccdee5eaf73cf661({
         ref: ref2,
-        onDropEnter (e) {
-            let target = props.getDropTargetFromPoint(e.x, e.y);
-            state1.setTarget(target);
+        onDropEnter () {
+            state1.setTarget(localState.nextTarget);
         },
         onDropMove (e) {
             state1.setTarget(localState.nextTarget);
             autoScroll.move(e.x, e.y);
         },
         getDropOperationForPoint (types, allowedOperations, x, y) {
-            let target = props.getDropTargetFromPoint(x, y);
-            if (!target) {
+            let isValidDropTarget = (target)=>state1.getDropOperation(target, types, allowedOperations) !== 'cancel'
+            ;
+            let target1 = props.dropTargetDelegate.getDropTargetFromPoint(x, y, isValidDropTarget);
+            if (!target1) {
                 localState.dropOperation = 'cancel';
                 localState.nextTarget = null;
                 return 'cancel';
             }
-            localState.dropOperation = state1.getDropOperation(target, types, allowedOperations);
+            localState.dropOperation = state1.getDropOperation(target1, types, allowedOperations);
             // If the target doesn't accept the drop, see if the root accepts it instead.
             if (localState.dropOperation === 'cancel') {
                 let rootTarget = {
@@ -2364,11 +2413,11 @@ function $7f93a158ac20b90a$export$f4e2f423c21f7b04(props, state1, ref2) {
                 };
                 let dropOperation = state1.getDropOperation(rootTarget, types, allowedOperations);
                 if (dropOperation !== 'cancel') {
-                    target = rootTarget;
+                    target1 = rootTarget;
                     localState.dropOperation = dropOperation;
                 }
             }
-            localState.nextTarget = localState.dropOperation === 'cancel' ? null : target;
+            localState.nextTarget = localState.dropOperation === 'cancel' ? null : target1;
             return localState.dropOperation;
         },
         onDropExit () {
@@ -2729,7 +2778,8 @@ function $fc1876157e07bcec$export$f7b0c5d28b66b6a5(options, state, ref) {
         dropProps: {
             ...dropProps,
             'aria-hidden': !dragSession || isValidDropTarget ? undefined : 'true'
-        }
+        },
+        isDropTarget: isDropTarget
     };
 }
 
@@ -2773,6 +2823,8 @@ function $c5557edbed563ebf$export$8d0e41d2815afac5(props, state, ref1) {
             itemText: getText(after)
         });
     }
+    let isDropTarget = state.isDropTarget(target);
+    let ariaHidden = !dragSession ? 'true' : dropProps['aria-hidden'];
     return {
         dropIndicatorProps: {
             ...dropProps,
@@ -2780,9 +2832,14 @@ function $c5557edbed563ebf$export$8d0e41d2815afac5(props, state, ref1) {
             'aria-roledescription': stringFormatter.format('dropIndicator'),
             'aria-label': label,
             'aria-labelledby': labelledBy,
-            'aria-hidden': !dragSession ? 'true' : dropProps['aria-hidden'],
+            'aria-hidden': ariaHidden,
             tabIndex: -1
-        }
+        },
+        isDropTarget: isDropTarget,
+        // If aria-hidden, we are either not in a drag session or the drop target is invalid.
+        // In that case, there's no need to render anything at all unless we need to show the indicator visually.
+        // This can happen when dragging using the native DnD API as opposed to keyboard dragging.
+        isHidden: !isDropTarget && !!ariaHidden
     };
 }
 
@@ -2797,6 +2854,7 @@ function $0cbbd00cda972c67$export$b35afafff42da2d9(props, state) {
             return state.getItems(props.key);
         },
         preview: state.preview,
+        getAllowedDropOperations: state.getAllowedDropOperations,
         onDragStart (e) {
             state.startDrag(props.key, e);
         },
@@ -2947,6 +3005,80 @@ function $2dccaca1f4baa446$var$DragPreview(props, ref) {
 let $2dccaca1f4baa446$export$905ab40ac2179daa = /*#__PURE__*/ ($parcel$interopDefault($4vY0V$react)).forwardRef($2dccaca1f4baa446$var$DragPreview);
 
 
+class $2268795bbb597ecb$export$fbd65d14c79e28cc {
+    getDropTargetFromPoint(x, y, isValidDropTarget) {
+        if (this.collection.size === 0) return;
+        let rect = this.ref.current.getBoundingClientRect();
+        x += rect.x;
+        y += rect.y;
+        let elements = this.ref.current.querySelectorAll('[data-key]');
+        let elementMap = new Map();
+        for (let item of elements)if (item instanceof HTMLElement) elementMap.set(item.dataset.key, item);
+        let items = [
+            ...this.collection
+        ];
+        let low = 0;
+        let high = items.length;
+        while(low < high){
+            let mid = Math.floor((low + high) / 2);
+            let item = items[mid];
+            let element = elementMap.get(String(item.key));
+            let rect = element.getBoundingClientRect();
+            if (y < rect.top) high = mid;
+            else if (y > rect.bottom) low = mid + 1;
+            else {
+                let target = {
+                    type: 'item',
+                    key: item.key,
+                    dropPosition: 'on'
+                };
+                if (isValidDropTarget(target)) {
+                    // Otherwise, if dropping on the item is accepted, try the before/after positions if within 5px
+                    // of the top or bottom of the item.
+                    if (y <= rect.top + 5 && isValidDropTarget({
+                        ...target,
+                        dropPosition: 'before'
+                    })) target.dropPosition = 'before';
+                    else if (y >= rect.bottom - 5 && isValidDropTarget({
+                        ...target,
+                        dropPosition: 'after'
+                    })) target.dropPosition = 'after';
+                } else {
+                    // If dropping on the item isn't accepted, try the target before or after depending on the y position.
+                    let midY = rect.top + rect.height / 2;
+                    if (y <= midY && isValidDropTarget({
+                        ...target,
+                        dropPosition: 'before'
+                    })) target.dropPosition = 'before';
+                    else if (y >= midY && isValidDropTarget({
+                        ...target,
+                        dropPosition: 'after'
+                    })) target.dropPosition = 'after';
+                }
+                return target;
+            }
+        }
+        let item1 = items[Math.min(low, items.length - 1)];
+        let element = elementMap.get(String(item1.key));
+        rect = element.getBoundingClientRect();
+        if (Math.abs(y - rect.top) < Math.abs(y - rect.bottom)) return {
+            type: 'item',
+            key: item1.key,
+            dropPosition: 'before'
+        };
+        return {
+            type: 'item',
+            key: item1.key,
+            dropPosition: 'after'
+        };
+    }
+    constructor(collection, ref){
+        this.collection = collection;
+        this.ref = ref;
+    }
+}
+
+
 
 
 //# sourceMappingURL=main.js.map