Version 4

modules/docs/content/_index.md

@@ -330,3 +330,12 @@ return (
   />
 );
 ```
+
+
+## Filtering
+
+I need to decide where to do the filtering on the dones. Some things to consider are this. When the tree is filtered, we probably want have different open state. For example, if everything is closed and we type a search, we want all the folders to suddenly be open. But if they clear out their search, it would be good to leave all the folders closed again.
+
+So the tree needs to know if it is filtered or not. So the filtering should happen in the tree.
+
+this.rows = ConstructNodes

modules/docs/content/terms.md

@@ -2,23 +2,21 @@
 
 This is the list of the common domain models found in react-arborist.
 
-* **Tree View**: The main component that renders the UI.
-* **Source Data**: Any data you bring from the outside world.
-* **Node Object**: An interface that the TreeManager and TreeController expects
-* **Source Data Proxy**: A wrapper around SourceData conforming to the NodeObject with methods to mutating SourceData.
-* **Tree Manager:** Responsible for responding to change events from the TreeView
-* **Tree Controller**: The programming API for developers to interact with the tree.
-* **Node Controller**: The programming API for developers to interact with the node.
-* **Partial Controller**: An object with the properties `value` and `onChange`, used for managing a slice of the component's state.
+- **Tree View**: The main component that renders the UI.
+- **Source Data**: Any data you bring from the outside world.
+- **Node Object**: An interface that the TreeManager and TreeController expects
+- **Source Data Proxy**: A wrapper around SourceData conforming to the NodeObject with methods to mutating SourceData.
+- **Tree Manager:** Responsible for responding to change events from the TreeView
+- **Tree Controller**: The programming API for developers to interact with the tree.
+- **Node Controller**: The programming API for developers to interact with the node.
+- **Partial Controller**: An object with the properties `value` and `onChange`, used for managing a slice of the component's state.
 
 ## Details
 
 When you reach for react-arborist you usually will bring with you some _source data_ that you with to render with the _TreeView_ component.
 
 The _TreeView_ component receives many props, one of which is called "nodes". The "nodes" prop is a _partial controller_ object with `value` and `onChange` properties. The nodes partial controller value must be an array of _node objects_.
 
-
-
 A _node object_ is anything with the following interface:
 
 ```ts
@@ -29,10 +27,9 @@ type NodeObject<T> = {
   children: NodeObject<T>[] | null;
   isLeaf: boolean;
   level: number;
-}
+};
 ```
 
-
 You can convert the _source data_ into _node objects_ yourself, or you can use a helper function provided by react-arborist called `createTreeManager(sourceData, options)`. It will return a _TreeManager_ instance. The _tree manager_ will have a property called "nodes" which will return an array of objects that conform to the _node object_ interface. However, they will be instances of the _SourceDataProxy_ class. These objects have all the properties required of _node objects_ along with methods to mutate the _source data_ it contains. The _TreeManager_ also has methods for mutating the _source data_ in response to change events.
 
 ### Internals
@@ -41,4 +38,4 @@ Now let's see the internals of the _TreeView_ component. All props are given to
 
 During a render, the _tree controller_ will flatten the _node objects_ into an array of _node controllers_. This array can be accessed with the `.nodes` property.
 
-To create a _NodeController_ instance, you will need the parent _tree controller_, the relevant _node object_ and the _row index_ where it will be rendered in UI. That class provides a bunch of convince methods for developers to use when rendering the UI.
+To create a _NodeController_ instance, you will need the parent _tree controller_, the relevant _node object_ and the _row index_ where it will be rendered in UI. That class provides a bunch of convince methods for developers to use when rendering the UI.

modules/react-arborist/package.json

@@ -2,14 +2,12 @@
   "name": "react-arborist",
   "version": "3.4.0",
   "license": "MIT",
-  "source": "src/index.ts",
-  "main": "dist/main/index.js",
-  "module": "dist/module/index.js",
+  "type": "module",
+  "exports": "./dist/module/index.js",
   "types": "dist/module/index.d.ts",
   "sideEffects": false,
   "scripts": {
-    "build:cjs": "tsc --outDir dist/main",
-    "build:es": "tsc --outDir dist/module --module es2022 --moduleResolution node",
+    "build:es": "tsc --outDir dist/module",
     "build": "npm-run-all clean -p 'build:**'",
     "clean": "rimraf dist",
     "prepack": "yarn build",
@@ -38,11 +36,9 @@
     "filterable"
   ],
   "dependencies": {
-    "react-dnd": "^14.0.3",
-    "react-dnd-html5-backend": "^14.0.3",
+    "react-aria": "^3.32.1",
     "react-window": "^1.8.10",
-    "redux": "^5.0.0",
-    "use-sync-external-store": "^1.2.0"
+    "when-clause": "0.0.3"
   },
   "peerDependencies": {
     "react": ">= 16.14",

modules/react-arborist/src/commands/default-commands.ts

@@ -0,0 +1,164 @@
+import { NodeController } from "../controllers/node-controller.js";
+import { TreeController } from "../controllers/tree-controller.js";
+import { NodeType } from "../nodes/types.js";
+import { focusNextElement, focusPrevElement } from "../utils.js";
+
+export type Tree = TreeController<any>;
+
+export function focusFirst(tree: Tree) {
+  if (tree.firstNode) tree.focus(tree.firstNode.id);
+}
+
+export function focusLast(tree: Tree) {
+  if (tree.lastNode) tree.focus(tree.lastNode.id);
+}
+
+export function focusNext(tree: Tree) {
+  const next = tree.nextNode || tree.firstNode;
+  if (next) tree.focus(next.id);
+}
+
+export function focusPrev(tree: Tree) {
+  const prev = tree.prevNode || tree.lastNode;
+  if (prev) tree.focus(prev.id);
+}
+
+export function focusPrevPage(tree: Tree) {
+  const start = tree.visibleStartIndex;
+  const stop = tree.visibleStopIndex;
+  const page = stop - start;
+  let index = tree.focusedNode?.rowIndex ?? 0;
+  if (index > start) {
+    index = start;
+  } else {
+    index = Math.max(start - page, 0);
+  }
+  const node = tree.rows.at(index);
+  if (node) tree.focus(node.id);
+}
+
+export function focusNextPage(tree: Tree) {
+  const start = tree.visibleStartIndex;
+  const stop = tree.visibleStopIndex;
+  const page = stop - start;
+  let index = tree.focusedNode?.rowIndex ?? 0;
+  if (index < stop) {
+    index = stop;
+  } else {
+    index = Math.min(index + page, tree.rows.length - 1);
+  }
+  const node = tree.rows.at(index);
+  if (node) tree.focus(node.id);
+}
+
+export function focusParent(tree: Tree) {
+  const parentId = tree.focusedNode?.parentId;
+  if (parentId) tree.focus(parentId);
+}
+
+export function close(tree: Tree) {
+  tree.focusedNode?.close();
+}
+
+export function open(tree: Tree) {
+  tree.focusedNode?.open();
+}
+
+export function focusOutsideNext(tree: Tree) {
+  if (tree.element) focusNextElement(tree.element);
+}
+
+export function focusOutsidePrev(tree: Tree) {
+  if (tree.element) focusPrevElement(tree.element);
+}
+
+export function destroy(tree: Tree) {
+  if (confirm("Are you sure you want to delete?")) {
+    if (tree.selectedIds.length) {
+      tree.destroy(tree.selectedIds);
+    } else if (tree.focusedNode) {
+      tree.destroy([tree.focusedNode.id]);
+    }
+  }
+}
+
+function create(tree: Tree, nodeType: NodeType) {
+  const node = tree.focusedNode;
+  const parentId = getInsertParentId(node);
+  const index = getInsertIndex(tree, node);
+  const data = tree.props.nodes.initialize({ nodeType });
+  tree.create({ parentId, index, data });
+  tree.edit(data.id);
+  tree.focus(data.id);
+}
+
+export function createLeaf(tree: Tree) {
+  create(tree, "leaf");
+}
+
+export function createInternal(tree: Tree) {
+  create(tree, "internal");
+}
+
+function getInsertParentId(focus: NodeController<any> | null) {
+  if (!focus) return null;
+  if (focus.isOpen) return focus.id;
+  return focus.parentId;
+}
+
+function getInsertIndex(tree: Tree, focus: NodeController<any> | null) {
+  if (!focus) return tree.props.nodes.value.length;
+  if (focus.isOpen) return 0;
+  return focus.childIndex + 1;
+}
+
+export function edit(tree: Tree) {
+  const node = tree.focusedNode;
+  if (node) tree.edit(node.id);
+}
+
+export function moveSelectionStart(tree: Tree) {
+  const prev = tree.prevNode;
+  if (prev) {
+    tree.focus(prev.id);
+    tree.selectContiguous(prev.id);
+  }
+}
+
+export function moveSelectionEnd(tree: Tree) {
+  const next = tree.nextNode;
+  if (next) {
+    tree.focus(next.id);
+    tree.selectContiguous(next.id);
+  }
+}
+
+export function select(tree: Tree) {
+  const node = tree.focusedNode;
+  if (node) tree.select(node.id);
+}
+
+export function selectAll(tree: Tree) {
+  tree.selectAll();
+}
+
+export function toggle(tree: Tree) {
+  const node = tree.focusedNode;
+  if (node) {
+    node.isOpen ? tree.close(node.id) : tree.open(node.id);
+  }
+}
+
+export function openSiblings(tree: Tree) {
+  const node = tree.focusedNode;
+  if (!node) return;
+  const parent = node.parent;
+  if (!parent) return;
+
+  for (let sibling of parent.object.children!) {
+    if (!sibling.isLeaf) {
+      node.isOpen ? tree.close(sibling.id) : tree.open(sibling.id);
+    }
+  }
+  tree.scrollTo(node.rowIndex);
+}

modules/react-arborist/src/commands/types.ts

@@ -0,0 +1,7 @@
+import { TreeController } from "../controllers/tree-controller.js";
+
+export type CommandObject<T> = {
+  [name: string]: CommandBody<T>;
+};
+
+export type CommandBody<T> = (tree: TreeController<T>) => void;