react-arborist 3.5.0 → 3.6.1

package/README.md

@@ -310,6 +310,7 @@ interface TreeProps<T> {
   openByDefault?: boolean;
   selectionFollowsFocus?: boolean;
   disableMultiSelection?: boolean;
+  disableSelect?: string | boolean | BoolFunc<T>;
   disableEdit?: string | boolean | BoolFunc<T>;
   disableDrag?: string | boolean | BoolFunc<T>;
   disableDrop?:

package/dist/main/components/provider.js

@@ -29,7 +29,14 @@ function TreeProvider({ treeProps, imperativeHandle, children, }) {
     (0, react_1.useMemo)(() => {
         updateCount.current += 1;
         api.update(treeProps);
-    }, [...Object.values(treeProps), state.nodes.open]);
+    }, [...Object.values(treeProps)]);
+    /* Rebuild visible nodes when open state changes, without clobbering
+       props set imperatively via api.update(). Bumping updateCount keeps
+       DataUpdates consumers (e.g. DefaultContainer) in sync. */
+    (0, react_1.useMemo)(() => {
+        updateCount.current += 1;
+        api.update(api.props);
+    }, [state.nodes.open]);
     /* Expose the tree api */
     (0, react_1.useImperativeHandle)(imperativeHandle, () => api);
     /* Change selection based on props */

package/dist/main/components/provider.test.d.ts

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

package/dist/main/components/provider.test.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@testing-library/react");
+const tree_1 = require("./tree");
+const data = [
+    {
+        id: "1",
+        name: "root",
+        children: [
+            { id: "2", name: "a" },
+            { id: "3", name: "b", children: [{ id: "4", name: "c" }] },
+        ],
+    },
+];
+test("imperative tree.update() props survive node toggles (#228)", () => {
+    const ref = (0, react_1.createRef)();
+    (0, react_2.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, ref: ref, rowHeight: 24, openByDefault: false }));
+    const api = ref.current;
+    expect(api.rowHeight).toBe(24);
+    (0, react_2.act)(() => {
+        api.update(Object.assign(Object.assign({}, api.props), { rowHeight: 48 }));
+    });
+    expect(api.rowHeight).toBe(48);
+    /* Opening a node dispatches a redux action that changes state.nodes.open.
+       Before #337, the open-state effect re-ran api.update(treeProps), reverting
+       rowHeight to 24. */
+    (0, react_2.act)(() => {
+        api.open("1");
+    });
+    expect(api.rowHeight).toBe(48);
+});

package/dist/main/interfaces/node-api.d.ts

@@ -26,6 +26,7 @@ export declare class NodeApi<T = any> {
     get isOpen(): boolean;
     get isClosed(): boolean;
     get isEditable(): boolean;
+    get isSelectable(): boolean;
     get isEditing(): boolean;
     get isSelected(): boolean;
     get isOnlySelection(): boolean;

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

@@ -43,6 +43,9 @@ class NodeApi {
     get isEditable() {
         return this.tree.isEditable(this.data);
     }
+    get isSelectable() {
+        return this.tree.isSelectable(this.data);
+    }
     get isEditing() {
         return this.tree.editingId === this.id;
     }

package/dist/main/interfaces/tree-api.d.ts

@@ -136,7 +136,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: string | null | IdObj): number | null;
+    indexOf(id: Identity): number | null;
     get editingId(): string | null;
     createInternal(): Promise<void>;
     createLeaf(): Promise<void>;
@@ -145,11 +145,11 @@ export declare class TreeApi<T> {
         parentId?: null | string;
         index?: null | number;
     }): Promise<void>;
-    delete(node: string | IdObj | null | string[] | IdObj[]): Promise<void>;
+    delete(node: Identity | string[] | IdObj[]): Promise<void>;
     edit(node: string | IdObj): Promise<EditResult>;
     submit(identity: Identity, value: string): Promise<void>;
     reset(): void;
-    activate(id: string | IdObj | null): void;
+    activate(id: Identity): void;
     private resolveEdit;
     get selectedIds(): Set<string>;
     get selectedNodes(): NodeApi<T>[];
@@ -170,10 +170,11 @@ export declare class TreeApi<T> {
     selectContiguous(identity: Identity): void;
     deselectAll(): void;
     selectAll(): void;
+    private filterSelectableNodes;
     setSelection(args: {
         ids: (IdObj | string)[] | null;
-        anchor: IdObj | string | null;
-        mostRecent: IdObj | string | null;
+        anchor: Identity;
+        mostRecent: Identity;
     }): void;
     get cursorParentId(): string | null;
     get cursorOverFolder(): boolean;
@@ -202,10 +203,12 @@ export declare class TreeApi<T> {
     isOpen(id?: string): boolean;
     isEditable(data: T): boolean;
     isDraggable(data: T): boolean;
-    isDragging(node: string | IdObj | null): boolean;
+    isSelectable(data: T): boolean;
+    private isActionPossible;
+    isDragging(node: Identity): boolean;
     isFocused(id: string): boolean;
     isMatch(node: NodeApi<T>): boolean;
-    willReceiveDrop(node: string | IdObj | null): boolean;
+    willReceiveDrop(node: Identity): boolean;
     onFocus(): void;
     onBlur(): void;
     onItemsRendered(args: ListOnItemsRenderedProps): void;

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

@@ -327,20 +327,24 @@ class TreeApi {
         this.focus(this.at(index));
     }
     select(node, opts = {}) {
+        var _a;
         if (!node)
             return;
         const changeFocus = opts.focus !== false;
         const id = identify(node);
         if (changeFocus)
             this.dispatch((0, focus_slice_1.focus)(id));
-        this.dispatch(selection_slice_1.actions.only(id));
-        this.dispatch(selection_slice_1.actions.anchor(id));
-        this.dispatch(selection_slice_1.actions.mostRecent(id));
+        if ((_a = this.get(id)) === null || _a === void 0 ? void 0 : _a.isSelectable) {
+            this.setSelection({
+                ids: [id],
+                anchor: id,
+                mostRecent: id,
+            });
+        }
         this.scrollTo(id, opts.align);
         if (this.focusedNode && changeFocus) {
             safeRun(this.props.onFocus, this.focusedNode);
         }
-        safeRun(this.props.onSelect, this.selectedNodes);
     }
     deselect(node) {
         if (!node)
@@ -356,9 +360,11 @@ class TreeApi {
         const changeFocus = opts.focus !== false;
         if (changeFocus)
             this.dispatch((0, focus_slice_1.focus)(node.id));
-        this.dispatch(selection_slice_1.actions.add(node.id));
-        this.dispatch(selection_slice_1.actions.anchor(node.id));
-        this.dispatch(selection_slice_1.actions.mostRecent(node.id));
+        if (node.isSelectable) {
+            this.dispatch(selection_slice_1.actions.add(node.id));
+            this.dispatch(selection_slice_1.actions.anchor(node.id));
+            this.dispatch(selection_slice_1.actions.mostRecent(node.id));
+        }
         this.scrollTo(node, opts.align);
         if (this.focusedNode && changeFocus) {
             safeRun(this.props.onFocus, this.focusedNode);
@@ -366,14 +372,18 @@ class TreeApi {
         safeRun(this.props.onSelect, this.selectedNodes);
     }
     selectContiguous(identity) {
+        var _a;
         if (!identity)
             return;
         const id = identify(identity);
-        const { anchor, mostRecent } = this.state.nodes.selection;
         this.dispatch((0, focus_slice_1.focus)(id));
-        this.dispatch(selection_slice_1.actions.remove(this.nodesBetween(anchor, mostRecent)));
-        this.dispatch(selection_slice_1.actions.add(this.nodesBetween(anchor, identifyNull(id))));
-        this.dispatch(selection_slice_1.actions.mostRecent(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)));
+            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));
+        }
         this.scrollTo(id);
         if (this.focusedNode)
             safeRun(this.props.onFocus, this.focusedNode);
@@ -384,17 +394,23 @@ class TreeApi {
         safeRun(this.props.onSelect, this.selectedNodes);
     }
     selectAll() {
-        var _a;
+        var _a, _b, _c;
+        const allSelectableNodes = this.filterSelectableNodes(Object.keys(this.idToIndex));
         this.setSelection({
-            ids: Object.keys(this.idToIndex),
-            anchor: this.firstNode,
-            mostRecent: this.lastNode,
+            ids: allSelectableNodes,
+            anchor: (_a = allSelectableNodes[0]) !== null && _a !== void 0 ? _a : null,
+            mostRecent: (_b = allSelectableNodes[allSelectableNodes.length - 1]) !== null && _b !== void 0 ? _b : null,
         });
-        this.dispatch((0, focus_slice_1.focus)((_a = this.lastNode) === null || _a === void 0 ? void 0 : _a.id));
+        this.dispatch((0, focus_slice_1.focus)((_c = this.lastNode) === null || _c === void 0 ? void 0 : _c.id));
         if (this.focusedNode)
             safeRun(this.props.onFocus, this.focusedNode);
         safeRun(this.props.onSelect, this.selectedNodes);
     }
+    filterSelectableNodes(nodes) {
+        return nodes
+            .map((n) => this.get(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));
@@ -592,12 +608,16 @@ class TreeApi {
         }
     }
     isEditable(data) {
-        const check = this.props.disableEdit || (() => false);
-        return !utils.access(data, check);
+        return this.isActionPossible(data, this.props.disableEdit);
     }
     isDraggable(data) {
-        const check = this.props.disableDrag || (() => false);
-        return !utils.access(data, check);
+        return this.isActionPossible(data, this.props.disableDrag);
+    }
+    isSelectable(data) {
+        return this.isActionPossible(data, this.props.disableSelect);
+    }
+    isActionPossible(data, disabler = () => false) {
+        return !utils.access(data, disabler);
     }
     isDragging(node) {
         const id = identifyNull(node);

package/dist/main/types/tree-props.d.ts

@@ -31,6 +31,7 @@ export interface TreeProps<T> {
     openByDefault?: boolean;
     selectionFollowsFocus?: boolean;
     disableMultiSelection?: boolean;
+    disableSelect?: string | boolean | BoolFunc<T>;
     disableEdit?: string | boolean | BoolFunc<T>;
     disableDrag?: string | boolean | BoolFunc<T>;
     disableDrop?: string | boolean | ((args: {

package/dist/module/components/provider.js

@@ -26,7 +26,14 @@ export function TreeProvider({ treeProps, imperativeHandle, children, }) {
     useMemo(() => {
         updateCount.current += 1;
         api.update(treeProps);
-    }, [...Object.values(treeProps), state.nodes.open]);
+    }, [...Object.values(treeProps)]);
+    /* Rebuild visible nodes when open state changes, without clobbering
+       props set imperatively via api.update(). Bumping updateCount keeps
+       DataUpdates consumers (e.g. DefaultContainer) in sync. */
+    useMemo(() => {
+        updateCount.current += 1;
+        api.update(api.props);
+    }, [state.nodes.open]);
     /* Expose the tree api */
     useImperativeHandle(imperativeHandle, () => api);
     /* Change selection based on props */

package/dist/module/components/provider.test.d.ts

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

package/dist/module/components/provider.test.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRef } from "react";
+import { act, render } from "@testing-library/react";
+import { Tree } from "./tree";
+const data = [
+    {
+        id: "1",
+        name: "root",
+        children: [
+            { id: "2", name: "a" },
+            { id: "3", name: "b", children: [{ id: "4", name: "c" }] },
+        ],
+    },
+];
+test("imperative tree.update() props survive node toggles (#228)", () => {
+    const ref = createRef();
+    render(_jsx(Tree, { data: data, ref: ref, rowHeight: 24, openByDefault: false }));
+    const api = ref.current;
+    expect(api.rowHeight).toBe(24);
+    act(() => {
+        api.update(Object.assign(Object.assign({}, api.props), { rowHeight: 48 }));
+    });
+    expect(api.rowHeight).toBe(48);
+    /* Opening a node dispatches a redux action that changes state.nodes.open.
+       Before #337, the open-state effect re-ran api.update(treeProps), reverting
+       rowHeight to 24. */
+    act(() => {
+        api.open("1");
+    });
+    expect(api.rowHeight).toBe(48);
+});

package/dist/module/interfaces/node-api.d.ts

@@ -26,6 +26,7 @@ export declare class NodeApi<T = any> {
     get isOpen(): boolean;
     get isClosed(): boolean;
     get isEditable(): boolean;
+    get isSelectable(): boolean;
     get isEditing(): boolean;
     get isSelected(): boolean;
     get isOnlySelection(): boolean;

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

@@ -40,6 +40,9 @@ export class NodeApi {
     get isEditable() {
         return this.tree.isEditable(this.data);
     }
+    get isSelectable() {
+        return this.tree.isSelectable(this.data);
+    }
     get isEditing() {
         return this.tree.editingId === this.id;
     }

package/dist/module/interfaces/tree-api.d.ts

@@ -136,7 +136,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: string | null | IdObj): number | null;
+    indexOf(id: Identity): number | null;
     get editingId(): string | null;
     createInternal(): Promise<void>;
     createLeaf(): Promise<void>;
@@ -145,11 +145,11 @@ export declare class TreeApi<T> {
         parentId?: null | string;
         index?: null | number;
     }): Promise<void>;
-    delete(node: string | IdObj | null | string[] | IdObj[]): Promise<void>;
+    delete(node: Identity | string[] | IdObj[]): Promise<void>;
     edit(node: string | IdObj): Promise<EditResult>;
     submit(identity: Identity, value: string): Promise<void>;
     reset(): void;
-    activate(id: string | IdObj | null): void;
+    activate(id: Identity): void;
     private resolveEdit;
     get selectedIds(): Set<string>;
     get selectedNodes(): NodeApi<T>[];
@@ -170,10 +170,11 @@ export declare class TreeApi<T> {
     selectContiguous(identity: Identity): void;
     deselectAll(): void;
     selectAll(): void;
+    private filterSelectableNodes;
     setSelection(args: {
         ids: (IdObj | string)[] | null;
-        anchor: IdObj | string | null;
-        mostRecent: IdObj | string | null;
+        anchor: Identity;
+        mostRecent: Identity;
     }): void;
     get cursorParentId(): string | null;
     get cursorOverFolder(): boolean;
@@ -202,10 +203,12 @@ export declare class TreeApi<T> {
     isOpen(id?: string): boolean;
     isEditable(data: T): boolean;
     isDraggable(data: T): boolean;
-    isDragging(node: string | IdObj | null): boolean;
+    isSelectable(data: T): boolean;
+    private isActionPossible;
+    isDragging(node: Identity): boolean;
     isFocused(id: string): boolean;
     isMatch(node: NodeApi<T>): boolean;
-    willReceiveDrop(node: string | IdObj | null): boolean;
+    willReceiveDrop(node: Identity): boolean;
     onFocus(): void;
     onBlur(): void;
     onItemsRendered(args: ListOnItemsRenderedProps): void;

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

@@ -301,20 +301,24 @@ export class TreeApi {
         this.focus(this.at(index));
     }
     select(node, opts = {}) {
+        var _a;
         if (!node)
             return;
         const changeFocus = opts.focus !== false;
         const id = identify(node);
         if (changeFocus)
             this.dispatch(focus(id));
-        this.dispatch(selection.only(id));
-        this.dispatch(selection.anchor(id));
-        this.dispatch(selection.mostRecent(id));
+        if ((_a = this.get(id)) === null || _a === void 0 ? void 0 : _a.isSelectable) {
+            this.setSelection({
+                ids: [id],
+                anchor: id,
+                mostRecent: id,
+            });
+        }
         this.scrollTo(id, opts.align);
         if (this.focusedNode && changeFocus) {
             safeRun(this.props.onFocus, this.focusedNode);
         }
-        safeRun(this.props.onSelect, this.selectedNodes);
     }
     deselect(node) {
         if (!node)
@@ -330,9 +334,11 @@ export class TreeApi {
         const changeFocus = opts.focus !== false;
         if (changeFocus)
             this.dispatch(focus(node.id));
-        this.dispatch(selection.add(node.id));
-        this.dispatch(selection.anchor(node.id));
-        this.dispatch(selection.mostRecent(node.id));
+        if (node.isSelectable) {
+            this.dispatch(selection.add(node.id));
+            this.dispatch(selection.anchor(node.id));
+            this.dispatch(selection.mostRecent(node.id));
+        }
         this.scrollTo(node, opts.align);
         if (this.focusedNode && changeFocus) {
             safeRun(this.props.onFocus, this.focusedNode);
@@ -340,14 +346,18 @@ export class TreeApi {
         safeRun(this.props.onSelect, this.selectedNodes);
     }
     selectContiguous(identity) {
+        var _a;
         if (!identity)
             return;
         const id = identify(identity);
-        const { anchor, mostRecent } = this.state.nodes.selection;
         this.dispatch(focus(id));
-        this.dispatch(selection.remove(this.nodesBetween(anchor, mostRecent)));
-        this.dispatch(selection.add(this.nodesBetween(anchor, identifyNull(id))));
-        this.dispatch(selection.mostRecent(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)));
+            this.dispatch(selection.remove(this.nodesBetween(anchor, mostRecent)));
+            this.dispatch(selection.add(selectableNodes));
+            this.dispatch(selection.mostRecent(id));
+        }
         this.scrollTo(id);
         if (this.focusedNode)
             safeRun(this.props.onFocus, this.focusedNode);
@@ -358,17 +368,23 @@ export class TreeApi {
         safeRun(this.props.onSelect, this.selectedNodes);
     }
     selectAll() {
-        var _a;
+        var _a, _b, _c;
+        const allSelectableNodes = this.filterSelectableNodes(Object.keys(this.idToIndex));
         this.setSelection({
-            ids: Object.keys(this.idToIndex),
-            anchor: this.firstNode,
-            mostRecent: this.lastNode,
+            ids: allSelectableNodes,
+            anchor: (_a = allSelectableNodes[0]) !== null && _a !== void 0 ? _a : null,
+            mostRecent: (_b = allSelectableNodes[allSelectableNodes.length - 1]) !== null && _b !== void 0 ? _b : null,
         });
-        this.dispatch(focus((_a = this.lastNode) === null || _a === void 0 ? void 0 : _a.id));
+        this.dispatch(focus((_c = this.lastNode) === null || _c === void 0 ? void 0 : _c.id));
         if (this.focusedNode)
             safeRun(this.props.onFocus, this.focusedNode);
         safeRun(this.props.onSelect, this.selectedNodes);
     }
+    filterSelectableNodes(nodes) {
+        return nodes
+            .map((n) => this.get(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));
@@ -566,12 +582,16 @@ export class TreeApi {
         }
     }
     isEditable(data) {
-        const check = this.props.disableEdit || (() => false);
-        return !utils.access(data, check);
+        return this.isActionPossible(data, this.props.disableEdit);
     }
     isDraggable(data) {
-        const check = this.props.disableDrag || (() => false);
-        return !utils.access(data, check);
+        return this.isActionPossible(data, this.props.disableDrag);
+    }
+    isSelectable(data) {
+        return this.isActionPossible(data, this.props.disableSelect);
+    }
+    isActionPossible(data, disabler = () => false) {
+        return !utils.access(data, disabler);
     }
     isDragging(node) {
         const id = identifyNull(node);

package/dist/module/types/tree-props.d.ts

@@ -31,6 +31,7 @@ export interface TreeProps<T> {
     openByDefault?: boolean;
     selectionFollowsFocus?: boolean;
     disableMultiSelection?: boolean;
+    disableSelect?: string | boolean | BoolFunc<T>;
     disableEdit?: string | boolean | BoolFunc<T>;
     disableDrag?: string | boolean | BoolFunc<T>;
     disableDrop?: string | boolean | ((args: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-arborist",
-  "version": "3.5.0",
+  "version": "3.6.1",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/main/index.js",
@@ -49,12 +49,18 @@
     "react-dom": ">= 16.14"
   },
   "devDependencies": {
+    "@testing-library/dom": "^9.3.0",
+    "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.11",
     "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.0",
     "@types/react-window": "^1.8.8",
     "@types/use-sync-external-store": "^0.0.6",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "npm-run-all": "^4.1.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
     "ts-jest": "^29.1.1",
     "typescript": "^5.6.0"

package/src/components/provider.test.tsx

@@ -0,0 +1,44 @@
+import { createRef } from "react";
+import { act, render } from "@testing-library/react";
+import { Tree } from "./tree";
+import { TreeApi } from "../interfaces/tree-api";
+
+type Datum = { id: string; name: string; children?: Datum[] };
+
+const data: Datum[] = [
+  {
+    id: "1",
+    name: "root",
+    children: [
+      { id: "2", name: "a" },
+      { id: "3", name: "b", children: [{ id: "4", name: "c" }] },
+    ],
+  },
+];
+
+test("imperative tree.update() props survive node toggles (#228)", () => {
+  const ref = createRef<TreeApi<Datum> | undefined>();
+  render(
+    <Tree<Datum>
+      data={data}
+      ref={ref}
+      rowHeight={24}
+      openByDefault={false}
+    />
+  );
+  const api = ref.current!;
+  expect(api.rowHeight).toBe(24);
+
+  act(() => {
+    api.update({ ...api.props, rowHeight: 48 });
+  });
+  expect(api.rowHeight).toBe(48);
+
+  /* Opening a node dispatches a redux action that changes state.nodes.open.
+     Before #337, the open-state effect re-ran api.update(treeProps), reverting
+     rowHeight to 24. */
+  act(() => {
+    api.open("1");
+  });
+  expect(api.rowHeight).toBe(48);
+});

package/src/components/provider.tsx

@@ -57,7 +57,15 @@ export function TreeProvider<T>({
   useMemo(() => {
     updateCount.current += 1;
     api.update(treeProps);
-  }, [...Object.values(treeProps), state.nodes.open]);
+  }, [...Object.values(treeProps)]);
+
+  /* Rebuild visible nodes when open state changes, without clobbering
+     props set imperatively via api.update(). Bumping updateCount keeps
+     DataUpdates consumers (e.g. DefaultContainer) in sync. */
+  useMemo(() => {
+    updateCount.current += 1;
+    api.update(api.props);
+  }, [state.nodes.open]);
 
   /* Expose the tree api */
   useImperativeHandle(imperativeHandle, () => api);

package/src/interfaces/node-api.ts

@@ -59,6 +59,10 @@ export class NodeApi<T = any> {
     return this.tree.isEditable(this.data);
   }
 
+  get isSelectable() {
+    return this.tree.isSelectable(this.data);
+  }
+
   get isEditing() {
     return this.tree.editingId === this.id;
   }

package/src/interfaces/tree-api.ts

@@ -1,5 +1,5 @@
 import { EditResult } from "../types/handlers";
-import { Identity, IdObj } from "../types/utils";
+import { BoolFunc, Identity, IdObj } from "../types/utils";
 import { TreeProps } from "../types/tree-props";
 import { MutableRefObject } from "react";
 import { Align, FixedSizeList, ListOnItemsRenderedProps } from "react-window";
@@ -169,7 +169,7 @@ export class TreeApi<T> {
     return this.visibleNodes.slice(start, end + 1);
   }
 
-  indexOf(id: string | null | IdObj) {
+  indexOf(id: Identity) {
     const key = utils.identifyNull(id);
     if (!key) return null;
     return this.idToIndex[key];
@@ -219,7 +219,7 @@ export class TreeApi<T> {
     }
   }
 
-  async delete(node: string | IdObj | null | string[] | IdObj[]) {
+  async delete(node: Identity | string[] | IdObj[]) {
     if (!node) return;
     const idents = Array.isArray(node) ? node : [node];
     const ids = idents.map(identify);
@@ -256,7 +256,7 @@ export class TreeApi<T> {
     setTimeout(() => this.onFocus()); // Return focus to element;
   }
 
-  activate(id: string | IdObj | null) {
+  activate(id: Identity) {
     const node = this.get(identifyNull(id));
     if (!node) return;
     safeRun(this.props.onActivate, node);
@@ -328,14 +328,17 @@ export class TreeApi<T> {
     const changeFocus = opts.focus !== false;
     const id = identify(node);
     if (changeFocus) this.dispatch(focus(id));
-    this.dispatch(selection.only(id));
-    this.dispatch(selection.anchor(id));
-    this.dispatch(selection.mostRecent(id));
+    if (this.get(id)?.isSelectable) {
+      this.setSelection({
+        ids: [id],
+        anchor: id,
+        mostRecent: id,
+      });
+    }
     this.scrollTo(id, opts.align);
     if (this.focusedNode && changeFocus) {
       safeRun(this.props.onFocus, this.focusedNode);
     }
-    safeRun(this.props.onSelect, this.selectedNodes);
   }
 
   deselect(node: Identity) {
@@ -350,9 +353,11 @@ export class TreeApi<T> {
     if (!node) return;
     const changeFocus = opts.focus !== false;
     if (changeFocus) this.dispatch(focus(node.id));
-    this.dispatch(selection.add(node.id));
-    this.dispatch(selection.anchor(node.id));
-    this.dispatch(selection.mostRecent(node.id));
+    if (node.isSelectable) {
+      this.dispatch(selection.add(node.id));
+      this.dispatch(selection.anchor(node.id));
+      this.dispatch(selection.mostRecent(node.id));
+    }
     this.scrollTo(node, opts.align);
     if (this.focusedNode && changeFocus) {
       safeRun(this.props.onFocus, this.focusedNode);
@@ -363,11 +368,16 @@ export class TreeApi<T> {
   selectContiguous(identity: Identity) {
     if (!identity) return;
     const id = identify(identity);
-    const { anchor, mostRecent } = this.state.nodes.selection;
     this.dispatch(focus(id));
-    this.dispatch(selection.remove(this.nodesBetween(anchor, mostRecent)));
-    this.dispatch(selection.add(this.nodesBetween(anchor, identifyNull(id))));
-    this.dispatch(selection.mostRecent(id));
+    if (this.get(id)?.isSelectable) {
+      const { anchor, mostRecent } = this.state.nodes.selection;
+      const selectableNodes = this.filterSelectableNodes(
+        this.nodesBetween(anchor, identifyNull(id)),
+      );
+      this.dispatch(selection.remove(this.nodesBetween(anchor, mostRecent)));
+      this.dispatch(selection.add(selectableNodes));
+      this.dispatch(selection.mostRecent(id));
+    }
     this.scrollTo(id);
     if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
     safeRun(this.props.onSelect, this.selectedNodes);
@@ -379,20 +389,29 @@ export class TreeApi<T> {
   }
 
   selectAll() {
+    const allSelectableNodes = this.filterSelectableNodes(
+      Object.keys(this.idToIndex),
+    );
     this.setSelection({
-      ids: Object.keys(this.idToIndex),
-      anchor: this.firstNode,
-      mostRecent: this.lastNode,
+      ids: allSelectableNodes,
+      anchor: allSelectableNodes[0] ?? null,
+      mostRecent: allSelectableNodes[allSelectableNodes.length - 1] ?? null,
     });
     this.dispatch(focus(this.lastNode?.id));
     if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
     safeRun(this.props.onSelect, this.selectedNodes);
   }
 
+  private filterSelectableNodes(nodes: (IdObj | string)[]) {
+    return nodes
+      .map((n) => this.get(identify(n)))
+      .filter((n): n is NodeApi<T> => !!n && n.isSelectable);
+  }
+
   setSelection(args: {
     ids: (IdObj | string)[] | null;
-    anchor: IdObj | string | null;
-    mostRecent: IdObj | string | null;
+    anchor: Identity;
+    mostRecent: Identity;
   }) {
     const ids = new Set(args.ids?.map(identify));
     const anchor = identifyNull(args.anchor);
@@ -596,16 +615,25 @@ export class TreeApi<T> {
   }
 
   isEditable(data: T) {
-    const check = this.props.disableEdit || (() => false);
-    return !utils.access(data, check);
+    return this.isActionPossible(data, this.props.disableEdit);
   }
 
   isDraggable(data: T) {
-    const check = this.props.disableDrag || (() => false);
-    return !utils.access(data, check);
+    return this.isActionPossible(data, this.props.disableDrag);
+  }
+
+  isSelectable(data: T) {
+    return this.isActionPossible(data, this.props.disableSelect);
+  }
+
+  private isActionPossible(
+    data: T,
+    disabler: string | boolean | BoolFunc<T> = () => false,
+  ) {
+    return !utils.access(data, disabler);
   }
 
-  isDragging(node: string | IdObj | null) {
+  isDragging(node: Identity) {
     const id = identifyNull(node);
     if (!id) return false;
     return this.state.nodes.drag.id === id;
@@ -619,7 +647,7 @@ export class TreeApi<T> {
     return this.matchFn(node);
   }
 
-  willReceiveDrop(node: string | IdObj | null) {
+  willReceiveDrop(node: Identity) {
     const id = identifyNull(node);
     if (!id) return false;
     const { destinationParentId, destinationIndex } = this.state.nodes.drag;

package/src/types/tree-props.ts

@@ -41,6 +41,7 @@ export interface TreeProps<T> {
   openByDefault?: boolean;
   selectionFollowsFocus?: boolean;
   disableMultiSelection?: boolean;
+  disableSelect?: string | boolean | BoolFunc<T>;
   disableEdit?: string | boolean | BoolFunc<T>;
   disableDrag?: string | boolean | BoolFunc<T>;
   disableDrop?: