@react-stately/dnd - npm Package Compare versions

Comparing version 3.0.0-nightly.3575 to 3.0.0-nightly-016590a4a-250131

dist/main.js

@@ -1,3 +0,5 @@
-var $1IdlX$react = require("react");
+var $481a240e3d51b276$exports = require("./useDraggableCollectionState.main.js");
+var $6ce4cbfbe5e354f1$exports = require("./useDroppableCollectionState.main.js");
 
+
 function $parcel$export(e, n, v, s) {
@@ -7,165 +9,18 @@ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 
-$parcel$export(module.exports, "useDraggableCollectionState", () => $481a240e3d51b276$export$29efd034f1d79f81);
-$parcel$export(module.exports, "useDroppableCollectionState", () => $6ce4cbfbe5e354f1$export$926850f6ecef79d0);
+$parcel$export(module.exports, "useDraggableCollectionState", () => $481a240e3d51b276$exports.useDraggableCollectionState);
+$parcel$export(module.exports, "useDroppableCollectionState", () => $6ce4cbfbe5e354f1$exports.useDroppableCollectionState);
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
 
-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) {
-            let { isInternal: isInternal  } = event;
-            if (typeof onDragEnd === 'function') onDragEnd({
-                ...event,
-                keys: draggingKeys.current,
-                isInternal: isInternal
-            });
-            setDragging(false);
-            draggingKeys.current = new Set();
-            draggedKey.current = null;
-        }
-    };
-}
 
 
-
-function $6ce4cbfbe5e354f1$export$926850f6ecef79d0(props) {
-    let { acceptedDragTypes: acceptedDragTypes = 'all' , onInsert: onInsert , onRootDrop: onRootDrop , onItemDrop: onItemDrop , onReorder: onReorder , shouldAcceptItemDrop: shouldAcceptItemDrop , collection: collection , selectionManager: selectionManager , onDropEnter: onDropEnter , getDropOperation: getDropOperation , onDrop: onDrop  } = props;
-    let [target1, setTarget] = $1IdlX$react.useState(null);
-    let targetRef = $1IdlX$react.useRef(null);
-    let getOppositeTarget = (target)=>{
-        if (target.dropPosition === 'before') {
-            let key = collection.getKeyBefore(target.key);
-            return key != null ? {
-                type: 'item',
-                key: key,
-                dropPosition: 'after'
-            } : null;
-        } else if (target.dropPosition === 'after') {
-            let key = collection.getKeyAfter(target.key);
-            return key != null ? {
-                type: 'item',
-                key: key,
-                dropPosition: 'before'
-            } : null;
-        }
-    };
-    let defaultGetDropOperation = $1IdlX$react.useCallback((e)=>{
-        let { target: target , types: types , allowedOperations: allowedOperations , isInternal: isInternal , draggingKeys: draggingKeys  } = e;
-        if (acceptedDragTypes === 'all' || acceptedDragTypes.some((type)=>types.has(type)
-        )) {
-            let isValidInsert = onInsert && target.type === 'item' && !isInternal && (target.dropPosition === 'before' || target.dropPosition === 'after');
-            let isValidReorder = onReorder && target.type === 'item' && isInternal && (target.dropPosition === 'before' || target.dropPosition === 'after');
-            // Feedback was that internal root drop was weird so preventing that from happening
-            let isValidRootDrop = onRootDrop && target.type === 'root' && !isInternal;
-            // Automatically prevent items (i.e. folders) from being dropped on themselves.
-            let isValidOnItemDrop = onItemDrop && target.type === 'item' && target.dropPosition === 'on' && !(isInternal && draggingKeys.has(target.key)) && (!shouldAcceptItemDrop || shouldAcceptItemDrop(target, types));
-            if (onDrop || isValidInsert || isValidReorder || isValidRootDrop || isValidOnItemDrop) {
-                if (getDropOperation) return getDropOperation(target, types, allowedOperations);
-                else return allowedOperations[0];
-            }
-        }
-        return 'cancel';
-    }, [
-        acceptedDragTypes,
-        getDropOperation,
-        onInsert,
-        onRootDrop,
-        onItemDrop,
-        shouldAcceptItemDrop,
-        onReorder,
-        onDrop
-    ]);
-    return {
-        collection: collection,
-        selectionManager: selectionManager,
-        target: target1,
-        setTarget (newTarget) {
-            if (this.isDropTarget(newTarget)) return;
-            let target = targetRef.current;
-            if (target && typeof props.onDropExit === 'function') props.onDropExit({
-                type: 'dropexit',
-                x: 0,
-                y: 0,
-                target: target
-            });
-            if (newTarget && typeof onDropEnter === 'function') onDropEnter({
-                type: 'dropenter',
-                x: 0,
-                y: 0,
-                target: newTarget
-            });
-            targetRef.current = newTarget;
-            setTarget(newTarget);
-        },
-        isDropTarget (dropTarget) {
-            let target = targetRef.current;
-            if ($6ce4cbfbe5e354f1$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 || dropTarget === void 0 ? void 0 : dropTarget.type) === 'item' && (target === null || target === void 0 ? void 0 : target.type) === 'item' && dropTarget.key !== target.key && dropTarget.dropPosition !== target.dropPosition && dropTarget.dropPosition !== 'on' && target.dropPosition !== 'on') return $6ce4cbfbe5e354f1$var$isEqualDropTarget(getOppositeTarget(dropTarget), target) || $6ce4cbfbe5e354f1$var$isEqualDropTarget(dropTarget, getOppositeTarget(target));
-            return false;
-        },
-        getDropOperation (e) {
-            return defaultGetDropOperation(e);
-        }
-    };
-}
-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;
-    }
-}
-
-
-
-
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,165 +0,19 @@
-import {useState as $bBNwq$useState, useRef as $bBNwq$useRef, useCallback as $bBNwq$useCallback} from "react";
+import {useDraggableCollectionState as $b45bbbaf0c3785df$export$29efd034f1d79f81} from "./useDraggableCollectionState.module.js";
+import {useDroppableCollectionState as $e672e8bc247525d1$export$926850f6ecef79d0} from "./useDroppableCollectionState.module.js";
 
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
 
-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) {
-            let { isInternal: isInternal  } = event;
-            if (typeof onDragEnd === 'function') onDragEnd({
-                ...event,
-                keys: draggingKeys.current,
-                isInternal: isInternal
-            });
-            setDragging(false);
-            draggingKeys.current = new Set();
-            draggedKey.current = null;
-        }
-    };
-}
 
 
-
-function $e672e8bc247525d1$export$926850f6ecef79d0(props) {
-    let { acceptedDragTypes: acceptedDragTypes = 'all' , onInsert: onInsert , onRootDrop: onRootDrop , onItemDrop: onItemDrop , onReorder: onReorder , shouldAcceptItemDrop: shouldAcceptItemDrop , collection: collection , selectionManager: selectionManager , onDropEnter: onDropEnter , getDropOperation: getDropOperation , onDrop: onDrop  } = props;
-    let [target1, setTarget] = $bBNwq$useState(null);
-    let targetRef = $bBNwq$useRef(null);
-    let getOppositeTarget = (target)=>{
-        if (target.dropPosition === 'before') {
-            let key = collection.getKeyBefore(target.key);
-            return key != null ? {
-                type: 'item',
-                key: key,
-                dropPosition: 'after'
-            } : null;
-        } else if (target.dropPosition === 'after') {
-            let key = collection.getKeyAfter(target.key);
-            return key != null ? {
-                type: 'item',
-                key: key,
-                dropPosition: 'before'
-            } : null;
-        }
-    };
-    let defaultGetDropOperation = $bBNwq$useCallback((e)=>{
-        let { target: target , types: types , allowedOperations: allowedOperations , isInternal: isInternal , draggingKeys: draggingKeys  } = e;
-        if (acceptedDragTypes === 'all' || acceptedDragTypes.some((type)=>types.has(type)
-        )) {
-            let isValidInsert = onInsert && target.type === 'item' && !isInternal && (target.dropPosition === 'before' || target.dropPosition === 'after');
-            let isValidReorder = onReorder && target.type === 'item' && isInternal && (target.dropPosition === 'before' || target.dropPosition === 'after');
-            // Feedback was that internal root drop was weird so preventing that from happening
-            let isValidRootDrop = onRootDrop && target.type === 'root' && !isInternal;
-            // Automatically prevent items (i.e. folders) from being dropped on themselves.
-            let isValidOnItemDrop = onItemDrop && target.type === 'item' && target.dropPosition === 'on' && !(isInternal && draggingKeys.has(target.key)) && (!shouldAcceptItemDrop || shouldAcceptItemDrop(target, types));
-            if (onDrop || isValidInsert || isValidReorder || isValidRootDrop || isValidOnItemDrop) {
-                if (getDropOperation) return getDropOperation(target, types, allowedOperations);
-                else return allowedOperations[0];
-            }
-        }
-        return 'cancel';
-    }, [
-        acceptedDragTypes,
-        getDropOperation,
-        onInsert,
-        onRootDrop,
-        onItemDrop,
-        shouldAcceptItemDrop,
-        onReorder,
-        onDrop
-    ]);
-    return {
-        collection: collection,
-        selectionManager: selectionManager,
-        target: target1,
-        setTarget (newTarget) {
-            if (this.isDropTarget(newTarget)) return;
-            let target = targetRef.current;
-            if (target && typeof props.onDropExit === 'function') props.onDropExit({
-                type: 'dropexit',
-                x: 0,
-                y: 0,
-                target: target
-            });
-            if (newTarget && typeof onDropEnter === 'function') onDropEnter({
-                type: 'dropenter',
-                x: 0,
-                y: 0,
-                target: newTarget
-            });
-            targetRef.current = newTarget;
-            setTarget(newTarget);
-        },
-        isDropTarget (dropTarget) {
-            let target = targetRef.current;
-            if ($e672e8bc247525d1$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 || dropTarget === void 0 ? void 0 : dropTarget.type) === 'item' && (target === null || target === void 0 ? void 0 : target.type) === 'item' && dropTarget.key !== target.key && dropTarget.dropPosition !== target.dropPosition && dropTarget.dropPosition !== 'on' && target.dropPosition !== 'on') return $e672e8bc247525d1$var$isEqualDropTarget(getOppositeTarget(dropTarget), target) || $e672e8bc247525d1$var$isEqualDropTarget(dropTarget, getOppositeTarget(target));
-            return false;
-        },
-        getDropOperation (e) {
-            return defaultGetDropOperation(e);
-        }
-    };
-}
-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;
-    }
-}
-
-
-
-
 export {$b45bbbaf0c3785df$export$29efd034f1d79f81 as useDraggableCollectionState, $e672e8bc247525d1$export$926850f6ecef79d0 as useDroppableCollectionState};
 //# sourceMappingURL=module.js.map

dist/types.d.ts

@@ -1,3 +0,2 @@
-import { Collection, DraggableCollectionEndEvent, DraggableCollectionProps, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, DropOperation, Node, DragTypes, DroppableCollectionProps, DropTarget } from "@react-types/shared";
-import { Key, RefObject } from "react";
+import { Collection, DraggableCollectionEndEvent, DraggableCollectionProps, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, DropOperation, Key, Node, RefObject, DragTypes, DroppableCollectionProps, DropTarget } from "@react-types/shared";
 import { MultipleSelectionManager } from "@react-stately/selection";
@@ -9,2 +8,4 @@ export interface DraggableCollectionStateOptions extends DraggableCollectionProps {
     selectionManager: MultipleSelectionManager;
+    /** Whether the drag events should be disabled. */
+    isDisabled?: boolean;
 }
@@ -20,2 +21,4 @@ export interface DraggableCollectionState {
     draggingKeys: Set<Key>;
+    /** Whether drag events are disabled. */
+    isDisabled?: boolean;
     /** Returns whether the given key is currently being dragged. */
@@ -28,3 +31,3 @@ isDragging(key: Key): boolean;
     /** The ref of the element that will be rendered as the drag preview while dragging. */
-    preview?: RefObject<DragPreviewRenderer>;
+    preview?: RefObject<DragPreviewRenderer | null>;
     /** Function that returns the drop operations that are allowed for the dragged items. If not provided, all drop operations are allowed. */
@@ -55,2 +58,4 @@ getAllowedDropOperations?: () => DropOperation[];
     selectionManager: MultipleSelectionManager;
+    /** Whether the drop events should be disabled. */
+    isDisabled?: boolean;
 }
@@ -64,6 +69,8 @@ export interface DroppableCollectionState {
     target: DropTarget | null;
+    /** Whether drop events are disabled. */
+    isDisabled?: boolean;
     /** Sets the current drop target. */
-    setTarget(target: DropTarget): void;
+    setTarget(target: DropTarget | null): void;
     /** Returns whether the given target is equivalent to the current drop target. */
-    isDropTarget(target: DropTarget): boolean;
+    isDropTarget(target: DropTarget | null): boolean;
     /** Returns the drop operation for the given parameters. */
@@ -70,0 +77,0 @@ getDropOperation(e: DropOperationEvent): DropOperation;

package.json

 {
   "name": "@react-stately/dnd",
-  "version": "3.0.0-nightly.3575+a13802d8b",
+  "version": "3.0.0-nightly-016590a4a-250131",
   "description": "Spectrum UI components in React",
@@ -8,2 +8,7 @@ "license": "Apache-2.0",
   "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
   "types": "dist/types.d.ts",
@@ -21,13 +26,12 @@ "source": "src/index.ts",
   "dependencies": {
-    "@babel/runtime": "^7.6.2",
-    "@react-stately/selection": "3.0.0-nightly.1875+a13802d8b",
-    "@react-types/shared": "3.0.0-nightly.1875+a13802d8b"
+    "@react-stately/selection": "3.0.0-nightly-016590a4a-250131",
+    "@react-types/shared": "3.0.0-nightly-016590a4a-250131",
+    "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"
-  },
-  "gitHead": "a13802d8be6f83af1450e56f7a88527b10d9cadf"
-}
+  }
+}

src/useDraggableCollectionState.ts

@@ -13,5 +13,5 @@ /*
 
-import {Collection, DraggableCollectionEndEvent, DraggableCollectionProps, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, DropOperation, Node} from '@react-types/shared';
-import {Key, RefObject, useRef, useState} from 'react';
+import {Collection, DraggableCollectionEndEvent, DraggableCollectionProps, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEvent, DropOperation, Key, Node, RefObject} from '@react-types/shared';
 import {MultipleSelectionManager} from '@react-stately/selection';
+import {useRef, useState} from 'react';
 
@@ -22,3 +22,5 @@ export interface DraggableCollectionStateOptions extends DraggableCollectionProps {
   /** An interface for reading and updating multiple selection state. */
-  selectionManager: MultipleSelectionManager
+  selectionManager: MultipleSelectionManager,
+  /** Whether the drag events should be disabled. */
+  isDisabled?: boolean
 }
@@ -35,2 +37,4 @@
   draggingKeys: Set<Key>,
+  /** Whether drag events are disabled. */
+  isDisabled?: boolean,
   /** Returns whether the given key is currently being dragged. */
@@ -43,3 +47,3 @@ isDragging(key: Key): boolean,
   /** The ref of the element that will be rendered as the drag preview while dragging. */
-  preview?: RefObject<DragPreviewRenderer>,
+  preview?: RefObject<DragPreviewRenderer | null>,
   /** Function that returns the drop operations that are allowed for the dragged items. If not provided, all drop operations are allowed. */
@@ -61,2 +65,3 @@ getAllowedDropOperations?: () => DropOperation[],
     getItems,
+    isDisabled,
     collection,
@@ -72,3 +77,3 @@ selectionManager,
   let draggingKeys = useRef(new Set<Key>());
-  let draggedKey = useRef(null);
+  let draggedKey = useRef<Key | null>(null);
   let getKeys = (key: Key) => {
@@ -104,9 +109,11 @@ // The clicked item is always added to the drag. If it is selected, then all of the
     },
+    isDisabled,
     preview,
     getAllowedDropOperations,
     startDrag(key, event) {
-      setDragging(true);
       let keys = getKeys(key);
       draggingKeys.current = keys;
       draggedKey.current = key;
+      selectionManager.setFocused(false);
+      setDragging(true);
       if (typeof onDragStart === 'function') {
@@ -140,7 +147,7 @@ onDragStart({
 
-      setDragging(false);
       draggingKeys.current = new Set();
       draggedKey.current = null;
+      setDragging(false);
     }
   };
 }

src/useDroppableCollectionState.ts

@@ -13,5 +13,5 @@ /*
 
-import {Collection, DragTypes, DropOperation, DroppableCollectionProps, DropTarget, ItemDropTarget, Node} from '@react-types/shared';
-import {Key, useCallback, useRef, useState} from 'react';
+import {Collection, DragTypes, DropOperation, DroppableCollectionProps, DropTarget, ItemDropTarget, Key, Node} from '@react-types/shared';
 import {MultipleSelectionManager} from '@react-stately/selection';
+import {useCallback, useRef, useState} from 'react';
 
@@ -30,3 +30,5 @@ interface DropOperationEvent {
   /** An interface for reading and updating multiple selection state. */
-  selectionManager: MultipleSelectionManager
+  selectionManager: MultipleSelectionManager,
+  /** Whether the drop events should be disabled. */
+  isDisabled?: boolean
 }
@@ -41,6 +43,8 @@
   target: DropTarget | null,
+  /** Whether drop events are disabled. */
+  isDisabled?: boolean,
   /** Sets the current drop target. */
-  setTarget(target: DropTarget): void,
+  setTarget(target: DropTarget | null): void,
   /** Returns whether the given target is equivalent to the current drop target. */
-  isDropTarget(target: DropTarget): boolean,
+  isDropTarget(target: DropTarget | null): boolean,
   /** Returns the drop operation for the given parameters. */
@@ -56,2 +60,3 @@ getDropOperation(e: DropOperationEvent): DropOperation
     acceptedDragTypes = 'all',
+    isDisabled,
     onInsert,
@@ -68,6 +73,6 @@ onRootDrop,
   } = props;
-  let [target, setTarget] = useState<DropTarget>(null);
-  let targetRef = useRef<DropTarget>(null);
+  let [target, setTarget] = useState<DropTarget | null>(null);
+  let targetRef = useRef<DropTarget | null>(null);
 
-  let getOppositeTarget = (target: ItemDropTarget): ItemDropTarget => {
+  let getOppositeTarget = (target: ItemDropTarget): ItemDropTarget | null => {
     if (target.dropPosition === 'before') {
@@ -80,2 +85,3 @@ let key = collection.getKeyBefore(target.key);
     }
+    return null;
   };
@@ -92,2 +98,6 @@
 
+    if (isDisabled || !target) {
+      return 'cancel';
+    }
+
     if (acceptedDragTypes === 'all' || acceptedDragTypes.some(type => types.has(type))) {
@@ -99,3 +109,3 @@ let isValidInsert = onInsert && target.type === 'item' && !isInternal && (target.dropPosition === 'before' || target.dropPosition === 'after');
       // Automatically prevent items (i.e. folders) from being dropped on themselves.
-      let isValidOnItemDrop = onItemDrop && target.type === 'item' && target.dropPosition === 'on' && !(isInternal && draggingKeys.has(target.key)) && (!shouldAcceptItemDrop || shouldAcceptItemDrop(target, types));
+      let isValidOnItemDrop = onItemDrop && target.type === 'item' && target.dropPosition === 'on' && !(isInternal && target.key != null && draggingKeys.has(target.key)) && (!shouldAcceptItemDrop || shouldAcceptItemDrop(target, types));
 
@@ -112,3 +122,3 @@ if (onDrop || isValidInsert || isValidReorder || isValidRootDrop || isValidOnItemDrop) {
     return 'cancel';
-  }, [acceptedDragTypes, getDropOperation, onInsert, onRootDrop, onItemDrop, shouldAcceptItemDrop, onReorder, onDrop]);
+  }, [isDisabled, acceptedDragTypes, getDropOperation, onInsert, onRootDrop, onItemDrop, shouldAcceptItemDrop, onReorder, onDrop]);
 
@@ -118,2 +128,3 @@ return {
     selectionManager,
+    isDisabled,
     target,
@@ -144,7 +155,10 @@ setTarget(newTarget) {
 
-      targetRef.current = newTarget;
-      setTarget(newTarget);
+      targetRef.current = newTarget ?? null;
+      setTarget(newTarget ?? null);
     },
     isDropTarget(dropTarget) {
       let target = targetRef.current;
+      if (!target || !dropTarget) {
+        return false;
+      }
       if (isEqualDropTarget(dropTarget, target)) {
@@ -175,3 +189,3 @@ return true;
 
-function isEqualDropTarget(a: DropTarget, b: DropTarget) {
+function isEqualDropTarget(a?: DropTarget | null, b?: DropTarget | null) {
   if (!a) {
@@ -178,0 +192,0 @@ return !b;

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 2 instances in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

86706

5.34%

Number of package files

22

83.33%

Lines of code

1019

47.04%

Worsened metrics

Number of low license alerts

2

Infinity%

License quality

80

-20%

Dependency changes

• + Added

  @swc/helpers@^0.5.0

• + Added

  @react-stately/collections@3.0.0-nightly-016590a4a-250131
  (transitive)

• + Added

  @react-stately/selection@3.0.0-nightly-016590a4a-250131
  (transitive)

• + Added

  @react-stately/utils@3.0.0-nightly-016590a4a-250131
  (transitive)

• + Added

  @react-types/shared@3.0.0-nightly-016590a4a-250131
  (transitive)

• + Added

  @swc/helpers@0.5.15
  (transitive)

• + Added

  react@19.0.0
  (transitive)

• + Added

  tslib@2.8.1
  (transitive)

• - Removed

  @babel/runtime@^7.6.2

• - Removed

  @babel/runtime@7.26.10
  (transitive)

• - Removed

  js-tokens@4.0.0
  (transitive)

• - Removed

  loose-envify@1.4.0
  (transitive)

• - Removed

  react@18.3.1
  (transitive)

• - Removed

  regenerator-runtime@0.14.1
  (transitive)

• Updated

  @react-stately/selection@3.0.0-nightly-016590a4a-250131

• Updated

  @react-types/shared@3.0.0-nightly-016590a4a-250131