tree-element 0.2.0 → 0.3.1

package/lib/setDefaultOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"setDefaultOptions.js","sources":["../src/setDefaultOptions.ts"],"sourcesContent":["import type { TreeElementOptions } from \"./options\";\n\nimport { DEFAULT_CLASS_PREFIX } from \"./classNames\";\nimport { Node } from \"./node\";\n\nconst defaults: TreeElementOptions = {\n  animationSpeed: \"fast\",\n  autoEscape: true,\n  autoOpen: false, // true / false / int (open n levels starting at 0)\n  buttonLeft: true,\n  classPrefix: DEFAULT_CLASS_PREFIX, // the prefix of all css classes\n  // The symbol to use for a closed node - ► BLACK RIGHT-POINTING POINTER\n  // http://www.fileformat.info/info/unicode/char/25ba/index.htm\n  // closedIcon: undefined,\n  // commonClassName: undefined, // the class of every element; the default is \"<classPrefix>-common\"\n  // data: undefined,\n  // dataFilter: undefined,\n  // dataUrl: undefined,\n  dragAndDrop: false,\n  keyboardSupport: true,\n  nodeClass: Node,\n  // onCanMove: undefined, // Can this node be moved?\n  // onCanMoveTo: undefined, // Can this node be moved to this position? function(moved_node, target_node, position)\n  // onCanSelectNode: undefined,\n  // onCreateLi: undefined,\n  // onDragMove: undefined,\n  // onDragStop: undefined,\n  // onGetStateFromStorage: undefined,\n  // onIsMoveHandle: undefined,\n  // onSetStateFromStorage: undefined,\n  // openedIcon: undefined,\n  openFolderDelay: 500, // The delay for opening a folder during drag and drop; the value is in milliseconds\n  // The symbol to use for an open node - ▼ BLACK DOWN-POINTING TRIANGLE\n  // http://www.fileformat.info/info/unicode/char/25bc/index.htm\n  // rtl: undefined, // right-to-left support; true / false (default)\n  saveState: false, // true / false / string (local storage key; the default key is \"tree\")\n  selectable: true,\n  showEmptyFolder: false,\n  slide: true, // must display slide animation?\n  startDndDelay: 300, // The delay for starting dnd (in milliseconds)\n  tabIndex: 0,\n  // treeClassName: undefined, // the class of the root element; the default is classPrefix\n  useContextMenu: true,\n};\n\nconst setDefaultOptions = (\n  htmlElement: HTMLElement,\n  inputOptions: Partial<TreeElementOptions>,\n): TreeElementOptions => {\n  const options = { ...defaults, ...inputOptions };\n\n  options.dataUrl ??= htmlElement.dataset.url;\n  options.rtl ??= getRtlOptionFromHTMLElement(htmlElement);\n  options.closedIcon ??= getDefaultClosedIcon(options);\n  options.openedIcon ??= \"&#x25bc;\";\n\n  return options;\n};\n\nconst getDefaultClosedIcon = (options: TreeElementOptions): string => {\n  if (options.rtl) {\n    // triangle to the left\n    return \"&#x25c0;\";\n  } else {\n    // triangle to the right\n    return \"&#x25ba;\";\n  }\n};\n\nconst getRtlOptionFromHTMLElement = (htmlElement: HTMLElement): boolean => {\n  const dataRtl = htmlElement.dataset.rtl;\n\n  if (dataRtl == \"\") {\n    return true;\n  } else if (dataRtl === \"false\") {\n    return false;\n  } else {\n    return Boolean(dataRtl);\n  }\n};\n\nexport default setDefaultOptions;\n"],"names":[],"mappings":";;;AAKA,IAAM,QAA4B,GAAG;AACnC,EAAA,cAAc,EAAE,MAAM;AACtB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,QAAQ,EAAE,KAAK;AAAE;AACjB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,WAAW,EAAE,oBAAoB;AAAE;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,WAAW,EAAE,KAAK;AAClB,EAAA,eAAe,EAAE,IAAI;AACrB,EAAA,SAAS,EAAE,IAAI;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,eAAe,EAAE,GAAG;AAAE;AACtB;AACA;AACA;AACA,EAAA,SAAS,EAAE,KAAK;AAAE;AAClB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,eAAe,EAAE,KAAK;AACtB,EAAA,KAAK,EAAE,IAAI;AAAE;AACb,EAAA,aAAa,EAAE,GAAG;AAAE;AACpB,EAAA,QAAQ,EAAE,CAAC;AACX;AACA,EAAA,cAAc,EAAE;AAClB,CAAC;AAED,IAAM,iBAAiB,GAAG,CACxB,WAAwB,EACxB,YAAyC,KAClB;AACvB,EAAA,IAAM,OAAO,GAAG;AAAE,IAAA,GAAG,QAAQ;IAAE,GAAG;GAAc;AAEhD,EAAA,OAAO,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,CAAC,GAAG;AAC3C,EAAA,OAAO,CAAC,GAAG,KAAK,2BAA2B,CAAC,WAAW,CAAC;AACxD,EAAA,OAAO,CAAC,UAAU,KAAK,oBAAoB,CAAC,OAAO,CAAC;EACpD,OAAO,CAAC,UAAU,KAAK,UAAU;AAEjC,EAAA,OAAO,OAAO;AAChB;AAEA,IAAM,oBAAoB,GAAI,OAA2B,IAAa;EACpE,IAAI,OAAO,CAAC,GAAG,EAAE;AACf;AACA,IAAA,OAAO,UAAU;AACnB,EAAA,CAAC,MAAM;AACL;AACA,IAAA,OAAO,UAAU;AACnB,EAAA;AACF,CAAC;AAED,IAAM,2BAA2B,GAAI,WAAwB,IAAc;AACzE,EAAA,IAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,GAAG;EAEvC,IAAI,OAAO,IAAI,EAAE,EAAE;AACjB,IAAA,OAAO,IAAI;AACb,EAAA,CAAC,MAAM,IAAI,OAAO,KAAK,OAAO,EAAE;AAC9B,IAAA,OAAO,KAAK;AACd,EAAA,CAAC,MAAM;IACL,OAAO,OAAO,CAAC,OAAO,CAAC;AACzB,EAAA;AACF,CAAC;;"}
+{"version":3,"file":"setDefaultOptions.js","sources":["../src/setDefaultOptions.ts"],"sourcesContent":["import type { AnimationSpeed } from \"./animation\";\nimport type { TreeElementOptions } from \"./options\";\n\nimport { DEFAULT_CLASS_PREFIX } from \"./classNames\";\nimport { Node } from \"./node\";\n\n/* The default icons are svg instead of text: the triangle characters come\n * from different fonts on each platform, so they differ in shape and size.\n * They are sized in em to follow the font size, and use currentColor to follow\n * --tree-element-toggler-color.\n */\nconst triangle = (points: string): string =>\n  `<svg width=\"0.7em\" height=\"0.7em\" viewBox=\"0 0 10 10\" focusable=\"false\"><polygon points=\"${points}\" fill=\"currentColor\"/></svg>`;\n\nexport const triangleDown = triangle(\"0.5,1.5 9.5,1.5 5,9\");\nexport const triangleLeft = triangle(\"9,0.5 9,9.5 1.5,5\");\nexport const triangleRight = triangle(\"1,0.5 1,9.5 8.5,5\");\n\nconst defaults: TreeElementOptions = {\n  animationSpeed: \"fast\",\n  autoEscape: true,\n  autoOpen: false, // true / false / int (open n levels starting at 0)\n  buttonLeft: true,\n  classPrefix: DEFAULT_CLASS_PREFIX, // the prefix of all css classes\n  // closedIcon: undefined, // the default is a triangle; see getDefaultClosedIcon\n  // commonClassName: undefined, // the class of every element; the default is \"<classPrefix>-common\"\n  // data: undefined,\n  // dataFilter: undefined,\n  // dataUrl: undefined,\n  dragAndDrop: false,\n  keyboardSupport: true,\n  nodeClass: Node,\n  // onCanMove: undefined, // Can this node be moved?\n  // onCanMoveTo: undefined, // Can this node be moved to this position? function(moved_node, target_node, position)\n  // onCanSelectNode: undefined,\n  // onCreateLi: undefined,\n  // onDragMove: undefined,\n  // onDragStop: undefined,\n  // onGetStateFromStorage: undefined,\n  // onIsMoveHandle: undefined,\n  // onSetStateFromStorage: undefined,\n  // openedIcon: undefined, // the default is a triangle pointing down\n  openFolderDelay: 500, // The delay for opening a folder during drag and drop; the value is in milliseconds\n  // rtl: undefined, // right-to-left support; true / false (default)\n  saveState: false, // true / false / string (local storage key; the default key is \"tree\")\n  selectable: true,\n  showEmptyFolder: false,\n  slide: true, // must display slide animation?\n  startDndDelay: 300, // The delay for starting dnd (in milliseconds)\n  tabIndex: 0,\n  // treeClassName: undefined, // the class of the root element; the default is classPrefix\n  useContextMenu: true,\n};\n\nconst setDefaultOptions = (\n  htmlElement: HTMLElement,\n  inputOptions: Partial<TreeElementOptions>,\n): TreeElementOptions => {\n  const options = {\n    ...defaults,\n    ...inputOptions,\n    animationSpeed: inputOptions.animationSpeed ?? getDefaultAnimationSpeed(),\n  };\n\n  options.dataUrl ??= htmlElement.dataset.url;\n  options.rtl ??= getRtlOptionFromHTMLElement(htmlElement);\n  options.closedIcon ??= getDefaultClosedIcon(options);\n  options.openedIcon ??= triangleDown;\n\n  return options;\n};\n\n// No animation when the user asked the system for reduced motion\nconst getDefaultAnimationSpeed = (): AnimationSpeed =>\n  prefersReducedMotion() ? 0 : defaults.animationSpeed;\n\nconst prefersReducedMotion = (): boolean =>\n  typeof window.matchMedia === \"function\" &&\n  window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\nconst getDefaultClosedIcon = (options: TreeElementOptions): string => {\n  return options.rtl ? triangleLeft : triangleRight;\n};\n\nconst getRtlOptionFromHTMLElement = (htmlElement: HTMLElement): boolean => {\n  const dataRtl = htmlElement.dataset.rtl;\n\n  if (dataRtl == \"\") {\n    return true;\n  }\n  return dataRtl === \"false\" ? false : Boolean(dataRtl);\n};\n\nexport default setDefaultOptions;\n"],"names":[],"mappings":";;;AAMA;AACA;AACA;AACA;AACA;AACA,IAAM,QAAQ,GAAI,MAAc,IAC9B,CAAA,yFAAA,EAA4F,MAAM,CAAA,6BAAA,CAA+B;IAEtH,YAAY,GAAG,QAAQ,CAAC,qBAAqB;IAC7C,YAAY,GAAG,QAAQ,CAAC,mBAAmB;IAC3C,aAAa,GAAG,QAAQ,CAAC,mBAAmB;AAEzD,IAAM,QAA4B,GAAG;AACnC,EAAA,cAAc,EAAE,MAAM;AACtB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,QAAQ,EAAE,KAAK;AAAE;AACjB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,WAAW,EAAE,oBAAoB;AAAE;AACnC;AACA;AACA;AACA;AACA;AACA,EAAA,WAAW,EAAE,KAAK;AAClB,EAAA,eAAe,EAAE,IAAI;AACrB,EAAA,SAAS,EAAE,IAAI;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,eAAe,EAAE,GAAG;AAAE;AACtB;AACA,EAAA,SAAS,EAAE,KAAK;AAAE;AAClB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,eAAe,EAAE,KAAK;AACtB,EAAA,KAAK,EAAE,IAAI;AAAE;AACb,EAAA,aAAa,EAAE,GAAG;AAAE;AACpB,EAAA,QAAQ,EAAE,CAAC;AACX;AACA,EAAA,cAAc,EAAE;AAClB,CAAC;AAED,IAAM,iBAAiB,GAAG,CACxB,WAAwB,EACxB,YAAyC,KAClB;AACvB,EAAA,IAAM,OAAO,GAAG;AACd,IAAA,GAAG,QAAQ;AACX,IAAA,GAAG,YAAY;AACf,IAAA,cAAc,EAAE,YAAY,CAAC,cAAc,IAAI,wBAAwB;GACxE;AAED,EAAA,OAAO,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,CAAC,GAAG;AAC3C,EAAA,OAAO,CAAC,GAAG,KAAK,2BAA2B,CAAC,WAAW,CAAC;AACxD,EAAA,OAAO,CAAC,UAAU,KAAK,oBAAoB,CAAC,OAAO,CAAC;EACpD,OAAO,CAAC,UAAU,KAAK,YAAY;AAEnC,EAAA,OAAO,OAAO;AAChB;;AAEA;AACA,IAAM,wBAAwB,GAAG,MAC/B,oBAAoB,EAAE,GAAG,CAAC,GAAG,QAAQ,CAAC,cAAc;AAEtD,IAAM,oBAAoB,GAAG,MAC3B,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU,IACvC,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO;AAE/D,IAAM,oBAAoB,GAAI,OAA2B,IAAa;AACpE,EAAA,OAAO,OAAO,CAAC,GAAG,GAAG,YAAY,GAAG,aAAa;AACnD,CAAC;AAED,IAAM,2BAA2B,GAAI,WAAwB,IAAc;AACzE,EAAA,IAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,GAAG;EAEvC,IAAI,OAAO,IAAI,EAAE,EAAE;AACjB,IAAA,OAAO,IAAI;AACb,EAAA;EACA,OAAO,OAAO,KAAK,OAAO,GAAG,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC;AACvD,CAAC;;"}

package/lib/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,GAAI,GAAG,OAAO,KAAG,OACG,CAAC;AAEvC,eAAO,MAAM,aAAa,GAAI,OAAO,OAAO,KAAG,MACrB,CAAC"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,GAAI,GAAG,OAAO,KAAG,OAA8B,CAAC;AAElE,eAAO,MAAM,aAAa,GAAI,OAAO,OAAO,KAAG,MACrB,CAAC"}

package/lib/util.js

@@ -1,4 +1,4 @@
-let isInt = n => typeof n === "number" && n % 1 === 0;
+let isInt = n => Number.isInteger(n);
 let getBoolString = value => value ? "true" : "false";
 
 export { getBoolString, isInt };

package/lib/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../src/util.ts"],"sourcesContent":["export const isInt = (n: unknown): boolean =>\n  typeof n === \"number\" && n % 1 === 0;\n\nexport const getBoolString = (value: unknown): string =>\n  value ? \"true\" : \"false\";\n"],"names":[],"mappings":"AAAO,IAAM,KAAK,GAAI,CAAU,IAC9B,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,GAAG,CAAC,KAAK;AAE9B,IAAM,aAAa,GAAI,KAAc,IAC1C,KAAK,GAAG,MAAM,GAAG;;"}
+{"version":3,"file":"util.js","sources":["../src/util.ts"],"sourcesContent":["export const isInt = (n: unknown): boolean => Number.isInteger(n);\n\nexport const getBoolString = (value: unknown): string =>\n  value ? \"true\" : \"false\";\n"],"names":[],"mappings":"AAAO,IAAM,KAAK,GAAI,CAAU,IAAc,MAAM,CAAC,SAAS,CAAC,CAAC;AAEzD,IAAM,aAAa,GAAI,KAAc,IAC1C,KAAK,GAAG,MAAM,GAAG;;"}

package/lib/version.d.ts

@@ -1,3 +1,3 @@
-declare const version = "0.2.0";
+declare const version = "0.3.1";
 export default version;
 //# sourceMappingURL=version.d.ts.map

package/lib/version.js

@@ -1,5 +1,5 @@
 // Generated by config/generateVersion.mjs. Do not edit.
-let version = "0.2.0";
+let version = "0.3.1";
 
 export { version as default };
 //# sourceMappingURL=version.js.map

package/lib/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["// Generated by config/generateVersion.mjs. Do not edit.\nconst version = \"0.2.0\";\n\nexport default version;\n"],"names":[],"mappings":"AAAA;AACA,IAAM,OAAO,GAAG;;"}
+{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["// Generated by config/generateVersion.mjs. Do not edit.\nconst version = \"0.3.1\";\n\nexport default version;\n"],"names":[],"mappings":"AAAA;AACA,IAAM,OAAO,GAAG;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tree-element",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Tree widget in plain javascript",
   "keywords": [
     "tree"
@@ -20,6 +20,10 @@
     "./package.json": "./package.json"
   },
   "sideEffects": false,
+  "browserslist": [
+    "defaults",
+    "not op_mini all"
+  ],
   "files": [
     "tree_element.css",
     "tree_element.debug.js",
@@ -36,9 +40,9 @@
   "scripts": {
     "ci": "pnpm lint && pnpm tsc && pnpm docs-check && pnpm test",
     "build-debug": "DEBUG_BUILD=true rollup --config config/rollup.config.mjs",
-    "vitest": "pnpm build-debug && vitest run --coverage --config test/vitest.config.mjs",
-    "vitest-watch": "vitest --config test/vitest.config.mjs",
-    "lint": "eslint config src playwright test",
+    "vitest": "pnpm build-debug && vitest run --coverage --config config/vitest.config.mjs",
+    "vitest-watch": "vitest --config config/vitest.config.mjs",
+    "lint": "eslint css src playwright test",
     "production": "./config/production",
     "devserver": "SERVE=true rollup --config config/rollup.config.mjs --watch",
     "docs-api": "typedoc && node docs/scripts/fixApiLinks.mjs",
@@ -47,68 +51,73 @@
     "docs-preview": "vitepress preview docs",
     "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 test/**/*.ts --write --tab-width 2",
+    "prettier": "prettier \"src/**/*.ts\" \"test/**/*.ts\" --write",
     "tsc": "tsc --noEmit --project tsconfig.json",
     "version": "node config/generateVersion.mjs && git add src/version.ts",
     "prepublishOnly": "pnpm run production",
     "release": "node config/release.mjs",
-    "playwright": "pnpm build-with-coverage && playwright test --config playwright/playwright.config.js",
+    "playwright": "pnpm build-with-coverage && playwright test --config config/playwright.config.js",
     "test": "pnpm vitest && pnpm playwright",
     "docs-check": "kiira check"
   },
   "devDependencies": {
-    "@babel/cli": "^8.0.4",
-    "@babel/core": "^8.0.1",
-    "@babel/preset-env": "^8.0.2",
-    "@babel/preset-typescript": "^8.0.1",
-    "@cspell/eslint-plugin": "^10.2.0",
-    "@eslint/js": "^10",
-    "@playwright/test": "^1.62.1",
+    "@axe-core/playwright": "^4.13.0",
+    "@babel/cli": "^8.0.6",
+    "@babel/core": "^8.0.7",
+    "@babel/preset-env": "^8.0.7",
+    "@babel/preset-typescript": "^8.0.7",
+    "@cspell/eslint-plugin": "^10.3.6",
+    "@eslint/css": "^2.0.0",
+    "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.64.0",
     "@rollup/plugin-babel": "^7.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^1.0.0",
-    "@testing-library/dom": "^10.4.1",
+    "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",
-    "@testing-library/user-event": "^14.6.6",
+    "@testing-library/user-event": "^14.6.7",
     "@types/debug": "^4.1.13",
-    "@types/node": "^26.4.0",
-    "@vitest/coverage-istanbul": "^4.1.11",
+    "@types/node": "^26.6.5",
+    "@vitest/coverage-istanbul": "^5.0.3",
     "@vitest/eslint-plugin": "^1.6.27",
-    "autoprefixer": "^10.5.4",
-    "axe-core": "^4.13.0",
+    "axe-core": "^4.14.0",
     "babel-plugin-istanbul": "^8.0.0",
-    "babel-plugin-prefix-private-members": "^0.2.0",
-    "eslint": "^10",
+    "babel-plugin-prefix-private-members": "^0.3.1",
+    "eslint": "^10.12.0",
     "eslint-import-resolver-typescript": "^4.4.5",
+    "eslint-plugin-compat": "^7.0.2",
     "eslint-plugin-import-x": "^4.17.1",
     "eslint-plugin-jest-dom": "^5.10.1",
-    "eslint-plugin-jest-extended": "^3.0.1",
-    "eslint-plugin-perfectionist": "^5.11.0",
-    "eslint-plugin-playwright": "^2.11.0",
+    "eslint-plugin-jest-extended": "github:mbraak/eslint-plugin-jest-extended#modernize",
+    "eslint-plugin-no-unsanitized": "^4.1.5",
+    "eslint-plugin-perfectionist": "^5.12.1",
+    "eslint-plugin-playwright": "^2.12.1",
     "eslint-plugin-testing-library": "^7.16.2",
+    "eslint-plugin-tsdoc": "^0.5.4",
+    "eslint-plugin-unicorn": "^77.0.0",
     "jest-extended": "^7.0.0",
-    "jsdom": "^30",
+    "jsdom": "^30.1.2",
     "jsdom-testing-mocks": "^1.16.0",
     "jsonfile": "^6.2.1",
     "kiira": "^0.6.0",
     "kiira-core": "^0.6.0",
     "lodash": "^4.18.1",
-    "msw": "^2.15.0",
-    "postcss": "^8.5.26",
-    "postcss-cli": "^11.0.1",
-    "postcss-import": "^17",
+    "msw": "^3.0.3",
+    "postcss": "^8.5.29",
+    "postcss-cli": "^12.0.0",
+    "postcss-import": "^17.0.0",
     "postcss-load-config": "^6.0.1",
-    "postcss-nested": "^8",
-    "prettier": "^3.9.6",
-    "rollup": "^4.63.1",
+    "postcss-nested": "^8.0.1",
+    "prettier": "^3.9.10",
+    "rollup": "^4.64.5",
     "rollup-plugin-serve": "^3.0.0",
     "rollup-plugin-tsconfig-paths": "^1.5.2",
     "tslib": "^2.8.1",
     "typedoc": "^0.28.20",
-    "typedoc-plugin-markdown": "^4.13.0",
+    "typedoc-plugin-markdown": "^4.13.1",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.69.0",
+    "typescript-eslint": "^8.71.1",
     "vitepress": "^1.6.4",
-    "vitest": "^4.1.11"
+    "vitest": "^5.0.3"
   }
 }

package/src/animation.ts

@@ -11,8 +11,7 @@ export const getAnimationDuration = (duration: AnimationSpeed): number => {
 export const slideDown = (
   element: HTMLElement,
   animationSpeed: AnimationSpeed,
-  onFinished: () => void,
-): void => {
+): Promise<void> => {
   element.style.display = "block";
 
   const animation = element.animate(
@@ -23,16 +22,17 @@ export const slideDown = (
     { duration: getAnimationDuration(animationSpeed) },
   );
 
-  animation.onfinish = () => {
-    onFinished();
-  };
+  return new Promise((resolve) => {
+    animation.onfinish = () => {
+      resolve();
+    };
+  });
 };
 
 export const slideUp = (
   element: HTMLElement,
   animationSpeed: AnimationSpeed,
-  onFinished: () => void,
-): void => {
+): Promise<void> => {
   const animation = element.animate(
     [
       { height: `${element.scrollHeight}px`, overflow: "hidden" },
@@ -41,8 +41,10 @@ export const slideUp = (
     { duration: getAnimationDuration(animationSpeed) },
   );
 
-  animation.onfinish = () => {
-    element.style.display = "none";
-    onFinished();
-  };
+  return new Promise((resolve) => {
+    animation.onfinish = () => {
+      element.style.display = "none";
+      resolve();
+    };
+  });
 };

package/src/dataLoader.ts

@@ -43,6 +43,10 @@ export default class DataLoader {
     const element = node?.element ?? this.treeElement;
     element.classList.add(this.classNames.loading);
 
+    // Tell screen readers that the children of the folder are loading
+    const titleSpan = node ? this.getTitleSpan(element) : null;
+    titleSpan?.setAttribute("aria-busy", "true");
+
     this.triggerEvent("tree.loading_data", {
       element,
       node,
@@ -50,6 +54,7 @@ export default class DataLoader {
 
     const stopLoading = (): void => {
       element.classList.remove(this.classNames.loading);
+      titleSpan?.removeAttribute("aria-busy");
       this.triggerEvent("tree.loaded_data", {
         element,
         node,
@@ -87,4 +92,10 @@ export default class DataLoader {
         this.triggerEvent("tree.load_failed", { error });
       });
   }
+
+  private getTitleSpan(element: HTMLElement): HTMLElement | null {
+    return element.querySelector<HTMLElement>(
+      `:scope > .${this.classNames.element} > .${this.classNames.title}`,
+    );
+  }
 }

package/src/dragAndDropHandler/dragElement.ts

@@ -27,7 +27,7 @@ class DragElement {
 
     this.element = this.createElement(nodeName, autoEscape, classNames);
 
-    treeElement.appendChild(this.element);
+    treeElement.append(this.element);
   }
 
   public move(pageX: number, pageY: number): void {
@@ -50,6 +50,7 @@ class DragElement {
     if (autoEscape) {
       element.textContent = nodeName;
     } else {
+      // eslint-disable-next-line no-unsanitized/property -- the user opted out of escaping with autoEscape: false
       element.innerHTML = nodeName;
     }
 

package/src/dragAndDropHandler/index.ts

@@ -139,10 +139,8 @@ export class DragAndDropHandler {
 
     let nodeElement = this.getNodeElement(element);
 
-    if (nodeElement && this.onCanMove) {
-      if (!this.onCanMove(nodeElement.node)) {
-        nodeElement = null;
-      }
+    if (nodeElement && this.onCanMove && !this.onCanMove(nodeElement.node)) {
+      nodeElement = null;
     }
 
     this.currentItem = nodeElement;
@@ -181,10 +179,8 @@ export class DragAndDropHandler {
       this.hoveredArea = area;
     }
 
-    if (!area) {
-      if (this.onDragMove) {
-        this.onDragMove(this.currentItem.node, positionInfo.originalEvent);
-      }
+    if (!area && this.onDragMove) {
+      this.onDragMove(this.currentItem.node, positionInfo.originalEvent);
     }
 
     return true;
@@ -232,10 +228,8 @@ export class DragAndDropHandler {
 
     this.isDragging = false;
 
-    if (!this.hoveredArea && currentItem) {
-      if (this.onDragStop) {
-        this.onDragStop(currentItem.node, positionInfo.originalEvent);
-      }
+    if (!this.hoveredArea && currentItem && this.onDragStop) {
+      this.onDragStop(currentItem.node, positionInfo.originalEvent);
     }
 
     return false;
@@ -244,30 +238,32 @@ export class DragAndDropHandler {
   public refresh(): void {
     this.removeHitAreas();
 
-    if (this.currentItem) {
-      const currentNode = this.currentItem.node;
-      this.generateHitAreas(currentNode);
-      this.currentItem = this.getNodeElementForNode(currentNode);
+    if (!this.currentItem) {
+      return;
+    }
 
-      if (this.isDragging) {
-        this.currentItem.element.classList.add(this.classNames.moving);
-      }
+    const currentNode = this.currentItem.node;
+    this.generateHitAreas(currentNode);
+    this.currentItem = this.getNodeElementForNode(currentNode);
+
+    if (this.isDragging) {
+      this.currentItem.element.classList.add(this.classNames.moving);
     }
   }
 
   private canMoveToArea(area: HitArea, currentItem: NodeElement): boolean {
-    if (!this.onCanMoveTo) {
-      return true;
-    }
-
-    return this.onCanMoveTo(currentItem.node, area.node, area.position);
+    return this.onCanMoveTo
+      ? this.onCanMoveTo(currentItem.node, area.node, area.position)
+      : true;
   }
 
   private clear(): void {
-    if (this.dragElement) {
-      this.dragElement.remove();
-      this.dragElement = null;
+    if (!this.dragElement) {
+      return;
     }
+
+    this.dragElement.remove();
+    this.dragElement = null;
   }
 
   private findHoveredArea(x: number, y: number): HitArea | null {
@@ -285,26 +281,17 @@ export class DragAndDropHandler {
     return binarySearch<HitArea>(this.hitAreas, (area) => {
       if (y < area.top) {
         return 1;
-      } else if (y > area.bottom) {
-        return -1;
-      } else {
-        return 0;
       }
+      return y > area.bottom ? -1 : 0;
     });
   }
 
   private generateHitAreas(currentNode: Node): void {
     const tree = this.getTree();
 
-    if (!tree) {
-      this.hitAreas = [];
-    } else {
-      this.hitAreas = generateHitAreas(
-        tree,
-        currentNode,
-        this.getTreeDimensions().bottom,
-      );
-    }
+    this.hitAreas = tree
+      ? generateHitAreas(tree, currentNode, this.getTreeDimensions().bottom)
+      : [];
   }
 
   private getTreeDimensions(): Dimensions {
@@ -322,47 +309,53 @@ export class DragAndDropHandler {
     };
   }
 
-  /* Move the dragged node to the selected position in the tree. */
+  /*
+  Move the dragged node to the selected position in the tree.
+  */
   private moveItem(positionInfo: PositionInfo): void {
-    if (
+    if (!(
       this.currentItem &&
       this.hoveredArea?.position &&
       this.canMoveToArea(this.hoveredArea, this.currentItem)
-    ) {
-      const movedNode = this.currentItem.node;
-      const targetNode = this.hoveredArea.node;
-      const position = this.hoveredArea.position;
-      const previousParent = movedNode.parent;
+    )) {
+      return;
+    }
 
-      if (position === "inside") {
-        this.hoveredArea.node.is_open = true;
-      }
+    const movedNode = this.currentItem.node;
+    const targetNode = this.hoveredArea.node;
+    const position = this.hoveredArea.position;
+    const previousParent = movedNode.parent;
 
-      const doMove = (): void => {
-        const tree = this.getTree();
+    if (position === "inside") {
+      this.hoveredArea.node.is_open = true;
+    }
 
-        if (tree) {
-          tree.moveNode(movedNode, targetNode, position);
+    const doMove = (): void => {
+      const tree = this.getTree();
 
-          this.treeElement.textContent = "";
-          this.refreshElements(null);
-        }
-      };
-
-      if (
-        this.triggerEvent("tree.move", {
-          moveInfo: {
-            doMove,
-            movedNode,
-            originalEvent: positionInfo.originalEvent,
-            position,
-            previousParent,
-            targetNode,
-          },
-        })
-      ) {
-        doMove();
+      if (!tree) {
+        return;
       }
+
+      tree.moveNode(movedNode, targetNode, position);
+
+      this.treeElement.textContent = "";
+      this.refreshElements(null);
+    };
+
+    if (
+      this.triggerEvent("tree.move", {
+        moveInfo: {
+          doMove,
+          movedNode,
+          originalEvent: positionInfo.originalEvent,
+          position,
+          previousParent,
+          targetNode,
+        },
+      })
+    ) {
+      doMove();
     }
   }
 
@@ -412,10 +405,12 @@ export class DragAndDropHandler {
   }
 
   private stopOpenFolderTimer(): void {
-    if (this.openFolderTimer) {
-      clearTimeout(this.openFolderTimer);
-      this.openFolderTimer = null;
+    if (!this.openFolderTimer) {
+      return;
     }
+
+    clearTimeout(this.openFolderTimer);
+    this.openFolderTimer = null;
   }
 
   private updateDropHint(): void {

package/src/dragAndDropHandler/iterateVisibleNodes.ts

@@ -57,28 +57,30 @@ const iterateVisibleNodes = (
       }
     }
 
-    if (mustIterateInside) {
-      const childrenLength = node.children.length;
-      node.children.forEach((_, i) => {
-        const child = node.children[i];
+    if (!mustIterateInside) {
+      return;
+    }
+
+    const childrenLength = node.children.length;
+    for (const i of node.children.keys()) {
+      const child = node.children[i];
 
-        if (child) {
-          if (i === childrenLength - 1) {
-            iterate(child, null);
-          } else {
-            const nextChild = node.children[i + 1];
+      if (child) {
+        if (i === childrenLength - 1) {
+          iterate(child, null);
+        } else {
+          const nextChild = node.children[i + 1];
 
-            if (nextChild) {
-              iterate(child, nextChild);
-            }
+          if (nextChild) {
+            iterate(child, nextChild);
           }
         }
-      });
-
-      if (node.is_open && element) {
-        handleAfterOpenFolder(node, nextNode);
       }
     }
+
+    if (node.is_open && element) {
+      handleAfterOpenFolder(node, nextNode);
+    }
   };
 
   iterate(tree, null);