use filter working great

modules/react-arborist/src/filter/match.ts

@@ -0,0 +1,10 @@
+import { NodeObject } from "../nodes/types";
+
+export function matchesStringProperties<T>(node: NodeObject<T>, term: string) {
+  const haystack = Array.from(Object.values(node.sourceData as any))
+    .filter((value) => typeof value === "string")
+    .join(" ")
+    .toLocaleLowerCase();
+
+  return haystack.includes(term.toLocaleLowerCase());
+}

modules/react-arborist/src/filter/tree-filter.ts

@@ -0,0 +1,43 @@
+import { NodeObject } from "../nodes/types";
+import { matchesStringProperties } from "./match";
+import { FilterOptions } from "./use-filter";
+
+type BoolMap = Record<string, boolean>;
+
+export class TreeFilter<T> {
+  term: string;
+  isMatch: (node: NodeObject<T>, term: string) => boolean;
+
+  constructor(opts: FilterOptions<T>) {
+    this.term = (opts.term || "").trim();
+    this.isMatch = opts.isMatch || matchesStringProperties;
+  }
+
+  get isPresent() {
+    return this.term.length > 0;
+  }
+
+  getVisibility(nodes: NodeObject<T>[], value: BoolMap = {}) {
+    for (const node of nodes) {
+      if (this.isMatch(node, this.term)) {
+        for (const id of [node.id, ...this.ancestorIds(node)]) {
+          value[id] = true;
+        }
+      } else {
+        value[node.id] = false;
+      }
+      if (node.children) this.getVisibility(node.children, value);
+    }
+    return value;
+  }
+
+  ancestorIds(node: NodeObject<T>) {
+    const ids = [];
+    let parent = node.parent;
+    while (parent) {
+      ids.push(parent.id);
+      parent = parent.parent;
+    }
+    return ids;
+  }
+}

modules/react-arborist/src/filter/use-filter.ts

@@ -0,0 +1,35 @@
+import { useState } from "react";
+import { OpensOnChangeEvent, OpensState } from "../opens/types";
+import { TreeFilter } from "./tree-filter";
+import { NodeObject } from "../nodes/types";
+
+export type FilterOptions<T> = {
+  term?: string;
+  isMatch?: (node: NodeObject<T>, term: string) => boolean;
+  openByDefault?: (isFiltered: boolean) => boolean;
+};
+
+export function useFilter<T>(
+  nodes: NodeObject<T>[],
+  options: FilterOptions<T> = {},
+) {
+  const filter = new TreeFilter(options);
+  const [opens, setOpens] = useState<OpensState>({});
+  const [filteredOpens, setFilteredOpens] = useState<OpensState>({});
+
+  return {
+    visible: {
+      value: filter.isPresent ? filter.getVisibility(nodes) : {},
+      onChange: () => {},
+    },
+    opens: {
+      value: filter.isPresent ? filteredOpens : opens,
+      onChange: (e: OpensOnChangeEvent) => {
+        filter.isPresent ? setFilteredOpens(e.value) : setOpens(e.value);
+      },
+    },
+    openByDefault: options.openByDefault
+      ? options.openByDefault(filter.isPresent)
+      : true,
+  };
+}

modules/react-arborist/src/index.ts

@@ -14,4 +14,4 @@ export * from "./selection/use-multi-selection";
 export * from "./dnd/use-dnd";
 
 /* Partial Controllers */
-export * from "./visible/use-filter";
+export * from "./filter/use-filter";

modules/react-arborist/src/props/use-default-props.ts

@@ -28,7 +28,7 @@ export function useDefaultProps<T>(
     shortcuts: props.shortcuts ?? defaultShortcuts,
     commands: props.commands ?? defaultCommands,
 
-    /* Dimentions */
+    /* Dimensions */
     width: props.width ?? 300,
     height: props.height ?? 500,
     indent: props.indent ?? 24,

modules/showcase/pages/version4.tsx

@@ -3,23 +3,23 @@ import { gmailData } from "../data/gmail";
 import { useState } from "react";
 
 export default function Version4() {
-  const [searchTerm, setSearchTerm] = useState("");
+  const [term, setSearchTerm] = useState("");
   const nodes = useNodes(gmailData);
-  const visible = useFilter(nodes.value, searchTerm);
+  const filterProps = useFilter(nodes.value, { term });
 
   return (
     <div className="wrap">
       <div className="region flow">
         <TreeView
           nodes={nodes}
-          visible={visible}
           className="tree"
           rowClassName="tree-row"
           height={900}
+          {...filterProps}
         />
         <input
           type="search"
-          value={searchTerm}
+          value={term}
           placeholder="Search tree..."
           onChange={(e) => setSearchTerm(e.target.value)}
         />