react-arborist 3.10.3 → 3.10.5

package/dist/module/interfaces/tree-api.js

@@ -11,6 +11,7 @@ import * as utils from "../utils";
 import { DefaultCursor } from "../components/default-cursor";
 import { DefaultRow } from "../components/default-row";
 import { DefaultNode } from "../components/default-node";
+import { NodeApi } from "./node-api";
 import { edit } from "../state/edit-slice";
 import { focus, treeBlur } from "../state/focus-slice";
 import { createRoot, ROOT_ID } from "../data/create-root";
@@ -21,7 +22,7 @@ import { DefaultDragPreview } from "../components/default-drag-preview";
 import { DefaultContainer } from "../components/default-container";
 import { createList } from "../data/create-list";
 import { createIndex } from "../data/create-index";
-const { safeRun, identify, identifyNull } = utils;
+const { safeRun } = utils;
 export class TreeApi {
     constructor(store, props, list, listEl) {
         this.store = store;
@@ -163,6 +164,30 @@ export class TreeApi {
             throw new Error("Data must contain an 'id' property or props.idAccessor must return a string");
         return id;
     }
+    /**
+     * Resolve an identifier to a node id. Public methods accept an id string, a
+     * NodeApi, or the raw row data; this is the one place that turns any of those
+     * into the string id used internally. Raw data is run through the configured
+     * `idAccessor` so a custom accessor (e.g. `uuid`) is honored everywhere, not
+     * just where nodes were built. A NodeApi already carries its accessor-derived
+     * `id`, so it is used directly rather than re-accessed (the accessor reads the
+     * underlying data, which a NodeApi does not expose under that key). Unlike
+     * `accessId`, an unresolved id comes back as `undefined` rather than throwing,
+     * preserving the previous behavior of the `id`-only lookup.
+     */
+    identify(identity) {
+        if (typeof identity === "string")
+            return identity;
+        if (identity instanceof NodeApi)
+            return identity.id;
+        const get = this.props.idAccessor || "id";
+        return utils.access(identity, get);
+    }
+    identifyNull(identity) {
+        if (identity === null || identity === undefined)
+            return null;
+        return this.identify(identity);
+    }
     /* Node Access */
     get firstNode() {
         var _a;
@@ -218,7 +243,7 @@ export class TreeApi {
         return this.visibleNodes.slice(start, end + 1);
     }
     indexOf(id) {
-        const key = utils.identifyNull(id);
+        const key = this.identifyNull(id);
         if (!key)
             return null;
         return this.idToIndex[key];
@@ -261,7 +286,7 @@ export class TreeApi {
             if (!node)
                 return;
             const idents = Array.isArray(node) ? node : [node];
-            const ids = idents.map(identify);
+            const ids = idents.map((i) => this.identify(i));
             const nodes = ids.map((id) => this.get(id)).filter((n) => !!n);
             /* Guard against Math.min(...[]) === Infinity when no ids resolve to nodes. */
             const fromIndex = nodes.length ? Math.min(...nodes.map((n) => { var _a; return (_a = n.rowIndex) !== null && _a !== void 0 ? _a : 0; })) : 0;
@@ -271,7 +296,7 @@ export class TreeApi {
     }
     edit(node) {
         var _a, _b;
-        const id = identify(node);
+        const id = this.identify(node);
         this.resolveEdit({ cancelled: true });
         this.scrollTo(id);
         this.dispatch(edit(id));
@@ -285,7 +310,7 @@ export class TreeApi {
             var _a, _b;
             if (!identity)
                 return;
-            const id = identify(identity);
+            const id = this.identify(identity);
             yield safeRun(this.props.onRename, {
                 id,
                 name: value,
@@ -304,7 +329,7 @@ export class TreeApi {
         setTimeout(() => this.onFocus()); // Return focus to element;
     }
     activate(id) {
-        const node = this.get(identifyNull(id));
+        const node = this.get(this.identifyNull(id));
         if (!node)
             return;
         safeRun(this.props.onActivate, node);
@@ -338,7 +363,7 @@ export class TreeApi {
             this.select(node);
         }
         else {
-            this.dispatch(focus(identify(node)));
+            this.dispatch(focus(this.identify(node)));
             if (opts.scroll !== false)
                 this.scrollTo(node);
             if (this.focusedNode)
@@ -378,7 +403,7 @@ export class TreeApi {
         if (!node)
             return;
         const changeFocus = opts.focus !== false;
-        const id = identify(node);
+        const id = this.identify(node);
         if (changeFocus)
             this.dispatch(focus(id));
         if ((_a = this.get(id)) === null || _a === void 0 ? void 0 : _a.isSelectable) {
@@ -396,12 +421,12 @@ export class TreeApi {
     deselect(node) {
         if (!node)
             return;
-        const id = identify(node);
+        const id = this.identify(node);
         this.dispatch(selection.remove(id));
         safeRun(this.props.onSelect, this.selectedNodes);
     }
     selectMulti(identity, opts = {}) {
-        const node = this.get(identifyNull(identity));
+        const node = this.get(this.identifyNull(identity));
         if (!node)
             return;
         const changeFocus = opts.focus !== false;
@@ -422,11 +447,11 @@ export class TreeApi {
         var _a;
         if (!identity)
             return;
-        const id = identify(identity);
+        const id = this.identify(identity);
         this.dispatch(focus(id));
         if ((_a = this.get(id)) === null || _a === void 0 ? void 0 : _a.isSelectable) {
             const { anchor, mostRecent } = this.state.nodes.selection;
-            const selectableNodes = this.filterSelectableNodes(this.nodesBetween(anchor, identifyNull(id)));
+            const selectableNodes = this.filterSelectableNodes(this.nodesBetween(anchor, this.identifyNull(id)));
             this.dispatch(selection.remove(this.nodesBetween(anchor, mostRecent)));
             this.dispatch(selection.add(selectableNodes));
             this.dispatch(selection.mostRecent(id));
@@ -455,14 +480,14 @@ export class TreeApi {
     }
     filterSelectableNodes(nodes) {
         return nodes
-            .map((n) => this.get(identify(n)))
+            .map((n) => this.get(this.identify(n)))
             .filter((n) => !!n && n.isSelectable);
     }
     setSelection(args) {
         var _a;
-        const ids = new Set((_a = args.ids) === null || _a === void 0 ? void 0 : _a.map(identify));
-        const anchor = identifyNull(args.anchor);
-        const mostRecent = identifyNull(args.mostRecent);
+        const ids = new Set((_a = args.ids) === null || _a === void 0 ? void 0 : _a.map((i) => this.identify(i)));
+        const anchor = this.identifyNull(args.anchor);
+        const mostRecent = this.identifyNull(args.mostRecent);
         this.dispatch(selection.set({ ids, anchor, mostRecent }));
         safeRun(this.props.onSelect, this.selectedNodes);
     }
@@ -545,7 +570,7 @@ export class TreeApi {
     /* Visibility */
     open(identity, redraw = true) {
         var _a, _b;
-        const id = identifyNull(identity);
+        const id = this.identifyNull(identity);
         if (!id)
             return;
         if (this.isOpen(id))
@@ -557,7 +582,7 @@ export class TreeApi {
     }
     close(identity, redraw = true) {
         var _a, _b;
-        const id = identifyNull(identity);
+        const id = this.identifyNull(identity);
         if (!id)
             return;
         if (!this.isOpen(id))
@@ -568,13 +593,13 @@ export class TreeApi {
         safeRun(this.props.onToggle, id);
     }
     toggle(identity) {
-        const id = identifyNull(identity);
+        const id = this.identifyNull(identity);
         if (!id)
             return;
         return this.isOpen(id) ? this.close(id) : this.open(id);
     }
     openParents(identity) {
-        const id = identifyNull(identity);
+        const id = this.identifyNull(identity);
         if (!id)
             return;
         const node = utils.dfs(this.root, id);
@@ -622,7 +647,7 @@ export class TreeApi {
     scrollTo(identity, align = "smart") {
         if (!identity)
             return;
-        const id = identify(identity);
+        const id = this.identify(identity);
         this.openParents(id);
         return utils
             .waitFor(() => id in this.idToIndex)
@@ -689,7 +714,7 @@ export class TreeApi {
         return !utils.access(data, disabler);
     }
     isDragging(node) {
-        const id = identifyNull(node);
+        const id = this.identifyNull(node);
         if (!id)
             return false;
         return this.state.nodes.drag.id === id;
@@ -701,7 +726,7 @@ export class TreeApi {
         return this.matchFn(node);
     }
     willReceiveDrop(node) {
-        const id = identifyNull(node);
+        const id = this.identifyNull(node);
         if (!id)
             return false;
         const { destinationParentId, destinationIndex } = this.state.nodes.drag;

package/dist/module/interfaces/tree-api.test.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { createStore } from "redux";
 import { rootReducer } from "../state/root-reducer";
 import { actions as dnd } from "../state/dnd-slice";
@@ -36,6 +45,45 @@ describe("tree.drop() fires onMove (#313)", () => {
         expect(onMove).toHaveBeenCalledWith(expect.objectContaining({ parentId: "folder", index: 0 }));
     });
 });
+describe("custom idAccessor is honored when methods receive raw data (#347)", () => {
+    const uuidData = [{ uuid: "a" }, { uuid: "b" }, { uuid: "c" }];
+    test("select(data) resolves the id through idAccessor", () => {
+        const onSelect = jest.fn();
+        const api = setupApi({ data: uuidData, idAccessor: "uuid", onSelect });
+        api.select(uuidData[1]);
+        expect(api.selectedIds.has("b")).toBe(true);
+        expect(api.selectedNodes.map((n) => n.id)).toEqual(["b"]);
+    });
+    test("focus(data) resolves the id through idAccessor", () => {
+        var _a;
+        const api = setupApi({ data: uuidData, idAccessor: "uuid" });
+        api.focus(uuidData[2]);
+        expect((_a = api.focusedNode) === null || _a === void 0 ? void 0 : _a.id).toBe("c");
+    });
+    test("delete(data) passes the accessor-derived id to onDelete", () => {
+        const onDelete = jest.fn();
+        const api = setupApi({ data: uuidData, idAccessor: "uuid", onDelete });
+        api.delete(uuidData[0]);
+        expect(onDelete).toHaveBeenCalledWith(expect.objectContaining({ ids: ["a"] }));
+    });
+    test("create() focuses the new node by its accessor-derived id", () => __awaiter(void 0, void 0, void 0, function* () {
+        // create() passes the raw row data returned by onCreate straight to
+        // focus/edit/select; before the fix these read `.id` and lost the node.
+        const onCreate = () => ({ uuid: "new" });
+        const api = setupApi({ data: uuidData, idAccessor: "uuid", onCreate });
+        yield api.create();
+        expect(api.state.nodes.focus.id).toBe("new");
+    }));
+    test("a function idAccessor is honored too", () => {
+        const fnData = [{ meta: { key: "x" } }, { meta: { key: "y" } }];
+        const api = setupApi({
+            data: fnData,
+            idAccessor: (d) => d.meta.key,
+        });
+        api.select(fnData[1]);
+        expect(api.selectedIds.has("y")).toBe(true);
+    });
+});
 test("rowHeight defaults to 24", () => {
     const api = setupApi({});
     expect(api.rowHeight).toBe(24);

package/dist/module/types/handlers.d.ts

@@ -5,7 +5,7 @@ export type CreateHandler<T> = (args: {
     parentNode: NodeApi<T> | null;
     index: number;
     type: "internal" | "leaf";
-}) => (IdObj | null) | Promise<IdObj | null>;
+}) => (T | IdObj | null) | Promise<T | IdObj | null>;
 export type MoveHandler<T> = (args: {
     dragIds: string[];
     dragNodes: NodeApi<T>[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-arborist",
-  "version": "3.10.3",
+  "version": "3.10.5",
   "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/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;

package/src/interfaces/tree-api.test.ts

@@ -47,6 +47,52 @@ describe("tree.drop() fires onMove (#313)", () => {
   });
 });
 
+describe("custom idAccessor is honored when methods receive raw data (#347)", () => {
+  const uuidData = [{ uuid: "a" }, { uuid: "b" }, { uuid: "c" }];
+
+  test("select(data) resolves the id through idAccessor", () => {
+    const onSelect = jest.fn();
+    const api = setupApi({ data: uuidData, idAccessor: "uuid", onSelect });
+    api.select(uuidData[1]);
+    expect(api.selectedIds.has("b")).toBe(true);
+    expect(api.selectedNodes.map((n) => n.id)).toEqual(["b"]);
+  });
+
+  test("focus(data) resolves the id through idAccessor", () => {
+    const api = setupApi({ data: uuidData, idAccessor: "uuid" });
+    api.focus(uuidData[2]);
+    expect(api.focusedNode?.id).toBe("c");
+  });
+
+  test("delete(data) passes the accessor-derived id to onDelete", () => {
+    const onDelete = jest.fn();
+    const api = setupApi({ data: uuidData, idAccessor: "uuid", onDelete });
+    api.delete(uuidData[0]);
+    expect(onDelete).toHaveBeenCalledWith(
+      expect.objectContaining({ ids: ["a"] }),
+    );
+  });
+
+  test("create() focuses the new node by its accessor-derived id", async () => {
+    // create() passes the raw row data returned by onCreate straight to
+    // focus/edit/select; before the fix these read `.id` and lost the node.
+    const onCreate = () => ({ uuid: "new" });
+    const api = setupApi({ data: uuidData, idAccessor: "uuid", onCreate });
+    await api.create();
+    expect(api.state.nodes.focus.id).toBe("new");
+  });
+
+  test("a function idAccessor is honored too", () => {
+    const fnData = [{ meta: { key: "x" } }, { meta: { key: "y" } }];
+    const api = setupApi({
+      data: fnData,
+      idAccessor: (d: any) => d.meta.key,
+    });
+    api.select(fnData[1]);
+    expect(api.selectedIds.has("y")).toBe(true);
+  });
+});
+
 test("rowHeight defaults to 24", () => {
   const api = setupApi({});
   expect(api.rowHeight).toBe(24);