jqtree 1.6.1 → 1.6.2

package/src/saveStateHandler.ts

@@ -1,6 +1,11 @@
 import { isInt } from "./util";
 import { JqTreeWidget } from "./tree.jquery";
-import { Node, NodeId } from "./node";
+import { Node } from "./node";
+
+export interface SavedState {
+    open_nodes: NodeId[];
+    selected_node: NodeId[];
+}
 
 export default class SaveStateHandler {
     private treeWidget: JqTreeWidget;
@@ -24,7 +29,7 @@ export default class SaveStateHandler {
         const jsonData = this.loadFromStorage();
 
         if (jsonData) {
-            return (this.parseState(jsonData) as unknown) as SavedState;
+            return this.parseState(jsonData) as unknown as SavedState;
         } else {
             return null;
         }
@@ -121,7 +126,7 @@ export default class SaveStateHandler {
             state.selected_node = [state.selected_node];
         }
 
-        return (state as unknown) as SavedState;
+        return state as unknown as SavedState;
     }
 
     private loadFromStorage(): string | null {
@@ -134,11 +139,11 @@ export default class SaveStateHandler {
         }
     }
 
-    private openInitialNodes(nodeIds: any[]): boolean {
+    private openInitialNodes(nodeIds: NodeId[]): boolean {
         let mustLoadOnDemand = false;
 
-        for (const nodeDd of nodeIds) {
-            const node = this.treeWidget.getNodeById(nodeDd);
+        for (const nodeId of nodeIds) {
+            const node = this.treeWidget.getNodeById(nodeId);
 
             if (node) {
                 if (!node.load_on_demand) {

package/src/selectNodeHandler.ts

@@ -1,4 +1,4 @@
-import { Node, NodeId } from "./node";
+import { Node } from "./node";
 import { JqTreeWidget } from "./tree.jquery";
 
 export default class SelectNodeHandler {

package/src/simple.widget.ts

@@ -109,7 +109,7 @@ export default class SimpleWidget<WidgetOptions> {
 
     public options: WidgetOptions;
 
-    protected $el: JQuery<HTMLElement>;
+    public $el: JQuery<HTMLElement>;
 
     constructor(el: HTMLElement, options: WidgetOptions) {
         this.$el = jQuery(el);

package/src/test/.eslintrc

@@ -0,0 +1,4 @@
+{
+  "plugins": ["testing-library"],
+  "extends": ["plugin:testing-library/dom"]
+}

package/src/test/jqTree/create.test.ts

@@ -1,4 +1,3 @@
-import * as $ from "jquery";
 import getGiven from "givens";
 import "../../tree.jquery";
 import exampleData from "../support/exampleData";

package/src/test/jqTree/events.test.ts

@@ -1,4 +1,3 @@
-import * as $ from "jquery";
 import getGiven from "givens";
 import { rest } from "msw";
 import { setupServer } from "msw/node";

package/src/test/jqTree/keyboard.test.ts

@@ -1,4 +1,3 @@
-import * as $ from "jquery";
 import getGiven from "givens";
 import "../../tree.jquery";
 import exampleData from "../support/exampleData";

package/src/test/jqTree/loadOnDemand.test.ts

@@ -1,4 +1,3 @@
-import * as $ from "jquery";
 import getGiven from "givens";
 import { screen } from "@testing-library/dom";
 import { rest } from "msw";
@@ -106,6 +105,52 @@ context("when a node has load_on_demand in the data", () => {
                 }),
             ]);
         });
+
+        context("when the node is selected and has the focus", () => {
+            beforeEach(() => {
+                given.$tree.tree("selectNode", given.node);
+            });
+
+            it("keeps the node selected and focused", async () => {
+                expect(given.node.element).toBeSelected();
+                expect(given.node.element).toBeFocused();
+
+                togglerLink(given.node.element).trigger("click");
+                await screen.findByText("loaded-on-demand");
+
+                expect(given.node.element).toBeSelected();
+                expect(given.node.element).toBeFocused();
+            });
+        });
+
+        context("when the node is not selected", () => {
+            it("doesn't select the node", async () => {
+                expect(given.node.element).not.toBeSelected();
+
+                togglerLink(given.node.element).trigger("click");
+                await screen.findByText("loaded-on-demand");
+
+                expect(given.node.element).not.toBeSelected();
+            });
+        });
+
+        context("when the node is selected and doesn't have the focus", () => {
+            beforeEach(() => {
+                given.$tree.tree("selectNode", given.node);
+                (document.activeElement as HTMLElement).blur();
+            });
+
+            it("keeps the node selected and not focused", async () => {
+                expect(given.node.element).toBeSelected();
+                expect(given.node.element).not.toBeFocused();
+
+                togglerLink(given.node.element).trigger("click");
+                await screen.findByText("loaded-on-demand");
+
+                expect(given.node.element).toBeSelected();
+                expect(given.node.element).not.toBeFocused();
+            });
+        });
     });
 
     context("with autoOpen is true", () => {

package/src/test/jqTree/methods.test.ts

@@ -1,4 +1,3 @@
-import * as $ from "jquery";
 import getGiven from "givens";
 import { screen } from "@testing-library/dom";
 import { rest } from "msw";
@@ -967,6 +966,38 @@ describe("prependNode", () => {
     });
 });
 
+describe("refresh", () => {
+    interface Vars {
+        $tree: JQuery<HTMLElement>;
+    }
+
+    const given = getGiven<Vars>();
+    given("$tree", () => $("#tree1"));
+
+    beforeEach(() => {
+        given.$tree.tree({
+            data: exampleData,
+        });
+    });
+
+    it("rerenders the tree", () => {
+        const tree = given.$tree.tree("getTree");
+        tree.children[0].name = "node1a";
+
+        expect(given.$tree).toHaveTreeStructure([
+            expect.objectContaining({ name: "node1" }),
+            expect.objectContaining({ name: "node2" }),
+        ]);
+
+        given.$tree.tree("refresh");
+
+        expect(given.$tree).toHaveTreeStructure([
+            expect.objectContaining({ name: "node1a" }),
+            expect.objectContaining({ name: "node2" }),
+        ]);
+    });
+});
+
 describe("reload", () => {
     interface Vars {
         node1: INode;
@@ -1149,7 +1180,7 @@ describe("selectNode", () => {
 
         it("selects the node and deselects the previous node", () => {
             expect(given.node1.element).toBeSelected();
-            expect(given.node2.element).notToBeSelected();
+            expect(given.node2.element).not.toBeSelected();
         });
     });
 
@@ -1170,7 +1201,7 @@ describe("selectNode", () => {
 
         it("deselects the node", () => {
             given.$tree.tree("selectNode", given.node1);
-            expect(given.node1.element).notToBeSelected();
+            expect(given.node1.element).not.toBeSelected();
         });
     });
 
@@ -1436,13 +1467,7 @@ describe("updateNode", () => {
         });
 
         it("keeps the focus on the node", () => {
-            expect(document.activeElement).not.toBeNil();
-            expect(
-                given.$tree.tree(
-                    "getNodeByHtmlElement",
-                    document.activeElement as HTMLElement
-                )
-            ).not.toBeNil();
+            expect(given.node.element).toBeFocused();
         });
     });
 });

package/src/test/jqTree/options.test.ts

@@ -1,4 +1,3 @@
-import * as $ from "jquery";
 import getGiven from "givens";
 import { screen } from "@testing-library/dom";
 import { rest } from "msw";
@@ -391,7 +390,7 @@ describe("rtl", () => {
         });
 
         it("has a different closed icon", () => {
-            expect(togglerLink(given.node1.element).text()).toEqual("◀");
+            expect(togglerLink(given.node1.element).text()).toBe("◀");
         });
     });
 
@@ -402,7 +401,7 @@ describe("rtl", () => {
         });
 
         it("has a different closed icon", () => {
-            expect(togglerLink(given.node1.element).text()).toEqual("◀");
+            expect(togglerLink(given.node1.element).text()).toBe("◀");
         });
     });
 });
@@ -434,7 +433,7 @@ describe("saveState", () => {
             given("saveState", () => true);
 
             it("saves the state to local storage", () => {
-                expect(localStorage.getItem("tree")).toEqual(
+                expect(localStorage.getItem("tree")).toBe(
                     '{"open_nodes":[123],"selected_node":[123]}'
                 );
             });
@@ -444,7 +443,7 @@ describe("saveState", () => {
             given("saveState", () => "my-state");
 
             it("uses the string as a key", () => {
-                expect(localStorage.getItem("my-state")).toEqual(
+                expect(localStorage.getItem("my-state")).toBe(
                     '{"open_nodes":[123],"selected_node":[123]}'
                 );
             });

package/src/test/node.test.ts

@@ -855,13 +855,13 @@ describe("hasChildren", () => {
         });
 
         it("returns true", () => {
-            expect(given.node.hasChildren()).toEqual(true);
+            expect(given.node.hasChildren()).toBe(true);
         });
     });
 
     context("when a node doesn't have children", () => {
         it("returns false", () => {
-            expect(given.node.hasChildren()).toEqual(false);
+            expect(given.node.hasChildren()).toBe(false);
         });
     });
 });

package/src/test/support/jqTreeMatchers.ts

@@ -1,4 +1,5 @@
 import treeStructure from "./treeStructure";
+import { titleSpan } from "./testUtil";
 
 const assertJqTreeFolder = ($el: JQuery<HTMLElement>) => {
     /* istanbul ignore if */
@@ -8,15 +9,6 @@ const assertJqTreeFolder = ($el: JQuery<HTMLElement>) => {
 };
 
 expect.extend({
-    notToBeSelected(el: HTMLElement | JQuery<HTMLElement>) {
-        const $el = jQuery(el);
-
-        /* istanbul ignore next */
-        return {
-            message: () => "The node is selected",
-            pass: !$el.hasClass("jqtree-selected"),
-        };
-    },
     toBeClosed(el: HTMLElement | JQuery<HTMLElement>) {
         const $el = jQuery(el);
         assertJqTreeFolder($el);
@@ -27,6 +19,13 @@ expect.extend({
             pass: $el.hasClass("jqtree-closed"),
         };
     },
+    toBeFocused(el: HTMLElement | JQuery<HTMLElement>) {
+        /* istanbul ignore next */
+        return {
+            message: () => "The is node is not focused",
+            pass: document.activeElement === titleSpan(el)[0],
+        };
+    },
     toBeOpen(el: HTMLElement | JQuery<HTMLElement>) {
         const $el = jQuery(el);
         assertJqTreeFolder($el);

package/src/test/support/matchers.d.ts

@@ -22,12 +22,10 @@ declare namespace JQTreeMatchers {
 declare namespace jest {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     interface Matchers<R> {
-        notToBeSelected(): boolean;
         toBeClosed(): boolean;
+        toBeFocused(): boolean;
         toBeOpen(): boolean;
         toBeSelected(): boolean;
-        toHaveTreeStructure(
-            treeStructure: JQTreeMatchers.TreeStructure
-        ): boolean;
+        toHaveTreeStructure(treeStructure: any): boolean;
     }
 }

package/src/test/support/setupTests.ts

@@ -1,4 +1,5 @@
-import * as jQuery from "jquery";
+import jQuery from "jquery";
 import "./jqTreeMatchers";
 
+(window as any).$ = jQuery; // eslint-disable-line @typescript-eslint/no-unsafe-member-access
 (window as any).jQuery = jQuery; // eslint-disable-line @typescript-eslint/no-unsafe-member-access

package/src/tree.jquery.d.ts

@@ -1,21 +1,26 @@
 type NodeId = number | string;
 
-type DefaultRecord = Record<string, unknown>;
-type NodeData = string | DefaultRecord;
+interface NodeRecord {
+    [key: string]: unknown;
+    id?: NodeId;
+    children?: NodeData[];
+}
+
+type NodeData = string | NodeRecord;
 
 type IterateCallback = (node: INode, level: number) => boolean;
 
-declare class INode {
-    public id?: NodeId;
-    public name: string;
-    public children: INode[];
-    public element: HTMLElement;
-    public is_open: boolean;
-    public parent: INode | null;
+interface INode {
+    id?: NodeId;
+    name: string;
+    children: INode[];
+    element: HTMLElement;
+    is_open: boolean;
+    parent: INode | null;
 
     [key: string]: unknown;
 
-    public iterate(callback: IterateCallback): void;
+    iterate(callback: IterateCallback): void;
 }
 
 type DataUrlFunction = (node?: Node) => JQuery.AjaxSettings;
@@ -41,7 +46,7 @@ interface IJQTreeOptions {
     buttonLeft?: boolean;
     closedIcon?: string | Element;
     data?: NodeData[];
-    dataFilter?: (data: unknown) => NodeData[];
+    dataFilter?: (data: NodeData[]) => NodeData[];
     dataUrl?: DataUrl;
     dragAndDrop?: boolean;
     nodeClass?: any;
@@ -135,13 +140,14 @@ interface IJQTreePlugin {
         onFinished?: (node: INode) => void
     ): JQuery;
     (behavior: "prependNode", newNodeInfo: NodeData, parentNode?: INode): INode;
+    (behavior: "refresh"): JQuery;
     (behavior: "reload", onFinished?: () => void): JQuery;
     (behavior: "removeFromSelection", node: INode): JQuery;
     (behavior: "removeNode", node: INode): JQuery;
     (behavior: "scrollToNode", node: INode): JQuery;
     (behavior: "selectNode", node: INode | null): JQuery;
     (behavior: "setOption", option: string, value: unknown): JQuery;
-    (behavior: "setState", options: DefaultRecord): JQuery;
+    (behavior: "setState", options: Record<string, unknown>): JQuery;
     (behavior: "toggle", node: INode, slideParam?: boolean): JQuery;
     (behavior: "toJson"): string;
     (behavior: "updateNode", node: INode, data: NodeData): JQuery;

package/src/tree.jquery.ts

@@ -1,23 +1,19 @@
 import __version__ from "./version";
-import * as jQueryProxy from "jquery";
 import { DragAndDropHandler } from "./dragAndDropHandler";
 import ElementsRenderer from "./elementsRenderer";
 import DataLoader, { HandleFinishedLoading } from "./dataLoader";
 import KeyHandler from "./keyHandler";
 import MouseWidget from "./mouse.widget";
 import { PositionInfo } from "./types";
-import SaveStateHandler from "./saveStateHandler";
+import SaveStateHandler, { SavedState } from "./saveStateHandler";
 import ScrollHandler from "./scrollHandler";
 import SelectNodeHandler from "./selectNodeHandler";
 import SimpleWidget from "./simple.widget";
-import { Node, NodeId, getPosition, NodeData } from "./node";
+import { Node, getPosition } from "./node";
 import { isFunction } from "./util";
 import { FolderElement, NodeElement, OnFinishOpenNode } from "./nodeElement";
 import { JQTreeOptions } from "./jqtreeOptions";
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-const jQuery: JQueryStatic = (<any>jQueryProxy).default || jQueryProxy;
-
 interface ClickTarget {
     node: Node;
     type: "button" | "label";
@@ -371,19 +367,12 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             node.removeChildren();
 
             if (data.children.length) {
-                node.loadFromData(data.children);
+                node.loadFromData(data.children as Node[]);
             }
         }
 
-        const mustSetFocus = this.selectNodeHandler.isFocusOnTree();
-        const mustSelect = this.isSelectedNodeInSubtree(node);
-
         this._refreshElements(node);
 
-        if (mustSelect) {
-            this.selectCurrentNode(mustSetFocus);
-        }
-
         return this.element;
     }
 
@@ -519,7 +508,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
     public _triggerEvent(
         eventName: string,
-        values?: DefaultRecord
+        values?: Record<string, unknown>
     ): JQuery.Event {
         const event = jQuery.Event(eventName, values);
         this.element.trigger(event);
@@ -533,7 +522,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     ): void {
         const doOpenNode = (
             _node: Node,
-            _slide: any,
+            _slide: boolean,
             _onFinished: OnFinishOpenNode | null
         ): void => {
             const folderElement = new FolderElement(_node, this);
@@ -569,8 +558,17 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
      from_node: redraw this subtree
     */
     public _refreshElements(fromNode: Node | null): void {
+        const mustSetFocus = this.selectNodeHandler.isFocusOnTree();
+        const mustSelect = fromNode
+            ? this.isSelectedNodeInSubtree(fromNode)
+            : false;
+
         this.renderer.render(fromNode);
 
+        if (mustSelect) {
+            this.selectCurrentNode(mustSetFocus);
+        }
+
         this._triggerEvent("tree.refresh");
     }
 
@@ -742,7 +740,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
     }
 
-    private initTree(data: any): void {
+    private initTree(data: NodeData[]): void {
         const doInit = (): void => {
             if (!this.isInitialized) {
                 this.isInitialized = true;
@@ -905,7 +903,9 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
     }
 
-    private handleClick = (e: JQuery.ClickEvent): void => {
+    private handleClick = (
+        e: JQuery.ClickEvent<HTMLElement, any, HTMLElement, HTMLElement>
+    ): void => {
         const clickTarget = this.getClickTarget(e.target);
 
         if (clickTarget) {
@@ -928,7 +928,9 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
     };
 
-    private handleDblclick = (e: JQuery.DoubleClickEvent): void => {
+    private handleDblclick = (
+        e: JQuery.DoubleClickEvent<HTMLElement, any, HTMLElement, HTMLElement>
+    ): void => {
         const clickTarget = this.getClickTarget(e.target);
 
         if (clickTarget?.type === "label") {
@@ -978,7 +980,9 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
     }
 
-    private handleContextmenu = (e: JQuery.ContextMenuEvent) => {
+    private handleContextmenu = (
+        e: JQuery.ContextMenuEvent<HTMLElement, any, HTMLElement, HTMLElement>
+    ) => {
         const $div = jQuery(e.target).closest("ul.jqtree-tree .jqtree-element");
         if ($div.length) {
             const node = this.getNode($div);
@@ -1140,7 +1144,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
     }
 
-    private loadSubtree(data: any[], parentNode: Node): void {
+    private loadSubtree(data: NodeData[], parentNode: Node): void {
         parentNode.loadFromData(data);
 
         parentNode.load_on_demand = false;

package/src/version.ts

@@ -1,3 +1,3 @@
-const version = "1.6.1";
+const version = "1.6.2";
 
 export default version;

package/static/example.postcss

@@ -83,3 +83,16 @@ pre {
         }
     }
 }
+
+.hidden-node {
+    display: none;
+}
+
+.highlight-node > .jqtree-element > .jqtree-title {
+    font-weight: bold;
+}
+
+#search-term {
+    margin-bottom: 16px;
+    margin-right: 8px;
+}

package/static/example_data.js

@@ -1,4 +1,4 @@
-var ExampleData = {};
+const ExampleData = {};
 
 ExampleData.exampleData = [
     {
@@ -24,10 +24,10 @@ ExampleData.exampleData = [
                             { name: "Oviraptorosaurians", id: 12 },
                             { name: "Dromaeosaurids", id: 13 },
                             { name: "Troodontids", id: 14 },
-                            { name: "Avialans", id: 15 }
-                        ]
-                    }
-                ]
+                            { name: "Avialans", id: 15 },
+                        ],
+                    },
+                ],
             },
             {
                 name: "Sauropodomorphs",
@@ -44,14 +44,14 @@ ExampleData.exampleData = [
                                 id: 20,
                                 children: [
                                     { name: "Brachiosaurids", id: 21 },
-                                    { name: "Titanosaurians", id: 22 }
-                                ]
-                            }
-                        ]
-                    }
-                ]
-            }
-        ]
+                                    { name: "Titanosaurians", id: 22 },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
     },
     {
         name: "Ornithischians",
@@ -63,57 +63,54 @@ ExampleData.exampleData = [
                 id: 25,
                 children: [
                     { name: "Ankylosaurians", id: 26 },
-                    { name: "Stegosaurians", id: 27 }
-                ]
+                    { name: "Stegosaurians", id: 27 },
+                ],
             },
             {
                 name: "Ornithopods",
                 id: 28,
-                children: [{ name: "Hadrosaurids", id: 29 }]
+                children: [{ name: "Hadrosaurids", id: 29 }],
             },
             { name: "Pachycephalosaurians", id: 30 },
-            { name: "Ceratopsians", id: 31 }
-        ]
-    }
+            { name: "Ceratopsians", id: 31 },
+        ],
+    },
 ];
 
-ExampleData.getFirstLevelData = function(nodes) {
+ExampleData.getFirstLevelData = function (nodes) {
     if (!nodes) {
         nodes = ExampleData.exampleData;
     }
 
-    var data = [];
+    const data = [];
 
-    $.each(nodes, function() {
-        var node = {
-            name: this.name,
-            id: this.id
-        };
+    nodes.forEach(function (node) {
+        const newNode = { id: node.id, name: node.name };
 
-        if (this.children) {
-            node.load_on_demand = true;
+        if (node.children) {
+            newNode.load_on_demand = true;
         }
 
-        data.push(node);
+        data.push(newNode);
     });
 
     return data;
 };
 
-ExampleData.getChildrenOfNode = function(node_id) {
-    var result = null;
+ExampleData.getChildrenOfNode = function (nodeId) {
+    let result = null;
 
     function iterate(nodes) {
-        $.each(nodes, function() {
+        nodes.forEach(function (node) {
             if (result) {
                 return;
             } else {
-                if (this.id == node_id) {
-                    result = this;
+                if (node.id == nodeId) {
+                    result = node;
                 }
 
-                if (this.children) {
-                    iterate(this.children);
+                if (node.children) {
+                    iterate(node.children);
                 }
             }
         });