Release v3.5.0

.github/workflows/publish.yml

@@ -14,6 +14,6 @@ jobs:
           node-version: "20.x"
           registry-url: "https://registry.npmjs.org"
       - run: yarn
-      - run: yarn publish --tag latest
+      - run: sh bin/publish --tag latest
         env:
           YARN_NPM_AUTH_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}

CHANGELOG.md

@@ -1,3 +1,15 @@
+# Version 3.5.0
+
+**Features**
+
+- `getTreeLinePrefix` utility for rendering tree connector lines (#324)
+- `dndBackend` prop on `Tree` for supplying a custom react-dnd backend (#326, originally #316)
+- `selectMulti` now accepts an options argument (`{ align, focus }`) for consistency with `select` (#266)
+
+**Fixes**
+
+- `dndManager` prop no longer triggers unnecessary re-renders; `backend`/`options` are only passed to `DndProvider` when no custom manager is supplied (#237)
+
 # Version 3.0.0
 
 **Breaking Changes**

README.md

@@ -268,6 +268,8 @@ const { ref, width, height } = useResizeObserver();
 - Interfaces
   - [Node API](#node-api-reference)
   - [Tree API](#tree-api-reference)
+- Utilities
+  - [getTreeLinePrefix](#gettreelineprefix)
 
 ## Tree Component Props
 
@@ -303,7 +305,7 @@ interface TreeProps<T> {
   padding?: number;
 
   /* Config */
-  childrenAccessor?: string | ((d: T) => T[] | null);
+  childrenAccessor?: string | ((d: T) => readonly T[] | null);
   idAccessor?: string | ((d: T) => string);
   openByDefault?: boolean;
   selectionFollowsFocus?: boolean;
@@ -343,7 +345,11 @@ interface TreeProps<T> {
   dndRootElement?: globalThis.Node | null;
   onClick?: MouseEventHandler;
   onContextMenu?: MouseEventHandler;
-  dndManager?: DragDropManager;
+  dndBackend?: Extract<
+    DndProviderProps<unknown, unknown>,
+    { backend: unknown }
+  >["backend"];
+  dndManager?: ReturnType<typeof useDragDropManager>;
 }
 ```
 
@@ -648,17 +654,17 @@ _tree_.**isSelected**(_id_) : _boolean_
 
 Returns true if the node with _id_ is selected.
 
-_tree_.**select**(_id_)
+_tree_.**select**(_id_, _[opts]_)
 
-Select only the node with _id_.
+Select only the node with _id_. Accepts an optional options object: `{ align?: "auto" | "smart" | "center" | "end" | "start"; focus?: boolean }`. `align` is forwarded to the scroll behavior; passing `focus: false` suppresses the focus change and the `onFocus` callback.
 
 _tree_.**deselect**(_id_)
 
 Deselect the node with _id_.
 
-_tree_.**selectMulti**(_id_)
+_tree_.**selectMulti**(_id_, _[opts]_)
 
-Add to the selection the node with _id_.
+Add to the selection the node with _id_. Accepts the same options object as `select`.
 
 _tree_.**selectContiguous**(_id_)
 
@@ -740,6 +746,43 @@ _tree_.**root** : _NodeApi_
 
 Returns the root _NodeApi_ instance. Its children are the Node representations of the _data_ prop array.
 
+## Utilities
+
+### getTreeLinePrefix
+
+Generates a tree-line prefix string (using Unix `tree`-style box-drawing characters like `├`, `└`, `│`) for a given node. Useful when you want ASCII/Unicode connector lines in a custom node renderer.
+
+```ts
+function getTreeLinePrefix(
+  node: NodeApi<any>,
+  chars?: Partial<TreeLineChars>
+): string;
+
+type TreeLineChars = {
+  last: string;   // default: "└ "
+  middle: string; // default: "├ "
+  pipe: string;   // default: "│ "
+  blank: string;  // default: "\u3000 "
+};
+```
+
+Wrap the prefix in a monospace span so the connectors line up:
+
+```tsx
+import { Tree, getTreeLinePrefix } from "react-arborist";
+
+function Node({ node, style }) {
+  return (
+    <div style={style}>
+      <span style={{ fontFamily: "monospace" }}>{getTreeLinePrefix(node)}</span>
+      {node.data.name}
+    </div>
+  );
+}
+```
+
+Pass a partial `chars` object to override any of the default characters (e.g. for an ASCII-only style).
+
 ## 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).

modules/react-arborist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-arborist",
-  "version": "3.4.3",
+  "version": "3.5.0",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/main/index.js",