react-arborist 3.10.0 → 3.10.2

package/README.md

@@ -800,6 +800,22 @@ function Node({ node, style }) {
 
 Pass a partial `chars` object to override any of the default characters (e.g. for an ASCII-only style).
 
+## Contributing
+
+The package ships with Jest tests under `modules/react-arborist/src/**/*.test.ts?(x)`.
+From the package directory you can run:
+
+```bash
+cd modules/react-arborist
+yarn test
+```
+
+Good starting points:
+
+- `src/interfaces/tree-api.test.ts` for pure API behavior
+- `src/components/provider.test.tsx` for rendered tree behavior
+- `src/dnd/drag-hook.test.ts` for drag-and-drop behavior
+
 ## Author
 
 [James Kerr](https://twitter.com/specialCaseDev) at [Brim Data](https://brimdata.io) for the [Zui desktop app](https://www.youtube.com/watch?v=I2y663n8d2A).

package/dist/main/components/default-container.test.js

@@ -1,4 +1,13 @@
 "use strict";
+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());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@testing-library/react");
@@ -13,33 +22,52 @@ const data = [
         ],
     },
 ];
+/* Selecting a row kicks off tree.scrollTo(), whose promise resolves on a
+   microtask after fireEvent's synchronous act() scope has exited — the
+   resulting List scrollToItem() update would otherwise warn about not being
+   wrapped in act(). Awaiting an async act flushes that trailing update. */
+function click(el, init) {
+    return __awaiter(this, void 0, void 0, function* () {
+        yield (0, react_1.act)(() => __awaiter(this, void 0, void 0, function* () {
+            react_1.fireEvent.click(el, init);
+        }));
+    });
+}
 /* #303: multi-select should respond to Ctrl+Click (Windows) as well as
    Cmd/Meta+Click (macOS). */
-test("Ctrl+Click adds a row to the selection (#303)", () => {
+test("Ctrl+Click adds a row to the selection (#303)", () => __awaiter(void 0, void 0, void 0, function* () {
     (0, react_1.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, openByDefault: true }));
     const [, a, b] = react_1.screen.getAllByRole("treeitem");
-    react_1.fireEvent.click(a);
+    yield click(a);
     expect(a.getAttribute("aria-selected")).toBe("true");
-    react_1.fireEvent.click(b, { ctrlKey: true });
+    yield click(b, { ctrlKey: true });
     expect(a.getAttribute("aria-selected")).toBe("true");
     expect(b.getAttribute("aria-selected")).toBe("true");
-});
-test("Ctrl+Click toggles an already-selected row off (#303)", () => {
+}));
+test("Ctrl+Click toggles an already-selected row off (#303)", () => __awaiter(void 0, void 0, void 0, function* () {
     (0, react_1.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, openByDefault: true }));
     const [, a, b] = react_1.screen.getAllByRole("treeitem");
-    react_1.fireEvent.click(a);
-    react_1.fireEvent.click(b, { ctrlKey: true });
-    react_1.fireEvent.click(b, { ctrlKey: true });
+    yield click(a);
+    yield click(b, { ctrlKey: true });
+    yield click(b, { ctrlKey: true });
     expect(a.getAttribute("aria-selected")).toBe("true");
     expect(b.getAttribute("aria-selected")).toBe("false");
-});
-test("Ctrl+Click falls through to a plain select when multi-select is disabled (#303)", () => {
+}));
+test("Ctrl+Click falls through to a plain select when multi-select is disabled (#303)", () => __awaiter(void 0, void 0, void 0, function* () {
     (0, react_1.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, openByDefault: true, disableMultiSelection: true }));
     const [, a, b] = react_1.screen.getAllByRole("treeitem");
-    react_1.fireEvent.click(a);
-    react_1.fireEvent.click(b, { ctrlKey: true });
+    yield click(a);
+    yield click(b, { ctrlKey: true });
     expect(a.getAttribute("aria-selected")).toBe("false");
     expect(b.getAttribute("aria-selected")).toBe("true");
+}));
+/* #10: a row's background/selection highlight must span the full scrollable
+   width, not stop at the viewport edge, when content overflows horizontally. */
+test("rows get min-width: max-content so the highlight spans overflow (#10)", () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, openByDefault: true }));
+    for (const row of react_1.screen.getAllByRole("treeitem")) {
+        expect(row.style.minWidth).toBe("max-content");
+    }
 });
 /* #325: forward an accessible name and multiselectable state onto the
    role="tree" element. */

package/dist/main/components/row-container.js

@@ -61,7 +61,13 @@ exports.RowContainer = react_1.default.memo(function RowContainer({ index, style
     const nodeStyle = (0, react_1.useMemo)(() => ({ paddingLeft: indent }), [indent]);
     const rowStyle = (0, react_1.useMemo)(() => {
         var _a, _b;
-        return (Object.assign(Object.assign({}, style), { top: parseFloat(style.top) + ((_b = (_a = tree.props.padding) !== null && _a !== void 0 ? _a : tree.props.paddingTop) !== null && _b !== void 0 ? _b : 0) }));
+        return (Object.assign(Object.assign({}, style), { top: parseFloat(style.top) + ((_b = (_a = tree.props.padding) !== null && _a !== void 0 ? _a : tree.props.paddingTop) !== null && _b !== void 0 ? _b : 0), 
+            // react-window gives the row width: 100% of the viewport. When a deeply
+            // nested (or long) node overflows horizontally, that clips the row's
+            // background/selection highlight at the viewport edge. min-width:
+            // max-content lets the row grow with its content so the highlight spans
+            // the full scrollable width (#10).
+            minWidth: "max-content" }));
     }, [style, tree.props.padding, tree.props.paddingTop]);
     const rowAttrs = {
         role: "treeitem",

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

@@ -5,8 +5,6 @@ const react_dnd_1 = require("react-dnd");
 const context_1 = require("../context");
 const compute_drop_1 = require("./compute-drop");
 const dnd_slice_1 = require("../state/dnd-slice");
-const utils_1 = require("../utils");
-const create_root_1 = require("../data/create-root");
 function useDropHook(el, node) {
     const tree = (0, context_1.useTreeApi)();
     const [_, dropRef] = (0, react_dnd_1.useDrop)(() => ({
@@ -37,15 +35,7 @@ function useDropHook(el, node) {
         drop: (_, m) => {
             if (!m.canDrop())
                 return null;
-            let { parentId, index, dragIds } = tree.state.dnd;
-            (0, utils_1.safeRun)(tree.props.onMove, {
-                dragIds,
-                parentId: parentId === create_root_1.ROOT_ID ? null : parentId,
-                index: index === null ? 0 : index, // When it's null it was dropped over a folder
-                dragNodes: tree.dragNodes,
-                parentNode: tree.get(parentId),
-            });
-            tree.open(parentId);
+            tree.drop();
         },
     }), [node, el.current, tree.props]);
     return dropRef;

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

@@ -39,6 +39,13 @@ function useOuterDrop() {
                 tree.hideCursor();
             }
         },
+        drop: (_item, m) => {
+            if (!m.isOver({ shallow: true }))
+                return null;
+            if (!m.canDrop())
+                return null;
+            tree.drop();
+        },
     }), [tree]);
     drop(tree.listEl);
 }

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

@@ -205,6 +205,7 @@ export declare class TreeApi<T> {
     get dragDestinationParent(): NodeApi<T> | null;
     get dragDestinationIndex(): number | null;
     canDrop(): boolean;
+    drop(): void;
     hideCursor(): void;
     showCursor(cursor: Cursor): void;
     open(identity: Identity, redraw?: boolean): void;

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

@@ -463,12 +463,13 @@ class TreeApi {
         safeRun(this.props.onSelect, this.selectedNodes);
     }
     deselectAll() {
+        // setSelection fires onSelect; don't fire it again here (see #332).
         this.setSelection({ ids: [], anchor: null, mostRecent: null });
-        safeRun(this.props.onSelect, this.selectedNodes);
     }
     selectAll() {
         var _a, _b, _c;
         const allSelectableNodes = this.filterSelectableNodes(Object.keys(this.idToIndex));
+        // setSelection fires onSelect; don't fire it again here (see #332).
         this.setSelection({
             ids: allSelectableNodes,
             anchor: (_a = allSelectableNodes[0]) !== null && _a !== void 0 ? _a : null,
@@ -477,7 +478,6 @@ class TreeApi {
         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
@@ -551,6 +551,17 @@ class TreeApi {
             return true;
         }
     }
+    drop() {
+        const { parentId, index, dragIds } = this.state.dnd;
+        safeRun(this.props.onMove, {
+            dragIds,
+            parentId: parentId === create_root_1.ROOT_ID ? null : parentId,
+            index: index === null ? 0 : index, // When it's null it was dropped over a folder
+            dragNodes: this.dragNodes,
+            parentNode: this.get(parentId),
+        });
+        this.open(parentId);
+    }
     hideCursor() {
         this.dispatch(dnd_slice_1.actions.cursor({ type: "none" }));
     }

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const redux_1 = require("redux");
 const root_reducer_1 = require("../state/root-reducer");
+const dnd_slice_1 = require("../state/dnd-slice");
 const tree_api_1 = require("./tree-api");
 function setupApi(props) {
     const store = (0, redux_1.createStore)(root_reducer_1.rootReducer);
@@ -13,6 +14,30 @@ test("tree.canDrop()", () => {
     expect(setupApi({ disableDrop: false }).canDrop()).toBe(true);
 });
 const rowData = [{ id: "a" }, { id: "b" }, { id: "c" }];
+describe("tree.drop() fires onMove (#313)", () => {
+    test("reports the hovered parent and index, mapping the root id to null", () => {
+        const onMove = jest.fn();
+        const api = setupApi({ data: rowData, onMove });
+        // The bottom drop zone hovers the root with an index past the end, just like
+        // computeDrop() reports it. tree.drop() should map the root id back to null.
+        api.dispatch(dnd_slice_1.actions.dragStart("a", ["a"]));
+        api.dispatch(dnd_slice_1.actions.hovering(api.root.id, 3));
+        api.drop();
+        expect(onMove).toHaveBeenCalledTimes(1);
+        expect(onMove).toHaveBeenCalledWith(expect.objectContaining({ dragIds: ["a"], parentId: null, index: 3 }));
+    });
+    test("coerces a null index (dropped onto a folder) to 0", () => {
+        const onMove = jest.fn();
+        const folderData = [{ id: "folder", children: [{ id: "child" }] }];
+        const api = setupApi({ data: folderData, onMove });
+        // Dropping onto a folder (rather than between rows) reports the folder as the
+        // parent with a null index, which tree.drop() should coerce to 0.
+        api.dispatch(dnd_slice_1.actions.dragStart("child", ["child"]));
+        api.dispatch(dnd_slice_1.actions.hovering("folder", null));
+        api.drop();
+        expect(onMove).toHaveBeenCalledWith(expect.objectContaining({ parentId: "folder", index: 0 }));
+    });
+});
 test("rowHeight defaults to 24", () => {
     const api = setupApi({});
     expect(api.rowHeight).toBe(24);
@@ -43,3 +68,54 @@ test("variable rowHeight function", () => {
     // Out-of-range index falls back to the default height, never an invalid 0.
     expect(api.rowHeightAt(99)).toBe(24);
 });
+describe("onSelect fires exactly once per selection method (#332)", () => {
+    function setupWithSpy() {
+        const onSelect = jest.fn();
+        const api = setupApi({ data: rowData, onSelect });
+        return { api, onSelect };
+    }
+    test("setSelection", () => {
+        const { api, onSelect } = setupWithSpy();
+        api.setSelection({ ids: ["a"], anchor: "a", mostRecent: "a" });
+        expect(onSelect).toHaveBeenCalledTimes(1);
+    });
+    test("select", () => {
+        const { api, onSelect } = setupWithSpy();
+        api.select("a");
+        expect(onSelect).toHaveBeenCalledTimes(1);
+    });
+    test("selectMulti", () => {
+        const { api, onSelect } = setupWithSpy();
+        api.selectMulti("a");
+        expect(onSelect).toHaveBeenCalledTimes(1);
+    });
+    test("selectContiguous", () => {
+        const { api, onSelect } = setupWithSpy();
+        api.select("a");
+        onSelect.mockClear();
+        api.selectContiguous("c");
+        expect(onSelect).toHaveBeenCalledTimes(1);
+    });
+    test("selectAll", () => {
+        const { api, onSelect } = setupWithSpy();
+        api.selectAll();
+        expect(api.selectedIds.size).toBe(3);
+        expect(onSelect).toHaveBeenCalledTimes(1);
+    });
+    test("deselectAll", () => {
+        const { api, onSelect } = setupWithSpy();
+        api.selectAll();
+        onSelect.mockClear();
+        api.deselectAll();
+        expect(api.selectedIds.size).toBe(0);
+        expect(onSelect).toHaveBeenCalledTimes(1);
+    });
+    test("deselect", () => {
+        const { api, onSelect } = setupWithSpy();
+        api.selectMulti("a");
+        api.selectMulti("b");
+        onSelect.mockClear();
+        api.deselect("a");
+        expect(onSelect).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/module/components/default-container.test.js

@@ -1,5 +1,14 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
 import { Tree } from "./tree";
 const data = [
     {
@@ -11,33 +20,52 @@ const data = [
         ],
     },
 ];
+/* Selecting a row kicks off tree.scrollTo(), whose promise resolves on a
+   microtask after fireEvent's synchronous act() scope has exited — the
+   resulting List scrollToItem() update would otherwise warn about not being
+   wrapped in act(). Awaiting an async act flushes that trailing update. */
+function click(el, init) {
+    return __awaiter(this, void 0, void 0, function* () {
+        yield act(() => __awaiter(this, void 0, void 0, function* () {
+            fireEvent.click(el, init);
+        }));
+    });
+}
 /* #303: multi-select should respond to Ctrl+Click (Windows) as well as
    Cmd/Meta+Click (macOS). */
-test("Ctrl+Click adds a row to the selection (#303)", () => {
+test("Ctrl+Click adds a row to the selection (#303)", () => __awaiter(void 0, void 0, void 0, function* () {
     render(_jsx(Tree, { data: data, openByDefault: true }));
     const [, a, b] = screen.getAllByRole("treeitem");
-    fireEvent.click(a);
+    yield click(a);
     expect(a.getAttribute("aria-selected")).toBe("true");
-    fireEvent.click(b, { ctrlKey: true });
+    yield click(b, { ctrlKey: true });
     expect(a.getAttribute("aria-selected")).toBe("true");
     expect(b.getAttribute("aria-selected")).toBe("true");
-});
-test("Ctrl+Click toggles an already-selected row off (#303)", () => {
+}));
+test("Ctrl+Click toggles an already-selected row off (#303)", () => __awaiter(void 0, void 0, void 0, function* () {
     render(_jsx(Tree, { data: data, openByDefault: true }));
     const [, a, b] = screen.getAllByRole("treeitem");
-    fireEvent.click(a);
-    fireEvent.click(b, { ctrlKey: true });
-    fireEvent.click(b, { ctrlKey: true });
+    yield click(a);
+    yield click(b, { ctrlKey: true });
+    yield click(b, { ctrlKey: true });
     expect(a.getAttribute("aria-selected")).toBe("true");
     expect(b.getAttribute("aria-selected")).toBe("false");
-});
-test("Ctrl+Click falls through to a plain select when multi-select is disabled (#303)", () => {
+}));
+test("Ctrl+Click falls through to a plain select when multi-select is disabled (#303)", () => __awaiter(void 0, void 0, void 0, function* () {
     render(_jsx(Tree, { data: data, openByDefault: true, disableMultiSelection: true }));
     const [, a, b] = screen.getAllByRole("treeitem");
-    fireEvent.click(a);
-    fireEvent.click(b, { ctrlKey: true });
+    yield click(a);
+    yield click(b, { ctrlKey: true });
     expect(a.getAttribute("aria-selected")).toBe("false");
     expect(b.getAttribute("aria-selected")).toBe("true");
+}));
+/* #10: a row's background/selection highlight must span the full scrollable
+   width, not stop at the viewport edge, when content overflows horizontally. */
+test("rows get min-width: max-content so the highlight spans overflow (#10)", () => {
+    render(_jsx(Tree, { data: data, openByDefault: true }));
+    for (const row of screen.getAllByRole("treeitem")) {
+        expect(row.style.minWidth).toBe("max-content");
+    }
 });
 /* #325: forward an accessible name and multiselectable state onto the
    role="tree" element. */

package/dist/module/components/row-container.js

@@ -35,7 +35,13 @@ export const RowContainer = React.memo(function RowContainer({ index, style }) {
     const nodeStyle = useMemo(() => ({ paddingLeft: indent }), [indent]);
     const rowStyle = useMemo(() => {
         var _a, _b;
-        return (Object.assign(Object.assign({}, style), { top: parseFloat(style.top) + ((_b = (_a = tree.props.padding) !== null && _a !== void 0 ? _a : tree.props.paddingTop) !== null && _b !== void 0 ? _b : 0) }));
+        return (Object.assign(Object.assign({}, style), { top: parseFloat(style.top) + ((_b = (_a = tree.props.padding) !== null && _a !== void 0 ? _a : tree.props.paddingTop) !== null && _b !== void 0 ? _b : 0), 
+            // react-window gives the row width: 100% of the viewport. When a deeply
+            // nested (or long) node overflows horizontally, that clips the row's
+            // background/selection highlight at the viewport edge. min-width:
+            // max-content lets the row grow with its content so the highlight spans
+            // the full scrollable width (#10).
+            minWidth: "max-content" }));
     }, [style, tree.props.padding, tree.props.paddingTop]);
     const rowAttrs = {
         role: "treeitem",

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

@@ -2,8 +2,6 @@ import { useDrop } from "react-dnd";
 import { useTreeApi } from "../context";
 import { computeDrop } from "./compute-drop";
 import { actions as dnd } from "../state/dnd-slice";
-import { safeRun } from "../utils";
-import { ROOT_ID } from "../data/create-root";
 export function useDropHook(el, node) {
     const tree = useTreeApi();
     const [_, dropRef] = useDrop(() => ({
@@ -34,15 +32,7 @@ export function useDropHook(el, node) {
         drop: (_, m) => {
             if (!m.canDrop())
                 return null;
-            let { parentId, index, dragIds } = tree.state.dnd;
-            safeRun(tree.props.onMove, {
-                dragIds,
-                parentId: parentId === ROOT_ID ? null : parentId,
-                index: index === null ? 0 : index, // When it's null it was dropped over a folder
-                dragNodes: tree.dragNodes,
-                parentNode: tree.get(parentId),
-            });
-            tree.open(parentId);
+            tree.drop();
         },
     }), [node, el.current, tree.props]);
     return dropRef;

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

@@ -36,6 +36,13 @@ export function useOuterDrop() {
                 tree.hideCursor();
             }
         },
+        drop: (_item, m) => {
+            if (!m.isOver({ shallow: true }))
+                return null;
+            if (!m.canDrop())
+                return null;
+            tree.drop();
+        },
     }), [tree]);
     drop(tree.listEl);
 }

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

@@ -205,6 +205,7 @@ export declare class TreeApi<T> {
     get dragDestinationParent(): NodeApi<T> | null;
     get dragDestinationIndex(): number | null;
     canDrop(): boolean;
+    drop(): void;
     hideCursor(): void;
     showCursor(cursor: Cursor): void;
     open(identity: Identity, redraw?: boolean): void;

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

@@ -437,12 +437,13 @@ export class TreeApi {
         safeRun(this.props.onSelect, this.selectedNodes);
     }
     deselectAll() {
+        // setSelection fires onSelect; don't fire it again here (see #332).
         this.setSelection({ ids: [], anchor: null, mostRecent: null });
-        safeRun(this.props.onSelect, this.selectedNodes);
     }
     selectAll() {
         var _a, _b, _c;
         const allSelectableNodes = this.filterSelectableNodes(Object.keys(this.idToIndex));
+        // setSelection fires onSelect; don't fire it again here (see #332).
         this.setSelection({
             ids: allSelectableNodes,
             anchor: (_a = allSelectableNodes[0]) !== null && _a !== void 0 ? _a : null,
@@ -451,7 +452,6 @@ export class TreeApi {
         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
@@ -525,6 +525,17 @@ export class TreeApi {
             return true;
         }
     }
+    drop() {
+        const { parentId, index, dragIds } = this.state.dnd;
+        safeRun(this.props.onMove, {
+            dragIds,
+            parentId: parentId === ROOT_ID ? null : parentId,
+            index: index === null ? 0 : index, // When it's null it was dropped over a folder
+            dragNodes: this.dragNodes,
+            parentNode: this.get(parentId),
+        });
+        this.open(parentId);
+    }
     hideCursor() {
         this.dispatch(dnd.cursor({ type: "none" }));
     }

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

@@ -1,5 +1,6 @@
 import { createStore } from "redux";
 import { rootReducer } from "../state/root-reducer";
+import { actions as dnd } from "../state/dnd-slice";
 import { TreeApi } from "./tree-api";
 function setupApi(props) {
     const store = createStore(rootReducer);
@@ -11,6 +12,30 @@ test("tree.canDrop()", () => {
     expect(setupApi({ disableDrop: false }).canDrop()).toBe(true);
 });
 const rowData = [{ id: "a" }, { id: "b" }, { id: "c" }];
+describe("tree.drop() fires onMove (#313)", () => {
+    test("reports the hovered parent and index, mapping the root id to null", () => {
+        const onMove = jest.fn();
+        const api = setupApi({ data: rowData, onMove });
+        // The bottom drop zone hovers the root with an index past the end, just like
+        // computeDrop() reports it. tree.drop() should map the root id back to null.
+        api.dispatch(dnd.dragStart("a", ["a"]));
+        api.dispatch(dnd.hovering(api.root.id, 3));
+        api.drop();
+        expect(onMove).toHaveBeenCalledTimes(1);
+        expect(onMove).toHaveBeenCalledWith(expect.objectContaining({ dragIds: ["a"], parentId: null, index: 3 }));
+    });
+    test("coerces a null index (dropped onto a folder) to 0", () => {
+        const onMove = jest.fn();
+        const folderData = [{ id: "folder", children: [{ id: "child" }] }];
+        const api = setupApi({ data: folderData, onMove });
+        // Dropping onto a folder (rather than between rows) reports the folder as the
+        // parent with a null index, which tree.drop() should coerce to 0.
+        api.dispatch(dnd.dragStart("child", ["child"]));
+        api.dispatch(dnd.hovering("folder", null));
+        api.drop();
+        expect(onMove).toHaveBeenCalledWith(expect.objectContaining({ parentId: "folder", index: 0 }));
+    });
+});
 test("rowHeight defaults to 24", () => {
     const api = setupApi({});
     expect(api.rowHeight).toBe(24);
@@ -41,3 +66,54 @@ test("variable rowHeight function", () => {
     // Out-of-range index falls back to the default height, never an invalid 0.
     expect(api.rowHeightAt(99)).toBe(24);
 });
+describe("onSelect fires exactly once per selection method (#332)", () => {
+    function setupWithSpy() {
+        const onSelect = jest.fn();
+        const api = setupApi({ data: rowData, onSelect });
+        return { api, onSelect };
+    }
+    test("setSelection", () => {
+        const { api, onSelect } = setupWithSpy();
+        api.setSelection({ ids: ["a"], anchor: "a", mostRecent: "a" });
+        expect(onSelect).toHaveBeenCalledTimes(1);
+    });
+    test("select", () => {
+        const { api, onSelect } = setupWithSpy();
+        api.select("a");
+        expect(onSelect).toHaveBeenCalledTimes(1);
+    });
+    test("selectMulti", () => {
+        const { api, onSelect } = setupWithSpy();
+        api.selectMulti("a");
+        expect(onSelect).toHaveBeenCalledTimes(1);
+    });
+    test("selectContiguous", () => {
+        const { api, onSelect } = setupWithSpy();
+        api.select("a");
+        onSelect.mockClear();
+        api.selectContiguous("c");
+        expect(onSelect).toHaveBeenCalledTimes(1);
+    });
+    test("selectAll", () => {
+        const { api, onSelect } = setupWithSpy();
+        api.selectAll();
+        expect(api.selectedIds.size).toBe(3);
+        expect(onSelect).toHaveBeenCalledTimes(1);
+    });
+    test("deselectAll", () => {
+        const { api, onSelect } = setupWithSpy();
+        api.selectAll();
+        onSelect.mockClear();
+        api.deselectAll();
+        expect(api.selectedIds.size).toBe(0);
+        expect(onSelect).toHaveBeenCalledTimes(1);
+    });
+    test("deselect", () => {
+        const { api, onSelect } = setupWithSpy();
+        api.selectMulti("a");
+        api.selectMulti("b");
+        onSelect.mockClear();
+        api.deselect("a");
+        expect(onSelect).toHaveBeenCalledTimes(1);
+    });
+});

package/package.json

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

package/src/components/default-container.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
 import { Tree } from "./tree";
 
 type Datum = { id: string; name: string; children?: Datum[] };
@@ -14,43 +14,62 @@ const data: Datum[] = [
   },
 ];
 
+/* Selecting a row kicks off tree.scrollTo(), whose promise resolves on a
+   microtask after fireEvent's synchronous act() scope has exited — the
+   resulting List scrollToItem() update would otherwise warn about not being
+   wrapped in act(). Awaiting an async act flushes that trailing update. */
+async function click(el: Element, init?: MouseEventInit) {
+  await act(async () => {
+    fireEvent.click(el, init);
+  });
+}
+
 /* #303: multi-select should respond to Ctrl+Click (Windows) as well as
    Cmd/Meta+Click (macOS). */
-test("Ctrl+Click adds a row to the selection (#303)", () => {
+test("Ctrl+Click adds a row to the selection (#303)", async () => {
   render(<Tree<Datum> data={data} openByDefault />);
   const [, a, b] = screen.getAllByRole("treeitem");
 
-  fireEvent.click(a);
+  await click(a);
   expect(a.getAttribute("aria-selected")).toBe("true");
 
-  fireEvent.click(b, { ctrlKey: true });
+  await click(b, { ctrlKey: true });
   expect(a.getAttribute("aria-selected")).toBe("true");
   expect(b.getAttribute("aria-selected")).toBe("true");
 });
 
-test("Ctrl+Click toggles an already-selected row off (#303)", () => {
+test("Ctrl+Click toggles an already-selected row off (#303)", async () => {
   render(<Tree<Datum> data={data} openByDefault />);
   const [, a, b] = screen.getAllByRole("treeitem");
 
-  fireEvent.click(a);
-  fireEvent.click(b, { ctrlKey: true });
-  fireEvent.click(b, { ctrlKey: true });
+  await click(a);
+  await click(b, { ctrlKey: true });
+  await click(b, { ctrlKey: true });
 
   expect(a.getAttribute("aria-selected")).toBe("true");
   expect(b.getAttribute("aria-selected")).toBe("false");
 });
 
-test("Ctrl+Click falls through to a plain select when multi-select is disabled (#303)", () => {
+test("Ctrl+Click falls through to a plain select when multi-select is disabled (#303)", async () => {
   render(<Tree<Datum> data={data} openByDefault disableMultiSelection />);
   const [, a, b] = screen.getAllByRole("treeitem");
 
-  fireEvent.click(a);
-  fireEvent.click(b, { ctrlKey: true });
+  await click(a);
+  await click(b, { ctrlKey: true });
 
   expect(a.getAttribute("aria-selected")).toBe("false");
   expect(b.getAttribute("aria-selected")).toBe("true");
 });
 
+/* #10: a row's background/selection highlight must span the full scrollable
+   width, not stop at the viewport edge, when content overflows horizontally. */
+test("rows get min-width: max-content so the highlight spans overflow (#10)", () => {
+  render(<Tree<Datum> data={data} openByDefault />);
+  for (const row of screen.getAllByRole("treeitem")) {
+    expect((row as HTMLElement).style.minWidth).toBe("max-content");
+  }
+});
+
 /* #325: forward an accessible name and multiselectable state onto the
    role="tree" element. */
 test("forwards aria-label to the role=tree element (#325)", () => {

package/src/components/row-container.tsx

@@ -48,6 +48,12 @@ export const RowContainer = React.memo(function RowContainer<T>({ index, style }
     () => ({
       ...style,
       top: parseFloat(style.top as string) + (tree.props.padding ?? tree.props.paddingTop ?? 0),
+      // react-window gives the row width: 100% of the viewport. When a deeply
+      // nested (or long) node overflows horizontally, that clips the row's
+      // background/selection highlight at the viewport edge. min-width:
+      // max-content lets the row grow with its content so the highlight spans
+      // the full scrollable width (#10).
+      minWidth: "max-content",
     }),
     [style, tree.props.padding, tree.props.paddingTop],
   );

package/src/dnd/drop-hook.ts

@@ -5,8 +5,6 @@ import { NodeApi } from "../interfaces/node-api";
 import { DragItem } from "../types/dnd";
 import { computeDrop } from "./compute-drop";
 import { actions as dnd } from "../state/dnd-slice";
-import { safeRun } from "../utils";
-import { ROOT_ID } from "../data/create-root";
 
 export type DropResult = {
   parentId: string | null;
@@ -43,15 +41,7 @@ export function useDropHook(
       },
       drop: (_, m) => {
         if (!m.canDrop()) return null;
-        let { parentId, index, dragIds } = tree.state.dnd;
-        safeRun(tree.props.onMove, {
-          dragIds,
-          parentId: parentId === ROOT_ID ? null : parentId,
-          index: index === null ? 0 : index, // When it's null it was dropped over a folder
-          dragNodes: tree.dragNodes,
-          parentNode: tree.get(parentId),
-        });
-        tree.open(parentId);
+        tree.drop();
       },
     }),
     [node, el.current, tree.props],

package/src/dnd/outer-drop-hook.ts

@@ -36,6 +36,11 @@ export function useOuterDrop() {
           tree.hideCursor();
         }
       },
+      drop: (_item, m) => {
+        if (!m.isOver({ shallow: true })) return null;
+        if (!m.canDrop()) return null;
+        tree.drop();
+      },
     }),
     [tree],
   );

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

@@ -1,5 +1,6 @@
 import { createStore } from "redux";
 import { rootReducer } from "../state/root-reducer";
+import { actions as dnd } from "../state/dnd-slice";
 import { TreeProps } from "../types/tree-props";
 import { TreeApi } from "./tree-api";
 
@@ -16,6 +17,36 @@ test("tree.canDrop()", () => {
 
 const rowData = [{ id: "a" }, { id: "b" }, { id: "c" }];
 
+describe("tree.drop() fires onMove (#313)", () => {
+  test("reports the hovered parent and index, mapping the root id to null", () => {
+    const onMove = jest.fn();
+    const api = setupApi({ data: rowData, onMove });
+    // The bottom drop zone hovers the root with an index past the end, just like
+    // computeDrop() reports it. tree.drop() should map the root id back to null.
+    api.dispatch(dnd.dragStart("a", ["a"]));
+    api.dispatch(dnd.hovering(api.root.id, 3));
+    api.drop();
+    expect(onMove).toHaveBeenCalledTimes(1);
+    expect(onMove).toHaveBeenCalledWith(
+      expect.objectContaining({ dragIds: ["a"], parentId: null, index: 3 }),
+    );
+  });
+
+  test("coerces a null index (dropped onto a folder) to 0", () => {
+    const onMove = jest.fn();
+    const folderData = [{ id: "folder", children: [{ id: "child" }] }];
+    const api = setupApi({ data: folderData, onMove });
+    // Dropping onto a folder (rather than between rows) reports the folder as the
+    // parent with a null index, which tree.drop() should coerce to 0.
+    api.dispatch(dnd.dragStart("child", ["child"]));
+    api.dispatch(dnd.hovering("folder", null));
+    api.drop();
+    expect(onMove).toHaveBeenCalledWith(
+      expect.objectContaining({ parentId: "folder", index: 0 }),
+    );
+  });
+});
+
 test("rowHeight defaults to 24", () => {
   const api = setupApi({});
   expect(api.rowHeight).toBe(24);
@@ -48,3 +79,62 @@ test("variable rowHeight function", () => {
   // Out-of-range index falls back to the default height, never an invalid 0.
   expect(api.rowHeightAt(99)).toBe(24);
 });
+
+describe("onSelect fires exactly once per selection method (#332)", () => {
+  function setupWithSpy() {
+    const onSelect = jest.fn();
+    const api = setupApi({ data: rowData, onSelect });
+    return { api, onSelect };
+  }
+
+  test("setSelection", () => {
+    const { api, onSelect } = setupWithSpy();
+    api.setSelection({ ids: ["a"], anchor: "a", mostRecent: "a" });
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  test("select", () => {
+    const { api, onSelect } = setupWithSpy();
+    api.select("a");
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  test("selectMulti", () => {
+    const { api, onSelect } = setupWithSpy();
+    api.selectMulti("a");
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  test("selectContiguous", () => {
+    const { api, onSelect } = setupWithSpy();
+    api.select("a");
+    onSelect.mockClear();
+    api.selectContiguous("c");
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  test("selectAll", () => {
+    const { api, onSelect } = setupWithSpy();
+    api.selectAll();
+    expect(api.selectedIds.size).toBe(3);
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  test("deselectAll", () => {
+    const { api, onSelect } = setupWithSpy();
+    api.selectAll();
+    onSelect.mockClear();
+    api.deselectAll();
+    expect(api.selectedIds.size).toBe(0);
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  test("deselect", () => {
+    const { api, onSelect } = setupWithSpy();
+    api.selectMulti("a");
+    api.selectMulti("b");
+    onSelect.mockClear();
+    api.deselect("a");
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+});

package/src/interfaces/tree-api.ts

@@ -455,12 +455,13 @@ export class TreeApi<T> {
   }
 
   deselectAll() {
+    // setSelection fires onSelect; don't fire it again here (see #332).
     this.setSelection({ ids: [], anchor: null, mostRecent: null });
-    safeRun(this.props.onSelect, this.selectedNodes);
   }
 
   selectAll() {
     const allSelectableNodes = this.filterSelectableNodes(Object.keys(this.idToIndex));
+    // setSelection fires onSelect; don't fire it again here (see #332).
     this.setSelection({
       ids: allSelectableNodes,
       anchor: allSelectableNodes[0] ?? null,
@@ -468,7 +469,6 @@ export class TreeApi<T> {
     });
     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)[]) {
@@ -546,6 +546,18 @@ export class TreeApi<T> {
     }
   }
 
+  drop() {
+    const { parentId, index, dragIds } = this.state.dnd;
+    safeRun(this.props.onMove, {
+      dragIds,
+      parentId: parentId === ROOT_ID ? null : parentId,
+      index: index === null ? 0 : index, // When it's null it was dropped over a folder
+      dragNodes: this.dragNodes,
+      parentNode: this.get(parentId),
+    });
+    this.open(parentId);
+  }
+
   hideCursor() {
     this.dispatch(dnd.cursor({ type: "none" }));
   }