@react-stately/dnd 3.0.0-alpha.4 → 3.0.0-alpha.7

package/dist/main.js

@@ -1,4 +1,4 @@
-var $35Xep$react = require("react");
+var $1IdlX$react = require("react");
 
 function $parcel$exportWildcard(dest, source) {
   Object.keys(source).forEach(function(key) {
@@ -19,65 +19,77 @@ function $parcel$exportWildcard(dest, source) {
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
-var $f0f141772fe5abed$exports = {};
+var $481a240e3d51b276$exports = {};
 
-$parcel$export($f0f141772fe5abed$exports, "useDraggableCollectionState", () => $f0f141772fe5abed$export$29efd034f1d79f81);
+$parcel$export($481a240e3d51b276$exports, "useDraggableCollectionState", () => $481a240e3d51b276$export$29efd034f1d79f81);
 
-function $f0f141772fe5abed$export$29efd034f1d79f81(props) {
-    let [draggingKeys, setDraggingKeys] = $35Xep$react.useState(new Set());
+function $481a240e3d51b276$export$29efd034f1d79f81(props) {
+    let { getItems: getItems , collection: collection , selectionManager: selectionManager , onDragStart: onDragStart , onDragMove: onDragMove , onDragEnd: onDragEnd , preview: preview  } = props;
+    let [, setDragging] = $1IdlX$react.useState(false);
+    let draggingKeys = $1IdlX$react.useRef(new Set());
+    let draggedKey = $1IdlX$react.useRef(null);
     let getKeys = (key)=>{
         // The clicked item is always added to the drag. If it is selected, then all of the
         // other selected items are also dragged. If it is not selected, the only the clicked
         // item is dragged. This matches native macOS behavior.
-        let keys = new Set(props.selectionManager.isSelected(key) ? props.selectionManager.selectedKeys : []);
+        let keys = new Set(selectionManager.isSelected(key) ? new Set([
+            ...selectionManager.selectedKeys
+        ]) : []);
         keys.add(key);
         return keys;
     };
     return {
-        collection: props.collection,
-        selectionManager: props.selectionManager,
+        collection: collection,
+        selectionManager: selectionManager,
+        get draggedKey () {
+            return draggedKey.current;
+        },
+        get draggingKeys () {
+            return draggingKeys.current;
+        },
         isDragging (key) {
-            return draggingKeys.has(key);
+            return draggingKeys.current.has(key);
         },
         getKeysForDrag: getKeys,
         getItems (key) {
-            return props.getItems(getKeys(key));
-        },
-        renderPreview (key) {
-            if (typeof props.renderPreview === 'function') return props.renderPreview(getKeys(key), key);
-            return null;
+            return getItems(getKeys(key));
         },
+        preview: preview,
         startDrag (key, event) {
+            setDragging(true);
             let keys = getKeys(key);
-            setDraggingKeys(keys);
-            if (typeof props.onDragStart === 'function') props.onDragStart({
+            draggingKeys.current = keys;
+            draggedKey.current = key;
+            if (typeof onDragStart === 'function') onDragStart({
                 ...event,
                 keys: keys
             });
         },
         moveDrag (event) {
-            if (typeof props.onDragMove === 'function') props.onDragMove({
+            if (typeof onDragMove === 'function') onDragMove({
                 ...event,
-                keys: draggingKeys
+                keys: draggingKeys.current
             });
         },
         endDrag (event) {
-            if (typeof props.onDragEnd === 'function') props.onDragEnd({
+            if (typeof onDragEnd === 'function') onDragEnd({
                 ...event,
-                keys: draggingKeys
+                keys: draggingKeys.current
             });
-            setDraggingKeys(new Set());
+            setDragging(false);
+            draggingKeys.current = new Set();
+            draggedKey.current = null;
         }
     };
 }
 
 
-var $f67e1fddbca9a82e$exports = {};
+var $6ce4cbfbe5e354f1$exports = {};
 
-$parcel$export($f67e1fddbca9a82e$exports, "useDroppableCollectionState", () => $f67e1fddbca9a82e$export$926850f6ecef79d0);
+$parcel$export($6ce4cbfbe5e354f1$exports, "useDroppableCollectionState", () => $6ce4cbfbe5e354f1$export$926850f6ecef79d0);
 
-function $f67e1fddbca9a82e$export$926850f6ecef79d0(props) {
-    let [target1, setTarget] = $35Xep$react.useState(null);
+function $6ce4cbfbe5e354f1$export$926850f6ecef79d0(props) {
+    let [target1, setTarget] = $1IdlX$react.useState(null);
     let getOppositeTarget = (target)=>{
         if (target.dropPosition === 'before') {
             let key = props.collection.getKeyBefore(target.key);
@@ -116,9 +128,9 @@ function $f67e1fddbca9a82e$export$926850f6ecef79d0(props) {
             setTarget(newTarget);
         },
         isDropTarget (dropTarget) {
-            if ($f67e1fddbca9a82e$var$isEqualDropTarget(dropTarget, target1)) return true;
+            if ($6ce4cbfbe5e354f1$var$isEqualDropTarget(dropTarget, target1)) return true;
             // Check if the targets point at the same point between two items, one referring before, and the other after.
-            if ((dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.type) === 'item' && (target1 === null || target1 === void 0 ? void 0 : target1.type) === 'item' && dropTarget.key !== target1.key && dropTarget.dropPosition !== target1.dropPosition && dropTarget.dropPosition !== 'on' && target1.dropPosition !== 'on') return $f67e1fddbca9a82e$var$isEqualDropTarget(getOppositeTarget(dropTarget), target1) || $f67e1fddbca9a82e$var$isEqualDropTarget(dropTarget, getOppositeTarget(target1));
+            if ((dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.type) === 'item' && (target1 === null || target1 === void 0 ? void 0 : target1.type) === 'item' && dropTarget.key !== target1.key && dropTarget.dropPosition !== target1.dropPosition && dropTarget.dropPosition !== 'on' && target1.dropPosition !== 'on') return $6ce4cbfbe5e354f1$var$isEqualDropTarget(getOppositeTarget(dropTarget), target1) || $6ce4cbfbe5e354f1$var$isEqualDropTarget(dropTarget, getOppositeTarget(target1));
             return false;
         },
         getDropOperation (target, types, allowedOperations) {
@@ -126,7 +138,7 @@ function $f67e1fddbca9a82e$export$926850f6ecef79d0(props) {
         }
     };
 }
-function $f67e1fddbca9a82e$var$isEqualDropTarget(a, b) {
+function $6ce4cbfbe5e354f1$var$isEqualDropTarget(a, b) {
     if (!a) return !b;
     switch(a.type){
         case 'root':
@@ -137,8 +149,8 @@ function $f67e1fddbca9a82e$var$isEqualDropTarget(a, b) {
 }
 
 
-$parcel$exportWildcard(module.exports, $f0f141772fe5abed$exports);
-$parcel$exportWildcard(module.exports, $f67e1fddbca9a82e$exports);
+$parcel$exportWildcard(module.exports, $481a240e3d51b276$exports);
+$parcel$exportWildcard(module.exports, $6ce4cbfbe5e354f1$exports);
 
 
 //# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-stately/dnd/src/index.ts","packages/@react-stately/dnd/src/useDraggableCollectionState.ts","packages/@react-stately/dnd/src/useDroppableCollectionState.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useDraggableCollectionState';\nexport * from './useDroppableCollectionState';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Collection, DragEndEvent, DraggableCollectionProps, DragItem, DragMoveEvent, DragStartEvent, Node} from '@react-types/shared';\nimport {Key, useState} from 'react';\nimport {MultipleSelectionManager} from '@react-stately/selection';\n\ninterface DraggableCollectionOptions extends DraggableCollectionProps {\n  collection: Collection<Node<unknown>>,\n  selectionManager: MultipleSelectionManager\n}\n\nexport interface DraggableCollectionState {\n  collection: Collection<Node<unknown>>,\n  selectionManager: MultipleSelectionManager,\n  isDragging(key: Key): boolean,\n  getKeysForDrag(key: Key): Set<Key>,\n  getItems(key: Key): DragItem[],\n  renderPreview(key: Key): JSX.Element,\n  startDrag(key: Key, event: DragStartEvent): void,\n  moveDrag(event: DragMoveEvent): void,\n  endDrag(event: DragEndEvent): void\n}\n\nexport function useDraggableCollectionState(props: DraggableCollectionOptions): DraggableCollectionState {\n  let [draggingKeys, setDraggingKeys] = useState(new Set<Key>());\n  let getKeys = (key: Key) => {\n    // The clicked item is always added to the drag. If it is selected, then all of the\n    // other selected items are also dragged. If it is not selected, the only the clicked\n    // item is dragged. This matches native macOS behavior.\n    let keys = new Set(\n      props.selectionManager.isSelected(key)\n        ? props.selectionManager.selectedKeys\n        : []\n    );\n\n    keys.add(key);\n    return keys;\n  };\n\n  return {\n    collection: props.collection,\n    selectionManager: props.selectionManager,\n    isDragging(key) {\n      return draggingKeys.has(key);\n    },\n    getKeysForDrag: getKeys,\n    getItems(key) {\n      return props.getItems(getKeys(key));\n    },\n    renderPreview(key) {\n      if (typeof props.renderPreview === 'function') {\n        return props.renderPreview(getKeys(key), key);\n      }\n\n      return null;\n    },\n    startDrag(key, event) {\n      let keys = getKeys(key);\n      setDraggingKeys(keys);\n\n      if (typeof props.onDragStart === 'function') {\n        props.onDragStart({\n          ...event,\n          keys\n        });\n      }\n    },\n    moveDrag(event) {\n      if (typeof props.onDragMove === 'function') {\n        props.onDragMove({\n          ...event,\n          keys: draggingKeys\n        });\n      }\n    },\n    endDrag(event) {\n      if (typeof props.onDragEnd === 'function') {\n        props.onDragEnd({\n          ...event,\n          keys: draggingKeys\n        });\n      }\n\n      setDraggingKeys(new Set());\n    }\n  };\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Collection, DragTypes, DropOperation, DroppableCollectionProps, DropTarget, ItemDropTarget, Node} from '@react-types/shared';\nimport {MultipleSelectionManager} from '@react-stately/selection';\nimport {useState} from 'react';\n\ninterface DroppableCollectionStateOptions extends DroppableCollectionProps {\n  collection: Collection<Node<unknown>>,\n  selectionManager: MultipleSelectionManager\n}\n\nexport interface DroppableCollectionState {\n  collection: Collection<Node<unknown>>,\n  selectionManager: MultipleSelectionManager,\n  target: DropTarget,\n  setTarget(target: DropTarget): void,\n  isDropTarget(target: DropTarget): boolean,\n  getDropOperation(target: DropTarget, types: DragTypes, allowedOperations: DropOperation[]): DropOperation\n}\n\nexport function useDroppableCollectionState(props: DroppableCollectionStateOptions): DroppableCollectionState  {\n  let [target, setTarget] = useState<DropTarget>(null);\n\n  let getOppositeTarget = (target: ItemDropTarget): ItemDropTarget => {\n    if (target.dropPosition === 'before') {\n      let key = props.collection.getKeyBefore(target.key);\n      return key != null ? {type: 'item', key, dropPosition: 'after'} : null;\n    } else if (target.dropPosition === 'after') {\n      let key = props.collection.getKeyAfter(target.key);\n      return key != null ? {type: 'item', key, dropPosition: 'before'} : null;\n    }\n  };\n\n  return {\n    collection: props.collection,\n    selectionManager: props.selectionManager,\n    target,\n    setTarget(newTarget) {\n      if (this.isDropTarget(newTarget)) {\n        return;\n      }\n\n      if (target && typeof props.onDropExit === 'function') {\n        props.onDropExit({\n          type: 'dropexit',\n          x: 0, // todo\n          y: 0,\n          target\n        });\n      }\n\n      if (newTarget && typeof props.onDropEnter === 'function') {\n        props.onDropEnter({\n          type: 'dropenter',\n          x: 0, // todo\n          y: 0,\n          target: newTarget\n        });\n      }\n\n      setTarget(newTarget);\n    },\n    isDropTarget(dropTarget) {\n      if (isEqualDropTarget(dropTarget, target)) {\n        return true;\n      }\n\n      // Check if the targets point at the same point between two items, one referring before, and the other after.\n      if (\n        dropTarget?.type === 'item' &&\n        target?.type === 'item' &&\n        dropTarget.key !== target.key &&\n        dropTarget.dropPosition !== target.dropPosition &&\n        dropTarget.dropPosition !== 'on' &&\n        target.dropPosition !== 'on'\n      ) {\n        return isEqualDropTarget(getOppositeTarget(dropTarget), target) ||\n          isEqualDropTarget(dropTarget, getOppositeTarget(target));\n      }\n\n      return false;\n    },\n    getDropOperation(target, types, allowedOperations) {\n      return typeof props.getDropOperation === 'function'\n        ? props.getDropOperation(target, types, allowedOperations)\n        : allowedOperations[0];\n    }\n  };\n}\n\nfunction isEqualDropTarget(a: DropTarget, b: DropTarget) {\n  if (!a) {\n    return !b;\n  }\n\n  switch (a.type) {\n    case 'root':\n      return b?.type === 'root';\n    case 'item':\n      return b?.type === 'item' && b?.key === a.key && b?.dropPosition === a.dropPosition;\n  }\n}\n"],"names":[],"version":3,"file":"main.js.map"}
+{"mappings":"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","sources":["packages/@react-stately/dnd/src/index.ts","packages/@react-stately/dnd/src/useDraggableCollectionState.ts","packages/@react-stately/dnd/src/useDroppableCollectionState.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useDraggableCollectionState';\nexport * from './useDroppableCollectionState';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Collection, DragEndEvent, DraggableCollectionProps, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, Node} from '@react-types/shared';\nimport {Key, RefObject, useRef, useState} from 'react';\nimport {MultipleSelectionManager} from '@react-stately/selection';\n\nexport interface DraggableCollectionOptions extends DraggableCollectionProps {\n  collection: Collection<Node<unknown>>,\n  selectionManager: MultipleSelectionManager\n}\n\nexport interface DraggableCollectionState {\n  collection: Collection<Node<unknown>>,\n  selectionManager: MultipleSelectionManager,\n  draggedKey: Key | null,\n  draggingKeys: Set<Key>,\n  isDragging(key: Key): boolean,\n  getKeysForDrag(key: Key): Set<Key>,\n  getItems(key: Key): DragItem[],\n  preview?: RefObject<DragPreviewRenderer>,\n  startDrag(key: Key, event: DragStartEvent): void,\n  moveDrag(event: DragMoveEvent): void,\n  endDrag(event: DragEndEvent): void\n}\n\nexport function useDraggableCollectionState(props: DraggableCollectionOptions): DraggableCollectionState {\n  let {\n    getItems,\n    collection,\n    selectionManager,\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    preview\n  } = props;\n  let [, setDragging] = useState(false);\n  let draggingKeys = useRef(new Set<Key>());\n  let draggedKey = useRef(null);\n  let getKeys = (key: Key) => {\n    // The clicked item is always added to the drag. If it is selected, then all of the\n    // other selected items are also dragged. If it is not selected, the only the clicked\n    // item is dragged. This matches native macOS behavior.\n    let keys = new Set(\n      selectionManager.isSelected(key)\n        ? new Set([...selectionManager.selectedKeys])\n        : []\n    );\n\n    keys.add(key);\n    return keys;\n  };\n\n  return {\n    collection,\n    selectionManager,\n    get draggedKey() {\n      return draggedKey.current;\n    },\n    get draggingKeys() {\n      return draggingKeys.current;\n    },\n    isDragging(key) {\n      return draggingKeys.current.has(key);\n    },\n    getKeysForDrag: getKeys,\n    getItems(key) {\n      return getItems(getKeys(key));\n    },\n    preview,\n    startDrag(key, event) {\n      setDragging(true);\n      let keys = getKeys(key);\n      draggingKeys.current = keys;\n      draggedKey.current = key;\n      if (typeof onDragStart === 'function') {\n        onDragStart({\n          ...event,\n          keys\n        });\n      }\n    },\n    moveDrag(event) {\n      if (typeof onDragMove === 'function') {\n        onDragMove({\n          ...event,\n          keys: draggingKeys.current\n        });\n      }\n    },\n    endDrag(event) {\n      if (typeof onDragEnd === 'function') {\n        onDragEnd({\n          ...event,\n          keys: draggingKeys.current\n        });\n      }\n\n      setDragging(false);\n      draggingKeys.current = new Set();\n      draggedKey.current = null;\n    }\n  };\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Collection, DragTypes, DropOperation, DroppableCollectionProps, DropTarget, ItemDropTarget, Node} from '@react-types/shared';\nimport {MultipleSelectionManager} from '@react-stately/selection';\nimport {useState} from 'react';\n\nexport interface DroppableCollectionStateOptions extends DroppableCollectionProps {\n  collection: Collection<Node<unknown>>,\n  selectionManager: MultipleSelectionManager\n}\n\nexport interface DroppableCollectionState {\n  collection: Collection<Node<unknown>>,\n  selectionManager: MultipleSelectionManager,\n  target: DropTarget,\n  setTarget(target: DropTarget): void,\n  isDropTarget(target: DropTarget): boolean,\n  getDropOperation(target: DropTarget, types: DragTypes, allowedOperations: DropOperation[]): DropOperation\n}\n\nexport function useDroppableCollectionState(props: DroppableCollectionStateOptions): DroppableCollectionState  {\n  let [target, setTarget] = useState<DropTarget>(null);\n\n  let getOppositeTarget = (target: ItemDropTarget): ItemDropTarget => {\n    if (target.dropPosition === 'before') {\n      let key = props.collection.getKeyBefore(target.key);\n      return key != null ? {type: 'item', key, dropPosition: 'after'} : null;\n    } else if (target.dropPosition === 'after') {\n      let key = props.collection.getKeyAfter(target.key);\n      return key != null ? {type: 'item', key, dropPosition: 'before'} : null;\n    }\n  };\n\n  return {\n    collection: props.collection,\n    selectionManager: props.selectionManager,\n    target,\n    setTarget(newTarget) {\n      if (this.isDropTarget(newTarget)) {\n        return;\n      }\n\n      if (target && typeof props.onDropExit === 'function') {\n        props.onDropExit({\n          type: 'dropexit',\n          x: 0, // todo\n          y: 0,\n          target\n        });\n      }\n\n      if (newTarget && typeof props.onDropEnter === 'function') {\n        props.onDropEnter({\n          type: 'dropenter',\n          x: 0, // todo\n          y: 0,\n          target: newTarget\n        });\n      }\n\n      setTarget(newTarget);\n    },\n    isDropTarget(dropTarget) {\n      if (isEqualDropTarget(dropTarget, target)) {\n        return true;\n      }\n\n      // Check if the targets point at the same point between two items, one referring before, and the other after.\n      if (\n        dropTarget?.type === 'item' &&\n        target?.type === 'item' &&\n        dropTarget.key !== target.key &&\n        dropTarget.dropPosition !== target.dropPosition &&\n        dropTarget.dropPosition !== 'on' &&\n        target.dropPosition !== 'on'\n      ) {\n        return isEqualDropTarget(getOppositeTarget(dropTarget), target) ||\n          isEqualDropTarget(dropTarget, getOppositeTarget(target));\n      }\n\n      return false;\n    },\n    getDropOperation(target, types, allowedOperations) {\n      return typeof props.getDropOperation === 'function'\n        ? props.getDropOperation(target, types, allowedOperations)\n        : allowedOperations[0];\n    }\n  };\n}\n\nfunction isEqualDropTarget(a: DropTarget, b: DropTarget) {\n  if (!a) {\n    return !b;\n  }\n\n  switch (a.type) {\n    case 'root':\n      return b?.type === 'root';\n    case 'item':\n      return b?.type === 'item' && b?.key === a.key && b?.dropPosition === a.dropPosition;\n  }\n}\n"],"names":[],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -1,67 +1,79 @@
-import {useState as $01JuH$useState} from "react";
+import {useState as $bBNwq$useState, useRef as $bBNwq$useRef} from "react";
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
-var $1438ce11f053a783$exports = {};
+var $b45bbbaf0c3785df$exports = {};
 
-$parcel$export($1438ce11f053a783$exports, "useDraggableCollectionState", () => $1438ce11f053a783$export$29efd034f1d79f81);
+$parcel$export($b45bbbaf0c3785df$exports, "useDraggableCollectionState", () => $b45bbbaf0c3785df$export$29efd034f1d79f81);
 
-function $1438ce11f053a783$export$29efd034f1d79f81(props) {
-    let [draggingKeys, setDraggingKeys] = $01JuH$useState(new Set());
+function $b45bbbaf0c3785df$export$29efd034f1d79f81(props) {
+    let { getItems: getItems , collection: collection , selectionManager: selectionManager , onDragStart: onDragStart , onDragMove: onDragMove , onDragEnd: onDragEnd , preview: preview  } = props;
+    let [, setDragging] = $bBNwq$useState(false);
+    let draggingKeys = $bBNwq$useRef(new Set());
+    let draggedKey = $bBNwq$useRef(null);
     let getKeys = (key)=>{
         // The clicked item is always added to the drag. If it is selected, then all of the
         // other selected items are also dragged. If it is not selected, the only the clicked
         // item is dragged. This matches native macOS behavior.
-        let keys = new Set(props.selectionManager.isSelected(key) ? props.selectionManager.selectedKeys : []);
+        let keys = new Set(selectionManager.isSelected(key) ? new Set([
+            ...selectionManager.selectedKeys
+        ]) : []);
         keys.add(key);
         return keys;
     };
     return {
-        collection: props.collection,
-        selectionManager: props.selectionManager,
+        collection: collection,
+        selectionManager: selectionManager,
+        get draggedKey () {
+            return draggedKey.current;
+        },
+        get draggingKeys () {
+            return draggingKeys.current;
+        },
         isDragging (key) {
-            return draggingKeys.has(key);
+            return draggingKeys.current.has(key);
         },
         getKeysForDrag: getKeys,
         getItems (key) {
-            return props.getItems(getKeys(key));
-        },
-        renderPreview (key) {
-            if (typeof props.renderPreview === 'function') return props.renderPreview(getKeys(key), key);
-            return null;
+            return getItems(getKeys(key));
         },
+        preview: preview,
         startDrag (key, event) {
+            setDragging(true);
             let keys = getKeys(key);
-            setDraggingKeys(keys);
-            if (typeof props.onDragStart === 'function') props.onDragStart({
+            draggingKeys.current = keys;
+            draggedKey.current = key;
+            if (typeof onDragStart === 'function') onDragStart({
                 ...event,
                 keys: keys
             });
         },
         moveDrag (event) {
-            if (typeof props.onDragMove === 'function') props.onDragMove({
+            if (typeof onDragMove === 'function') onDragMove({
                 ...event,
-                keys: draggingKeys
+                keys: draggingKeys.current
             });
         },
         endDrag (event) {
-            if (typeof props.onDragEnd === 'function') props.onDragEnd({
+            if (typeof onDragEnd === 'function') onDragEnd({
                 ...event,
-                keys: draggingKeys
+                keys: draggingKeys.current
             });
-            setDraggingKeys(new Set());
+            setDragging(false);
+            draggingKeys.current = new Set();
+            draggedKey.current = null;
         }
     };
 }
 
 
-var $dfea42730c00d81f$exports = {};
+var $e672e8bc247525d1$exports = {};
 
-$parcel$export($dfea42730c00d81f$exports, "useDroppableCollectionState", () => $dfea42730c00d81f$export$926850f6ecef79d0);
+$parcel$export($e672e8bc247525d1$exports, "useDroppableCollectionState", () => $e672e8bc247525d1$export$926850f6ecef79d0);
 
-function $dfea42730c00d81f$export$926850f6ecef79d0(props) {
-    let [target1, setTarget] = $01JuH$useState(null);
+function $e672e8bc247525d1$export$926850f6ecef79d0(props) {
+    let [target1, setTarget] = $bBNwq$useState(null);
     let getOppositeTarget = (target)=>{
         if (target.dropPosition === 'before') {
             let key = props.collection.getKeyBefore(target.key);
@@ -100,9 +112,9 @@ function $dfea42730c00d81f$export$926850f6ecef79d0(props) {
             setTarget(newTarget);
         },
         isDropTarget (dropTarget) {
-            if ($dfea42730c00d81f$var$isEqualDropTarget(dropTarget, target1)) return true;
+            if ($e672e8bc247525d1$var$isEqualDropTarget(dropTarget, target1)) return true;
             // Check if the targets point at the same point between two items, one referring before, and the other after.
-            if ((dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.type) === 'item' && (target1 === null || target1 === void 0 ? void 0 : target1.type) === 'item' && dropTarget.key !== target1.key && dropTarget.dropPosition !== target1.dropPosition && dropTarget.dropPosition !== 'on' && target1.dropPosition !== 'on') return $dfea42730c00d81f$var$isEqualDropTarget(getOppositeTarget(dropTarget), target1) || $dfea42730c00d81f$var$isEqualDropTarget(dropTarget, getOppositeTarget(target1));
+            if ((dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.type) === 'item' && (target1 === null || target1 === void 0 ? void 0 : target1.type) === 'item' && dropTarget.key !== target1.key && dropTarget.dropPosition !== target1.dropPosition && dropTarget.dropPosition !== 'on' && target1.dropPosition !== 'on') return $e672e8bc247525d1$var$isEqualDropTarget(getOppositeTarget(dropTarget), target1) || $e672e8bc247525d1$var$isEqualDropTarget(dropTarget, getOppositeTarget(target1));
             return false;
         },
         getDropOperation (target, types, allowedOperations) {
@@ -110,7 +122,7 @@ function $dfea42730c00d81f$export$926850f6ecef79d0(props) {
         }
     };
 }
-function $dfea42730c00d81f$var$isEqualDropTarget(a, b) {
+function $e672e8bc247525d1$var$isEqualDropTarget(a, b) {
     if (!a) return !b;
     switch(a.type){
         case 'root':
@@ -123,5 +135,5 @@ function $dfea42730c00d81f$var$isEqualDropTarget(a, b) {
 
 
 
-export {$1438ce11f053a783$export$29efd034f1d79f81 as useDraggableCollectionState, $dfea42730c00d81f$export$926850f6ecef79d0 as useDroppableCollectionState};
+export {$b45bbbaf0c3785df$export$29efd034f1d79f81 as useDraggableCollectionState, $e672e8bc247525d1$export$926850f6ecef79d0 as useDroppableCollectionState};
 //# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-stately/dnd/src/index.ts","packages/@react-stately/dnd/src/useDraggableCollectionState.ts","packages/@react-stately/dnd/src/useDroppableCollectionState.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useDraggableCollectionState';\nexport * from './useDroppableCollectionState';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Collection, DragEndEvent, DraggableCollectionProps, DragItem, DragMoveEvent, DragStartEvent, Node} from '@react-types/shared';\nimport {Key, useState} from 'react';\nimport {MultipleSelectionManager} from '@react-stately/selection';\n\ninterface DraggableCollectionOptions extends DraggableCollectionProps {\n  collection: Collection<Node<unknown>>,\n  selectionManager: MultipleSelectionManager\n}\n\nexport interface DraggableCollectionState {\n  collection: Collection<Node<unknown>>,\n  selectionManager: MultipleSelectionManager,\n  isDragging(key: Key): boolean,\n  getKeysForDrag(key: Key): Set<Key>,\n  getItems(key: Key): DragItem[],\n  renderPreview(key: Key): JSX.Element,\n  startDrag(key: Key, event: DragStartEvent): void,\n  moveDrag(event: DragMoveEvent): void,\n  endDrag(event: DragEndEvent): void\n}\n\nexport function useDraggableCollectionState(props: DraggableCollectionOptions): DraggableCollectionState {\n  let [draggingKeys, setDraggingKeys] = useState(new Set<Key>());\n  let getKeys = (key: Key) => {\n    // The clicked item is always added to the drag. If it is selected, then all of the\n    // other selected items are also dragged. If it is not selected, the only the clicked\n    // item is dragged. This matches native macOS behavior.\n    let keys = new Set(\n      props.selectionManager.isSelected(key)\n        ? props.selectionManager.selectedKeys\n        : []\n    );\n\n    keys.add(key);\n    return keys;\n  };\n\n  return {\n    collection: props.collection,\n    selectionManager: props.selectionManager,\n    isDragging(key) {\n      return draggingKeys.has(key);\n    },\n    getKeysForDrag: getKeys,\n    getItems(key) {\n      return props.getItems(getKeys(key));\n    },\n    renderPreview(key) {\n      if (typeof props.renderPreview === 'function') {\n        return props.renderPreview(getKeys(key), key);\n      }\n\n      return null;\n    },\n    startDrag(key, event) {\n      let keys = getKeys(key);\n      setDraggingKeys(keys);\n\n      if (typeof props.onDragStart === 'function') {\n        props.onDragStart({\n          ...event,\n          keys\n        });\n      }\n    },\n    moveDrag(event) {\n      if (typeof props.onDragMove === 'function') {\n        props.onDragMove({\n          ...event,\n          keys: draggingKeys\n        });\n      }\n    },\n    endDrag(event) {\n      if (typeof props.onDragEnd === 'function') {\n        props.onDragEnd({\n          ...event,\n          keys: draggingKeys\n        });\n      }\n\n      setDraggingKeys(new Set());\n    }\n  };\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Collection, DragTypes, DropOperation, DroppableCollectionProps, DropTarget, ItemDropTarget, Node} from '@react-types/shared';\nimport {MultipleSelectionManager} from '@react-stately/selection';\nimport {useState} from 'react';\n\ninterface DroppableCollectionStateOptions extends DroppableCollectionProps {\n  collection: Collection<Node<unknown>>,\n  selectionManager: MultipleSelectionManager\n}\n\nexport interface DroppableCollectionState {\n  collection: Collection<Node<unknown>>,\n  selectionManager: MultipleSelectionManager,\n  target: DropTarget,\n  setTarget(target: DropTarget): void,\n  isDropTarget(target: DropTarget): boolean,\n  getDropOperation(target: DropTarget, types: DragTypes, allowedOperations: DropOperation[]): DropOperation\n}\n\nexport function useDroppableCollectionState(props: DroppableCollectionStateOptions): DroppableCollectionState  {\n  let [target, setTarget] = useState<DropTarget>(null);\n\n  let getOppositeTarget = (target: ItemDropTarget): ItemDropTarget => {\n    if (target.dropPosition === 'before') {\n      let key = props.collection.getKeyBefore(target.key);\n      return key != null ? {type: 'item', key, dropPosition: 'after'} : null;\n    } else if (target.dropPosition === 'after') {\n      let key = props.collection.getKeyAfter(target.key);\n      return key != null ? {type: 'item', key, dropPosition: 'before'} : null;\n    }\n  };\n\n  return {\n    collection: props.collection,\n    selectionManager: props.selectionManager,\n    target,\n    setTarget(newTarget) {\n      if (this.isDropTarget(newTarget)) {\n        return;\n      }\n\n      if (target && typeof props.onDropExit === 'function') {\n        props.onDropExit({\n          type: 'dropexit',\n          x: 0, // todo\n          y: 0,\n          target\n        });\n      }\n\n      if (newTarget && typeof props.onDropEnter === 'function') {\n        props.onDropEnter({\n          type: 'dropenter',\n          x: 0, // todo\n          y: 0,\n          target: newTarget\n        });\n      }\n\n      setTarget(newTarget);\n    },\n    isDropTarget(dropTarget) {\n      if (isEqualDropTarget(dropTarget, target)) {\n        return true;\n      }\n\n      // Check if the targets point at the same point between two items, one referring before, and the other after.\n      if (\n        dropTarget?.type === 'item' &&\n        target?.type === 'item' &&\n        dropTarget.key !== target.key &&\n        dropTarget.dropPosition !== target.dropPosition &&\n        dropTarget.dropPosition !== 'on' &&\n        target.dropPosition !== 'on'\n      ) {\n        return isEqualDropTarget(getOppositeTarget(dropTarget), target) ||\n          isEqualDropTarget(dropTarget, getOppositeTarget(target));\n      }\n\n      return false;\n    },\n    getDropOperation(target, types, allowedOperations) {\n      return typeof props.getDropOperation === 'function'\n        ? props.getDropOperation(target, types, allowedOperations)\n        : allowedOperations[0];\n    }\n  };\n}\n\nfunction isEqualDropTarget(a: DropTarget, b: DropTarget) {\n  if (!a) {\n    return !b;\n  }\n\n  switch (a.type) {\n    case 'root':\n      return b?.type === 'root';\n    case 'item':\n      return b?.type === 'item' && b?.key === a.key && b?.dropPosition === a.dropPosition;\n  }\n}\n"],"names":[],"version":3,"file":"module.js.map"}
+{"mappings":"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","sources":["packages/@react-stately/dnd/src/index.ts","packages/@react-stately/dnd/src/useDraggableCollectionState.ts","packages/@react-stately/dnd/src/useDroppableCollectionState.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useDraggableCollectionState';\nexport * from './useDroppableCollectionState';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Collection, DragEndEvent, DraggableCollectionProps, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, Node} from '@react-types/shared';\nimport {Key, RefObject, useRef, useState} from 'react';\nimport {MultipleSelectionManager} from '@react-stately/selection';\n\nexport interface DraggableCollectionOptions extends DraggableCollectionProps {\n  collection: Collection<Node<unknown>>,\n  selectionManager: MultipleSelectionManager\n}\n\nexport interface DraggableCollectionState {\n  collection: Collection<Node<unknown>>,\n  selectionManager: MultipleSelectionManager,\n  draggedKey: Key | null,\n  draggingKeys: Set<Key>,\n  isDragging(key: Key): boolean,\n  getKeysForDrag(key: Key): Set<Key>,\n  getItems(key: Key): DragItem[],\n  preview?: RefObject<DragPreviewRenderer>,\n  startDrag(key: Key, event: DragStartEvent): void,\n  moveDrag(event: DragMoveEvent): void,\n  endDrag(event: DragEndEvent): void\n}\n\nexport function useDraggableCollectionState(props: DraggableCollectionOptions): DraggableCollectionState {\n  let {\n    getItems,\n    collection,\n    selectionManager,\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    preview\n  } = props;\n  let [, setDragging] = useState(false);\n  let draggingKeys = useRef(new Set<Key>());\n  let draggedKey = useRef(null);\n  let getKeys = (key: Key) => {\n    // The clicked item is always added to the drag. If it is selected, then all of the\n    // other selected items are also dragged. If it is not selected, the only the clicked\n    // item is dragged. This matches native macOS behavior.\n    let keys = new Set(\n      selectionManager.isSelected(key)\n        ? new Set([...selectionManager.selectedKeys])\n        : []\n    );\n\n    keys.add(key);\n    return keys;\n  };\n\n  return {\n    collection,\n    selectionManager,\n    get draggedKey() {\n      return draggedKey.current;\n    },\n    get draggingKeys() {\n      return draggingKeys.current;\n    },\n    isDragging(key) {\n      return draggingKeys.current.has(key);\n    },\n    getKeysForDrag: getKeys,\n    getItems(key) {\n      return getItems(getKeys(key));\n    },\n    preview,\n    startDrag(key, event) {\n      setDragging(true);\n      let keys = getKeys(key);\n      draggingKeys.current = keys;\n      draggedKey.current = key;\n      if (typeof onDragStart === 'function') {\n        onDragStart({\n          ...event,\n          keys\n        });\n      }\n    },\n    moveDrag(event) {\n      if (typeof onDragMove === 'function') {\n        onDragMove({\n          ...event,\n          keys: draggingKeys.current\n        });\n      }\n    },\n    endDrag(event) {\n      if (typeof onDragEnd === 'function') {\n        onDragEnd({\n          ...event,\n          keys: draggingKeys.current\n        });\n      }\n\n      setDragging(false);\n      draggingKeys.current = new Set();\n      draggedKey.current = null;\n    }\n  };\n}\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {Collection, DragTypes, DropOperation, DroppableCollectionProps, DropTarget, ItemDropTarget, Node} from '@react-types/shared';\nimport {MultipleSelectionManager} from '@react-stately/selection';\nimport {useState} from 'react';\n\nexport interface DroppableCollectionStateOptions extends DroppableCollectionProps {\n  collection: Collection<Node<unknown>>,\n  selectionManager: MultipleSelectionManager\n}\n\nexport interface DroppableCollectionState {\n  collection: Collection<Node<unknown>>,\n  selectionManager: MultipleSelectionManager,\n  target: DropTarget,\n  setTarget(target: DropTarget): void,\n  isDropTarget(target: DropTarget): boolean,\n  getDropOperation(target: DropTarget, types: DragTypes, allowedOperations: DropOperation[]): DropOperation\n}\n\nexport function useDroppableCollectionState(props: DroppableCollectionStateOptions): DroppableCollectionState  {\n  let [target, setTarget] = useState<DropTarget>(null);\n\n  let getOppositeTarget = (target: ItemDropTarget): ItemDropTarget => {\n    if (target.dropPosition === 'before') {\n      let key = props.collection.getKeyBefore(target.key);\n      return key != null ? {type: 'item', key, dropPosition: 'after'} : null;\n    } else if (target.dropPosition === 'after') {\n      let key = props.collection.getKeyAfter(target.key);\n      return key != null ? {type: 'item', key, dropPosition: 'before'} : null;\n    }\n  };\n\n  return {\n    collection: props.collection,\n    selectionManager: props.selectionManager,\n    target,\n    setTarget(newTarget) {\n      if (this.isDropTarget(newTarget)) {\n        return;\n      }\n\n      if (target && typeof props.onDropExit === 'function') {\n        props.onDropExit({\n          type: 'dropexit',\n          x: 0, // todo\n          y: 0,\n          target\n        });\n      }\n\n      if (newTarget && typeof props.onDropEnter === 'function') {\n        props.onDropEnter({\n          type: 'dropenter',\n          x: 0, // todo\n          y: 0,\n          target: newTarget\n        });\n      }\n\n      setTarget(newTarget);\n    },\n    isDropTarget(dropTarget) {\n      if (isEqualDropTarget(dropTarget, target)) {\n        return true;\n      }\n\n      // Check if the targets point at the same point between two items, one referring before, and the other after.\n      if (\n        dropTarget?.type === 'item' &&\n        target?.type === 'item' &&\n        dropTarget.key !== target.key &&\n        dropTarget.dropPosition !== target.dropPosition &&\n        dropTarget.dropPosition !== 'on' &&\n        target.dropPosition !== 'on'\n      ) {\n        return isEqualDropTarget(getOppositeTarget(dropTarget), target) ||\n          isEqualDropTarget(dropTarget, getOppositeTarget(target));\n      }\n\n      return false;\n    },\n    getDropOperation(target, types, allowedOperations) {\n      return typeof props.getDropOperation === 'function'\n        ? props.getDropOperation(target, types, allowedOperations)\n        : allowedOperations[0];\n    }\n  };\n}\n\nfunction isEqualDropTarget(a: DropTarget, b: DropTarget) {\n  if (!a) {\n    return !b;\n  }\n\n  switch (a.type) {\n    case 'root':\n      return b?.type === 'root';\n    case 'item':\n      return b?.type === 'item' && b?.key === a.key && b?.dropPosition === a.dropPosition;\n  }\n}\n"],"names":[],"version":3,"file":"module.js.map"}

package/dist/types.d.ts

@@ -1,23 +1,25 @@
-import { Collection, DragEndEvent, DraggableCollectionProps, DragItem, DragMoveEvent, DragStartEvent, Node, DragTypes, DropOperation, DroppableCollectionProps, DropTarget } from "@react-types/shared";
-import { Key } from "react";
+import { Collection, DragEndEvent, DraggableCollectionProps, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, Node, DragTypes, DropOperation, DroppableCollectionProps, DropTarget } from "@react-types/shared";
+import { Key, RefObject } from "react";
 import { MultipleSelectionManager } from "@react-stately/selection";
-interface DraggableCollectionOptions extends DraggableCollectionProps {
+export interface DraggableCollectionOptions extends DraggableCollectionProps {
     collection: Collection<Node<unknown>>;
     selectionManager: MultipleSelectionManager;
 }
 export interface DraggableCollectionState {
     collection: Collection<Node<unknown>>;
     selectionManager: MultipleSelectionManager;
+    draggedKey: Key | null;
+    draggingKeys: Set<Key>;
     isDragging(key: Key): boolean;
     getKeysForDrag(key: Key): Set<Key>;
     getItems(key: Key): DragItem[];
-    renderPreview(key: Key): JSX.Element;
+    preview?: RefObject<DragPreviewRenderer>;
     startDrag(key: Key, event: DragStartEvent): void;
     moveDrag(event: DragMoveEvent): void;
     endDrag(event: DragEndEvent): void;
 }
 export function useDraggableCollectionState(props: DraggableCollectionOptions): DraggableCollectionState;
-interface DroppableCollectionStateOptions extends DroppableCollectionProps {
+export interface DroppableCollectionStateOptions extends DroppableCollectionProps {
     collection: Collection<Node<unknown>>;
     selectionManager: MultipleSelectionManager;
 }

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;AAgBA,oCAAqC,SAAQ,wBAAwB;IACnE,UAAU,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC;IACtC,gBAAgB,EAAE,wBAAwB,CAAA;CAC3C;AAED;IACE,UAAU,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC;IACtC,gBAAgB,EAAE,wBAAwB,CAAC;IAC3C,UAAU,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAAC;IAC9B,cAAc,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;IACnC,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,QAAQ,EAAE,CAAC;IAC/B,aAAa,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,OAAO,CAAC;IACrC,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,cAAc,GAAG,IAAI,CAAC;IACjD,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAA;CACnC;AAED,4CAA4C,KAAK,EAAE,0BAA0B,GAAG,wBAAwB,CA+DvG;AChFD,yCAA0C,SAAQ,wBAAwB;IACxE,UAAU,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC;IACtC,gBAAgB,EAAE,wBAAwB,CAAA;CAC3C;AAED;IACE,UAAU,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC;IACtC,gBAAgB,EAAE,wBAAwB,CAAC;IAC3C,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;IACpC,YAAY,CAAC,MAAM,EAAE,UAAU,GAAG,OAAO,CAAC;IAC1C,gBAAgB,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,aAAa,EAAE,GAAG,aAAa,CAAA;CAC1G;AAED,4CAA4C,KAAK,EAAE,+BAA+B,GAAG,wBAAwB,CAoE5G","sources":["packages/@react-stately/dnd/src/packages/@react-stately/dnd/src/useDraggableCollectionState.ts","packages/@react-stately/dnd/src/packages/@react-stately/dnd/src/useDroppableCollectionState.ts","packages/@react-stately/dnd/src/packages/@react-stately/dnd/src/index.ts","packages/@react-stately/dnd/src/index.ts"],"sourcesContent":[null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useDraggableCollectionState';\nexport * from './useDroppableCollectionState';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;;AAgBA,2CAA4C,SAAQ,wBAAwB;IAC1E,UAAU,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC;IACtC,gBAAgB,EAAE,wBAAwB,CAAA;CAC3C;AAED;IACE,UAAU,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC;IACtC,gBAAgB,EAAE,wBAAwB,CAAC;IAC3C,UAAU,EAAE,GAAG,GAAG,IAAI,CAAC;IACvB,YAAY,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACvB,UAAU,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAAC;IAC9B,cAAc,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;IACnC,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,QAAQ,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,UAAU,mBAAmB,CAAC,CAAC;IACzC,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,cAAc,GAAG,IAAI,CAAC;IACjD,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAA;CACnC;AAED,4CAA4C,KAAK,EAAE,0BAA0B,GAAG,wBAAwB,CA6EvG;AChGD,gDAAiD,SAAQ,wBAAwB;IAC/E,UAAU,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC;IACtC,gBAAgB,EAAE,wBAAwB,CAAA;CAC3C;AAED;IACE,UAAU,EAAE,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC;IACtC,gBAAgB,EAAE,wBAAwB,CAAC;IAC3C,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;IACpC,YAAY,CAAC,MAAM,EAAE,UAAU,GAAG,OAAO,CAAC;IAC1C,gBAAgB,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,aAAa,EAAE,GAAG,aAAa,CAAA;CAC1G;AAED,4CAA4C,KAAK,EAAE,+BAA+B,GAAG,wBAAwB,CAoE5G","sources":["packages/@react-stately/dnd/src/packages/@react-stately/dnd/src/useDraggableCollectionState.ts","packages/@react-stately/dnd/src/packages/@react-stately/dnd/src/useDroppableCollectionState.ts","packages/@react-stately/dnd/src/packages/@react-stately/dnd/src/index.ts","packages/@react-stately/dnd/src/index.ts"],"sourcesContent":[null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useDraggableCollectionState';\nexport * from './useDroppableCollectionState';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-stately/dnd",
-  "version": "3.0.0-alpha.4",
+  "version": "3.0.0-alpha.7",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,15 +18,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-stately/selection": "^3.9.2",
-    "@react-stately/utils": "^3.4.1",
-    "@react-types/shared": "^3.11.1"
+    "@react-stately/selection": "^3.10.0",
+    "@react-stately/utils": "^3.5.0",
+    "@react-types/shared": "^3.13.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "404d41859b7d6f56201d7fc01bd9f22ae3512937"
+  "gitHead": "8f921ec5094e7c2b3c301bcb6133372e35a2052b"
 }

package/src/useDraggableCollectionState.ts

@@ -10,11 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {Collection, DragEndEvent, DraggableCollectionProps, DragItem, DragMoveEvent, DragStartEvent, Node} from '@react-types/shared';
-import {Key, useState} from 'react';
+import {Collection, DragEndEvent, DraggableCollectionProps, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, Node} from '@react-types/shared';
+import {Key, RefObject, useRef, useState} from 'react';
 import {MultipleSelectionManager} from '@react-stately/selection';
 
-interface DraggableCollectionOptions extends DraggableCollectionProps {
+export interface DraggableCollectionOptions extends DraggableCollectionProps {
   collection: Collection<Node<unknown>>,
   selectionManager: MultipleSelectionManager
 }
@@ -22,24 +22,37 @@ interface DraggableCollectionOptions extends DraggableCollectionProps {
 export interface DraggableCollectionState {
   collection: Collection<Node<unknown>>,
   selectionManager: MultipleSelectionManager,
+  draggedKey: Key | null,
+  draggingKeys: Set<Key>,
   isDragging(key: Key): boolean,
   getKeysForDrag(key: Key): Set<Key>,
   getItems(key: Key): DragItem[],
-  renderPreview(key: Key): JSX.Element,
+  preview?: RefObject<DragPreviewRenderer>,
   startDrag(key: Key, event: DragStartEvent): void,
   moveDrag(event: DragMoveEvent): void,
   endDrag(event: DragEndEvent): void
 }
 
 export function useDraggableCollectionState(props: DraggableCollectionOptions): DraggableCollectionState {
-  let [draggingKeys, setDraggingKeys] = useState(new Set<Key>());
+  let {
+    getItems,
+    collection,
+    selectionManager,
+    onDragStart,
+    onDragMove,
+    onDragEnd,
+    preview
+  } = props;
+  let [, setDragging] = useState(false);
+  let draggingKeys = useRef(new Set<Key>());
+  let draggedKey = useRef(null);
   let getKeys = (key: Key) => {
     // The clicked item is always added to the drag. If it is selected, then all of the
     // other selected items are also dragged. If it is not selected, the only the clicked
     // item is dragged. This matches native macOS behavior.
     let keys = new Set(
-      props.selectionManager.isSelected(key)
-        ? props.selectionManager.selectedKeys
+      selectionManager.isSelected(key)
+        ? new Set([...selectionManager.selectedKeys])
         : []
     );
 
@@ -48,50 +61,53 @@ export function useDraggableCollectionState(props: DraggableCollectionOptions):
   };
 
   return {
-    collection: props.collection,
-    selectionManager: props.selectionManager,
+    collection,
+    selectionManager,
+    get draggedKey() {
+      return draggedKey.current;
+    },
+    get draggingKeys() {
+      return draggingKeys.current;
+    },
     isDragging(key) {
-      return draggingKeys.has(key);
+      return draggingKeys.current.has(key);
     },
     getKeysForDrag: getKeys,
     getItems(key) {
-      return props.getItems(getKeys(key));
-    },
-    renderPreview(key) {
-      if (typeof props.renderPreview === 'function') {
-        return props.renderPreview(getKeys(key), key);
-      }
-
-      return null;
+      return getItems(getKeys(key));
     },
+    preview,
     startDrag(key, event) {
+      setDragging(true);
       let keys = getKeys(key);
-      setDraggingKeys(keys);
-
-      if (typeof props.onDragStart === 'function') {
-        props.onDragStart({
+      draggingKeys.current = keys;
+      draggedKey.current = key;
+      if (typeof onDragStart === 'function') {
+        onDragStart({
           ...event,
           keys
         });
       }
     },
     moveDrag(event) {
-      if (typeof props.onDragMove === 'function') {
-        props.onDragMove({
+      if (typeof onDragMove === 'function') {
+        onDragMove({
           ...event,
-          keys: draggingKeys
+          keys: draggingKeys.current
         });
       }
     },
     endDrag(event) {
-      if (typeof props.onDragEnd === 'function') {
-        props.onDragEnd({
+      if (typeof onDragEnd === 'function') {
+        onDragEnd({
           ...event,
-          keys: draggingKeys
+          keys: draggingKeys.current
         });
       }
 
-      setDraggingKeys(new Set());
+      setDragging(false);
+      draggingKeys.current = new Set();
+      draggedKey.current = null;
     }
   };
 }

package/src/useDroppableCollectionState.ts

@@ -14,7 +14,7 @@ import {Collection, DragTypes, DropOperation, DroppableCollectionProps, DropTarg
 import {MultipleSelectionManager} from '@react-stately/selection';
 import {useState} from 'react';
 
-interface DroppableCollectionStateOptions extends DroppableCollectionProps {
+export interface DroppableCollectionStateOptions extends DroppableCollectionProps {
   collection: Collection<Node<unknown>>,
   selectionManager: MultipleSelectionManager
 }