react-arborist 3.9.0 → 3.10.1

package/README.md

@@ -245,15 +245,17 @@ function App() {
 
 ### Dynamic sizing
 
-You can add a ref to it with this package [ZeeCoder/use-resize-observer](https://github.com/ZeeCoder/use-resize-observer)
+You can add a ref to it with this package [Pmndrs/react-use-measure](https://github.com/pmndrs/react-use-measure)
  
-That hook will return the height and width of the parent whenever it changes. You then pass these numbers to the Tree.
+That hook will measure the boundaries (for instance width, height, top, left) of a view you reference. Then you pass the width and the height to the Tree.
 
 ```js
-const { ref, width, height } = useResizeObserver();
+import useMeasure from "react-use-measure";
+
+const [ref, bounds] = useMeasure();
  
 <div className="parent" ref={ref}>
-  <Tree height={height} width={width} />
+  <Tree height={bounds.height} width={bounds.width} />
 </div>
 ```
 

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

@@ -18,7 +18,7 @@ let timeoutId = null;
 function DefaultContainer() {
     (0, context_1.useDataUpdates)();
     const tree = (0, context_1.useTreeApi)();
-    return ((0, jsx_runtime_1.jsx)("div", { role: "tree", style: {
+    return ((0, jsx_runtime_1.jsx)("div", { role: "tree", "aria-label": tree.props["aria-label"], "aria-labelledby": tree.props["aria-labelledby"], "aria-multiselectable": !tree.props.disableMultiSelection || undefined, style: {
             height: tree.height,
             width: tree.width,
             minHeight: 0,
@@ -144,16 +144,16 @@ function DefaultContainer() {
                 }
                 return;
             }
-            if (e.key === "a" && e.metaKey && !tree.props.disableMultiSelection) {
+            if (e.key === "a" && (e.metaKey || e.ctrlKey) && !tree.props.disableMultiSelection) {
                 e.preventDefault();
                 tree.selectAll();
                 return;
             }
-            if (e.key === "a" && !e.metaKey && tree.props.onCreate) {
+            if (e.key === "a" && !e.metaKey && !e.ctrlKey && tree.props.onCreate) {
                 tree.createLeaf();
                 return;
             }
-            if (e.key === "A" && !e.metaKey) {
+            if (e.key === "A" && !e.metaKey && !e.ctrlKey) {
                 if (!tree.props.onCreate)
                     return;
                 tree.createInternal();

package/dist/main/components/default-container.test.d.ts

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

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

@@ -0,0 +1,89 @@
+"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");
+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" }] },
+        ],
+    },
+];
+/* 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)", () => __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");
+    yield click(a);
+    expect(a.getAttribute("aria-selected")).toBe("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)", () => __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");
+    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)", () => __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");
+    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. */
+test("forwards aria-label to the role=tree element (#325)", () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, "aria-label": "File explorer" }));
+    expect(react_1.screen.getByRole("tree").getAttribute("aria-label")).toBe("File explorer");
+});
+test("forwards aria-labelledby to the role=tree element (#325)", () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, "aria-labelledby": "heading-id" }));
+    expect(react_1.screen.getByRole("tree").getAttribute("aria-labelledby")).toBe("heading-id");
+});
+test("marks the tree aria-multiselectable by default (#325)", () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data }));
+    expect(react_1.screen.getByRole("tree").getAttribute("aria-multiselectable")).toBe("true");
+});
+test("omits aria-multiselectable when multi-select is disabled (#325)", () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(tree_1.Tree, { data: data, disableMultiSelection: true }));
+    expect(react_1.screen.getByRole("tree").hasAttribute("aria-multiselectable")).toBe(false);
+});

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/interfaces/node-api.js

@@ -5,7 +5,7 @@ const create_root_1 = require("../data/create-root");
 class NodeApi {
     constructor(params) {
         this.handleClick = (e) => {
-            if (e.metaKey && !this.tree.props.disableMultiSelection) {
+            if ((e.metaKey || e.ctrlKey) && !this.tree.props.disableMultiSelection) {
                 if (this.isSelected)
                     this.deselect();
                 else

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

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

@@ -43,3 +43,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/main/types/tree-props.d.ts

@@ -50,6 +50,8 @@ export interface TreeProps<T> {
     initialOpenState?: OpenMap;
     searchTerm?: string;
     searchMatch?: (node: NodeApi<T>, searchTerm: string) => boolean;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
     className?: string | undefined;
     rowClassName?: string | undefined;
     dndRootElement?: globalThis.Node | null;

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

@@ -15,7 +15,7 @@ let timeoutId = null;
 export function DefaultContainer() {
     useDataUpdates();
     const tree = useTreeApi();
-    return (_jsx("div", { role: "tree", style: {
+    return (_jsx("div", { role: "tree", "aria-label": tree.props["aria-label"], "aria-labelledby": tree.props["aria-labelledby"], "aria-multiselectable": !tree.props.disableMultiSelection || undefined, style: {
             height: tree.height,
             width: tree.width,
             minHeight: 0,
@@ -141,16 +141,16 @@ export function DefaultContainer() {
                 }
                 return;
             }
-            if (e.key === "a" && e.metaKey && !tree.props.disableMultiSelection) {
+            if (e.key === "a" && (e.metaKey || e.ctrlKey) && !tree.props.disableMultiSelection) {
                 e.preventDefault();
                 tree.selectAll();
                 return;
             }
-            if (e.key === "a" && !e.metaKey && tree.props.onCreate) {
+            if (e.key === "a" && !e.metaKey && !e.ctrlKey && tree.props.onCreate) {
                 tree.createLeaf();
                 return;
             }
-            if (e.key === "A" && !e.metaKey) {
+            if (e.key === "A" && !e.metaKey && !e.ctrlKey) {
                 if (!tree.props.onCreate)
                     return;
                 tree.createInternal();

package/dist/module/components/default-container.test.d.ts

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

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

@@ -0,0 +1,87 @@
+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 { act, fireEvent, render, screen } 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" }] },
+        ],
+    },
+];
+/* 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)", () => __awaiter(void 0, void 0, void 0, function* () {
+    render(_jsx(Tree, { data: data, openByDefault: true }));
+    const [, a, b] = screen.getAllByRole("treeitem");
+    yield click(a);
+    expect(a.getAttribute("aria-selected")).toBe("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)", () => __awaiter(void 0, void 0, void 0, function* () {
+    render(_jsx(Tree, { data: data, openByDefault: true }));
+    const [, a, b] = screen.getAllByRole("treeitem");
+    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)", () => __awaiter(void 0, void 0, void 0, function* () {
+    render(_jsx(Tree, { data: data, openByDefault: true, disableMultiSelection: true }));
+    const [, a, b] = screen.getAllByRole("treeitem");
+    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. */
+test("forwards aria-label to the role=tree element (#325)", () => {
+    render(_jsx(Tree, { data: data, "aria-label": "File explorer" }));
+    expect(screen.getByRole("tree").getAttribute("aria-label")).toBe("File explorer");
+});
+test("forwards aria-labelledby to the role=tree element (#325)", () => {
+    render(_jsx(Tree, { data: data, "aria-labelledby": "heading-id" }));
+    expect(screen.getByRole("tree").getAttribute("aria-labelledby")).toBe("heading-id");
+});
+test("marks the tree aria-multiselectable by default (#325)", () => {
+    render(_jsx(Tree, { data: data }));
+    expect(screen.getByRole("tree").getAttribute("aria-multiselectable")).toBe("true");
+});
+test("omits aria-multiselectable when multi-select is disabled (#325)", () => {
+    render(_jsx(Tree, { data: data, disableMultiSelection: true }));
+    expect(screen.getByRole("tree").hasAttribute("aria-multiselectable")).toBe(false);
+});

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/interfaces/node-api.js

@@ -2,7 +2,7 @@ import { ROOT_ID } from "../data/create-root";
 export class NodeApi {
     constructor(params) {
         this.handleClick = (e) => {
-            if (e.metaKey && !this.tree.props.disableMultiSelection) {
+            if ((e.metaKey || e.ctrlKey) && !this.tree.props.disableMultiSelection) {
                 if (this.isSelected)
                     this.deselect();
                 else

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

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

@@ -41,3 +41,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/types/tree-props.d.ts

@@ -50,6 +50,8 @@ export interface TreeProps<T> {
     initialOpenState?: OpenMap;
     searchTerm?: string;
     searchMatch?: (node: NodeApi<T>, searchTerm: string) => boolean;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
     className?: string | undefined;
     rowClassName?: string | undefined;
     dndRootElement?: globalThis.Node | null;

package/package.json

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

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

@@ -0,0 +1,93 @@
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { Tree } from "./tree";
+
+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" }] },
+    ],
+  },
+];
+
+/* 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)", async () => {
+  render(<Tree<Datum> data={data} openByDefault />);
+  const [, a, b] = screen.getAllByRole("treeitem");
+
+  await click(a);
+  expect(a.getAttribute("aria-selected")).toBe("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)", async () => {
+  render(<Tree<Datum> data={data} openByDefault />);
+  const [, a, b] = screen.getAllByRole("treeitem");
+
+  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)", async () => {
+  render(<Tree<Datum> data={data} openByDefault disableMultiSelection />);
+  const [, a, b] = screen.getAllByRole("treeitem");
+
+  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)", () => {
+  render(<Tree<Datum> data={data} aria-label="File explorer" />);
+  expect(screen.getByRole("tree").getAttribute("aria-label")).toBe("File explorer");
+});
+
+test("forwards aria-labelledby to the role=tree element (#325)", () => {
+  render(<Tree<Datum> data={data} aria-labelledby="heading-id" />);
+  expect(screen.getByRole("tree").getAttribute("aria-labelledby")).toBe("heading-id");
+});
+
+test("marks the tree aria-multiselectable by default (#325)", () => {
+  render(<Tree<Datum> data={data} />);
+  expect(screen.getByRole("tree").getAttribute("aria-multiselectable")).toBe("true");
+});
+
+test("omits aria-multiselectable when multi-select is disabled (#325)", () => {
+  render(<Tree<Datum> data={data} disableMultiSelection />);
+  expect(screen.getByRole("tree").hasAttribute("aria-multiselectable")).toBe(false);
+});

package/src/components/default-container.tsx

@@ -19,6 +19,9 @@ export function DefaultContainer() {
   return (
     <div
       role="tree"
+      aria-label={tree.props["aria-label"]}
+      aria-labelledby={tree.props["aria-labelledby"]}
+      aria-multiselectable={!tree.props.disableMultiSelection || undefined}
       style={{
         height: tree.height,
         width: tree.width,
@@ -133,16 +136,16 @@ export function DefaultContainer() {
           }
           return;
         }
-        if (e.key === "a" && e.metaKey && !tree.props.disableMultiSelection) {
+        if (e.key === "a" && (e.metaKey || e.ctrlKey) && !tree.props.disableMultiSelection) {
           e.preventDefault();
           tree.selectAll();
           return;
         }
-        if (e.key === "a" && !e.metaKey && tree.props.onCreate) {
+        if (e.key === "a" && !e.metaKey && !e.ctrlKey && tree.props.onCreate) {
           tree.createLeaf();
           return;
         }
-        if (e.key === "A" && !e.metaKey) {
+        if (e.key === "A" && !e.metaKey && !e.ctrlKey) {
           if (!tree.props.onCreate) return;
           tree.createInternal();
           return;

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/interfaces/node-api.ts

@@ -200,7 +200,7 @@ export class NodeApi<T = any> {
   }
 
   handleClick = (e: React.MouseEvent) => {
-    if (e.metaKey && !this.tree.props.disableMultiSelection) {
+    if ((e.metaKey || e.ctrlKey) && !this.tree.props.disableMultiSelection) {
       if (this.isSelected) this.deselect();
       else this.selectMulti();
     } else if (e.shiftKey && !this.tree.props.disableMultiSelection) {

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

@@ -48,3 +48,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)[]) {

package/src/types/tree-props.ts

@@ -69,6 +69,10 @@ export interface TreeProps<T> {
   searchTerm?: string;
   searchMatch?: (node: NodeApi<T>, searchTerm: string) => boolean;
 
+  /* Accessibility */
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+
   /* Extra */
   className?: string | undefined;
   rowClassName?: string | undefined;