Bug with closing nodes, when they are match with search string (#116)

* Bug with closing nodes, when they are match with search string
Fixes #115
* Remove deps we no longer need

Author: jameskerr

.github/workflows/test.yml renamed to .github/workflows/build-and-test.yml

@@ -5,5 +5,6 @@ module.exports = defineConfig({
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },
+    viewportHeight: 900,
   },
 });

packages/e2e/cypress.config.js

@@ -1,4 +1,4 @@
-import "@4tw/cypress-drag-drop";
+const TOTAL_ITEMS = 17;
 
 describe("Testing the Gmail Demo", () => {
   beforeEach(() => {
@@ -14,11 +14,11 @@ describe("Testing the Gmail Demo", () => {
   });
 
   it("Collapses and Expands the Categories", () => {
-    cy.get("@item").should("have.length", "16");
+    cy.get("@item").should("have.length", TOTAL_ITEMS);
     cy.get("@item").contains("Categories").click();
     cy.get("@item").should("have.length", "12");
     cy.get("@item").contains("Categories").click();
-    cy.get("@item").should("have.length", "16");
+    cy.get("@item").should("have.length", TOTAL_ITEMS);
   });
 
   it("Up and Down Arrows", () => {
@@ -32,12 +32,12 @@ describe("Testing the Gmail Demo", () => {
   });
 
   it("Left and Right Arrows", () => {
-    cy.get("@item").should("have.length", 16);
+    cy.get("@item").should("have.length", TOTAL_ITEMS);
     cy.get("@item").contains("Categories").click();
     cy.focused().type("{leftArrow}");
     cy.get("@item").should("have.length", 12);
     cy.focused().type("{rightArrow}");
-    cy.get("@item").should("have.length", 16);
+    cy.get("@item").should("have.length", TOTAL_ITEMS);
     cy.focused().should("contain.text", "Categories");
     cy.focused().type("{rightArrow}");
     cy.focused().should("contain.text", "Social");
@@ -51,13 +51,13 @@ describe("Testing the Gmail Demo", () => {
     cy.get("@item").first().click();
     cy.focused().type("a");
     cy.focused().type("Turn A New Leaf{enter}");
-    cy.get("@item").should("have.length", 17);
+    cy.get("@item").should("have.length", TOTAL_ITEMS + 1);
 
     // In a Folder
     cy.get("@item").contains("Social").click();
     cy.focused().type("a");
     cy.focused().type("Turn More Leaves{enter}");
-    cy.get("@item").should("have.length", 18);
+    cy.get("@item").should("have.length", TOTAL_ITEMS + 2);
 
     // On a folder that is closed
     cy.get("@item").contains("Categories").click(); // closed it
@@ -79,14 +79,14 @@ describe("Testing the Gmail Demo", () => {
     cy.get("@item").first().click();
     cy.focused().type("A");
     cy.focused().type("Turn A New Internal{enter}");
-    cy.get("@item").should("have.length", 17);
+    cy.get("@item").should("have.length", TOTAL_ITEMS + 1);
     cy.focused().children().should("have.class", "isInternal");
 
     // In a Folder
     cy.get("@item").contains("Social").click();
     cy.focused().type("A");
     cy.focused().type("Turn More Inernals{enter}");
-    cy.get("@item").should("have.length", 18);
+    cy.get("@item").should("have.length", TOTAL_ITEMS + 2);
     cy.focused().children().should("have.class", "isInternal");
 
     // On a folder that is closed
@@ -106,24 +106,44 @@ describe("Testing the Gmail Demo", () => {
   });
 
   it("drags and drops in its list", () => {
-    cy.get("@item")
-      .contains("Inbox")
-      .drag("[role=treeitem]:nth-child(5)", "bottom");
+    dragAndDrop(
+      cy.get("@item").contains("Inbox").first(),
+      cy.get("@item").contains("Sent").first()
+    );
 
     cy.get("@item").contains("Inbox").click();
-    cy.focused().invoke("index").should("eq", 4);
+    cy.focused().invoke("index").should("eq", 2);
   });
 
   it("drags and drops into folder", () => {
-    cy.get("@item").contains("Starred").drag("[role=treeitem]:nth-child(12)");
-
+    dragAndDrop(
+      cy.get("@item").contains("Starred").first(),
+      cy.get("@item").contains("Social").first()
+    );
     cy.get("@item").contains("Starred").click();
     cy.focused().invoke("index").should("eq", 11);
   });
 
   it("prevents Inbox from Dragging into Categories", () => {
-    cy.get("@item").contains("Inbox").drag("[role=treeitem]:nth-child(12)");
+    dragAndDrop(
+      cy.get("@item").contains("Inbox").first(),
+      cy.get("@item").contains("Social").first()
+    );
     cy.get("@item").contains("Inbox").click();
     cy.focused().invoke("index").should("eq", 0);
   });
+
+  it("filters to github, then checks expanding and collapsing", () => {
+    cy.get("input").type("Git");
+    cy.get("@item").should("have.length", 3);
+    cy.get("@item").contains("Categories").click(); // collapses
+    cy.get("@item").should("have.length", 1);
+  });
 });
+
+function dragAndDrop(src: any, dst: any) {
+  const dataTransfer = new DataTransfer();
+  src.trigger("dragstart", { dataTransfer });
+  dst.trigger("drop", { dataTransfer });
+  dst.trigger("dragend", { dataTransfer });
+}

packages/e2e/cypress/e2e/gmail-spec.cy.ts

@@ -8,9 +8,7 @@
     "test": "start-server-and-test serve http://localhost:3000 cy:run"
   },
   "devDependencies": {
-    "@4tw/cypress-drag-drop": "^2.2.3",
     "cypress": "^12.4.1",
-    "cypress-drag-drop": "^1.1.1",
     "serve": "^14.2.0",
     "start-server-and-test": "^1.15.3",
     "typescript": "^4.9.4"

packages/e2e/package.json

@@ -7,7 +7,7 @@
   "module": "dist/module.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "start": "run-p 'watch:**'",
+    "start": "run-p 'start:**'",
     "build": "npm-run-all clean -p 'build:**'",
     "test": "jest",
     "build:js": "parcel build --target main --target module",

packages/react-arborist/package.json

@@ -29,24 +29,35 @@ function flattenAndFilterTree<T>(
   root: NodeApi<T>,
   isMatch: (n: NodeApi<T>) => boolean
 ): NodeApi<T>[] {
-  function collect(node: NodeApi<T>) {
-    let result: NodeApi<T>[] = [];
-    const yes = !node.isRoot && isMatch(node);
+  const matches: Record<string, boolean> = {};
+  const list: NodeApi<T>[] = [];
 
-    if (node.children) {
-      for (let child of node.children) {
-        result = result.concat(collect(child));
+  function markMatch(node: NodeApi<T>) {
+    const yes = !node.isRoot && isMatch(node);
+    if (yes) {
+      matches[node.id] = true;
+      let parent = node.parent;
+      while (parent) {
+        matches[parent.id] = true;
+        parent = parent.parent;
       }
     }
-    if (result.length) {
-      if (!node.isRoot) result.unshift(node);
-      return result;
+    if (node.children) {
+      for (let child of node.children) markMatch(child);
     }
-    if (yes) return [node];
-    else return [];
   }
 
-  const list = collect(root).filter((n) => n.parent?.isOpen);
+  function collect(node: NodeApi<T>) {
+    if (node.level >= 0 && matches[node.id]) {
+      list.push(node);
+    }
+    if (node.isOpen) {
+      node.children?.forEach(collect);
+    }
+  }
+
+  markMatch(root);
+  collect(root);
   list.forEach(assignRowIndex);
   return list;
 }

packages/react-arborist/src/data/create-list.ts

@@ -114,6 +114,14 @@ export const gmailData: GmailItem[] = [
         unread: 312,
         readOnly: false,
         icon: icons.MdChatBubbleOutline,
+        children: [
+          {
+            id: "15-1",
+            name: "Github",
+            readOnly: false,
+            icon: icons.MdSocialDistance,
+          },
+        ],
       },
       {
         id: "16",

packages/showcase/data/gmail.ts

@@ -5,15 +5,6 @@ __metadata:
   version: 6
   cacheKey: 8
 
-"@4tw/cypress-drag-drop@npm:^2.2.3":
-  version: 2.2.3
-  resolution: "@4tw/cypress-drag-drop@npm:2.2.3"
-  peerDependencies:
-    cypress: ^2.1.0 || ^3.1.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0
-  checksum: 575a0f981093b44cc7c60de2cbe527468495ef2c020883ae54d5e2c977008d7466cf607b75de208bb954a3a0728fe744cf08b10aab0fdb7de866f2ccd04c89fe
-  languageName: node
-  linkType: hard
-
 "@ampproject/remapping@npm:^2.1.0":
   version: 2.2.0
   resolution: "@ampproject/remapping@npm:2.2.0"
@@ -3472,13 +3463,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cypress-drag-drop@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "cypress-drag-drop@npm:1.1.1"
-  checksum: 8e449c5db25c64afd5c403a19e91879f8d28750c0f7bb1ca5e0e95abb9731639e64b251c279673fb6de57c17454b6066b1e097536639e662ad1c1e308ecfa283
-  languageName: node
-  linkType: hard
-
 "cypress@npm:^12.4.1":
   version: 12.4.1
   resolution: "cypress@npm:12.4.1"
@@ -3774,9 +3758,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "e2e@workspace:packages/e2e"
   dependencies:
-    "@4tw/cypress-drag-drop": ^2.2.3
     cypress: ^12.4.1
-    cypress-drag-drop: ^1.1.1
     serve: ^14.2.0
     start-server-and-test: ^1.15.3
     typescript: ^4.9.4