jqtree 1.7.0 → 1.7.2

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "jqtree",
-    "version": "1.7.0",
+    "version": "1.7.2",
     "description": "Tree widget for jQuery",
     "keywords": [
         "jquery-plugin",
         "tree"
     ],
     "license": "Apache-2.0",
-    "main": "./lib/tree.jquery.js",
+    "browser": "./tree.jquery.js",
     "types": "./src/tree.jquery.d.ts",
     "repository": {
         "type": "git",
@@ -23,60 +23,56 @@
         "devserver-with-coverage": "COVERAGE=true SERVE=true rollup --config config/rollup.config.mjs",
         "build-with-coverage": "COVERAGE=true rollup --config config/rollup.config.mjs",
         "prettier": "prettier src/*.ts --write --tab-width 4",
-        "write-coverage": "nyc report --reporter=text-lcov > lcov.info",
         "tsc": "tsc --noEmit --project tsconfig.json",
-        "merge-coverage": "cp jest-coverage/coverage-final.json .nyc_output/coverage_jsdom.json",
-        "clean-coverage": "rm -rf .nyc_output && jest --clearCache",
-        "print-coverage": "nyc report",
         "playwright": "pnpm build-with-coverage && playwright test --config config/playwright.config.js",
         "test": "pnpm jest && pnpm playwright"
     },
     "dependencies": {
-        "jquery": "^3.6.3"
+        "jquery": "^3.7.1"
     },
     "devDependencies": {
-        "@babel/cli": "^7.20.7",
-        "@babel/core": "^7.20.7",
-        "@babel/preset-env": "^7.20.2",
-        "@babel/preset-typescript": "^7.18.6",
-        "@playwright/test": "^1.29.1",
+        "@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.0.1",
-        "@rollup/plugin-terser": "^0.1.0",
-        "@testing-library/dom": "^8.19.0",
-        "@types/debug": "^4.1.7",
-        "@types/jest": "^29.2.4",
-        "@types/jquery": "^3.5.14",
-        "@types/node": "^18.11.17",
-        "@typescript-eslint/eslint-plugin": "^5.47.0",
-        "@typescript-eslint/parser": "^5.47.0",
-        "autoprefixer": "^10.4.13",
-        "babel-jest": "^29.3.1",
+        "@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.4",
+        "@types/jest-axe": "^3.5.5",
+        "@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.30.0",
-        "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-jest": "^27.1.7",
-        "eslint-plugin-playwright": "^0.11.2",
-        "eslint-plugin-testing-library": "^5.9.1",
+        "eslint": "^8.49.0",
+        "eslint-plugin-import": "^2.28.1",
+        "eslint-plugin-jest": "^27.2.3",
+        "eslint-plugin-playwright": "^0.16.0",
+        "eslint-plugin-testing-library": "^6.0.1",
         "givens": "^1.3.9",
-        "graphql": "^16.6.0",
-        "jest": "^29.3.1",
-        "jest-environment-jsdom": "^29.3.1",
-        "jest-extended": "^3.2.0",
+        "graphql": "^16.8.0",
+        "jest": "^29.7.0",
+        "jest-axe": "^8.0.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "jest-extended": "^4.0.1",
         "jsonfile": "^6.1.0",
         "lodash.template": "^4.5.0",
-        "msw": "^0.49.2",
-        "nyc": "^15.1.0",
-        "playwright": "^1.29.1",
-        "postcss": "^8.4.20",
+        "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.0",
-        "prettier": "^2.8.1",
-        "rollup": "^3.8.1",
+        "postcss-nested": "^6.0.1",
+        "prettier": "^3.0.3",
+        "rollup": "^3.29.1",
         "rollup-plugin-serve": "^2.0.2",
-        "tslib": "^2.4.1",
-        "typescript": "~4.9.4"
+        "tslib": "^2.6.2",
+        "typescript": "^5.2.2"
     }
 }

package/src/dragAndDropHandler.ts

@@ -261,6 +261,10 @@ export class DragAndDropHandler {
             const mid = (low + high) >> 1;
             const area = this.hitAreas[mid];
 
+            if (!area) {
+                return null;
+            }
+
             if (y < area.top) {
                 high = mid;
             } else if (y > area.bottom) {
@@ -433,10 +437,18 @@ abstract class VisibleNodeIterator {
             if (mustIterateInside) {
                 const childrenLength = node.children.length;
                 node.children.forEach((_, i) => {
-                    if (i === childrenLength - 1) {
-                        _iterateNode(node.children[i], null);
-                    } else {
-                        _iterateNode(node.children[i], node.children[i + 1]);
+                    const child = node.children[i];
+
+                    if (child) {
+                        if (i === childrenLength - 1) {
+                            _iterateNode(child, null);
+                        } else {
+                            const nextChild = node.children[i + 1];
+
+                            if (nextChild) {
+                                _iterateNode(child, nextChild);
+                            }
+                        }
                     }
                 });
 
@@ -639,12 +651,14 @@ export class HitAreasGenerator extends VisibleNodeIterator {
         while (i < positionCount) {
             const position = positionsInGroup[i];
 
-            hitAreas.push({
-                top: areaTop,
-                bottom: areaTop + areaHeight,
-                node: position.node,
-                position: position.position,
-            });
+            if (position) {
+                hitAreas.push({
+                    top: areaTop,
+                    bottom: areaTop + areaHeight,
+                    node: position.node,
+                    position: position.position,
+                });
+            }
 
             areaTop += areaHeight;
             i += 1;

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 || "-",
         );
     }
 
@@ -32,12 +32,14 @@ export default class ElementsRenderer {
         const $element = this.treeWidget.element;
         $element.empty();
 
-        this.createDomElements(
-            $element[0],
-            this.treeWidget.tree.children,
-            true,
-            1
-        );
+        if ($element[0]) {
+            this.createDomElements(
+                $element[0],
+                this.treeWidget.tree.children,
+                true,
+                1,
+            );
+        }
     }
 
     public renderFromNode(node: Node): void {
@@ -60,7 +62,7 @@ export default class ElementsRenderer {
                 li,
                 node.children,
                 false,
-                node.getLevel() + 1
+                node.getLevel() + 1,
             );
         }
     }
@@ -69,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);
@@ -121,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 =
@@ -139,10 +141,22 @@ export default class ElementsRenderer {
         return li;
     }
 
+    private setTreeItemAriaAttributes(
+        element: HTMLElement,
+        name: string,
+        level: number,
+        isSelected: boolean,
+    ) {
+        element.setAttribute("aria-label", name);
+        element.setAttribute("aria-level", `${level}`);
+        element.setAttribute("aria-selected", getBoolString(isSelected));
+        element.setAttribute("role", "treeitem");
+    }
+
     private createFolderLi(
         node: Node,
         level: number,
-        isSelected: boolean
+        isSelected: boolean,
     ): HTMLLIElement {
         const buttonClasses = this.getButtonClasses(node);
         const folderClasses = this.getFolderClasses(node, isSelected);
@@ -154,12 +168,12 @@ export default class ElementsRenderer {
         // li
         const li = document.createElement("li");
         li.className = `jqtree_common ${folderClasses}`;
-        li.setAttribute("role", "presentation");
+        li.setAttribute("role", "none");
 
         // div
         const div = document.createElement("div");
         div.className = "jqtree-element jqtree_common";
-        div.setAttribute("role", "presentation");
+        div.setAttribute("role", "none");
 
         li.appendChild(div);
 
@@ -167,25 +181,23 @@ export default class ElementsRenderer {
         const buttonLink = document.createElement("a");
         buttonLink.className = buttonClasses;
 
-        buttonLink.appendChild(iconElement.cloneNode(true));
-
-        buttonLink.setAttribute("role", "presentation");
-        buttonLink.setAttribute("aria-hidden", "true");
+        if (iconElement) {
+            buttonLink.appendChild(iconElement.cloneNode(true));
+        }
 
         if (this.treeWidget.options.buttonLeft) {
             div.appendChild(buttonLink);
         }
 
         // title span
-        div.appendChild(
-            this.createTitleSpan(
-                node.name,
-                level,
-                isSelected,
-                node.is_open,
-                true
-            )
+        const titleSpan = this.createTitleSpan(
+            node.name,
+            isSelected,
+            true,
+            level,
         );
+        titleSpan.setAttribute("aria-expanded", getBoolString(node.is_open));
+        div.appendChild(titleSpan);
 
         if (!this.treeWidget.options.buttonLeft) {
             div.appendChild(buttonLink);
@@ -197,7 +209,7 @@ export default class ElementsRenderer {
     private createNodeLi(
         node: Node,
         level: number,
-        isSelected: boolean
+        isSelected: boolean,
     ): HTMLLIElement {
         const liClasses = ["jqtree_common"];
 
@@ -210,35 +222,32 @@ export default class ElementsRenderer {
         // li
         const li = document.createElement("li");
         li.className = classString;
-        li.setAttribute("role", "presentation");
+        li.setAttribute("role", "none");
 
         // div
         const div = document.createElement("div");
         div.className = "jqtree-element jqtree_common";
-        div.setAttribute("role", "presentation");
+        div.setAttribute("role", "none");
 
         li.appendChild(div);
 
         // title span
-        div.appendChild(
-            this.createTitleSpan(
-                node.name,
-                level,
-                isSelected,
-                node.is_open,
-                false
-            )
+        const titleSpan = this.createTitleSpan(
+            node.name,
+            isSelected,
+            false,
+            level,
         );
+        div.appendChild(titleSpan);
 
         return li;
     }
 
     private createTitleSpan(
         nodeName: string,
-        level: number,
         isSelected: boolean,
-        isOpen: boolean,
-        isFolder: boolean
+        isFolder: boolean,
+        level: number,
     ): HTMLSpanElement {
         const titleSpan = document.createElement("span");
 
@@ -254,12 +263,6 @@ export default class ElementsRenderer {
 
         titleSpan.className = classes;
 
-        titleSpan.setAttribute("role", "treeitem");
-        titleSpan.setAttribute("aria-level", `${level}`);
-
-        titleSpan.setAttribute("aria-selected", getBoolString(isSelected));
-        titleSpan.setAttribute("aria-expanded", getBoolString(isOpen));
-
         if (isSelected) {
             const tabIndex = this.treeWidget.options.tabIndex;
 
@@ -268,6 +271,8 @@ export default class ElementsRenderer {
             }
         }
 
+        this.setTreeItemAriaAttributes(titleSpan, nodeName, level, isSelected);
+
         if (this.treeWidget.options.autoEscape) {
             titleSpan.textContent = nodeName;
         } else {
@@ -311,7 +316,9 @@ export default class ElementsRenderer {
         return classes.join(" ");
     }
 
-    private createButtonElement(value: string | Element): IconElement {
+    private createButtonElement(
+        value: IconElement,
+    ): HTMLElement | Text | undefined {
         if (typeof value === "string") {
             // convert value to html
             const div = document.createElement("div");

package/src/jqtreeOptions.ts

@@ -3,7 +3,7 @@ import { Node } from "./node";
 type CanMoveNodeTo = (
     node: Node,
     targetNode: Node,
-    positionName: string
+    positionName: string,
 ) => boolean;
 type CreateLi = (node: Node, el: JQuery, isSelected: boolean) => void;
 type DataFilter = (data: unknown) => NodeData[];
@@ -13,15 +13,15 @@ type DragMethod = (node: Node, event: Event | Touch) => void;
 type HandleLoadingMethod = (
     isLoading: boolean,
     node: Node | null,
-    $el: JQuery
+    $el: JQuery,
 ) => void;
 
 export interface JQTreeOptions {
-    animationSpeed: string | number;
+    animationSpeed: JQuery.Duration;
     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/mouse.widget.ts

@@ -219,6 +219,10 @@ abstract class MouseWidget<WidgetOptions> extends SimpleWidget<WidgetOptions> {
 
         const touch = e.changedTouches[0];
 
+        if (!touch) {
+            return;
+        }
+
         this.handleMouseDown(getPositionInfoFromTouch(touch, e));
     };
 
@@ -233,6 +237,10 @@ abstract class MouseWidget<WidgetOptions> extends SimpleWidget<WidgetOptions> {
 
         const touch = e.changedTouches[0];
 
+        if (!touch) {
+            return;
+        }
+
         this.handleMouseMove(e, getPositionInfoFromTouch(touch, e));
     };
 
@@ -247,6 +255,10 @@ abstract class MouseWidget<WidgetOptions> extends SimpleWidget<WidgetOptions> {
 
         const touch = e.changedTouches[0];
 
+        if (!touch) {
+            return;
+        }
+
         this.handleMouseUp(getPositionInfoFromTouch(touch, e));
     };
 }

package/src/node.ts

@@ -518,7 +518,7 @@ export class Node implements INode {
         } else {
             const previousIndex = this.parent.getChildIndex(this) - 1;
             if (previousIndex >= 0) {
-                return this.parent.children[previousIndex];
+                return this.parent.children[previousIndex] || null;
             } else {
                 return null;
             }
@@ -531,7 +531,7 @@ export class Node implements INode {
         } else {
             const nextIndex = this.parent.getChildIndex(this) + 1;
             if (nextIndex < this.parent.children.length) {
-                return this.parent.children[nextIndex];
+                return this.parent.children[nextIndex] || null;
             } else {
                 return null;
             }
@@ -558,7 +558,7 @@ export class Node implements INode {
 
     public getNextNode(includeChildren = true): Node | null {
         if (includeChildren && this.hasChildren()) {
-            return this.children[0];
+            return this.children[0] || null;
         } else if (!this.parent) {
             return null;
         } else {
@@ -575,7 +575,7 @@ export class Node implements INode {
     public getNextVisibleNode(): Node | null {
         if (this.hasChildren() && this.is_open) {
             // First child
-            return this.children[0];
+            return this.children[0] || null;
         } else {
             if (!this.parent) {
                 return null;
@@ -646,10 +646,15 @@ export class Node implements INode {
             return null;
         } else {
             const lastChild = this.children[this.children.length - 1];
+
+            if (!lastChild) {
+                return null;
+            }
+
             if (!(lastChild.hasChildren() && lastChild.is_open)) {
                 return lastChild;
             } else {
-                return lastChild.getLastChild();
+                return lastChild?.getLastChild();
             }
         }
     }

package/src/nodeElement.ts

@@ -34,7 +34,7 @@ export class NodeElement {
         if (this.mustShowBorderDropHint(position)) {
             return new BorderDropHint(
                 this.$element,
-                this.treeWidget._getScrollLeft()
+                this.treeWidget._getScrollLeft(),
             );
         } else {
             return new GhostDropHint(this.node, this.$element, position);
@@ -45,10 +45,10 @@ export class NodeElement {
         const $li = this.getLi();
 
         $li.addClass("jqtree-selected");
-        $li.attr("aria-selected", "true");
 
         const $span = this.getSpan();
         $span.attr("tabindex", this.treeWidget.options.tabIndex ?? null);
+        $span.attr("aria-selected", "true");
 
         if (mustSetFocus) {
             $span.trigger("focus");
@@ -59,12 +59,12 @@ export class NodeElement {
         const $li = this.getLi();
 
         $li.removeClass("jqtree-selected");
-        $li.attr("aria-selected", "false");
 
         const $span = this.getSpan();
         $span.removeAttr("tabindex");
+        $span.attr("aria-selected", "false");
 
-        $span.blur();
+        $span.trigger("blur");
     }
 
     protected getUl(): JQuery<HTMLElement> {
@@ -81,7 +81,7 @@ export class NodeElement {
         return this.$element;
     }
 
-    protected mustShowBorderDropHint(position: number): boolean {
+    protected mustShowBorderDropHint(position: Position): boolean {
         return position === Position.Inside;
     }
 }
@@ -90,7 +90,7 @@ export class FolderElement extends NodeElement {
     public open(
         onFinished: OnFinishOpenNode | null,
         slide = true,
-        animationSpeed: JQuery.Duration | string = "fast"
+        animationSpeed: JQuery.Duration = "fast",
     ): void {
         if (this.node.is_open) {
             return;
@@ -105,18 +105,21 @@ export class FolderElement extends NodeElement {
         const buttonEl = $button.get(0);
 
         if (buttonEl) {
-            const icon =
-                this.treeWidget.renderer.openedIconElement.cloneNode(true);
+            const openedIconElement =
+                this.treeWidget.renderer.openedIconElement;
 
-            buttonEl.appendChild(icon);
+            if (openedIconElement) {
+                const icon = openedIconElement.cloneNode(true);
+                buttonEl.appendChild(icon);
+            }
         }
 
         const doOpen = (): void => {
             const $li = this.getLi();
             $li.removeClass("jqtree-closed");
 
-            const $span = this.getSpan();
-            $span.attr("aria-expanded", "true");
+            const $titleSpan = this.getSpan();
+            $titleSpan.attr("aria-expanded", "true");
 
             if (onFinished) {
                 onFinished(this.node);
@@ -137,7 +140,7 @@ export class FolderElement extends NodeElement {
 
     public close(
         slide = true,
-        animationSpeed: JQuery.Duration | string = "fast"
+        animationSpeed: JQuery.Duration | undefined = "fast",
     ): void {
         if (!this.node.is_open) {
             return;
@@ -152,18 +155,21 @@ export class FolderElement extends NodeElement {
         const buttonEl = $button.get(0);
 
         if (buttonEl) {
-            const icon =
-                this.treeWidget.renderer.closedIconElement.cloneNode(true);
+            const closedIconElement =
+                this.treeWidget.renderer.closedIconElement;
 
-            buttonEl.appendChild(icon);
+            if (closedIconElement) {
+                const icon = closedIconElement.cloneNode(true);
+                buttonEl.appendChild(icon);
+            }
         }
 
         const doClose = (): void => {
             const $li = this.getLi();
             $li.addClass("jqtree-closed");
 
-            const $span = this.getSpan();
-            $span.attr("aria-expanded", "false");
+            const $titleSpan = this.getSpan();
+            $titleSpan.attr("aria-expanded", "false");
 
             this.treeWidget._triggerEvent("tree.close", {
                 node: this.node,
@@ -178,7 +184,7 @@ export class FolderElement extends NodeElement {
         }
     }
 
-    protected mustShowBorderDropHint(position: number): boolean {
+    protected mustShowBorderDropHint(position: Position): boolean {
         return !this.node.is_open && position === Position.Inside;
     }
 
@@ -217,13 +223,13 @@ class GhostDropHint implements DropHint {
     private node: Node;
     private $ghost: JQuery;
 
-    constructor(node: Node, $element: JQuery<Element>, position: number) {
+    constructor(node: Node, $element: JQuery<Element>, position: Position) {
         this.$element = $element;
 
         this.node = node;
         this.$ghost = jQuery(
             `<li class="jqtree_common jqtree-ghost"><span class="jqtree_common jqtree-circle"></span>
-            <span class="jqtree_common jqtree-line"></span></li>`
+            <span class="jqtree_common jqtree-line"></span></li>`,
         );
 
         if (position === Position.After) {
@@ -252,7 +258,7 @@ class GhostDropHint implements DropHint {
     }
 
     public moveInsideOpenFolder(): void {
-        const childElement = this.node.children[0].element;
+        const childElement = this.node.children[0]?.element;
 
         if (childElement) {
             jQuery(childElement).before(this.$ghost);