jqtree 1.6.3 → 1.7.1

package/lib/util.js

@@ -4,21 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isInt = exports.isFunction = exports.getBoolString = void 0;
-
 var isInt = function isInt(n) {
   return typeof n === "number" && n % 1 === 0;
 };
-
 exports.isInt = isInt;
-
 var isFunction = function isFunction(v) {
   return typeof v === "function";
 };
-
 exports.isFunction = isFunction;
-
 var getBoolString = function getBoolString(value) {
   return value ? "true" : "false";
 };
-
 exports.getBoolString = getBoolString;

package/lib/version.js

@@ -4,6 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var version = "1.6.2";
+var version = "1.7.1";
 var _default = version;
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jqtree",
-    "version": "1.6.3",
+    "version": "1.7.1",
     "description": "Tree widget for jQuery",
     "keywords": [
         "jquery-plugin",
@@ -16,66 +16,63 @@
     "scripts": {
         "ci": "pnpm lint && pnpm tsc && pnpm test",
         "jest": "jest --coverage --no-cache --verbose --config ./config/jest.config.js",
-        "jest-watch": "jest --watch",
+        "jest-watch": "jest --watch --config ./config/jest.config.js",
         "lint": "eslint src/ --ext .ts,.tsx",
         "production": "./config/production",
-        "devserver": "SERVE=true rollup --config config/rollup.config.js --watch",
-        "devserver-with-coverage": "COVERAGE=true SERVE=true rollup --config config/rollup.config.js",
-        "build-with-coverage": "COVERAGE=true rollup --config config/rollup.config.js",
+        "devserver": "SERVE=true rollup --config config/rollup.config.mjs --watch",
+        "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",
-        "coveralls": "nyc report --reporter=text-lcov | coveralls",
         "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.0"
+        "jquery": "^3.7.0"
     },
     "devDependencies": {
-        "@babel/cli": "^7.18.10",
-        "@babel/core": "^7.18.10",
-        "@babel/preset-env": "^7.18.10",
-        "@babel/preset-typescript": "^7.18.6",
-        "@playwright/test": "^1.24.2",
-        "@rollup/plugin-babel": "^5.3.1",
-        "@rollup/plugin-node-resolve": "^13.3.0",
-        "@testing-library/dom": "^8.16.1",
-        "@types/debug": "^4.1.7",
-        "@types/jest": "^28.1.6",
-        "@types/jquery": "^3.5.14",
-        "@typescript-eslint/eslint-plugin": "^5.32.0",
-        "@typescript-eslint/parser": "^5.32.0",
-        "autoprefixer": "^10.4.8",
-        "babel-jest": "^28.1.3",
+        "@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",
+        "@rollup/plugin-babel": "^6.0.3",
+        "@rollup/plugin-node-resolve": "^15.1.0",
+        "@rollup/plugin-terser": "^0.4.3",
+        "@testing-library/dom": "^9.3.1",
+        "@types/debug": "^4.1.8",
+        "@types/jest": "^29.5.3",
+        "@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",
         "babel-plugin-istanbul": "^6.1.1",
-        "coveralls": "^3.1.1",
-        "eslint": "^8.21.0",
-        "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-jest": "^26.7.0",
-        "eslint-plugin-playwright": "^0.10.0",
-        "eslint-plugin-testing-library": "^5.6.0",
+        "eslint": "^8.46.0",
+        "eslint-plugin-import": "^2.28.0",
+        "eslint-plugin-jest": "^27.2.3",
+        "eslint-plugin-playwright": "^0.15.3",
+        "eslint-plugin-testing-library": "^5.11.0",
         "givens": "^1.3.9",
-        "jest": "^28.1.3",
-        "jest-environment-jsdom": "^28.1.3",
-        "jest-extended": "^3.0.2",
+        "graphql": "^16.7.1",
+        "jest": "^29.6.2",
+        "jest-axe": "^8.0.0",
+        "jest-environment-jsdom": "^29.6.2",
+        "jest-extended": "^4.0.1",
         "jsonfile": "^6.1.0",
         "lodash.template": "^4.5.0",
-        "msw": "^0.44.2",
-        "nyc": "^15.1.0",
-        "playwright": "^1.24.2",
-        "postcss": "^8.4.16",
-        "postcss-cli": "^10.0.0",
-        "postcss-import": "^14.1.0",
+        "msw": "^1.2.3",
+        "postcss": "^8.4.27",
+        "postcss-cli": "^10.1.0",
+        "postcss-import": "^15.1.0",
         "postcss-load-config": "^4.0.1",
-        "postcss-nested": "^5.0.6",
-        "prettier": "^2.7.1",
-        "rollup": "^2.77.2",
-        "rollup-plugin-serve": "^2.0.0",
-        "rollup-plugin-terser": "^7.0.2",
-        "tslib": "^2.4.0",
-        "typescript": "^4.7.4"
+        "postcss-nested": "^6.0.1",
+        "prettier": "^3.0.1",
+        "rollup": "^3.27.2",
+        "rollup-plugin-serve": "^2.0.2",
+        "tslib": "^2.6.1",
+        "typescript": "~5.1.6"
     }
 }

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

@@ -5,8 +5,8 @@ import { JqTreeWidget } from "./tree.jquery";
 type IconElement = Text | Element;
 
 export default class ElementsRenderer {
-    public openedIconElement: IconElement;
-    public closedIconElement: IconElement;
+    public openedIconElement?: IconElement;
+    public closedIconElement?: IconElement;
     private treeWidget: JqTreeWidget;
 
     constructor(treeWidget: JqTreeWidget) {
@@ -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 {
@@ -139,6 +141,18 @@ 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,
@@ -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);
@@ -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: string | Element
+    ): IconElement | 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,11 +13,11 @@ 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;

package/src/keyHandler.ts

@@ -22,11 +22,11 @@ export default class KeyHandler {
     }
 
     public moveDown(selectedNode: Node): boolean {
-        return this.selectNode(selectedNode.getNextNode());
+        return this.selectNode(selectedNode.getNextVisibleNode());
     }
 
     public moveUp(selectedNode: Node): boolean {
-        return this.selectNode(selectedNode.getPreviousNode());
+        return this.selectNode(selectedNode.getPreviousVisibleNode());
     }
 
     public moveRight(selectedNode: Node): boolean {
@@ -36,7 +36,7 @@ export default class KeyHandler {
             // folder node
             if (selectedNode.is_open) {
                 // Right moves to the first child of an open node
-                return this.selectNode(selectedNode.getNextNode());
+                return this.selectNode(selectedNode.getNextVisibleNode());
             } else {
                 // Right expands a closed node
                 this.treeWidget.openNode(selectedNode);

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;
             }
@@ -557,9 +557,25 @@ export class Node implements INode {
     }
 
     public getNextNode(includeChildren = true): Node | null {
-        if (includeChildren && this.hasChildren() && this.is_open) {
+        if (includeChildren && this.hasChildren()) {
+            return this.children[0] || null;
+        } else if (!this.parent) {
+            return null;
+        } else {
+            const nextSibling = this.getNextSibling();
+
+            if (nextSibling) {
+                return nextSibling;
+            } else {
+                return this.parent.getNextNode(false);
+            }
+        }
+    }
+
+    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;
@@ -581,19 +597,34 @@ export class Node implements INode {
             return null;
         } else {
             const previousSibling = this.getPreviousSibling();
-            if (previousSibling) {
-                if (
-                    !previousSibling.hasChildren() ||
-                    !previousSibling.is_open
-                ) {
-                    // Previous sibling
-                    return previousSibling;
-                } else {
-                    // Last child of previous sibling
-                    return previousSibling.getLastChild();
-                }
+
+            if (!previousSibling) {
+                return this.getParent();
+            } else if (previousSibling.hasChildren()) {
+                return previousSibling.getLastChild();
             } else {
+                return previousSibling;
+            }
+        }
+    }
+
+    public getPreviousVisibleNode(): Node | null {
+        if (!this.parent) {
+            return null;
+        } else {
+            const previousSibling = this.getPreviousSibling();
+
+            if (!previousSibling) {
                 return this.getParent();
+            } else if (
+                !previousSibling.hasChildren() ||
+                !previousSibling.is_open
+            ) {
+                // Previous sibling
+                return previousSibling;
+            } else {
+                // Last child of previous sibling
+                return previousSibling.getLastChild();
             }
         }
     }
@@ -615,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();
             }
         }
     }