vanillatree 0.0.3 → 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,40 @@
+# Changelog
+
+All notable changes to this project are documented here. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and the project uses [Semantic Versioning](https://semver.org/).
+
+## [Unreleased]
+
+## [1.0.0] - 2026-10-20
+
+The library is rewritten in TypeScript, with no dependencies. The script-tag bundle still runs in Internet Explorer 10 and 11.
+
+### Breaking
+
+- A label is written as text. `html: true` on a leaf or a context menu item writes it as HTML; `placeholder` is always text ([#6](https://github.com/finom/vanillatree/pull/6)).
+- Adding a leaf with an id that is already there throws ([#8](https://github.com/finom/vanillatree/issues/8)).
+- `add` no longer fires `vtree-close` for each closed leaf it adds.
+- The files are in `dist/`: `vanillatree.min.js` (UMD: script tag, CommonJS, AMD), `vanillatree.min.mjs` (ES module), `vanillatree.css`, and the types. `vanillatree/vanillatree.css` still resolves through the package's exports. `vanillatree.js` (unminified) is gone.
+- The root list has no padding of its own.
+- Generated ids are `vtree-1`, `vtree-2`, … instead of random numbers.
+
+### Added
+
+- Keyboard and screen reader support (the WAI-ARIA tree view pattern): ARIA roles and states, one leaf in the tab order, arrow keys, Home, End, Enter and Space; the context menu opens with the context menu key or Shift+F10 and works from the keyboard.
+- `selectable: false` for a leaf that can't be selected; a click on its label opens or closes it ([#11](https://github.com/finom/vanillatree/issues/11)).
+- `getPath(id)` and `getParent(id)` ([#10](https://github.com/finom/vanillatree/issues/10)), `hasChildren(id)` ([#11](https://github.com/finom/vanillatree/issues/11)), `getSelected()`.
+- `destroy()` removes the tree and every listener it added, including the `document` listener of the context menu.
+- A dark theme: the `theme` option (`'light'`, `'dark'`, `'auto'`) or a `vtree-dark` class on any ancestor. The colors are CSS variables.
+- An ES module build, TypeScript types for `import` and `require`, and the `VanillaTree` named export.
+
+### Fixed
+
+- A click on HTML inside a label (a `<b>`, an icon) selects the leaf ([#7](https://github.com/finom/vanillatree/issues/7)).
+- `move` and `remove` set `vtree-has-children` right in IE 10 and 11, where `classList.toggle` ignores its second argument.
+- `move` and `remove` of a root leaf no longer change the container's classes.
+- `remove` forgets the ids of the removed leaf's children, so they can be added again.
+- Moving a leaf under itself or its own child throws a clear error instead of a DOM error.
+- An id with a quote or a bracket in it works: leaves are found by id, not by a selector.
+- A tree inside another tree's label no longer has its clicks and keys handled by the outer tree.
+
+[Unreleased]: https://github.com/finom/vanillatree/compare/v1.0.0...HEAD
+[1.0.0]: https://github.com/finom/vanillatree/releases/tag/v1.0.0

package/LICENSE

@@ -1,4 +1,4 @@
- Copyright (c) 2014-2017 Andrey Gubanov <andrey@gubanov.eu>
+ Copyright (c) 2014-2026 Andrey Gubanov <andrey@gubanov.eu>
 
  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,96 +1,185 @@
-vanillatree [![npm version](https://badge.fury.io/js/vanillatree.svg)](https://badge.fury.io/js/vanillatree)
-===========
+# VanillaTree
 
-Standalone tree view library
+[![npm](https://img.shields.io/npm/v/vanillatree.svg)](https://www.npmjs.com/package/vanillatree)
+[![CI](https://github.com/finom/vanillatree/actions/workflows/ci.yml/badge.svg)](https://github.com/finom/vanillatree/actions/workflows/ci.yml)
+[![OpenSSF Scorecard](https://api.scorecard.dev/projects/github.com/finom/vanillatree/badge)](https://scorecard.dev/viewer/?uri=github.com/finom/vanillatree)
+[![OpenSSF Best Practices](https://www.bestpractices.dev/projects/15742/badge)](https://www.bestpractices.dev/projects/15742)
 
-[Live demo](http://jsbin.com/yarikas/1/)
+A tree view with no dependencies: one minified script (3.4 kB gzipped) and a stylesheet. Keyboard and screen reader support, a dark theme, TypeScript types. Runs in every current browser and in Internet Explorer 10 and 11.
 
-![Example Screenshot](http://i.imgur.com/TPlp1ga.png)
+**[Live demo](https://finom.github.io/vanillatree/)**
 
-## Usage
-For CJS env run `npm install --save vanillatree`:
-```js
-const VanillaTree = require('vanillatree');
-```
+![VanillaTree in the light and the dark theme](https://finom.github.io/vanillatree/screenshot.png)
 
-```js
-// treeElement is selector or HTML node, options is optional
-const tree = new VanillaTree(treeElement, options);
+## Install
+
+### npm
+
+```sh
+npm install vanillatree
 ```
-## Options
-- ``placeholder`` (string) -- shows if none of leafs is added (optional)
-- ``contextmenu`` (array) -- contextual menu items (optional)
 
-### Examples
 ```js
-const tree = new VanillaTree('.my-selector', {
-  placeholder: 'No leaf is added yet',
-  contextmenu: [{
-    label: 'Label 1',
-    action(id) {
-      // someAction
-    }
-  },{
-    label: 'Label 2',
-    action(id) {
-      // someAction
-    }
-  }]
-});
+import VanillaTree from 'vanillatree';
+import 'vanillatree/vanillatree.css';
 ```
 
+CommonJS works too: `const VanillaTree = require('vanillatree');`. The types come with the package, for both.
 
-## Methods
-- ``add(options)`` -- Adds a leaf. ``id`` option is optional
-- ``move(id, parentId)`` -- Moves a leaf to another parent
-- ``remove(id)`` -- Removes a leaf with given id
-- ``open(id)`` -- Expands child tree
-- ``close(id)`` -- Closes child tree
-- ``toggle(id)`` -- Expands or closes child tree depending on current state
-- ``select(id) ``-- Selects a leaf with given id
+### Script tag
 
-### Examples
-```js
-tree.add({
-  label: 'Label A',
-  id: 'a',
-  opened: true,
-  selected: true
-});
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillatree@1/dist/vanillatree.css">
+<script src="https://cdn.jsdelivr.net/npm/vanillatree@1/dist/vanillatree.min.js"></script>
+<script>
+  var tree = new VanillaTree('#tree');
+</script>
+```
 
-tree.add({
-  label: 'Label B',
-  id: 'b',
-  parent: 'a'
-});
+The script defines a `VanillaTree` global. It also works with AMD loaders.
+
+### ES module from a CDN
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillatree@1/dist/vanillatree.css">
+<script type="module">
+  import VanillaTree from 'https://cdn.jsdelivr.net/npm/vanillatree@1/dist/vanillatree.min.mjs';
 
-tree.open('a');
+  const tree = new VanillaTree('#tree');
+</script>
 ```
 
-## Events
-`VanillaTree` uses [dispatchEvent](https://developer.mozilla.org/ru/docs/DOM/element.dispatchEvent) for events triggering. Each event is cancelable and bubbles up through the DOM. An id of a target element is placed at ``evt.detail`` object.
+## Browsers
+
+| Build | Browsers |
+| --- | --- |
+| `vanillatree.min.js` (script tag, CommonJS, AMD) | Chrome, Edge, Firefox, Safari, iOS Safari, Chrome for Android, Internet Explorer 10 and 11 |
+| `vanillatree.min.mjs` (ES module) | Browsers that run ES modules: Chrome 61+, Edge 16+, Firefox 60+, Safari 10.1+ |
+
+In IE 10 and 11 the stylesheet uses plain colors, so the CSS variables below have no effect there.
 
-A list of possible events:
-- ``vtree-add``
-- ``vtree-move``
-- ``vtree-remove``
-- ``vtree-open``
-- ``vtree-close``
-- ``vtree-select``
+## Usage
 
-### Examples
 ```js
-treeElement.addEventListener('vtree-open', (evt) => {
-  info.innerHTML = evt.detail.id + ' is opened';
+const tree = new VanillaTree('#tree', {
+  placeholder: 'Nothing here yet',
+  contextmenu: [
+    { label: 'Rename', action(id) { /* … */ } },
+    { label: 'Remove', action(id) { tree.remove(id); } }
+  ]
 });
 
-treeElement.addEventListener('vtree-close', (evt) => {
-  info.innerHTML = evt.detail.id + ' is closed';
-});
+tree.add({ label: 'src', id: 'src', opened: true, selectable: false });
+tree.add({ label: 'index.ts', id: 'index', parent: 'src', selected: true });
+tree.add({ label: 'README.md' });
+```
+
+### Options
+
+- `placeholder` (string): text shown while the tree has no leaves.
+- `contextmenu` (array): a menu that opens on a right click on a label, on the context menu key, or on Shift+F10. Each item is `{ label, action(id), html? }`. `action` gets the leaf's id, and `this` is the item.
+- `theme` (`'light'`, `'dark'` or `'auto'`): `'dark'` adds the `vtree-dark` class to the tree, and `'auto'` follows the system's `prefers-color-scheme`. The default is light. You can also put `vtree-dark` on any ancestor, such as `<html>`.
 
-treeElement.addEventListener('vtree-select', (evt) => {
-  info.innerHTML = evt.detail.id + ' is selected';
+The first argument is a selector, an element, or an array-like of elements (the first one is used).
+
+### Leaf options
+
+`add(options)` takes:
+
+- `label` (string, required): the text of the leaf.
+- `id` (string or number): unique. When omitted, it is generated (`vtree-1`, `vtree-2`, …). An id that is already there throws.
+- `parent` (id): the parent leaf. Without it, the leaf is a root leaf.
+- `opened` (boolean): show the children. Leaves are closed by default.
+- `selected` (boolean): select the leaf once it is added.
+- `selectable` (boolean): `false` for a leaf that can't be selected, like a folder in a file picker. A click on its label opens or closes it.
+- `html` (boolean): write `label` as HTML. Labels are text by default.
+
+### Methods
+
+Each method that changes the tree returns the tree, so calls chain. A method that gets an unknown id throws.
+
+- `add(options)`: adds a leaf.
+- `move(id, parentId)`: moves a leaf under another parent, or to the root without `parentId`. Moving a leaf under itself or its own child throws.
+- `remove(id)`: removes a leaf and its children.
+- `open(id)`, `close(id)`, `toggle(id)`: show or hide the children.
+- `select(id)`: selects a leaf. Does nothing for a leaf added with `selectable: false`.
+- `getSelected()`: the id of the selected leaf, or `null`.
+- `getParent(id)`: the parent's id, or `null` for a root leaf.
+- `getPath(id)`: ids from the root leaf down to this one, as an array.
+- `hasChildren(id)`: whether the leaf has children.
+- `getLeaf(id, notThrow)`: the leaf's `li` element. With `notThrow`, an unknown id gives `undefined`.
+- `getChildList(id)`: the `ul` with the leaf's children, made when missing. Without an id, the root list.
+- `destroy()`: removes the tree from the page and every listener it added, including the one on `document` for the context menu. Call it before you drop a tree that has a context menu, or the listener stays.
+
+Properties: `container` (the element you passed), `tree` (the root `ul.vtree`), `leafs` (the options each leaf was added with, by id).
+
+### Events
+
+Events are dispatched on the leaf, or on the root list for `vtree-remove`, and bubble. The leaf's id is in `evt.detail.id`.
+
+- `vtree-add`
+- `vtree-move`
+- `vtree-remove`
+- `vtree-open`
+- `vtree-close`
+- `vtree-select`
+
+```js
+const container = document.querySelector('#tree');
+container.addEventListener('vtree-select', (evt) => {
+  console.log(`${evt.detail.id} is selected`);
 });
 ```
 
-Image sprite is the part of [JSTree project](http://www.jstree.com/)
+## Keyboard and screen readers
+
+The tree follows the [WAI-ARIA tree view pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/): `role="tree"`, `treeitem` and `group`, with `aria-expanded` and `aria-selected`. One leaf is in the tab order at a time.
+
+| Key | Action |
+| --- | --- |
+| Tab | Into the tree: to the selected leaf, or the first one |
+| ↓ ↑ | Next and previous visible leaf |
+| → | Open a closed leaf; on an open one, go to its first child |
+| ← | Close an open leaf; otherwise go to its parent |
+| Home, End | First and last visible leaf |
+| Enter, Space | Select; open or close a leaf that can't be selected |
+| Shift+F10, context menu key | Open the context menu; arrows, Home, End, Enter, Space and Esc work inside it |
+
+Give the tree an accessible name, for example `tree.tree.setAttribute('aria-label', 'Project files')`.
+
+## Styling
+
+Every color is a CSS variable, set on `.vtree` or any ancestor:
+
+```css
+.vtree {
+  --vtree-hover-background: #e7f4f9;
+  --vtree-hover-outline: #d8f0fa;
+  --vtree-selected-background: #beebff;
+  --vtree-selected-outline: #99defd;
+  --vtree-focus: #0b6bcb;
+  --vtree-menu-background: #eee;
+  --vtree-menu-border: #ccc;
+  --vtree-menu-color: #333;
+  --vtree-menu-active-background: #3399ff;
+  --vtree-menu-active-color: #fff;
+}
+```
+
+A variable set this way applies to both themes; set it inside `.vtree-dark` for the dark one only. The class names (`vtree-leaf`, `vtree-leaf-label`, `vtree-toggle`, `vtree-selected`, `closed`, `vtree-has-children`, `vtree-contextmenu`) are stable.
+
+## Upgrading from 0.0.x
+
+1.0.0 changes:
+
+- A label is text. Pass `html: true` for a label written as HTML. The same goes for `placeholder` (always text) and context menu items.
+- Adding a leaf with an id that is already there throws.
+- `add` no longer fires `vtree-close` for each closed leaf it adds.
+- The files moved to `dist/`: `vanillatree/vanillatree.css` still resolves through the package's exports; on a CDN use `dist/vanillatree.min.js` and `dist/vanillatree.css`.
+- The root list has no padding of its own now.
+
+The [CHANGELOG](./CHANGELOG.md) has the full list.
+
+## License
+
+MIT. The image sprite comes from the [jsTree](https://www.jstree.com/) project.

package/dist/vanillatree.css

@@ -0,0 +1,199 @@
+/*! VanillaTree | MIT | https://github.com/finom/vanillatree
+ * The colors are CSS variables, each with a plain value before it for browsers without them (IE 10 and 11).
+ * The dark theme applies inside `.vtree-dark` (the `theme` option sets it on the tree, or put it on any ancestor). */
+
+.vtree ul.vtree-subtree,
+.vtree li.vtree-leaf {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  position: relative;
+}
+
+.vtree {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.vtree li.vtree-leaf {
+  background-position: -90px 0;
+  background-repeat: repeat-y;
+  min-height: 18px;
+  line-height: 18px;
+}
+
+.vtree li.vtree-leaf::before {
+  content: "";
+  width: 18px;
+  height: 18px;
+  position: absolute;
+  background-position: -36px 0;
+}
+
+.vtree li.vtree-leaf li.vtree-leaf {
+  margin-left: 18px;
+}
+
+.vtree li.vtree-leaf:last-child {
+  background-image: none;
+}
+
+.vtree li.vtree-leaf.closed ul.vtree-subtree {
+  display: none;
+}
+
+.vtree li.vtree-leaf.vtree-has-children > span.vtree-toggle {
+  display: block;
+  width: 18px;
+  height: 18px;
+  background-position: -72px 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.vtree li.vtree-leaf.vtree-has-children.closed > span.vtree-toggle {
+  background-position: -54px 0;
+}
+
+.vtree a.vtree-leaf-label {
+  line-height: 18px;
+  display: inline-block;
+  vertical-align: top;
+  cursor: pointer;
+  max-width: 100%;
+  margin-left: 18px;
+  padding: 0 2px;
+}
+
+.vtree li.vtree-leaf a.vtree-leaf-label:hover {
+  background-color: #e7f4f9;
+  background-color: var(--vtree-hover-background, #e7f4f9);
+  outline: 1px solid #d8f0fa;
+  outline: 1px solid var(--vtree-hover-outline, #d8f0fa);
+}
+
+.vtree li.vtree-leaf.vtree-selected > a.vtree-leaf-label {
+  background-color: #beebff;
+  background-color: var(--vtree-selected-background, #beebff);
+  outline: 1px solid #99defd;
+  outline: 1px solid var(--vtree-selected-outline, #99defd);
+}
+
+/* keyboard focus: the ring goes on the label, not around the leaf and its children */
+.vtree li.vtree-leaf:focus {
+  outline: none;
+}
+
+.vtree li.vtree-leaf:focus > a.vtree-leaf-label {
+  outline: 2px solid #0b6bcb;
+  outline: 2px solid var(--vtree-focus, #0b6bcb);
+  outline-offset: 1px;
+}
+
+/* no ring after a click, where the browser can tell */
+.vtree li.vtree-leaf:focus:not(:focus-visible) > a.vtree-leaf-label {
+  outline: none;
+}
+
+.vtree li.vtree-leaf.vtree-selected:focus:not(:focus-visible) > a.vtree-leaf-label {
+  outline: 1px solid #99defd;
+  outline: 1px solid var(--vtree-selected-outline, #99defd);
+}
+
+.vtree-contextmenu {
+  position: absolute;
+  z-index: 9999999;
+  border: solid 1px #ccc;
+  border: solid 1px var(--vtree-menu-border, #ccc);
+  background: #eee;
+  background: var(--vtree-menu-background, #eee);
+  padding: 0;
+  margin: 0;
+  display: none;
+}
+
+.vtree-contextmenu li {
+  list-style: none;
+  padding: 1px 5px;
+  margin: 0;
+  color: #333;
+  color: var(--vtree-menu-color, #333);
+  line-height: 20px;
+  height: 20px;
+  cursor: default;
+  white-space: nowrap;
+}
+
+.vtree-contextmenu li:hover,
+.vtree-contextmenu li:focus {
+  outline: none;
+  color: #fff;
+  color: var(--vtree-menu-active-color, #fff);
+  background-color: #3399ff;
+  background-color: var(--vtree-menu-active-background, #3399ff);
+}
+
+.vtree li.vtree-leaf,
+.vtree li.vtree-leaf::before,
+.vtree li.vtree-leaf.vtree-has-children > span.vtree-toggle {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGwAAAASCAYAAAC+Tjt8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAA30lEQVRYw+2YQQqDMBBFvUdxGe+U+3gFs3WTkJsJ5goKv1QodFHTiqNm8C8+2Y0+Zl7QqQBUjJ6oe+G6fuDOdTi1NIyG0TDmd8NCCDjigU3T4MqJfnNJm3EWVxYsxgjpZhljcOWEaufKgqWU0Pc9pKCstSjBMM1cWbBpmha4rusgASUBJmGYZq4s2DzPS4ZhQNu22AslOYlr5z8N+8a1tc4a19Y6hxjmnMOeu/11fqYUwzRyZcHGcRS760tJqVy7DfPei39NlRDtXKf/h5VgmOYNDrcH3CUyNIxhw7Qa9gQbuFdIMXobzAAAAABJRU5ErkJggg==);
+}
+
+/* the dark theme */
+
+.vtree-dark li.vtree-leaf,
+.vtree-dark li.vtree-leaf::before,
+.vtree-dark li.vtree-leaf.vtree-has-children > span.vtree-toggle {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGwAAAASCAYAAAC+Tjt8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAzElEQVRYw+2YQQrDIBBFA8kVIngz0Y1bvYL38U5xGXqPKR0odJNC6ohi/wNxN/Bw/qAuCwAtOc8HoQ4ASBgSBr5hrW1y4sdxUM9OfHtJJ6O3F4sZY0j6sEop1LsRZ/RisX3fyXtPUlI5ZxohYTN6sdi2bSwXYyQJKQkxiUac0YvF1nXlpbWmlBLVSkl24tX+q9fdOlded+s0SVgIgWpm+2v/XKMkbCYvFlNKic36kW6/I3pVJ8w5J36bGoFZvZq9w+CFnw4AkDAA/jNhTwd6SF35vQQ/AAAAAElFTkSuQmCC);
+}
+
+.vtree-dark li.vtree-leaf:last-child {
+  background-image: none;
+}
+
+.vtree-dark li.vtree-leaf a.vtree-leaf-label:hover {
+  background-color: #1d3a47;
+  background-color: var(--vtree-hover-background, #1d3a47);
+  outline: 1px solid #2b5466;
+  outline: 1px solid var(--vtree-hover-outline, #2b5466);
+}
+
+.vtree-dark li.vtree-leaf.vtree-selected > a.vtree-leaf-label {
+  background-color: #0f4c69;
+  background-color: var(--vtree-selected-background, #0f4c69);
+  outline: 1px solid #1f6f94;
+  outline: 1px solid var(--vtree-selected-outline, #1f6f94);
+}
+
+.vtree-dark li.vtree-leaf:focus > a.vtree-leaf-label {
+  outline: 2px solid #6cb6ff;
+  outline: 2px solid var(--vtree-focus, #6cb6ff);
+}
+
+/* a separate rule: a browser without :focus-visible drops the whole selector list */
+.vtree-dark li.vtree-leaf.vtree-selected:focus:not(:focus-visible) > a.vtree-leaf-label {
+  outline: 1px solid #1f6f94;
+  outline: 1px solid var(--vtree-selected-outline, #1f6f94);
+}
+
+.vtree-dark .vtree-contextmenu {
+  border-color: #444;
+  border-color: var(--vtree-menu-border, #444);
+  background: #2a2a2a;
+  background: var(--vtree-menu-background, #2a2a2a);
+}
+
+.vtree-dark .vtree-contextmenu li {
+  color: #ddd;
+  color: var(--vtree-menu-color, #ddd);
+}
+
+.vtree-dark .vtree-contextmenu li:hover,
+.vtree-dark .vtree-contextmenu li:focus {
+  color: #fff;
+  color: var(--vtree-menu-active-color, #fff);
+  background-color: #1f6fbf;
+  background-color: var(--vtree-menu-active-background, #1f6fbf);
+}

package/dist/vanillatree.d.cts

@@ -0,0 +1,118 @@
+interface ContextMenuItem {
+    /** Text of the menu item. */
+    label: string;
+    /** Write `label` as HTML instead of text. Only for HTML you trust. */
+    html?: boolean;
+    /** Called with the id of the leaf the menu was opened on; `this` is the item. */
+    action(this: ContextMenuItem, id: string): void;
+}
+interface VanillaTreeOptions {
+    /** Text shown while the tree has no leaves. */
+    placeholder?: string;
+    /** Items of the menu that opens on a right click, the context menu key or Shift+F10 on a leaf. */
+    contextmenu?: ContextMenuItem[];
+    /** `'dark'` adds the `vtree-dark` class to the tree; `'auto'` follows `prefers-color-scheme`. */
+    theme?: 'light' | 'dark' | 'auto';
+}
+interface LeafOptions {
+    /** Text of the leaf. */
+    label: string;
+    /** Unique id; generated (`vtree-1`, `vtree-2`, …) when omitted. */
+    id?: string | number;
+    /** Id of the parent leaf; a root leaf when omitted. */
+    parent?: string | number;
+    /** Write `label` as HTML instead of text. Only for HTML you trust. */
+    html?: boolean;
+    /** Show the children; closed by default. */
+    opened?: boolean;
+    /** Select the leaf once it is added. */
+    selected?: boolean;
+    /** `false`: the leaf can't be selected; a click on its label opens or closes it instead. */
+    selectable?: boolean;
+}
+interface VanillaTreeEventDetail {
+    id: string;
+}
+type Key = string | number;
+type Root = string | Element | ArrayLike<Element>;
+declare class VanillaTree {
+    /** The element the tree is rendered into. */
+    container: Element;
+    /** The tree's root list, `ul.vtree`. */
+    tree: HTMLElement;
+    placeholder?: string;
+    /** The options each leaf was added with, by id. */
+    leafs: Record<string, LeafOptions>;
+    _options: VanillaTreeOptions;
+    _nodes: Record<string, HTMLElement>;
+    _prefix: string;
+    _count: number;
+    _selected: string | null;
+    _tabbable: string | null;
+    _menu: HTMLElement | null;
+    _onClick: (evt: MouseEvent) => void;
+    _onKeyDown: (evt: KeyboardEvent) => void;
+    _onFocus: (evt: FocusEvent) => void;
+    _onContextMenu: (evt: MouseEvent) => void;
+    _onDocumentClick: (evt: MouseEvent) => void;
+    _onScheme: () => void;
+    _scheme: MediaQueryList | null;
+    constructor(container: Root, options?: VanillaTreeOptions);
+    /** The leaf's `li` element; throws for an unknown id unless `notThrow` is set. */
+    getLeaf(id: Key, notThrow: true): HTMLElement | undefined;
+    getLeaf(id: Key, notThrow?: boolean): HTMLElement;
+    /** The `ul` holding the leaf's children (created when missing), or the root list without an id. */
+    getChildList(id?: Key | null): HTMLElement;
+    /** The id of the leaf's parent, `null` for a root leaf. */
+    getParent(id: Key): string | null;
+    /** Ids from the root leaf down to the leaf itself. */
+    getPath(id: Key): string[];
+    /** The id of the selected leaf, `null` when none is. */
+    getSelected(): string | null;
+    /** Whether the leaf has children. */
+    hasChildren(id: Key): boolean;
+    add(options: LeafOptions): this;
+    /** Moves the leaf under another parent, or to the root without `parentId`. */
+    move(id: Key, parentId?: Key | null): this;
+    /** Removes the leaf and its children. */
+    remove(id: Key): this;
+    /** Shows the leaf's children. */
+    open(id: Key): this;
+    /** Hides the leaf's children. */
+    close(id: Key): this;
+    /** Opens a closed leaf, closes an open one. */
+    toggle(id: Key): this;
+    /** Selects the leaf; does nothing for a leaf added with `selectable: false`. */
+    select(id: Key): this;
+    /** Removes the tree from the page and every listener it added; the instance can't be used after it. */
+    destroy(): void;
+    _id(leaf: Element): string;
+    _newId(): string;
+    _subtree(leaf: Element): HTMLElement | undefined;
+    _sync(leaf: HTMLElement): void;
+    _syncList(list: HTMLElement): void;
+    _placeholder(): this;
+    _visible(leaf: HTMLElement): HTMLElement;
+    _visibleLeaves(): HTMLElement[];
+    _setTabbable(id: string): void;
+    _fixTabbable(): void;
+    _focus(leaf: HTMLElement): void;
+    _leafOf(target: EventTarget | null, className?: string): HTMLElement | undefined;
+    _click(evt: MouseEvent): void;
+    _focusIn(evt: FocusEvent): void;
+    _keyDown(evt: KeyboardEvent): void;
+    _contextMenu(evt: MouseEvent): void;
+    _openMenu(leaf: HTMLElement): void;
+    _closeMenu(): void;
+}
+type _ContextMenuItem = ContextMenuItem;
+type _VanillaTreeOptions = VanillaTreeOptions;
+type _LeafOptions = LeafOptions;
+type _VanillaTreeEventDetail = VanillaTreeEventDetail;
+declare namespace VanillaTree {
+  export type ContextMenuItem = _ContextMenuItem;
+  export type VanillaTreeOptions = _VanillaTreeOptions;
+  export type LeafOptions = _LeafOptions;
+  export type VanillaTreeEventDetail = _VanillaTreeEventDetail;
+}
+export = VanillaTree;

package/dist/vanillatree.d.mts

@@ -0,0 +1,108 @@
+export interface ContextMenuItem {
+    /** Text of the menu item. */
+    label: string;
+    /** Write `label` as HTML instead of text. Only for HTML you trust. */
+    html?: boolean;
+    /** Called with the id of the leaf the menu was opened on; `this` is the item. */
+    action(this: ContextMenuItem, id: string): void;
+}
+export interface VanillaTreeOptions {
+    /** Text shown while the tree has no leaves. */
+    placeholder?: string;
+    /** Items of the menu that opens on a right click, the context menu key or Shift+F10 on a leaf. */
+    contextmenu?: ContextMenuItem[];
+    /** `'dark'` adds the `vtree-dark` class to the tree; `'auto'` follows `prefers-color-scheme`. */
+    theme?: 'light' | 'dark' | 'auto';
+}
+export interface LeafOptions {
+    /** Text of the leaf. */
+    label: string;
+    /** Unique id; generated (`vtree-1`, `vtree-2`, …) when omitted. */
+    id?: string | number;
+    /** Id of the parent leaf; a root leaf when omitted. */
+    parent?: string | number;
+    /** Write `label` as HTML instead of text. Only for HTML you trust. */
+    html?: boolean;
+    /** Show the children; closed by default. */
+    opened?: boolean;
+    /** Select the leaf once it is added. */
+    selected?: boolean;
+    /** `false`: the leaf can't be selected; a click on its label opens or closes it instead. */
+    selectable?: boolean;
+}
+export interface VanillaTreeEventDetail {
+    id: string;
+}
+type Key = string | number;
+type Root = string | Element | ArrayLike<Element>;
+export default class VanillaTree {
+    /** The element the tree is rendered into. */
+    container: Element;
+    /** The tree's root list, `ul.vtree`. */
+    tree: HTMLElement;
+    placeholder?: string;
+    /** The options each leaf was added with, by id. */
+    leafs: Record<string, LeafOptions>;
+    _options: VanillaTreeOptions;
+    _nodes: Record<string, HTMLElement>;
+    _prefix: string;
+    _count: number;
+    _selected: string | null;
+    _tabbable: string | null;
+    _menu: HTMLElement | null;
+    _onClick: (evt: MouseEvent) => void;
+    _onKeyDown: (evt: KeyboardEvent) => void;
+    _onFocus: (evt: FocusEvent) => void;
+    _onContextMenu: (evt: MouseEvent) => void;
+    _onDocumentClick: (evt: MouseEvent) => void;
+    _onScheme: () => void;
+    _scheme: MediaQueryList | null;
+    constructor(container: Root, options?: VanillaTreeOptions);
+    /** The leaf's `li` element; throws for an unknown id unless `notThrow` is set. */
+    getLeaf(id: Key, notThrow: true): HTMLElement | undefined;
+    getLeaf(id: Key, notThrow?: boolean): HTMLElement;
+    /** The `ul` holding the leaf's children (created when missing), or the root list without an id. */
+    getChildList(id?: Key | null): HTMLElement;
+    /** The id of the leaf's parent, `null` for a root leaf. */
+    getParent(id: Key): string | null;
+    /** Ids from the root leaf down to the leaf itself. */
+    getPath(id: Key): string[];
+    /** The id of the selected leaf, `null` when none is. */
+    getSelected(): string | null;
+    /** Whether the leaf has children. */
+    hasChildren(id: Key): boolean;
+    add(options: LeafOptions): this;
+    /** Moves the leaf under another parent, or to the root without `parentId`. */
+    move(id: Key, parentId?: Key | null): this;
+    /** Removes the leaf and its children. */
+    remove(id: Key): this;
+    /** Shows the leaf's children. */
+    open(id: Key): this;
+    /** Hides the leaf's children. */
+    close(id: Key): this;
+    /** Opens a closed leaf, closes an open one. */
+    toggle(id: Key): this;
+    /** Selects the leaf; does nothing for a leaf added with `selectable: false`. */
+    select(id: Key): this;
+    /** Removes the tree from the page and every listener it added; the instance can't be used after it. */
+    destroy(): void;
+    _id(leaf: Element): string;
+    _newId(): string;
+    _subtree(leaf: Element): HTMLElement | undefined;
+    _sync(leaf: HTMLElement): void;
+    _syncList(list: HTMLElement): void;
+    _placeholder(): this;
+    _visible(leaf: HTMLElement): HTMLElement;
+    _visibleLeaves(): HTMLElement[];
+    _setTabbable(id: string): void;
+    _fixTabbable(): void;
+    _focus(leaf: HTMLElement): void;
+    _leafOf(target: EventTarget | null, className?: string): HTMLElement | undefined;
+    _click(evt: MouseEvent): void;
+    _focusIn(evt: FocusEvent): void;
+    _keyDown(evt: KeyboardEvent): void;
+    _contextMenu(evt: MouseEvent): void;
+    _openMenu(leaf: HTMLElement): void;
+    _closeMenu(): void;
+}
+export { VanillaTree };

package/dist/vanillatree.min.js

@@ -0,0 +1,2 @@
+/*! VanillaTree v1.0.0 | MIT | https://github.com/finom/vanillatree */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).VanillaTree=t()}(this,function(){"use strict";var e=function(e,t){var i=[];e&&(i=e.dispatchEvent?[e]:"string"==typeof e?(t||document).querySelectorAll(e):e);for(var n=[],s=0;s<i.length;s++)n.push(i[s]);return n},t={Down:"ArrowDown",Up:"ArrowUp",Left:"ArrowLeft",Right:"ArrowRight",Spacebar:" ",Esc:"Escape",Apps:"ContextMenu"},i=function(e){return Object.prototype.hasOwnProperty.call(t,e.key)?t[e.key]:e.key},n=0,s=function(e,t,i){var n=document.createElement(e);for(var s in n.className=t,i)n.setAttribute(s,i[s]);return n},r=function(e,t,i){i?e.innerHTML=t:e.textContent=t},l=function(e,t){return e.classList.contains(t)},o=function(e,t,i){i?e.classList.add(t):e.classList.remove(t)},a=function(e,t,i){var n,s="vtree-"+t,r={id:i};"function"==typeof CustomEvent?n=new CustomEvent(s,{bubbles:!0,cancelable:!0,detail:r}):(n=document.createEvent("CustomEvent")).initCustomEvent(s,!0,!0,r),e.dispatchEvent(n)};return function(){function VanillaTree(t,i){var r=this,l=e(t)[0];if(!l)throw Error("VanillaTree: no element for "+String(t));this.container=l,this._options=i||{},this.placeholder=this._options.placeholder,this.leafs=Object.create(null),this._nodes=Object.create(null),this._prefix="vtree-"+ ++n+"-",this._count=0,this._selected=null,this._tabbable=null,this._menu=null,this._scheme=null;var a=s("ul","vtree",{role:"tree"});this.tree=a,this._onClick=function(e){return r._click(e)},this._onKeyDown=function(e){return r._keyDown(e)},this._onFocus=function(e){return r._focusIn(e)},this._onContextMenu=function(e){return r._contextMenu(e)},this._onDocumentClick=function(e){2!==e.button&&r._closeMenu()},this._onScheme=function(){var e;return o(a,"vtree-dark",!(null==(e=r._scheme)||!e.matches))},a.addEventListener("click",this._onClick),a.addEventListener("keydown",this._onKeyDown),a.addEventListener("focus",this._onFocus,!0),this._options.contextmenu&&(a.addEventListener("contextmenu",this._onContextMenu),document.addEventListener("click",this._onDocumentClick));var h=this._options.theme;"dark"===h?a.classList.add("vtree-dark"):"auto"===h&&"function"==typeof matchMedia&&(this._scheme=matchMedia("(prefers-color-scheme: dark)"),this._scheme.addListener(this._onScheme),this._onScheme()),l.appendChild(a),this._placeholder()}var t,h=VanillaTree.prototype;return h.getLeaf=function(e,t){var i=this._nodes[e];if(!i&&!t)throw Error('No VanillaTree leaf with id "'+e+'"');return i},h.getChildList=function(e){if(null==e)return this.tree;var t=this.getLeaf(e),i=this._subtree(t);return i||(i=t.appendChild(s("ul","vtree-subtree",{role:"group"}))),i},h.getParent=function(e){var t=this.getLeaf(e).parentNode;return t===this.tree?null:this._id(t.parentNode)},h.getPath=function(e){for(var t=[],i=this._id(this.getLeaf(e));null!==i;i=this.getParent(i))t.unshift(i);return t},h.getSelected=function(){return this._selected},h.hasChildren=function(e){var t=this._subtree(this.getLeaf(e));return!!t&&t.children.length>0},h.add=function(e){var t=null==e.id||""===e.id?this._newId():String(e.id);if(this._nodes[t])throw Error('VanillaTree leaf with id "'+t+'" already exists');var i=this.getChildList(e.parent),n=this._prefix+ ++this._count,l=s("li","vtree-leaf",{"data-vtree-id":t,role:"treeitem",tabindex:"-1","aria-labelledby":n});return l.appendChild(s("span","vtree-toggle",{"aria-hidden":"true"})),r(l.appendChild(s("a","vtree-leaf-label",{id:n})),e.label,e.html),!1!==e.selectable&&l.setAttribute("aria-selected","false"),e.opened||l.classList.add("closed"),i.appendChild(l),this._nodes[t]=l,this.leafs[t]=e,i!==this.tree&&this._sync(i.parentNode),e.selected&&this.select(t),this._placeholder()._fixTabbable(),a(l,"add",t),this},h.move=function(e,t){var i=this.getLeaf(e),n=this._id(i);if(null!=t)for(var s=this._id(this.getLeaf(t));null!==s;s=this.getParent(s))if(s===n)throw Error("VanillaTree can't move leaf \""+n+'" into itself');var r=i.parentNode;return this.getChildList(t).appendChild(i),this.leafs[n].parent=null==t?void 0:String(t),this._syncList(r),this._syncList(i.parentNode),this._placeholder()._fixTabbable(),a(i,"move",n),this},h.remove=function(t){var i=this.getLeaf(t),n=this._id(i),s=i.parentNode;this._menu&&i.contains(this._menu)&&this._closeMenu();for(var r=[i].concat(e(i.querySelectorAll("li.vtree-leaf"))),l=0;l<r.length;l++){var o=r[l],h=this._id(o);delete this._nodes[h],delete this.leafs[h],this._selected===h&&(this._selected=null),this._tabbable===h&&(this._tabbable=null)}var c=i.contains(document.activeElement);return s.removeChild(i),this._syncList(s),this._placeholder()._fixTabbable(),c&&null!==this._tabbable&&this._nodes[this._tabbable].focus(),a(this.tree,"remove",n),this},h.open=function(e){var t=this.getLeaf(e);return t.classList.remove("closed"),this._sync(t),a(t,"open",this._id(t)),this},h.close=function(e){var t=this.getLeaf(e);t.classList.add("closed"),this._sync(t);var i=document.activeElement;return i!==t&&t.contains(i)&&t.focus(),this._fixTabbable(),a(t,"close",this._id(t)),this},h.toggle=function(e){return l(this.getLeaf(e),"closed")?this.open(e):this.close(e)},h.select=function(e){var t=this.getLeaf(e),i=this._id(t);if(!1===this.leafs[i].selectable||this._selected===i)return this;if(null!==this._selected){var n=this._nodes[this._selected];n.classList.remove("vtree-selected"),n.setAttribute("aria-selected","false")}return t.classList.add("vtree-selected"),t.setAttribute("aria-selected","true"),this._selected=i,this._setTabbable(i),this._fixTabbable(),a(t,"select",i),this},h.destroy=function(){var e=this.tree;this._closeMenu(),e.removeEventListener("click",this._onClick),e.removeEventListener("keydown",this._onKeyDown),e.removeEventListener("focus",this._onFocus,!0),e.removeEventListener("contextmenu",this._onContextMenu),document.removeEventListener("click",this._onDocumentClick),this._scheme&&this._scheme.removeListener(this._onScheme),this._scheme=null,e.parentNode&&e.parentNode.removeChild(e),this.leafs=Object.create(null),this._nodes=Object.create(null),this._selected=null,this._tabbable=null},h._id=function(e){return e.getAttribute("data-vtree-id")},h._newId=function(){var e;do{e="vtree-"+ ++this._count}while(this._nodes[e]);return e},h._subtree=function(e){for(var t=e.children,i=0;i<t.length;i++)if(l(t[i],"vtree-subtree"))return t[i]},h._sync=function(e){var t=this._id(e),i=this.hasChildren(t);o(e,"vtree-has-children",i),i?e.setAttribute("aria-expanded",String(!l(e,"closed"))):e.removeAttribute("aria-expanded")},h._syncList=function(e){e!==this.tree&&this._sync(e.parentNode)},h._placeholder=function(){var t=this.tree,i=e(".vtree-placeholder",t)[0],n=!e("li.vtree-leaf",t).length;return n&&this.placeholder&&!i?r(t.appendChild(s("li","vtree-placeholder",{role:"none"})),this.placeholder):!n&&i&&t.removeChild(i),this},h._visible=function(e){for(var t=e,i=e.parentNode;i!==this.tree;i=i.parentNode)l(i,"vtree-leaf")&&l(i,"closed")&&(t=i);return t},h._visibleLeaves=function(){var e=this,t=[],i=function(n){for(var s=n.children,r=0;r<s.length;r++){var o=s[r];t.push(o);var a=e._subtree(o);a&&!l(o,"closed")&&i(a)}};return i(this.tree),t},h._setTabbable=function(e){this._tabbable!==e&&(null!==this._tabbable&&this._nodes[this._tabbable].setAttribute("tabindex","-1"),this._tabbable=e,this._nodes[e].setAttribute("tabindex","0"))},h._fixTabbable=function(){var t,i=null!=(t=this._tabbable)?t:this._selected;if(null!==i)this._setTabbable(this._id(this._visible(this._nodes[i])));else{var n=e("li.vtree-leaf",this.tree)[0];n&&this._setTabbable(this._id(n))}},h._focus=function(e){this._setTabbable(this._id(e)),e.focus()},h._leafOf=function(e,t){for(var i=!t,n=e;n&&n!==this.tree;n=n.parentNode){if(l(n,"vtree-contextmenu"))return;if(t&&l(n,t)&&(i=!0),l(n,"vtree-leaf"))return i&&this._nodes[this._id(n)]===n?n:void 0}},h._click=function(e){var t=this._leafOf(e.target,"vtree-toggle");if(t)this.toggle(this._id(t));else{var i=this._leafOf(e.target,"vtree-leaf-label");if(i){var n=this._id(i);!1===this.leafs[n].selectable?this.hasChildren(n)&&this.toggle(n):this.select(n)}}},h._focusIn=function(e){var t=this._leafOf(e.target);t&&t===e.target&&this._setTabbable(this._id(t))},h._keyDown=function(e){var t=e.target;if(l(t,"vtree-leaf")&&this._leafOf(t)===t){var n=i(e),s=this._id(t),r=this.hasChildren(s),o=r&&!l(t,"closed"),a=this._visibleLeaves(),h=a.indexOf(t);if("ArrowDown"===n)h<a.length-1&&this._focus(a[h+1]);else if("ArrowUp"===n)h>0&&this._focus(a[h-1]);else if("Home"===n)this._focus(a[0]);else if("End"===n)this._focus(a[a.length-1]);else if("ArrowRight"===n)o?this._focus(a[h+1]):r&&this.open(s);else if("ArrowLeft"===n){var c=this.getParent(s);o?this.close(s):null!==c&&this._focus(this._nodes[c])}else if("Enter"===n||" "===n)!1!==this.leafs[s].selectable?this.select(s):r&&this.toggle(s);else{if(!("ContextMenu"===n||"F10"===n&&e.shiftKey))return;if(!this._options.contextmenu)return;this._openMenu(t)}e.preventDefault()}},h._contextMenu=function(e){var t=this._leafOf(e.target,"vtree-leaf-label");t&&(e.preventDefault(),e.stopPropagation(),this._openMenu(t))},h._openMenu=function(t){for(var n=this,l=0,o=e(".vtree-contextmenu");l<o.length;l++){var a=o[l];a.parentNode.removeChild(a)}var h=this._id(t),c=e(".vtree-leaf-label",t)[0],u=s("menu","vtree-contextmenu",{role:"menu"});this._menu=u,u.style.top=c.offsetTop+c.getBoundingClientRect().height+"px",u.style.left=c.offsetLeft+"px",u.style.display="block";var d=this._options.contextmenu.map(function(e){var i=u.appendChild(s("li","vtree-contextmenu-item",{role:"menuitem",tabindex:"-1"}));return r(i,e.label,e.html),i.addEventListener("click",function(){n._closeMenu(),t.focus(),e.action.call(e,h)}),i});u.addEventListener("keydown",function(e){var s=i(e),r=d.indexOf(e.target);if("ArrowDown"===s)d[(r+1)%d.length].focus();else if("ArrowUp"===s)d[(r+d.length-1)%d.length].focus();else if("Home"===s)d[0].focus();else if("End"===s)d[d.length-1].focus();else if("Enter"===s||" "===s)d[r].click();else{if("Escape"!==s&&"Tab"!==s)return;n._closeMenu(),t.focus()}e.preventDefault(),e.stopPropagation()}),t.appendChild(u),d.length&&d[0].focus()},h._closeMenu=function(){var e=this._menu;null!=e&&e.parentNode&&e.parentNode.removeChild(e),this._menu=null},t=VanillaTree,Object.defineProperty(t,"prototype",{writable:!1}),t}()});

package/dist/vanillatree.min.mjs

@@ -0,0 +1,2 @@
+/*! VanillaTree v1.0.0 | MIT | https://github.com/finom/vanillatree */
+const e=(e,t)=>{let s=[];e&&(s=e.dispatchEvent?[e]:"string"==typeof e?(t||document).querySelectorAll(e):e);const i=[];for(let e=0;e<s.length;e++)i.push(s[e]);return i},t={Down:"ArrowDown",Up:"ArrowUp",Left:"ArrowLeft",Right:"ArrowRight",Spacebar:" ",Esc:"Escape",Apps:"ContextMenu"},s=e=>Object.prototype.hasOwnProperty.call(t,e.key)?t[e.key]:e.key;let i=0;const n=(e,t,s)=>{const i=document.createElement(e);i.className=t;for(const e in s)i.setAttribute(e,s[e]);return i},l=(e,t,s)=>{s?e.innerHTML=t:e.textContent=t},o=(e,t)=>e.classList.contains(t),r=(e,t,s)=>{s?e.classList.add(t):e.classList.remove(t)},h=(e,t,s)=>{const i=`vtree-${t}`,n={id:s};let l;"function"==typeof CustomEvent?l=new CustomEvent(i,{bubbles:!0,cancelable:!0,detail:n}):(l=document.createEvent("CustomEvent"),l.initCustomEvent(i,!0,!0,n)),e.dispatchEvent(l)};class VanillaTree{constructor(t,s){const l=e(t)[0];if(!l)throw Error(`VanillaTree: no element for ${String(t)}`);this.container=l,this._options=s||{},this.placeholder=this._options.placeholder,this.leafs=Object.create(null),this._nodes=Object.create(null),this._prefix=`vtree-${++i}-`,this._count=0,this._selected=null,this._tabbable=null,this._menu=null,this._scheme=null;const o=n("ul","vtree",{role:"tree"});this.tree=o,this._onClick=e=>this._click(e),this._onKeyDown=e=>this._keyDown(e),this._onFocus=e=>this._focusIn(e),this._onContextMenu=e=>this._contextMenu(e),this._onDocumentClick=e=>{2!==e.button&&this._closeMenu()},this._onScheme=()=>r(o,"vtree-dark",!!this._scheme?.matches),o.addEventListener("click",this._onClick),o.addEventListener("keydown",this._onKeyDown),o.addEventListener("focus",this._onFocus,!0),this._options.contextmenu&&(o.addEventListener("contextmenu",this._onContextMenu),document.addEventListener("click",this._onDocumentClick));const{theme:h}=this._options;"dark"===h?o.classList.add("vtree-dark"):"auto"===h&&"function"==typeof matchMedia&&(this._scheme=matchMedia("(prefers-color-scheme: dark)"),this._scheme.addListener(this._onScheme),this._onScheme()),l.appendChild(o),this._placeholder()}getLeaf(e,t){const s=this._nodes[e];if(!s&&!t)throw Error(`No VanillaTree leaf with id "${e}"`);return s}getChildList(e){if(null==e)return this.tree;const t=this.getLeaf(e);let s=this._subtree(t);return s||(s=t.appendChild(n("ul","vtree-subtree",{role:"group"}))),s}getParent(e){const t=this.getLeaf(e).parentNode;return t===this.tree?null:this._id(t.parentNode)}getPath(e){const t=[];for(let s=this._id(this.getLeaf(e));null!==s;s=this.getParent(s))t.unshift(s);return t}getSelected(){return this._selected}hasChildren(e){const t=this._subtree(this.getLeaf(e));return!!t&&t.children.length>0}add(e){const t=null==e.id||""===e.id?this._newId():String(e.id);if(this._nodes[t])throw Error(`VanillaTree leaf with id "${t}" already exists`);const s=this.getChildList(e.parent),i=this._prefix+ ++this._count,o=n("li","vtree-leaf",{"data-vtree-id":t,role:"treeitem",tabindex:"-1","aria-labelledby":i});return o.appendChild(n("span","vtree-toggle",{"aria-hidden":"true"})),l(o.appendChild(n("a","vtree-leaf-label",{id:i})),e.label,e.html),!1!==e.selectable&&o.setAttribute("aria-selected","false"),e.opened||o.classList.add("closed"),s.appendChild(o),this._nodes[t]=o,this.leafs[t]=e,s!==this.tree&&this._sync(s.parentNode),e.selected&&this.select(t),this._placeholder()._fixTabbable(),h(o,"add",t),this}move(e,t){const s=this.getLeaf(e),i=this._id(s);if(null!=t)for(let e=this._id(this.getLeaf(t));null!==e;e=this.getParent(e))if(e===i)throw Error(`VanillaTree can't move leaf "${i}" into itself`);const n=s.parentNode;return this.getChildList(t).appendChild(s),this.leafs[i].parent=null==t?void 0:String(t),this._syncList(n),this._syncList(s.parentNode),this._placeholder()._fixTabbable(),h(s,"move",i),this}remove(t){const s=this.getLeaf(t),i=this._id(s),n=s.parentNode;this._menu&&s.contains(this._menu)&&this._closeMenu();const l=[s,...e(s.querySelectorAll("li.vtree-leaf"))];for(const e of l){const t=this._id(e);delete this._nodes[t],delete this.leafs[t],this._selected===t&&(this._selected=null),this._tabbable===t&&(this._tabbable=null)}const o=s.contains(document.activeElement);return n.removeChild(s),this._syncList(n),this._placeholder()._fixTabbable(),o&&null!==this._tabbable&&this._nodes[this._tabbable].focus(),h(this.tree,"remove",i),this}open(e){const t=this.getLeaf(e);return t.classList.remove("closed"),this._sync(t),h(t,"open",this._id(t)),this}close(e){const t=this.getLeaf(e);t.classList.add("closed"),this._sync(t);const s=document.activeElement;return s!==t&&t.contains(s)&&t.focus(),this._fixTabbable(),h(t,"close",this._id(t)),this}toggle(e){return o(this.getLeaf(e),"closed")?this.open(e):this.close(e)}select(e){const t=this.getLeaf(e),s=this._id(t);if(!1===this.leafs[s].selectable||this._selected===s)return this;if(null!==this._selected){const e=this._nodes[this._selected];e.classList.remove("vtree-selected"),e.setAttribute("aria-selected","false")}return t.classList.add("vtree-selected"),t.setAttribute("aria-selected","true"),this._selected=s,this._setTabbable(s),this._fixTabbable(),h(t,"select",s),this}destroy(){const{tree:e}=this;this._closeMenu(),e.removeEventListener("click",this._onClick),e.removeEventListener("keydown",this._onKeyDown),e.removeEventListener("focus",this._onFocus,!0),e.removeEventListener("contextmenu",this._onContextMenu),document.removeEventListener("click",this._onDocumentClick),this._scheme&&this._scheme.removeListener(this._onScheme),this._scheme=null,e.parentNode&&e.parentNode.removeChild(e),this.leafs=Object.create(null),this._nodes=Object.create(null),this._selected=null,this._tabbable=null}_id(e){return e.getAttribute("data-vtree-id")}_newId(){let e;do{e="vtree-"+ ++this._count}while(this._nodes[e]);return e}_subtree(e){const{children:t}=e;for(let e=0;e<t.length;e++)if(o(t[e],"vtree-subtree"))return t[e]}_sync(e){const t=this._id(e),s=this.hasChildren(t);r(e,"vtree-has-children",s),s?e.setAttribute("aria-expanded",String(!o(e,"closed"))):e.removeAttribute("aria-expanded")}_syncList(e){e!==this.tree&&this._sync(e.parentNode)}_placeholder(){const{tree:t}=this,s=e(".vtree-placeholder",t)[0],i=!e("li.vtree-leaf",t).length;return i&&this.placeholder&&!s?l(t.appendChild(n("li","vtree-placeholder",{role:"none"})),this.placeholder):!i&&s&&t.removeChild(s),this}_visible(e){let t=e;for(let s=e.parentNode;s!==this.tree;s=s.parentNode)o(s,"vtree-leaf")&&o(s,"closed")&&(t=s);return t}_visibleLeaves(){const e=[],t=s=>{const{children:i}=s;for(let s=0;s<i.length;s++){const n=i[s];e.push(n);const l=this._subtree(n);l&&!o(n,"closed")&&t(l)}};return t(this.tree),e}_setTabbable(e){this._tabbable!==e&&(null!==this._tabbable&&this._nodes[this._tabbable].setAttribute("tabindex","-1"),this._tabbable=e,this._nodes[e].setAttribute("tabindex","0"))}_fixTabbable(){const t=this._tabbable??this._selected;if(null!==t)this._setTabbable(this._id(this._visible(this._nodes[t])));else{const t=e("li.vtree-leaf",this.tree)[0];t&&this._setTabbable(this._id(t))}}_focus(e){this._setTabbable(this._id(e)),e.focus()}_leafOf(e,t){let s=!t;for(let i=e;i&&i!==this.tree;i=i.parentNode){if(o(i,"vtree-contextmenu"))return;if(t&&o(i,t)&&(s=!0),o(i,"vtree-leaf"))return s&&this._nodes[this._id(i)]===i?i:void 0}}_click(e){const t=this._leafOf(e.target,"vtree-toggle");if(t)return void this.toggle(this._id(t));const s=this._leafOf(e.target,"vtree-leaf-label");if(!s)return;const i=this._id(s);!1===this.leafs[i].selectable?this.hasChildren(i)&&this.toggle(i):this.select(i)}_focusIn(e){const t=this._leafOf(e.target);t&&t===e.target&&this._setTabbable(this._id(t))}_keyDown(e){const t=e.target;if(!o(t,"vtree-leaf")||this._leafOf(t)!==t)return;const i=s(e),n=this._id(t),l=this.hasChildren(n),r=l&&!o(t,"closed"),h=this._visibleLeaves(),a=h.indexOf(t);if("ArrowDown"===i)a<h.length-1&&this._focus(h[a+1]);else if("ArrowUp"===i)a>0&&this._focus(h[a-1]);else if("Home"===i)this._focus(h[0]);else if("End"===i)this._focus(h[h.length-1]);else if("ArrowRight"===i)r?this._focus(h[a+1]):l&&this.open(n);else if("ArrowLeft"===i){const e=this.getParent(n);r?this.close(n):null!==e&&this._focus(this._nodes[e])}else if("Enter"===i||" "===i)!1!==this.leafs[n].selectable?this.select(n):l&&this.toggle(n);else{if(!("ContextMenu"===i||"F10"===i&&e.shiftKey))return;if(!this._options.contextmenu)return;this._openMenu(t)}e.preventDefault()}_contextMenu(e){const t=this._leafOf(e.target,"vtree-leaf-label");t&&(e.preventDefault(),e.stopPropagation(),this._openMenu(t))}_openMenu(t){for(const t of e(".vtree-contextmenu"))t.parentNode.removeChild(t);const i=this._id(t),o=e(".vtree-leaf-label",t)[0],r=n("menu","vtree-contextmenu",{role:"menu"});this._menu=r,r.style.top=`${o.offsetTop+o.getBoundingClientRect().height}px`,r.style.left=`${o.offsetLeft}px`,r.style.display="block";const h=this._options.contextmenu.map(e=>{const s=r.appendChild(n("li","vtree-contextmenu-item",{role:"menuitem",tabindex:"-1"}));return l(s,e.label,e.html),s.addEventListener("click",()=>{this._closeMenu(),t.focus(),e.action.call(e,i)}),s});r.addEventListener("keydown",e=>{const i=s(e),n=h.indexOf(e.target);if("ArrowDown"===i)h[(n+1)%h.length].focus();else if("ArrowUp"===i)h[(n+h.length-1)%h.length].focus();else if("Home"===i)h[0].focus();else if("End"===i)h[h.length-1].focus();else if("Enter"===i||" "===i)h[n].click();else{if("Escape"!==i&&"Tab"!==i)return;this._closeMenu(),t.focus()}e.preventDefault(),e.stopPropagation()}),t.appendChild(r),h.length&&h[0].focus()}_closeMenu(){const e=this._menu;e?.parentNode&&e.parentNode.removeChild(e),this._menu=null}}export{VanillaTree,VanillaTree as default};

package/package.json

@@ -1,24 +1,85 @@
 {
   "name": "vanillatree",
-  "version": "0.0.3",
-  "description": "Standalone tree view library",
-  "main": "vanillatree.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/finom/vanillatree.git"
-  },
+  "version": "1.0.0",
+  "description": "A tree view with no dependencies: one small script, keyboard and screen reader support, IE 10 and up",
   "keywords": [
     "treeview",
+    "tree-view",
+    "tree",
     "jstree",
-    "vanilla"
+    "vanilla",
+    "vanilla-js",
+    "accessibility",
+    "no-dependencies",
+    "typescript"
   ],
-  "author": "Andrey Gubanov",
+  "homepage": "https://finom.github.io/vanillatree/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/finom/vanillatree.git"
+  },
+  "author": "Andrey Gubanov <andrey.a.gubanov@gmail.com>",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/finom/vanillatree/issues"
   },
-  "homepage": "https://github.com/finom/vanillatree#readme"
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/vanillatree.d.mts",
+        "default": "./dist/vanillatree.min.mjs"
+      },
+      "require": {
+        "types": "./dist/vanillatree.d.cts",
+        "default": "./dist/vanillatree.min.js"
+      }
+    },
+    "./vanillatree.css": "./dist/vanillatree.css",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/vanillatree.min.js",
+  "module": "./dist/vanillatree.min.mjs",
+  "types": "./dist/vanillatree.d.cts",
+  "style": "./dist/vanillatree.css",
+  "unpkg": "./dist/vanillatree.min.js",
+  "jsdelivr": "./dist/vanillatree.min.js",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "lint": "biome check --error-on-warnings .",
+    "typecheck": "tsc -p tsconfig.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "build": "node scripts/build.mjs",
+    "check:dist": "node scripts/check-dist.mjs && node scripts/check-legacy.mjs && node scripts/check-legacy-run.mjs && npm run test:dist",
+    "test:dist": "VANILLATREE_DIST=1 vitest run",
+    "build:demo": "node scripts/build-demo.mjs",
+    "patch": "node scripts/release.mjs patch",
+    "minor": "node scripts/release.mjs minor",
+    "major": "node scripts/release.mjs major",
+    "beta": "node scripts/release.mjs beta",
+    "beta-minor": "node scripts/release.mjs beta-minor",
+    "beta-major": "node scripts/release.mjs beta-major",
+    "prepublishOnly": "node scripts/ci-only.mjs"
+  },
+  "devDependencies": {
+    "@babel/core": "^8.0.7",
+    "@babel/preset-env": "^8.0.7",
+    "@biomejs/biome": "^2.5.15",
+    "@rollup/plugin-terser": "^1.0.0",
+    "@vitest/coverage-v8": "^5.0.4",
+    "acorn": "^8.19.0",
+    "acorn-walk": "^8.3.5",
+    "fast-check": "^4.10.2",
+    "jsdom": "^30.1.2",
+    "rollup": "^4.64.5",
+    "typescript": "^7.0.2",
+    "vitest": "^5.0.4"
+  }
 }

package/demo.html

@@ -1,79 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>JS Bin</title>
-  <link rel="stylesheet" href="./vanillatree.css">
-  <script src="./vanillatree.js"></script>
-
-</head>
-<body>
-  <main></main>
-  <footer></footer>
-  <script>
-    const main = document.querySelector('main');
-    const info = document.querySelector('footer');
-    const tree = new VanillaTree( main, {
-    contextmenu: [{
-      label: 'Hey',
-      action: function(id) {
-        alert('Hey ' + id);
-      }
-    }, {
-      label: 'Blah',
-      action: function(id) {
-        alert('Blah ' + id);
-      }
-    }]
-    });
-
-
-
-    tree.add({
-    label: 'Label A',
-    id: 'a',
-    opened: true
-    });
-
-    tree.add({
-    label: 'Label B',
-    id: 'b'
-    });
-
-    tree.add({
-    label: 'Label A.A',
-    parent: 'a',
-    id: 'a.a',
-    opened: true,
-    selected: true
-    });
-
-    tree.add({
-    label: 'Label A.A.A',
-    parent: 'a.a'
-    });
-
-    tree.add({
-    label: 'Label A.A.B',
-    parent: 'a.a'
-    });
-
-    tree.add({
-    label: 'Label B.A',
-    parent: 'b'
-    });
-
-    main.addEventListener('vtree-open', function(evt) {
-    info.innerHTML = evt.detail.id + ' is opened';
-    });
-
-    main.addEventListener('vtree-close', function(evt) {
-    info.innerHTML = evt.detail.id + ' is closed';
-    });
-
-    main.addEventListener('vtree-select', function(evt) {
-    info.innerHTML = evt.detail.id + ' is selected';
-    });
-  </script>
-</body>
-</html>

package/vanillatree.css

@@ -1,96 +0,0 @@
-.vtree ul.vtree-subtree, .vtree li.vtree-leaf {
-	margin: 0;
-	padding: 0;
-	list-style-type: none;
-	position: relative;
-}
-
-.vtree li.vtree-leaf {
-	background-position: -90px 0;
-	background-repeat: repeat-y;
-	min-height: 18px;
-	line-height: 18px;
-}
-
-.vtree li.vtree-leaf::before {
-	content: '';
-	width: 18px;
-	height: 18px;
-	position: absolute;
-	background-position: -36px 0;
-}
-
-.vtree li.vtree-leaf li.vtree-leaf {
-	margin-left: 18px;
-}
-
-.vtree li.vtree-leaf:last-child {
-	background-image: none;
-}
-
-.vtree li.vtree-leaf.closed ul.vtree-subtree {	
-	display: none;
-}
-
-.vtree li.vtree-leaf.vtree-has-children > span.vtree-toggle {
-	display: block;
-	width: 18px;
-	height: 18px;
-	background-position: -72px 0;
-	position: absolute;
-	left: 0;
-	top: 0;
-}
-
-.vtree li.vtree-leaf.vtree-has-children.closed > span.vtree-toggle {
-	background-position: -54px 0;
-}
-
-.vtree a.vtree-leaf-label {
-	line-height: 18px;
-	display: inline-block;
-	vertical-align: top;
-	cursor: pointer;
-	max-width: 100%;
-	margin-left: 18px;
-	padding: 0 2px;
-}
-
-.vtree li.vtree-leaf a.vtree-leaf-label:hover {
-	background-color: #e7f4f9;
-	outline: 1px solid #d8f0fa;
-}
-
-.vtree li.vtree-leaf.vtree-selected > a.vtree-leaf-label {
-	background-color: #beebff;
-	outline: 1px solid #99defd;
-}
-
-.vtree-contextmenu {
-	position: absolute;
-	z-index: 9999999;
-	border: solid 1px #ccc;
-	background: #eee;
-	padding: 0px;
-	margin: 0px;
-	display: none;
-}
-
-.vtree-contextmenu li {
-	list-style: none;
-	padding: 1px 5px;
-	margin: 0px;
-	color: #333;
-	line-height: 20px;
-	height: 20px;
-	cursor: default;
-}
-
-.vtree-contextmenu li:hover {
-	color: #fff;
-	background-color: #3399ff;
-}
-
-.vtree li.vtree-leaf, .vtree li.vtree-leaf::before, .vtree li.vtree-leaf.vtree-has-children > span.vtree-toggle {
-	background-image: url(data:image/png;base64,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);
-}

package/vanillatree.js

@@ -1,212 +0,0 @@
-(function (root, factory) {
-    if (typeof define == 'function' && define.amd) {
-        define( factory );
-    } else if (typeof module === 'object' && module.exports) {
-        module.exports = factory();
-    } else {
-        root.VanillaTree = factory();
-    }
-}(this, function () {
-	"use strict";
-	// Look at the Balalaika https://github.com/finom/balalaika
-	var $=function(n,e,k,h,p,m,l,b,d,g,f,c){c=function(a,b){return new c.i(a,b)};c.i=function(a,d){k.push.apply(this,a?a.nodeType||a==n?[a]:""+a===a?/</.test(a)?((b=e.createElement(d||"q")).innerHTML=a,b.children):(d&&c(d)[0]||e).querySelectorAll(a):/f/.test(typeof a)?/c/.test(e.readyState)?a():c(e).on("DOMContentLoaded",a):a:k)};c.i[f="prototype"]=(c.extend=function(a){g=arguments;for(b=1;b<g.length;b++)if(f=g[b])for(d in f)a[d]=f[d];return a})(c.fn=c[f]=k,{on:function(a,d){a=a.split(h);this.map(function(c){(h[b=a[0]+(c.b$=c.b$||++p)]=h[b]||[]).push([d,a[1]]);c["add"+m](a[0],d)});return this},off:function(a,c){a=a.split(h);f="remove"+m;this.map(function(e){if(b=(g=h[a[0]+e.b$])&&g.length)for(;d=g[--b];)c&&c!=d[0]||a[1]&&a[1]!=d[1]||(e[f](a[0],d[0]),g.splice(b,1));else!a[1]&&e[f](a[0],c)});return this},is:function(a){d=(b=this[0])&&(b.matches||b["webkit"+l]||b["moz"+l]||b["ms"+l]);return!!d&&d.call(b,a)}});return c}(window,document,[],/\.(.+)/,0,"EventListener","MatchesSelector");
-
-	var create = function( tagName, props ) {
-			return $.extend( document.createElement( tagName ), props );
-		},
-		Tree = function( s, options ) {
-			var _this = this,
-				container = _this.container = $( s )[ 0 ],
-				tree = _this.tree = container.appendChild( create( 'ul', {
-					className: 'vtree'
-				}) );
-
-			_this.placeholder = options && options.placeholder;
-			_this._placeholder();
-			_this.leafs = {};
-			tree.addEventListener( 'click', function( evt ) {
-				if( $( evt.target ).is( '.vtree-leaf-label' ) ) {
-					_this.select( evt.target.parentNode.getAttribute('data-vtree-id') );
-				} else if( $( evt.target ).is( '.vtree-toggle' ) ) {
-					_this.toggle( evt.target.parentNode.getAttribute('data-vtree-id') );
-				}
-			});
-
-			if( options && options.contextmenu ) {
-				tree.addEventListener( 'contextmenu', function( evt ) {
-					var menu;
-					$( '.vtree-contextmenu' ).forEach( function( menu ) {
-						menu.parentNode.removeChild( menu );
-					});
-					if( $( evt.target ).is( '.vtree-leaf-label' ) ) {
-						evt.preventDefault();
-						evt.stopPropagation();
-						menu = create( 'menu', {
-							className: 'vtree-contextmenu'
-						});
-
-            var rect = evt.target.getBoundingClientRect();
-            $.extend(menu.style, {
-                top: (evt.target.offsetTop + rect.height).toString() + "px",
-                left: evt.target.offsetLeft.toString() + "px",
-                display: 'block'
-            });
-
-						options.contextmenu.forEach( function( item ) {
-							menu.appendChild( create( 'li', {
-								className: 'vtree-contextmenu-item',
-								innerHTML: item.label
-							}) ).addEventListener( 'click', item.action.bind( item, evt.target.parentNode.getAttribute('data-vtree-id') ) );
-						});
-
-						evt.target.parentNode.appendChild( menu );
-					}
-				});
-
-				document.addEventListener( 'click', function( evt ) {
-          if(evt.button === 2) return;
-					$( '.vtree-contextmenu' ).forEach( function( menu ) {
-						menu.parentNode.removeChild( menu );
-					});
-				});
-			}
-		};
-
-	Tree.prototype = {
-		constructor: Tree,
-		_dispatch: function( name, id ) {
-			var event;
-			try {
-				event = new CustomEvent( 'vtree-' + name, {
-					bubbles: true,
-					cancelable: true,
-					detail: {
-						id: id
-					}
-				});
-			} catch(e) {
-				event = document.createEvent( 'CustomEvent' );
-				event.initCustomEvent( 'vtree-' + name, true, true, { id: id });
-			}
-			( this.getLeaf( id, true ) || this.tree )
-				.dispatchEvent( event );
-			return this;
-		},
-		_placeholder: function() {
-			var p;
-			if( !this.tree.children.length && this.placeholder ) {
-				this.tree.innerHTML = '<li class="vtree-placeholder">' + this.placeholder + '</li>'
-			} else if( p = this.tree.querySelector( '.vtree-placeholder' ) ) {
-				this.tree.removeChild( p );
-			}
-			return this;
-		},
-		getLeaf: function( id, notThrow ) {
-			var leaf = $( '[data-vtree-id="' + id + '"]', this.tree )[ 0 ];
-			if( !notThrow && !leaf ) throw Error( 'No VanillaTree leaf with id "' + id + '"' )
-			return leaf;
-		},
-		getChildList: function( id ) {
-			var list,
-				parent;
-			if( id ) {
-				parent = this.getLeaf( id );
-				if( !( list = $( 'ul', parent )[ 0 ] ) ) {
-					list = parent.appendChild( create( 'ul', {
-						className: 'vtree-subtree'
-					}) );
-				}
-			} else {
-				list = this.tree;
-			}
-
-			return list;
-		},
-		add: function( options ) {
-			var id,
-				leaf = create( 'li', {
-					className: 'vtree-leaf'
-				}),
-				parentList = this.getChildList( options.parent );
-
-			leaf.setAttribute( 'data-vtree-id', id = options.id || Math.random() );
-
-			leaf.appendChild( create( 'span', {
-				className: 'vtree-toggle'
-			}) );
-
-			leaf.appendChild( create( 'a', {
-				className: 'vtree-leaf-label',
-				innerHTML: options.label
-			}) );
-
-			parentList.appendChild( leaf );
-
-			if( parentList !== this.tree ) {
-				parentList.parentNode.classList.add( 'vtree-has-children' );
-			}
-
-			this.leafs[ id ] = options;
-
-			if( !options.opened ) {
-				this.close( id );
-			}
-
-			if( options.selected ) {
-				this.select( id );
-			}
-
-			return this._placeholder()._dispatch( 'add', id );
-		},
-		move: function( id, parentId ) {
-			var leaf = this.getLeaf( id ),
-				oldParent = leaf.parentNode,
-				newParent = this.getLeaf( parentId, true );
-
-			if( newParent ) {
-				newParent.classList.add( 'vtree-has-children' );
-			}
-
-			this.getChildList( parentId ).appendChild( leaf );
-			oldParent.parentNode.classList.toggle( 'vtree-has-children', !!oldParent.children.length );
-
-			return this._dispatch( 'move', id );
-		},
-		remove: function( id ) {
-			var leaf = this.getLeaf( id ),
-				oldParent = leaf.parentNode;
-			oldParent.removeChild( leaf );
-			oldParent.parentNode.classList.toggle( 'vtree-has-children', !!oldParent.children.length );
-
-			return this._placeholder()._dispatch( 'remove', id );
-		},
-		open: function( id ) {
-			this.getLeaf( id ).classList.remove( 'closed' );
-			return this._dispatch( 'open', id );
-		},
-		close: function( id ) {
-			this.getLeaf( id ).classList.add( 'closed' );
-			return this._dispatch( 'close', id );
-		},
-		toggle: function( id ) {
-			return this[ this.getLeaf( id ).classList.contains( 'closed' ) ? 'open' : 'close' ]( id );
-		},
-		select: function( id ) {
-			var leaf = this.getLeaf( id );
-
-			if( !leaf.classList.contains( 'vtree-selected' ) ) {
-				$( 'li.vtree-leaf', this.tree ).forEach( function( leaf ) {
-					leaf.classList.remove( 'vtree-selected' );
-				});
-
-				leaf.classList.add( 'vtree-selected' );
-				this._dispatch( 'select', id );
-			}
-
-			return this;
-		}
-	};
-
-	return Tree;
-	// Look at the Balalaika https://github.com/finom/balalaika
-}));

package/vanillatree.min.js

@@ -1 +0,0 @@
-!function(e,t){"function"==typeof define&&define.amd?define(t):"object"==typeof module&&module.exports?module.exports=t():e.VanillaTree=t()}(this,function(){"use strict";var n,i,r,a,s,l,t,o,c,d,h,u,p=(n=window,i=document,r=[],a=/\.(.+)/,s=0,l="EventListener",t="MatchesSelector",(u=function(e,t){return new u.i(e,t)}).i=function(e,t){r.push.apply(this,e?e.nodeType||e==n?[e]:""+e===e?/</.test(e)?((o=i.createElement(t||"q")).innerHTML=e,o.children):(t&&u(t)[0]||i).querySelectorAll(e):/f/.test(typeof e)?/c/.test(i.readyState)?e():u(i).on("DOMContentLoaded",e):e:r)},u.i[h="prototype"]=(u.extend=function(e){for(d=arguments,o=1;o<d.length;o++)if(h=d[o])for(c in h)e[c]=h[c];return e})(u.fn=u[h]=r,{on:function(t,n){return t=t.split(a),this.map(function(e){(a[o=t[0]+(e.b$=e.b$||++s)]=a[o]||[]).push([n,t[1]]),e["add"+l](t[0],n)}),this},off:function(t,n){return t=t.split(a),h="remove"+l,this.map(function(e){if(o=(d=a[t[0]+e.b$])&&d.length)for(;c=d[--o];)n&&n!=c[0]||t[1]&&t[1]!=c[1]||(e[h](t[0],c[0]),d.splice(o,1));else!t[1]&&e[h](t[0],n)}),this},is:function(e){return!!(c=(o=this[0])&&(o.matches||o["webkit"+t]||o["moz"+t]||o["ms"+t]))&&c.call(o,e)}}),u),f=function(e,t){return p.extend(document.createElement(e),t)},e=function(e,i){var t=this,n=t.container=p(e)[0],r=t.tree=n.appendChild(f("ul",{className:"vtree"}));t.placeholder=i&&i.placeholder,t._placeholder(),t.leafs={},r.addEventListener("click",function(e){p(e.target).is(".vtree-leaf-label")?t.select(e.target.parentNode.getAttribute("data-vtree-id")):p(e.target).is(".vtree-toggle")&&t.toggle(e.target.parentNode.getAttribute("data-vtree-id"))}),i&&i.contextmenu&&(r.addEventListener("contextmenu",function(t){var n;if(p(".vtree-contextmenu").forEach(function(e){e.parentNode.removeChild(e)}),p(t.target).is(".vtree-leaf-label")){t.preventDefault(),t.stopPropagation(),n=f("menu",{className:"vtree-contextmenu"});var e=t.target.getBoundingClientRect();p.extend(n.style,{top:(t.target.offsetTop+e.height).toString()+"px",left:t.target.offsetLeft.toString()+"px",display:"block"}),i.contextmenu.forEach(function(e){n.appendChild(f("li",{className:"vtree-contextmenu-item",innerHTML:e.label})).addEventListener("click",e.action.bind(e,t.target.parentNode.getAttribute("data-vtree-id")))}),t.target.parentNode.appendChild(n)}}),document.addEventListener("click",function(e){2!==e.button&&p(".vtree-contextmenu").forEach(function(e){e.parentNode.removeChild(e)})}))};return e.prototype={constructor:e,_dispatch:function(t,n){var i;try{i=new CustomEvent("vtree-"+t,{bubbles:!0,cancelable:!0,detail:{id:n}})}catch(e){(i=document.createEvent("CustomEvent")).initCustomEvent("vtree-"+t,!0,!0,{id:n})}return(this.getLeaf(n,!0)||this.tree).dispatchEvent(i),this},_placeholder:function(){var e;return!this.tree.children.length&&this.placeholder?this.tree.innerHTML='<li class="vtree-placeholder">'+this.placeholder+"</li>":(e=this.tree.querySelector(".vtree-placeholder"))&&this.tree.removeChild(e),this},getLeaf:function(e,t){var n=p('[data-vtree-id="'+e+'"]',this.tree)[0];if(!t&&!n)throw Error('No VanillaTree leaf with id "'+e+'"');return n},getChildList:function(e){var t,n;return e?(n=this.getLeaf(e),(t=p("ul",n)[0])||(t=n.appendChild(f("ul",{className:"vtree-subtree"})))):t=this.tree,t},add:function(e){var t,n=f("li",{className:"vtree-leaf"}),i=this.getChildList(e.parent);return n.setAttribute("data-vtree-id",t=e.id||Math.random()),n.appendChild(f("span",{className:"vtree-toggle"})),n.appendChild(f("a",{className:"vtree-leaf-label",innerHTML:e.label})),i.appendChild(n),i!==this.tree&&i.parentNode.classList.add("vtree-has-children"),(this.leafs[t]=e).opened||this.close(t),e.selected&&this.select(t),this._placeholder()._dispatch("add",t)},move:function(e,t){var n=this.getLeaf(e),i=n.parentNode,r=this.getLeaf(t,!0);return r&&r.classList.add("vtree-has-children"),this.getChildList(t).appendChild(n),i.parentNode.classList.toggle("vtree-has-children",!!i.children.length),this._dispatch("move",e)},remove:function(e){var t=this.getLeaf(e),n=t.parentNode;return n.removeChild(t),n.parentNode.classList.toggle("vtree-has-children",!!n.children.length),this._placeholder()._dispatch("remove",e)},open:function(e){return this.getLeaf(e).classList.remove("closed"),this._dispatch("open",e)},close:function(e){return this.getLeaf(e).classList.add("closed"),this._dispatch("close",e)},toggle:function(e){return this[this.getLeaf(e).classList.contains("closed")?"open":"close"](e)},select:function(e){var t=this.getLeaf(e);return t.classList.contains("vtree-selected")||(p("li.vtree-leaf",this.tree).forEach(function(e){e.classList.remove("vtree-selected")}),t.classList.add("vtree-selected"),this._dispatch("select",e)),this}},e});