planning

node_modules/react-dnd/lib/internals/DragSourceMonitorImpl.d.ts

@@ -0,0 +1,33 @@
+import { DragDropManager, Unsubscribe, Listener, Identifier, XYCoord } from 'dnd-core';
+import { DragSourceMonitor } from '../types';
+export declare class DragSourceMonitorImpl implements DragSourceMonitor {
+    private internalMonitor;
+    private sourceId;
+    constructor(manager: DragDropManager);
+    receiveHandlerId(sourceId: Identifier | null): void;
+    getHandlerId(): Identifier | null;
+    canDrag(): boolean;
+    isDragging(): boolean;
+    subscribeToStateChange(listener: Listener, options?: {
+        handlerIds: Identifier[] | undefined;
+    }): Unsubscribe;
+    isDraggingSource(sourceId: Identifier): boolean;
+    isOverTarget(targetId: Identifier, options?: {
+        shallow: boolean;
+    }): boolean;
+    getTargetIds(): Identifier[];
+    isSourcePublic(): boolean | null;
+    getSourceId(): Identifier | null;
+    subscribeToOffsetChange(listener: Listener): Unsubscribe;
+    canDragSource(sourceId: Identifier): boolean;
+    canDropOnTarget(targetId: Identifier): boolean;
+    getItemType(): Identifier | null;
+    getItem(): any;
+    getDropResult(): any;
+    didDrop(): boolean;
+    getInitialClientOffset(): XYCoord | null;
+    getInitialSourceClientOffset(): XYCoord | null;
+    getSourceClientOffset(): XYCoord | null;
+    getClientOffset(): XYCoord | null;
+    getDifferenceFromInitialOffset(): XYCoord | null;
+}

node_modules/react-dnd/lib/internals/DragSourceMonitorImpl.js

@@ -0,0 +1,95 @@
+import { invariant } from '@react-dnd/invariant';
+let isCallingCanDrag = false;
+let isCallingIsDragging = false;
+export class DragSourceMonitorImpl {
+    internalMonitor;
+    sourceId = null;
+    constructor(manager) {
+        this.internalMonitor = manager.getMonitor();
+    }
+    receiveHandlerId(sourceId) {
+        this.sourceId = sourceId;
+    }
+    getHandlerId() {
+        return this.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');
+        try {
+            isCallingCanDrag = true;
+            return this.internalMonitor.canDragSource(this.sourceId);
+        }
+        finally {
+            isCallingCanDrag = false;
+        }
+    }
+    isDragging() {
+        if (!this.sourceId) {
+            return false;
+        }
+        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 {
+            isCallingIsDragging = false;
+        }
+    }
+    subscribeToStateChange(listener, options) {
+        return this.internalMonitor.subscribeToStateChange(listener, options);
+    }
+    isDraggingSource(sourceId) {
+        return this.internalMonitor.isDraggingSource(sourceId);
+    }
+    isOverTarget(targetId, options) {
+        return this.internalMonitor.isOverTarget(targetId, options);
+    }
+    getTargetIds() {
+        return this.internalMonitor.getTargetIds();
+    }
+    isSourcePublic() {
+        return this.internalMonitor.isSourcePublic();
+    }
+    getSourceId() {
+        return this.internalMonitor.getSourceId();
+    }
+    subscribeToOffsetChange(listener) {
+        return this.internalMonitor.subscribeToOffsetChange(listener);
+    }
+    canDragSource(sourceId) {
+        return this.internalMonitor.canDragSource(sourceId);
+    }
+    canDropOnTarget(targetId) {
+        return this.internalMonitor.canDropOnTarget(targetId);
+    }
+    getItemType() {
+        return this.internalMonitor.getItemType();
+    }
+    getItem() {
+        return this.internalMonitor.getItem();
+    }
+    getDropResult() {
+        return this.internalMonitor.getDropResult();
+    }
+    didDrop() {
+        return this.internalMonitor.didDrop();
+    }
+    getInitialClientOffset() {
+        return this.internalMonitor.getInitialClientOffset();
+    }
+    getInitialSourceClientOffset() {
+        return this.internalMonitor.getInitialSourceClientOffset();
+    }
+    getSourceClientOffset() {
+        return this.internalMonitor.getSourceClientOffset();
+    }
+    getClientOffset() {
+        return this.internalMonitor.getClientOffset();
+    }
+    getDifferenceFromInitialOffset() {
+        return this.internalMonitor.getDifferenceFromInitialOffset();
+    }
+}

node_modules/react-dnd/lib/internals/DropTargetMonitorImpl.d.ts

@@ -0,0 +1,25 @@
+import { DragDropManager, Unsubscribe, Listener, Identifier, XYCoord } from 'dnd-core';
+import { DropTargetMonitor } from '../types';
+export declare class DropTargetMonitorImpl implements DropTargetMonitor {
+    private internalMonitor;
+    private targetId;
+    constructor(manager: DragDropManager);
+    receiveHandlerId(targetId: Identifier | null): void;
+    getHandlerId(): Identifier | null;
+    subscribeToStateChange(listener: Listener, options?: {
+        handlerIds: Identifier[] | undefined;
+    }): Unsubscribe;
+    canDrop(): boolean;
+    isOver(options?: {
+        shallow?: boolean;
+    }): boolean;
+    getItemType(): Identifier | null;
+    getItem(): any;
+    getDropResult(): any;
+    didDrop(): boolean;
+    getInitialClientOffset(): XYCoord | null;
+    getInitialSourceClientOffset(): XYCoord | null;
+    getSourceClientOffset(): XYCoord | null;
+    getClientOffset(): XYCoord | null;
+    getDifferenceFromInitialOffset(): XYCoord | null;
+}

node_modules/react-dnd/lib/internals/DropTargetMonitorImpl.js

@@ -0,0 +1,68 @@
+import { invariant } from '@react-dnd/invariant';
+let isCallingCanDrop = false;
+export class DropTargetMonitorImpl {
+    internalMonitor;
+    targetId = null;
+    constructor(manager) {
+        this.internalMonitor = manager.getMonitor();
+    }
+    receiveHandlerId(targetId) {
+        this.targetId = targetId;
+    }
+    getHandlerId() {
+        return this.targetId;
+    }
+    subscribeToStateChange(listener, options) {
+        return this.internalMonitor.subscribeToStateChange(listener, options);
+    }
+    canDrop() {
+        // Cut out early if the target id has not been set. This should prevent errors
+        // where the user has an older version of dnd-core like in
+        // https://github.com/react-dnd/react-dnd/issues/1310
+        if (!this.targetId) {
+            return false;
+        }
+        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 {
+            isCallingCanDrop = false;
+        }
+    }
+    isOver(options) {
+        if (!this.targetId) {
+            return false;
+        }
+        return this.internalMonitor.isOverTarget(this.targetId, options);
+    }
+    getItemType() {
+        return this.internalMonitor.getItemType();
+    }
+    getItem() {
+        return this.internalMonitor.getItem();
+    }
+    getDropResult() {
+        return this.internalMonitor.getDropResult();
+    }
+    didDrop() {
+        return this.internalMonitor.didDrop();
+    }
+    getInitialClientOffset() {
+        return this.internalMonitor.getInitialClientOffset();
+    }
+    getInitialSourceClientOffset() {
+        return this.internalMonitor.getInitialSourceClientOffset();
+    }
+    getSourceClientOffset() {
+        return this.internalMonitor.getSourceClientOffset();
+    }
+    getClientOffset() {
+        return this.internalMonitor.getClientOffset();
+    }
+    getDifferenceFromInitialOffset() {
+        return this.internalMonitor.getDifferenceFromInitialOffset();
+    }
+}

node_modules/react-dnd/lib/internals/SourceConnector.d.ts

@@ -0,0 +1,47 @@
+import { Backend, Identifier } from 'dnd-core';
+import { DragSourceOptions, DragPreviewOptions } from '../types';
+export interface Connector {
+    hooks: any;
+    connectTarget: any;
+    receiveHandlerId(handlerId: Identifier | null): void;
+    reconnect(): void;
+}
+export declare class SourceConnector implements Connector {
+    hooks: any;
+    private handlerId;
+    private dragSourceRef;
+    private dragSourceNode;
+    private dragSourceOptionsInternal;
+    private dragSourceUnsubscribe;
+    private dragPreviewRef;
+    private dragPreviewNode;
+    private dragPreviewOptionsInternal;
+    private dragPreviewUnsubscribe;
+    private lastConnectedHandlerId;
+    private lastConnectedDragSource;
+    private lastConnectedDragSourceOptions;
+    private lastConnectedDragPreview;
+    private lastConnectedDragPreviewOptions;
+    private readonly backend;
+    constructor(backend: Backend);
+    receiveHandlerId(newHandlerId: Identifier | null): void;
+    get connectTarget(): any;
+    get dragSourceOptions(): DragSourceOptions | null;
+    set dragSourceOptions(options: DragSourceOptions | null);
+    get dragPreviewOptions(): DragPreviewOptions | null;
+    set dragPreviewOptions(options: DragPreviewOptions | null);
+    reconnect(): void;
+    private reconnectDragSource;
+    private reconnectDragPreview;
+    private didHandlerIdChange;
+    private didConnectedDragSourceChange;
+    private didConnectedDragPreviewChange;
+    private didDragSourceOptionsChange;
+    private didDragPreviewOptionsChange;
+    disconnectDragSource(): void;
+    disconnectDragPreview(): void;
+    private get dragSource();
+    private get dragPreview();
+    private clearDragSource;
+    private clearDragPreview;
+}

node_modules/react-dnd/lib/internals/SourceConnector.js

@@ -0,0 +1,165 @@
+import { wrapConnectorHooks } from './wrapConnectorHooks';
+import { isRef } from './isRef';
+import { shallowEqual } from '@react-dnd/shallowequal';
+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) {
+        if (this.handlerId === newHandlerId) {
+            return;
+        }
+        this.handlerId = newHandlerId;
+        this.reconnect();
+    }
+    get connectTarget() {
+        return this.dragSource;
+    }
+    get dragSourceOptions() {
+        return this.dragSourceOptionsInternal;
+    }
+    set dragSourceOptions(options) {
+        this.dragSourceOptionsInternal = options;
+    }
+    get dragPreviewOptions() {
+        return this.dragPreviewOptionsInternal;
+    }
+    set dragPreviewOptions(options) {
+        this.dragPreviewOptionsInternal = options;
+    }
+    reconnect() {
+        this.reconnectDragSource();
+        this.reconnectDragPreview();
+    }
+    reconnectDragSource() {
+        const dragSource = this.dragSource;
+        // if nothing has changed then don't resubscribe
+        const didChange = this.didHandlerIdChange() ||
+            this.didConnectedDragSourceChange() ||
+            this.didDragSourceOptionsChange();
+        if (didChange) {
+            this.disconnectDragSource();
+        }
+        if (!this.handlerId) {
+            return;
+        }
+        if (!dragSource) {
+            this.lastConnectedDragSource = dragSource;
+            return;
+        }
+        if (didChange) {
+            this.lastConnectedHandlerId = this.handlerId;
+            this.lastConnectedDragSource = dragSource;
+            this.lastConnectedDragSourceOptions = this.dragSourceOptions;
+            this.dragSourceUnsubscribe = this.backend.connectDragSource(this.handlerId, dragSource, this.dragSourceOptions);
+        }
+    }
+    reconnectDragPreview() {
+        const dragPreview = this.dragPreview;
+        // if nothing has changed then don't resubscribe
+        const didChange = this.didHandlerIdChange() ||
+            this.didConnectedDragPreviewChange() ||
+            this.didDragPreviewOptionsChange();
+        if (didChange) {
+            this.disconnectDragPreview();
+        }
+        if (!this.handlerId) {
+            return;
+        }
+        if (!dragPreview) {
+            this.lastConnectedDragPreview = dragPreview;
+            return;
+        }
+        if (didChange) {
+            this.lastConnectedHandlerId = this.handlerId;
+            this.lastConnectedDragPreview = dragPreview;
+            this.lastConnectedDragPreviewOptions = this.dragPreviewOptions;
+            this.dragPreviewUnsubscribe = this.backend.connectDragPreview(this.handlerId, dragPreview, this.dragPreviewOptions);
+        }
+    }
+    didHandlerIdChange() {
+        return this.lastConnectedHandlerId !== this.handlerId;
+    }
+    didConnectedDragSourceChange() {
+        return this.lastConnectedDragSource !== this.dragSource;
+    }
+    didConnectedDragPreviewChange() {
+        return this.lastConnectedDragPreview !== this.dragPreview;
+    }
+    didDragSourceOptionsChange() {
+        return !shallowEqual(this.lastConnectedDragSourceOptions, this.dragSourceOptions);
+    }
+    didDragPreviewOptionsChange() {
+        return !shallowEqual(this.lastConnectedDragPreviewOptions, this.dragPreviewOptions);
+    }
+    disconnectDragSource() {
+        if (this.dragSourceUnsubscribe) {
+            this.dragSourceUnsubscribe();
+            this.dragSourceUnsubscribe = undefined;
+        }
+    }
+    disconnectDragPreview() {
+        if (this.dragPreviewUnsubscribe) {
+            this.dragPreviewUnsubscribe();
+            this.dragPreviewUnsubscribe = undefined;
+            this.dragPreviewNode = null;
+            this.dragPreviewRef = null;
+        }
+    }
+    get dragSource() {
+        return (this.dragSourceNode || (this.dragSourceRef && this.dragSourceRef.current));
+    }
+    get dragPreview() {
+        return (this.dragPreviewNode ||
+            (this.dragPreviewRef && this.dragPreviewRef.current));
+    }
+    clearDragSource() {
+        this.dragSourceNode = null;
+        this.dragSourceRef = null;
+    }
+    clearDragPreview() {
+        this.dragPreviewNode = null;
+        this.dragPreviewRef = null;
+    }
+}

node_modules/react-dnd/lib/internals/TargetConnector.d.ts

@@ -0,0 +1,27 @@
+import { Backend, Identifier } from 'dnd-core';
+import { Connector } from './SourceConnector';
+import { DropTargetOptions } from '../types';
+export declare class TargetConnector implements Connector {
+    hooks: any;
+    private handlerId;
+    private dropTargetRef;
+    private dropTargetNode;
+    private dropTargetOptionsInternal;
+    private unsubscribeDropTarget;
+    private lastConnectedHandlerId;
+    private lastConnectedDropTarget;
+    private lastConnectedDropTargetOptions;
+    private readonly backend;
+    constructor(backend: Backend);
+    get connectTarget(): any;
+    reconnect(): void;
+    receiveHandlerId(newHandlerId: Identifier | null): void;
+    get dropTargetOptions(): DropTargetOptions;
+    set dropTargetOptions(options: DropTargetOptions);
+    private didHandlerIdChange;
+    private didDropTargetChange;
+    private didOptionsChange;
+    disconnectDropTarget(): void;
+    private get dropTarget();
+    private clearDropTarget;
+}

node_modules/react-dnd/lib/internals/TargetConnector.js

@@ -0,0 +1,92 @@
+import { shallowEqual } from '@react-dnd/shallowequal';
+import { wrapConnectorHooks } from './wrapConnectorHooks';
+import { isRef } from './isRef';
+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() {
+        return this.dropTarget;
+    }
+    reconnect() {
+        // if nothing has changed then don't resubscribe
+        const didChange = this.didHandlerIdChange() ||
+            this.didDropTargetChange() ||
+            this.didOptionsChange();
+        if (didChange) {
+            this.disconnectDropTarget();
+        }
+        const dropTarget = this.dropTarget;
+        if (!this.handlerId) {
+            return;
+        }
+        if (!dropTarget) {
+            this.lastConnectedDropTarget = dropTarget;
+            return;
+        }
+        if (didChange) {
+            this.lastConnectedHandlerId = this.handlerId;
+            this.lastConnectedDropTarget = dropTarget;
+            this.lastConnectedDropTargetOptions = this.dropTargetOptions;
+            this.unsubscribeDropTarget = this.backend.connectDropTarget(this.handlerId, dropTarget, this.dropTargetOptions);
+        }
+    }
+    receiveHandlerId(newHandlerId) {
+        if (newHandlerId === this.handlerId) {
+            return;
+        }
+        this.handlerId = newHandlerId;
+        this.reconnect();
+    }
+    get dropTargetOptions() {
+        return this.dropTargetOptionsInternal;
+    }
+    set dropTargetOptions(options) {
+        this.dropTargetOptionsInternal = options;
+    }
+    didHandlerIdChange() {
+        return this.lastConnectedHandlerId !== this.handlerId;
+    }
+    didDropTargetChange() {
+        return this.lastConnectedDropTarget !== this.dropTarget;
+    }
+    didOptionsChange() {
+        return !shallowEqual(this.lastConnectedDropTargetOptions, this.dropTargetOptions);
+    }
+    disconnectDropTarget() {
+        if (this.unsubscribeDropTarget) {
+            this.unsubscribeDropTarget();
+            this.unsubscribeDropTarget = undefined;
+        }
+    }
+    get dropTarget() {
+        return (this.dropTargetNode || (this.dropTargetRef && this.dropTargetRef.current));
+    }
+    clearDropTarget() {
+        this.dropTargetRef = null;
+        this.dropTargetNode = null;
+    }
+}

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

@@ -0,0 +1,5 @@
+export * from './DragSourceMonitorImpl';
+export * from './DropTargetMonitorImpl';
+export * from './SourceConnector';
+export * from './TargetConnector';
+export * from './registration';

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

@@ -0,0 +1,5 @@
+export * from './DragSourceMonitorImpl';
+export * from './DropTargetMonitorImpl';
+export * from './SourceConnector';
+export * from './TargetConnector';
+export * from './registration';

node_modules/react-dnd/lib/internals/isRef.d.ts

@@ -0,0 +1,4 @@
+export interface Ref<T> {
+    current: T;
+}
+export declare function isRef(obj: unknown): boolean;

node_modules/react-dnd/lib/internals/isRef.js

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

node_modules/react-dnd/lib/internals/registration.d.ts

@@ -0,0 +1,3 @@
+import { DragDropManager, DropTarget, Unsubscribe, Identifier, TargetType, SourceType, DragSource } from 'dnd-core';
+export declare function registerTarget(type: TargetType, target: DropTarget, manager: DragDropManager): [Identifier, Unsubscribe];
+export declare function registerSource(type: SourceType, source: DragSource, manager: DragDropManager): [Identifier, Unsubscribe];

node_modules/react-dnd/lib/internals/registration.js

@@ -0,0 +1,10 @@
+export function registerTarget(type, target, manager) {
+    const registry = manager.getRegistry();
+    const targetId = registry.addTarget(type, target);
+    return [targetId, () => registry.removeTarget(targetId)];
+}
+export function registerSource(type, source, manager) {
+    const registry = manager.getRegistry();
+    const sourceId = registry.addSource(type, source);
+    return [sourceId, () => registry.removeSource(sourceId)];
+}

node_modules/react-dnd/lib/internals/wrapConnectorHooks.d.ts

@@ -0,0 +1 @@
+export declare function wrapConnectorHooks(hooks: any): any;

node_modules/react-dnd/lib/internals/wrapConnectorHooks.js

@@ -0,0 +1,76 @@
+import { invariant } from '@react-dnd/invariant';
+import { cloneElement, isValidElement } from 'react';
+function throwIfCompositeComponentElement(element) {
+    // Custom components can no longer be wrapped directly in React DnD 2.0
+    // so that we don't need to depend on findDOMNode() from react-dom.
+    if (typeof element.type === 'string') {
+        return;
+    }
+    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.');
+}
+function wrapHookToRecognizeElement(hook) {
+    return (elementOrNode = null, options = null) => {
+        // When passed a node, call the hook straight away.
+        if (!isValidElement(elementOrNode)) {
+            const node = elementOrNode;
+            hook(node, options);
+            // return the node so it can be chained (e.g. when within callback refs
+            // <div ref={node => connectDragSource(connectDropTarget(node))}/>
+            return node;
+        }
+        // If passed a ReactElement, clone it and attach this function as a ref.
+        // This helps us achieve a neat API where user doesn't even know that refs
+        // are being used under the hood.
+        const element = elementOrNode;
+        throwIfCompositeComponentElement(element);
+        // When no options are passed, use the hook directly
+        const ref = options ? (node) => hook(node, options) : hook;
+        return cloneWithRef(element, ref);
+    };
+}
+export function wrapConnectorHooks(hooks) {
+    const wrappedHooks = {};
+    Object.keys(hooks).forEach((key) => {
+        const hook = hooks[key];
+        // ref objects should be passed straight through without wrapping
+        if (key.endsWith('Ref')) {
+            wrappedHooks[key] = hooks[key];
+        }
+        else {
+            const wrappedHook = wrapHookToRecognizeElement(hook);
+            wrappedHooks[key] = () => wrappedHook;
+        }
+    });
+    return wrappedHooks;
+}
+function setRef(ref, node) {
+    if (typeof ref === 'function') {
+        ref(node);
+    }
+    else {
+        ref.current = node;
+    }
+}
+function cloneWithRef(element, newRef) {
+    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');
+    if (!previousRef) {
+        // When there is no ref on the element, use the new ref directly
+        return cloneElement(element, {
+            ref: newRef,
+        });
+    }
+    else {
+        return cloneElement(element, {
+            ref: (node) => {
+                setRef(previousRef, node);
+                setRef(newRef, node);
+            },
+        });
+    }
+}