@rkmodules/rules 0.0.51 → 0.0.52

package/dist/index.cjs.js

@@ -3,7 +3,6 @@
 var mathjs = require('mathjs');
 var React = require('react');
 var react = require('@xyflow/react');
-var reactDnd = require('react-dnd');
 var katex = require('katex');
 var classNames = require('classnames');
 var rcin = require('rc-input-number');
@@ -1596,6 +1595,985 @@ var Engine = /** @class */ (function () {
     return Engine;
 }());
 
+/**
+ * Create the React Context
+ */ const DndContext = React.createContext({
+    dragDropManager: undefined
+});
+
+/**
+ * Use invariant() to assert state which your program assumes to be true.
+ *
+ * Provide sprintf-style format (only %s is supported) and arguments
+ * to provide information about what broke and what you were
+ * expecting.
+ *
+ * The invariant message will be stripped in production, but the invariant
+ * will remain to ensure logic does not differ in production.
+ */ function invariant(condition, format, ...args) {
+    if (isProduction()) {
+        if (format === undefined) {
+            throw new Error('invariant requires an error message argument');
+        }
+    }
+    if (!condition) {
+        let error;
+        if (format === undefined) {
+            error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
+        } else {
+            let argIndex = 0;
+            error = new Error(format.replace(/%s/g, function() {
+                return args[argIndex++];
+            }));
+            error.name = 'Invariant Violation';
+        }
+        error.framesToPop = 1 // we don't care about invariant's own frame
+        ;
+        throw error;
+    }
+}
+function isProduction() {
+    return typeof process !== 'undefined' && process.env['NODE_ENV'] === 'production';
+}
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var fastDeepEqual;
+var hasRequiredFastDeepEqual;
+
+function requireFastDeepEqual () {
+	if (hasRequiredFastDeepEqual) return fastDeepEqual;
+	hasRequiredFastDeepEqual = 1;
+
+	// do not edit .js files directly - edit src/index.jst
+
+
+
+	fastDeepEqual = function equal(a, b) {
+	  if (a === b) return true;
+
+	  if (a && b && typeof a == 'object' && typeof b == 'object') {
+	    if (a.constructor !== b.constructor) return false;
+
+	    var length, i, keys;
+	    if (Array.isArray(a)) {
+	      length = a.length;
+	      if (length != b.length) return false;
+	      for (i = length; i-- !== 0;)
+	        if (!equal(a[i], b[i])) return false;
+	      return true;
+	    }
+
+
+
+	    if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
+	    if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
+	    if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+
+	    keys = Object.keys(a);
+	    length = keys.length;
+	    if (length !== Object.keys(b).length) return false;
+
+	    for (i = length; i-- !== 0;)
+	      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+
+	    for (i = length; i-- !== 0;) {
+	      var key = keys[i];
+
+	      if (!equal(a[key], b[key])) return false;
+	    }
+
+	    return true;
+	  }
+
+	  // true if both NaN, false otherwise
+	  return a!==a && b!==b;
+	};
+	return fastDeepEqual;
+}
+
+var fastDeepEqualExports = requireFastDeepEqual();
+var equal = /*@__PURE__*/getDefaultExportFromCjs(fastDeepEqualExports);
+
+// suppress the useLayoutEffect warning on server side.
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+/**
+ *
+ * @param monitor The monitor to collect state from
+ * @param collect The collecting function
+ * @param onUpdate A method to invoke when updates occur
+ */ function useCollector(monitor, collect, onUpdate) {
+    const [collected, setCollected] = React.useState(()=>collect(monitor)
+    );
+    const updateCollected = React.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
+    ];
+}
+
+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;
+}
+
+function useCollectedProps(collector, monitor, connector) {
+    return useMonitorOutput(monitor, collector || (()=>({})
+    ), ()=>connector.reconnect()
+    );
+}
+
+function useOptionalFactory(arg, deps) {
+    const memoDeps = [
+        ...[]
+    ];
+    if (typeof arg !== 'function') {
+        memoDeps.push(arg);
+    }
+    return React.useMemo(()=>{
+        return typeof arg === 'function' ? arg() : arg;
+    }, memoDeps);
+}
+
+function useConnectDragSource(connector) {
+    return React.useMemo(()=>connector.hooks.dragSource()
+    , [
+        connector
+    ]);
+}
+function useConnectDragPreview(connector) {
+    return React.useMemo(()=>connector.hooks.dragPreview()
+    , [
+        connector
+    ]);
+}
+
+let isCallingCanDrag = false;
+let isCallingIsDragging = false;
+class DragSourceMonitorImpl {
+    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();
+    }
+    constructor(manager){
+        this.sourceId = null;
+        this.internalMonitor = manager.getMonitor();
+    }
+}
+
+let isCallingCanDrop = false;
+class DropTargetMonitorImpl {
+    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();
+    }
+    constructor(manager){
+        this.targetId = null;
+        this.internalMonitor = manager.getMonitor();
+    }
+}
+
+function registerTarget(type, target, manager) {
+    const registry = manager.getRegistry();
+    const targetId = registry.addTarget(type, target);
+    return [
+        targetId,
+        ()=>registry.removeTarget(targetId)
+    ];
+}
+function registerSource(type, source, manager) {
+    const registry = manager.getRegistry();
+    const sourceId = registry.addSource(type, source);
+    return [
+        sourceId,
+        ()=>registry.removeSource(sourceId)
+    ];
+}
+
+function shallowEqual(objA, objB, compare, compareContext) {
+    let compareResult = void 0;
+    if (compareResult !== void 0) {
+        return !!compareResult;
+    }
+    if (objA === objB) {
+        return true;
+    }
+    if (typeof objA !== 'object' || !objA || typeof objB !== 'object' || !objB) {
+        return false;
+    }
+    const keysA = Object.keys(objA);
+    const keysB = Object.keys(objB);
+    if (keysA.length !== keysB.length) {
+        return false;
+    }
+    const bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);
+    // Test for A's keys different from B.
+    for(let idx = 0; idx < keysA.length; idx++){
+        const key = keysA[idx];
+        if (!bHasOwnProperty(key)) {
+            return false;
+        }
+        const valueA = objA[key];
+        const valueB = objB[key];
+        compareResult = void 0;
+        if (compareResult === false || compareResult === void 0 && valueA !== valueB) {
+            return false;
+        }
+    }
+    return true;
+}
+
+function isRef(obj) {
+    return(// eslint-disable-next-line no-prototype-builtins
+    obj !== null && typeof obj === 'object' && Object.prototype.hasOwnProperty.call(obj, 'current'));
+}
+
+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 (!React.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);
+    };
+}
+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 React.cloneElement(element, {
+            ref: newRef
+        });
+    } else {
+        return React.cloneElement(element, {
+            ref: (node)=>{
+                setRef(previousRef, node);
+                setRef(newRef, node);
+            }
+        });
+    }
+}
+
+class SourceConnector {
+    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() {
+        const didChange = this.reconnectDragSource();
+        this.reconnectDragPreview(didChange);
+    }
+    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 didChange;
+        }
+        if (!dragSource) {
+            this.lastConnectedDragSource = dragSource;
+            return didChange;
+        }
+        if (didChange) {
+            this.lastConnectedHandlerId = this.handlerId;
+            this.lastConnectedDragSource = dragSource;
+            this.lastConnectedDragSourceOptions = this.dragSourceOptions;
+            this.dragSourceUnsubscribe = this.backend.connectDragSource(this.handlerId, dragSource, this.dragSourceOptions);
+        }
+        return didChange;
+    }
+    reconnectDragPreview(forceDidChange = false) {
+        const dragPreview = this.dragPreview;
+        // if nothing has changed then don't resubscribe
+        const didChange = forceDidChange || 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;
+    }
+    constructor(backend){
+        this.hooks = wrapConnectorHooks({
+            dragSource: (node, options)=>{
+                this.clearDragSource();
+                this.dragSourceOptions = options || null;
+                if (isRef(node)) {
+                    this.dragSourceRef = node;
+                } else {
+                    this.dragSourceNode = node;
+                }
+                this.reconnectDragSource();
+            },
+            dragPreview: (node, options)=>{
+                this.clearDragPreview();
+                this.dragPreviewOptions = options || null;
+                if (isRef(node)) {
+                    this.dragPreviewRef = node;
+                } else {
+                    this.dragPreviewNode = node;
+                }
+                this.reconnectDragPreview();
+            }
+        });
+        this.handlerId = null;
+        // The drop target may either be attached via ref or connect function
+        this.dragSourceRef = null;
+        this.dragSourceOptionsInternal = null;
+        // The drag preview may either be attached via ref or connect function
+        this.dragPreviewRef = null;
+        this.dragPreviewOptionsInternal = null;
+        this.lastConnectedHandlerId = null;
+        this.lastConnectedDragSource = null;
+        this.lastConnectedDragSourceOptions = null;
+        this.lastConnectedDragPreview = null;
+        this.lastConnectedDragPreviewOptions = null;
+        this.backend = backend;
+    }
+}
+
+class TargetConnector {
+    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;
+    }
+    constructor(backend){
+        this.hooks = wrapConnectorHooks({
+            dropTarget: (node, options)=>{
+                this.clearDropTarget();
+                this.dropTargetOptions = options;
+                if (isRef(node)) {
+                    this.dropTargetRef = node;
+                } else {
+                    this.dropTargetNode = node;
+                }
+                this.reconnect();
+            }
+        });
+        this.handlerId = null;
+        // The drop target may either be attached via ref or connect function
+        this.dropTargetRef = null;
+        this.dropTargetOptionsInternal = null;
+        this.lastConnectedHandlerId = null;
+        this.lastConnectedDropTarget = null;
+        this.lastConnectedDropTargetOptions = null;
+        this.backend = backend;
+    }
+}
+
+/**
+ * A hook to retrieve the DragDropManager from Context
+ */ function useDragDropManager() {
+    const { dragDropManager  } = React.useContext(DndContext);
+    invariant(dragDropManager != null, 'Expected drag drop context');
+    return dragDropManager;
+}
+
+function useDragSourceConnector(dragSourceOptions, dragPreviewOptions) {
+    const manager = useDragDropManager();
+    const connector = React.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;
+}
+
+function useDragSourceMonitor() {
+    const manager = useDragDropManager();
+    return React.useMemo(()=>new DragSourceMonitorImpl(manager)
+    , [
+        manager
+    ]);
+}
+
+class DragSourceImpl {
+    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 && result !== void 0 ? 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();
+    }
+    constructor(spec, monitor, connector){
+        this.spec = spec;
+        this.monitor = monitor;
+        this.connector = connector;
+    }
+}
+
+function useDragSource(spec, monitor, connector) {
+    const handler = React.useMemo(()=>new DragSourceImpl(spec, monitor, connector)
+    , [
+        monitor,
+        connector
+    ]);
+    React.useEffect(()=>{
+        handler.spec = spec;
+    }, [
+        spec
+    ]);
+    return handler;
+}
+
+function useDragType(spec) {
+    return React.useMemo(()=>{
+        const result = spec.type;
+        invariant(result != null, 'spec.type must be defined');
+        return result;
+    }, [
+        spec
+    ]);
+}
+
+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;
+        }
+        return;
+    }, [
+        manager,
+        monitor,
+        connector,
+        handler,
+        itemType
+    ]);
+}
+
+/**
+ * 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
+ */ function useDrag(specArg, deps) {
+    const spec = useOptionalFactory(specArg);
+    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), 
+    ];
+}
+
+function useConnectDropTarget(connector) {
+    return React.useMemo(()=>connector.hooks.dropTarget()
+    , [
+        connector
+    ]);
+}
+
+function useDropTargetConnector(options) {
+    const manager = useDragDropManager();
+    const connector = React.useMemo(()=>new TargetConnector(manager.getBackend())
+    , [
+        manager
+    ]);
+    useIsomorphicLayoutEffect(()=>{
+        connector.dropTargetOptions = options || null;
+        connector.reconnect();
+        return ()=>connector.disconnectDropTarget()
+        ;
+    }, [
+        options
+    ]);
+    return connector;
+}
+
+function useDropTargetMonitor() {
+    const manager = useDragDropManager();
+    return React.useMemo(()=>new DropTargetMonitorImpl(manager)
+    , [
+        manager
+    ]);
+}
+
+/**
+ * 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
+ */ function useAccept(spec) {
+    const { accept  } = spec;
+    return React.useMemo(()=>{
+        invariant(spec.accept != null, 'accept must be defined');
+        return Array.isArray(accept) ? accept : [
+            accept
+        ];
+    }, [
+        accept
+    ]);
+}
+
+class DropTargetImpl {
+    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);
+        }
+        return;
+    }
+    constructor(spec, monitor){
+        this.spec = spec;
+        this.monitor = monitor;
+    }
+}
+
+function useDropTarget(spec, monitor) {
+    const dropTarget = React.useMemo(()=>new DropTargetImpl(spec, monitor)
+    , [
+        monitor
+    ]);
+    React.useEffect(()=>{
+        dropTarget.spec = spec;
+    }, [
+        spec
+    ]);
+    return dropTarget;
+}
+
+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('|'), 
+    ]);
+}
+
+/**
+ * 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
+ */ function useDrop(specArg, deps) {
+    const spec = useOptionalFactory(specArg);
+    const monitor = useDropTargetMonitor();
+    const connector = useDropTargetConnector(spec.options);
+    useRegisteredDropTarget(spec, monitor, connector);
+    return [
+        useCollectedProps(spec.collect, monitor, connector),
+        useConnectDropTarget(connector), 
+    ];
+}
+
 var dummyEngine = new Engine();
 var FlowContext = React.createContext({
     engine: dummyEngine,
@@ -2168,7 +3146,7 @@ function FlowInner(_a) {
         onChange: handleSelect,
     });
     // dropping nodes
-    var _e = __read(reactDnd.useDrop({
+    var _e = __read(useDrop({
         accept: "flow-node",
         drop: function (item, monitor) {
             var pos = monitor.getClientOffset();
@@ -2259,7 +3237,7 @@ function Flow(_a) {
 }
 
 function useDraggableNode(name, fn) {
-    var _a = __read(reactDnd.useDrag({
+    var _a = __read(useDrag({
         type: "flow-node",
         item: { name: name, fn: fn },
         collect: function (monitor) { return ({