react-arborist 3.2.0 → 3.3.1-0

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

@@ -1,8 +1,8 @@
 import { RefObject } from "react";
 import { ConnectDropTarget } from "react-dnd";
 import { NodeApi } from "../interfaces/node-api";
-export declare type DropResult = {
+export type DropResult = {
     parentId: string | null;
-    index: number;
+    index: number | null;
 };
 export declare function useDropHook(el: RefObject<HTMLElement | null>, node: NodeApi<any>): ConnectDropTarget;

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDropHook = void 0;
+const react_dnd_1 = require("react-dnd");
+const context_1 = require("../context");
+const compute_drop_1 = require("./compute-drop");
+const dnd_slice_1 = require("../state/dnd-slice");
+function useDropHook(el, node) {
+    const tree = (0, context_1.useTreeApi)();
+    const [_, dropRef] = (0, react_dnd_1.useDrop)(() => ({
+        accept: "NODE",
+        canDrop: () => tree.canDrop(),
+        hover: (_item, m) => {
+            const offset = m.getClientOffset();
+            if (!el.current || !offset)
+                return;
+            const { cursor, drop } = (0, compute_drop_1.computeDrop)({
+                element: el.current,
+                offset: offset,
+                indent: tree.indent,
+                node: node,
+                prevNode: node.prev,
+                nextNode: node.next,
+            });
+            if (drop)
+                tree.dispatch(dnd_slice_1.actions.hovering(drop.parentId, drop.index));
+            if (m.canDrop()) {
+                if (cursor)
+                    tree.showCursor(cursor);
+            }
+            else {
+                tree.hideCursor();
+            }
+        },
+        drop: (_, m) => {
+            if (!m.canDrop())
+                return null;
+        },
+    }), [node, el.current, tree.props]);
+    return dropRef;
+}
+exports.useDropHook = useDropHook;

package/dist/main/dnd/measure-hover.d.ts

@@ -0,0 +1,8 @@
+import { XYCoord } from "react-dnd";
+export declare function measureHover(el: HTMLElement, offset: XYCoord, indent: number): {
+    level: number;
+    inTopHalf: boolean;
+    inBottomHalf: boolean;
+    inMiddle: boolean;
+};
+export type HoverData = ReturnType<typeof measureHover>;

package/dist/main/dnd/measure-hover.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.measureHover = void 0;
+const utils_1 = require("../utils");
+function measureHover(el, offset, indent) {
+    const nextEl = el.nextElementSibling;
+    const prevEl = el.previousElementSibling;
+    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 maxLevel = Number(inBottomHalf ? el.dataset.level : prevEl ? prevEl.dataset.level : 0);
+    const minLevel = Number(inTopHalf ? el.dataset.level : nextEl ? nextEl.dataset.level : 0);
+    const level = (0, utils_1.bound)(Math.floor(x / indent), minLevel, maxLevel);
+    return { level, inTopHalf, inBottomHalf, inMiddle };
+}
+exports.measureHover = measureHover;

package/dist/main/dnd/outer-drop-hook.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOuterDrop = void 0;
+const react_dnd_1 = require("react-dnd");
+const context_1 = require("../context");
+const compute_drop_1 = require("./compute-drop");
+const dnd_slice_1 = require("../state/dnd-slice");
+function useOuterDrop() {
+    const tree = (0, context_1.useTreeApi)();
+    // In case we drop an item at the bottom of the list
+    const [, drop] = (0, react_dnd_1.useDrop)(() => ({
+        accept: "NODE",
+        canDrop: (_item, m) => {
+            if (!m.isOver({ shallow: true }))
+                return false;
+            return tree.canDrop();
+        },
+        hover: (_item, m) => {
+            if (!m.isOver({ shallow: true }))
+                return;
+            const offset = m.getClientOffset();
+            if (!tree.listEl.current || !offset)
+                return;
+            const { cursor, drop } = (0, compute_drop_1.computeDrop)({
+                element: tree.listEl.current,
+                offset: offset,
+                indent: tree.indent,
+                node: null,
+                prevNode: tree.visibleNodes[tree.visibleNodes.length - 1],
+                nextNode: null,
+            });
+            if (drop)
+                tree.dispatch(dnd_slice_1.actions.hovering(drop.parentId, drop.index));
+            if (m.canDrop()) {
+                if (cursor)
+                    tree.showCursor(cursor);
+            }
+            else {
+                tree.hideCursor();
+            }
+        },
+    }), [tree]);
+    drop(tree.listEl);
+}
+exports.useOuterDrop = useOuterDrop;

package/dist/main/hooks/use-fresh-node.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFreshNode = void 0;
+const react_1 = require("react");
+const context_1 = require("../context");
+function useFreshNode(index) {
+    const tree = (0, context_1.useTreeApi)();
+    const original = tree.at(index);
+    if (!original)
+        throw new Error(`Could not find node for index: ${index}`);
+    return (0, react_1.useMemo)(() => {
+        const fresh = original.clone();
+        tree.visibleNodes[index] = fresh; // sneaky
+        return fresh;
+        // Return a fresh instance if the state values change
+    }, [...Object.values(original.state), original]);
+}
+exports.useFreshNode = useFreshNode;

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

@@ -1,5 +1,5 @@
 import { CreateHandler, DeleteHandler, MoveHandler, RenameHandler } from "../types/handlers";
-export declare type SimpleTreeData = {
+export type SimpleTreeData = {
     id: string;
     name: string;
     children?: SimpleTreeData[];

package/dist/main/hooks/use-simple-tree.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSimpleTree = void 0;
+const react_1 = require("react");
+const simple_tree_1 = require("../data/simple-tree");
+let nextId = 0;
+function useSimpleTree(initialData) {
+    const [data, setData] = (0, react_1.useState)(initialData);
+    const tree = (0, react_1.useMemo)(() => new simple_tree_1.SimpleTree(data), [data]);
+    const onMove = (args) => {
+        for (const id of args.dragIds) {
+            tree.move({ id, parentId: args.parentId, index: args.index });
+        }
+        setData(tree.data);
+    };
+    const onRename = ({ name, id }) => {
+        tree.update({ id, changes: { name } });
+        setData(tree.data);
+    };
+    const onCreate = ({ parentId, index, type }) => {
+        const data = { id: `simple-tree-id-${nextId++}`, name: "" };
+        if (type === "internal")
+            data.children = [];
+        tree.create({ parentId, index, data });
+        setData(tree.data);
+        return data;
+    };
+    const onDelete = (args) => {
+        args.ids.forEach((id) => tree.drop({ id }));
+        setData(tree.data);
+    };
+    const controller = { onMove, onRename, onCreate, onDelete };
+    return [data, controller];
+}
+exports.useSimpleTree = useSimpleTree;

package/dist/main/hooks/use-validated-props.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useValidatedProps = void 0;
+const use_simple_tree_1 = require("./use-simple-tree");
+function useValidatedProps(props) {
+    if (props.initialData && props.data) {
+        throw new Error(`React Arborist Tree => Provide either a data or initialData prop, but not both.`);
+    }
+    if (props.initialData &&
+        (props.onCreate || props.onDelete || props.onMove || props.onRename)) {
+        throw new Error(`React Arborist Tree => You passed the initialData prop along with a data handler.
+Use the data prop if you want to provide your own handlers.`);
+    }
+    if (props.initialData) {
+        /**
+         * Let's break the rules of hooks here. If the initialData prop
+         * is provided, we will assume it will not change for the life of
+         * the component.
+         *
+         * We will provide the real data and the handlers to update it.
+         *   */
+        const [data, controller] = (0, use_simple_tree_1.useSimpleTree)(props.initialData);
+        return Object.assign(Object.assign(Object.assign({}, props), controller), { data });
+    }
+    else {
+        return props;
+    }
+}
+exports.useValidatedProps = useValidatedProps;

package/dist/main/index.js

@@ -0,0 +1,27 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tree = void 0;
+/* The Public Api */
+var tree_1 = require("./components/tree");
+Object.defineProperty(exports, "Tree", { enumerable: true, get: function () { return tree_1.Tree; } });
+__exportStar(require("./types/handlers"), exports);
+__exportStar(require("./types/renderers"), exports);
+__exportStar(require("./types/state"), exports);
+__exportStar(require("./interfaces/node-api"), exports);
+__exportStar(require("./interfaces/tree-api"), exports);
+__exportStar(require("./data/simple-tree"), exports);
+__exportStar(require("./hooks/use-simple-tree"), exports);

package/dist/{interfaces → main/interfaces}/node-api.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TreeApi } from "./tree-api";
-declare type Params<T> = {
+type Params<T> = {
     id: string;
     data: T;
     level: number;
@@ -51,6 +51,7 @@ export declare class NodeApi<T = any> {
     get next(): NodeApi<T> | null;
     get prev(): NodeApi<T> | null;
     get nextSibling(): NodeApi<T> | null;
+    isAncestorOf(node: NodeApi<T> | null): boolean;
     select(): void;
     deselect(): void;
     selectMulti(): void;

package/dist/main/interfaces/node-api.js

@@ -0,0 +1,164 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeApi = void 0;
+const create_root_1 = require("../data/create-root");
+class NodeApi {
+    constructor(params) {
+        this.handleClick = (e) => {
+            if (e.metaKey && !this.tree.props.disableMultiSelection) {
+                this.isSelected ? this.deselect() : this.selectMulti();
+            }
+            else if (e.shiftKey && !this.tree.props.disableMultiSelection) {
+                this.selectContiguous();
+            }
+            else {
+                this.select();
+                this.activate();
+            }
+        };
+        this.tree = params.tree;
+        this.id = params.id;
+        this.data = params.data;
+        this.level = params.level;
+        this.children = params.children;
+        this.parent = params.parent;
+        this.isDraggable = params.isDraggable;
+        this.rowIndex = params.rowIndex;
+    }
+    get isRoot() {
+        return this.id === create_root_1.ROOT_ID;
+    }
+    get isLeaf() {
+        return !Array.isArray(this.children);
+    }
+    get isInternal() {
+        return !this.isLeaf;
+    }
+    get isOpen() {
+        return this.isLeaf ? false : this.tree.isOpen(this.id);
+    }
+    get isClosed() {
+        return this.isLeaf ? false : !this.tree.isOpen(this.id);
+    }
+    get isEditable() {
+        return this.tree.isEditable(this.data);
+    }
+    get isEditing() {
+        return this.tree.editingId === this.id;
+    }
+    get isSelected() {
+        return this.tree.isSelected(this.id);
+    }
+    get isOnlySelection() {
+        return this.isSelected && this.tree.hasOneSelection;
+    }
+    get isSelectedStart() {
+        var _a;
+        return this.isSelected && !((_a = this.prev) === null || _a === void 0 ? void 0 : _a.isSelected);
+    }
+    get isSelectedEnd() {
+        var _a;
+        return this.isSelected && !((_a = this.next) === null || _a === void 0 ? void 0 : _a.isSelected);
+    }
+    get isFocused() {
+        return this.tree.isFocused(this.id);
+    }
+    get isDragging() {
+        return this.tree.isDragging(this.id);
+    }
+    get willReceiveDrop() {
+        return this.tree.willReceiveDrop(this.id);
+    }
+    get state() {
+        return {
+            isClosed: this.isClosed,
+            isDragging: this.isDragging,
+            isEditing: this.isEditing,
+            isFocused: this.isFocused,
+            isInternal: this.isInternal,
+            isLeaf: this.isLeaf,
+            isOpen: this.isOpen,
+            isSelected: this.isSelected,
+            isSelectedEnd: this.isSelectedEnd,
+            isSelectedStart: this.isSelectedStart,
+            willReceiveDrop: this.willReceiveDrop,
+        };
+    }
+    get childIndex() {
+        if (this.parent && this.parent.children) {
+            return this.parent.children.findIndex((child) => child.id === this.id);
+        }
+        else {
+            return -1;
+        }
+    }
+    get next() {
+        if (this.rowIndex === null)
+            return null;
+        return this.tree.at(this.rowIndex + 1);
+    }
+    get prev() {
+        if (this.rowIndex === null)
+            return null;
+        return this.tree.at(this.rowIndex - 1);
+    }
+    get nextSibling() {
+        var _a, _b;
+        const i = this.childIndex;
+        return (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.children[i + 1]) !== null && _b !== void 0 ? _b : null;
+    }
+    isAncestorOf(node) {
+        if (!node)
+            return false;
+        let ancestor = node;
+        while (ancestor) {
+            if (ancestor.id === this.id)
+                return true;
+            ancestor = ancestor.parent;
+        }
+        return false;
+    }
+    select() {
+        this.tree.select(this);
+    }
+    deselect() {
+        this.tree.deselect(this);
+    }
+    selectMulti() {
+        this.tree.selectMulti(this);
+    }
+    selectContiguous() {
+        this.tree.selectContiguous(this);
+    }
+    activate() {
+        this.tree.activate(this);
+    }
+    focus() {
+        this.tree.focus(this);
+    }
+    toggle() {
+        this.tree.toggle(this);
+    }
+    open() {
+        this.tree.open(this);
+    }
+    openParents() {
+        this.tree.openParents(this);
+    }
+    close() {
+        this.tree.close(this);
+    }
+    submit(value) {
+        this.tree.submit(this, value);
+    }
+    reset() {
+        this.tree.reset();
+    }
+    clone() {
+        return new NodeApi(Object.assign({}, this));
+    }
+    edit() {
+        return this.tree.edit(this);
+    }
+}
+exports.NodeApi = NodeApi;

package/dist/{interfaces → main/interfaces}/tree-api.d.ts

@@ -26,17 +26,97 @@ export declare class TreeApi<T> {
     };
     constructor(store: Store<RootState, Actions>, props: TreeProps<T>, list: MutableRefObject<FixedSizeList | null>, listEl: MutableRefObject<HTMLDivElement | null>);
     update(props: TreeProps<T>): void;
-    dispatch(action: Actions): import("redux").AnyAction;
-    get state(): import("redux").CombinedState<{
-        nodes: import("redux").CombinedState<{
+    dispatch(action: Actions): {
+        type: "FOCUS";
+        id: string | null;
+    } | {
+        readonly type: "TREE_BLUR";
+    } | {
+        type: "EDIT";
+        id: string | null;
+    } | import("../types/utils").ActionTypes<{
+        open(id: string, filtered: boolean): {
+            type: "VISIBILITY_OPEN";
+            id: string;
+            filtered: boolean;
+        };
+        close(id: string, filtered: boolean): {
+            type: "VISIBILITY_CLOSE";
+            id: string;
+            filtered: boolean;
+        };
+        toggle(id: string, filtered: boolean): {
+            type: "VISIBILITY_TOGGLE";
+            id: string;
+            filtered: boolean;
+        };
+        clear(filtered: boolean): {
+            type: "VISIBILITY_CLEAR";
+            filtered: boolean;
+        };
+    }> | import("../types/utils").ActionTypes<{
+        clear: () => {
+            type: "SELECTION_CLEAR";
+        };
+        only: (id: string | IdObj) => {
+            type: "SELECTION_ONLY";
+            id: string;
+        };
+        add: (id: string | IdObj | string[] | IdObj[]) => {
+            type: "SELECTION_ADD";
+            ids: string[];
+        };
+        remove: (id: string | IdObj | string[] | IdObj[]) => {
+            type: "SELECTION_REMOVE";
+            ids: string[];
+        };
+        set: (args: {
+            ids: Set<string>;
+            anchor: string | null;
+            mostRecent: string | null;
+        }) => {
+            ids: Set<string>;
+            anchor: string | null;
+            mostRecent: string | null;
+            type: "SELECTION_SET";
+        };
+        mostRecent: (id: string | IdObj | null) => {
+            type: "SELECTION_MOST_RECENT";
+            id: string | null;
+        };
+        anchor: (id: string | IdObj | null) => {
+            type: "SELECTION_ANCHOR";
+            id: string | null;
+        };
+    }> | import("../types/utils").ActionTypes<{
+        cursor(cursor: Cursor): {
+            type: "DND_CURSOR";
+            cursor: Cursor;
+        };
+        dragStart(id: string, dragIds: string[]): {
+            type: "DND_DRAG_START";
+            id: string;
+            dragIds: string[];
+        };
+        dragEnd(): {
+            type: "DND_DRAG_END";
+        };
+        hovering(parentId: string | null, index: number | null): {
+            type: "DND_HOVERING";
+            parentId: string | null;
+            index: number | null;
+        };
+    }>;
+    get state(): {
+        nodes: {
             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;
-        }>;
+        };
         dnd: import("../state/dnd-slice").DndState;
-    }>;
+    };
     get openState(): import("../state/open-slice").OpenMap;
     get width(): string | number;
     get height(): number;
@@ -95,6 +175,9 @@ export declare class TreeApi<T> {
     get cursorParentId(): string | null;
     get cursorOverFolder(): boolean;
     get dragNodes(): NodeApi<T>[];
+    get dragNode(): NodeApi<T> | null;
+    get dragDestinationParent(): NodeApi<T> | null;
+    get dragDestinationIndex(): number | null;
     canDrop(): boolean;
     hideCursor(): void;
     showCursor(cursor: Cursor): void;
@@ -126,6 +209,6 @@ export declare class TreeApi<T> {
     get renderContainer(): import("react").ElementType<{}> | typeof DefaultContainer;
     get renderRow(): import("react").ElementType<import("..").RowRendererProps<T>> | typeof DefaultRow;
     get renderNode(): import("react").ElementType<import("..").NodeRendererProps<T>> | typeof DefaultNode;
-    get renderDragPreview(): import("react").ComponentType<import("..").DragPreviewProps> | typeof DefaultDragPreview;
-    get renderCursor(): import("react").ComponentType<import("..").CursorProps> | import("react").NamedExoticComponent<import("..").CursorProps>;
+    get renderDragPreview(): import("react").ElementType<import("..").DragPreviewProps> | typeof DefaultDragPreview;
+    get renderCursor(): import("react").ElementType<import("..").CursorProps> | import("react").NamedExoticComponent<import("..").CursorProps>;
 }