react-arborist 3.10.3 → 3.10.5

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/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/main/interfaces/tree-api.d.ts

@@ -149,6 +149,19 @@ export declare class TreeApi<T> {
     get matchFn(): (node: NodeApi<T>) => boolean;
     accessChildren(data: T): readonly T[] | null;
     accessId(data: T): string;
+    /**
+     * 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: string | IdObj | T): string;
+    identifyNull(identity: Identity | T): string | null;
     get firstNode(): NodeApi<T>;
     get lastNode(): NodeApi<T>;
     get focusedNode(): NodeApi<T> | null;
@@ -158,7 +171,7 @@ export declare class TreeApi<T> {
     get(id: string | null): NodeApi<T> | null;
     at(index: number): NodeApi<T> | null;
     nodesBetween(startId: string | null, endId: string | null): NodeApi<T>[];
-    indexOf(id: Identity): number | null;
+    indexOf(id: Identity | T): number | null;
     get editingId(): string | null;
     createInternal(): Promise<void>;
     createLeaf(): Promise<void>;
@@ -167,36 +180,36 @@ export declare class TreeApi<T> {
         parentId?: null | string;
         index?: null | number;
     }): Promise<void>;
-    delete(node: Identity | string[] | IdObj[]): Promise<void>;
-    edit(node: string | IdObj): Promise<EditResult>;
-    submit(identity: Identity, value: string): Promise<void>;
+    delete(node: Identity | T | (string | IdObj | T)[]): Promise<void>;
+    edit(node: string | IdObj | T): Promise<EditResult>;
+    submit(identity: Identity | T, value: string): Promise<void>;
     reset(): void;
-    activate(id: Identity): void;
+    activate(id: Identity | T): void;
     private resolveEdit;
     get selectedIds(): Set<string>;
     get selectedNodes(): NodeApi<T>[];
-    focus(node: Identity, opts?: {
+    focus(node: Identity | T, opts?: {
         scroll?: boolean;
     }): void;
     pageUp(): void;
     pageDown(): void;
-    select(node: Identity, opts?: {
+    select(node: Identity | T, opts?: {
         align?: Align;
         focus?: boolean;
     }): void;
-    deselect(node: Identity): void;
-    selectMulti(identity: Identity, opts?: {
+    deselect(node: Identity | T): void;
+    selectMulti(identity: Identity | T, opts?: {
         align?: Align;
         focus?: boolean;
     }): void;
-    selectContiguous(identity: Identity): void;
+    selectContiguous(identity: Identity | T): void;
     deselectAll(): void;
     selectAll(): void;
     private filterSelectableNodes;
     setSelection(args: {
-        ids: (IdObj | string)[] | null;
-        anchor: Identity;
-        mostRecent: Identity;
+        ids: (IdObj | string | T)[] | null;
+        anchor: Identity | T;
+        mostRecent: Identity | T;
     }): void;
     get cursorParentId(): string | null;
     get cursorOverFolder(): boolean;
@@ -208,14 +221,14 @@ export declare class TreeApi<T> {
     drop(): void;
     hideCursor(): void;
     showCursor(cursor: Cursor): void;
-    open(identity: Identity, redraw?: boolean): void;
-    close(identity: Identity, redraw?: boolean): void;
-    toggle(identity: Identity): void;
-    openParents(identity: Identity): void;
+    open(identity: Identity | T, redraw?: boolean): void;
+    close(identity: Identity | T, redraw?: boolean): void;
+    toggle(identity: Identity | T): void;
+    openParents(identity: Identity | T): void;
     openSiblings(node: NodeApi<T>): void;
     openAll(): void;
     closeAll(): void;
-    scrollTo(identity: Identity, align?: Align): Promise<void> | undefined;
+    scrollTo(identity: Identity | T, align?: Align): Promise<void> | undefined;
     get isEditing(): boolean;
     get isFiltered(): boolean;
     get hasFocus(): boolean;
@@ -228,10 +241,10 @@ export declare class TreeApi<T> {
     isDraggable(data: T): boolean;
     isSelectable(data: T): boolean;
     private isActionPossible;
-    isDragging(node: Identity): boolean;
+    isDragging(node: Identity | T): boolean;
     isFocused(id: string): boolean;
     isMatch(node: NodeApi<T>): boolean;
-    willReceiveDrop(node: Identity): boolean;
+    willReceiveDrop(node: Identity | T): boolean;
     onFocus(): void;
     onBlur(): void;
     onItemsRendered(args: ListOnItemsRenderedProps): void;

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

@@ -37,6 +37,7 @@ const utils = __importStar(require("../utils"));
 const default_cursor_1 = require("../components/default-cursor");
 const default_row_1 = require("../components/default-row");
 const default_node_1 = require("../components/default-node");
+const node_api_1 = require("./node-api");
 const edit_slice_1 = require("../state/edit-slice");
 const focus_slice_1 = require("../state/focus-slice");
 const create_root_1 = require("../data/create-root");
@@ -47,7 +48,7 @@ const default_drag_preview_1 = require("../components/default-drag-preview");
 const default_container_1 = require("../components/default-container");
 const create_list_1 = require("../data/create-list");
 const create_index_1 = require("../data/create-index");
-const { safeRun, identify, identifyNull } = utils;
+const { safeRun } = utils;
 class TreeApi {
     constructor(store, props, list, listEl) {
         this.store = store;
@@ -189,6 +190,30 @@ 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 node_api_1.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;
@@ -244,7 +269,7 @@ 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];
@@ -287,7 +312,7 @@ 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;
@@ -297,7 +322,7 @@ 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((0, edit_slice_1.edit)(id));
@@ -311,7 +336,7 @@ 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,
@@ -330,7 +355,7 @@ 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);
@@ -364,7 +389,7 @@ class TreeApi {
             this.select(node);
         }
         else {
-            this.dispatch((0, focus_slice_1.focus)(identify(node)));
+            this.dispatch((0, focus_slice_1.focus)(this.identify(node)));
             if (opts.scroll !== false)
                 this.scrollTo(node);
             if (this.focusedNode)
@@ -404,7 +429,7 @@ class TreeApi {
         if (!node)
             return;
         const changeFocus = opts.focus !== false;
-        const id = identify(node);
+        const id = this.identify(node);
         if (changeFocus)
             this.dispatch((0, focus_slice_1.focus)(id));
         if ((_a = this.get(id)) === null || _a === void 0 ? void 0 : _a.isSelectable) {
@@ -422,12 +447,12 @@ class TreeApi {
     deselect(node) {
         if (!node)
             return;
-        const id = identify(node);
+        const id = this.identify(node);
         this.dispatch(selection_slice_1.actions.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;
@@ -448,11 +473,11 @@ class TreeApi {
         var _a;
         if (!identity)
             return;
-        const id = identify(identity);
+        const id = this.identify(identity);
         this.dispatch((0, focus_slice_1.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_slice_1.actions.remove(this.nodesBetween(anchor, mostRecent)));
             this.dispatch(selection_slice_1.actions.add(selectableNodes));
             this.dispatch(selection_slice_1.actions.mostRecent(id));
@@ -481,14 +506,14 @@ 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_slice_1.actions.set({ ids, anchor, mostRecent }));
         safeRun(this.props.onSelect, this.selectedNodes);
     }
@@ -571,7 +596,7 @@ 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))
@@ -583,7 +608,7 @@ 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))
@@ -594,13 +619,13 @@ 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);
@@ -648,7 +673,7 @@ 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)
@@ -715,7 +740,7 @@ 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;
@@ -727,7 +752,7 @@ 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;