planning

node_modules/react-dnd/lib/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export * from './useDrag';
+export * from './useDrop';
+export * from './useDragLayer';
+export * from './useDragDropManager';
+export * from './types';

node_modules/react-dnd/lib/hooks/index.js

@@ -0,0 +1,5 @@
+export * from './useDrag';
+export * from './useDrop';
+export * from './useDragLayer';
+export * from './useDragDropManager';
+export * from './types';

node_modules/react-dnd/lib/hooks/types.d.ts

@@ -0,0 +1,108 @@
+import { TargetType, SourceType } from 'dnd-core';
+import { DropTargetMonitor, DragSourceMonitor, DragSourceOptions, DragPreviewOptions, DropTargetOptions } from '../types';
+export declare type FactoryOrInstance<T> = T | (() => T);
+export declare type DragObjectFactory<T> = (monitor: DragSourceMonitor<T>) => T | null;
+export interface DragSourceHookSpec<DragObject, DropResult, CollectedProps> {
+    /**
+     * The type of item being dragged. This is required when using the function form of spec.item.
+     * If spec.item is a static object, the type may either be defined on that object as `item.type`, or it may
+     * be defined here.
+     */
+    type: SourceType;
+    /**
+     * This property generates or defines a plain javascript item describing
+     * the data being dragged. This is the only information available to the
+     * drop targets about the drag source so it's important to pick the minimal
+     * data they need to know.
+     *
+     * You may be tempted to put a reference to the component or complex object here,
+     * but you should try very hard to avoid doing this because it couples the
+     * drag sources and drop targets. It's a good idea to use something like
+     * { id: props.id }
+     *
+     * If a function-form is used, it is invoked when the drag begins and returns a draggable item.
+     * If the function returns null, the drag is canceled
+     *
+     */
+    item?: DragObject | DragObjectFactory<DragObject>;
+    /**
+     * The drag source options
+     */
+    options?: DragSourceOptions;
+    /**
+     * DragPreview options
+     */
+    previewOptions?: DragPreviewOptions;
+    /**
+     * Optional.
+     * When the dragging stops, endDrag is called. For every beginDrag call, a corresponding endDrag call is guaranteed.
+     * You may call monitor.didDrop() to check whether or not the drop was handled by a compatible drop target. If it was handled,
+     * and the drop target specified a drop result by returning a plain object from its drop() method, it will be available as
+     * monitor.getDropResult(). This method is a good place to fire a Flux action. Note: If the component is unmounted while dragging,
+     * component parameter is set to be null.
+     */
+    end?: (draggedItem: DragObject, monitor: DragSourceMonitor<DragObject, DropResult>) => void;
+    /**
+     * Optional.
+     * Use it to specify whether the dragging is currently allowed. If you want to always allow it, just omit this method.
+     * Specifying it is handy if you'd like to disable dragging based on some predicate over props. Note: You may not call
+     * monitor.canDrag() inside this method.
+     */
+    canDrag?: boolean | ((monitor: DragSourceMonitor<DragObject, DropResult>) => boolean);
+    /**
+     * Optional.
+     * By default, only the drag source that initiated the drag operation is considered to be dragging. You can
+     * override this behavior by defining a custom isDragging method. It might return something like props.id === monitor.getItem().id.
+     * Do this if the original component may be unmounted during the dragging and later “resurrected” with a different parent.
+     * For example, when moving a card across the lists in a Kanban board, you want it to retain the dragged appearance—even though
+     * technically, the component gets unmounted and a different one gets mounted every time you move it to another list.
+     *
+     * Note: You may not call monitor.isDragging() inside this method.
+     */
+    isDragging?: (monitor: DragSourceMonitor<DragObject, DropResult>) => boolean;
+    /**
+     * A function to collect rendering properties
+     */
+    collect?: (monitor: DragSourceMonitor<DragObject, DropResult>) => CollectedProps;
+}
+/**
+ * Interface for the DropTarget specification object
+ */
+export interface DropTargetHookSpec<DragObject, DropResult, CollectedProps> {
+    /**
+     * The kinds of dragItems this dropTarget accepts
+     */
+    accept: TargetType;
+    /**
+     * The drop target options
+     */
+    options?: DropTargetOptions;
+    /**
+     * Optional.
+     * Called when a compatible item is dropped on the target. You may either return undefined, or a plain object.
+     * If you return an object, it is going to become the drop result and will be available to the drag source in its
+     * endDrag method as monitor.getDropResult(). This is useful in case you want to perform different actions
+     * depending on which target received the drop. If you have nested drop targets, you can test whether a nested
+     * target has already handled drop by checking monitor.didDrop() and monitor.getDropResult(). Both this method and
+     * the source's endDrag method are good places to fire Flux actions. This method will not be called if canDrop()
+     * is defined and returns false.
+     */
+    drop?: (item: DragObject, monitor: DropTargetMonitor) => DropResult | undefined;
+    /**
+     * Optional.
+     * Called when an item is hovered over the component. You can check monitor.isOver({ shallow: true }) to test whether
+     * the hover happens over just the current target, or over a nested one. Unlike drop(), this method will be called even
+     * if canDrop() is defined and returns false. You can check monitor.canDrop() to test whether this is the case.
+     */
+    hover?: (item: DragObject, monitor: DropTargetMonitor) => void;
+    /**
+     * Optional. Use it to specify whether the drop target is able to accept the item. If you want to always allow it, just
+     * omit this method. Specifying it is handy if you'd like to disable dropping based on some predicate over props or
+     * monitor.getItem(). Note: You may not call monitor.canDrop() inside this method.
+     */
+    canDrop?: (item: DragObject, monitor: DropTargetMonitor) => boolean;
+    /**
+     * A function to collect rendering properties
+     */
+    collect?: (monitor: DropTargetMonitor) => CollectedProps;
+}

node_modules/react-dnd/lib/hooks/types.js

@@ -0,0 +1 @@
+export {};

node_modules/react-dnd/lib/hooks/useCollectedProps.d.ts

@@ -0,0 +1,3 @@
+import { Connector } from '../internals';
+import { HandlerManager, MonitorEventEmitter } from '../types';
+export declare function useCollectedProps<Collected, Monitor extends HandlerManager>(collector: ((monitor: Monitor) => Collected) | undefined, monitor: Monitor & MonitorEventEmitter, connector: Connector): Collected;

node_modules/react-dnd/lib/hooks/useCollectedProps.js

@@ -0,0 +1,4 @@
+import { useMonitorOutput } from './useMonitorOutput';
+export function useCollectedProps(collector, monitor, connector) {
+    return useMonitorOutput(monitor, collector || (() => ({})), () => connector.reconnect());
+}

node_modules/react-dnd/lib/hooks/useCollector.d.ts

@@ -0,0 +1,7 @@
+/**
+ *
+ * @param monitor The monitor to collect state from
+ * @param collect The collecting function
+ * @param onUpdate A method to invoke when updates occur
+ */
+export declare function useCollector<T, S>(monitor: T, collect: (monitor: T) => S, onUpdate?: () => void): [S, () => void];

node_modules/react-dnd/lib/hooks/useCollector.js

@@ -0,0 +1,28 @@
+import equal from 'fast-deep-equal';
+import { useState, useCallback } from 'react';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+/**
+ *
+ * @param monitor The monitor to collect state from
+ * @param collect The collecting function
+ * @param onUpdate A method to invoke when updates occur
+ */
+export function useCollector(monitor, collect, onUpdate) {
+    const [collected, setCollected] = useState(() => collect(monitor));
+    const updateCollected = useCallback(() => {
+        const nextValue = collect(monitor);
+        // This needs to be a deep-equality check because some monitor-collected values
+        // include XYCoord objects that may be equivalent, but do not have instance equality.
+        if (!equal(collected, nextValue)) {
+            setCollected(nextValue);
+            if (onUpdate) {
+                onUpdate();
+            }
+        }
+    }, [collected, monitor, onUpdate]);
+    // update the collected properties after react renders.
+    // Note that the "Dustbin Stress Test" fails if this is not
+    // done when the component updates
+    useIsomorphicLayoutEffect(updateCollected);
+    return [collected, updateCollected];
+}

node_modules/react-dnd/lib/hooks/useDrag/DragSourceImpl.d.ts

@@ -0,0 +1,14 @@
+import { DragDropMonitor, DragSource, Identifier } from 'dnd-core';
+import { Connector } from '../../internals';
+import { DragSourceMonitor } from '../../types';
+import { DragSourceHookSpec } from '../types';
+export declare class DragSourceImpl<O, R, P> implements DragSource {
+    spec: DragSourceHookSpec<O, R, P>;
+    private monitor;
+    private connector;
+    constructor(spec: DragSourceHookSpec<O, R, P>, monitor: DragSourceMonitor<O, R>, connector: Connector);
+    beginDrag(): NonNullable<O> | null;
+    canDrag(): boolean;
+    isDragging(globalMonitor: DragDropMonitor, target: Identifier): boolean;
+    endDrag(): void;
+}

node_modules/react-dnd/lib/hooks/useDrag/DragSourceImpl.js

@@ -0,0 +1,56 @@
+export class DragSourceImpl {
+    spec;
+    monitor;
+    connector;
+    constructor(spec, monitor, connector) {
+        this.spec = spec;
+        this.monitor = monitor;
+        this.connector = connector;
+    }
+    beginDrag() {
+        const spec = this.spec;
+        const monitor = this.monitor;
+        let result = null;
+        if (typeof spec.item === 'object') {
+            result = spec.item;
+        }
+        else if (typeof spec.item === 'function') {
+            result = spec.item(monitor);
+        }
+        else {
+            result = {};
+        }
+        return result ?? null;
+    }
+    canDrag() {
+        const spec = this.spec;
+        const monitor = this.monitor;
+        if (typeof spec.canDrag === 'boolean') {
+            return spec.canDrag;
+        }
+        else if (typeof spec.canDrag === 'function') {
+            return spec.canDrag(monitor);
+        }
+        else {
+            return true;
+        }
+    }
+    isDragging(globalMonitor, target) {
+        const spec = this.spec;
+        const monitor = this.monitor;
+        const { isDragging } = spec;
+        return isDragging
+            ? isDragging(monitor)
+            : target === globalMonitor.getSourceId();
+    }
+    endDrag() {
+        const spec = this.spec;
+        const monitor = this.monitor;
+        const connector = this.connector;
+        const { end } = spec;
+        if (end) {
+            end(monitor.getItem(), monitor);
+        }
+        connector.reconnect();
+    }
+}

node_modules/react-dnd/lib/hooks/useDrag/connectors.d.ts

@@ -0,0 +1,3 @@
+import { SourceConnector } from '../../internals';
+export declare function useConnectDragSource(connector: SourceConnector): any;
+export declare function useConnectDragPreview(connector: SourceConnector): any;

node_modules/react-dnd/lib/hooks/useDrag/connectors.js

@@ -0,0 +1,7 @@
+import { useMemo } from 'react';
+export function useConnectDragSource(connector) {
+    return useMemo(() => connector.hooks.dragSource(), [connector]);
+}
+export function useConnectDragPreview(connector) {
+    return useMemo(() => connector.hooks.dragPreview(), [connector]);
+}

node_modules/react-dnd/lib/hooks/useDrag/index.d.ts

@@ -0,0 +1 @@
+export * from './useDrag';

node_modules/react-dnd/lib/hooks/useDrag/index.js

@@ -0,0 +1 @@
+export * from './useDrag';

node_modules/react-dnd/lib/hooks/useDrag/useDrag.d.ts

@@ -0,0 +1,8 @@
+import { ConnectDragSource, ConnectDragPreview } from '../../types';
+import { DragSourceHookSpec, FactoryOrInstance } from '../types';
+/**
+ * useDragSource hook
+ * @param sourceSpec The drag source specification (object or function, function preferred)
+ * @param deps The memoization deps array to use when evaluating spec changes
+ */
+export declare function useDrag<DragObject, DropResult, CollectedProps>(specArg: FactoryOrInstance<DragSourceHookSpec<DragObject, DropResult, CollectedProps>>, deps?: unknown[]): [CollectedProps, ConnectDragSource, ConnectDragPreview];

node_modules/react-dnd/lib/hooks/useDrag/useDrag.js

@@ -0,0 +1,24 @@
+import { useRegisteredDragSource } from './useRegisteredDragSource';
+import { useOptionalFactory } from '../useOptionalFactory';
+import { useDragSourceMonitor } from './useDragSourceMonitor';
+import { useDragSourceConnector } from './useDragSourceConnector';
+import { useCollectedProps } from '../useCollectedProps';
+import { useConnectDragPreview, useConnectDragSource } from './connectors';
+import { invariant } from '@react-dnd/invariant';
+/**
+ * useDragSource hook
+ * @param sourceSpec The drag source specification (object or function, function preferred)
+ * @param deps The memoization deps array to use when evaluating spec changes
+ */
+export function useDrag(specArg, deps) {
+    const spec = useOptionalFactory(specArg, deps);
+    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)`);
+    const monitor = useDragSourceMonitor();
+    const connector = useDragSourceConnector(spec.options, spec.previewOptions);
+    useRegisteredDragSource(spec, monitor, connector);
+    return [
+        useCollectedProps(spec.collect, monitor, connector),
+        useConnectDragSource(connector),
+        useConnectDragPreview(connector),
+    ];
+}

node_modules/react-dnd/lib/hooks/useDrag/useDragSource.d.ts

@@ -0,0 +1,5 @@
+import { Connector } from '../../internals';
+import { DragSourceMonitor } from '../../types';
+import { DragSourceHookSpec } from '../types';
+import { DragSourceImpl } from './DragSourceImpl';
+export declare function useDragSource<O, R, P>(spec: DragSourceHookSpec<O, R, P>, monitor: DragSourceMonitor<O, R>, connector: Connector): DragSourceImpl<O, R, P>;

node_modules/react-dnd/lib/hooks/useDrag/useDragSource.js

@@ -0,0 +1,9 @@
+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(() => {
+        handler.spec = spec;
+    }, [spec]);
+    return handler;
+}

node_modules/react-dnd/lib/hooks/useDrag/useDragSourceConnector.d.ts

@@ -0,0 +1,3 @@
+import { SourceConnector } from '../../internals';
+import { DragPreviewOptions, DragSourceOptions } from '../../types';
+export declare function useDragSourceConnector(dragSourceOptions: DragSourceOptions | undefined, dragPreviewOptions: DragPreviewOptions | undefined): SourceConnector;

node_modules/react-dnd/lib/hooks/useDrag/useDragSourceConnector.js

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import { SourceConnector } from '../../internals';
+import { useDragDropManager } from '../useDragDropManager';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
+export function useDragSourceConnector(dragSourceOptions, dragPreviewOptions) {
+    const manager = useDragDropManager();
+    const connector = useMemo(() => new SourceConnector(manager.getBackend()), [manager]);
+    useIsomorphicLayoutEffect(() => {
+        connector.dragSourceOptions = dragSourceOptions || null;
+        connector.reconnect();
+        return () => connector.disconnectDragSource();
+    }, [connector, dragSourceOptions]);
+    useIsomorphicLayoutEffect(() => {
+        connector.dragPreviewOptions = dragPreviewOptions || null;
+        connector.reconnect();
+        return () => connector.disconnectDragPreview();
+    }, [connector, dragPreviewOptions]);
+    return connector;
+}

node_modules/react-dnd/lib/hooks/useDrag/useDragSourceMonitor.d.ts

@@ -0,0 +1,2 @@
+import { DragSourceMonitor } from '../../types';
+export declare function useDragSourceMonitor<O, R>(): DragSourceMonitor<O, R>;

node_modules/react-dnd/lib/hooks/useDrag/useDragSourceMonitor.js

@@ -0,0 +1,7 @@
+import { useMemo } from 'react';
+import { DragSourceMonitorImpl } from '../../internals';
+import { useDragDropManager } from '../useDragDropManager';
+export function useDragSourceMonitor() {
+    const manager = useDragDropManager();
+    return useMemo(() => new DragSourceMonitorImpl(manager), [manager]);
+}

node_modules/react-dnd/lib/hooks/useDrag/useDragType.d.ts

@@ -0,0 +1,3 @@
+import { Identifier } from 'dnd-core';
+import { DragSourceHookSpec } from '../types';
+export declare function useDragType(spec: DragSourceHookSpec<any, any, any>): Identifier;

node_modules/react-dnd/lib/hooks/useDrag/useDragType.js

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

node_modules/react-dnd/lib/hooks/useDrag/useRegisteredDragSource.d.ts

@@ -0,0 +1,4 @@
+import { DragSourceMonitor } from '../../types';
+import { SourceConnector } from '../../internals';
+import { DragSourceHookSpec } from '../types';
+export declare function useRegisteredDragSource<O, R, P>(spec: DragSourceHookSpec<O, R, P>, monitor: DragSourceMonitor<O, R>, connector: SourceConnector): void;

node_modules/react-dnd/lib/hooks/useDrag/useRegisteredDragSource.js

@@ -0,0 +1,18 @@
+import { registerSource } from '../../internals';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
+import { useDragSource } from './useDragSource';
+import { useDragDropManager } from '../useDragDropManager';
+import { useDragType } from './useDragType';
+export function useRegisteredDragSource(spec, monitor, connector) {
+    const manager = useDragDropManager();
+    const handler = useDragSource(spec, monitor, connector);
+    const itemType = useDragType(spec);
+    useIsomorphicLayoutEffect(function registerDragSource() {
+        if (itemType != null) {
+            const [handlerId, unregister] = registerSource(itemType, handler, manager);
+            monitor.receiveHandlerId(handlerId);
+            connector.receiveHandlerId(handlerId);
+            return unregister;
+        }
+    }, [manager, monitor, connector, handler, itemType]);
+}

node_modules/react-dnd/lib/hooks/useDragDropManager.d.ts

@@ -0,0 +1,5 @@
+import { DragDropManager } from 'dnd-core';
+/**
+ * A hook to retrieve the DragDropManager from Context
+ */
+export declare function useDragDropManager(): DragDropManager;

node_modules/react-dnd/lib/hooks/useDragDropManager.js

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { invariant } from '@react-dnd/invariant';
+import { DndContext } from '../core';
+/**
+ * A hook to retrieve the DragDropManager from Context
+ */
+export function useDragDropManager() {
+    const { dragDropManager } = useContext(DndContext);
+    invariant(dragDropManager != null, 'Expected drag drop context');
+    return dragDropManager;
+}

node_modules/react-dnd/lib/hooks/useDragLayer.d.ts

@@ -0,0 +1,6 @@
+import { DragLayerMonitor } from 'react-dnd';
+/**
+ * useDragLayer Hook
+ * @param collector The property collector
+ */
+export declare function useDragLayer<CollectedProps>(collect: (monitor: DragLayerMonitor) => CollectedProps): CollectedProps;

node_modules/react-dnd/lib/hooks/useDragLayer.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { useDragDropManager } from './useDragDropManager';
+import { useCollector } from './useCollector';
+/**
+ * useDragLayer Hook
+ * @param collector The property collector
+ */
+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));
+    return collected;
+}

node_modules/react-dnd/lib/hooks/useDrop/DropTargetImpl.d.ts

@@ -0,0 +1,11 @@
+import { DropTarget } from 'dnd-core';
+import { DropTargetMonitor } from '../../types';
+import { DropTargetHookSpec } from '../types';
+export declare class DropTargetImpl<O, R, P> implements DropTarget {
+    spec: DropTargetHookSpec<O, R, P>;
+    private monitor;
+    constructor(spec: DropTargetHookSpec<O, R, P>, monitor: DropTargetMonitor<O, R>);
+    canDrop(): boolean;
+    hover(): void;
+    drop(): R | undefined;
+}

node_modules/react-dnd/lib/hooks/useDrop/DropTargetImpl.js

@@ -0,0 +1,27 @@
+export class DropTargetImpl {
+    spec;
+    monitor;
+    constructor(spec, monitor) {
+        this.spec = spec;
+        this.monitor = monitor;
+    }
+    canDrop() {
+        const spec = this.spec;
+        const monitor = this.monitor;
+        return spec.canDrop ? spec.canDrop(monitor.getItem(), monitor) : true;
+    }
+    hover() {
+        const spec = this.spec;
+        const monitor = this.monitor;
+        if (spec.hover) {
+            spec.hover(monitor.getItem(), monitor);
+        }
+    }
+    drop() {
+        const spec = this.spec;
+        const monitor = this.monitor;
+        if (spec.drop) {
+            return spec.drop(monitor.getItem(), monitor);
+        }
+    }
+}

node_modules/react-dnd/lib/hooks/useDrop/connectors.d.ts

@@ -0,0 +1,2 @@
+import { TargetConnector } from '../../internals';
+export declare function useConnectDropTarget(connector: TargetConnector): any;

node_modules/react-dnd/lib/hooks/useDrop/connectors.js

@@ -0,0 +1,4 @@
+import { useMemo } from 'react';
+export function useConnectDropTarget(connector) {
+    return useMemo(() => connector.hooks.dropTarget(), [connector]);
+}

node_modules/react-dnd/lib/hooks/useDrop/index.d.ts

@@ -0,0 +1 @@
+export * from './useDrop';

node_modules/react-dnd/lib/hooks/useDrop/index.js

@@ -0,0 +1 @@
+export * from './useDrop';

node_modules/react-dnd/lib/hooks/useDrop/useAccept.d.ts

@@ -0,0 +1,8 @@
+import { Identifier } from 'dnd-core';
+import { DropTargetHookSpec } from '../types';
+/**
+ * Internal utility hook to get an array-version of spec.accept.
+ * The main utility here is that we aren't creating a new array on every render if a non-array spec.accept is passed in.
+ * @param spec
+ */
+export declare function useAccept<O, R, P>(spec: DropTargetHookSpec<O, R, P>): Identifier[];

node_modules/react-dnd/lib/hooks/useDrop/useAccept.js

@@ -0,0 +1,14 @@
+import { invariant } from '@react-dnd/invariant';
+import { useMemo } from 'react';
+/**
+ * Internal utility hook to get an array-version of spec.accept.
+ * The main utility here is that we aren't creating a new array on every render if a non-array spec.accept is passed in.
+ * @param spec
+ */
+export function useAccept(spec) {
+    const { accept } = spec;
+    return useMemo(() => {
+        invariant(spec.accept != null, 'accept must be defined');
+        return Array.isArray(accept) ? accept : [accept];
+    }, [accept]);
+}

node_modules/react-dnd/lib/hooks/useDrop/useDrop.d.ts

@@ -0,0 +1,8 @@
+import { ConnectDropTarget } from '../../types';
+import { DropTargetHookSpec, FactoryOrInstance } from '../types';
+/**
+ * useDropTarget Hook
+ * @param spec The drop target specification (object or function, function preferred)
+ * @param deps The memoization deps array to use when evaluating spec changes
+ */
+export declare function useDrop<DragObject, DropResult, CollectedProps>(specArg: FactoryOrInstance<DropTargetHookSpec<DragObject, DropResult, CollectedProps>>, deps?: unknown[]): [CollectedProps, ConnectDropTarget];

node_modules/react-dnd/lib/hooks/useDrop/useDrop.js

@@ -0,0 +1,21 @@
+import { useRegisteredDropTarget } from './useRegisteredDropTarget';
+import { useOptionalFactory } from '../useOptionalFactory';
+import { useDropTargetMonitor } from './useDropTargetMonitor';
+import { useDropTargetConnector } from './useDropTargetConnector';
+import { useCollectedProps } from '../useCollectedProps';
+import { useConnectDropTarget } from './connectors';
+/**
+ * useDropTarget Hook
+ * @param spec The drop target specification (object or function, function preferred)
+ * @param deps The memoization deps array to use when evaluating spec changes
+ */
+export function useDrop(specArg, deps) {
+    const spec = useOptionalFactory(specArg, deps);
+    const monitor = useDropTargetMonitor();
+    const connector = useDropTargetConnector(spec.options);
+    useRegisteredDropTarget(spec, monitor, connector);
+    return [
+        useCollectedProps(spec.collect, monitor, connector),
+        useConnectDropTarget(connector),
+    ];
+}

node_modules/react-dnd/lib/hooks/useDrop/useDropTarget.d.ts

@@ -0,0 +1,4 @@
+import { DropTargetMonitor } from '../../types';
+import { DropTargetHookSpec } from '../types';
+import { DropTargetImpl } from './DropTargetImpl';
+export declare function useDropTarget<O, R, P>(spec: DropTargetHookSpec<O, R, P>, monitor: DropTargetMonitor<O, R>): DropTargetImpl<O, R, P>;

node_modules/react-dnd/lib/hooks/useDrop/useDropTarget.js

@@ -0,0 +1,9 @@
+import { useEffect, useMemo } from 'react';
+import { DropTargetImpl } from './DropTargetImpl';
+export function useDropTarget(spec, monitor) {
+    const dropTarget = useMemo(() => new DropTargetImpl(spec, monitor), [monitor]);
+    useEffect(() => {
+        dropTarget.spec = spec;
+    }, [spec]);
+    return dropTarget;
+}

node_modules/react-dnd/lib/hooks/useDrop/useDropTargetConnector.d.ts

@@ -0,0 +1,3 @@
+import { TargetConnector } from '../../internals';
+import { DropTargetOptions } from '../../types';
+export declare function useDropTargetConnector(options: DropTargetOptions): TargetConnector;

node_modules/react-dnd/lib/hooks/useDrop/useDropTargetConnector.js

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { TargetConnector } from '../../internals';
+import { useDragDropManager } from '../useDragDropManager';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
+export function useDropTargetConnector(options) {
+    const manager = useDragDropManager();
+    const connector = useMemo(() => new TargetConnector(manager.getBackend()), [manager]);
+    useIsomorphicLayoutEffect(() => {
+        connector.dropTargetOptions = options || null;
+        connector.reconnect();
+        return () => connector.disconnectDropTarget();
+    }, [options]);
+    return connector;
+}

node_modules/react-dnd/lib/hooks/useDrop/useDropTargetMonitor.d.ts

@@ -0,0 +1,2 @@
+import { DropTargetMonitor } from '../../types';
+export declare function useDropTargetMonitor<O, R>(): DropTargetMonitor<O, R>;

node_modules/react-dnd/lib/hooks/useDrop/useDropTargetMonitor.js

@@ -0,0 +1,7 @@
+import { useMemo } from 'react';
+import { DropTargetMonitorImpl } from '../../internals';
+import { useDragDropManager } from '../useDragDropManager';
+export function useDropTargetMonitor() {
+    const manager = useDragDropManager();
+    return useMemo(() => new DropTargetMonitorImpl(manager), [manager]);
+}

node_modules/react-dnd/lib/hooks/useDrop/useRegisteredDropTarget.d.ts

@@ -0,0 +1,4 @@
+import { TargetConnector } from '../../internals';
+import { DropTargetMonitor } from '../../types';
+import { DropTargetHookSpec } from '../types';
+export declare function useRegisteredDropTarget<O, R, P>(spec: DropTargetHookSpec<O, R, P>, monitor: DropTargetMonitor<O, R>, connector: TargetConnector): void;

node_modules/react-dnd/lib/hooks/useDrop/useRegisteredDropTarget.js

@@ -0,0 +1,22 @@
+import { registerTarget } from '../../internals';
+import { useDragDropManager } from '../useDragDropManager';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
+import { useAccept } from './useAccept';
+import { useDropTarget } from './useDropTarget';
+export function useRegisteredDropTarget(spec, monitor, connector) {
+    const manager = useDragDropManager();
+    const dropTarget = useDropTarget(spec, monitor);
+    const accept = useAccept(spec);
+    useIsomorphicLayoutEffect(function registerDropTarget() {
+        const [handlerId, unregister] = registerTarget(accept, dropTarget, manager);
+        monitor.receiveHandlerId(handlerId);
+        connector.receiveHandlerId(handlerId);
+        return unregister;
+    }, [
+        manager,
+        monitor,
+        dropTarget,
+        connector,
+        accept.map((a) => a.toString()).join('|'),
+    ]);
+}

node_modules/react-dnd/lib/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

node_modules/react-dnd/lib/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,3 @@
+import { useLayoutEffect, useEffect } from 'react';
+// suppress the useLayoutEffect warning on server side.
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

node_modules/react-dnd/lib/hooks/useMonitorOutput.d.ts

@@ -0,0 +1,2 @@
+import { HandlerManager, MonitorEventEmitter } from '../types';
+export declare function useMonitorOutput<Monitor extends HandlerManager, Collected>(monitor: Monitor & MonitorEventEmitter, collect: (monitor: Monitor) => Collected, onCollect?: () => void): Collected;

node_modules/react-dnd/lib/hooks/useMonitorOutput.js

@@ -0,0 +1,15 @@
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+import { useCollector } from './useCollector';
+export function useMonitorOutput(monitor, collect, onCollect) {
+    const [collected, updateCollected] = useCollector(monitor, collect, onCollect);
+    useIsomorphicLayoutEffect(function subscribeToMonitorStateChange() {
+        const handlerId = monitor.getHandlerId();
+        if (handlerId == null) {
+            return;
+        }
+        return monitor.subscribeToStateChange(updateCollected, {
+            handlerIds: [handlerId],
+        });
+    }, [monitor, updateCollected]);
+    return collected;
+}

node_modules/react-dnd/lib/hooks/useOptionalFactory.d.ts

@@ -0,0 +1,2 @@
+import { FactoryOrInstance } from './types';
+export declare function useOptionalFactory<T>(arg: FactoryOrInstance<T>, deps?: unknown[]): T;

node_modules/react-dnd/lib/hooks/useOptionalFactory.js

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+export function useOptionalFactory(arg, deps) {
+    const memoDeps = [...(deps || [])];
+    if (deps == null && typeof arg !== 'function') {
+        memoDeps.push(arg);
+    }
+    return useMemo(() => {
+        return typeof arg === 'function' ? arg() : arg;
+    }, memoDeps);
+}