jqtree 1.7.1 → 1.7.3

package/package.json

@@ -1,13 +1,14 @@
 {
     "name": "jqtree",
-    "version": "1.7.1",
+    "version": "1.7.3",
     "description": "Tree widget for jQuery",
     "keywords": [
         "jquery-plugin",
         "tree"
     ],
     "license": "Apache-2.0",
-    "main": "./lib/tree.jquery.js",
+    "browser": "./tree.jquery.js",
+    "main": "./tree.jquery.js",
     "types": "./src/tree.jquery.d.ts",
     "repository": {
         "type": "git",
@@ -27,52 +28,52 @@
         "playwright": "pnpm build-with-coverage && playwright test --config config/playwright.config.js",
         "test": "pnpm jest && pnpm playwright"
     },
-    "dependencies": {
-        "jquery": "^3.7.0"
+    "peerDependencies": {
+        "jquery": "^3"
     },
     "devDependencies": {
-        "@babel/cli": "^7.22.9",
-        "@babel/core": "^7.22.9",
-        "@babel/preset-env": "^7.22.9",
-        "@babel/preset-typescript": "^7.22.5",
-        "@playwright/test": "^1.36.2",
+        "@babel/cli": "^7.22.15",
+        "@babel/core": "^7.22.17",
+        "@babel/preset-env": "^7.22.15",
+        "@babel/preset-typescript": "^7.22.15",
+        "@playwright/test": "^1.38.0",
         "@rollup/plugin-babel": "^6.0.3",
-        "@rollup/plugin-node-resolve": "^15.1.0",
+        "@rollup/plugin-node-resolve": "^15.2.1",
         "@rollup/plugin-terser": "^0.4.3",
         "@testing-library/dom": "^9.3.1",
         "@types/debug": "^4.1.8",
-        "@types/jest": "^29.5.3",
+        "@types/jest": "^29.5.4",
         "@types/jest-axe": "^3.5.5",
-        "@types/jquery": "^3.5.16",
-        "@types/node": "^20.4.7",
-        "@typescript-eslint/eslint-plugin": "^6.2.1",
-        "@typescript-eslint/parser": "^6.2.1",
-        "autoprefixer": "^10.4.14",
-        "babel-jest": "^29.6.2",
+        "@types/jquery": "^3.5.18",
+        "@types/node": "^20.6.0",
+        "@typescript-eslint/eslint-plugin": "^6.7.0",
+        "@typescript-eslint/parser": "^6.7.0",
+        "autoprefixer": "^10.4.15",
+        "babel-jest": "^29.7.0",
         "babel-plugin-istanbul": "^6.1.1",
-        "eslint": "^8.46.0",
-        "eslint-plugin-import": "^2.28.0",
+        "eslint": "^8.49.0",
+        "eslint-plugin-import": "^2.28.1",
         "eslint-plugin-jest": "^27.2.3",
-        "eslint-plugin-playwright": "^0.15.3",
-        "eslint-plugin-testing-library": "^5.11.0",
+        "eslint-plugin-playwright": "^0.16.0",
+        "eslint-plugin-testing-library": "^6.0.1",
         "givens": "^1.3.9",
-        "graphql": "^16.7.1",
-        "jest": "^29.6.2",
+        "graphql": "^16.8.0",
+        "jest": "^29.7.0",
         "jest-axe": "^8.0.0",
-        "jest-environment-jsdom": "^29.6.2",
+        "jest-environment-jsdom": "^29.7.0",
         "jest-extended": "^4.0.1",
         "jsonfile": "^6.1.0",
         "lodash.template": "^4.5.0",
-        "msw": "^1.2.3",
-        "postcss": "^8.4.27",
+        "msw": "^1.3.1",
+        "postcss": "^8.4.29",
         "postcss-cli": "^10.1.0",
         "postcss-import": "^15.1.0",
         "postcss-load-config": "^4.0.1",
         "postcss-nested": "^6.0.1",
-        "prettier": "^3.0.1",
-        "rollup": "^3.27.2",
+        "prettier": "^3.0.3",
+        "rollup": "^3.29.1",
         "rollup-plugin-serve": "^2.0.2",
-        "tslib": "^2.6.1",
-        "typescript": "~5.1.6"
+        "tslib": "^2.6.2",
+        "typescript": "^5.2.2"
     }
 }

package/src/elementsRenderer.ts

@@ -2,21 +2,21 @@ import { getBoolString } from "./util";
 import { Node } from "./node";
 import { JqTreeWidget } from "./tree.jquery";
 
-type IconElement = Text | Element;
+type IconElement = string | HTMLElement | JQuery<HTMLElement>;
 
 export default class ElementsRenderer {
-    public openedIconElement?: IconElement;
-    public closedIconElement?: IconElement;
+    public openedIconElement?: HTMLElement | Text;
+    public closedIconElement?: HTMLElement | Text;
     private treeWidget: JqTreeWidget;
 
     constructor(treeWidget: JqTreeWidget) {
         this.treeWidget = treeWidget;
 
         this.openedIconElement = this.createButtonElement(
-            treeWidget.options.openedIcon || "+"
+            treeWidget.options.openedIcon || "+",
         );
         this.closedIconElement = this.createButtonElement(
-            treeWidget.options.closedIcon || "-"
+            treeWidget.options.closedIcon || "-",
         );
     }
 
@@ -37,7 +37,7 @@ export default class ElementsRenderer {
                 $element[0],
                 this.treeWidget.tree.children,
                 true,
-                1
+                1,
             );
         }
     }
@@ -62,7 +62,7 @@ export default class ElementsRenderer {
                 li,
                 node.children,
                 false,
-                node.getLevel() + 1
+                node.getLevel() + 1,
             );
         }
     }
@@ -71,7 +71,7 @@ export default class ElementsRenderer {
         element: Element,
         children: Node[],
         isRootNode: boolean,
-        level: number
+        level: number,
     ): void {
         const ul = this.createUl(isRootNode);
         element.appendChild(ul);
@@ -123,7 +123,7 @@ export default class ElementsRenderer {
 
     private createLi(node: Node, level: number): HTMLLIElement {
         const isSelected = Boolean(
-            this.treeWidget.selectNodeHandler.isNodeSelected(node)
+            this.treeWidget.selectNodeHandler.isNodeSelected(node),
         );
 
         const mustShowFolder =
@@ -145,7 +145,7 @@ export default class ElementsRenderer {
         element: HTMLElement,
         name: string,
         level: number,
-        isSelected: boolean
+        isSelected: boolean,
     ) {
         element.setAttribute("aria-label", name);
         element.setAttribute("aria-level", `${level}`);
@@ -156,7 +156,7 @@ export default class ElementsRenderer {
     private createFolderLi(
         node: Node,
         level: number,
-        isSelected: boolean
+        isSelected: boolean,
     ): HTMLLIElement {
         const buttonClasses = this.getButtonClasses(node);
         const folderClasses = this.getFolderClasses(node, isSelected);
@@ -194,7 +194,7 @@ export default class ElementsRenderer {
             node.name,
             isSelected,
             true,
-            level
+            level,
         );
         titleSpan.setAttribute("aria-expanded", getBoolString(node.is_open));
         div.appendChild(titleSpan);
@@ -209,7 +209,7 @@ export default class ElementsRenderer {
     private createNodeLi(
         node: Node,
         level: number,
-        isSelected: boolean
+        isSelected: boolean,
     ): HTMLLIElement {
         const liClasses = ["jqtree_common"];
 
@@ -236,7 +236,7 @@ export default class ElementsRenderer {
             node.name,
             isSelected,
             false,
-            level
+            level,
         );
         div.appendChild(titleSpan);
 
@@ -247,7 +247,7 @@ export default class ElementsRenderer {
         nodeName: string,
         isSelected: boolean,
         isFolder: boolean,
-        level: number
+        level: number,
     ): HTMLSpanElement {
         const titleSpan = document.createElement("span");
 
@@ -317,8 +317,8 @@ export default class ElementsRenderer {
     }
 
     private createButtonElement(
-        value: string | Element
-    ): IconElement | undefined {
+        value: IconElement,
+    ): HTMLElement | Text | undefined {
         if (typeof value === "string") {
             // convert value to html
             const div = document.createElement("div");

package/src/jqtreeOptions.ts

@@ -21,7 +21,7 @@ export interface JQTreeOptions {
     autoEscape: boolean;
     autoOpen: boolean | number;
     buttonLeft: boolean;
-    closedIcon: string | Element | undefined;
+    closedIcon?: string | HTMLElement | JQuery<HTMLElement>;
     data: NodeData[] | undefined;
     dataFilter: DataFilter | undefined;
     dataUrl: DataUrl | undefined;
@@ -39,7 +39,7 @@ export interface JQTreeOptions {
     onLoadFailed: ((response: JQuery.jqXHR) => void) | undefined;
     onLoading: HandleLoadingMethod | undefined;
     onSetStateFromStorage: ((data: string) => void) | undefined;
-    openedIcon: string | Element;
+    openedIcon?: string | HTMLElement | JQuery<HTMLElement>;
     openFolderDelay: number | false;
     rtl: boolean | undefined;
     selectable: boolean;

package/src/test/.eslintrc

@@ -11,6 +11,7 @@
     "jest/prefer-expect-assertions": "off",
     "jest/prefer-strict-equal": "off",
     "jest/require-hook": "off",
-    "jest/require-top-level-describe": "off"
+    "jest/require-top-level-describe": "off",
+    "testing-library/no-node-access": "off"
   }
 }

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

@@ -53,12 +53,12 @@ context("when a node has load_on_demand in the data", () => {
                 if (parentId === "1") {
                     return response(
                         ctx.status(200),
-                        ctx.json([{ id: 2, name: "loaded-on-demand" }])
+                        ctx.json([{ id: 2, name: "loaded-on-demand" }]),
                     );
                 } else {
                     return response(ctx.status(400));
                 }
-            })
+            }),
         );
     });
 
@@ -87,7 +87,7 @@ context("when a node has load_on_demand in the data", () => {
 
     context("when the node is opened", () => {
         given("node", () =>
-            given.$tree.tree("getNodeByNameMustExist", "parent-node")
+            given.$tree.tree("getNodeByNameMustExist", "parent-node"),
         );
 
         it("loads the subtree", async () => {
@@ -136,8 +136,9 @@ context("when a node has load_on_demand in the data", () => {
 
         context("when the node is selected and doesn't have the focus", () => {
             beforeEach(() => {
-                given.$tree.tree("selectNode", given.node);
-                (document.activeElement as HTMLElement).blur();
+                given.$tree.tree("selectNode", given.node, {
+                    mustSetFocus: false,
+                });
             });
 
             it("keeps the node selected and not focused", async () => {

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

@@ -146,7 +146,7 @@ describe("addToSelection", () => {
 
     it("selects the nodes", () => {
         expect(given.$tree.tree("getSelectedNodes")).toEqual(
-            expect.arrayContaining([given.child1, given.child2])
+            expect.arrayContaining([given.child1, given.child2]),
         );
     });
 
@@ -207,7 +207,7 @@ describe("appendNode", () => {
 
     context("when appending to a parent node", () => {
         given("parent", () =>
-            given.$tree.tree("getNodeByNameMustExist", "node1")
+            given.$tree.tree("getNodeByNameMustExist", "node1"),
         );
 
         it("appends the node to parent node", () => {
@@ -244,7 +244,7 @@ describe("appendNode", () => {
 
         it("sets the properties of the object", () => {
             expect(given.$tree.tree("getNodeById", 99)).toMatchObject(
-                given.nodeData
+                given.nodeData,
             );
         });
     });
@@ -302,7 +302,7 @@ describe("getNodeByHtmlElement", () => {
 
     const given = getGiven<Vars>();
     given("htmlElement", () =>
-        screen.getByText("node1", { selector: ".jqtree-title" })
+        screen.getByText("node1", { selector: ".jqtree-title" }),
     );
     given("$tree", () => $("#tree1"));
 
@@ -312,7 +312,7 @@ describe("getNodeByHtmlElement", () => {
 
     it("returns the node", () => {
         expect(
-            given.$tree.tree("getNodeByHtmlElement", given.htmlElement)
+            given.$tree.tree("getNodeByHtmlElement", given.htmlElement),
         ).toEqual(expect.objectContaining({ name: "node1" }));
     });
 });
@@ -394,7 +394,7 @@ describe("getNodesByProperty", () => {
 
     it("gets nodes by property", () => {
         expect(
-            given.$tree.tree("getNodesByProperty", "intProperty", 1)
+            given.$tree.tree("getNodesByProperty", "intProperty", 1),
         ).toEqual([given.node1]);
     });
 });
@@ -417,7 +417,7 @@ describe("getSelectedNode", () => {
 
     context("when nodes have ids", () => {
         given("node", () =>
-            given.$tree.tree("getNodeByNameMustExist", "node1")
+            given.$tree.tree("getNodeByNameMustExist", "node1"),
         );
         given("treeData", () => exampleData);
 
@@ -440,7 +440,7 @@ describe("getSelectedNode", () => {
 
     context("when nodes don't have ids", () => {
         given("node", () =>
-            given.$tree.tree("getNodeByNameMustExist", "without-id1")
+            given.$tree.tree("getNodeByNameMustExist", "without-id1"),
         );
         given("treeData", () => ["without-id1", "without-id2"]);
 
@@ -494,7 +494,7 @@ describe("getSelectedNodes", () => {
 
         it("returns the selected nodes", () => {
             expect(given.$tree.tree("getSelectedNodes")).toEqual(
-                expect.arrayContaining([given.child1, given.child2])
+                expect.arrayContaining([given.child1, given.child2]),
             );
         });
     });
@@ -659,7 +659,7 @@ describe("loadData", () => {
             given.$tree.tree(
                 "loadData",
                 exampleData,
-                given.$tree.tree("getNodeByNameMustExist", "initial1")
+                given.$tree.tree("getNodeByNameMustExist", "initial1"),
             );
         });
 
@@ -688,7 +688,7 @@ describe("loadData", () => {
         beforeEach(() => {
             given.$tree.tree(
                 "selectNode",
-                given.$tree.tree("getNodeByNameMustExist", "child1")
+                given.$tree.tree("getNodeByNameMustExist", "child1"),
             );
         });
 
@@ -696,7 +696,7 @@ describe("loadData", () => {
             given.$tree.tree(
                 "loadData",
                 ["new-child1"],
-                given.$tree.tree("getNodeByNameMustExist", "node1")
+                given.$tree.tree("getNodeByNameMustExist", "node1"),
             );
 
             expect(given.$tree.tree("getSelectedNode")).toBeFalse();
@@ -712,7 +712,7 @@ describe("loadData", () => {
                 given.$tree.tree(
                     "loadData",
                     ["new-child1"],
-                    given.$tree.tree("getNodeByNameMustExist", "node1")
+                    given.$tree.tree("getNodeByNameMustExist", "node1"),
                 );
 
                 expect(given.$tree.tree("getSelectedNode")).toBeFalse();
@@ -723,7 +723,7 @@ describe("loadData", () => {
                     given.$tree.tree(
                         "loadData",
                         ["new-child1"],
-                        given.$tree.tree("getNodeByNameMustExist", "node2")
+                        given.$tree.tree("getNodeByNameMustExist", "node2"),
                     );
 
                     expect(given.$tree.tree("getSelectedNode")).toMatchObject({
@@ -750,8 +750,8 @@ describe("loadDataFromUrl", () => {
     beforeEach(() => {
         server.use(
             rest.get("/tree/", (_request, response, ctx) =>
-                response(ctx.status(200), ctx.json(given.serverData))
-            )
+                response(ctx.status(200), ctx.json(given.serverData)),
+            ),
         );
 
         given.$tree.tree({ data: given.initialData });
@@ -775,7 +775,7 @@ describe("loadDataFromUrl", () => {
             it("loads a subtree", async () => {
                 const parentNode = given.$tree.tree(
                     "getNodeByNameMustExist",
-                    "initial1"
+                    "initial1",
                 );
                 given.$tree.tree("loadDataFromUrl", "/tree/", parentNode);
                 await screen.findByText("new1");
@@ -949,7 +949,7 @@ describe("prependNode", () => {
 
     context("with a parent node", () => {
         given("parent", () =>
-            given.$tree.tree("getNodeByNameMustExist", "node1")
+            given.$tree.tree("getNodeByNameMustExist", "node1"),
         );
 
         it("prepends the node to the parent", () => {
@@ -1013,8 +1013,8 @@ describe("reload", () => {
     beforeEach(async () => {
         server.use(
             rest.get("/tree2/", (_request, response, ctx) =>
-                response(ctx.status(200), ctx.json(exampleData))
-            )
+                response(ctx.status(200), ctx.json(exampleData)),
+            ),
         );
 
         given.$tree.tree({ dataUrl: "/tree2/" });
@@ -1070,7 +1070,7 @@ describe("removeNode", () => {
 
     context("with a child node", () => {
         given("node", () =>
-            given.$tree.tree("getNodeByNameMustExist", "child1")
+            given.$tree.tree("getNodeByNameMustExist", "child1"),
         );
 
         it("removes the node", () => {
@@ -1103,7 +1103,7 @@ describe("removeNode", () => {
 
     context("with a parent node and its children", () => {
         given("node", () =>
-            given.$tree.tree("getNodeByNameMustExist", "node1")
+            given.$tree.tree("getNodeByNameMustExist", "node1"),
         );
 
         it("removes the node", () => {
@@ -1121,7 +1121,7 @@ describe("removeNode", () => {
             beforeEach(() => {
                 const child1 = given.$tree.tree(
                     "getNodeByNameMustExist",
-                    "child1"
+                    "child1",
                 );
                 given.$tree.tree("selectNode", child1);
             });
@@ -1139,7 +1139,7 @@ describe("removeNode", () => {
 
         it("raises an exception", () => {
             expect(() => given.$tree.tree("removeNode", given.node)).toThrow(
-                "Node has no parent"
+                "Node has no parent",
             );
         });
     });
@@ -1382,7 +1382,7 @@ describe("updateNode", () => {
                 expect.objectContaining({ name: "node2" }),
             ]);
             expect(given.$tree.tree("getNodeById", 999)).toMatchObject(
-                given.nodeData
+                given.nodeData,
             );
         });
     });
@@ -1406,7 +1406,7 @@ describe("updateNode", () => {
         context("when adding a child to a child node", () => {
             given("nodeData", () => ({ children: ["new-child"] }));
             given("node", () =>
-                given.$tree.tree("getNodeByNameMustExist", "child1")
+                given.$tree.tree("getNodeByNameMustExist", "child1"),
             );
 
             it("adds the child node", () => {

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

@@ -164,6 +164,56 @@ describe("autoOpen", () => {
     });
 });
 
+describe("closedIcon", () => {
+    it("renders a string", () => {
+        const $tree = $("#tree1");
+        $tree.tree({
+            closedIcon: "closed",
+            data: exampleData,
+        });
+
+        const $button = $tree.find("a.jqtree-toggler:first");
+        expect($button.text()).toBe("closed");
+    });
+
+    it("escapes html", () => {
+        const $tree = $("#tree1");
+        $tree.tree({
+            closedIcon: "<span>test</span>",
+            data: exampleData,
+        });
+
+        const $button = $tree.find("a.jqtree-toggler:first");
+        expect($button.text()).toBe("<span>test</span>");
+    });
+
+    it("renders a jquery element", () => {
+        const $tree = $("#tree1");
+        $tree.tree({
+            closedIcon: $("<span class='abc'>test</span>"),
+            data: exampleData,
+        });
+
+        const $span = $tree.find("a.jqtree-toggler:first span.abc");
+        expect($span.text()).toBe("test");
+    });
+
+    it("renders a html element", () => {
+        const closedIcon = document.createElement("span");
+        closedIcon.className = "abc";
+        closedIcon.textContent = "test";
+
+        const $tree = $("#tree1");
+        $tree.tree({
+            closedIcon,
+            data: exampleData,
+        });
+
+        const $span = $tree.find("a.jqtree-toggler:first span.abc");
+        expect($span.text()).toBe("test");
+    });
+});
+
 describe("dataUrl", () => {
     const exampleStructure = [
         expect.objectContaining({ name: "node1" }),
@@ -201,7 +251,7 @@ describe("dataUrl", () => {
                 const data = nodeName ? [nodeName] : exampleData;
 
                 return response(ctx.status(200), ctx.json(data));
-            })
+            }),
         );
     });
 
@@ -323,7 +373,7 @@ describe("onGetStateFromStorage and onSetStateFromStorage", () => {
             JSON.stringify({
                 open_nodes: [123],
                 selected_node: [123],
-            })
+            }),
         );
 
         it("restores the state", () => {
@@ -351,8 +401,11 @@ describe("onLoadFailed", () => {
         beforeEach(() => {
             server.use(
                 rest.get("/tree/", (_request, response, ctx) =>
-                    response(ctx.status(500), ctx.body("Internal server error"))
-                )
+                    response(
+                        ctx.status(500),
+                        ctx.body("Internal server error"),
+                    ),
+                ),
             );
         });
 
@@ -366,7 +419,7 @@ describe("onLoadFailed", () => {
 
             await waitFor(() => {
                 expect(onLoadFailed).toHaveBeenCalledWith(
-                    expect.objectContaining({ status: 500 })
+                    expect.objectContaining({ status: 500 }),
                 );
             });
         });
@@ -432,7 +485,7 @@ describe("saveState", () => {
 
             it("saves the state to local storage", () => {
                 expect(localStorage.getItem("tree")).toBe(
-                    '{"open_nodes":[123],"selected_node":[123]}'
+                    '{"open_nodes":[123],"selected_node":[123]}',
                 );
             });
         });
@@ -442,7 +495,7 @@ describe("saveState", () => {
 
             it("uses the string as a key", () => {
                 expect(localStorage.getItem("my-state")).toBe(
-                    '{"open_nodes":[123],"selected_node":[123]}'
+                    '{"open_nodes":[123],"selected_node":[123]}',
                 );
             });
         });
@@ -462,7 +515,7 @@ describe("saveState", () => {
         beforeEach(() => {
             localStorage.setItem(
                 "tree",
-                '{"open_nodes":[123],"selected_node":[123]}'
+                '{"open_nodes":[123],"selected_node":[123]}',
             );
 
             given.$tree.tree({