react-arborist 3.8.0 → 3.10.0

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>
 ```
 
@@ -351,9 +353,23 @@ interface TreeProps<T> {
     { backend: unknown }
   >["backend"];
   dndManager?: ReturnType<typeof useDragDropManager>;
+  dragType?: string | ((node: NodeApi<T>) => string);
 }
 ```
 
+### Dragging Nodes to External Drop Targets
+
+The react-dnd drag item created for each row carries the dragged node's `data`, so a drop target rendered outside the tree can read it:
+
+```tsx
+const [, drop] = useDrop(() => ({
+  accept: "NODE",
+  drop: (item) => console.log(item.data), // the dragged node's data
+}));
+```
+
+The tree and your external target must share one react-dnd backend. Wrap both in a single `DndProvider` and pass its manager to the tree via the `dndManager` prop. By default rows advertise the `"NODE"` item type; set the `dragType` prop (a fixed string, or a function of the node) to advertise a custom type instead. Note that the tree's own drop targets only accept `"NODE"`, so a row given a custom `dragType` is no longer reorderable within the tree.
+
 ## Row Component Props
 
 The _\<RowRenderer\>_ is responsible for attaching the drop ref, the row style (top, height) and the aria-attributes. The default should work fine for most use cases, but it can be replaced by your own component if you need. See the _renderRow_ prop in the _\<Tree\>_ component.

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,61 @@
+"use strict";
+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" }] },
+        ],
+    },
+];
+/* #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)", () => {
+    (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);
+    expect(a.getAttribute("aria-selected")).toBe("true");
+    react_1.fireEvent.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)", () => {
+    (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 });
+    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)", () => {
+    (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 });
+    expect(a.getAttribute("aria-selected")).toBe("false");
+    expect(b.getAttribute("aria-selected")).toBe("true");
+});
+/* #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/dnd/drag-hook.d.ts

@@ -1,3 +1,5 @@
 import { ConnectDragSource } from "react-dnd";
 import { NodeApi } from "../interfaces/node-api";
+import { TreeProps } from "../types/tree-props";
+export declare function dragTypeForNode<T>(dragType: TreeProps<T>["dragType"], node: NodeApi<T>): string;
 export declare function useDragHook<T>(node: NodeApi<T>): ConnectDragSource;

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

@@ -1,29 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.dragTypeForNode = dragTypeForNode;
 exports.useDragHook = useDragHook;
 const react_1 = require("react");
 const react_dnd_1 = require("react-dnd");
 const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
 const context_1 = require("../context");
 const dnd_slice_1 = require("../state/dnd-slice");
+/* The react-dnd item type a row's drag source broadcasts. The dragType prop
+   can be a fixed string or a per-node function; it defaults to "NODE". */
+function dragTypeForNode(dragType, node) {
+    if (typeof dragType === "function")
+        return dragType(node);
+    return dragType !== null && dragType !== void 0 ? dragType : "NODE";
+}
 function useDragHook(node) {
     const tree = (0, context_1.useTreeApi)();
     const ids = tree.selectedIds;
     const [_, ref, preview] = (0, react_dnd_1.useDrag)(() => ({
         canDrag: () => node.isDraggable,
-        type: "NODE",
+        type: dragTypeForNode(tree.props.dragType, node),
         item: () => {
-            // This is fired once at the begging of a drag operation
+            // This is fired once at the beginning of a drag operation
             const dragIds = tree.isSelected(node.id) ? Array.from(ids) : [node.id];
             tree.dispatch(dnd_slice_1.actions.dragStart(node.id, dragIds));
-            return { id: node.id, dragIds };
+            return { id: node.id, dragIds, data: node.data };
         },
         end: () => {
             tree.hideCursor();
             tree.redrawList();
             tree.dispatch(dnd_slice_1.actions.dragEnd());
         },
-    }), [ids, node]);
+    }), [ids, node, tree.props.dragType]);
     (0, react_1.useEffect)(() => {
         preview((0, react_dnd_html5_backend_1.getEmptyImage)());
     }, [preview]);

package/dist/main/dnd/drag-hook.test.d.ts

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

package/dist/main/dnd/drag-hook.test.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const drag_hook_1 = require("./drag-hook");
+/* dragTypeForNode only reads node.data when dragType is a function, so a
+   minimal stub stands in for a real NodeApi. */
+function nodeWith(data) {
+    return { data };
+}
+test("defaults to the internal NODE type when dragType is undefined", () => {
+    expect((0, drag_hook_1.dragTypeForNode)(undefined, nodeWith({ id: "a" }))).toBe("NODE");
+});
+test("uses a fixed string dragType for every node", () => {
+    expect((0, drag_hook_1.dragTypeForNode)("FILE", nodeWith({ id: "a" }))).toBe("FILE");
+});
+test("resolves a per-node dragType function against the node", () => {
+    const dragType = (node) => node.data.kind.toUpperCase();
+    expect((0, drag_hook_1.dragTypeForNode)(dragType, nodeWith({ kind: "folder" }))).toBe("FOLDER");
+    expect((0, drag_hook_1.dragTypeForNode)(dragType, nodeWith({ kind: "file" }))).toBe("FILE");
+});

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/types/dnd.d.ts

@@ -3,6 +3,8 @@ export type CursorLocation = {
     level: number | null;
     parentId: string | null;
 };
-export type DragItem = {
+export type DragItem<T = any> = {
     id: string;
+    dragIds: string[];
+    data: T;
 };

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;
@@ -59,6 +61,7 @@ export interface TreeProps<T> {
         backend: unknown;
     }>["backend"];
     dndManager?: ReturnType<typeof useDragDropManager>;
+    dragType?: string | ((node: NodeApi<T>) => string);
     outerElementType?: ReactWindowCommonProps["outerElementType"];
     innerElementType?: ReactWindowCommonProps["innerElementType"];
 }

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,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { 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" }] },
+        ],
+    },
+];
+/* #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)", () => {
+    render(_jsx(Tree, { data: data, openByDefault: true }));
+    const [, a, b] = screen.getAllByRole("treeitem");
+    fireEvent.click(a);
+    expect(a.getAttribute("aria-selected")).toBe("true");
+    fireEvent.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)", () => {
+    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 });
+    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)", () => {
+    render(_jsx(Tree, { data: data, openByDefault: true, disableMultiSelection: true }));
+    const [, a, b] = screen.getAllByRole("treeitem");
+    fireEvent.click(a);
+    fireEvent.click(b, { ctrlKey: true });
+    expect(a.getAttribute("aria-selected")).toBe("false");
+    expect(b.getAttribute("aria-selected")).toBe("true");
+});
+/* #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/dnd/drag-hook.d.ts

@@ -1,3 +1,5 @@
 import { ConnectDragSource } from "react-dnd";
 import { NodeApi } from "../interfaces/node-api";
+import { TreeProps } from "../types/tree-props";
+export declare function dragTypeForNode<T>(dragType: TreeProps<T>["dragType"], node: NodeApi<T>): string;
 export declare function useDragHook<T>(node: NodeApi<T>): ConnectDragSource;

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

@@ -3,24 +3,31 @@ import { useDrag } from "react-dnd";
 import { getEmptyImage } from "react-dnd-html5-backend";
 import { useTreeApi } from "../context";
 import { actions as dnd } from "../state/dnd-slice";
+/* The react-dnd item type a row's drag source broadcasts. The dragType prop
+   can be a fixed string or a per-node function; it defaults to "NODE". */
+export function dragTypeForNode(dragType, node) {
+    if (typeof dragType === "function")
+        return dragType(node);
+    return dragType !== null && dragType !== void 0 ? dragType : "NODE";
+}
 export function useDragHook(node) {
     const tree = useTreeApi();
     const ids = tree.selectedIds;
     const [_, ref, preview] = useDrag(() => ({
         canDrag: () => node.isDraggable,
-        type: "NODE",
+        type: dragTypeForNode(tree.props.dragType, node),
         item: () => {
-            // This is fired once at the begging of a drag operation
+            // This is fired once at the beginning of a drag operation
             const dragIds = tree.isSelected(node.id) ? Array.from(ids) : [node.id];
             tree.dispatch(dnd.dragStart(node.id, dragIds));
-            return { id: node.id, dragIds };
+            return { id: node.id, dragIds, data: node.data };
         },
         end: () => {
             tree.hideCursor();
             tree.redrawList();
             tree.dispatch(dnd.dragEnd());
         },
-    }), [ids, node]);
+    }), [ids, node, tree.props.dragType]);
     useEffect(() => {
         preview(getEmptyImage());
     }, [preview]);

package/dist/module/dnd/drag-hook.test.d.ts

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

package/dist/module/dnd/drag-hook.test.js

@@ -0,0 +1,17 @@
+import { dragTypeForNode } from "./drag-hook";
+/* dragTypeForNode only reads node.data when dragType is a function, so a
+   minimal stub stands in for a real NodeApi. */
+function nodeWith(data) {
+    return { data };
+}
+test("defaults to the internal NODE type when dragType is undefined", () => {
+    expect(dragTypeForNode(undefined, nodeWith({ id: "a" }))).toBe("NODE");
+});
+test("uses a fixed string dragType for every node", () => {
+    expect(dragTypeForNode("FILE", nodeWith({ id: "a" }))).toBe("FILE");
+});
+test("resolves a per-node dragType function against the node", () => {
+    const dragType = (node) => node.data.kind.toUpperCase();
+    expect(dragTypeForNode(dragType, nodeWith({ kind: "folder" }))).toBe("FOLDER");
+    expect(dragTypeForNode(dragType, nodeWith({ kind: "file" }))).toBe("FILE");
+});

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/types/dnd.d.ts

@@ -3,6 +3,8 @@ export type CursorLocation = {
     level: number | null;
     parentId: string | null;
 };
-export type DragItem = {
+export type DragItem<T = any> = {
     id: string;
+    dragIds: string[];
+    data: T;
 };

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;
@@ -59,6 +61,7 @@ export interface TreeProps<T> {
         backend: unknown;
     }>["backend"];
     dndManager?: ReturnType<typeof useDragDropManager>;
+    dragType?: string | ((node: NodeApi<T>) => string);
     outerElementType?: ReactWindowCommonProps["outerElementType"];
     innerElementType?: ReactWindowCommonProps["innerElementType"];
 }

package/package.json

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

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

@@ -0,0 +1,74 @@
+import { 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" }] },
+    ],
+  },
+];
+
+/* #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)", () => {
+  render(<Tree<Datum> data={data} openByDefault />);
+  const [, a, b] = screen.getAllByRole("treeitem");
+
+  fireEvent.click(a);
+  expect(a.getAttribute("aria-selected")).toBe("true");
+
+  fireEvent.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)", () => {
+  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 });
+
+  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)", () => {
+  render(<Tree<Datum> data={data} openByDefault disableMultiSelection />);
+  const [, a, b] = screen.getAllByRole("treeitem");
+
+  fireEvent.click(a);
+  fireEvent.click(b, { ctrlKey: true });
+
+  expect(a.getAttribute("aria-selected")).toBe("false");
+  expect(b.getAttribute("aria-selected")).toBe("true");
+});
+
+/* #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/dnd/drag-hook.test.ts

@@ -0,0 +1,22 @@
+import { NodeApi } from "../interfaces/node-api";
+import { dragTypeForNode } from "./drag-hook";
+
+/* dragTypeForNode only reads node.data when dragType is a function, so a
+   minimal stub stands in for a real NodeApi. */
+function nodeWith<T>(data: T): NodeApi<T> {
+  return { data } as NodeApi<T>;
+}
+
+test("defaults to the internal NODE type when dragType is undefined", () => {
+  expect(dragTypeForNode(undefined, nodeWith({ id: "a" }))).toBe("NODE");
+});
+
+test("uses a fixed string dragType for every node", () => {
+  expect(dragTypeForNode("FILE", nodeWith({ id: "a" }))).toBe("FILE");
+});
+
+test("resolves a per-node dragType function against the node", () => {
+  const dragType = (node: NodeApi<{ kind: string }>) => node.data.kind.toUpperCase();
+  expect(dragTypeForNode(dragType, nodeWith({ kind: "folder" }))).toBe("FOLDER");
+  expect(dragTypeForNode(dragType, nodeWith({ kind: "file" }))).toBe("FILE");
+});

package/src/dnd/drag-hook.ts

@@ -4,21 +4,29 @@ import { getEmptyImage } from "react-dnd-html5-backend";
 import { useTreeApi } from "../context";
 import { NodeApi } from "../interfaces/node-api";
 import { DragItem } from "../types/dnd";
+import { TreeProps } from "../types/tree-props";
 import { DropResult } from "./drop-hook";
 import { actions as dnd } from "../state/dnd-slice";
 
+/* The react-dnd item type a row's drag source broadcasts. The dragType prop
+   can be a fixed string or a per-node function; it defaults to "NODE". */
+export function dragTypeForNode<T>(dragType: TreeProps<T>["dragType"], node: NodeApi<T>): string {
+  if (typeof dragType === "function") return dragType(node);
+  return dragType ?? "NODE";
+}
+
 export function useDragHook<T>(node: NodeApi<T>): ConnectDragSource {
-  const tree = useTreeApi();
+  const tree = useTreeApi<T>();
   const ids = tree.selectedIds;
-  const [_, ref, preview] = useDrag<DragItem, DropResult, void>(
+  const [_, ref, preview] = useDrag<DragItem<T>, DropResult, void>(
     () => ({
       canDrag: () => node.isDraggable,
-      type: "NODE",
+      type: dragTypeForNode(tree.props.dragType, node),
       item: () => {
-        // This is fired once at the begging of a drag operation
+        // This is fired once at the beginning of a drag operation
         const dragIds = tree.isSelected(node.id) ? Array.from(ids) : [node.id];
         tree.dispatch(dnd.dragStart(node.id, dragIds));
-        return { id: node.id, dragIds };
+        return { id: node.id, dragIds, data: node.data };
       },
       end: () => {
         tree.hideCursor();
@@ -26,7 +34,7 @@ export function useDragHook<T>(node: NodeApi<T>): ConnectDragSource {
         tree.dispatch(dnd.dragEnd());
       },
     }),
-    [ids, node],
+    [ids, node, tree.props.dragType],
   );
 
   useEffect(() => {

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/types/dnd.ts

@@ -4,6 +4,11 @@ export type CursorLocation = {
   parentId: string | null;
 };
 
-export type DragItem = {
+export type DragItem<T = any> = {
+  /* The id of the row the drag started on. */
   id: string;
+  /* Every node carried by the drag (the selection, or just `id`). */
+  dragIds: string[];
+  /* The dragged node's data, so external drop targets can read it. */
+  data: T;
 };

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;
@@ -79,6 +83,15 @@ export interface TreeProps<T> {
   dndBackend?: Extract<DndProviderProps<unknown, unknown>, { backend: unknown }>["backend"];
   dndManager?: ReturnType<typeof useDragDropManager>;
 
+  /* The react-dnd item type each row's drag source advertises. Defaults to
+     "NODE". Set a custom value (or a per-node function) so rows can be dropped
+     onto external react-dnd targets that accept that type. The dragged node's
+     data is always exposed on the drag item, so an external target accepting
+     the default "NODE" type can read it without setting this. Note: the tree's
+     own drop targets only accept "NODE", so a row given a custom type is no
+     longer reorderable within the tree. */
+  dragType?: string | ((node: NodeApi<T>) => string);
+
   /* Custom react-window outer/inner elements */
   outerElementType?: ReactWindowCommonProps["outerElementType"];
   innerElementType?: ReactWindowCommonProps["innerElementType"];