react-dnd - npm Package Compare versions

Comparing version 14.0.5 to 15.0.0

lib/core/DndContext.js

 import { createContext } from 'react';
 /**
  * Create the React Context
- */
-export const DndContext = createContext({
-    dragDropManager: undefined,
+ */ export const DndContext = createContext({
+    dragDropManager: undefined
 });
+
+//# sourceMappingURL=DndContext.js.map

lib/core/DndProvider.js

 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, memo } from 'react';
-import { createDragDropManager, } from 'dnd-core';
+import { createDragDropManager } from 'dnd-core';
 import { DndContext } from './DndContext';
+function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
 let refCount = 0;
 const INSTANCE_SYM = Symbol.for('__REACT_DND_CONTEXT_INSTANCE__');
-/**
- * A React component that provides the React-DnD context
- */
-export const DndProvider = memo(function DndProvider({ children, ...props }) {
-    const [manager, isGlobalInstance] = getDndContextValue(props); // memoized from props
+var DndProvider = /*#__PURE__*/ memo(function DndProvider(_param) {
+    var { children  } = _param, props = _objectWithoutProperties(_param, [
+        "children"
+    ]);
+    const [manager, isGlobalInstance] = getDndContextValue(props) // memoized from props
+    ;
     /**
-     * If the global context was used to store the DND context
-     * then where theres no more references to it we should
-     * clean it up to avoid memory leaks
-     */
-    useEffect(() => {
+		 * If the global context was used to store the DND context
+		 * then where theres no more references to it we should
+		 * clean it up to avoid memory leaks
+		 */ useEffect(()=>{
         if (isGlobalInstance) {
             const context = getGlobalContext();
             ++refCount;
-            return () => {
+            return ()=>{
                 if (--refCount === 0) {
@@ -28,12 +55,26 @@ context[INSTANCE_SYM] = null;
     }, []);
-    return _jsx(DndContext.Provider, Object.assign({ value: manager }, { children: children }), void 0);
+    return(/*#__PURE__*/ _jsx(DndContext.Provider, {
+        value: manager,
+        children: children
+    }));
 });
+/**
+ * A React component that provides the React-DnD context
+ */ export { DndProvider,  };
 function getDndContextValue(props) {
     if ('manager' in props) {
-        const manager = { dragDropManager: props.manager };
-        return [manager, false];
+        const manager = {
+            dragDropManager: props.manager
+        };
+        return [
+            manager,
+            false
+        ];
     }
     const manager = createSingletonDndContext(props.backend, props.context, props.options, props.debugMode);
     const isGlobalInstance = !props.context;
-    return [manager, isGlobalInstance];
+    return [
+        manager,
+        isGlobalInstance
+    ];
 }
@@ -44,3 +85,3 @@ function createSingletonDndContext(backend, context = getGlobalContext(), options, debugMode) {
         ctx[INSTANCE_SYM] = {
-            dragDropManager: createDragDropManager(backend, context, options, debugMode),
+            dragDropManager: createDragDropManager(backend, context, options, debugMode)
         };
@@ -53,1 +94,3 @@ }
 }
+
+//# sourceMappingURL=DndProvider.js.map

lib/core/DragPreviewImage.js

 import { useEffect, memo } from 'react';
 /**
  * A utility for rendering a drag preview image
- */
-export const DragPreviewImage = memo(function DragPreviewImage({ connect, src }) {
-    useEffect(() => {
-        if (typeof Image === 'undefined')
-            return;
+ */ export const DragPreviewImage = /*#__PURE__*/ memo(function DragPreviewImage({ connect , src  }) {
+    useEffect(()=>{
+        if (typeof Image === 'undefined') return;
         let connected = false;
         const img = new Image();
         img.src = src;
-        img.onload = () => {
+        img.onload = ()=>{
             connect(img);
             connected = true;
         };
-        return () => {
+        return ()=>{
             if (connected) {
@@ -24,1 +22,3 @@ connect(null);
 });
+
+//# sourceMappingURL=DragPreviewImage.js.map

lib/core/index.js

 export * from './DndContext';
 export * from './DndProvider';
 export * from './DragPreviewImage';
+
+//# sourceMappingURL=index.js.map

lib/hooks/index.js

@@ -6,1 +6,3 @@ export * from './useDrag';
 export * from './types';
+
+//# sourceMappingURL=index.js.map

lib/hooks/types.d.ts

@@ -90,3 +90,3 @@ import { TargetType, SourceType } from 'dnd-core';
      */
-    drop?: (item: DragObject, monitor: DropTargetMonitor) => DropResult | undefined;
+    drop?: (item: DragObject, monitor: DropTargetMonitor<DragObject, DropResult>) => DropResult | undefined;
     /**
@@ -98,3 +98,3 @@ * Optional.
      */
-    hover?: (item: DragObject, monitor: DropTargetMonitor) => void;
+    hover?: (item: DragObject, monitor: DropTargetMonitor<DragObject, DropResult>) => void;
     /**
@@ -105,7 +105,7 @@ * Optional. Use it to specify whether the drop target is able to accept the item. If you want to always allow it, just
      */
-    canDrop?: (item: DragObject, monitor: DropTargetMonitor) => boolean;
+    canDrop?: (item: DragObject, monitor: DropTargetMonitor<DragObject, DropResult>) => boolean;
     /**
      * A function to collect rendering properties
      */
-    collect?: (monitor: DropTargetMonitor) => CollectedProps;
+    collect?: (monitor: DropTargetMonitor<DragObject, DropResult>) => CollectedProps;
 }

lib/hooks/types.js

@@ -1,1 +0,3 @@
-export {};
+export { };
+
+//# sourceMappingURL=types.js.map

lib/hooks/useCollectedProps.js

 import { useMonitorOutput } from './useMonitorOutput';
 export function useCollectedProps(collector, monitor, connector) {
-    return useMonitorOutput(monitor, collector || (() => ({})), () => connector.reconnect());
+    return useMonitorOutput(monitor, collector || (()=>({})
+    ), ()=>connector.reconnect()
+    );
 }
+
+//# sourceMappingURL=useCollectedProps.js.map

lib/hooks/useCollector.js

@@ -9,6 +9,6 @@ import equal from 'fast-deep-equal';
  * @param onUpdate A method to invoke when updates occur
- */
-export function useCollector(monitor, collect, onUpdate) {
-    const [collected, setCollected] = useState(() => collect(monitor));
-    const updateCollected = useCallback(() => {
+ */ export function useCollector(monitor, collect, onUpdate) {
+    const [collected, setCollected] = useState(()=>collect(monitor)
+    );
+    const updateCollected = useCallback(()=>{
         const nextValue = collect(monitor);
@@ -23,3 +23,7 @@ // This needs to be a deep-equality check because some monitor-collected values
         }
-    }, [collected, monitor, onUpdate]);
+    }, [
+        collected,
+        monitor,
+        onUpdate
+    ]);
     // update the collected properties after react renders.
@@ -29,3 +33,8 @@ // Note that the "Dustbin Stress Test" fails if this is not
     useIsomorphicLayoutEffect(updateCollected);
-    return [collected, updateCollected];
+    return [
+        collected,
+        updateCollected
+    ];
 }
+
+//# sourceMappingURL=useCollector.js.map

lib/hooks/useDrag/connectors.js

 import { useMemo } from 'react';
 export function useConnectDragSource(connector) {
-    return useMemo(() => connector.hooks.dragSource(), [connector]);
+    return useMemo(()=>connector.hooks.dragSource()
+    , [
+        connector
+    ]);
 }
 export function useConnectDragPreview(connector) {
-    return useMemo(() => connector.hooks.dragPreview(), [connector]);
+    return useMemo(()=>connector.hooks.dragPreview()
+    , [
+        connector
+    ]);
 }
+
+//# sourceMappingURL=connectors.js.map

lib/hooks/useDrag/DragSourceImpl.js

 export class DragSourceImpl {
-    spec;
-    monitor;
-    connector;
-    constructor(spec, monitor, connector) {
-        this.spec = spec;
-        this.monitor = monitor;
-        this.connector = connector;
-    }
     beginDrag() {
@@ -16,10 +8,8 @@ const spec = this.spec;
             result = spec.item;
-        }
-        else if (typeof spec.item === 'function') {
+        } else if (typeof spec.item === 'function') {
             result = spec.item(monitor);
-        }
-        else {
+        } else {
             result = {};
         }
-        return result ?? null;
+        return result !== null && result !== void 0 ? result : null;
     }
@@ -31,7 +21,5 @@ canDrag() {
             return spec.canDrag;
-        }
-        else if (typeof spec.canDrag === 'function') {
+        } else if (typeof spec.canDrag === 'function') {
             return spec.canDrag(monitor);
-        }
-        else {
+        } else {
             return true;
@@ -43,6 +31,4 @@ }
         const monitor = this.monitor;
-        const { isDragging } = spec;
-        return isDragging
-            ? isDragging(monitor)
-            : target === globalMonitor.getSourceId();
+        const { isDragging  } = spec;
+        return isDragging ? isDragging(monitor) : target === globalMonitor.getSourceId();
     }
@@ -53,3 +39,3 @@ endDrag() {
         const connector = this.connector;
-        const { end } = spec;
+        const { end  } = spec;
         if (end) {
@@ -60,2 +46,9 @@ end(monitor.getItem(), monitor);
     }
+    constructor(spec, monitor, connector){
+        this.spec = spec;
+        this.monitor = monitor;
+        this.connector = connector;
+    }
 }
+
+//# sourceMappingURL=DragSourceImpl.js.map

lib/hooks/useDrag/index.js

 export * from './useDrag';
+
+//# sourceMappingURL=index.js.map

lib/hooks/useDrag/useDrag.d.ts

@@ -8,2 +8,2 @@ import { ConnectDragSource, ConnectDragPreview } from '../../types';
  */
-export declare function useDrag<DragObject, DropResult, CollectedProps>(specArg: FactoryOrInstance<DragSourceHookSpec<DragObject, DropResult, CollectedProps>>, deps?: unknown[]): [CollectedProps, ConnectDragSource, ConnectDragPreview];
+export declare function useDrag<DragObject = unknown, DropResult = unknown, CollectedProps = unknown>(specArg: FactoryOrInstance<DragSourceHookSpec<DragObject, DropResult, CollectedProps>>, deps?: unknown[]): [CollectedProps, ConnectDragSource, ConnectDragPreview];

lib/hooks/useDrag/useDrag.js

@@ -12,4 +12,3 @@ import { useRegisteredDragSource } from './useRegisteredDragSource';
  * @param deps The memoization deps array to use when evaluating spec changes
- */
-export function useDrag(specArg, deps) {
+ */ export function useDrag(specArg, deps) {
     const spec = useOptionalFactory(specArg, deps);
@@ -23,4 +22,6 @@ invariant(!spec.begin, `useDrag::spec.begin was deprecated in v14. Replace spec.begin() with spec.item(). (see more here - https://react-dnd.github.io/react-dnd/docs/api/use-drag)`);
         useConnectDragSource(connector),
-        useConnectDragPreview(connector),
+        useConnectDragPreview(connector), 
     ];
 }
+
+//# sourceMappingURL=useDrag.js.map

lib/hooks/useDrag/useDragSource.js

 import { useEffect, useMemo } from 'react';
 import { DragSourceImpl } from './DragSourceImpl';
 export function useDragSource(spec, monitor, connector) {
-    const handler = useMemo(() => new DragSourceImpl(spec, monitor, connector), [monitor, connector]);
-    useEffect(() => {
+    const handler = useMemo(()=>new DragSourceImpl(spec, monitor, connector)
+    , [
+        monitor,
+        connector
+    ]);
+    useEffect(()=>{
         handler.spec = spec;
-    }, [spec]);
+    }, [
+        spec
+    ]);
     return handler;
 }
+
+//# sourceMappingURL=useDragSource.js.map

lib/hooks/useDrag/useDragSourceConnector.js

@@ -7,14 +7,27 @@ import { useMemo } from 'react';
     const manager = useDragDropManager();
-    const connector = useMemo(() => new SourceConnector(manager.getBackend()), [manager]);
-    useIsomorphicLayoutEffect(() => {
+    const connector = useMemo(()=>new SourceConnector(manager.getBackend())
+    , [
+        manager
+    ]);
+    useIsomorphicLayoutEffect(()=>{
         connector.dragSourceOptions = dragSourceOptions || null;
         connector.reconnect();
-        return () => connector.disconnectDragSource();
-    }, [connector, dragSourceOptions]);
-    useIsomorphicLayoutEffect(() => {
+        return ()=>connector.disconnectDragSource()
+        ;
+    }, [
+        connector,
+        dragSourceOptions
+    ]);
+    useIsomorphicLayoutEffect(()=>{
         connector.dragPreviewOptions = dragPreviewOptions || null;
         connector.reconnect();
-        return () => connector.disconnectDragPreview();
-    }, [connector, dragPreviewOptions]);
+        return ()=>connector.disconnectDragPreview()
+        ;
+    }, [
+        connector,
+        dragPreviewOptions
+    ]);
     return connector;
 }
+
+//# sourceMappingURL=useDragSourceConnector.js.map

lib/hooks/useDrag/useDragSourceMonitor.js

@@ -6,3 +6,8 @@ import { useMemo } from 'react';
     const manager = useDragDropManager();
-    return useMemo(() => new DragSourceMonitorImpl(manager), [manager]);
+    return useMemo(()=>new DragSourceMonitorImpl(manager)
+    , [
+        manager
+    ]);
 }
+
+//# sourceMappingURL=useDragSourceMonitor.js.map

lib/hooks/useDrag/useDragType.js

 import { invariant } from '@react-dnd/invariant';
 import { useMemo } from 'react';
 export function useDragType(spec) {
-    return useMemo(() => {
+    return useMemo(()=>{
         const result = spec.type;
         invariant(result != null, 'spec.type must be defined');
         return result;
-    }, [spec]);
+    }, [
+        spec
+    ]);
 }
+
+//# sourceMappingURL=useDragType.js.map

lib/hooks/useDrag/useRegisteredDragSource.js

@@ -17,3 +17,11 @@ import { registerSource } from '../../internals';
         }
-    }, [manager, monitor, connector, handler, itemType]);
+    }, [
+        manager,
+        monitor,
+        connector,
+        handler,
+        itemType
+    ]);
 }
+
+//# sourceMappingURL=useRegisteredDragSource.js.map

lib/hooks/useDragDropManager.js

@@ -6,7 +6,8 @@ import { useContext } from 'react';
  * A hook to retrieve the DragDropManager from Context
- */
-export function useDragDropManager() {
-    const { dragDropManager } = useContext(DndContext);
+ */ export function useDragDropManager() {
+    const { dragDropManager  } = useContext(DndContext);
     invariant(dragDropManager != null, 'Expected drag drop context');
     return dragDropManager;
 }
+
+//# sourceMappingURL=useDragDropManager.js.map

lib/hooks/useDragLayer.d.ts

@@ -1,2 +0,2 @@
-import { DragLayerMonitor } from 'react-dnd';
+import { DragLayerMonitor } from '../types';
 /**
@@ -6,2 +6,2 @@ * useDragLayer Hook
  */
-export declare function useDragLayer<CollectedProps>(collect: (monitor: DragLayerMonitor) => CollectedProps): CollectedProps;
+export declare function useDragLayer<CollectedProps, DragObject = any>(collect: (monitor: DragLayerMonitor<DragObject>) => CollectedProps): CollectedProps;

lib/hooks/useDragLayer.js

@@ -7,10 +7,13 @@ import { useEffect } from 'react';
  * @param collector The property collector
- */
-export function useDragLayer(collect) {
+ */ export function useDragLayer(collect) {
     const dragDropManager = useDragDropManager();
     const monitor = dragDropManager.getMonitor();
     const [collected, updateCollected] = useCollector(monitor, collect);
-    useEffect(() => monitor.subscribeToOffsetChange(updateCollected));
-    useEffect(() => monitor.subscribeToStateChange(updateCollected));
+    useEffect(()=>monitor.subscribeToOffsetChange(updateCollected)
+    );
+    useEffect(()=>monitor.subscribeToStateChange(updateCollected)
+    );
     return collected;
 }
+
+//# sourceMappingURL=useDragLayer.js.map

lib/hooks/useDrop/connectors.js

 import { useMemo } from 'react';
 export function useConnectDropTarget(connector) {
-    return useMemo(() => connector.hooks.dropTarget(), [connector]);
+    return useMemo(()=>connector.hooks.dropTarget()
+    , [
+        connector
+    ]);
 }
+
+//# sourceMappingURL=connectors.js.map

lib/hooks/useDrop/DropTargetImpl.js

 export class DropTargetImpl {
-    spec;
-    monitor;
-    constructor(spec, monitor) {
-        this.spec = spec;
-        this.monitor = monitor;
-    }
     canDrop() {
@@ -27,2 +21,8 @@ const spec = this.spec;
     }
+    constructor(spec, monitor){
+        this.spec = spec;
+        this.monitor = monitor;
+    }
 }
+
+//# sourceMappingURL=DropTargetImpl.js.map

lib/hooks/useDrop/index.js

 export * from './useDrop';
+
+//# sourceMappingURL=index.js.map

lib/hooks/useDrop/useAccept.js

@@ -7,9 +7,14 @@ import { invariant } from '@react-dnd/invariant';
  * @param spec
- */
-export function useAccept(spec) {
-    const { accept } = spec;
-    return useMemo(() => {
+ */ export function useAccept(spec) {
+    const { accept  } = spec;
+    return useMemo(()=>{
         invariant(spec.accept != null, 'accept must be defined');
-        return Array.isArray(accept) ? accept : [accept];
-    }, [accept]);
+        return Array.isArray(accept) ? accept : [
+            accept
+        ];
+    }, [
+        accept
+    ]);
 }
+
+//# sourceMappingURL=useAccept.js.map

lib/hooks/useDrop/useDrop.d.ts

@@ -8,2 +8,2 @@ import { ConnectDropTarget } from '../../types';
  */
-export declare function useDrop<DragObject, DropResult, CollectedProps>(specArg: FactoryOrInstance<DropTargetHookSpec<DragObject, DropResult, CollectedProps>>, deps?: unknown[]): [CollectedProps, ConnectDropTarget];
+export declare function useDrop<DragObject = unknown, DropResult = unknown, CollectedProps = unknown>(specArg: FactoryOrInstance<DropTargetHookSpec<DragObject, DropResult, CollectedProps>>, deps?: unknown[]): [CollectedProps, ConnectDropTarget];

lib/hooks/useDrop/useDrop.js

@@ -11,4 +11,3 @@ import { useRegisteredDropTarget } from './useRegisteredDropTarget';
  * @param deps The memoization deps array to use when evaluating spec changes
- */
-export function useDrop(specArg, deps) {
+ */ export function useDrop(specArg, deps) {
     const spec = useOptionalFactory(specArg, deps);
@@ -20,4 +19,6 @@ const monitor = useDropTargetMonitor();
         useCollectedProps(spec.collect, monitor, connector),
-        useConnectDropTarget(connector),
+        useConnectDropTarget(connector), 
     ];
 }
+
+//# sourceMappingURL=useDrop.js.map

lib/hooks/useDrop/useDropTarget.js

 import { useEffect, useMemo } from 'react';
 import { DropTargetImpl } from './DropTargetImpl';
 export function useDropTarget(spec, monitor) {
-    const dropTarget = useMemo(() => new DropTargetImpl(spec, monitor), [monitor]);
-    useEffect(() => {
+    const dropTarget = useMemo(()=>new DropTargetImpl(spec, monitor)
+    , [
+        monitor
+    ]);
+    useEffect(()=>{
         dropTarget.spec = spec;
-    }, [spec]);
+    }, [
+        spec
+    ]);
     return dropTarget;
 }
+
+//# sourceMappingURL=useDropTarget.js.map

lib/hooks/useDrop/useDropTargetConnector.js

@@ -7,9 +7,17 @@ import { useMemo } from 'react';
     const manager = useDragDropManager();
-    const connector = useMemo(() => new TargetConnector(manager.getBackend()), [manager]);
-    useIsomorphicLayoutEffect(() => {
+    const connector = useMemo(()=>new TargetConnector(manager.getBackend())
+    , [
+        manager
+    ]);
+    useIsomorphicLayoutEffect(()=>{
         connector.dropTargetOptions = options || null;
         connector.reconnect();
-        return () => connector.disconnectDropTarget();
-    }, [options]);
+        return ()=>connector.disconnectDropTarget()
+        ;
+    }, [
+        options
+    ]);
     return connector;
 }
+
+//# sourceMappingURL=useDropTargetConnector.js.map

lib/hooks/useDrop/useDropTargetMonitor.js

@@ -6,3 +6,8 @@ import { useMemo } from 'react';
     const manager = useDragDropManager();
-    return useMemo(() => new DropTargetMonitorImpl(manager), [manager]);
+    return useMemo(()=>new DropTargetMonitorImpl(manager)
+    , [
+        manager
+    ]);
 }
+
+//# sourceMappingURL=useDropTargetMonitor.js.map

lib/hooks/useDrop/useRegisteredDropTarget.js

@@ -20,4 +20,7 @@ import { registerTarget } from '../../internals';
         connector,
-        accept.map((a) => a.toString()).join('|'),
+        accept.map((a)=>a.toString()
+        ).join('|'), 
     ]);
 }
+
+//# sourceMappingURL=useRegisteredDropTarget.js.map

lib/hooks/useIsomorphicLayoutEffect.js

 import { useLayoutEffect, useEffect } from 'react';
 // suppress the useLayoutEffect warning on server side.
 export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+//# sourceMappingURL=useIsomorphicLayoutEffect.js.map

lib/hooks/useMonitorOutput.js

@@ -11,6 +11,13 @@ import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
         return monitor.subscribeToStateChange(updateCollected, {
-            handlerIds: [handlerId],
+            handlerIds: [
+                handlerId
+            ]
         });
-    }, [monitor, updateCollected]);
+    }, [
+        monitor,
+        updateCollected
+    ]);
     return collected;
 }
+
+//# sourceMappingURL=useMonitorOutput.js.map

lib/hooks/useOptionalFactory.js

 import { useMemo } from 'react';
 export function useOptionalFactory(arg, deps) {
-    const memoDeps = [...(deps || [])];
+    const memoDeps = [
+        ...deps || []
+    ];
     if (deps == null && typeof arg !== 'function') {
         memoDeps.push(arg);
     }
-    return useMemo(() => {
+    return useMemo(()=>{
         return typeof arg === 'function' ? arg() : arg;
     }, memoDeps);
 }
+
+//# sourceMappingURL=useOptionalFactory.js.map

lib/index.d.ts

 export * from './types';
 export * from './core';
-export * from './decorators';
 export * from './hooks';

lib/index.js

 export * from './types';
 export * from './core';
-export * from './decorators';
 export * from './hooks';
+
+//# sourceMappingURL=index.js.map

lib/internals/DragSourceMonitorImpl.js

@@ -5,7 +5,2 @@ import { invariant } from '@react-dnd/invariant';
 export class DragSourceMonitorImpl {
-    internalMonitor;
-    sourceId = null;
-    constructor(manager) {
-        this.internalMonitor = manager.getMonitor();
-    }
     receiveHandlerId(sourceId) {
@@ -18,9 +13,7 @@ this.sourceId = sourceId;
     canDrag() {
-        invariant(!isCallingCanDrag, 'You may not call monitor.canDrag() inside your canDrag() implementation. ' +
-            'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source-monitor');
+        invariant(!isCallingCanDrag, 'You may not call monitor.canDrag() inside your canDrag() implementation. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source-monitor');
         try {
             isCallingCanDrag = true;
             return this.internalMonitor.canDragSource(this.sourceId);
-        }
-        finally {
+        } finally{
             isCallingCanDrag = false;
@@ -33,9 +26,7 @@ }
         }
-        invariant(!isCallingIsDragging, 'You may not call monitor.isDragging() inside your isDragging() implementation. ' +
-            'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source-monitor');
+        invariant(!isCallingIsDragging, 'You may not call monitor.isDragging() inside your isDragging() implementation. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drag-source-monitor');
         try {
             isCallingIsDragging = true;
             return this.internalMonitor.isDraggingSource(this.sourceId);
-        }
-        finally {
+        } finally{
             isCallingIsDragging = false;
@@ -98,2 +89,8 @@ }
     }
+    constructor(manager){
+        this.sourceId = null;
+        this.internalMonitor = manager.getMonitor();
+    }
 }
+
+//# sourceMappingURL=DragSourceMonitorImpl.js.map

lib/internals/DropTargetMonitorImpl.js

 import { invariant } from '@react-dnd/invariant';
 let isCallingCanDrop = false;
 export class DropTargetMonitorImpl {
-    internalMonitor;
-    targetId = null;
-    constructor(manager) {
-        this.internalMonitor = manager.getMonitor();
-    }
     receiveHandlerId(targetId) {
@@ -25,9 +20,7 @@ this.targetId = targetId;
         }
-        invariant(!isCallingCanDrop, 'You may not call monitor.canDrop() inside your canDrop() implementation. ' +
-            'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target-monitor');
+        invariant(!isCallingCanDrop, 'You may not call monitor.canDrop() inside your canDrop() implementation. ' + 'Read more: http://react-dnd.github.io/react-dnd/docs/api/drop-target-monitor');
         try {
             isCallingCanDrop = true;
             return this.internalMonitor.canDropOnTarget(this.targetId);
-        }
-        finally {
+        } finally{
             isCallingCanDrop = false;
@@ -69,2 +62,8 @@ }
     }
+    constructor(manager){
+        this.targetId = null;
+        this.internalMonitor = manager.getMonitor();
+    }
 }
+
+//# sourceMappingURL=DropTargetMonitorImpl.js.map

lib/internals/index.js

@@ -6,1 +6,3 @@ export * from './DragSourceMonitorImpl';
 export * from './registration';
+
+//# sourceMappingURL=index.js.map

lib/internals/isRef.js

 export function isRef(obj) {
-    return (
-    // eslint-disable-next-line no-prototype-builtins
-    obj !== null &&
-        typeof obj === 'object' &&
-        Object.prototype.hasOwnProperty.call(obj, 'current'));
+    return(// eslint-disable-next-line no-prototype-builtins
+    obj !== null && typeof obj === 'object' && Object.prototype.hasOwnProperty.call(obj, 'current'));
 }
+
+//# sourceMappingURL=isRef.js.map

lib/internals/registration.js

 export function registerTarget(type, target, manager) {
     const registry = manager.getRegistry();
     const targetId = registry.addTarget(type, target);
-    return [targetId, () => registry.removeTarget(targetId)];
+    return [
+        targetId,
+        ()=>registry.removeTarget(targetId)
+    ];
 }
@@ -9,3 +12,8 @@ export function registerSource(type, source, manager) {
     const sourceId = registry.addSource(type, source);
-    return [sourceId, () => registry.removeSource(sourceId)];
+    return [
+        sourceId,
+        ()=>registry.removeSource(sourceId)
+    ];
 }
+
+//# sourceMappingURL=registration.js.map

lib/internals/SourceConnector.js

@@ -5,46 +5,2 @@ import { wrapConnectorHooks } from './wrapConnectorHooks';
 export class SourceConnector {
-    hooks = wrapConnectorHooks({
-        dragSource: (node, options) => {
-            this.clearDragSource();
-            this.dragSourceOptions = options || null;
-            if (isRef(node)) {
-                this.dragSourceRef = node;
-            }
-            else {
-                this.dragSourceNode = node;
-            }
-            this.reconnectDragSource();
-        },
-        dragPreview: (node, options) => {
-            this.clearDragPreview();
-            this.dragPreviewOptions = options || null;
-            if (isRef(node)) {
-                this.dragPreviewRef = node;
-            }
-            else {
-                this.dragPreviewNode = node;
-            }
-            this.reconnectDragPreview();
-        },
-    });
-    handlerId = null;
-    // The drop target may either be attached via ref or connect function
-    dragSourceRef = null;
-    dragSourceNode;
-    dragSourceOptionsInternal = null;
-    dragSourceUnsubscribe;
-    // The drag preview may either be attached via ref or connect function
-    dragPreviewRef = null;
-    dragPreviewNode;
-    dragPreviewOptionsInternal = null;
-    dragPreviewUnsubscribe;
-    lastConnectedHandlerId = null;
-    lastConnectedDragSource = null;
-    lastConnectedDragSourceOptions = null;
-    lastConnectedDragPreview = null;
-    lastConnectedDragPreviewOptions = null;
-    backend;
-    constructor(backend) {
-        this.backend = backend;
-    }
     receiveHandlerId(newHandlerId) {
@@ -73,4 +29,4 @@ if (this.handlerId === newHandlerId) {
     reconnect() {
-        this.reconnectDragSource();
-        this.reconnectDragPreview();
+        const didChange = this.reconnectDragSource();
+        this.reconnectDragPreview(didChange);
     }
@@ -80,5 +36,3 @@ reconnectDragSource() {
         // if nothing has changed then don't resubscribe
-        const didChange = this.didHandlerIdChange() ||
-            this.didConnectedDragSourceChange() ||
-            this.didDragSourceOptionsChange();
+        const didChange = this.didHandlerIdChange() || this.didConnectedDragSourceChange() || this.didDragSourceOptionsChange();
         if (didChange) {
@@ -88,7 +42,7 @@ this.disconnectDragSource();
         if (!this.handlerId) {
-            return;
+            return didChange;
         }
         if (!dragSource) {
             this.lastConnectedDragSource = dragSource;
-            return;
+            return didChange;
         }
@@ -101,9 +55,8 @@ if (didChange) {
         }
+        return didChange;
     }
-    reconnectDragPreview() {
+    reconnectDragPreview(forceDidChange = false) {
         const dragPreview = this.dragPreview;
         // if nothing has changed then don't resubscribe
-        const didChange = this.didHandlerIdChange() ||
-            this.didConnectedDragPreviewChange() ||
-            this.didDragPreviewOptionsChange();
+        const didChange = forceDidChange || this.didHandlerIdChange() || this.didConnectedDragPreviewChange() || this.didDragPreviewOptionsChange();
         if (didChange) {
@@ -156,7 +109,6 @@ this.disconnectDragPreview();
     get dragSource() {
-        return (this.dragSourceNode || (this.dragSourceRef && this.dragSourceRef.current));
+        return this.dragSourceNode || this.dragSourceRef && this.dragSourceRef.current;
     }
     get dragPreview() {
-        return (this.dragPreviewNode ||
-            (this.dragPreviewRef && this.dragPreviewRef.current));
+        return this.dragPreviewNode || this.dragPreviewRef && this.dragPreviewRef.current;
     }
@@ -171,2 +123,41 @@ clearDragSource() {
     }
+    constructor(backend){
+        this.hooks = wrapConnectorHooks({
+            dragSource: (node, options)=>{
+                this.clearDragSource();
+                this.dragSourceOptions = options || null;
+                if (isRef(node)) {
+                    this.dragSourceRef = node;
+                } else {
+                    this.dragSourceNode = node;
+                }
+                this.reconnectDragSource();
+            },
+            dragPreview: (node, options)=>{
+                this.clearDragPreview();
+                this.dragPreviewOptions = options || null;
+                if (isRef(node)) {
+                    this.dragPreviewRef = node;
+                } else {
+                    this.dragPreviewNode = node;
+                }
+                this.reconnectDragPreview();
+            }
+        });
+        this.handlerId = null;
+        // The drop target may either be attached via ref or connect function
+        this.dragSourceRef = null;
+        this.dragSourceOptionsInternal = null;
+        // The drag preview may either be attached via ref or connect function
+        this.dragPreviewRef = null;
+        this.dragPreviewOptionsInternal = null;
+        this.lastConnectedHandlerId = null;
+        this.lastConnectedDragSource = null;
+        this.lastConnectedDragSourceOptions = null;
+        this.lastConnectedDragPreview = null;
+        this.lastConnectedDragPreviewOptions = null;
+        this.backend = backend;
+    }
 }
+
+//# sourceMappingURL=SourceConnector.js.map

lib/internals/TargetConnector.js

@@ -5,28 +5,2 @@ import { shallowEqual } from '@react-dnd/shallowequal';
 export class TargetConnector {
-    hooks = wrapConnectorHooks({
-        dropTarget: (node, options) => {
-            this.clearDropTarget();
-            this.dropTargetOptions = options;
-            if (isRef(node)) {
-                this.dropTargetRef = node;
-            }
-            else {
-                this.dropTargetNode = node;
-            }
-            this.reconnect();
-        },
-    });
-    handlerId = null;
-    // The drop target may either be attached via ref or connect function
-    dropTargetRef = null;
-    dropTargetNode;
-    dropTargetOptionsInternal = null;
-    unsubscribeDropTarget;
-    lastConnectedHandlerId = null;
-    lastConnectedDropTarget = null;
-    lastConnectedDropTargetOptions = null;
-    backend;
-    constructor(backend) {
-        this.backend = backend;
-    }
     get connectTarget() {
@@ -37,5 +11,3 @@ return this.dropTarget;
         // if nothing has changed then don't resubscribe
-        const didChange = this.didHandlerIdChange() ||
-            this.didDropTargetChange() ||
-            this.didOptionsChange();
+        const didChange = this.didHandlerIdChange() || this.didDropTargetChange() || this.didOptionsChange();
         if (didChange) {
@@ -88,3 +60,3 @@ this.disconnectDropTarget();
     get dropTarget() {
-        return (this.dropTargetNode || (this.dropTargetRef && this.dropTargetRef.current));
+        return this.dropTargetNode || this.dropTargetRef && this.dropTargetRef.current;
     }
@@ -95,2 +67,26 @@ clearDropTarget() {
     }
+    constructor(backend){
+        this.hooks = wrapConnectorHooks({
+            dropTarget: (node, options)=>{
+                this.clearDropTarget();
+                this.dropTargetOptions = options;
+                if (isRef(node)) {
+                    this.dropTargetRef = node;
+                } else {
+                    this.dropTargetNode = node;
+                }
+                this.reconnect();
+            }
+        });
+        this.handlerId = null;
+        // The drop target may either be attached via ref or connect function
+        this.dropTargetRef = null;
+        this.dropTargetOptionsInternal = null;
+        this.lastConnectedHandlerId = null;
+        this.lastConnectedDropTarget = null;
+        this.lastConnectedDropTargetOptions = null;
+        this.backend = backend;
+    }
 }
+
+//# sourceMappingURL=TargetConnector.js.map

lib/internals/wrapConnectorHooks.js

@@ -10,8 +10,6 @@ import { invariant } from '@react-dnd/invariant';
     const displayName = element.type.displayName || element.type.name || 'the component';
-    throw new Error('Only native element nodes can now be passed to React DnD connectors.' +
-        `You can either wrap ${displayName} into a <div>, or turn it into a ` +
-        'drag source or a drop target itself.');
+    throw new Error('Only native element nodes can now be passed to React DnD connectors.' + `You can either wrap ${displayName} into a <div>, or turn it into a ` + 'drag source or a drop target itself.');
 }
 function wrapHookToRecognizeElement(hook) {
-    return (elementOrNode = null, options = null) => {
+    return (elementOrNode = null, options = null)=>{
         // When passed a node, call the hook straight away.
@@ -31,3 +29,4 @@ if (!isValidElement(elementOrNode)) {
         // When no options are passed, use the hook directly
-        const ref = options ? (node) => hook(node, options) : hook;
+        const ref = options ? (node)=>hook(node, options)
+         : hook;
         return cloneWithRef(element, ref);
@@ -38,3 +37,3 @@ };
     const wrappedHooks = {};
-    Object.keys(hooks).forEach((key) => {
+    Object.keys(hooks).forEach((key)=>{
         const hook = hooks[key];
@@ -44,6 +43,6 @@ // ref objects should be passed straight through without wrapping
             wrappedHooks[key] = hooks[key];
-        }
-        else {
+        } else {
             const wrappedHook = wrapHookToRecognizeElement(hook);
-            wrappedHooks[key] = () => wrappedHook;
+            wrappedHooks[key] = ()=>wrappedHook
+            ;
         }
@@ -56,4 +55,3 @@ });
         ref(node);
-    }
-    else {
+    } else {
         ref.current = node;
@@ -64,19 +62,18 @@ }
     const previousRef = element.ref;
-    invariant(typeof previousRef !== 'string', 'Cannot connect React DnD to an element with an existing string ref. ' +
-        'Please convert it to use a callback ref instead, or wrap it into a <span> or <div>. ' +
-        'Read more: https://reactjs.org/docs/refs-and-the-dom.html#callback-refs');
+    invariant(typeof previousRef !== 'string', 'Cannot connect React DnD to an element with an existing string ref. ' + 'Please convert it to use a callback ref instead, or wrap it into a <span> or <div>. ' + 'Read more: https://reactjs.org/docs/refs-and-the-dom.html#callback-refs');
     if (!previousRef) {
         // When there is no ref on the element, use the new ref directly
         return cloneElement(element, {
-            ref: newRef,
+            ref: newRef
         });
-    }
-    else {
+    } else {
         return cloneElement(element, {
-            ref: (node) => {
+            ref: (node)=>{
                 setRef(previousRef, node);
                 setRef(newRef, node);
-            },
+            }
         });
     }
 }
+
+//# sourceMappingURL=wrapConnectorHooks.js.map

lib/types/connectors.js

@@ -1,1 +0,3 @@
-export {};
+export { };
+
+//# sourceMappingURL=connectors.js.map

lib/types/index.js

 export * from './monitors';
 export * from './options';
 export * from './connectors';
+
+//# sourceMappingURL=index.js.map

lib/types/monitors.d.ts

@@ -131,3 +131,3 @@ import { Identifier, Unsubscribe } from 'dnd-core';
 }
-export interface DragLayerMonitor {
+export interface DragLayerMonitor<DragObject = unknown> {
     /**
@@ -147,3 +147,3 @@ * Returns true if a drag operation is in progress. Returns false otherwise.
      */
-    getItem(): any;
+    getItem<T = DragObject>(): T;
     /**
@@ -150,0 +150,0 @@ * Returns the { x, y } client offset of the pointer at the time when the current drag operation has started.

lib/types/monitors.js

@@ -1,1 +0,3 @@
-export {};
+export { };
+
+//# sourceMappingURL=monitors.js.map

lib/types/options.js

@@ -1,1 +0,3 @@
-export {};
+export { };
+
+//# sourceMappingURL=options.js.map

package.json

 {
   "name": "react-dnd",
-  "version": "14.0.5",
+  "version": "15.0.0",
   "description": "Drag and Drop for React",
-  "main": "dist/cjs/index.js",
-  "publishConfig": {
-    "main": "dist/cjs/index.js",
-    "module": "dist/esm/index.js",
-    "types": "dist/types/index.d.ts"
-  },
+  "type": "module",
+  "exports": "./lib/index.js",
+  "types": "./lib/index.d.ts",
   "sideEffects": false,
@@ -18,6 +15,4 @@ "repository": {
   "scripts": {
-    "clean": "gulp clean",
-    "build": "gulp build",
-    "watch": "gulp watch",
-    "bundle": "gulp bundle"
+    "clean": "shx rm -rf lib/",
+    "build": "tsc -b . && swc src -d lib"
   },
@@ -27,3 +22,3 @@ "dependencies": {
     "@react-dnd/shallowequal": "^2.0.0",
-    "dnd-core": "14.0.1",
+    "dnd-core": "15.0.0",
     "fast-deep-equal": "^3.1.3",
@@ -33,13 +28,15 @@ "hoist-non-react-statics": "^3.3.2"
   "devDependencies": {
-    "@react-dnd/build": "12.0.0",
+    "@swc/cli": "^0.1.55",
+    "@swc/core": "^1.2.135",
     "@testing-library/react": "^12.1.2",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/node": "^14.17.19",
-    "@types/react": "^17.0.24",
-    "@types/react-dom": "^17.0.9",
-    "gulp": "^4.0.2",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
     "react": "^17.0.2",
     "react-dnd-test-backend": "portal:../backend-test",
     "react-dnd-test-utils": "portal:../test-utils",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "shx": "^0.3.4",
+    "typescript": "^4.5.5"
   },
@@ -62,20 +59,3 @@ "peerDependencies": {
     }
-  },
-  "umd": {
-    "name": "ReactDnD",
-    "input": "dist/esm/index.js",
-    "external": [
-      "react",
-      "react-dom"
-    ],
-    "globals": {
-      "react": "React",
-      "react-dom": "ReactDOM"
-    },
-    "alias": {
-      "dnd-core": "dnd-core/dist/esm/index"
-    }
-  },
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts"
+  }
 }

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

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

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

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Number of low supply chain risk alerts

0

decreased by-100%

Is type module

Yes

Worsened metrics

Total package byte prevSize

229072

decreased by-67.11%

Dev dependency count

13

increased by18.18%

Number of package files

179

decreased by-35.14%

Lines of code

3273

decreased by-76.15%

Number of medium maintenance alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addeddnd-core@15.0.0(transitive)

• - Removeddnd-core@14.0.1(transitive)

• Updateddnd-core@15.0.0