@react-aria/dnd 3.0.0-alpha.8 → 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;
@@ -817,7 +817,6 @@ $c530af5bd0e7e6c6$exports = {
 
 
 
-
 const $8253ed7ece74b463$var$MESSAGES = {
     keyboard: {
         start: 'dragDescriptionKeyboard',
@@ -843,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') {
@@ -851,41 +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;
-                }
-                // 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);
-                // 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)) {
@@ -897,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
@@ -1274,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') {
@@ -1727,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);
         },
@@ -1849,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