planning

node_modules/react-dnd-html5-backend/lib/BrowserDetector.d.ts

@@ -0,0 +1,8 @@
+declare global {
+    interface Window extends HTMLElement {
+        safari: any;
+    }
+}
+export declare type Predicate = () => boolean;
+export declare const isFirefox: Predicate;
+export declare const isSafari: Predicate;

node_modules/react-dnd-html5-backend/lib/BrowserDetector.js

@@ -0,0 +1,3 @@
+import { memoize } from './utils/js_utils';
+export const isFirefox = memoize(() => /firefox/i.test(navigator.userAgent));
+export const isSafari = memoize(() => Boolean(window.safari));

node_modules/react-dnd-html5-backend/lib/EnterLeaveCounter.d.ts

@@ -0,0 +1,10 @@
+declare type NodePredicate = (node: Node | null | undefined) => boolean;
+export declare class EnterLeaveCounter {
+    private entered;
+    private isNodeInDocument;
+    constructor(isNodeInDocument: NodePredicate);
+    enter(enteringNode: EventTarget | null): boolean;
+    leave(leavingNode: EventTarget | null): boolean;
+    reset(): void;
+}
+export {};

node_modules/react-dnd-html5-backend/lib/EnterLeaveCounter.js

@@ -0,0 +1,23 @@
+import { union, without } from './utils/js_utils';
+export class EnterLeaveCounter {
+    entered = [];
+    isNodeInDocument;
+    constructor(isNodeInDocument) {
+        this.isNodeInDocument = isNodeInDocument;
+    }
+    enter(enteringNode) {
+        const previousLength = this.entered.length;
+        const isNodeEntered = (node) => this.isNodeInDocument(node) &&
+            (!node.contains || node.contains(enteringNode));
+        this.entered = union(this.entered.filter(isNodeEntered), [enteringNode]);
+        return previousLength === 0 && this.entered.length > 0;
+    }
+    leave(leavingNode) {
+        const previousLength = this.entered.length;
+        this.entered = without(this.entered.filter(this.isNodeInDocument), leavingNode);
+        return previousLength > 0 && this.entered.length === 0;
+    }
+    reset() {
+        this.entered = [];
+    }
+}

node_modules/react-dnd-html5-backend/lib/HTML5BackendImpl.d.ts

@@ -0,0 +1,69 @@
+import { Backend, DragDropManager, Unsubscribe } from 'dnd-core';
+import { HTML5BackendContext, HTML5BackendOptions } from './types';
+export declare class HTML5BackendImpl implements Backend {
+    private options;
+    private actions;
+    private monitor;
+    private registry;
+    private enterLeaveCounter;
+    private sourcePreviewNodes;
+    private sourcePreviewNodeOptions;
+    private sourceNodes;
+    private sourceNodeOptions;
+    private dragStartSourceIds;
+    private dropTargetIds;
+    private dragEnterTargetIds;
+    private currentNativeSource;
+    private currentNativeHandle;
+    private currentDragSourceNode;
+    private altKeyPressed;
+    private mouseMoveTimeoutTimer;
+    private asyncEndDragFrameId;
+    private dragOverTargetIds;
+    private lastClientOffset;
+    private hoverRafId;
+    constructor(manager: DragDropManager, globalContext?: HTML5BackendContext, options?: HTML5BackendOptions);
+    /**
+     * Generate profiling statistics for the HTML5Backend.
+     */
+    profile(): Record<string, number>;
+    get window(): Window | undefined;
+    get document(): Document | undefined;
+    /**
+     * Get the root element to use for event subscriptions
+     */
+    private get rootElement();
+    setup(): void;
+    teardown(): void;
+    connectDragPreview(sourceId: string, node: Element, options: any): Unsubscribe;
+    connectDragSource(sourceId: string, node: Element, options: any): Unsubscribe;
+    connectDropTarget(targetId: string, node: HTMLElement): Unsubscribe;
+    private addEventListeners;
+    private removeEventListeners;
+    private getCurrentSourceNodeOptions;
+    private getCurrentDropEffect;
+    private getCurrentSourcePreviewNodeOptions;
+    private getSourceClientOffset;
+    private isDraggingNativeItem;
+    private beginDragNativeItem;
+    private endDragNativeItem;
+    private isNodeInDocument;
+    private endDragIfSourceWasRemovedFromDOM;
+    private setCurrentDragSourceNode;
+    private clearCurrentDragSourceNode;
+    handleTopDragStartCapture: () => void;
+    handleDragStart(e: DragEvent, sourceId: string): void;
+    handleTopDragStart: (e: DragEvent) => void;
+    handleTopDragEndCapture: () => void;
+    handleTopDragEnterCapture: (e: DragEvent) => void;
+    handleDragEnter(e: DragEvent, targetId: string): void;
+    handleTopDragEnter: (e: DragEvent) => void;
+    handleTopDragOverCapture: () => void;
+    handleDragOver(e: DragEvent, targetId: string): void;
+    handleTopDragOver: (e: DragEvent) => void;
+    handleTopDragLeaveCapture: (e: DragEvent) => void;
+    handleTopDropCapture: (e: DragEvent) => void;
+    handleDrop(e: DragEvent, targetId: string): void;
+    handleTopDrop: (e: DragEvent) => void;
+    handleSelectStart: (e: DragEvent) => void;
+}

node_modules/react-dnd-html5-backend/lib/HTML5BackendImpl.js

@@ -0,0 +1,524 @@
+import { EnterLeaveCounter } from './EnterLeaveCounter';
+import { getNodeClientOffset, getEventClientOffset, getDragPreviewOffset, } from './OffsetUtils';
+import { createNativeDragSource, matchNativeItemType, } from './NativeDragSources';
+import * as NativeTypes from './NativeTypes';
+import { OptionsReader } from './OptionsReader';
+export class HTML5BackendImpl {
+    options;
+    // React-Dnd Components
+    actions;
+    monitor;
+    registry;
+    // Internal State
+    enterLeaveCounter;
+    sourcePreviewNodes = new Map();
+    sourcePreviewNodeOptions = new Map();
+    sourceNodes = new Map();
+    sourceNodeOptions = new Map();
+    dragStartSourceIds = null;
+    dropTargetIds = [];
+    dragEnterTargetIds = [];
+    currentNativeSource = null;
+    currentNativeHandle = null;
+    currentDragSourceNode = null;
+    altKeyPressed = false;
+    mouseMoveTimeoutTimer = null;
+    asyncEndDragFrameId = null;
+    dragOverTargetIds = null;
+    lastClientOffset = null;
+    hoverRafId = null;
+    constructor(manager, globalContext, options) {
+        this.options = new OptionsReader(globalContext, options);
+        this.actions = manager.getActions();
+        this.monitor = manager.getMonitor();
+        this.registry = manager.getRegistry();
+        this.enterLeaveCounter = new EnterLeaveCounter(this.isNodeInDocument);
+    }
+    /**
+     * Generate profiling statistics for the HTML5Backend.
+     */
+    profile() {
+        return {
+            sourcePreviewNodes: this.sourcePreviewNodes.size,
+            sourcePreviewNodeOptions: this.sourcePreviewNodeOptions.size,
+            sourceNodeOptions: this.sourceNodeOptions.size,
+            sourceNodes: this.sourceNodes.size,
+            dragStartSourceIds: this.dragStartSourceIds?.length || 0,
+            dropTargetIds: this.dropTargetIds.length,
+            dragEnterTargetIds: this.dragEnterTargetIds.length,
+            dragOverTargetIds: this.dragOverTargetIds?.length || 0,
+        };
+    }
+    // public for test
+    get window() {
+        return this.options.window;
+    }
+    get document() {
+        return this.options.document;
+    }
+    /**
+     * Get the root element to use for event subscriptions
+     */
+    get rootElement() {
+        return this.options.rootElement;
+    }
+    setup() {
+        const root = this.rootElement;
+        if (root === undefined) {
+            return;
+        }
+        if (root.__isReactDndBackendSetUp) {
+            throw new Error('Cannot have two HTML5 backends at the same time.');
+        }
+        root.__isReactDndBackendSetUp = true;
+        this.addEventListeners(root);
+    }
+    teardown() {
+        const root = this.rootElement;
+        if (root === undefined) {
+            return;
+        }
+        root.__isReactDndBackendSetUp = false;
+        this.removeEventListeners(this.rootElement);
+        this.clearCurrentDragSourceNode();
+        if (this.asyncEndDragFrameId) {
+            this.window?.cancelAnimationFrame(this.asyncEndDragFrameId);
+        }
+    }
+    connectDragPreview(sourceId, node, options) {
+        this.sourcePreviewNodeOptions.set(sourceId, options);
+        this.sourcePreviewNodes.set(sourceId, node);
+        return () => {
+            this.sourcePreviewNodes.delete(sourceId);
+            this.sourcePreviewNodeOptions.delete(sourceId);
+        };
+    }
+    connectDragSource(sourceId, node, options) {
+        this.sourceNodes.set(sourceId, node);
+        this.sourceNodeOptions.set(sourceId, options);
+        const handleDragStart = (e) => this.handleDragStart(e, sourceId);
+        const handleSelectStart = (e) => this.handleSelectStart(e);
+        node.setAttribute('draggable', 'true');
+        node.addEventListener('dragstart', handleDragStart);
+        node.addEventListener('selectstart', handleSelectStart);
+        return () => {
+            this.sourceNodes.delete(sourceId);
+            this.sourceNodeOptions.delete(sourceId);
+            node.removeEventListener('dragstart', handleDragStart);
+            node.removeEventListener('selectstart', handleSelectStart);
+            node.setAttribute('draggable', 'false');
+        };
+    }
+    connectDropTarget(targetId, node) {
+        const handleDragEnter = (e) => this.handleDragEnter(e, targetId);
+        const handleDragOver = (e) => this.handleDragOver(e, targetId);
+        const handleDrop = (e) => this.handleDrop(e, targetId);
+        node.addEventListener('dragenter', handleDragEnter);
+        node.addEventListener('dragover', handleDragOver);
+        node.addEventListener('drop', handleDrop);
+        return () => {
+            node.removeEventListener('dragenter', handleDragEnter);
+            node.removeEventListener('dragover', handleDragOver);
+            node.removeEventListener('drop', handleDrop);
+        };
+    }
+    addEventListeners(target) {
+        // SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
+        if (!target.addEventListener) {
+            return;
+        }
+        target.addEventListener('dragstart', this.handleTopDragStart);
+        target.addEventListener('dragstart', this.handleTopDragStartCapture, true);
+        target.addEventListener('dragend', this.handleTopDragEndCapture, true);
+        target.addEventListener('dragenter', this.handleTopDragEnter);
+        target.addEventListener('dragenter', this.handleTopDragEnterCapture, true);
+        target.addEventListener('dragleave', this.handleTopDragLeaveCapture, true);
+        target.addEventListener('dragover', this.handleTopDragOver);
+        target.addEventListener('dragover', this.handleTopDragOverCapture, true);
+        target.addEventListener('drop', this.handleTopDrop);
+        target.addEventListener('drop', this.handleTopDropCapture, true);
+    }
+    removeEventListeners(target) {
+        // SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
+        if (!target.removeEventListener) {
+            return;
+        }
+        target.removeEventListener('dragstart', this.handleTopDragStart);
+        target.removeEventListener('dragstart', this.handleTopDragStartCapture, true);
+        target.removeEventListener('dragend', this.handleTopDragEndCapture, true);
+        target.removeEventListener('dragenter', this.handleTopDragEnter);
+        target.removeEventListener('dragenter', this.handleTopDragEnterCapture, true);
+        target.removeEventListener('dragleave', this.handleTopDragLeaveCapture, true);
+        target.removeEventListener('dragover', this.handleTopDragOver);
+        target.removeEventListener('dragover', this.handleTopDragOverCapture, true);
+        target.removeEventListener('drop', this.handleTopDrop);
+        target.removeEventListener('drop', this.handleTopDropCapture, true);
+    }
+    getCurrentSourceNodeOptions() {
+        const sourceId = this.monitor.getSourceId();
+        const sourceNodeOptions = this.sourceNodeOptions.get(sourceId);
+        return {
+            dropEffect: this.altKeyPressed ? 'copy' : 'move',
+            ...(sourceNodeOptions || {}),
+        };
+    }
+    getCurrentDropEffect() {
+        if (this.isDraggingNativeItem()) {
+            // It makes more sense to default to 'copy' for native resources
+            return 'copy';
+        }
+        return this.getCurrentSourceNodeOptions().dropEffect;
+    }
+    getCurrentSourcePreviewNodeOptions() {
+        const sourceId = this.monitor.getSourceId();
+        const sourcePreviewNodeOptions = this.sourcePreviewNodeOptions.get(sourceId);
+        return {
+            anchorX: 0.5,
+            anchorY: 0.5,
+            captureDraggingState: false,
+            ...(sourcePreviewNodeOptions || {}),
+        };
+    }
+    getSourceClientOffset = (sourceId) => {
+        const source = this.sourceNodes.get(sourceId);
+        return (source && getNodeClientOffset(source)) || null;
+    };
+    isDraggingNativeItem() {
+        const itemType = this.monitor.getItemType();
+        return Object.keys(NativeTypes).some((key) => NativeTypes[key] === itemType);
+    }
+    beginDragNativeItem(type, dataTransfer) {
+        this.clearCurrentDragSourceNode();
+        this.currentNativeSource = createNativeDragSource(type, dataTransfer);
+        this.currentNativeHandle = this.registry.addSource(type, this.currentNativeSource);
+        this.actions.beginDrag([this.currentNativeHandle]);
+    }
+    endDragNativeItem = () => {
+        if (!this.isDraggingNativeItem()) {
+            return;
+        }
+        this.actions.endDrag();
+        if (this.currentNativeHandle) {
+            this.registry.removeSource(this.currentNativeHandle);
+        }
+        this.currentNativeHandle = null;
+        this.currentNativeSource = null;
+    };
+    isNodeInDocument = (node) => {
+        // Check the node either in the main document or in the current context
+        return Boolean(node &&
+            this.document &&
+            this.document.body &&
+            this.document.body.contains(node));
+    };
+    endDragIfSourceWasRemovedFromDOM = () => {
+        const node = this.currentDragSourceNode;
+        if (node == null || this.isNodeInDocument(node)) {
+            return;
+        }
+        if (this.clearCurrentDragSourceNode() && this.monitor.isDragging()) {
+            this.actions.endDrag();
+        }
+    };
+    setCurrentDragSourceNode(node) {
+        this.clearCurrentDragSourceNode();
+        this.currentDragSourceNode = node;
+        // A timeout of > 0 is necessary to resolve Firefox issue referenced
+        // See:
+        //   * https://github.com/react-dnd/react-dnd/pull/928
+        //   * https://github.com/react-dnd/react-dnd/issues/869
+        const MOUSE_MOVE_TIMEOUT = 1000;
+        // Receiving a mouse event in the middle of a dragging operation
+        // means it has ended and the drag source node disappeared from DOM,
+        // so the browser didn't dispatch the dragend event.
+        //
+        // We need to wait before we start listening for mousemove events.
+        // This is needed because the drag preview needs to be drawn or else it fires an 'mousemove' event
+        // immediately in some browsers.
+        //
+        // See:
+        //   * https://github.com/react-dnd/react-dnd/pull/928
+        //   * https://github.com/react-dnd/react-dnd/issues/869
+        //
+        this.mouseMoveTimeoutTimer = setTimeout(() => {
+            return this.rootElement?.addEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
+        }, MOUSE_MOVE_TIMEOUT);
+    }
+    clearCurrentDragSourceNode() {
+        if (this.currentDragSourceNode) {
+            this.currentDragSourceNode = null;
+            if (this.rootElement) {
+                this.window?.clearTimeout(this.mouseMoveTimeoutTimer || undefined);
+                this.rootElement.removeEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
+            }
+            this.mouseMoveTimeoutTimer = null;
+            return true;
+        }
+        return false;
+    }
+    handleTopDragStartCapture = () => {
+        this.clearCurrentDragSourceNode();
+        this.dragStartSourceIds = [];
+    };
+    handleDragStart(e, sourceId) {
+        if (e.defaultPrevented) {
+            return;
+        }
+        if (!this.dragStartSourceIds) {
+            this.dragStartSourceIds = [];
+        }
+        this.dragStartSourceIds.unshift(sourceId);
+    }
+    handleTopDragStart = (e) => {
+        if (e.defaultPrevented) {
+            return;
+        }
+        const { dragStartSourceIds } = this;
+        this.dragStartSourceIds = null;
+        const clientOffset = getEventClientOffset(e);
+        // Avoid crashing if we missed a drop event or our previous drag died
+        if (this.monitor.isDragging()) {
+            this.actions.endDrag();
+        }
+        // Don't publish the source just yet (see why below)
+        this.actions.beginDrag(dragStartSourceIds || [], {
+            publishSource: false,
+            getSourceClientOffset: this.getSourceClientOffset,
+            clientOffset,
+        });
+        const { dataTransfer } = e;
+        const nativeType = matchNativeItemType(dataTransfer);
+        if (this.monitor.isDragging()) {
+            if (dataTransfer && typeof dataTransfer.setDragImage === 'function') {
+                // Use custom drag image if user specifies it.
+                // If child drag source refuses drag but parent agrees,
+                // use parent's node as drag image. Neither works in IE though.
+                const sourceId = this.monitor.getSourceId();
+                const sourceNode = this.sourceNodes.get(sourceId);
+                const dragPreview = this.sourcePreviewNodes.get(sourceId) || sourceNode;
+                if (dragPreview) {
+                    const { anchorX, anchorY, offsetX, offsetY } = this.getCurrentSourcePreviewNodeOptions();
+                    const anchorPoint = { anchorX, anchorY };
+                    const offsetPoint = { offsetX, offsetY };
+                    const dragPreviewOffset = getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint);
+                    dataTransfer.setDragImage(dragPreview, dragPreviewOffset.x, dragPreviewOffset.y);
+                }
+            }
+            try {
+                // Firefox won't drag without setting data
+                dataTransfer?.setData('application/json', {});
+            }
+            catch (err) {
+                // IE doesn't support MIME types in setData
+            }
+            // Store drag source node so we can check whether
+            // it is removed from DOM and trigger endDrag manually.
+            this.setCurrentDragSourceNode(e.target);
+            // Now we are ready to publish the drag source.. or are we not?
+            const { captureDraggingState } = this.getCurrentSourcePreviewNodeOptions();
+            if (!captureDraggingState) {
+                // Usually we want to publish it in the next tick so that browser
+                // is able to screenshot the current (not yet dragging) state.
+                //
+                // It also neatly avoids a situation where render() returns null
+                // in the same tick for the source element, and browser freaks out.
+                setTimeout(() => this.actions.publishDragSource(), 0);
+            }
+            else {
+                // In some cases the user may want to override this behavior, e.g.
+                // to work around IE not supporting custom drag previews.
+                //
+                // When using a custom drag layer, the only way to prevent
+                // the default drag preview from drawing in IE is to screenshot
+                // the dragging state in which the node itself has zero opacity
+                // and height. In this case, though, returning null from render()
+                // will abruptly end the dragging, which is not obvious.
+                //
+                // This is the reason such behavior is strictly opt-in.
+                this.actions.publishDragSource();
+            }
+        }
+        else if (nativeType) {
+            // A native item (such as URL) dragged from inside the document
+            this.beginDragNativeItem(nativeType);
+        }
+        else if (dataTransfer &&
+            !dataTransfer.types &&
+            ((e.target && !e.target.hasAttribute) ||
+                !e.target.hasAttribute('draggable'))) {
+            // Looks like a Safari bug: dataTransfer.types is null, but there was no draggable.
+            // Just let it drag. It's a native type (URL or text) and will be picked up in
+            // dragenter handler.
+            return;
+        }
+        else {
+            // If by this time no drag source reacted, tell browser not to drag.
+            e.preventDefault();
+        }
+    };
+    handleTopDragEndCapture = () => {
+        if (this.clearCurrentDragSourceNode() && this.monitor.isDragging()) {
+            // Firefox can dispatch this event in an infinite loop
+            // if dragend handler does something like showing an alert.
+            // Only proceed if we have not handled it already.
+            this.actions.endDrag();
+        }
+    };
+    handleTopDragEnterCapture = (e) => {
+        this.dragEnterTargetIds = [];
+        const isFirstEnter = this.enterLeaveCounter.enter(e.target);
+        if (!isFirstEnter || this.monitor.isDragging()) {
+            return;
+        }
+        const { dataTransfer } = e;
+        const nativeType = matchNativeItemType(dataTransfer);
+        if (nativeType) {
+            // A native item (such as file or URL) dragged from outside the document
+            this.beginDragNativeItem(nativeType, dataTransfer);
+        }
+    };
+    handleDragEnter(e, targetId) {
+        this.dragEnterTargetIds.unshift(targetId);
+    }
+    handleTopDragEnter = (e) => {
+        const { dragEnterTargetIds } = this;
+        this.dragEnterTargetIds = [];
+        if (!this.monitor.isDragging()) {
+            // This is probably a native item type we don't understand.
+            return;
+        }
+        this.altKeyPressed = e.altKey;
+        // If the target changes position as the result of `dragenter`, `dragover` might still
+        // get dispatched despite target being no longer there. The easy solution is to check
+        // whether there actually is a target before firing `hover`.
+        if (dragEnterTargetIds.length > 0) {
+            this.actions.hover(dragEnterTargetIds, {
+                clientOffset: getEventClientOffset(e),
+            });
+        }
+        const canDrop = dragEnterTargetIds.some((targetId) => this.monitor.canDropOnTarget(targetId));
+        if (canDrop) {
+            // IE requires this to fire dragover events
+            e.preventDefault();
+            if (e.dataTransfer) {
+                e.dataTransfer.dropEffect = this.getCurrentDropEffect();
+            }
+        }
+    };
+    handleTopDragOverCapture = () => {
+        this.dragOverTargetIds = [];
+    };
+    handleDragOver(e, targetId) {
+        if (this.dragOverTargetIds === null) {
+            this.dragOverTargetIds = [];
+        }
+        this.dragOverTargetIds.unshift(targetId);
+    }
+    handleTopDragOver = (e) => {
+        const { dragOverTargetIds } = this;
+        this.dragOverTargetIds = [];
+        if (!this.monitor.isDragging()) {
+            // This is probably a native item type we don't understand.
+            // Prevent default "drop and blow away the whole document" action.
+            e.preventDefault();
+            if (e.dataTransfer) {
+                e.dataTransfer.dropEffect = 'none';
+            }
+            return;
+        }
+        this.altKeyPressed = e.altKey;
+        this.lastClientOffset = getEventClientOffset(e);
+        if (this.hoverRafId === null &&
+            typeof requestAnimationFrame !== 'undefined') {
+            this.hoverRafId = requestAnimationFrame(() => {
+                if (this.monitor.isDragging()) {
+                    this.actions.hover(dragOverTargetIds || [], {
+                        clientOffset: this.lastClientOffset,
+                    });
+                }
+                this.hoverRafId = null;
+            });
+        }
+        const canDrop = (dragOverTargetIds || []).some((targetId) => this.monitor.canDropOnTarget(targetId));
+        if (canDrop) {
+            // Show user-specified drop effect.
+            e.preventDefault();
+            if (e.dataTransfer) {
+                e.dataTransfer.dropEffect = this.getCurrentDropEffect();
+            }
+        }
+        else if (this.isDraggingNativeItem()) {
+            // Don't show a nice cursor but still prevent default
+            // "drop and blow away the whole document" action.
+            e.preventDefault();
+        }
+        else {
+            e.preventDefault();
+            if (e.dataTransfer) {
+                e.dataTransfer.dropEffect = 'none';
+            }
+        }
+    };
+    handleTopDragLeaveCapture = (e) => {
+        if (this.isDraggingNativeItem()) {
+            e.preventDefault();
+        }
+        const isLastLeave = this.enterLeaveCounter.leave(e.target);
+        if (!isLastLeave) {
+            return;
+        }
+        if (this.isDraggingNativeItem()) {
+            setTimeout(() => this.endDragNativeItem(), 0);
+        }
+    };
+    handleTopDropCapture = (e) => {
+        this.dropTargetIds = [];
+        if (this.isDraggingNativeItem()) {
+            e.preventDefault();
+            this.currentNativeSource?.loadDataTransfer(e.dataTransfer);
+        }
+        else if (matchNativeItemType(e.dataTransfer)) {
+            // Dragging some elements, like <a> and <img> may still behave like a native drag event,
+            // even if the current drag event matches a user-defined type.
+            // Stop the default behavior when we're not expecting a native item to be dropped.
+            e.preventDefault();
+        }
+        this.enterLeaveCounter.reset();
+    };
+    handleDrop(e, targetId) {
+        this.dropTargetIds.unshift(targetId);
+    }
+    handleTopDrop = (e) => {
+        const { dropTargetIds } = this;
+        this.dropTargetIds = [];
+        this.actions.hover(dropTargetIds, {
+            clientOffset: getEventClientOffset(e),
+        });
+        this.actions.drop({ dropEffect: this.getCurrentDropEffect() });
+        if (this.isDraggingNativeItem()) {
+            this.endDragNativeItem();
+        }
+        else if (this.monitor.isDragging()) {
+            this.actions.endDrag();
+        }
+    };
+    handleSelectStart = (e) => {
+        const target = e.target;
+        // Only IE requires us to explicitly say
+        // we want drag drop operation to start
+        if (typeof target.dragDrop !== 'function') {
+            return;
+        }
+        // Inputs and textareas should be selectable
+        if (target.tagName === 'INPUT' ||
+            target.tagName === 'SELECT' ||
+            target.tagName === 'TEXTAREA' ||
+            target.isContentEditable) {
+            return;
+        }
+        // For other targets, ask IE
+        // to enable drag and drop
+        e.preventDefault();
+        target.dragDrop();
+    };
+}

node_modules/react-dnd-html5-backend/lib/MonotonicInterpolant.d.ts

@@ -0,0 +1,9 @@
+export declare class MonotonicInterpolant {
+    private xs;
+    private ys;
+    private c1s;
+    private c2s;
+    private c3s;
+    constructor(xs: number[], ys: number[]);
+    interpolate(x: number): number;
+}

node_modules/react-dnd-html5-backend/lib/MonotonicInterpolant.js

@@ -0,0 +1,92 @@
+export class MonotonicInterpolant {
+    xs;
+    ys;
+    c1s;
+    c2s;
+    c3s;
+    constructor(xs, ys) {
+        const { length } = xs;
+        // Rearrange xs and ys so that xs is sorted
+        const indexes = [];
+        for (let i = 0; i < length; i++) {
+            indexes.push(i);
+        }
+        indexes.sort((a, b) => (xs[a] < xs[b] ? -1 : 1));
+        // Get consecutive differences and slopes
+        const dys = [];
+        const dxs = [];
+        const ms = [];
+        let dx;
+        let dy;
+        for (let i = 0; i < length - 1; i++) {
+            dx = xs[i + 1] - xs[i];
+            dy = ys[i + 1] - ys[i];
+            dxs.push(dx);
+            dys.push(dy);
+            ms.push(dy / dx);
+        }
+        // Get degree-1 coefficients
+        const c1s = [ms[0]];
+        for (let i = 0; i < dxs.length - 1; i++) {
+            const m2 = ms[i];
+            const mNext = ms[i + 1];
+            if (m2 * mNext <= 0) {
+                c1s.push(0);
+            }
+            else {
+                dx = dxs[i];
+                const dxNext = dxs[i + 1];
+                const common = dx + dxNext;
+                c1s.push((3 * common) / ((common + dxNext) / m2 + (common + dx) / mNext));
+            }
+        }
+        c1s.push(ms[ms.length - 1]);
+        // Get degree-2 and degree-3 coefficients
+        const c2s = [];
+        const c3s = [];
+        let m;
+        for (let i = 0; i < c1s.length - 1; i++) {
+            m = ms[i];
+            const c1 = c1s[i];
+            const invDx = 1 / dxs[i];
+            const common = c1 + c1s[i + 1] - m - m;
+            c2s.push((m - c1 - common) * invDx);
+            c3s.push(common * invDx * invDx);
+        }
+        this.xs = xs;
+        this.ys = ys;
+        this.c1s = c1s;
+        this.c2s = c2s;
+        this.c3s = c3s;
+    }
+    interpolate(x) {
+        const { xs, ys, c1s, c2s, c3s } = this;
+        // The rightmost point in the dataset should give an exact result
+        let i = xs.length - 1;
+        if (x === xs[i]) {
+            return ys[i];
+        }
+        // Search for the interval x is in, returning the corresponding y if x is one of the original xs
+        let low = 0;
+        let high = c3s.length - 1;
+        let mid;
+        while (low <= high) {
+            mid = Math.floor(0.5 * (low + high));
+            const xHere = xs[mid];
+            if (xHere < x) {
+                low = mid + 1;
+            }
+            else if (xHere > x) {
+                high = mid - 1;
+            }
+            else {
+                return ys[mid];
+            }
+        }
+        i = Math.max(0, high);
+        // Interpolate
+        const diff = x - xs[i];
+        const diffSq = diff * diff;
+        return ys[i] + c1s[i] * diff + c2s[i] * diffSq + c3s[i] * diff * diffSq;
+    }
+}

node_modules/react-dnd-html5-backend/lib/NativeDragSources/NativeDragSource.d.ts

@@ -0,0 +1,13 @@
+import { NativeItemConfig } from './nativeTypesConfig';
+import { DragDropMonitor } from 'dnd-core';
+export declare class NativeDragSource {
+    item: any;
+    private config;
+    constructor(config: NativeItemConfig);
+    private initializeExposedProperties;
+    loadDataTransfer(dataTransfer: DataTransfer | null | undefined): void;
+    canDrag(): boolean;
+    beginDrag(): any;
+    isDragging(monitor: DragDropMonitor, handle: string): boolean;
+    endDrag(): void;
+}

node_modules/react-dnd-html5-backend/lib/NativeDragSources/NativeDragSource.js

@@ -0,0 +1,47 @@
+export class NativeDragSource {
+    item;
+    config;
+    constructor(config) {
+        this.config = config;
+        this.item = {};
+        this.initializeExposedProperties();
+    }
+    initializeExposedProperties() {
+        Object.keys(this.config.exposeProperties).forEach((property) => {
+            Object.defineProperty(this.item, property, {
+                configurable: true,
+                enumerable: true,
+                get() {
+                    // eslint-disable-next-line no-console
+                    console.warn(`Browser doesn't allow reading "${property}" until the drop event.`);
+                    return null;
+                },
+            });
+        });
+    }
+    loadDataTransfer(dataTransfer) {
+        if (dataTransfer) {
+            const newProperties = {};
+            Object.keys(this.config.exposeProperties).forEach((property) => {
+                newProperties[property] = {
+                    value: this.config.exposeProperties[property](dataTransfer, this.config.matchesTypes),
+                    configurable: true,
+                    enumerable: true,
+                };
+            });
+            Object.defineProperties(this.item, newProperties);
+        }
+    }
+    canDrag() {
+        return true;
+    }
+    beginDrag() {
+        return this.item;
+    }
+    isDragging(monitor, handle) {
+        return handle === monitor.getSourceId();
+    }
+    endDrag() {
+        // empty
+    }
+}

node_modules/react-dnd-html5-backend/lib/NativeDragSources/getDataFromDataTransfer.d.ts

@@ -0,0 +1 @@
+export declare function getDataFromDataTransfer(dataTransfer: DataTransfer, typesToTry: string[], defaultValue: string): string;

node_modules/react-dnd-html5-backend/lib/NativeDragSources/getDataFromDataTransfer.js

@@ -0,0 +1,4 @@
+export function getDataFromDataTransfer(dataTransfer, typesToTry, defaultValue) {
+    const result = typesToTry.reduce((resultSoFar, typeToTry) => resultSoFar || dataTransfer.getData(typeToTry), '');
+    return result != null ? result : defaultValue;
+}

node_modules/react-dnd-html5-backend/lib/NativeDragSources/index.d.ts

@@ -0,0 +1,3 @@
+import { NativeDragSource } from './NativeDragSource';
+export declare function createNativeDragSource(type: string, dataTransfer?: DataTransfer): NativeDragSource;
+export declare function matchNativeItemType(dataTransfer: DataTransfer | null): string | null;

node_modules/react-dnd-html5-backend/lib/NativeDragSources/index.js

@@ -0,0 +1,17 @@
+import { nativeTypesConfig } from './nativeTypesConfig';
+import { NativeDragSource } from './NativeDragSource';
+export function createNativeDragSource(type, dataTransfer) {
+    const result = new NativeDragSource(nativeTypesConfig[type]);
+    result.loadDataTransfer(dataTransfer);
+    return result;
+}
+export function matchNativeItemType(dataTransfer) {
+    if (!dataTransfer) {
+        return null;
+    }
+    const dataTransferTypes = Array.prototype.slice.call(dataTransfer.types || []);
+    return (Object.keys(nativeTypesConfig).filter((nativeItemType) => {
+        const { matchesTypes } = nativeTypesConfig[nativeItemType];
+        return matchesTypes.some((t) => dataTransferTypes.indexOf(t) > -1);
+    })[0] || null);
+}

node_modules/react-dnd-html5-backend/lib/NativeDragSources/nativeTypesConfig.d.ts

@@ -0,0 +1,10 @@
+export interface NativeItemConfigExposePropreties {
+    [property: string]: (dataTransfer: DataTransfer, matchesTypes: string[]) => any;
+}
+export interface NativeItemConfig {
+    exposeProperties: NativeItemConfigExposePropreties;
+    matchesTypes: string[];
+}
+export declare const nativeTypesConfig: {
+    [key: string]: NativeItemConfig;
+};

node_modules/react-dnd-html5-backend/lib/NativeDragSources/nativeTypesConfig.js

@@ -0,0 +1,33 @@
+import * as NativeTypes from '../NativeTypes';
+import { getDataFromDataTransfer } from './getDataFromDataTransfer';
+export const nativeTypesConfig = {
+    [NativeTypes.FILE]: {
+        exposeProperties: {
+            files: (dataTransfer) => Array.prototype.slice.call(dataTransfer.files),
+            items: (dataTransfer) => dataTransfer.items,
+            dataTransfer: (dataTransfer) => dataTransfer,
+        },
+        matchesTypes: ['Files'],
+    },
+    [NativeTypes.HTML]: {
+        exposeProperties: {
+            html: (dataTransfer, matchesTypes) => getDataFromDataTransfer(dataTransfer, matchesTypes, ''),
+            dataTransfer: (dataTransfer) => dataTransfer,
+        },
+        matchesTypes: ['Html', 'text/html'],
+    },
+    [NativeTypes.URL]: {
+        exposeProperties: {
+            urls: (dataTransfer, matchesTypes) => getDataFromDataTransfer(dataTransfer, matchesTypes, '').split('\n'),
+            dataTransfer: (dataTransfer) => dataTransfer,
+        },
+        matchesTypes: ['Url', 'text/uri-list'],
+    },
+    [NativeTypes.TEXT]: {
+        exposeProperties: {
+            text: (dataTransfer, matchesTypes) => getDataFromDataTransfer(dataTransfer, matchesTypes, ''),
+            dataTransfer: (dataTransfer) => dataTransfer,
+        },
+        matchesTypes: ['Text', 'text/plain'],
+    },
+};

node_modules/react-dnd-html5-backend/lib/NativeTypes.d.ts

@@ -0,0 +1,4 @@
+export declare const FILE = "__NATIVE_FILE__";
+export declare const URL = "__NATIVE_URL__";
+export declare const TEXT = "__NATIVE_TEXT__";
+export declare const HTML = "__NATIVE_HTML__";

node_modules/react-dnd-html5-backend/lib/NativeTypes.js

@@ -0,0 +1,4 @@
+export const FILE = '__NATIVE_FILE__';
+export const URL = '__NATIVE_URL__';
+export const TEXT = '__NATIVE_TEXT__';
+export const HTML = '__NATIVE_HTML__';

node_modules/react-dnd-html5-backend/lib/OffsetUtils.d.ts

@@ -0,0 +1,10 @@
+import { XYCoord } from 'dnd-core';
+export declare function getNodeClientOffset(node: Node): XYCoord | null;
+export declare function getEventClientOffset(e: MouseEvent): XYCoord;
+export declare function getDragPreviewOffset(sourceNode: HTMLElement, dragPreview: HTMLElement, clientOffset: XYCoord, anchorPoint: {
+    anchorX: number;
+    anchorY: number;
+}, offsetPoint: {
+    offsetX: number;
+    offsetY: number;
+}): XYCoord;

node_modules/react-dnd-html5-backend/lib/OffsetUtils.js

@@ -0,0 +1,83 @@
+import { isSafari, isFirefox } from './BrowserDetector';
+import { MonotonicInterpolant } from './MonotonicInterpolant';
+const ELEMENT_NODE = 1;
+export function getNodeClientOffset(node) {
+    const el = node.nodeType === ELEMENT_NODE ? node : node.parentElement;
+    if (!el) {
+        return null;
+    }
+    const { top, left } = el.getBoundingClientRect();
+    return { x: left, y: top };
+}
+export function getEventClientOffset(e) {
+    return {
+        x: e.clientX,
+        y: e.clientY,
+    };
+}
+function isImageNode(node) {
+    return (node.nodeName === 'IMG' &&
+        (isFirefox() || !document.documentElement?.contains(node)));
+}
+function getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight) {
+    let dragPreviewWidth = isImage ? dragPreview.width : sourceWidth;
+    let dragPreviewHeight = isImage ? dragPreview.height : sourceHeight;
+    // Work around @2x coordinate discrepancies in browsers
+    if (isSafari() && isImage) {
+        dragPreviewHeight /= window.devicePixelRatio;
+        dragPreviewWidth /= window.devicePixelRatio;
+    }
+    return { dragPreviewWidth, dragPreviewHeight };
+}
+export function getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint) {
+    // The browsers will use the image intrinsic size under different conditions.
+    // Firefox only cares if it's an image, but WebKit also wants it to be detached.
+    const isImage = isImageNode(dragPreview);
+    const dragPreviewNode = isImage ? sourceNode : dragPreview;
+    const dragPreviewNodeOffsetFromClient = getNodeClientOffset(dragPreviewNode);
+    const offsetFromDragPreview = {
+        x: clientOffset.x - dragPreviewNodeOffsetFromClient.x,
+        y: clientOffset.y - dragPreviewNodeOffsetFromClient.y,
+    };
+    const { offsetWidth: sourceWidth, offsetHeight: sourceHeight } = sourceNode;
+    const { anchorX, anchorY } = anchorPoint;
+    const { dragPreviewWidth, dragPreviewHeight } = getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight);
+    const calculateYOffset = () => {
+        const interpolantY = new MonotonicInterpolant([0, 0.5, 1], [
+            // Dock to the top
+            offsetFromDragPreview.y,
+            // Align at the center
+            (offsetFromDragPreview.y / sourceHeight) * dragPreviewHeight,
+            // Dock to the bottom
+            offsetFromDragPreview.y + dragPreviewHeight - sourceHeight,
+        ]);
+        let y = interpolantY.interpolate(anchorY);
+        // Work around Safari 8 positioning bug
+        if (isSafari() && isImage) {
+            // We'll have to wait for @3x to see if this is entirely correct
+            y += (window.devicePixelRatio - 1) * dragPreviewHeight;
+        }
+        return y;
+    };
+    const calculateXOffset = () => {
+        // Interpolate coordinates depending on anchor point
+        // If you know a simpler way to do this, let me know
+        const interpolantX = new MonotonicInterpolant([0, 0.5, 1], [
+            // Dock to the left
+            offsetFromDragPreview.x,
+            // Align at the center
+            (offsetFromDragPreview.x / sourceWidth) * dragPreviewWidth,
+            // Dock to the right
+            offsetFromDragPreview.x + dragPreviewWidth - sourceWidth,
+        ]);
+        return interpolantX.interpolate(anchorX);
+    };
+    // Force offsets if specified in the options.
+    const { offsetX, offsetY } = offsetPoint;
+    const isManualOffsetX = offsetX === 0 || offsetX;
+    const isManualOffsetY = offsetY === 0 || offsetY;
+    return {
+        x: isManualOffsetX ? offsetX : calculateXOffset(),
+        y: isManualOffsetY ? offsetY : calculateYOffset(),
+    };
+}

node_modules/react-dnd-html5-backend/lib/OptionsReader.d.ts

@@ -0,0 +1,10 @@
+import { HTML5BackendContext, HTML5BackendOptions } from './types';
+export declare class OptionsReader {
+    ownerDocument: Document | null;
+    private globalContext;
+    private optionsArgs?;
+    constructor(globalContext: HTML5BackendContext, options?: HTML5BackendOptions);
+    get window(): Window | undefined;
+    get document(): Document | undefined;
+    get rootElement(): Node | undefined;
+}

node_modules/react-dnd-html5-backend/lib/OptionsReader.js

@@ -0,0 +1,32 @@
+export class OptionsReader {
+    ownerDocument = null;
+    globalContext;
+    optionsArgs;
+    constructor(globalContext, options) {
+        this.globalContext = globalContext;
+        this.optionsArgs = options;
+    }
+    get window() {
+        if (this.globalContext) {
+            return this.globalContext;
+        }
+        else if (typeof window !== 'undefined') {
+            return window;
+        }
+        return undefined;
+    }
+    get document() {
+        if (this.globalContext?.document) {
+            return this.globalContext.document;
+        }
+        else if (this.window) {
+            return this.window.document;
+        }
+        else {
+            return undefined;
+        }
+    }
+    get rootElement() {
+        return this.optionsArgs?.rootElement || this.window;
+    }
+}

node_modules/react-dnd-html5-backend/lib/getEmptyImage.d.ts

@@ -0,0 +1 @@
+export declare function getEmptyImage(): HTMLImageElement;

node_modules/react-dnd-html5-backend/lib/getEmptyImage.js

@@ -0,0 +1,9 @@
+let emptyImage;
+export function getEmptyImage() {
+    if (!emptyImage) {
+        emptyImage = new Image();
+        emptyImage.src =
+            'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+    }
+    return emptyImage;
+}

node_modules/react-dnd-html5-backend/lib/index.d.ts

@@ -0,0 +1,6 @@
+import * as NativeTypes from './NativeTypes';
+import { BackendFactory } from 'dnd-core';
+export { HTML5BackendContext, HTML5BackendOptions } from './types';
+export { getEmptyImage } from './getEmptyImage';
+export { NativeTypes };
+export declare const HTML5Backend: BackendFactory;

node_modules/react-dnd-html5-backend/lib/index.js

@@ -0,0 +1,7 @@
+import { HTML5BackendImpl } from './HTML5BackendImpl';
+import * as NativeTypes from './NativeTypes';
+export { getEmptyImage } from './getEmptyImage';
+export { NativeTypes };
+export const HTML5Backend = function createBackend(manager, context, options) {
+    return new HTML5BackendImpl(manager, context, options);
+};

node_modules/react-dnd-html5-backend/lib/matchesType.d.ts

@@ -0,0 +1,2 @@
+import { SourceType, TargetType } from 'dnd-core';
+export declare function matchesType(targetType: TargetType | null, draggedItemType: SourceType | null): boolean;

node_modules/react-dnd-html5-backend/lib/matchesType.js

@@ -0,0 +1,8 @@
+export function matchesType(targetType, draggedItemType) {
+    if (draggedItemType === null) {
+        return targetType === null;
+    }
+    return Array.isArray(targetType)
+        ? targetType.some((t) => t === draggedItemType)
+        : targetType === draggedItemType;
+}

node_modules/react-dnd-html5-backend/lib/types.d.ts

@@ -0,0 +1,10 @@
+export declare type HTML5BackendContext = Window | undefined;
+/**
+ * Configuration options for the HTML5Backend
+ */
+export interface HTML5BackendOptions {
+    /**
+     * The root DOM node to use for subscribing to events. Default=Window
+     */
+    rootElement: Node;
+}

node_modules/react-dnd-html5-backend/lib/types.js

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

node_modules/react-dnd-html5-backend/lib/utils/js_utils.d.ts

@@ -0,0 +1,6 @@
+export declare function memoize<T>(fn: () => T): () => T;
+/**
+ * drop-in replacement for _.without
+ */
+export declare function without<T>(items: T[], item: T): T[];
+export declare function union<T extends string | number>(itemsA: T[], itemsB: T[]): T[];

node_modules/react-dnd-html5-backend/lib/utils/js_utils.js

@@ -0,0 +1,26 @@
+// cheap lodash replacements
+export function memoize(fn) {
+    let result = null;
+    const memoized = () => {
+        if (result == null) {
+            result = fn();
+        }
+        return result;
+    };
+    return memoized;
+}
+/**
+ * drop-in replacement for _.without
+ */
+export function without(items, item) {
+    return items.filter((i) => i !== item);
+}
+export function union(itemsA, itemsB) {
+    const set = new Set();
+    const insertItem = (item) => set.add(item);
+    itemsA.forEach(insertItem);
+    itemsB.forEach(insertItem);
+    const result = [];
+    set.forEach((key) => result.push(key));
+    return result;
+}