@react-spectrum/dnd - npm Package Compare versions

Comparing version 3.0.0-nightly.3575 to 3.0.0-nightly-4980928d3-240906

dist/main.js

@@ -0,5 +1,5 @@
+var $e96ca2229d77f411$exports = require("./useDragAndDrop.main.js");
 var $9OUiQ$reactariadnd = require("@react-aria/dnd");
-var $9OUiQ$reactstatelydnd = require("@react-stately/dnd");
-var $9OUiQ$react = require("react");
 
+
 function $parcel$export(e, n, v, s) {
@@ -9,54 +9,19 @@ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 
-$parcel$export(module.exports, "useDragAndDrop", () => $e96ca2229d77f411$export$2cfc5be7a55829f6);
+$parcel$export(module.exports, "useDragAndDrop", () => $e96ca2229d77f411$exports.useDragAndDrop);
 $parcel$export(module.exports, "DIRECTORY_DRAG_TYPE", () => $9OUiQ$reactariadnd.DIRECTORY_DRAG_TYPE);
+/*
+ * Copyright 2022 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.
+ */ /// <reference types="css-module-types" />
 
 
 
-function $e96ca2229d77f411$export$2cfc5be7a55829f6(options) {
-    let dragAndDropHooks = $9OUiQ$react.useMemo(()=>{
-        let { onDrop: onDrop , onInsert: onInsert , onItemDrop: onItemDrop , onReorder: onReorder , onRootDrop: onRootDrop , getItems: getItems  } = options;
-        let isDraggable = !!getItems;
-        let isDroppable = !!(onDrop || onInsert || onItemDrop || onReorder || onRootDrop);
-        let hooks = {
-        };
-        if (isDraggable) {
-            hooks.useDraggableCollectionState = function useDraggableCollectionStateOverride(props) {
-                return $9OUiQ$reactstatelydnd.useDraggableCollectionState({
-                    ...props,
-                    ...options
-                });
-            };
-            hooks.useDraggableCollection = $9OUiQ$reactariadnd.useDraggableCollection;
-            hooks.useDraggableItem = $9OUiQ$reactariadnd.useDraggableItem;
-            hooks.DragPreview = $9OUiQ$reactariadnd.DragPreview;
-        }
-        if (isDroppable) {
-            hooks.useDroppableCollectionState = function useDroppableCollectionStateOverride(props) {
-                return $9OUiQ$reactstatelydnd.useDroppableCollectionState({
-                    ...props,
-                    ...options
-                });
-            }, hooks.useDroppableItem = $9OUiQ$reactariadnd.useDroppableItem;
-            hooks.useDroppableCollection = function useDroppableCollectionOverride(props, state, ref) {
-                return $9OUiQ$reactariadnd.useDroppableCollection({
-                    ...props,
-                    ...options
-                }, state, ref);
-            };
-            hooks.useDropIndicator = $9OUiQ$reactariadnd.useDropIndicator;
-        }
-        if (isDraggable || isDroppable) hooks.isVirtualDragging = $9OUiQ$reactariadnd.isVirtualDragging;
-        return hooks;
-    }, [
-        options
-    ]);
-    return {
-        dragAndDropHooks: dragAndDropHooks
-    };
-}
 
-
-
-
-
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,56 +0,20 @@
-import {DIRECTORY_DRAG_TYPE as $bd7af2e3e7bb229d$re_export$DIRECTORY_DRAG_TYPE, useDraggableCollection as $6PX7k$useDraggableCollection, useDraggableItem as $6PX7k$useDraggableItem, DragPreview as $6PX7k$DragPreview, useDroppableItem as $6PX7k$useDroppableItem, useDroppableCollection as $6PX7k$useDroppableCollection, useDropIndicator as $6PX7k$useDropIndicator, isVirtualDragging as $6PX7k$isVirtualDragging} from "@react-aria/dnd";
-import {useDraggableCollectionState as $6PX7k$useDraggableCollectionState, useDroppableCollectionState as $6PX7k$useDroppableCollectionState} from "@react-stately/dnd";
-import {useMemo as $6PX7k$useMemo} from "react";
+import {useDragAndDrop as $8d44a09a765f4c9c$export$2cfc5be7a55829f6} from "./useDragAndDrop.module.js";
+import {DIRECTORY_DRAG_TYPE as $bd7af2e3e7bb229d$re_export$DIRECTORY_DRAG_TYPE} from "@react-aria/dnd";
 
+/*
+ * Copyright 2022 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.
+ */ /// <reference types="css-module-types" />
 
 
 
-function $8d44a09a765f4c9c$export$2cfc5be7a55829f6(options) {
-    let dragAndDropHooks = $6PX7k$useMemo(()=>{
-        let { onDrop: onDrop , onInsert: onInsert , onItemDrop: onItemDrop , onReorder: onReorder , onRootDrop: onRootDrop , getItems: getItems  } = options;
-        let isDraggable = !!getItems;
-        let isDroppable = !!(onDrop || onInsert || onItemDrop || onReorder || onRootDrop);
-        let hooks = {
-        };
-        if (isDraggable) {
-            hooks.useDraggableCollectionState = function useDraggableCollectionStateOverride(props) {
-                return $6PX7k$useDraggableCollectionState({
-                    ...props,
-                    ...options
-                });
-            };
-            hooks.useDraggableCollection = $6PX7k$useDraggableCollection;
-            hooks.useDraggableItem = $6PX7k$useDraggableItem;
-            hooks.DragPreview = $6PX7k$DragPreview;
-        }
-        if (isDroppable) {
-            hooks.useDroppableCollectionState = function useDroppableCollectionStateOverride(props) {
-                return $6PX7k$useDroppableCollectionState({
-                    ...props,
-                    ...options
-                });
-            }, hooks.useDroppableItem = $6PX7k$useDroppableItem;
-            hooks.useDroppableCollection = function useDroppableCollectionOverride(props, state, ref) {
-                return $6PX7k$useDroppableCollection({
-                    ...props,
-                    ...options
-                }, state, ref);
-            };
-            hooks.useDropIndicator = $6PX7k$useDropIndicator;
-        }
-        if (isDraggable || isDroppable) hooks.isVirtualDragging = $6PX7k$isVirtualDragging;
-        return hooks;
-    }, [
-        options
-    ]);
-    return {
-        dragAndDropHooks: dragAndDropHooks
-    };
-}
 
-
-
-
-
 export {$8d44a09a765f4c9c$export$2cfc5be7a55829f6 as useDragAndDrop, $bd7af2e3e7bb229d$re_export$DIRECTORY_DRAG_TYPE as DIRECTORY_DRAG_TYPE};
 //# sourceMappingURL=module.js.map

dist/types.d.ts

 import { DraggableCollectionOptions, DraggableItemProps, DraggableItemResult, DragPreview, DropIndicatorAria, DropIndicatorProps, DroppableCollectionOptions, DroppableCollectionResult, DroppableItemOptions, DroppableItemResult } from "@react-aria/dnd";
-import { DraggableCollectionProps, DragItem, DroppableCollectionProps } from "@react-types/shared";
+import { DraggableCollectionProps, DragItem, DroppableCollectionProps, Key, RefObject } from "@react-types/shared";
 import { DraggableCollectionState, DraggableCollectionStateOptions, DroppableCollectionState, DroppableCollectionStateOptions } from "@react-stately/dnd";
-import { Key, RefObject } from "react";
+import { JSX } from "react";
 interface DraggableCollectionStateOpts extends Omit<DraggableCollectionStateOptions, 'getItems'> {
@@ -9,3 +9,3 @@ }
     useDraggableCollectionState?: (props: DraggableCollectionStateOpts) => DraggableCollectionState;
-    useDraggableCollection?: (props: DraggableCollectionOptions, state: DraggableCollectionState, ref: RefObject<HTMLElement>) => void;
+    useDraggableCollection?: (props: DraggableCollectionOptions, state: DraggableCollectionState, ref: RefObject<HTMLElement | null>) => void;
     useDraggableItem?: (props: DraggableItemProps, state: DraggableCollectionState) => DraggableItemResult;
@@ -16,5 +16,5 @@ DragPreview?: typeof DragPreview;
     useDroppableCollectionState?: (props: DroppableCollectionStateOptions) => DroppableCollectionState;
-    useDroppableCollection?: (props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>) => DroppableCollectionResult;
-    useDroppableItem?: (options: DroppableItemOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>) => DroppableItemResult;
-    useDropIndicator?: (props: DropIndicatorProps, state: DroppableCollectionState, ref: RefObject<HTMLElement>) => DropIndicatorAria;
+    useDroppableCollection?: (props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement | null>) => DroppableCollectionResult;
+    useDroppableItem?: (options: DroppableItemOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement | null>) => DroppableItemResult;
+    useDropIndicator?: (props: DropIndicatorProps, state: DroppableCollectionState, ref: RefObject<HTMLElement | null>) => DropIndicatorAria;
 }
@@ -25,2 +25,3 @@ export interface DragAndDropHooks {
         isVirtualDragging?: () => boolean;
+        renderPreview?: (keys: Set<Key>, draggedKey: Key) => JSX.Element;
     };
@@ -34,2 +35,4 @@ }
     getItems?: (keys: Set<Key>) => DragItem[];
+    /** Provide a custom drag preview. `draggedKey` represents the key of the item the user actually dragged. */
+    renderPreview?: (keys: Set<Key>, draggedKey: Key) => JSX.Element;
 }
@@ -36,0 +39,0 @@ /**

package.json

 {
   "name": "@react-spectrum/dnd",
-  "version": "3.0.0-nightly.3575+a13802d8b",
+  "version": "3.0.0-nightly-4980928d3-240906",
   "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",
@@ -35,13 +40,14 @@ "source": "src/index.ts",
   "dependencies": {
-    "@babel/runtime": "^7.6.2",
-    "@react-aria/dnd": "3.0.0-nightly.3575+a13802d8b",
-    "@react-stately/dnd": "3.0.0-nightly.3575+a13802d8b",
-    "@react-types/shared": "3.0.0-nightly.1875+a13802d8b"
+    "@react-aria/dnd": "^3.0.0-nightly-4980928d3-240906",
+    "@react-stately/dnd": "^3.0.0-nightly-4980928d3-240906",
+    "@react-types/shared": "^3.0.0-nightly-4980928d3-240906",
+    "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-nightly.1875+a13802d8b"
+    "@adobe/spectrum-css-temp": "3.0.0-alpha.1"
   },
   "peerDependencies": {
-    "@react-spectrum/provider": "^3.0.0",
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+    "@react-spectrum/provider": "^3.0.0-nightly-4980928d3-240906",
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
@@ -51,3 +57,3 @@ "publishConfig": {
   },
-  "gitHead": "a13802d8be6f83af1450e56f7a88527b10d9cadf"
-}
+  "stableVersion": "3.4.1"
+}

src/useDragAndDrop.ts

@@ -31,3 +31,3 @@ /*
 } from '@react-aria/dnd';
-import {DraggableCollectionProps, DragItem} from '@react-types/shared';
+import {DraggableCollectionProps, DragItem, DroppableCollectionProps, Key, RefObject} from '@react-types/shared';
 import {
@@ -41,4 +41,3 @@ DraggableCollectionState,
 } from '@react-stately/dnd';
-import {DroppableCollectionProps} from '@react-types/shared';
-import {Key, RefObject, useMemo} from 'react';
+import {JSX, useMemo} from 'react';
 
@@ -49,3 +48,3 @@ interface DraggableCollectionStateOpts extends Omit<DraggableCollectionStateOptions, 'getItems'> {}
   useDraggableCollectionState?: (props: DraggableCollectionStateOpts) => DraggableCollectionState,
-  useDraggableCollection?: (props: DraggableCollectionOptions, state: DraggableCollectionState, ref: RefObject<HTMLElement>) => void,
+  useDraggableCollection?: (props: DraggableCollectionOptions, state: DraggableCollectionState, ref: RefObject<HTMLElement | null>) => void,
   useDraggableItem?: (props: DraggableItemProps, state: DraggableCollectionState) => DraggableItemResult,
@@ -57,5 +56,5 @@ DragPreview?: typeof DragPreview
   useDroppableCollectionState?: (props: DroppableCollectionStateOptions) => DroppableCollectionState,
-  useDroppableCollection?: (props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>) => DroppableCollectionResult,
-  useDroppableItem?: (options: DroppableItemOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>) => DroppableItemResult,
-  useDropIndicator?: (props: DropIndicatorProps, state: DroppableCollectionState, ref: RefObject<HTMLElement>) => DropIndicatorAria
+  useDroppableCollection?: (props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement | null>) => DroppableCollectionResult,
+  useDroppableItem?: (options: DroppableItemOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement | null>) => DroppableItemResult,
+  useDropIndicator?: (props: DropIndicatorProps, state: DroppableCollectionState, ref: RefObject<HTMLElement | null>) => DropIndicatorAria
 }
@@ -65,3 +64,3 @@
   /** Drag and drop hooks for the collection element.  */
-  dragAndDropHooks: DragHooks & DropHooks & {isVirtualDragging?: () => boolean}
+  dragAndDropHooks: DragHooks & DropHooks & {isVirtualDragging?: () => boolean, renderPreview?: (keys: Set<Key>, draggedKey: Key) => JSX.Element}
 }
@@ -74,3 +73,5 @@
    */
-  getItems?: (keys: Set<Key>) => DragItem[]
+  getItems?: (keys: Set<Key>) => DragItem[],
+  /** Provide a custom drag preview. `draggedKey` represents the key of the item the user actually dragged. */
+  renderPreview?: (keys: Set<Key>, draggedKey: Key) => JSX.Element
 }
@@ -89,3 +90,4 @@
       onRootDrop,
-      getItems
+      getItems,
+      renderPreview
      } = options;
@@ -96,3 +98,3 @@
 
-    let hooks = {} as DragHooks & DropHooks & {isVirtualDragging?: () => boolean};
+    let hooks = {} as DragHooks & DropHooks & {isVirtualDragging?: () => boolean, renderPreview?: (keys: Set<Key>, draggedKey: Key) => JSX.Element};
     if (isDraggable) {
@@ -105,2 +107,3 @@ hooks.useDraggableCollectionState = function useDraggableCollectionStateOverride(props: DraggableCollectionStateOptions) {
       hooks.DragPreview = DragPreview;
+      hooks.renderPreview = renderPreview;
     }
@@ -111,5 +114,5 @@
         return useDroppableCollectionState({...props, ...options});
-      },
+      };
       hooks.useDroppableItem = useDroppableItem;
-      hooks.useDroppableCollection = function useDroppableCollectionOverride(props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement>) {
+      hooks.useDroppableCollection = function useDroppableCollectionOverride(props: DroppableCollectionOptions, state: DroppableCollectionState, ref: RefObject<HTMLElement | null>) {
         return useDroppableCollection({...props, ...options}, state, ref);
@@ -116,0 +119,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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 4 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Number of package files

16

increased by45.45%

Lines of code

423

increased by48.42%

Published versions last months

32

increased by3.23%

Worsened metrics

Total package byte prevSize

43979

decreased by-3.97%

Dependency count

7

increased by16.67%

Number of low license alerts

4

increased byInfinity%

License quality

80

decreased by-20%

Dependency changes

• + Added@swc/helpers@^0.5.0

• + Added@react-aria/dnd@3.8.0(transitive)

• + Added@react-aria/live-announcer@3.4.1(transitive)

• + Added@react-stately/collections@3.12.0(transitive)

• + Added@react-stately/dnd@3.5.0(transitive)

• + Added@react-stately/selection@3.18.0(transitive)

• - Removed@babel/runtime@^7.6.2

• - Removed@babel/runtime@7.26.0(transitive)

• - Removedjs-tokens@4.0.0(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedreact@18.3.1(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• Updated@react-aria/dnd@^3.0.0-nightly-4980928d3-240906

• Updated@react-stately/dnd@^3.0.0-nightly-4980928d3-240906

• Updated@react-types/shared@^3.0.0-nightly-4980928d3-240906