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

package/dist/main.js

@@ -24,37 +24,42 @@ var $481a240e3d51b276$exports = {};
 $parcel$export($481a240e3d51b276$exports, "useDraggableCollectionState", () => $481a240e3d51b276$export$29efd034f1d79f81);
 
 function $481a240e3d51b276$export$29efd034f1d79f81(props) {
-    let { getItems: getItems , collection: collection , selectionManager: selectionManager , onDragStart: onDragStart , onDragMove: onDragMove , onDragEnd: onDragEnd , renderPreview: renderPreview , allowsDraggingItem: allowsDraggingItem = ()=>true
-      } = props;
-    let [draggingKeys, setDraggingKeys] = $1IdlX$react.useState(new Set());
-    let getKeys = (key1)=>{
+    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(selectionManager.isSelected(key1) ? new Set([
+        let keys = new Set(selectionManager.isSelected(key) ? new Set([
             ...selectionManager.selectedKeys
-        ].filter((key)=>allowsDraggingItem ? allowsDraggingItem(key) : true
-        )) : []);
-        keys.add(key1);
+        ]) : []);
+        keys.add(key);
         return keys;
     };
     return {
         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 getItems(getKeys(key));
         },
-        renderPreview (key) {
-            if (typeof renderPreview === 'function') return renderPreview(getKeys(key), key);
-            return null;
-        },
+        preview: preview,
         startDrag (key, event) {
+            setDragging(true);
             let keys = getKeys(key);
-            setDraggingKeys(keys);
+            draggingKeys.current = keys;
+            draggedKey.current = key;
             if (typeof onDragStart === 'function') onDragStart({
                 ...event,
                 keys: keys
@@ -63,17 +68,18 @@ function $481a240e3d51b276$export$29efd034f1d79f81(props) {
         moveDrag (event) {
             if (typeof onDragMove === 'function') onDragMove({
                 ...event,
-                keys: draggingKeys
+                keys: draggingKeys.current
             });
         },
         endDrag (event) {
             if (typeof onDragEnd === 'function') onDragEnd({
                 ...event,
-                keys: draggingKeys
+                keys: draggingKeys.current
             });
-            setDraggingKeys(new Set());
-        },
-        isDraggable: (key)=>allowsDraggingItem(key)
+            setDragging(false);
+            draggingKeys.current = new Set();
+            draggedKey.current = null;
+        }
     };
 }
 

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\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  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  isDraggable(key: Key): boolean\n}\n\nexport function useDraggableCollectionState(props: DraggableCollectionOptions): DraggableCollectionState {\n  let {\n    getItems,\n    collection,\n    selectionManager,\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    renderPreview,\n    allowsDraggingItem = () => true\n  } = props;\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      selectionManager.isSelected(key)\n        ? new Set([...selectionManager.selectedKeys].filter(key => allowsDraggingItem ? allowsDraggingItem(key) : true))\n        : []\n    );\n\n    keys.add(key);\n    return keys;\n  };\n\n  return {\n    collection,\n    selectionManager,\n    isDragging(key) {\n      return draggingKeys.has(key);\n    },\n    getKeysForDrag: getKeys,\n    getItems(key) {\n      return getItems(getKeys(key));\n    },\n    renderPreview(key) {\n      if (typeof renderPreview === 'function') {\n        return renderPreview(getKeys(key), key);\n      }\n\n      return null;\n    },\n    startDrag(key, event) {\n      let keys = getKeys(key);\n      setDraggingKeys(keys);\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\n        });\n      }\n    },\n    endDrag(event) {\n      if (typeof onDragEnd === 'function') {\n        onDragEnd({\n          ...event,\n          keys: draggingKeys\n        });\n      }\n\n      setDraggingKeys(new Set());\n    },\n    isDraggable: (key: Key) => allowsDraggingItem(key)\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,4 +1,4 @@
-import {useState as $bBNwq$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});
@@ -8,37 +8,42 @@ var $b45bbbaf0c3785df$exports = {};
 $parcel$export($b45bbbaf0c3785df$exports, "useDraggableCollectionState", () => $b45bbbaf0c3785df$export$29efd034f1d79f81);
 
 function $b45bbbaf0c3785df$export$29efd034f1d79f81(props) {
-    let { getItems: getItems , collection: collection , selectionManager: selectionManager , onDragStart: onDragStart , onDragMove: onDragMove , onDragEnd: onDragEnd , renderPreview: renderPreview , allowsDraggingItem: allowsDraggingItem = ()=>true
-      } = props;
-    let [draggingKeys, setDraggingKeys] = $bBNwq$useState(new Set());
-    let getKeys = (key1)=>{
+    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(selectionManager.isSelected(key1) ? new Set([
+        let keys = new Set(selectionManager.isSelected(key) ? new Set([
             ...selectionManager.selectedKeys
-        ].filter((key)=>allowsDraggingItem ? allowsDraggingItem(key) : true
-        )) : []);
-        keys.add(key1);
+        ]) : []);
+        keys.add(key);
         return keys;
     };
     return {
         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 getItems(getKeys(key));
         },
-        renderPreview (key) {
-            if (typeof renderPreview === 'function') return renderPreview(getKeys(key), key);
-            return null;
-        },
+        preview: preview,
         startDrag (key, event) {
+            setDragging(true);
             let keys = getKeys(key);
-            setDraggingKeys(keys);
+            draggingKeys.current = keys;
+            draggedKey.current = key;
             if (typeof onDragStart === 'function') onDragStart({
                 ...event,
                 keys: keys
@@ -47,17 +52,18 @@ function $b45bbbaf0c3785df$export$29efd034f1d79f81(props) {
         moveDrag (event) {
             if (typeof onDragMove === 'function') onDragMove({
                 ...event,
-                keys: draggingKeys
+                keys: draggingKeys.current
             });
         },
         endDrag (event) {
             if (typeof onDragEnd === 'function') onDragEnd({
                 ...event,
-                keys: draggingKeys
+                keys: draggingKeys.current
             });
-            setDraggingKeys(new Set());
-        },
-        isDraggable: (key)=>allowsDraggingItem(key)
+            setDragging(false);
+            draggingKeys.current = new Set();
+            draggedKey.current = null;
+        }
     };
 }
 

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\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  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  isDraggable(key: Key): boolean\n}\n\nexport function useDraggableCollectionState(props: DraggableCollectionOptions): DraggableCollectionState {\n  let {\n    getItems,\n    collection,\n    selectionManager,\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    renderPreview,\n    allowsDraggingItem = () => true\n  } = props;\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      selectionManager.isSelected(key)\n        ? new Set([...selectionManager.selectedKeys].filter(key => allowsDraggingItem ? allowsDraggingItem(key) : true))\n        : []\n    );\n\n    keys.add(key);\n    return keys;\n  };\n\n  return {\n    collection,\n    selectionManager,\n    isDragging(key) {\n      return draggingKeys.has(key);\n    },\n    getKeysForDrag: getKeys,\n    getItems(key) {\n      return getItems(getKeys(key));\n    },\n    renderPreview(key) {\n      if (typeof renderPreview === 'function') {\n        return renderPreview(getKeys(key), key);\n      }\n\n      return null;\n    },\n    startDrag(key, event) {\n      let keys = getKeys(key);\n      setDraggingKeys(keys);\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\n        });\n      }\n    },\n    endDrag(event) {\n      if (typeof onDragEnd === 'function') {\n        onDragEnd({\n          ...event,\n          keys: draggingKeys\n        });\n      }\n\n      setDraggingKeys(new Set());\n    },\n    isDraggable: (key: Key) => allowsDraggingItem(key)\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,5 +1,5 @@
-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";
 export interface DraggableCollectionOptions extends DraggableCollectionProps {
     collection: Collection<Node<unknown>>;
@@ -8,17 +8,18 @@ export 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;
-    isDraggable(key: Key): boolean;
 }
 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,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,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,CAAC;IACnC,WAAW,CAAC,GAAG,EAAE,GAAG,GAAG,OAAO,CAAA;CAC/B;AAED,4CAA4C,KAAK,EAAE,0BAA0B,GAAG,wBAAwB,CAyEvG;AC3FD,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.6",
+  "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.4",
-    "@react-stately/utils": "^3.4.1",
-    "@react-types/shared": "^3.12.0"
+    "@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": "6a503b715e0dbbf92038cd7f08b1bcdde4c78e82"
+  "gitHead": "8f921ec5094e7c2b3c301bcb6133372e35a2052b"
 }

package/src/useDraggableCollectionState.ts

@@ -10,8 +10,8 @@
  * 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';
 
 export interface DraggableCollectionOptions extends DraggableCollectionProps {
@@ -22,14 +22,15 @@ export 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,
-  isDraggable(key: Key): boolean
+  endDrag(event: DragEndEvent): void
 }
 
 export function useDraggableCollectionState(props: DraggableCollectionOptions): DraggableCollectionState {
@@ -40,17 +41,18 @@ export function useDraggableCollectionState(props: DraggableCollectionOptions):
     onDragStart,
     onDragMove,
     onDragEnd,
-    renderPreview,
-    allowsDraggingItem = () => true
+    preview
   } = props;
-  let [draggingKeys, setDraggingKeys] = useState(new Set<Key>());
+  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(
       selectionManager.isSelected(key)
-        ? new Set([...selectionManager.selectedKeys].filter(key => allowsDraggingItem ? allowsDraggingItem(key) : true))
+        ? new Set([...selectionManager.selectedKeys])
         : []
     );
 
@@ -61,23 +63,25 @@ export function useDraggableCollectionState(props: DraggableCollectionOptions):
   return {
     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 getItems(getKeys(key));
     },
-    renderPreview(key) {
-      if (typeof renderPreview === 'function') {
-        return renderPreview(getKeys(key), key);
-      }
-
-      return null;
-    },
+    preview,
     startDrag(key, event) {
+      setDragging(true);
       let keys = getKeys(key);
-      setDraggingKeys(keys);
+      draggingKeys.current = keys;
+      draggedKey.current = key;
       if (typeof onDragStart === 'function') {
         onDragStart({
           ...event,
@@ -89,7 +93,7 @@ export function useDraggableCollectionState(props: DraggableCollectionOptions):
       if (typeof onDragMove === 'function') {
         onDragMove({
           ...event,
-          keys: draggingKeys
+          keys: draggingKeys.current
         });
       }
     },
@@ -97,12 +101,13 @@ export function useDraggableCollectionState(props: DraggableCollectionOptions):
       if (typeof onDragEnd === 'function') {
         onDragEnd({
           ...event,
-          keys: draggingKeys
+          keys: draggingKeys.current
         });
       }
 
-      setDraggingKeys(new Set());
-    },
-    isDraggable: (key: Key) => allowsDraggingItem(key)
+      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
 }