react-arborist 3.2.0 → 3.3.1-0

package/dist/main/components/row-container.js

@@ -0,0 +1,84 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const context_1 = require("../context");
+const drag_hook_1 = require("../dnd/drag-hook");
+const drop_hook_1 = require("../dnd/drop-hook");
+const use_fresh_node_1 = require("../hooks/use-fresh-node");
+exports.RowContainer = react_1.default.memo(function RowContainer({ index, style, }) {
+    /* When will the <Row> will re-render.
+     *
+     * The row component is memo'd so it will only render
+     * when a new instance of the NodeApi class is passed
+     * to it.
+     *
+     * The TreeApi instance is stable. It does not
+     * change when the internal state changes.
+     *
+     * The TreeApi has all the references to the nodes.
+     * We need to clone the nodes when their state
+     * changes. The node class contains no state itself,
+     * It always checks the tree for state. The tree's
+     * state will always be up to date.
+     */
+    (0, context_1.useDataUpdates)(); // Re-render when tree props or visability changes
+    const _ = (0, context_1.useNodesContext)(); // So that we re-render appropriately
+    const tree = (0, context_1.useTreeApi)(); // Tree already has the fresh state
+    const node = (0, use_fresh_node_1.useFreshNode)(index);
+    const el = (0, react_1.useRef)(null);
+    const dragRef = (0, drag_hook_1.useDragHook)(node);
+    const dropRef = (0, drop_hook_1.useDropHook)(el, node);
+    const innerRef = (0, react_1.useCallback)((n) => {
+        el.current = n;
+        dropRef(n);
+    }, [dropRef]);
+    const indent = tree.indent * node.level;
+    const nodeStyle = (0, react_1.useMemo)(() => ({ paddingLeft: indent }), [indent]);
+    const rowStyle = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        return (Object.assign(Object.assign({}, style), { top: parseFloat(style.top) +
+                ((_b = (_a = tree.props.padding) !== null && _a !== void 0 ? _a : tree.props.paddingTop) !== null && _b !== void 0 ? _b : 0) }));
+    }, [style, tree.props.padding, tree.props.paddingTop]);
+    const rowAttrs = {
+        role: "treeitem",
+        "aria-level": node.level + 1,
+        "aria-selected": node.isSelected,
+        style: rowStyle,
+        tabIndex: -1,
+        className: tree.props.rowClassName,
+    };
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!node.isEditing && node.isFocused) {
+            (_a = el.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+        }
+    }, [node.isEditing, node.isFocused, el.current]);
+    const Node = tree.renderNode;
+    const Row = tree.renderRow;
+    return ((0, jsx_runtime_1.jsx)(Row, { node: node, innerRef: innerRef, attrs: rowAttrs, children: (0, jsx_runtime_1.jsx)(Node, { node: node, tree: tree, style: nodeStyle, dragHandle: dragRef }) }));
+});

package/dist/main/components/tree-container.d.ts

@@ -0,0 +1 @@
+export declare function TreeContainer(): import("react/jsx-runtime").JSX.Element;

package/dist/main/components/tree-container.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const context_1 = require("../context");
+const default_container_1 = require("./default-container");
+function TreeContainer() {
+    const tree = (0, context_1.useTreeApi)();
+    const Container = tree.props.renderContainer || default_container_1.DefaultContainer;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Container, {}) }));
+}
+exports.TreeContainer = TreeContainer;

package/dist/{components → main/components}/tree.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { TreeApi } from "../interfaces/tree-api";
 import { TreeProps } from "../types/tree-props";
-declare function TreeComponent<T>(props: TreeProps<T>, ref: React.Ref<TreeApi<T> | undefined>): JSX.Element;
+declare function TreeComponent<T>(props: TreeProps<T>, ref: React.Ref<TreeApi<T> | undefined>): import("react/jsx-runtime").JSX.Element;
 export declare const Tree: <T>(props: TreeProps<T> & {
     ref?: import("react").ForwardedRef<TreeApi<T> | undefined> | undefined;
 }) => ReturnType<typeof TreeComponent>;

package/dist/main/components/tree.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tree = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const provider_1 = require("./provider");
+const outer_drop_1 = require("./outer-drop");
+const tree_container_1 = require("./tree-container");
+const drag_preview_container_1 = require("./drag-preview-container");
+const use_validated_props_1 = require("../hooks/use-validated-props");
+function TreeComponent(props, ref) {
+    const treeProps = (0, use_validated_props_1.useValidatedProps)(props);
+    return ((0, jsx_runtime_1.jsxs)(provider_1.TreeProvider, { treeProps: treeProps, imperativeHandle: ref, children: [(0, jsx_runtime_1.jsx)(outer_drop_1.OuterDrop, { children: (0, jsx_runtime_1.jsx)(tree_container_1.TreeContainer, {}) }), (0, jsx_runtime_1.jsx)(drag_preview_container_1.DragPreviewContainer, {})] }));
+}
+exports.Tree = (0, react_1.forwardRef)(TreeComponent);

package/dist/{context.d.ts → main/context.d.ts}

@@ -2,20 +2,20 @@ import React from "react";
 import { TreeApi } from "./interfaces/tree-api";
 export declare const TreeApiContext: React.Context<TreeApi<any> | null>;
 export declare function useTreeApi<T>(): TreeApi<T>;
-export declare const NodesContext: React.Context<import("redux").CombinedState<{
+export declare const NodesContext: React.Context<{
     focus: import("./state/focus-slice").FocusState;
     edit: import("./state/edit-slice").EditState;
     open: import("./state/open-slice").OpenSlice;
     selection: import("./state/selection-slice").SelectionState;
     drag: import("./state/drag-slice").DragSlice;
-}> | null>;
-export declare function useNodesContext(): import("redux").CombinedState<{
+} | null>;
+export declare function useNodesContext(): {
     focus: import("./state/focus-slice").FocusState;
     edit: import("./state/edit-slice").EditState;
     open: import("./state/open-slice").OpenSlice;
     selection: import("./state/selection-slice").SelectionState;
     drag: import("./state/drag-slice").DragSlice;
-}>;
+};
 export declare const DndContext: React.Context<import("./state/dnd-slice").DndState | null>;
 export declare function useDndContext(): import("./state/dnd-slice").DndState;
 export declare const DataUpdatesContext: React.Context<number>;

package/dist/main/context.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataUpdates = exports.DataUpdatesContext = exports.useDndContext = exports.DndContext = exports.useNodesContext = exports.NodesContext = exports.useTreeApi = exports.TreeApiContext = void 0;
+const react_1 = require("react");
+exports.TreeApiContext = (0, react_1.createContext)(null);
+function useTreeApi() {
+    const value = (0, react_1.useContext)(exports.TreeApiContext);
+    if (value === null)
+        throw new Error("No Tree Api Provided");
+    return value;
+}
+exports.useTreeApi = useTreeApi;
+exports.NodesContext = (0, react_1.createContext)(null);
+function useNodesContext() {
+    const value = (0, react_1.useContext)(exports.NodesContext);
+    if (value === null)
+        throw new Error("Provide a NodesContext");
+    return value;
+}
+exports.useNodesContext = useNodesContext;
+exports.DndContext = (0, react_1.createContext)(null);
+function useDndContext() {
+    const value = (0, react_1.useContext)(exports.DndContext);
+    if (value === null)
+        throw new Error("Provide a DnDContext");
+    return value;
+}
+exports.useDndContext = useDndContext;
+exports.DataUpdatesContext = (0, react_1.createContext)(0);
+function useDataUpdates() {
+    (0, react_1.useContext)(exports.DataUpdatesContext);
+}
+exports.useDataUpdates = useDataUpdates;

package/dist/main/data/create-index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createIndex = void 0;
+const createIndex = (nodes) => {
+    return nodes.reduce((map, node, index) => {
+        map[node.id] = index;
+        return map;
+    }, {});
+};
+exports.createIndex = createIndex;

package/dist/main/data/create-list.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createList = void 0;
+function createList(tree) {
+    if (tree.isFiltered) {
+        return flattenAndFilterTree(tree.root, tree.isMatch.bind(tree));
+    }
+    else {
+        return flattenTree(tree.root);
+    }
+}
+exports.createList = createList;
+function flattenTree(root) {
+    const list = [];
+    function collect(node) {
+        var _a;
+        if (node.level >= 0) {
+            list.push(node);
+        }
+        if (node.isOpen) {
+            (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(collect);
+        }
+    }
+    collect(root);
+    list.forEach(assignRowIndex);
+    return list;
+}
+function flattenAndFilterTree(root, isMatch) {
+    const matches = {};
+    const list = [];
+    function markMatch(node) {
+        const yes = !node.isRoot && isMatch(node);
+        if (yes) {
+            matches[node.id] = true;
+            let parent = node.parent;
+            while (parent) {
+                matches[parent.id] = true;
+                parent = parent.parent;
+            }
+        }
+        if (node.children) {
+            for (let child of node.children)
+                markMatch(child);
+        }
+    }
+    function collect(node) {
+        var _a;
+        if (node.level >= 0 && matches[node.id]) {
+            list.push(node);
+        }
+        if (node.isOpen) {
+            (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(collect);
+        }
+    }
+    markMatch(root);
+    collect(root);
+    list.forEach(assignRowIndex);
+    return list;
+}
+function assignRowIndex(node, index) {
+    node.rowIndex = index;
+}

package/dist/main/data/create-root.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createRoot = exports.ROOT_ID = void 0;
+const node_api_1 = require("../interfaces/node-api");
+exports.ROOT_ID = "__REACT_ARBORIST_INTERNAL_ROOT__";
+function createRoot(tree) {
+    var _a;
+    function visitSelfAndChildren(data, level, parent) {
+        const id = tree.accessId(data);
+        const node = new node_api_1.NodeApi({
+            tree,
+            data,
+            level,
+            parent,
+            id,
+            children: null,
+            isDraggable: tree.isDraggable(data),
+            rowIndex: null,
+        });
+        const children = tree.accessChildren(data);
+        if (children) {
+            node.children = children.map((child) => visitSelfAndChildren(child, level + 1, node));
+        }
+        return node;
+    }
+    const root = new node_api_1.NodeApi({
+        tree,
+        id: exports.ROOT_ID,
+        // @ts-ignore
+        data: { id: exports.ROOT_ID },
+        level: -1,
+        parent: null,
+        children: null,
+        isDraggable: true,
+        rowIndex: null,
+    });
+    const data = (_a = tree.props.data) !== null && _a !== void 0 ? _a : [];
+    root.children = data.map((child) => {
+        return visitSelfAndChildren(child, 0, root);
+    });
+    return root;
+}
+exports.createRoot = createRoot;

package/dist/main/data/make-tree.d.ts

@@ -0,0 +1,5 @@
+export declare function makeTree(string: string): {
+    id: string;
+    name: string;
+    isOpen: boolean;
+};

package/dist/main/data/make-tree.js

@@ -0,0 +1,40 @@
+"use strict";
+// A function that turns a string of text into a tree
+// Each line is a node
+// The number of spaces at the beginning indicate the level
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeTree = void 0;
+function makeTree(string) {
+    const root = { id: "ROOT", name: "ROOT", isOpen: true };
+    let prevNode = root;
+    let prevLevel = -1;
+    let id = 1;
+    string.split("\n").forEach((line) => {
+        const name = line.trimStart();
+        const level = line.length - name.length;
+        const diff = level - prevLevel;
+        const node = { id: (id++).toString(), name, isOpen: false };
+        if (diff === 1) {
+            // First child
+            //@ts-ignore
+            node.parent = prevNode;
+            //@ts-ignore
+            prevNode.children = [node];
+        }
+        else {
+            // Find the parent and go up
+            //@ts-ignore
+            let parent = prevNode.parent;
+            for (let i = diff; i < 0; i++) {
+                parent = parent.parent;
+            }
+            //@ts-ignore
+            node.parent = parent;
+            parent.children.push(node);
+        }
+        prevNode = node;
+        prevLevel = level;
+    });
+    return root;
+}
+exports.makeTree = makeTree;

package/dist/{data → main/data}/simple-tree.d.ts

@@ -1,4 +1,4 @@
-declare type SimpleData = {
+type SimpleData = {
     id: string;
     name: string;
     children?: SimpleData[];

package/dist/main/data/simple-tree.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleTree = void 0;
+class SimpleTree {
+    constructor(data) {
+        this.root = createRoot(data);
+    }
+    get data() {
+        var _a, _b;
+        return (_b = (_a = this.root.children) === null || _a === void 0 ? void 0 : _a.map((node) => node.data)) !== null && _b !== void 0 ? _b : [];
+    }
+    create(args) {
+        const parent = args.parentId ? this.find(args.parentId) : this.root;
+        if (!parent)
+            return null;
+        parent.addChild(args.data, args.index);
+    }
+    move(args) {
+        const src = this.find(args.id);
+        const parent = args.parentId ? this.find(args.parentId) : this.root;
+        if (!src || !parent)
+            return;
+        parent.addChild(src.data, args.index);
+        src.drop();
+    }
+    update(args) {
+        const node = this.find(args.id);
+        if (node)
+            node.update(args.changes);
+    }
+    drop(args) {
+        const node = this.find(args.id);
+        if (node)
+            node.drop();
+    }
+    find(id, node = this.root) {
+        if (!node)
+            return null;
+        if (node.id === id)
+            return node;
+        if (node.children) {
+            for (let child of node.children) {
+                const found = this.find(id, child);
+                if (found)
+                    return found;
+            }
+            return null;
+        }
+        return null;
+    }
+}
+exports.SimpleTree = SimpleTree;
+function createRoot(data) {
+    const root = new SimpleNode({ id: "ROOT" }, null);
+    root.children = data.map((d) => createNode(d, root));
+    return root;
+}
+function createNode(data, parent) {
+    const node = new SimpleNode(data, parent);
+    if (data.children)
+        node.children = data.children.map((d) => createNode(d, node));
+    return node;
+}
+class SimpleNode {
+    constructor(data, parent) {
+        this.data = data;
+        this.parent = parent;
+        this.id = data.id;
+    }
+    hasParent() {
+        return !!this.parent;
+    }
+    get childIndex() {
+        return this.hasParent() ? this.parent.children.indexOf(this) : -1;
+    }
+    addChild(data, index) {
+        var _a, _b;
+        const node = createNode(data, this);
+        this.children = (_a = this.children) !== null && _a !== void 0 ? _a : [];
+        this.children.splice(index, 0, node);
+        this.data.children = (_b = this.data.children) !== null && _b !== void 0 ? _b : [];
+        this.data.children.splice(index, 0, data);
+    }
+    removeChild(index) {
+        var _a, _b;
+        (_a = this.children) === null || _a === void 0 ? void 0 : _a.splice(index, 1);
+        (_b = this.data.children) === null || _b === void 0 ? void 0 : _b.splice(index, 1);
+    }
+    update(changes) {
+        if (this.hasParent()) {
+            const i = this.childIndex;
+            this.parent.addChild(Object.assign(Object.assign({}, this.data), changes), i);
+            this.drop();
+        }
+    }
+    drop() {
+        if (this.hasParent())
+            this.parent.removeChild(this.childIndex);
+    }
+}

package/dist/{dnd → main/dnd}/compute-drop.d.ts

@@ -1,7 +1,7 @@
 import { XYCoord } from "react-dnd";
 import { NodeApi } from "../interfaces/node-api";
 import { DropResult } from "./drop-hook";
-declare type Args = {
+type Args = {
     element: HTMLElement;
     offset: XYCoord;
     indent: number;
@@ -9,7 +9,7 @@ declare type Args = {
     prevNode: NodeApi | null;
     nextNode: NodeApi | null;
 };
-export declare type ComputedDrop = {
+export type ComputedDrop = {
     drop: DropResult | null;
     cursor: Cursor | null;
 };
@@ -25,10 +25,10 @@ declare function highlightCursor(id: string): {
     type: "highlight";
     id: string;
 };
-export declare type LineCursor = ReturnType<typeof lineCursor>;
-export declare type NoCursor = ReturnType<typeof noCursor>;
-export declare type HighlightCursor = ReturnType<typeof highlightCursor>;
-export declare type Cursor = LineCursor | NoCursor | HighlightCursor;
+export type LineCursor = ReturnType<typeof lineCursor>;
+export type NoCursor = ReturnType<typeof noCursor>;
+export type HighlightCursor = ReturnType<typeof highlightCursor>;
+export type Cursor = LineCursor | NoCursor | HighlightCursor;
 /**
  * This is the most complex, tricky function in the whole repo.
  * It could be simplified and made more understandable.

package/dist/main/dnd/compute-drop.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computeDrop = void 0;
+const utils_1 = require("../utils");
+function measureHover(el, offset) {
+    const rect = el.getBoundingClientRect();
+    const x = offset.x - Math.round(rect.x);
+    const y = offset.y - Math.round(rect.y);
+    const height = rect.height;
+    const inTopHalf = y < height / 2;
+    const inBottomHalf = !inTopHalf;
+    const pad = height / 4;
+    const inMiddle = y > pad && y < height - pad;
+    const atTop = !inMiddle && inTopHalf;
+    const atBottom = !inMiddle && inBottomHalf;
+    return { x, inTopHalf, inBottomHalf, inMiddle, atTop, atBottom };
+}
+function getNodesAroundCursor(node, prev, next, hover) {
+    if (!node) {
+        // We're hovering over the empty part of the list, not over an item,
+        // Put the cursor below the last item which is "prev"
+        return [prev, null];
+    }
+    if (node.isInternal) {
+        if (hover.atTop) {
+            return [prev, node];
+        }
+        else if (hover.inMiddle) {
+            return [node, node];
+        }
+        else {
+            return [node, next];
+        }
+    }
+    else {
+        if (hover.inTopHalf) {
+            return [prev, node];
+        }
+        else {
+            return [node, next];
+        }
+    }
+}
+function getDropLevel(hovering, aboveCursor, belowCursor, indent) {
+    const hoverLevel = Math.round(Math.max(0, hovering.x - indent) / indent);
+    let min, max;
+    if (!aboveCursor) {
+        max = 0;
+        min = 0;
+    }
+    else if (!belowCursor) {
+        max = aboveCursor.level;
+        min = 0;
+    }
+    else {
+        max = aboveCursor.level;
+        min = belowCursor.level;
+    }
+    return (0, utils_1.bound)(hoverLevel, min, max);
+}
+function dropAt(parentId, index) {
+    return { parentId: parentId || null, index };
+}
+function lineCursor(index, level) {
+    return {
+        type: "line",
+        index,
+        level,
+    };
+}
+function noCursor() {
+    return {
+        type: "none",
+    };
+}
+function highlightCursor(id) {
+    return {
+        type: "highlight",
+        id,
+    };
+}
+function walkUpFrom(node, level) {
+    var _a;
+    let drop = node;
+    while (drop.parent && drop.level > level) {
+        drop = drop.parent;
+    }
+    const parentId = ((_a = drop.parent) === null || _a === void 0 ? void 0 : _a.id) || null;
+    const index = (0, utils_1.indexOf)(drop) + 1;
+    return { parentId, index };
+}
+/**
+ * This is the most complex, tricky function in the whole repo.
+ * It could be simplified and made more understandable.
+ */
+function computeDrop(args) {
+    var _a;
+    const hover = measureHover(args.element, args.offset);
+    const { node, nextNode, prevNode } = args;
+    const [above, below] = getNodesAroundCursor(node, prevNode, nextNode, hover);
+    /* Hovering over the middle of a folder */
+    if (node && node.isInternal && hover.inMiddle) {
+        return {
+            drop: dropAt(node.id, null),
+            cursor: highlightCursor(node.id),
+        };
+    }
+    /* At the top of the list */
+    if (!above) {
+        return {
+            drop: dropAt((_a = below === null || below === void 0 ? void 0 : below.parent) === null || _a === void 0 ? void 0 : _a.id, 0),
+            cursor: lineCursor(0, 0),
+        };
+    }
+    /* The above node is an item or a closed folder */
+    if ((0, utils_1.isItem)(above) || (0, utils_1.isClosed)(above)) {
+        const level = getDropLevel(hover, above, below, args.indent);
+        return {
+            drop: walkUpFrom(above, level),
+            cursor: lineCursor(above.rowIndex + 1, level),
+        };
+    }
+    /* The above node is an open folder */
+    return {
+        drop: dropAt(above === null || above === void 0 ? void 0 : above.id, 0),
+        cursor: lineCursor(above.rowIndex + 1, above.level + 1),
+    };
+}
+exports.computeDrop = computeDrop;

package/dist/main/dnd/drag-hook.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDragHook = void 0;
+const react_1 = require("react");
+const react_dnd_1 = require("react-dnd");
+const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
+const context_1 = require("../context");
+const dnd_slice_1 = require("../state/dnd-slice");
+const utils_1 = require("../utils");
+const create_root_1 = require("../data/create-root");
+function useDragHook(node) {
+    const tree = (0, context_1.useTreeApi)();
+    const ids = tree.selectedIds;
+    const [_, ref, preview] = (0, react_dnd_1.useDrag)(() => ({
+        canDrag: () => node.isDraggable,
+        type: "NODE",
+        item: () => {
+            // This is fired once at the begging of a drag operation
+            const dragIds = tree.isSelected(node.id) ? Array.from(ids) : [node.id];
+            tree.dispatch(dnd_slice_1.actions.dragStart(node.id, dragIds));
+            return { id: node.id };
+        },
+        end: () => {
+            tree.hideCursor();
+            let { parentId, index, dragIds } = tree.state.dnd;
+            // If they held down meta, we need to create a copy
+            // if (drop.dropEffect === "copy")
+            if (tree.canDrop()) {
+                (0, utils_1.safeRun)(tree.props.onMove, {
+                    dragIds,
+                    parentId: parentId === create_root_1.ROOT_ID ? null : parentId,
+                    index: index === null ? 0 : index, // When it's null it was dropped over a folder
+                    dragNodes: tree.dragNodes,
+                    parentNode: tree.get(parentId),
+                });
+                tree.open(parentId);
+            }
+            tree.dispatch(dnd_slice_1.actions.dragEnd());
+        },
+    }), [ids, node]);
+    (0, react_1.useEffect)(() => {
+        preview((0, react_dnd_html5_backend_1.getEmptyImage)());
+    }, [preview]);
+    return ref;
+}
+exports.useDragHook = useDragHook;