jqtree 1.5.2 → 1.6.2

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";
@@ -312,15 +311,17 @@ describe("getNodeByHtmlElement", () => {
 
 describe("getNodeById", () => {
     interface Vars {
+        data: NodeData[];
         $tree: JQuery<HTMLElement>;
     }
 
     const given = getGiven<Vars>();
+    given("data", () => exampleData);
     given("$tree", () => $("#tree1"));
 
     beforeEach(() => {
         given.$tree.tree({
-            data: exampleData,
+            data: given.data,
         });
     });
 
@@ -331,18 +332,40 @@ describe("getNodeById", () => {
     });
 
     context("with a string parameter", () => {
-        it("returns the node", () => {
-            expect(given.$tree.tree("getNodeById", "127")).toMatchObject({
-                name: "node3",
-            });
+        it("doesn't return the node", () => {
+            expect(given.$tree.tree("getNodeById", "127")).toBeNull();
         });
     });
 
     context("when the node doesn't exist", () => {
-        it("returns undefined", () => {
+        it("returns null", () => {
             expect(given.$tree.tree("getNodeById", 99999)).toBeNull();
         });
     });
+
+    context("when the data has string ids", () => {
+        given("data", () => [{ id: "123", name: "node1" }]);
+
+        context("with a string parameter", () => {
+            it("returns the node", () => {
+                expect(given.$tree.tree("getNodeById", "123")).toMatchObject({
+                    name: "node1",
+                });
+            });
+        });
+
+        context("with a number parameter", () => {
+            it("doesn't return the node", () => {
+                expect(given.$tree.tree("getNodeById", 123)).toBeNull();
+            });
+        });
+
+        context("when the node doesn't exist", () => {
+            it("returns null", () => {
+                expect(given.$tree.tree("getNodeById", "abc")).toBeNull();
+            });
+        });
+    });
 });
 
 describe("getNodesByProperty", () => {
@@ -943,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;
@@ -991,7 +1046,7 @@ describe("reload", () => {
 
     context("with a onFinished parameter", () => {
         it("calls onFinished", () =>
-            new Promise((resolve) => {
+            new Promise<void>((resolve) => {
                 const handleFinished = () => {
                     expect(given.$tree).toHaveTreeStructure([
                         expect.objectContaining({ name: "node1" }),
@@ -1125,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();
         });
     });
 
@@ -1146,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();
         });
     });
 
@@ -1181,7 +1236,7 @@ describe("setOption", () => {
 
     it("sets an option", () => {
         given.$tree.tree("setOption", "selectable", true);
-        titleSpan(given.node1.element).click();
+        titleSpan(given.node1.element).trigger("click");
         expect(given.$tree.tree("getSelectedNode")).toMatchObject({
             name: "node1",
         });
@@ -1412,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";
@@ -364,7 +363,7 @@ describe("onLoadFailed", () => {
         });
 
         it("calls onLoadFailed", () =>
-            new Promise((done) => {
+            new Promise<void>((done) => {
                 given.$tree.tree({
                     dataUrl: "/tree/",
                     onLoadFailed: (jqXHR) => {
@@ -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;
@@ -63,6 +68,7 @@ interface IJQTreeOptions {
     saveState?: boolean | string;
     slide?: boolean;
     showEmptyFolder?: boolean;
+    startDndDelay?: number;
     tabIndex?: number;
     useContextMenu?: boolean;
 }
@@ -134,14 +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: "setMouseDelay", delay: number): void;
     (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";
@@ -34,45 +30,41 @@ const PARAM_IS_EMPTY = "Parameter is empty: ";
 export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     protected static defaults: JQTreeOptions = {
         animationSpeed: "fast",
-        autoOpen: false, // true / false / int (open n levels starting at 0)
-        saveState: false, // true / false / string (cookie name)
-        dragAndDrop: false,
-        selectable: true,
-        useContextMenu: true,
-        onCanSelectNode: undefined,
-        onSetStateFromStorage: undefined,
-        onGetStateFromStorage: undefined,
-        onCreateLi: undefined,
-        onIsMoveHandle: undefined,
-
-        // Can this node be moved?
-        onCanMove: undefined,
-
-        // Can this node be moved to this position? function(moved_node, target_node, position)
-        onCanMoveTo: undefined,
-        onLoadFailed: undefined,
         autoEscape: true,
-        dataUrl: undefined,
-
+        autoOpen: false, // true / false / int (open n levels starting at 0)
+        buttonLeft: true,
         // The symbol to use for a closed node - ► BLACK RIGHT-POINTING POINTER
         // http://www.fileformat.info/info/unicode/char/25ba/index.htm
         closedIcon: undefined,
-
-        // The symbol to use for an open node - ▼ BLACK DOWN-POINTING TRIANGLE
-        // http://www.fileformat.info/info/unicode/char/25bc/index.htm
-        openedIcon: "&#x25bc;",
-        slide: true, // must display slide animation?
-        nodeClass: Node,
+        data: undefined,
         dataFilter: undefined,
+        dataUrl: undefined,
+        dragAndDrop: false,
         keyboardSupport: true,
-        openFolderDelay: 500, // The delay for opening a folder during drag and drop; the value is in milliseconds
-        rtl: undefined, // right-to-left support; true / false (default)
+        nodeClass: Node,
+        onCanMove: undefined, // Can this node be moved?
+        onCanMoveTo: undefined, // Can this node be moved to this position? function(moved_node, target_node, position)
+        onCanSelectNode: undefined,
+        onCreateLi: undefined,
         onDragMove: undefined,
         onDragStop: undefined,
-        buttonLeft: true,
+        onGetStateFromStorage: undefined,
+        onIsMoveHandle: undefined,
+        onLoadFailed: undefined,
         onLoading: undefined,
+        onSetStateFromStorage: undefined,
+        openedIcon: "&#x25bc;",
+        openFolderDelay: 500, // The delay for opening a folder during drag and drop; the value is in milliseconds
+        // The symbol to use for an open node - ▼ BLACK DOWN-POINTING TRIANGLE
+        // http://www.fileformat.info/info/unicode/char/25bc/index.htm
+        rtl: undefined, // right-to-left support; true / false (default)
+        saveState: false, // true / false / string (cookie name)
+        selectable: true,
         showEmptyFolder: false,
+        slide: true, // must display slide animation?
+        startDndDelay: 300, // The delay for starting dnd (in milliseconds)
         tabIndex: 0,
+        useContextMenu: true,
     };
 
     public element: JQuery;
@@ -171,6 +163,11 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         return this.element;
     }
 
+    public refresh(): JQuery {
+        this._refreshElements(null);
+        return this.element;
+    }
+
     public getNodeById(nodeId: NodeId): Node | null {
         return this.tree.getNodeById(nodeId);
     }
@@ -370,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;
     }
 
@@ -490,7 +480,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     }
 
     public setOption(option: string, value: unknown): JQuery {
-        (this.options as Record<string, unknown>)[option] = value;
+        (this.options as unknown as Record<string, unknown>)[option] = value;
         return this.element;
     }
 
@@ -518,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);
@@ -532,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);
@@ -568,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");
     }
 
@@ -604,7 +603,6 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         super.init();
 
         this.element = this.$el;
-        this.mouseDelay = 300;
         this.isInitialized = false;
 
         this.options.rtl = this.getRtlOption();
@@ -677,6 +675,10 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
     }
 
+    protected getMouseDelay(): number {
+        return this.options.startDndDelay ?? 0;
+    }
+
     private initData(): void {
         if (this.options.data) {
             this.doLoadData(this.options.data, null);
@@ -738,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;
@@ -785,9 +787,8 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
                 if (!state) {
                     return [false, false];
                 } else {
-                    const mustLoadOnDemand = this.saveStateHandler.setInitialState(
-                        state
-                    );
+                    const mustLoadOnDemand =
+                        this.saveStateHandler.setInitialState(state);
 
                     // return true: the state is restored
                     return [true, mustLoadOnDemand];
@@ -902,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) {
@@ -925,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") {
@@ -975,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);
@@ -1130,15 +1137,14 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     }
 
     private deselectNodes(parentNode: Node): void {
-        const selectedNodesUnderParent = this.selectNodeHandler.getSelectedNodesUnder(
-            parentNode
-        );
+        const selectedNodesUnderParent =
+            this.selectNodeHandler.getSelectedNodesUnder(parentNode);
         for (const n of selectedNodesUnderParent) {
             this.selectNodeHandler.removeFromSelection(n);
         }
     }
 
-    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.5.2";
+const version = "1.6.2";
 
 export default version;