npm - @react-stately/dnd - Versions diffs - 3.0.0-alpha.1 → 3.0.0-alpha.10 - Mend

@react-stately/dnd 3.0.0-alpha.1 → 3.0.0-alpha.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/main.js +123 -154
package/dist/main.js.map +1 -1
package/dist/module.js +122 -145
package/dist/module.js.map +1 -1
package/dist/types.d.ts +8 -5
package/dist/types.d.ts.map +1 -1
package/package.json +6 -6
package/src/index.ts +4 -2
package/src/useDraggableCollectionState.ts +48 -29
package/src/useDroppableCollectionState.ts +1 -1

package/dist/main.js CHANGED Viewed

@@ -1,168 +1,137 @@
-var {
-  useState
-} = require("react");
+var $1IdlX$react = require("react");
-var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
-function useDraggableCollectionState(props) {
-  let [draggingKeys, setDraggingKeys] = useState(new Set());
-  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 : []);
-    keys.add(key);
-    return keys;
-  };
-  return {
-    collection: props.collection,
-    selectionManager: props.selectionManager,
-    isDragging(key) {
-      return draggingKeys.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;
-    },
-    startDrag(key, event) {
-      let keys = getKeys(key);
-      setDraggingKeys(keys);
-      if (typeof props.onDragStart === 'function') {
-        props.onDragStart(_babelRuntimeHelpersExtends({}, event, {
-          keys
-        }));
-      }
-    },
-    moveDrag(event) {
-      if (typeof props.onDragMove === 'function') {
-        props.onDragMove(_babelRuntimeHelpersExtends({}, event, {
-          keys: draggingKeys
-        }));
-      }
-    },
-    endDrag(event) {
-      if (typeof props.onDragEnd === 'function') {
-        props.onDragEnd(_babelRuntimeHelpersExtends({}, event, {
-          keys: draggingKeys
-        }));
-      }
-      setDraggingKeys(new Set());
-    }
-  };
+$parcel$export(module.exports, "useDraggableCollectionState", () => $481a240e3d51b276$export$29efd034f1d79f81);
+$parcel$export(module.exports, "useDroppableCollectionState", () => $6ce4cbfbe5e354f1$export$926850f6ecef79d0);
+function $481a240e3d51b276$export$29efd034f1d79f81(props) {
+    let { getItems: getItems , collection: collection , selectionManager: selectionManager , onDragStart: onDragStart , onDragMove: onDragMove , onDragEnd: onDragEnd , preview: preview , getAllowedDropOperations: getAllowedDropOperations  } = props;
+    let [, setDragging] = $1IdlX$react.useState(false);
+    let draggingKeys = $1IdlX$react.useRef(new Set());
+    let draggedKey = $1IdlX$react.useRef(null);
+    let getKeys = (key1)=>{
+        // 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([
+            ...selectionManager.selectedKeys
+        ].filter((key)=>!!collection.getItem(key)
+        )) : []);
+        keys.add(key1);
+        return keys;
+    };
+    return {
+        collection: collection,
+        selectionManager: selectionManager,
+        get draggedKey () {
+            return draggedKey.current;
+        },
+        get draggingKeys () {
+            return draggingKeys.current;
+        },
+        isDragging (key) {
+            return draggingKeys.current.has(key);
+        },
+        getKeysForDrag: getKeys,
+        getItems (key) {
+            return getItems(getKeys(key));
+        },
+        preview: preview,
+        getAllowedDropOperations: getAllowedDropOperations,
+        startDrag (key, event) {
+            setDragging(true);
+            let keys = getKeys(key);
+            draggingKeys.current = keys;
+            draggedKey.current = key;
+            if (typeof onDragStart === 'function') onDragStart({
+                ...event,
+                keys: keys
+            });
+        },
+        moveDrag (event) {
+            if (typeof onDragMove === 'function') onDragMove({
+                ...event,
+                keys: draggingKeys.current
+            });
+        },
+        endDrag (event) {
+            if (typeof onDragEnd === 'function') onDragEnd({
+                ...event,
+                keys: draggingKeys.current
+            });
+            setDragging(false);
+            draggingKeys.current = new Set();
+            draggedKey.current = null;
+        }
+    };
 }
-exports.useDraggableCollectionState = useDraggableCollectionState;
-function useDroppableCollectionState(props) {
-  let [target, setTarget] = useState(null);
-  let getOppositeTarget = target => {
-    if (target.dropPosition === 'before') {
-      let key = props.collection.getKeyBefore(target.key);
-      return key != null ? {
-        type: 'item',
-        key,
-        dropPosition: 'after'
-      } : null;
-    } else if (target.dropPosition === 'after') {
-      let key = props.collection.getKeyAfter(target.key);
-      return key != null ? {
-        type: 'item',
-        key,
-        dropPosition: 'before'
-      } : null;
-    }
-  };
-  return {
-    collection: props.collection,
-    selectionManager: props.selectionManager,
-    target,
-    setTarget(newTarget) {
-      if (this.isDropTarget(newTarget)) {
-        return;
-      }
-      if (target && typeof props.onDropExit === 'function') {
-        props.onDropExit({
-          type: 'dropexit',
-          x: 0,
-          // todo
-          y: 0,
-          target
-        });
-      }
-      if (newTarget && typeof props.onDropEnter === 'function') {
-        props.onDropEnter({
-          type: 'dropenter',
-          x: 0,
-          // todo
-          y: 0,
-          target: newTarget
-        });
-      }
-      setTarget(newTarget);
-    },
-    isDropTarget(dropTarget) {
-      if ($e9dc567085e93bc34b98b82b1b477$var$isEqualDropTarget(dropTarget, target)) {
-        return true;
-      } // Check if the targets point at the same point between two items, one referring before, and the other after.
-      if ((dropTarget == null ? void 0 : dropTarget.type) === 'item' && (target == null ? void 0 : target.type) === 'item' && dropTarget.key !== target.key && dropTarget.dropPosition !== target.dropPosition && dropTarget.dropPosition !== 'on' && target.dropPosition !== 'on') {
-        return $e9dc567085e93bc34b98b82b1b477$var$isEqualDropTarget(getOppositeTarget(dropTarget), target) || $e9dc567085e93bc34b98b82b1b477$var$isEqualDropTarget(dropTarget, getOppositeTarget(target));
-      }
-      return false;
-    },
-    getDropOperation(target, types, allowedOperations) {
-      return typeof props.getDropOperation === 'function' ? props.getDropOperation(target, types, allowedOperations) : allowedOperations[0];
+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);
+            return key != null ? {
+                type: 'item',
+                key: key,
+                dropPosition: 'after'
+            } : null;
+        } else if (target.dropPosition === 'after') {
+            let key = props.collection.getKeyAfter(target.key);
+            return key != null ? {
+                type: 'item',
+                key: key,
+                dropPosition: 'before'
+            } : null;
+        }
+    };
+    return {
+        collection: props.collection,
+        selectionManager: props.selectionManager,
+        target: target1,
+        setTarget (newTarget) {
+            if (this.isDropTarget(newTarget)) return;
+            if (target1 && typeof props.onDropExit === 'function') props.onDropExit({
+                type: 'dropexit',
+                x: 0,
+                y: 0,
+                target: target1
+            });
+            if (newTarget && typeof props.onDropEnter === 'function') props.onDropEnter({
+                type: 'dropenter',
+                x: 0,
+                y: 0,
+                target: newTarget
+            });
+            setTarget(newTarget);
+        },
+        isDropTarget (dropTarget) {
+            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 $6ce4cbfbe5e354f1$var$isEqualDropTarget(getOppositeTarget(dropTarget), target1) || $6ce4cbfbe5e354f1$var$isEqualDropTarget(dropTarget, getOppositeTarget(target1));
+            return false;
+        },
+        getDropOperation (target, types, allowedOperations) {
+            return typeof props.getDropOperation === 'function' ? props.getDropOperation(target, types, allowedOperations) : allowedOperations[0];
+        }
+    };
+}
+function $6ce4cbfbe5e354f1$var$isEqualDropTarget(a, b) {
+    if (!a) return !b;
+    switch(a.type){
+        case 'root':
+            return (b === null || b === void 0 ? void 0 : b.type) === 'root';
+        case 'item':
+            return (b === null || b === void 0 ? void 0 : b.type) === 'item' && (b === null || b === void 0 ? void 0 : b.key) === a.key && (b === null || b === void 0 ? void 0 : b.dropPosition) === a.dropPosition;
     }
-  };
 }
-exports.useDroppableCollectionState = useDroppableCollectionState;
-function $e9dc567085e93bc34b98b82b1b477$var$isEqualDropTarget(a, b) {
-  if (!a) {
-    return !b;
-  }
-  switch (a.type) {
-    case 'root':
-      return (b == null ? void 0 : b.type) === 'root';
-    case 'item':
-      return (b == null ? void 0 : b.type) === 'item' && (b == null ? void 0 : b.key) === a.key && (b == null ? void 0 : b.dropPosition) === a.dropPosition;
-  }
-}
 //# sourceMappingURL=main.js.map

package/dist/main.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"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","sources":["./node_modules/@parcel/scope-hoisting/lib/helpers.js","./packages/@react-stately/dnd/src/useDraggableCollectionState.ts","./packages/@react-stately/dnd/src/useDroppableCollectionState.ts"],"sourcesContent":["function $parcel$interopDefault(a) {\n return a && a.__esModule ? a.default : a;\n}\n\nfunction $parcel$defineInteropFlag(a) {\n Object.defineProperty(a, '__esModule', {value: true});\n}\n\nfunction $parcel$exportWildcard(dest, source) {\n Object.keys(source).forEach(function(key) {\n if (key === 'default' \|\| key === '__esModule') {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function get() {\n return source[key];\n },\n });\n });\n\n return dest;\n}\n\nfunction $parcel$missingModule(name) {\n var err = new Error(\"Cannot find module '\" + name + \"'\");\n err.code = 'MODULE_NOT_FOUND';\n throw err;\n}\n\nvar $parcel$global =\n typeof globalThis !== 'undefined'\n ? globalThis\n : typeof self !== 'undefined'\n ? self\n : typeof window !== 'undefined'\n ? window\n : typeof global !== 'undefined'\n ? global\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, 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":["$parcel$interopDefault","a","__esModule","default","useDraggableCollectionState","props","draggingKeys","setDraggingKeys","useState","Set","getKeys","key","keys","selectionManager","isSelected","selectedKeys","add","collection","isDragging","has","getKeysForDrag","getItems","renderPreview","startDrag","event","onDragStart","moveDrag","onDragMove","endDrag","onDragEnd","useDroppableCollectionState","target","setTarget","getOppositeTarget","dropPosition","getKeyBefore","type","getKeyAfter","newTarget","isDropTarget","onDropExit","x","y","onDropEnter","dropTarget","isEqualDropTarget","getDropOperation","types","allowedOperations","b"],"version":3,"file":"main.js.map"}
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 type {DraggableCollectionOptions, DraggableCollectionState} from './useDraggableCollectionState';\nexport type {DroppableCollectionStateOptions, DroppableCollectionState} from './useDroppableCollectionState';\nexport {useDraggableCollectionState} from './useDraggableCollectionState';\nexport {useDroppableCollectionState} 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, DropOperation, 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 getAllowedDropOperations?: () => DropOperation[],\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 getAllowedDropOperations\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].filter(key => !!collection.getItem(key)))\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 getAllowedDropOperations,\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 CHANGED Viewed

@@ -1,155 +1,132 @@
-import { useState } from "react";
-import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
-export function useDraggableCollectionState(props) {
-  let [draggingKeys, setDraggingKeys] = useState(new Set());
-  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 : []);
-    keys.add(key);
-    return keys;
-  };
-  return {
-    collection: props.collection,
-    selectionManager: props.selectionManager,
-    isDragging(key) {
-      return draggingKeys.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;
-    },
-    startDrag(key, event) {
-      let keys = getKeys(key);
-      setDraggingKeys(keys);
-      if (typeof props.onDragStart === 'function') {
-        props.onDragStart(_babelRuntimeHelpersEsmExtends({}, event, {
-          keys
-        }));
-      }
-    },
-    moveDrag(event) {
-      if (typeof props.onDragMove === 'function') {
-        props.onDragMove(_babelRuntimeHelpersEsmExtends({}, event, {
-          keys: draggingKeys
-        }));
-      }
-    },
-    endDrag(event) {
-      if (typeof props.onDragEnd === 'function') {
-        props.onDragEnd(_babelRuntimeHelpersEsmExtends({}, event, {
-          keys: draggingKeys
-        }));
-      }
-      setDraggingKeys(new Set());
-    }
-  };
+import {useState as $bBNwq$useState, useRef as $bBNwq$useRef} from "react";
+function $b45bbbaf0c3785df$export$29efd034f1d79f81(props) {
+    let { getItems: getItems , collection: collection , selectionManager: selectionManager , onDragStart: onDragStart , onDragMove: onDragMove , onDragEnd: onDragEnd , preview: preview , getAllowedDropOperations: getAllowedDropOperations  } = props;
+    let [, setDragging] = $bBNwq$useState(false);
+    let draggingKeys = $bBNwq$useRef(new Set());
+    let draggedKey = $bBNwq$useRef(null);
+    let getKeys = (key1)=>{
+        // 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([
+            ...selectionManager.selectedKeys
+        ].filter((key)=>!!collection.getItem(key)
+        )) : []);
+        keys.add(key1);
+        return keys;
+    };
+    return {
+        collection: collection,
+        selectionManager: selectionManager,
+        get draggedKey () {
+            return draggedKey.current;
+        },
+        get draggingKeys () {
+            return draggingKeys.current;
+        },
+        isDragging (key) {
+            return draggingKeys.current.has(key);
+        },
+        getKeysForDrag: getKeys,
+        getItems (key) {
+            return getItems(getKeys(key));
+        },
+        preview: preview,
+        getAllowedDropOperations: getAllowedDropOperations,
+        startDrag (key, event) {
+            setDragging(true);
+            let keys = getKeys(key);
+            draggingKeys.current = keys;
+            draggedKey.current = key;
+            if (typeof onDragStart === 'function') onDragStart({
+                ...event,
+                keys: keys
+            });
+        },
+        moveDrag (event) {
+            if (typeof onDragMove === 'function') onDragMove({
+                ...event,
+                keys: draggingKeys.current
+            });
+        },
+        endDrag (event) {
+            if (typeof onDragEnd === 'function') onDragEnd({
+                ...event,
+                keys: draggingKeys.current
+            });
+            setDragging(false);
+            draggingKeys.current = new Set();
+            draggedKey.current = null;
+        }
+    };
 }
-export function useDroppableCollectionState(props) {
-  let [target, setTarget] = useState(null);
-  let getOppositeTarget = target => {
-    if (target.dropPosition === 'before') {
-      let key = props.collection.getKeyBefore(target.key);
-      return key != null ? {
-        type: 'item',
-        key,
-        dropPosition: 'after'
-      } : null;
-    } else if (target.dropPosition === 'after') {
-      let key = props.collection.getKeyAfter(target.key);
-      return key != null ? {
-        type: 'item',
-        key,
-        dropPosition: 'before'
-      } : null;
-    }
-  };
-  return {
-    collection: props.collection,
-    selectionManager: props.selectionManager,
-    target,
-    setTarget(newTarget) {
-      if (this.isDropTarget(newTarget)) {
-        return;
-      }
-      if (target && typeof props.onDropExit === 'function') {
-        props.onDropExit({
-          type: 'dropexit',
-          x: 0,
-          // todo
-          y: 0,
-          target
-        });
-      }
-      if (newTarget && typeof props.onDropEnter === 'function') {
-        props.onDropEnter({
-          type: 'dropenter',
-          x: 0,
-          // todo
-          y: 0,
-          target: newTarget
-        });
-      }
-      setTarget(newTarget);
-    },
-    isDropTarget(dropTarget) {
-      if ($dd31abc8396c596698a2b05e189ba$var$isEqualDropTarget(dropTarget, target)) {
-        return true;
-      } // Check if the targets point at the same point between two items, one referring before, and the other after.
-      if ((dropTarget == null ? void 0 : dropTarget.type) === 'item' && (target == null ? void 0 : target.type) === 'item' && dropTarget.key !== target.key && dropTarget.dropPosition !== target.dropPosition && dropTarget.dropPosition !== 'on' && target.dropPosition !== 'on') {
-        return $dd31abc8396c596698a2b05e189ba$var$isEqualDropTarget(getOppositeTarget(dropTarget), target) || $dd31abc8396c596698a2b05e189ba$var$isEqualDropTarget(dropTarget, getOppositeTarget(target));
-      }
-      return false;
-    },
-    getDropOperation(target, types, allowedOperations) {
-      return typeof props.getDropOperation === 'function' ? props.getDropOperation(target, types, allowedOperations) : allowedOperations[0];
+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);
+            return key != null ? {
+                type: 'item',
+                key: key,
+                dropPosition: 'after'
+            } : null;
+        } else if (target.dropPosition === 'after') {
+            let key = props.collection.getKeyAfter(target.key);
+            return key != null ? {
+                type: 'item',
+                key: key,
+                dropPosition: 'before'
+            } : null;
+        }
+    };
+    return {
+        collection: props.collection,
+        selectionManager: props.selectionManager,
+        target: target1,
+        setTarget (newTarget) {
+            if (this.isDropTarget(newTarget)) return;
+            if (target1 && typeof props.onDropExit === 'function') props.onDropExit({
+                type: 'dropexit',
+                x: 0,
+                y: 0,
+                target: target1
+            });
+            if (newTarget && typeof props.onDropEnter === 'function') props.onDropEnter({
+                type: 'dropenter',
+                x: 0,
+                y: 0,
+                target: newTarget
+            });
+            setTarget(newTarget);
+        },
+        isDropTarget (dropTarget) {
+            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 $e672e8bc247525d1$var$isEqualDropTarget(getOppositeTarget(dropTarget), target1) || $e672e8bc247525d1$var$isEqualDropTarget(dropTarget, getOppositeTarget(target1));
+            return false;
+        },
+        getDropOperation (target, types, allowedOperations) {
+            return typeof props.getDropOperation === 'function' ? props.getDropOperation(target, types, allowedOperations) : allowedOperations[0];
+        }
+    };
+}
+function $e672e8bc247525d1$var$isEqualDropTarget(a, b) {
+    if (!a) return !b;
+    switch(a.type){
+        case 'root':
+            return (b === null || b === void 0 ? void 0 : b.type) === 'root';
+        case 'item':
+            return (b === null || b === void 0 ? void 0 : b.type) === 'item' && (b === null || b === void 0 ? void 0 : b.key) === a.key && (b === null || b === void 0 ? void 0 : b.dropPosition) === a.dropPosition;
     }
-  };
 }
-function $dd31abc8396c596698a2b05e189ba$var$isEqualDropTarget(a, b) {
-  if (!a) {
-    return !b;
-  }
-  switch (a.type) {
-    case 'root':
-      return (b == null ? void 0 : b.type) === 'root';
-    case 'item':
-      return (b == null ? void 0 : b.type) === 'item' && (b == null ? void 0 : b.key) === a.key && (b == null ? void 0 : b.dropPosition) === a.dropPosition;
-  }
-}
+export {$b45bbbaf0c3785df$export$29efd034f1d79f81 as useDraggableCollectionState, $e672e8bc247525d1$export$926850f6ecef79d0 as useDroppableCollectionState};
 //# sourceMappingURL=module.js.map

package/dist/module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"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","sources":["./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\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":["useDraggableCollectionState","props","draggingKeys","setDraggingKeys","useState","Set","getKeys","key","keys","selectionManager","isSelected","selectedKeys","add","collection","isDragging","has","getKeysForDrag","getItems","renderPreview","startDrag","event","onDragStart","moveDrag","onDragMove","endDrag","onDragEnd","useDroppableCollectionState","target","setTarget","getOppositeTarget","dropPosition","getKeyBefore","type","getKeyAfter","newTarget","isDropTarget","onDropExit","x","y","onDropEnter","dropTarget","isEqualDropTarget","getDropOperation","types","allowedOperations","a","b"],"version":3,"file":"module.js.map"}
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 type {DraggableCollectionOptions, DraggableCollectionState} from './useDraggableCollectionState';\nexport type {DroppableCollectionStateOptions, DroppableCollectionState} from './useDroppableCollectionState';\nexport {useDraggableCollectionState} from './useDraggableCollectionState';\nexport {useDroppableCollectionState} 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, DropOperation, 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 getAllowedDropOperations?: () => DropOperation[],\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 getAllowedDropOperations\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].filter(key => !!collection.getItem(key)))\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 getAllowedDropOperations,\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 CHANGED Viewed

@@ -1,23 +1,26 @@
-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, DropOperation, Node, DragTypes, 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>;
+    getAllowedDropOperations?: () => DropOperation[];
     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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"~~A;A;A;~~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"],"sourcesContent":[null,null,null],"names":[],"version":3,"file":"types.d.ts.map"}
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,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,wBAAwB,CAAC,EAAE,MAAM,aAAa,EAAE,CAAC;IACjD,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+EvG;ACnGD,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 type {DraggableCollectionOptions, DraggableCollectionState} from './useDraggableCollectionState';\nexport type {DroppableCollectionStateOptions, DroppableCollectionState} from './useDroppableCollectionState';\nexport {useDraggableCollectionState} from './useDraggableCollectionState';\nexport {useDroppableCollectionState} from './useDroppableCollectionState';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@react-stately/dnd",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.10",
   "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.5.0",
-    "@react-stately/utils": "^3.2.1",
-    "@react-types/shared": "^3.6.0"
+    "@react-stately/selection": "^3.10.3",
+    "@react-stately/utils": "^3.5.1",
+    "@react-types/shared": "^3.14.1"
   },
   "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": "3aae08e7d8a75382bedcddac7c86107e40db9296"
+  "gitHead": "b03ef51e6317547dd0a840f151e59d039b1e1fd3"
 }

package/src/index.ts CHANGED Viewed

@@ -10,5 +10,7 @@
  * governing permissions and limitations under the License.
  */
-export * from './useDraggableCollectionState';
-export * from './useDroppableCollectionState';
+export type {DraggableCollectionOptions, DraggableCollectionState} from './useDraggableCollectionState';
+export type {DroppableCollectionStateOptions, DroppableCollectionState} from './useDroppableCollectionState';
+export {useDraggableCollectionState} from './useDraggableCollectionState';
+export {useDroppableCollectionState} from './useDroppableCollectionState';

package/src/useDraggableCollectionState.ts CHANGED Viewed

@@ -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, DropOperation, 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,39 @@ 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>,
+  getAllowedDropOperations?: () => DropOperation[],
   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,
+    getAllowedDropOperations
+  } = 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].filter(key => !!collection.getItem(key)))
         : []
     );
@@ -48,50 +63,54 @@ 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,
+    getAllowedDropOperations,
     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 CHANGED Viewed

@@ -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
 }