react-arborist 3.10.2 → 3.10.4

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

@@ -1,11 +1,16 @@
-type SimpleData = {
-    id: string;
-    name: string;
-    children?: SimpleData[];
+export type SimpleTreeOptions<T> = {
+    idAccessor?: string | ((d: T) => string);
+    childrenAccessor?: string | ((d: T) => readonly T[] | null | undefined);
+};
+type Accessors<T> = {
+    getId: (data: T) => string;
+    getChildren: (data: T) => readonly T[] | null | undefined;
+    childrenKey: string;
 };
-export declare class SimpleTree<T extends SimpleData> {
+export declare class SimpleTree<T> {
     root: SimpleNode<T>;
-    constructor(data: T[]);
+    private accessors;
+    constructor(data: T[], options?: SimpleTreeOptions<T>);
     get data(): T[];
     create(args: {
         parentId: string | null;
@@ -26,12 +31,13 @@ export declare class SimpleTree<T extends SimpleData> {
     }): void;
     find(id: string, node?: SimpleNode<T>): SimpleNode<T> | null;
 }
-declare class SimpleNode<T extends SimpleData> {
+declare class SimpleNode<T> {
     data: T;
     parent: SimpleNode<T> | null;
+    private accessors;
     id: string;
     children?: SimpleNode<T>[];
-    constructor(data: T, parent: SimpleNode<T> | null);
+    constructor(data: T, parent: SimpleNode<T> | null, accessors: Accessors<T>, id?: string);
     hasParent(): this is this & {
         parent: SimpleNode<T>;
     };

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

@@ -1,9 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SimpleTree = void 0;
+function resolveAccessors(options = {}) {
+    var _a, _b;
+    const id = (_a = options.idAccessor) !== null && _a !== void 0 ? _a : "id";
+    const children = (_b = options.childrenAccessor) !== null && _b !== void 0 ? _b : "children";
+    return {
+        getId: typeof id === "function" ? id : (data) => data[id],
+        getChildren: typeof children === "function" ? children : (data) => data[children],
+        childrenKey: typeof children === "string" ? children : "children",
+    };
+}
 class SimpleTree {
-    constructor(data) {
-        this.root = createRoot(data);
+    constructor(data, options = {}) {
+        this.accessors = resolveAccessors(options);
+        this.root = createRoot(data, this.accessors);
     }
     get data() {
         var _a, _b;
@@ -50,22 +61,27 @@ class SimpleTree {
     }
 }
 exports.SimpleTree = SimpleTree;
-function createRoot(data) {
-    const root = new SimpleNode({ id: "ROOT" }, null);
-    root.children = data.map((d) => createNode(d, root));
+function createRoot(data, accessors) {
+    // The synthetic root has no real data, so it gets an explicit id rather than
+    // running the user's accessor on `{}` — a function accessor that reaches into
+    // the data (e.g. `d => d.meta.id`) would otherwise throw during construction.
+    const root = new SimpleNode({}, null, accessors, "ROOT");
+    root.children = data.map((d) => createNode(d, root, accessors));
     return root;
 }
-function createNode(data, parent) {
-    const node = new SimpleNode(data, parent);
-    if (data.children)
-        node.children = data.children.map((d) => createNode(d, node));
+function createNode(data, parent, accessors) {
+    const node = new SimpleNode(data, parent, accessors);
+    const children = accessors.getChildren(data);
+    if (children)
+        node.children = children.map((d) => createNode(d, node, accessors));
     return node;
 }
 class SimpleNode {
-    constructor(data, parent) {
+    constructor(data, parent, accessors, id) {
         this.data = data;
         this.parent = parent;
-        this.id = data.id;
+        this.accessors = accessors;
+        this.id = id !== null && id !== void 0 ? id : accessors.getId(data);
     }
     hasParent() {
         return !!this.parent;
@@ -75,16 +91,19 @@ class SimpleNode {
     }
     addChild(data, index) {
         var _a, _b;
-        const node = createNode(data, this);
+        const node = createNode(data, this, this.accessors);
         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);
+        const key = this.accessors.childrenKey;
+        const raw = this.data;
+        raw[key] = (_b = raw[key]) !== null && _b !== void 0 ? _b : [];
+        raw[key].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);
+        const raw = this.data;
+        (_b = raw[this.accessors.childrenKey]) === null || _b === void 0 ? void 0 : _b.splice(index, 1);
     }
     update(changes) {
         if (this.hasParent()) {

package/dist/main/data/simple-tree.test.d.ts

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

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

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const simple_tree_1 = require("./simple-tree");
+describe("SimpleTree with default accessors", () => {
+    const data = () => [
+        { id: "1", name: "a", children: [{ id: "1a", name: "a-child" }] },
+        { id: "2", name: "b" },
+    ];
+    test("finds nodes by id, including nested ones", () => {
+        var _a, _b;
+        const tree = new simple_tree_1.SimpleTree(data());
+        expect((_a = tree.find("2")) === null || _a === void 0 ? void 0 : _a.data.name).toBe("b");
+        expect((_b = tree.find("1a")) === null || _b === void 0 ? void 0 : _b.data.name).toBe("a-child");
+    });
+    test("moves a node into a folder", () => {
+        const tree = new simple_tree_1.SimpleTree(data());
+        tree.move({ id: "2", parentId: "1", index: 1 });
+        expect(tree.data[0].children.map((c) => c.id)).toEqual(["1a", "2"]);
+        expect(tree.data).toHaveLength(1);
+    });
+});
+describe("SimpleTree honors custom accessors (issue #73, #170)", () => {
+    // Custom keys: `uuid` for the id, `elements` for the children.
+    const data = () => [
+        { uuid: "1", name: "a", elements: [{ uuid: "1a", name: "a-child" }] },
+        { uuid: "2", name: "b" },
+    ];
+    function tree() {
+        return new simple_tree_1.SimpleTree(data(), { idAccessor: "uuid", childrenAccessor: "elements" });
+    }
+    test("finds nodes by the custom id key, including nested ones", () => {
+        var _a, _b;
+        const t = tree();
+        expect((_a = t.find("2")) === null || _a === void 0 ? void 0 : _a.data.name).toBe("b");
+        expect((_b = t.find("1a")) === null || _b === void 0 ? void 0 : _b.data.name).toBe("a-child"); // read through `elements`
+    });
+    test("reorders a node, writing children back under the custom key (#170)", () => {
+        const t = tree();
+        t.move({ id: "2", parentId: "1", index: 1 });
+        expect(t.data).toHaveLength(1);
+        expect(t.data[0].elements.map((c) => c.uuid)).toEqual(["1a", "2"]);
+    });
+    test("moving a node with children into a childless node keeps its children (#73)", () => {
+        const t = tree();
+        // Put node "1" (which has children) inside node "2" (which has none).
+        t.move({ id: "1", parentId: "2", index: 0 });
+        expect(t.data.map((n) => n.uuid)).toEqual(["2"]);
+        const moved = t.find("1");
+        expect(moved === null || moved === void 0 ? void 0 : moved.data.elements.map((c) => c.uuid)).toEqual(["1a"]);
+    });
+    test("supports a function idAccessor", () => {
+        var _a;
+        const t = new simple_tree_1.SimpleTree(data(), { idAccessor: (d) => d.uuid, childrenAccessor: "elements" });
+        expect((_a = t.find("1a")) === null || _a === void 0 ? void 0 : _a.data.name).toBe("a-child");
+        t.move({ id: "2", parentId: "1", index: 1 });
+        expect(t.data[0].elements.map((c) => c.uuid)).toEqual(["1a", "2"]);
+    });
+    test("a function idAccessor that reaches into the data doesn't throw on construction", () => {
+        const nested = [{ meta: { id: "x" }, name: "x" }];
+        // The synthetic root must not run this accessor on its empty data.
+        expect(() => new simple_tree_1.SimpleTree(nested, { idAccessor: (d) => d.meta.id })).not.toThrow();
+    });
+});

package/dist/main/dnd/drag-hook.d.ts

@@ -2,4 +2,5 @@ import { ConnectDragSource } from "react-dnd";
 import { NodeApi } from "../interfaces/node-api";
 import { TreeProps } from "../types/tree-props";
 export declare function dragTypeForNode<T>(dragType: TreeProps<T>["dragType"], node: NodeApi<T>): string;
+export declare function canDragNode<T>(node: NodeApi<T>): boolean;
 export declare function useDragHook<T>(node: NodeApi<T>): ConnectDragSource;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dragTypeForNode = dragTypeForNode;
+exports.canDragNode = canDragNode;
 exports.useDragHook = useDragHook;
 const react_1 = require("react");
 const react_dnd_1 = require("react-dnd");
@@ -14,11 +15,17 @@ function dragTypeForNode(dragType, node) {
         return dragType(node);
     return dragType !== null && dragType !== void 0 ? dragType : "NODE";
 }
+/* A node can start a drag only when it's draggable and not currently being
+   renamed. Without the editing guard, dragging inside the rename input would
+   pick the row up and move it (issue #195). */
+function canDragNode(node) {
+    return node.isDraggable && !node.isEditing;
+}
 function useDragHook(node) {
     const tree = (0, context_1.useTreeApi)();
     const ids = tree.selectedIds;
     const [_, ref, preview] = (0, react_dnd_1.useDrag)(() => ({
-        canDrag: () => node.isDraggable,
+        canDrag: () => canDragNode(node),
         type: dragTypeForNode(tree.props.dragType, node),
         item: () => {
             // This is fired once at the beginning of a drag operation

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

@@ -17,3 +17,17 @@ test("resolves a per-node dragType function against the node", () => {
     expect((0, drag_hook_1.dragTypeForNode)(dragType, nodeWith({ kind: "folder" }))).toBe("FOLDER");
     expect((0, drag_hook_1.dragTypeForNode)(dragType, nodeWith({ kind: "file" }))).toBe("FILE");
 });
+/* canDragNode only reads the isDraggable/isEditing flags, so a minimal stub
+   stands in for a real NodeApi. */
+function draggableNode(flags) {
+    return flags;
+}
+test("a draggable node that isn't being edited can drag", () => {
+    expect((0, drag_hook_1.canDragNode)(draggableNode({ isDraggable: true, isEditing: false }))).toBe(true);
+});
+test("a non-draggable node can't drag", () => {
+    expect((0, drag_hook_1.canDragNode)(draggableNode({ isDraggable: false, isEditing: false }))).toBe(false);
+});
+test("a node being renamed can't drag, even when draggable (#195)", () => {
+    expect((0, drag_hook_1.canDragNode)(draggableNode({ isDraggable: true, isEditing: true }))).toBe(false);
+});

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

@@ -1,10 +1,11 @@
+import { SimpleTreeOptions } from "../data/simple-tree";
 import { CreateHandler, DeleteHandler, MoveHandler, RenameHandler } from "../types/handlers";
 export type SimpleTreeData = {
     id: string;
     name: string;
     children?: SimpleTreeData[];
 };
-export declare function useSimpleTree<T>(initialData: readonly T[]): readonly [readonly T[], {
+export declare function useSimpleTree<T>(initialData: readonly T[], options?: SimpleTreeOptions<T>): readonly [readonly T[], {
     onMove: MoveHandler<T>;
     onRename: RenameHandler<T>;
     onCreate: CreateHandler<T>;

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

@@ -4,9 +4,11 @@ exports.useSimpleTree = useSimpleTree;
 const react_1 = require("react");
 const simple_tree_1 = require("../data/simple-tree");
 let nextId = 0;
-function useSimpleTree(initialData) {
+function useSimpleTree(initialData, options = {}) {
     const [data, setData] = (0, react_1.useState)(initialData);
-    const tree = (0, react_1.useMemo)(() => new simple_tree_1.SimpleTree(data), [data]);
+    const idAccessor = options.idAccessor;
+    const childrenAccessor = options.childrenAccessor;
+    const tree = (0, react_1.useMemo)(() => new simple_tree_1.SimpleTree(data, { idAccessor, childrenAccessor }), [data, idAccessor, childrenAccessor]);
     const onMove = (args) => {
         for (const id of args.dragIds) {
             tree.move({ id, parentId: args.parentId, index: args.index });
@@ -17,10 +19,23 @@ function useSimpleTree(initialData) {
         tree.update({ id, changes: { name } });
         setData(tree.data);
     };
+    // New nodes must carry their id/children under the same keys the accessors
+    // read, or the controller (and the tree's own accessId) can't find them
+    // afterward (issue #73). A function accessor can't be inverted to a writable
+    // key, so node creation with one isn't supportable — fail fast instead of
+    // returning a node that throws deeper in the tree.
+    const idKey = typeof idAccessor === "string" ? idAccessor : "id";
+    const childrenKey = typeof childrenAccessor === "string" ? childrenAccessor : "children";
     const onCreate = ({ parentId, index, type }) => {
-        const data = { id: `simple-tree-id-${nextId++}`, name: "" };
+        if (typeof idAccessor === "function") {
+            throw new Error(`React Arborist => initialData can't create nodes when idAccessor is a function: the generated id can't be written under a key the accessor reads. Use a string idAccessor, or the controlled \`data\` prop with your own onCreate.`);
+        }
+        if (type === "internal" && typeof childrenAccessor === "function") {
+            throw new Error(`React Arborist => initialData can't create folder nodes when childrenAccessor is a function: the new children array can't be written under a key the accessor reads. Use a string childrenAccessor, or the controlled \`data\` prop with your own onCreate.`);
+        }
+        const data = { [idKey]: `simple-tree-id-${nextId++}`, name: "" };
         if (type === "internal")
-            data.children = [];
+            data[childrenKey] = [];
         tree.create({ parentId, index, data });
         setData(tree.data);
         return data;

package/dist/main/hooks/use-simple-tree.test.d.ts

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

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+const use_simple_tree_1 = require("./use-simple-tree");
+/* onCreate has to write a new node's id (and a folder's children) under a key
+   the accessors will read back. A function accessor can't be inverted to a key,
+   so creation with one must fail fast rather than return an unusable node
+   (issue #73 review follow-up). */
+describe("useSimpleTree onCreate guards function accessors", () => {
+    function controllerFor(data, options) {
+        const { result } = (0, react_1.renderHook)(() => (0, use_simple_tree_1.useSimpleTree)(data, options));
+        return result.current[1];
+    }
+    const create = { parentId: null, parentNode: null, index: 0 };
+    test("throws when idAccessor is a function", () => {
+        const controller = controllerFor([{ uuid: "1", name: "a" }], { idAccessor: (d) => d.uuid });
+        expect(() => controller.onCreate(Object.assign(Object.assign({}, create), { type: "leaf" }))).toThrow(/idAccessor is a function/);
+    });
+    test("throws when creating a folder with a function childrenAccessor", () => {
+        const controller = controllerFor([{ id: "1", name: "a" }], {
+            childrenAccessor: (d) => d.kids,
+        });
+        expect(() => controller.onCreate(Object.assign(Object.assign({}, create), { type: "internal" }))).toThrow(/childrenAccessor is a function/);
+    });
+    test("a leaf can still be created when only childrenAccessor is a function", () => {
+        const controller = controllerFor([{ id: "1", name: "a" }], {
+            childrenAccessor: (d) => d.kids,
+        });
+        // onCreate calls setData, so run it inside act to keep the suite warning-clean.
+        expect(() => (0, react_1.act)(() => void controller.onCreate(Object.assign(Object.assign({}, create), { type: "leaf" })))).not.toThrow();
+    });
+});

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

@@ -18,7 +18,10 @@ Use the data prop if you want to provide your own handlers.`);
          *
          * We will provide the real data and the handlers to update it.
          *   */
-        const [data, controller] = (0, use_simple_tree_1.useSimpleTree)(props.initialData);
+        const [data, controller] = (0, use_simple_tree_1.useSimpleTree)(props.initialData, {
+            idAccessor: props.idAccessor,
+            childrenAccessor: props.childrenAccessor,
+        });
         return Object.assign(Object.assign(Object.assign({}, props), controller), { data });
     }
     else {

package/dist/module/data/simple-tree.d.ts

@@ -1,11 +1,16 @@
-type SimpleData = {
-    id: string;
-    name: string;
-    children?: SimpleData[];
+export type SimpleTreeOptions<T> = {
+    idAccessor?: string | ((d: T) => string);
+    childrenAccessor?: string | ((d: T) => readonly T[] | null | undefined);
+};
+type Accessors<T> = {
+    getId: (data: T) => string;
+    getChildren: (data: T) => readonly T[] | null | undefined;
+    childrenKey: string;
 };
-export declare class SimpleTree<T extends SimpleData> {
+export declare class SimpleTree<T> {
     root: SimpleNode<T>;
-    constructor(data: T[]);
+    private accessors;
+    constructor(data: T[], options?: SimpleTreeOptions<T>);
     get data(): T[];
     create(args: {
         parentId: string | null;
@@ -26,12 +31,13 @@ export declare class SimpleTree<T extends SimpleData> {
     }): void;
     find(id: string, node?: SimpleNode<T>): SimpleNode<T> | null;
 }
-declare class SimpleNode<T extends SimpleData> {
+declare class SimpleNode<T> {
     data: T;
     parent: SimpleNode<T> | null;
+    private accessors;
     id: string;
     children?: SimpleNode<T>[];
-    constructor(data: T, parent: SimpleNode<T> | null);
+    constructor(data: T, parent: SimpleNode<T> | null, accessors: Accessors<T>, id?: string);
     hasParent(): this is this & {
         parent: SimpleNode<T>;
     };

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

@@ -1,6 +1,17 @@
+function resolveAccessors(options = {}) {
+    var _a, _b;
+    const id = (_a = options.idAccessor) !== null && _a !== void 0 ? _a : "id";
+    const children = (_b = options.childrenAccessor) !== null && _b !== void 0 ? _b : "children";
+    return {
+        getId: typeof id === "function" ? id : (data) => data[id],
+        getChildren: typeof children === "function" ? children : (data) => data[children],
+        childrenKey: typeof children === "string" ? children : "children",
+    };
+}
 export class SimpleTree {
-    constructor(data) {
-        this.root = createRoot(data);
+    constructor(data, options = {}) {
+        this.accessors = resolveAccessors(options);
+        this.root = createRoot(data, this.accessors);
     }
     get data() {
         var _a, _b;
@@ -46,22 +57,27 @@ export class SimpleTree {
         return null;
     }
 }
-function createRoot(data) {
-    const root = new SimpleNode({ id: "ROOT" }, null);
-    root.children = data.map((d) => createNode(d, root));
+function createRoot(data, accessors) {
+    // The synthetic root has no real data, so it gets an explicit id rather than
+    // running the user's accessor on `{}` — a function accessor that reaches into
+    // the data (e.g. `d => d.meta.id`) would otherwise throw during construction.
+    const root = new SimpleNode({}, null, accessors, "ROOT");
+    root.children = data.map((d) => createNode(d, root, accessors));
     return root;
 }
-function createNode(data, parent) {
-    const node = new SimpleNode(data, parent);
-    if (data.children)
-        node.children = data.children.map((d) => createNode(d, node));
+function createNode(data, parent, accessors) {
+    const node = new SimpleNode(data, parent, accessors);
+    const children = accessors.getChildren(data);
+    if (children)
+        node.children = children.map((d) => createNode(d, node, accessors));
     return node;
 }
 class SimpleNode {
-    constructor(data, parent) {
+    constructor(data, parent, accessors, id) {
         this.data = data;
         this.parent = parent;
-        this.id = data.id;
+        this.accessors = accessors;
+        this.id = id !== null && id !== void 0 ? id : accessors.getId(data);
     }
     hasParent() {
         return !!this.parent;
@@ -71,16 +87,19 @@ class SimpleNode {
     }
     addChild(data, index) {
         var _a, _b;
-        const node = createNode(data, this);
+        const node = createNode(data, this, this.accessors);
         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);
+        const key = this.accessors.childrenKey;
+        const raw = this.data;
+        raw[key] = (_b = raw[key]) !== null && _b !== void 0 ? _b : [];
+        raw[key].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);
+        const raw = this.data;
+        (_b = raw[this.accessors.childrenKey]) === null || _b === void 0 ? void 0 : _b.splice(index, 1);
     }
     update(changes) {
         if (this.hasParent()) {

package/dist/module/data/simple-tree.test.d.ts

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

package/dist/module/data/simple-tree.test.js

@@ -0,0 +1,61 @@
+import { SimpleTree } from "./simple-tree";
+describe("SimpleTree with default accessors", () => {
+    const data = () => [
+        { id: "1", name: "a", children: [{ id: "1a", name: "a-child" }] },
+        { id: "2", name: "b" },
+    ];
+    test("finds nodes by id, including nested ones", () => {
+        var _a, _b;
+        const tree = new SimpleTree(data());
+        expect((_a = tree.find("2")) === null || _a === void 0 ? void 0 : _a.data.name).toBe("b");
+        expect((_b = tree.find("1a")) === null || _b === void 0 ? void 0 : _b.data.name).toBe("a-child");
+    });
+    test("moves a node into a folder", () => {
+        const tree = new SimpleTree(data());
+        tree.move({ id: "2", parentId: "1", index: 1 });
+        expect(tree.data[0].children.map((c) => c.id)).toEqual(["1a", "2"]);
+        expect(tree.data).toHaveLength(1);
+    });
+});
+describe("SimpleTree honors custom accessors (issue #73, #170)", () => {
+    // Custom keys: `uuid` for the id, `elements` for the children.
+    const data = () => [
+        { uuid: "1", name: "a", elements: [{ uuid: "1a", name: "a-child" }] },
+        { uuid: "2", name: "b" },
+    ];
+    function tree() {
+        return new SimpleTree(data(), { idAccessor: "uuid", childrenAccessor: "elements" });
+    }
+    test("finds nodes by the custom id key, including nested ones", () => {
+        var _a, _b;
+        const t = tree();
+        expect((_a = t.find("2")) === null || _a === void 0 ? void 0 : _a.data.name).toBe("b");
+        expect((_b = t.find("1a")) === null || _b === void 0 ? void 0 : _b.data.name).toBe("a-child"); // read through `elements`
+    });
+    test("reorders a node, writing children back under the custom key (#170)", () => {
+        const t = tree();
+        t.move({ id: "2", parentId: "1", index: 1 });
+        expect(t.data).toHaveLength(1);
+        expect(t.data[0].elements.map((c) => c.uuid)).toEqual(["1a", "2"]);
+    });
+    test("moving a node with children into a childless node keeps its children (#73)", () => {
+        const t = tree();
+        // Put node "1" (which has children) inside node "2" (which has none).
+        t.move({ id: "1", parentId: "2", index: 0 });
+        expect(t.data.map((n) => n.uuid)).toEqual(["2"]);
+        const moved = t.find("1");
+        expect(moved === null || moved === void 0 ? void 0 : moved.data.elements.map((c) => c.uuid)).toEqual(["1a"]);
+    });
+    test("supports a function idAccessor", () => {
+        var _a;
+        const t = new SimpleTree(data(), { idAccessor: (d) => d.uuid, childrenAccessor: "elements" });
+        expect((_a = t.find("1a")) === null || _a === void 0 ? void 0 : _a.data.name).toBe("a-child");
+        t.move({ id: "2", parentId: "1", index: 1 });
+        expect(t.data[0].elements.map((c) => c.uuid)).toEqual(["1a", "2"]);
+    });
+    test("a function idAccessor that reaches into the data doesn't throw on construction", () => {
+        const nested = [{ meta: { id: "x" }, name: "x" }];
+        // The synthetic root must not run this accessor on its empty data.
+        expect(() => new SimpleTree(nested, { idAccessor: (d) => d.meta.id })).not.toThrow();
+    });
+});

package/dist/module/dnd/drag-hook.d.ts

@@ -2,4 +2,5 @@ import { ConnectDragSource } from "react-dnd";
 import { NodeApi } from "../interfaces/node-api";
 import { TreeProps } from "../types/tree-props";
 export declare function dragTypeForNode<T>(dragType: TreeProps<T>["dragType"], node: NodeApi<T>): string;
+export declare function canDragNode<T>(node: NodeApi<T>): boolean;
 export declare function useDragHook<T>(node: NodeApi<T>): ConnectDragSource;

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

@@ -10,11 +10,17 @@ export function dragTypeForNode(dragType, node) {
         return dragType(node);
     return dragType !== null && dragType !== void 0 ? dragType : "NODE";
 }
+/* A node can start a drag only when it's draggable and not currently being
+   renamed. Without the editing guard, dragging inside the rename input would
+   pick the row up and move it (issue #195). */
+export function canDragNode(node) {
+    return node.isDraggable && !node.isEditing;
+}
 export function useDragHook(node) {
     const tree = useTreeApi();
     const ids = tree.selectedIds;
     const [_, ref, preview] = useDrag(() => ({
-        canDrag: () => node.isDraggable,
+        canDrag: () => canDragNode(node),
         type: dragTypeForNode(tree.props.dragType, node),
         item: () => {
             // This is fired once at the beginning of a drag operation

package/dist/module/dnd/drag-hook.test.js

@@ -1,4 +1,4 @@
-import { dragTypeForNode } from "./drag-hook";
+import { canDragNode, dragTypeForNode } from "./drag-hook";
 /* dragTypeForNode only reads node.data when dragType is a function, so a
    minimal stub stands in for a real NodeApi. */
 function nodeWith(data) {
@@ -15,3 +15,17 @@ test("resolves a per-node dragType function against the node", () => {
     expect(dragTypeForNode(dragType, nodeWith({ kind: "folder" }))).toBe("FOLDER");
     expect(dragTypeForNode(dragType, nodeWith({ kind: "file" }))).toBe("FILE");
 });
+/* canDragNode only reads the isDraggable/isEditing flags, so a minimal stub
+   stands in for a real NodeApi. */
+function draggableNode(flags) {
+    return flags;
+}
+test("a draggable node that isn't being edited can drag", () => {
+    expect(canDragNode(draggableNode({ isDraggable: true, isEditing: false }))).toBe(true);
+});
+test("a non-draggable node can't drag", () => {
+    expect(canDragNode(draggableNode({ isDraggable: false, isEditing: false }))).toBe(false);
+});
+test("a node being renamed can't drag, even when draggable (#195)", () => {
+    expect(canDragNode(draggableNode({ isDraggable: true, isEditing: true }))).toBe(false);
+});

package/dist/module/hooks/use-simple-tree.d.ts

@@ -1,10 +1,11 @@
+import { SimpleTreeOptions } from "../data/simple-tree";
 import { CreateHandler, DeleteHandler, MoveHandler, RenameHandler } from "../types/handlers";
 export type SimpleTreeData = {
     id: string;
     name: string;
     children?: SimpleTreeData[];
 };
-export declare function useSimpleTree<T>(initialData: readonly T[]): readonly [readonly T[], {
+export declare function useSimpleTree<T>(initialData: readonly T[], options?: SimpleTreeOptions<T>): readonly [readonly T[], {
     onMove: MoveHandler<T>;
     onRename: RenameHandler<T>;
     onCreate: CreateHandler<T>;

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

@@ -1,9 +1,11 @@
 import { useMemo, useState } from "react";
 import { SimpleTree } from "../data/simple-tree";
 let nextId = 0;
-export function useSimpleTree(initialData) {
+export function useSimpleTree(initialData, options = {}) {
     const [data, setData] = useState(initialData);
-    const tree = useMemo(() => new SimpleTree(data), [data]);
+    const idAccessor = options.idAccessor;
+    const childrenAccessor = options.childrenAccessor;
+    const tree = useMemo(() => new SimpleTree(data, { idAccessor, childrenAccessor }), [data, idAccessor, childrenAccessor]);
     const onMove = (args) => {
         for (const id of args.dragIds) {
             tree.move({ id, parentId: args.parentId, index: args.index });
@@ -14,10 +16,23 @@ export function useSimpleTree(initialData) {
         tree.update({ id, changes: { name } });
         setData(tree.data);
     };
+    // New nodes must carry their id/children under the same keys the accessors
+    // read, or the controller (and the tree's own accessId) can't find them
+    // afterward (issue #73). A function accessor can't be inverted to a writable
+    // key, so node creation with one isn't supportable — fail fast instead of
+    // returning a node that throws deeper in the tree.
+    const idKey = typeof idAccessor === "string" ? idAccessor : "id";
+    const childrenKey = typeof childrenAccessor === "string" ? childrenAccessor : "children";
     const onCreate = ({ parentId, index, type }) => {
-        const data = { id: `simple-tree-id-${nextId++}`, name: "" };
+        if (typeof idAccessor === "function") {
+            throw new Error(`React Arborist => initialData can't create nodes when idAccessor is a function: the generated id can't be written under a key the accessor reads. Use a string idAccessor, or the controlled \`data\` prop with your own onCreate.`);
+        }
+        if (type === "internal" && typeof childrenAccessor === "function") {
+            throw new Error(`React Arborist => initialData can't create folder nodes when childrenAccessor is a function: the new children array can't be written under a key the accessor reads. Use a string childrenAccessor, or the controlled \`data\` prop with your own onCreate.`);
+        }
+        const data = { [idKey]: `simple-tree-id-${nextId++}`, name: "" };
         if (type === "internal")
-            data.children = [];
+            data[childrenKey] = [];
         tree.create({ parentId, index, data });
         setData(tree.data);
         return data;

package/dist/module/hooks/use-simple-tree.test.d.ts

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

package/dist/module/hooks/use-simple-tree.test.js

@@ -0,0 +1,30 @@
+import { act, renderHook } from "@testing-library/react";
+import { useSimpleTree } from "./use-simple-tree";
+/* onCreate has to write a new node's id (and a folder's children) under a key
+   the accessors will read back. A function accessor can't be inverted to a key,
+   so creation with one must fail fast rather than return an unusable node
+   (issue #73 review follow-up). */
+describe("useSimpleTree onCreate guards function accessors", () => {
+    function controllerFor(data, options) {
+        const { result } = renderHook(() => useSimpleTree(data, options));
+        return result.current[1];
+    }
+    const create = { parentId: null, parentNode: null, index: 0 };
+    test("throws when idAccessor is a function", () => {
+        const controller = controllerFor([{ uuid: "1", name: "a" }], { idAccessor: (d) => d.uuid });
+        expect(() => controller.onCreate(Object.assign(Object.assign({}, create), { type: "leaf" }))).toThrow(/idAccessor is a function/);
+    });
+    test("throws when creating a folder with a function childrenAccessor", () => {
+        const controller = controllerFor([{ id: "1", name: "a" }], {
+            childrenAccessor: (d) => d.kids,
+        });
+        expect(() => controller.onCreate(Object.assign(Object.assign({}, create), { type: "internal" }))).toThrow(/childrenAccessor is a function/);
+    });
+    test("a leaf can still be created when only childrenAccessor is a function", () => {
+        const controller = controllerFor([{ id: "1", name: "a" }], {
+            childrenAccessor: (d) => d.kids,
+        });
+        // onCreate calls setData, so run it inside act to keep the suite warning-clean.
+        expect(() => act(() => void controller.onCreate(Object.assign(Object.assign({}, create), { type: "leaf" })))).not.toThrow();
+    });
+});

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

@@ -15,7 +15,10 @@ Use the data prop if you want to provide your own handlers.`);
          *
          * We will provide the real data and the handlers to update it.
          *   */
-        const [data, controller] = useSimpleTree(props.initialData);
+        const [data, controller] = useSimpleTree(props.initialData, {
+            idAccessor: props.idAccessor,
+            childrenAccessor: props.childrenAccessor,
+        });
         return Object.assign(Object.assign(Object.assign({}, props), controller), { data });
     }
     else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-arborist",
-  "version": "3.10.2",
+  "version": "3.10.4",
   "keywords": [
     "arborist",
     "dnd",

package/src/data/simple-tree.test.ts

@@ -0,0 +1,68 @@
+import { SimpleTree } from "./simple-tree";
+
+describe("SimpleTree with default accessors", () => {
+  const data = () => [
+    { id: "1", name: "a", children: [{ id: "1a", name: "a-child" }] },
+    { id: "2", name: "b" },
+  ];
+
+  test("finds nodes by id, including nested ones", () => {
+    const tree = new SimpleTree(data());
+    expect(tree.find("2")?.data.name).toBe("b");
+    expect(tree.find("1a")?.data.name).toBe("a-child");
+  });
+
+  test("moves a node into a folder", () => {
+    const tree = new SimpleTree(data());
+    tree.move({ id: "2", parentId: "1", index: 1 });
+    expect(tree.data[0].children!.map((c) => c.id)).toEqual(["1a", "2"]);
+    expect(tree.data).toHaveLength(1);
+  });
+});
+
+describe("SimpleTree honors custom accessors (issue #73, #170)", () => {
+  // Custom keys: `uuid` for the id, `elements` for the children.
+  const data = () => [
+    { uuid: "1", name: "a", elements: [{ uuid: "1a", name: "a-child" }] },
+    { uuid: "2", name: "b" },
+  ];
+
+  function tree() {
+    return new SimpleTree(data(), { idAccessor: "uuid", childrenAccessor: "elements" });
+  }
+
+  test("finds nodes by the custom id key, including nested ones", () => {
+    const t = tree();
+    expect(t.find("2")?.data.name).toBe("b");
+    expect(t.find("1a")?.data.name).toBe("a-child"); // read through `elements`
+  });
+
+  test("reorders a node, writing children back under the custom key (#170)", () => {
+    const t = tree();
+    t.move({ id: "2", parentId: "1", index: 1 });
+    expect(t.data).toHaveLength(1);
+    expect(t.data[0].elements!.map((c) => c.uuid)).toEqual(["1a", "2"]);
+  });
+
+  test("moving a node with children into a childless node keeps its children (#73)", () => {
+    const t = tree();
+    // Put node "1" (which has children) inside node "2" (which has none).
+    t.move({ id: "1", parentId: "2", index: 0 });
+    expect(t.data.map((n) => n.uuid)).toEqual(["2"]);
+    const moved = t.find("1");
+    expect(moved?.data.elements!.map((c: any) => c.uuid)).toEqual(["1a"]);
+  });
+
+  test("supports a function idAccessor", () => {
+    const t = new SimpleTree(data(), { idAccessor: (d) => d.uuid, childrenAccessor: "elements" });
+    expect(t.find("1a")?.data.name).toBe("a-child");
+    t.move({ id: "2", parentId: "1", index: 1 });
+    expect(t.data[0].elements!.map((c) => c.uuid)).toEqual(["1a", "2"]);
+  });
+
+  test("a function idAccessor that reaches into the data doesn't throw on construction", () => {
+    const nested = [{ meta: { id: "x" }, name: "x" }];
+    // The synthetic root must not run this accessor on its empty data.
+    expect(() => new SimpleTree(nested, { idAccessor: (d) => d.meta.id })).not.toThrow();
+  });
+});

package/src/data/simple-tree.ts

@@ -1,9 +1,37 @@
-type SimpleData = { id: string; name: string; children?: SimpleData[] };
+export type SimpleTreeOptions<T> = {
+  idAccessor?: string | ((d: T) => string);
+  childrenAccessor?: string | ((d: T) => readonly T[] | null | undefined);
+};
+
+/* Resolved id/children readers plus the string key the controller writes
+   children back under. A string accessor is used for both reading and writing;
+   a function accessor can only be read, so writes fall back to "children".
+   This is what lets initialData honor idAccessor/childrenAccessor (issue #73):
+   without it, the controller assumed `id`/`children` and silently dropped moves
+   for trees keyed differently. */
+type Accessors<T> = {
+  getId: (data: T) => string;
+  getChildren: (data: T) => readonly T[] | null | undefined;
+  childrenKey: string;
+};
+
+function resolveAccessors<T>(options: SimpleTreeOptions<T> = {}): Accessors<T> {
+  const id = options.idAccessor ?? "id";
+  const children = options.childrenAccessor ?? "children";
+  return {
+    getId: typeof id === "function" ? id : (data) => (data as any)[id],
+    getChildren: typeof children === "function" ? children : (data) => (data as any)[children],
+    childrenKey: typeof children === "string" ? children : "children",
+  };
+}
 
-export class SimpleTree<T extends SimpleData> {
+export class SimpleTree<T> {
   root: SimpleNode<T>;
-  constructor(data: T[]) {
-    this.root = createRoot<T>(data);
+  private accessors: Accessors<T>;
+
+  constructor(data: T[], options: SimpleTreeOptions<T> = {}) {
+    this.accessors = resolveAccessors(options);
+    this.root = createRoot<T>(data, this.accessors);
   }
 
   get data() {
@@ -48,26 +76,32 @@ export class SimpleTree<T extends SimpleData> {
   }
 }
 
-function createRoot<T extends SimpleData>(data: T[]) {
-  const root = new SimpleNode<T>({ id: "ROOT" } as T, null);
-  root.children = data.map((d) => createNode(d as T, root));
+function createRoot<T>(data: T[], accessors: Accessors<T>) {
+  // The synthetic root has no real data, so it gets an explicit id rather than
+  // running the user's accessor on `{}` — a function accessor that reaches into
+  // the data (e.g. `d => d.meta.id`) would otherwise throw during construction.
+  const root = new SimpleNode<T>({} as T, null, accessors, "ROOT");
+  root.children = data.map((d) => createNode(d, root, accessors));
   return root;
 }
 
-function createNode<T extends SimpleData>(data: T, parent: SimpleNode<T>) {
-  const node = new SimpleNode<T>(data, parent);
-  if (data.children) node.children = data.children.map((d) => createNode<T>(d as T, node));
+function createNode<T>(data: T, parent: SimpleNode<T>, accessors: Accessors<T>) {
+  const node = new SimpleNode<T>(data, parent, accessors);
+  const children = accessors.getChildren(data);
+  if (children) node.children = children.map((d) => createNode<T>(d, node, accessors));
   return node;
 }
 
-class SimpleNode<T extends SimpleData> {
+class SimpleNode<T> {
   id: string;
   children?: SimpleNode<T>[];
   constructor(
     public data: T,
     public parent: SimpleNode<T> | null,
+    private accessors: Accessors<T>,
+    id?: string,
   ) {
-    this.id = data.id;
+    this.id = id ?? accessors.getId(data);
   }
 
   hasParent(): this is this & { parent: SimpleNode<T> } {
@@ -79,16 +113,19 @@ class SimpleNode<T extends SimpleData> {
   }
 
   addChild(data: T, index: number) {
-    const node = createNode(data, this);
+    const node = createNode(data, this, this.accessors);
     this.children = this.children ?? [];
     this.children.splice(index, 0, node);
-    this.data.children = this.data.children ?? [];
-    this.data.children.splice(index, 0, data);
+    const key = this.accessors.childrenKey;
+    const raw = this.data as any;
+    raw[key] = raw[key] ?? [];
+    raw[key].splice(index, 0, data);
   }
 
   removeChild(index: number) {
     this.children?.splice(index, 1);
-    this.data.children?.splice(index, 1);
+    const raw = this.data as any;
+    raw[this.accessors.childrenKey]?.splice(index, 1);
   }
 
   update(changes: Partial<T>) {

package/src/dnd/drag-hook.test.ts

@@ -1,5 +1,5 @@
 import { NodeApi } from "../interfaces/node-api";
-import { dragTypeForNode } from "./drag-hook";
+import { canDragNode, dragTypeForNode } from "./drag-hook";
 
 /* dragTypeForNode only reads node.data when dragType is a function, so a
    minimal stub stands in for a real NodeApi. */
@@ -20,3 +20,21 @@ test("resolves a per-node dragType function against the node", () => {
   expect(dragTypeForNode(dragType, nodeWith({ kind: "folder" }))).toBe("FOLDER");
   expect(dragTypeForNode(dragType, nodeWith({ kind: "file" }))).toBe("FILE");
 });
+
+/* canDragNode only reads the isDraggable/isEditing flags, so a minimal stub
+   stands in for a real NodeApi. */
+function draggableNode(flags: { isDraggable: boolean; isEditing: boolean }): NodeApi {
+  return flags as NodeApi;
+}
+
+test("a draggable node that isn't being edited can drag", () => {
+  expect(canDragNode(draggableNode({ isDraggable: true, isEditing: false }))).toBe(true);
+});
+
+test("a non-draggable node can't drag", () => {
+  expect(canDragNode(draggableNode({ isDraggable: false, isEditing: false }))).toBe(false);
+});
+
+test("a node being renamed can't drag, even when draggable (#195)", () => {
+  expect(canDragNode(draggableNode({ isDraggable: true, isEditing: true }))).toBe(false);
+});

package/src/dnd/drag-hook.ts

@@ -15,12 +15,19 @@ export function dragTypeForNode<T>(dragType: TreeProps<T>["dragType"], node: Nod
   return dragType ?? "NODE";
 }
 
+/* A node can start a drag only when it's draggable and not currently being
+   renamed. Without the editing guard, dragging inside the rename input would
+   pick the row up and move it (issue #195). */
+export function canDragNode<T>(node: NodeApi<T>): boolean {
+  return node.isDraggable && !node.isEditing;
+}
+
 export function useDragHook<T>(node: NodeApi<T>): ConnectDragSource {
   const tree = useTreeApi<T>();
   const ids = tree.selectedIds;
   const [_, ref, preview] = useDrag<DragItem<T>, DropResult, void>(
     () => ({
-      canDrag: () => node.isDraggable,
+      canDrag: () => canDragNode(node),
       type: dragTypeForNode(tree.props.dragType, node),
       item: () => {
         // This is fired once at the beginning of a drag operation

package/src/hooks/use-simple-tree.test.ts

@@ -0,0 +1,39 @@
+import { act, renderHook } from "@testing-library/react";
+import { useSimpleTree } from "./use-simple-tree";
+
+/* onCreate has to write a new node's id (and a folder's children) under a key
+   the accessors will read back. A function accessor can't be inverted to a key,
+   so creation with one must fail fast rather than return an unusable node
+   (issue #73 review follow-up). */
+describe("useSimpleTree onCreate guards function accessors", () => {
+  function controllerFor<T>(data: T[], options: Parameters<typeof useSimpleTree<T>>[1]) {
+    const { result } = renderHook(() => useSimpleTree<T>(data, options));
+    return result.current[1];
+  }
+
+  const create = { parentId: null, parentNode: null, index: 0 } as const;
+
+  test("throws when idAccessor is a function", () => {
+    const controller = controllerFor([{ uuid: "1", name: "a" }], { idAccessor: (d) => d.uuid });
+    expect(() => controller.onCreate({ ...create, type: "leaf" })).toThrow(
+      /idAccessor is a function/,
+    );
+  });
+
+  test("throws when creating a folder with a function childrenAccessor", () => {
+    const controller = controllerFor([{ id: "1", name: "a" }], {
+      childrenAccessor: (d) => (d as any).kids,
+    });
+    expect(() => controller.onCreate({ ...create, type: "internal" })).toThrow(
+      /childrenAccessor is a function/,
+    );
+  });
+
+  test("a leaf can still be created when only childrenAccessor is a function", () => {
+    const controller = controllerFor([{ id: "1", name: "a" }], {
+      childrenAccessor: (d) => (d as any).kids,
+    });
+    // onCreate calls setData, so run it inside act to keep the suite warning-clean.
+    expect(() => act(() => void controller.onCreate({ ...create, type: "leaf" }))).not.toThrow();
+  });
+});

package/src/hooks/use-simple-tree.ts

@@ -1,5 +1,5 @@
 import { useMemo, useState } from "react";
-import { SimpleTree } from "../data/simple-tree";
+import { SimpleTree, SimpleTreeOptions } from "../data/simple-tree";
 import { CreateHandler, DeleteHandler, MoveHandler, RenameHandler } from "../types/handlers";
 
 export type SimpleTreeData = {
@@ -10,13 +10,13 @@ export type SimpleTreeData = {
 
 let nextId = 0;
 
-export function useSimpleTree<T>(initialData: readonly T[]) {
+export function useSimpleTree<T>(initialData: readonly T[], options: SimpleTreeOptions<T> = {}) {
   const [data, setData] = useState(initialData);
+  const idAccessor = options.idAccessor;
+  const childrenAccessor = options.childrenAccessor;
   const tree = useMemo(
-    () =>
-      new SimpleTree<// @ts-ignore
-      T>(data),
-    [data],
+    () => new SimpleTree<T>(data as T[], { idAccessor, childrenAccessor }),
+    [data, idAccessor, childrenAccessor],
   );
 
   const onMove: MoveHandler<T> = (args: {
@@ -35,9 +35,27 @@ export function useSimpleTree<T>(initialData: readonly T[]) {
     setData(tree.data);
   };
 
+  // New nodes must carry their id/children under the same keys the accessors
+  // read, or the controller (and the tree's own accessId) can't find them
+  // afterward (issue #73). A function accessor can't be inverted to a writable
+  // key, so node creation with one isn't supportable — fail fast instead of
+  // returning a node that throws deeper in the tree.
+  const idKey = typeof idAccessor === "string" ? idAccessor : "id";
+  const childrenKey = typeof childrenAccessor === "string" ? childrenAccessor : "children";
+
   const onCreate: CreateHandler<T> = ({ parentId, index, type }) => {
-    const data = { id: `simple-tree-id-${nextId++}`, name: "" } as any;
-    if (type === "internal") data.children = [];
+    if (typeof idAccessor === "function") {
+      throw new Error(
+        `React Arborist => initialData can't create nodes when idAccessor is a function: the generated id can't be written under a key the accessor reads. Use a string idAccessor, or the controlled \`data\` prop with your own onCreate.`,
+      );
+    }
+    if (type === "internal" && typeof childrenAccessor === "function") {
+      throw new Error(
+        `React Arborist => initialData can't create folder nodes when childrenAccessor is a function: the new children array can't be written under a key the accessor reads. Use a string childrenAccessor, or the controlled \`data\` prop with your own onCreate.`,
+      );
+    }
+    const data = { [idKey]: `simple-tree-id-${nextId++}`, name: "" } as any;
+    if (type === "internal") data[childrenKey] = [];
     tree.create({ parentId, index, data });
     setData(tree.data);
     return data;

package/src/hooks/use-validated-props.ts

@@ -21,7 +21,10 @@ Use the data prop if you want to provide your own handlers.`,
      *
      * We will provide the real data and the handlers to update it.
      *   */
-    const [data, controller] = useSimpleTree<T>(props.initialData);
+    const [data, controller] = useSimpleTree<T>(props.initialData, {
+      idAccessor: props.idAccessor,
+      childrenAccessor: props.childrenAccessor,
+    });
     return { ...props, ...controller, data };
   } else {
     return props;