react-arborist 1.2.0 → 2.0.0-rc.1

package/README.md

@@ -2,15 +2,30 @@
 
 <h1>React Arborist</h1>
 
-A full-featured tree component for React.
+The tree view is ubiquitous in software applications. This library provides the React ecosystem with complete solution to build the equivalent of the VSCode sidebar, the Mac Finder, the Windows Explorer, or the Sketch/Figma layers panel.
 
-Demo: https://react-arborist.netlify.app/
+_New Link To Demo_
 
-The tree UI is ubiquitous in software applications. There are many tree component libraries for React, but none were full-featured enough to stand on their own.
+## Features
 
-This library provides all the common features expected in a tree. You can select one or many nodes to drag and drop into new positions, open and close folders, render an inline form for renaming, efficiently show thousands of items, and provide your own node renderer to control the style.
+- Drag and drop sorting
+- Open/close folders
+- Inline renaming
+- Virtualized rendering
+- Custom styling
 
-![Demo](https://user-images.githubusercontent.com/3460638/131920177-c47c34e5-d3e3-4826-937d-b366f527cdfe.gif)
+**New Features in Version 2**
+
+- Keyboard navigation
+- Aria attributes
+- Tree filtering
+- Selection synchronization
+- More callbacks (onScroll, onActivate, onSelect)
+- Controlled or uncontrolled trees
+
+_NEW DEMO GIF HERE_
+
+> These docs are for version 2. It contains breaking changes. Here is the [v1.2.0 README](https://github.com/brimdata/react-arborist/tree/4fe9659d2c4cbd57582294330863d4fd7e7af74b).
 
 ## Installation
 
@@ -22,200 +37,647 @@ yarn add react-arborist
 npm install react-arborist
 ```
 
-## Example
+## Examples
+
+Assume our data is this:
+
+```js
+const data = [
+  { id: "1", name: "Unread" },
+  { id: "2", name: "Threads" },
+  {
+    id: "3",
+    name: "Chat Rooms",
+    children: [
+      { id: "c1", name: "General" },
+      { id: "c2", name: "Random" },
+      { id: "c3", name: "Open Source Projects" },
+    ],
+  },
+  {
+    id: "4",
+    name: "Direct Messages",
+    children: [
+      { id: "d1", name: "Alice" },
+      { id: "d2", name: "Bob" },
+      { id: "d3", name: "Charlie" },
+    ],
+  },
+];
+```
 
-Render the tree data structure.
+### The Simplest Tree
+
+Use all the defaults. The _initialData_ prop makes the tree an uncontrolled component. Create, move, rename, and delete will be handled internally.
 
 ```jsx
-const data = {
-  id: "A",
-  name: "Root",
-  children: [
-    { id: "B", name: "Node 1" },
-    { id: "C", name: "Node 2" },
-  ],
-};
+function App() {
+  return <Tree initialData={data} />;
+}
+```
+
+### Customize the Appearance
+
+We provide our own dimensions and our own `Node` component.
 
+```jsx
 function App() {
-  return <Tree data={data}>{Node}</Tree>;
+  return (
+    <Tree
+      initialData={data}
+      openByDefault={false}
+      width={600}
+      height={1000}
+      indent={24}
+      rowHeight={36}
+      paddingTop={30}
+      paddingBottom={10}
+      padding={25 /* sets both */}
+    >
+      {Node}
+    </Tree>
+  );
 }
 
-function Node({ ref, styles, data }) {
+function Node({ node, style, dragHandle }) {
+  /* This node instance can do many things. See the API reference. */
   return (
-    <div ref={ref} style={styles.row}>
-      <div style={styles.indent}>{data.name}</div>
+    <div style={style} ref={dragHandle}>
+      {node.isLeaf ? "🍁" : "🗀"}
+      {node.data.name}
     </div>
   );
 }
 ```
 
-#### Contents
+### Control the Tree data
 
-- [Expected Data Structure](#expected-data-structure)
-- [Tree Component API](#tree-component)
-- [Node Renderer API](#node-renderer-component)
-  - [Styles Prop](#styles-prop)
-  - [State Prop](#state-prop)
-  - [Handlers Prop](#handlers-prop)
-  - [Tree Prop](#tree-prop)
-- [Accessing the Tree Api from the Parent](#accessing-the-tree-api-from-the-parent)
+Here we use the _data_ prop to make the tree a controlled component. We must handle all the data modifications ourselves using the props below.
 
-## Expected Data Structure
+```jsx
+function App() {
+  /* Handle the data modifications outside the tree component */
+  const onCreate = ({ parentId, index, type }) => {};
+  const onRename = ({ id, name }) => {};
+  const onMove = ({ dragIds, parentId, index }) => {};
+  const onDelete = ({ ids }) => {};
 
-The Tree component expects the data prop to be a tree-like data structure with the following type:
+  return (
+    <Tree
+      data={data}
+      onCreate={onCreate}
+      onRename={onRename}
+      onMove={onMove}
+      onDelete={onDelete}
+    />
+  );
+}
+```
 
-```ts
-type Data = {
-  id: string, /* Required */
-  children?: Data[]
-  isOpen?: boolean
-  ...rest /* Any other data you wish to provide */
+### Tree Filtering
+
+Providing a non-empty _searchTerm_ will only show nodes that match. If a child matches, all its parents also match. Internal nodes are opened when filtering. You can provide your own _searchMatch_ function, or use the default.
+
+```jsx
+function App() {
+  const term = useSearchTermString()
+  <Tree
+    data={data}
+    searchTerm={term}
+    searchMatch={
+      (node, term) => node.data.name.toLowerCase().includes(term.toLowerCase())
+    }
+  />
 }
 ```
 
-If your data does not look like this, you can provide a `childrenAccessor` prop. You can also provide `isOpenAccessor`. The value can be a string or a function.
+### Sync the Selection
 
-```ts
-<Tree childrenAccessor="items" ...
-// Or
-<Tree childrenAccessor={(node) => node.items} ...
-```
-
-## Tree Component
-
-Unlike other Tree Components, react-arborist is designed as a [controlled component](https://reactjs.org/docs/forms.html#controlled-components). This means the consumer will provide the tree data and the handlers to update it. The only state managed internally is for drag and drop, selection, and editing.
-
-| Prop             | Default                               | Description                                                                                                                                                                                                                                                                                                                                                              |
-| ---------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| data             | (required)                            | The tree data structure to render as described above.                                                                                                                                                                                                                                                                                                                    |
-| width            | 300                                   | The width of the tree.                                                                                                                                                                                                                                                                                                                                                   |
-| height           | 500                                   | The height of the tree. To dynamically fill it's container, use a [hook](https://github.com/ZeeCoder/use-resize-observer) or [component](https://github.com/bvaughn/react-virtualized-auto-sizer) to gather the width and height of the Tree's parent.                                                                                                                   |
-| rowHeight        | 24                                    | The height of each row.                                                                                                                                                                                                                                                                                                                                                  |
-| indent           | 24                                    | The number of pixels to indent child nodes.                                                                                                                                                                                                                                                                                                                              |
-| hideRoot         | false                                 | Hide the root node so that the first set of children appear as the roots.                                                                                                                                                                                                                                                                                                |
-| onToggle         | noop                                  | Handler called when a node is opened or closed. This and the subsequent functions should update the `data` prop for the tree to re-render.                                                                                                                                                                                                                               |
-| onMove           | noop                                  | Handler called when a user moves one or more nodes by dragging and dropping.                                                                                                                                                                                                                                                                                             |
-| onEdit           | noop                                  | Handler called when a user performs an inline edit of the node.                                                                                                                                                                                                                                                                                                          |
-| childrenAccessor | "children"                            | Used to get a node's children if they exist on a property other than "children".                                                                                                                                                                                                                                                                                         |
-| isOpenAccessor   | "isOpen"                              | Used to get a node's openness state if it exists on a property other than "isOpen".                                                                                                                                                                                                                                                                                      |
-| openByDefault    | true                                  | Choose if the node should be open or closed when it has an undefined openness state.                                                                                                                                                                                                                                                                                     |
-| className        | undefined                             | Adds a class to the containing div.                                                                                                                                                                                                                                                                                                                                      |
-| dndRootElement   | undefined                             | The element for react-dnd to bind it's events to. Defaults to window. See https://github.com/brimdata/react-arborist/pull/33                                                                                                                                                                                                                                             |
-| dropCursor       | ({top, left, indent}) => ReactElement | Provide a custom render function for the drop cursor (the line you see as you drag an item around the tree). It recieves props {left, top, indent} which are all numbers. See the [DefaultDropCursor](https://github.com/brimdata/react-arborist/blob/main/packages/react-arborist/src/components/default-drop-cursor.tsx) for an example of how to create a custom one. |
-
-The only child of the Tree Component must be a NodeRenderer function as described below.
+It's common to open something elsewhere in the app, but have the tree reflect the new selection.
+
+Passing an id to the _selection_ prop will select and scroll to that node whenever that id changes.
 
 ```jsx
-const NodeRenderer = ({
-  innerRef, data, styles, handlers, state, tree
-}) => ...
+function App() {
+  const chatId = useCurrentChatId();
 
-const MyApp = () =>
-  <Tree>
-    {NodeRenderer}
-  </Tree>
+  /* 
+    Whenever the currentChatRoomId changes, 
+    the tree will automatically select it and scroll to it. 
+  */
+
+  return <Tree initialData={data} selection={chatId} />;
+}
 ```
 
-## Node Renderer Component
+### Use the Tree Api Instance
+
+You can access the Tree Api in the parent component by giving a ref to the tree.
+
+```jsx
+function App() {
+  const treeRef = useRef();
+
+  useEffect(() => {
+    const tree = treeRef.current;
+    tree.selectAll();
+    /* See the Tree API reference for all you can do with it. */
+  }, []);
+
+  return <Tree initialData={data} ref={treeRef} />;
+}
+```
 
-The Node Renderer is where you get to make the tree your own. You completely own the style and functionality. The props passed to it should enable you to do whatever you need.
+### Data with Different Property Names
 
-The most basic node renderer will look like this:
+The _idAccessor_ and _childrenAccessor_ props allow you to specify the children and id fields in your data.
 
 ```jsx
-function NodeRenderer({ innerRef, styles, data, state, handlers, tree }) {
+function App() {
+  const data = [
+    {
+      category: "Food",
+      subCategories: [{ category: "Restaurants" }, { category: "Groceries" }],
+    },
+  ];
   return (
-    <div ref={innerRef} style={styles.row}>
-      <div style={styles.indent}>{data.id}</div>
-    </div>
+    <Tree
+      data={data}
+      /* An accessor can provide a string property name */
+      idAccessor="category"
+      /* or a function with the data as the argument */
+      childrenAccessor={(d) => d.subCategories}
+    />
   );
 }
 ```
 
-The function above is passed data for this individual node, the DOM ref used for drag and drop, the styles to position the row in the virtualized list and the styles to indent the current node according to its level in the tree.
+### Custom Rendering
 
-| Prop                       | Type        | Description                                                                                                                                                                          |
-| -------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| data                       | Node        | A single node from the tree data structure provided.                                                                                                                                 |
-| innerRef                   | Ref         | Must be attached to the root element returned by the NodeRenderer. This is needed for drag and drop to work.                                                                         |
-| [styles](#styles-prop)     | object      | This is an object that contains styles for the position of the row, and the level of indentation. Each key is described below.                                                       |
-| [state](#state-prop)       | object      | An handful of boolean values that indicate the current state of this node. See below for details.                                                                                    |
-| [handlers](#handlers-prop) | object      | A collection of handlers to attach to the DOM, that provide selectable and toggle-able behaviors. Each handler is described below.                                                   |
-| [tree](#tree-prop)         | TreeMonitor | This object can be used to get at the internal state of the whole tree component. For example, `tree.getSelectedNodes()`. All the methods are listed below in the Tree Prop section. |
+Render every single piece of the tree yourself. See the API reference for the props passed to each renderer.
 
-### Styles Prop
+```jsx
+function App() {
+  return (
+    <Tree
+      data={data}
+      /* The outer most element in the list */
+      renderRow={MyRow}
+      /* The "ghost" element that follows the mouse as you drag */
+      renderDragPreview={MyDragPreview}
+      /* The line that shows where an element will be dropped */
+      renderCursor={MyCursor}
+    >
+      {/* The inner element that shows the indentation and data */}
+      {MyNode}
+    </Tree>
+  );
+}
+```
 
-These are the properties on the styles object passed to the NodeRenderer.
+## API Reference
 
-| Name   | Type          | Description                                                                                                                                                           |
-| ------ | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| row    | CSSProperties | Since the tree only renders the rows that are currently visible, all the rows are absolutely positioned with a fixed top and left. Those styles are in this property. |
-| indent | CSSProperties | This is simply a left padding set to the level of the tree multiplied by the tree indent prop.                                                                        |
+- Components
+  - [Tree Component Props](#tree-component-props)
+  - [Row Component Props](#row-component-props)
+  - [Node Component Props](#node-component-props)
+  - [DragPreview Component Props](#dragpreview-component-props)
+  - [Cursor Component Props](#cursor-component-props)
+- Interfaces
+  - [Node API](#node-api-reference)
+  - [Tree API](#tree-api-reference)
 
-### State Prop
+## Tree Component Props
 
-These are the properties on the state object passed to the NodeRenderer.
+These are all the props you can pass to the Tree component.
 
-| Name                | Type    | Description                                                                                                                                                                                   |
-| ------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| isOpen              | boolean | True if this node has children and the children are visible. Use this to display some type a open or closed icon.                                                                             |
-| isSelected          | boolean | True if this node is selected. Use this to show a "selected" state. Maybe a different background?                                                                                             |
-| isHoveringOverChild | boolean | True if the user is dragging n node, and the node is hovering over one of this node's direct children. This can be used to indicate which folder the user is dragging an item into.           |
-| isDragging          | boolean | True if this node is being dragged.                                                                                                                                                           |
-| isSelectedStart     | boolean | True if this is the first of a contiguous group of selected rows. This can be used to tastefully style a group of selected items. Maybe a different border radius on the first and last rows? |
-| isSelectedEnd       | boolean | True if this is the last of a contiguous group of selected rows.                                                                                                                              |
-| isEditing           | boolean | True if this row is being edited. When true, the renderer should return some type of form input.                                                                                              |
+```ts
+interface TreeProps<T extends IdObj> {
+  /* Data Options */
+  data?: T[];
+  initialData?: T[];
+
+  /* Data Handlers */
+  onCreate?: handlers.CreateHandler;
+  onMove?: handlers.MoveHandler;
+  onRename?: handlers.RenameHandler;
+  onDelete?: handlers.DeleteHandler;
+
+  /* Renderers*/
+  children?: ElementType<renderers.NodeRendererProps<T>>;
+  renderRow?: ElementType<renderers.RowRendererProps<T>>;
+  renderDragPreview?: ElementType<renderers.DragPreviewProps>;
+  renderCursor?: ElementType<renderers.DropCursorProps>;
+  renderContainer?: ElementType<{}>;
+
+  /* Sizes */
+  rowHeight?: number;
+  width?: number;
+  height?: number;
+  indent?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  padding?: number;
+
+  /* Config */
+  openByDefault?: boolean;
+  selectionFollowsFocus?: boolean;
+  disableDrag?: string | boolean | BoolFunc<T>;
+  disableDrop?: string | boolean | BoolFunc<T>;
+  childrenAccessor?: string | ((d: T) => T[]);
+  idAccessor?: string | ((d: T) => string);
+
+  /* Event Handlers */
+  onActivate?: (node: NodeApi<T>) => void;
+  onSelect?: (nodes: NodeApi<T>[]) => void;
+  onScroll?: (props: ListOnScrollProps) => void;
+
+  /* Selection */
+  selection?: string;
+
+  /* Open State */
+  initialOpenState?: OpenMap;
+
+  /* Search */
+  searchTerm?: string;
+  searchMatch?: (node: NodeApi<T>, searchTerm: string) => boolean;
+
+  /* Extra */
+  className?: string | undefined;
+  dndRootElement?: globalThis.Node | null;
+  onClick?: MouseEventHandler;
+  onContextMenu?: MouseEventHandler;
+}
+```
+
+## Row Component Props
 
-### Handlers Prop
+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.
 
-These are the properties on the handlers object passed to the NodeRenderer.
+```ts
+type RowRendererProps<T extends IdObj> = {
+  node: NodeApi<T>;
+  innerRef: (el: HTMLDivElement | null) => void;
+  attrs: HTMLAttributes<any>;
+  children: ReactElement;
+};
+```
 
-| Name   | Type                       | Description                                                                                                                                       |
-| ------ | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
-| select | MouseEventHandler          | Attach this to the element that tiggers selection. Maybe you want to add it to the outermost div. <br /> `<div onClick={handlers.select}>`        |
-| toggle | MouseEventHandler          | Attach this to the element that opens and closes the node. Maybe you want to add it to the `+`/`-` icon. <br />`<icon onClick={handlers.toggle}>` |
-| edit   | `() => void`               | Makes this node editable. This will re-render the Node with the `state.isEditing` prop set to `true`.                                             |
-| submit | `(update: string) => void` | Sends the update to the `onEdit` handler in the Tree component, and sets the `state.isEditing` prop to `false`.                                   |
-| reset  | `() => void`               | Re-renders with the `state.isEditing` prop set to `false`.                                                                                        |
+## Node Component Props
 
-### Tree Prop
+The _\<NodeRenderer\>_ is responsible for attaching the drag ref, the node style (padding for indentation), the visual look of the node, the edit input of the node, and anything else you can dream up.
 
-The tree monitor provides methods to get and change the tree's internal state. A use case might be in a right click menu.
+There is a default renderer, but it's only there as a placeholder to get started. You'll wan't to create your own component for this. It is passed as the _\<Tree\>_ components only child.
 
-```jsx
-// In your node renderer
-onContextMenu={() => {
-  // Do something with all the selected nodes
-  tree.getSelectedIds()
-}}
+```ts
+export type NodeRendererProps<T extends IdObj> = {
+  style: CSSProperties;
+  node: NodeApi<T>;
+  tree: TreeApi<T>;
+  dragHandle?: (el: HTMLDivElement | null) => void;
+  preview?: boolean;
+};
 ```
 
-| Methods                                               | Returns                                                     | Description                                                                                                                                                                                                        |
-| ----------------------------------------------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `getSelectedIds()`                                    | `string[]`                                                  | Get the the ids of all currently selected nodes.                                                                                                                                                                   |
-| `edit(id: string)`                                    | `Promise<{cancelled: boolean, value: string \| undefined}>` | Edit a node programatically. Resolves when the edit is finished or cancelled.                                                                                                                                      |
-| `submit(id: string, value: string)`                   | void                                                        | Submit the edit.                                                                                                                                                                                                   |
-| `reset(id: string)`                                   | void                                                        | Cancel the edit.                                                                                                                                                                                                   |
-| `select(index: number, meta = false, shift = false)`  | `void`                                                      | Select a node by it's visible index in the tree. The meta flag, when true, will allow multiple items to be selected. The shift flag, when true, will select all nodes between the last one selected, and this one. |
-| `selectById(id: string, meta = false, shift = false)` | `void`                                                      | Same as above but selects by id. If the id is not present (in a collapsed folder), nothing will happen. First use the `scrollToId` function which will open all the parents and scroll to the id.                  |
-| `scrollToId(id: string)`                              | void                                                        | Scroll to the id opening all it's parents if needed.                                                                                                                                                               |
+## DragPreview Component Props
 
-[Full Tree API Implementation](https://github.com/brimdata/react-arborist/blob/main/packages/react-arborist/src/tree-api.ts)
+The _\<DragPreview\>_ is responsible for showing a "ghost" version of the node being dragged. The default is a semi-transparent version of the NodeRenderer and should work fine for most people. To customize it, pass your new component to the _renderDragPreview_ prop.
 
-### Accessing the Tree API from the Parent
+```ts
+type DragPreviewProps = {
+  offset: XYCoord | null;
+  mouse: XYCoord | null;
+  id: string | null;
+  dragIds: string[];
+  isDragging: boolean;
+};
+```
 
-You may need to access the tree from the parent component. This can be done by passing a ref.
+## Cursor Component Props
 
-```jsx
-function MySection() {
-  const tree = useRef(null)
+The _\<Cursor\>_ is responsible for showing a line that indicates where the node will move to when it's dropped. The default is a blue line with circle on the left side. You may want to customize this. Pass your own component to the _renderCursor_ prop.
 
-  useEffect(() => {
-    tree.current.scrollToId("B")
-  }, [])
+```ts
+export type DropCursorProps = {
+  top: number;
+  left: number;
+  indent: number;
+};
+```
 
-  return <Tree ref={ref} ... />
-}
+## Node API Reference
+
+#### State Properties
+
+All these properties on the node instance return booleans related to the state of the node.
+
+_node_.**isRoot**
+
+Returns true if this is the root node. The root node is added internally by react-arborist and not shown in the UI.
+
+_node_.**isLeaf**
+
+Returns true if the children property is not an array.
+
+_node_.**isInternal**
+
+Returns true if the children property is an array.
+
+_node_.**isOpen**
+
+Returns true if node is internal and in an open state.
+
+_node_.**isEditing**
+
+Returns true if this node is currently being edited. Use this property in the NodeRenderer to render the rename form.
+
+_node_.**isSelected**
+
+Returns true if node is selected.
+
+_node_.**isSelectedStart**
+
+Returns true if node is the first of a contiguous group of selected nodes. Useful for styling.
+
+_node_.**isSelectedEnd**
+
+Returns true if node is the last of a contiguous group of selected nodes. Useful for styling.
+
+_node_.**isFocused**
+
+Returns true if node is focused.
+
+_node_.**isDragging**
+
+Returns true if node is being dragged.
+
+_node_.**willReceiveDrop**
+
+Returns true if node is internal and the user is hovering a dragged node over it.
+
+_node_.**state**
+
+Returns an object with all the above properties as keys and boolean values. Useful for adding class names to an element with a library like [clsx](https://github.com/lukeed/clsx) or [classnames](https://github.com/JedWatson/classnames).
+
+```ts
+type NodeState = {
+  isEditing: boolean;
+  isDragging: boolean;
+  isSelected: boolean;
+  isSelectedStart: boolean;
+  isSelectedEnd: boolean;
+  isFocused: boolean;
+  isOpen: boolean;
+  willReceiveDrop: boolean;
+};
 ```
 
-Authored by [James Kerr](https://twitter.com/specialCaseDev)
+#### Accessors
+
+_node_.**childIndex**
+
+Returns the node's index in relation to its siblings.
+
+_node_.**next**
+
+Returns the next visible node. The node directly under this node in the tree component. Returns null if none exist.
+
+_node_.**prev**
+
+Returns the previous visible node. The node directly above this node in the tree component. Returns null if none exist.
+
+_node_.**nextSibling**
+
+Returns the next sibling in the data of this node. Returns null if none exist.
+
+#### Selection Methods
+
+_node_.**select**()
+
+Select only this node.
+
+_node_.**deselect**()
+
+Deselect this node. Other nodes may still be selected.
+
+_node_.**selectMulti**()
+
+Select this node while maintaining all other selections.
+
+_node_.**selectContiguous**()
+
+Deselect all nodes from the anchor node to the last selected node, the select all nodes from the anchor node to this node. The anchor changes to the focused node after calling _select()_ or _selectMulti()_.
+
+#### Activation Methods
+
+_node_.**activate**()
+
+Runs the Tree props' onActivate callback passing in this node.
+
+_node_.**focus**()
+
+Focus this node.
+
+#### Open/Close Methods
+
+_node_.**open**()
+
+Opens the node if it is an internal node.
+
+_node_.**close**()
+
+Closes the node if it is an internal node.
+
+_node_.**toggle**()
+
+Toggles the open/closed state of the node if it is an internal node.
+
+_node_.**openParents**()
+
+Opens all the parents of this node.
+
+_node_.**edit**()
+
+Moves this node into the editing state. Calling node._isEditing_ will return true.
+
+_node_.**submit**(_newName_)
+
+Submits _newName_ string to the _onRename_ handler. Moves this node out of the editing state.
+
+_node_.**reset**()
+
+Moves this node out of the editing state without submitting a new name.
+
+#### Event Handlers
+
+_node_.**handleClick**(_event_)
+
+Useful for using the standard selection methods when a node is clicked. If the meta key is down, call _multiSelect()_. If the shift key is down, call _selectContiguous()_. Otherwise, call _select()_ and _activate()_.
+
+## Tree API Reference
+
+The tree api reference is stable across re-renders. It always has the most recent state and props.
+
+#### Node Accessors
+
+_tree_.**get**(_id_) : _NodeApi | null_
+
+Get node by id from the _visibleNodes_ array.
+
+_tree_.**at**(_index_) : _NodeApi | null_
+
+Get node by index from the _visibleNodes_ array.
+
+_tree_.**visibleNodes** : _NodeApi[]_
+
+Returns an array of the visible nodes.
+
+_tree_.**firstNode** : _NodeApi | null_
+
+The first node in the _visibleNodes_ array.
+
+_tree_.**lastNode** : _NodeApi | null_
+
+The last node in the _visibleNodes_ array.
+
+_tree_.**focusedNode** : _NodeApi | null_
+
+The currently focused node.
+
+_tree_.**mostRecentNode** : _NodeApi | null_
+
+The most recently selected node.
+
+_tree_.**nextNode** : _NodeApi | null_
+
+The node directly after the _focusedNode_ in the _visibleNodes_ array.
+
+_tree_.**prevNode** : _NodeApi | null_
+
+The node directly before the _focusedNode_ in the _visibleNodes_ array.
+
+#### Focus Methods
+
+_tree_.**hasFocus** : _boolean_
+
+Returns true if the the tree has focus somewhere within it.
+
+_tree_.**focus**(_id_)
+
+Focus on the node with _id_.
+
+_tree_.**isFocused**(_id_) : _boolean_
+
+Check if the node with _id_ is focused.
+
+_tree_.**pageUp**()
+
+Move focus up one page.
+
+_tree_.**pageDown**()
+
+Move focus down one page.
+
+#### Selection Methods
+
+_tree_.**selectedIds** : _Set\<string\>_
+
+Returns a set of ids that are selected.
+
+_tree_.**selectedNodes** : _NodeApi[]_
+
+Returns an array of nodes that are selected.
+
+_tree_.**isSelected**(_id_) : _boolean_
+
+Returns true if the node with _id_ is selected.
+
+_tree_.**select**(_id_)
+
+Select only the node with _id_.
+
+_tree_.**deselect**(_id_)
+
+Deselect the node with _id_.
+
+_tree_.**selectMulti**(_id_)
+
+Add to the selection the node with _id_.
+
+_tree_.**selectContiguous**(_id_)
+
+Deselected nodes between the anchor and the last selected node, then select the nodes between the anchor and the node with _id_.
+
+_tree_.**deselectAll**()
+
+Deselect all nodes.
+
+_tree_.**selectAll**()
+
+Select all nodes.
+
+#### Visibility
+
+_tree_.**open**(_id_)
+
+Open the node with _id_.
+
+_tree_.**close**(_id_)
+
+Close the node with _id_.
+
+_tree_.**toggle**(_id_)
+
+Toggle the open state of the node with _id_.
+
+_tree_.**openParents**(_id_)
+
+Open all parents of the node with _id_.
+
+_tree_.**openSiblings**(_id_)
+
+Open all siblings of the node with _id_.
+
+_tree_.**isOpen**(_id_) : _boolean_
+
+Returns true if the node with _id_ is open.
+
+#### Drag and Drop
+
+_tree_.**isDragging**(_id_) : _boolean_
+
+Returns true if the node with _id_ is being dragged.
+
+_tree_.**willReceiveDrop**(_id_) : _boolean_
+
+Returns true if the node with _id_ is internal and is under the dragged node.
+
+#### Scrolling
+
+_tree_.**scrollTo**(_id_, _[align]_)
+
+Scroll to the node with _id_. If this node is not visible, this method will open all its parents. The align argument can be _"auto" | "smart" | "center" | "end" | "start"_.
+
+#### Properties
+
+_tree_.**isEditing** : _boolean_
+
+Returns true if the tree is editing a node.
+
+_tree_.**isFiltered** : _boolean_
+
+Returns true if the _searchTerm_ prop is not an empty string when trimmed.
+
+_tree_.**props** : _TreeProps_
+
+Returns all the props that were passed to the _\<Tree\>_ component.
+
+_tree_.**root** : _NodeApi_
+
+Returns the root _NodeApi_ instance. Its children are the Node representations of the _data_ prop array.
+
+## Author
+
+This library was created by James Kerr while working at Brim Data on the [Zui desktop app](https://www.youtube.com/watch?v=I2y663n8d2A). Work with data? Check us out at [brimdata.io](https://www.brimdata.io)
+
+[Follow me on Twitter](https://twitter.com/specialCaseDev) for react-arborist updates.