tree-element 0.1.1 → 0.3.0

package/src/index.ts

@@ -1,5 +1,5 @@
 import type { ClassNames } from "./classNames";
-import type { MoveInfo, TreeEvent, TreeEventName, TreeEvents } from "./events";
+import type { TreeEventName, TreeEvents } from "./events";
 import type { PositionInfo } from "./mouseUtils";
 import type { NodeData, NodeId, Position } from "./node";
 import type { TreeElementOptions } from "./options";
@@ -28,19 +28,6 @@ import __version__ from "./version";
 // the submodules directly, because those are not exposed in package.json.
 // Type only, so that the iife build keeps exposing the TreeElement class itself
 // as its global, instead of an object of named exports.
-export type {
-  MoveInfo,
-  Node,
-  NodeData,
-  NodeId,
-  Position,
-  SavedState,
-  SelectNodeOptions,
-  TreeElementOptions,
-  TreeEvent,
-  TreeEventName,
-  TreeEvents,
-};
 
 export type TriggerEventProvider = (
   element: HTMLElement,
@@ -49,21 +36,21 @@ export type TriggerEventProvider = (
 ) => boolean;
 
 interface TreeElementParams extends Partial<TreeElementOptions> {
-  /** The element the tree is rendered into. Its content is replaced. */
+  /**
+  The element the tree is rendered into. Its content is replaced.
+  */
   htmlElement: HTMLElement;
   /** Replaces how events are dispatched. It must return whether the event
    * was not cancelled. This exists for tests and for integrating with
    * another event system. */
-  overrideTriggerEventProvider?: TriggerEventProvider,
+  overrideTriggerEventProvider?: TriggerEventProvider;
 }
 
 export default class TreeElement {
-  /** @hidden */
-  public tree: Node;
-
   private classNames: ClassNames;
   private dataLoader: DataLoader;
   private dndHandler: DragAndDropHandler;
+  private fallbackTabStop: HTMLElement | null;
   private htmlElement: HTMLElement;
   private isInitialized: boolean;
   private keyHandler: KeyHandler;
@@ -74,20 +61,31 @@ export default class TreeElement {
   private saveStateHandler: SaveStateHandler;
   private scrollHandler: ScrollHandler;
   private selectNodeHandler: SelectNodeHandler;
+  private tree: Node;
   private triggerEventProvider: TriggerEventProvider;
 
-  /** @hidden */
-  constructor({ htmlElement, overrideTriggerEventProvider, ...options }: TreeElementParams) {
+  /**
+  @hidden
+  */
+  constructor({
+    htmlElement,
+    overrideTriggerEventProvider,
+    ...options
+  }: TreeElementParams) {
     this.htmlElement = htmlElement;
     this.options = setDefaultOptions(htmlElement, options);
     this.classNames = createClassNames(this.options);
-    this.triggerEventProvider = overrideTriggerEventProvider ?? triggerCustomEvent;
+    this.triggerEventProvider =
+      overrideTriggerEventProvider ?? triggerCustomEvent;
 
     this.isInitialized = false;
     this.tree = new Node({}, true);
     this.nodeMap = new WeakMap();
+    this.fallbackTabStop = null;
 
     const {
+      ariaLabel,
+      ariaLabelledBy,
       autoEscape,
       buttonLeft,
       closedIcon,
@@ -115,10 +113,10 @@ export default class TreeElement {
     const closeNode = this.closeNode.bind(this);
     const getNodeElement = this.getNodeElement.bind(this);
     const getNodeElementForNode = this.getNodeElementForNode.bind(this);
+    const getFocusedNode = this.getFocusedNode.bind(this);
     const getNodeById = this.getNodeById.bind(this);
     const getSelectedNode = this.getSelectedNode.bind(this);
     const getTree = this.getTree.bind(this);
-    const isFocusOnTree = this.isFocusOnTree.bind(this);
     const loadData = this.loadData.bind(this);
     const openNode = this.openNode.bind(this);
     const openParents = this.openParents.bind(this);
@@ -127,10 +125,11 @@ export default class TreeElement {
     const setNodeElement = this.setNodeElement.bind(this);
     const treeElement = this.htmlElement;
     const triggerEvent = this.triggerEvent.bind(this);
+    const updateTabStop = this.updateTabStop.bind(this);
 
     const saveState = () => {
       saveStateHandler.saveState();
-    }
+    };
 
     const selectNodeHandler = new SelectNodeHandler({
       getNodeById,
@@ -139,7 +138,8 @@ export default class TreeElement {
       getSelectable: () => this.options.selectable,
       openParents,
       saveState,
-      triggerEvent
+      triggerEvent,
+      updateTabStop,
     });
 
     const addToSelection =
@@ -150,7 +150,8 @@ export default class TreeElement {
       selectNodeHandler.isNodeSelected.bind(selectNodeHandler);
     const removeFromSelection =
       selectNodeHandler.removeFromSelection.bind(selectNodeHandler);
-    const selectNode = selectNodeHandler.selectSingleNode.bind(selectNodeHandler);
+    const selectNode =
+      selectNodeHandler.selectSingleNode.bind(selectNodeHandler);
 
     const getMouseDelay = () => this.options.startDndDelay ?? 0;
 
@@ -204,14 +205,18 @@ export default class TreeElement {
 
     const keyHandler = new KeyHandler({
       closeNode,
+      getFocusedNode,
       getSelectedNode,
-      isFocusOnTree,
+      getTree,
       keyboardSupport,
       openNode,
       selectNode,
+      triggerEvent,
     });
 
     const renderer = new ElementsRenderer({
+      ariaLabel,
+      ariaLabelledBy,
       autoEscape,
       buttonLeft,
       classNames,
@@ -267,10 +272,7 @@ export default class TreeElement {
    * @returns The new node, or `null` when the node has no parent.
    * @group Changing the tree
    */
-  public addNodeAfter(
-    nodeData: NodeData,
-    existingNode: Node,
-  ): Node | null {
+  public addNodeAfter(nodeData: NodeData, existingNode: Node): Node | null {
     const newNode = existingNode.addAfter(nodeData);
 
     if (newNode) {
@@ -286,10 +288,7 @@ export default class TreeElement {
    * @returns The new node, or `null` when the node has no parent.
    * @group Changing the tree
    */
-  public addNodeBefore(
-    nodeData: NodeData,
-    existingNode: Node,
-  ): Node | null {
+  public addNodeBefore(nodeData: NodeData, existingNode: Node): Node | null {
     const newNode = existingNode.addBefore(nodeData);
 
     if (newNode) {
@@ -306,10 +305,7 @@ export default class TreeElement {
    * @returns The new node, or `null` when the node has no parent.
    * @group Changing the tree
    */
-  public addParentNode(
-    nodeData: NodeData,
-    existingNode: Node,
-  ): Node | null {
+  public addParentNode(nodeData: NodeData, existingNode: Node): Node | null {
     const newNode = existingNode.addParent(nodeData);
 
     if (newNode) {
@@ -325,12 +321,13 @@ export default class TreeElement {
    * @param mustSetFocus - Move the focus to the node. Default `true`.
    * @group Selection
    */
-  public addToSelection(node: Node, mustSetFocus?: boolean) {
+  public addToSelection(node: Node, mustSetFocus = true) {
     this.selectNodeHandler.addToSelection(node);
     this.openParents(node);
 
-    this.getNodeElementForNode(node).select(mustSetFocus ?? true);
+    this.getNodeElementForNode(node).select(mustSetFocus);
 
+    this.updateTabStop();
     this.saveState();
   }
 
@@ -354,20 +351,29 @@ export default class TreeElement {
   }
 
   /**
-   * Closes a folder.
+   * Closes a folder. Await the promise when you need to know the closing
+   * animation has finished.
+   *
+   * @example
+   * ```js
+   * await tree.closeNode(node);
+   * console.log("closed");
+   * ```
    *
    * @param slide - Override the `slide` option for this call.
    * @group Opening and closing
    */
-  public closeNode(node: Node, slide?: boolean): void {
-    if (node.isFolder() || node.isEmptyFolder) {
-      this.createFolderElement(node).close(
-        slide ?? this.options.slide,
-        this.options.animationSpeed,
-      );
-
-      this.saveState();
+  public async closeNode(node: Node, slide?: boolean): Promise<void> {
+    if (!(node.isFolder() || node.isEmptyFolder)) {
+      return;
     }
+
+    await this.createFolderElement(node).close(
+      slide ?? this.options.slide,
+      this.options.animationSpeed,
+    );
+
+    this.saveState();
   }
 
   /**
@@ -377,7 +383,7 @@ export default class TreeElement {
    * @group Other
    */
   public deinit(): void {
-    this.htmlElement.textContent = '';
+    this.htmlElement.textContent = "";
 
     this.dataLoader.deinit();
     this.keyHandler.deinit();
@@ -396,11 +402,7 @@ export default class TreeElement {
       `li.${this.classNames.common}`,
     );
 
-    if (liElement) {
-      return this.nodeMap.get(liElement) ?? null;
-    } else {
-      return null;
-    }
+    return liElement ? (this.nodeMap.get(liElement) ?? null) : null;
   }
 
   /**
@@ -465,11 +467,11 @@ export default class TreeElement {
   }
 
   /**
-   * Returns the selected node, or `false` when nothing is selected.
+   * Returns the selected node, or `null` when nothing is selected.
    *
    * @group Selection
    */
-  public getSelectedNode(): false | Node {
+  public getSelectedNode(): Node | null {
     return this.selectNodeHandler.getSelectedNode();
   }
 
@@ -571,11 +573,10 @@ export default class TreeElement {
    * @param url - Defaults to the `dataUrl` option.
    * @group Loading data
    */
-  public async loadDataFromUrl(
-    url?: string,
-    parentNode?: Node
-  ): Promise<void> {
-    const requestUrl = url ? new RequestUrl(url) : this.createRequestUrl(parentNode);
+  public async loadDataFromUrl(url?: string, parentNode?: Node): Promise<void> {
+    const requestUrl = url
+      ? new RequestUrl(url)
+      : this.createRequestUrl(parentNode);
 
     if (requestUrl) {
       await this.dataLoader.loadFromUrl(requestUrl, parentNode);
@@ -588,10 +589,7 @@ export default class TreeElement {
    * @group Selection
    */
   public moveDown() {
-    const selectedNode = this.getSelectedNode();
-    if (selectedNode) {
-      this.keyHandler.moveDown(selectedNode);
-    }
+    this.keyHandler.moveDown();
   }
 
   /**
@@ -605,11 +603,7 @@ export default class TreeElement {
    * @param position - `"before"`, `"after"` or `"inside"`.
    * @group Changing the tree
    */
-  public moveNode(
-    node: Node,
-    targetNode: Node,
-    position: Position,
-  ): void {
+  public moveNode(node: Node, targetNode: Node, position: Position): void {
     this.tree.moveNode(node, targetNode, position);
     this.refreshElements(null);
   }
@@ -620,10 +614,7 @@ export default class TreeElement {
    * @group Selection
    */
   public moveUp() {
-    const selectedNode = this.getSelectedNode();
-    if (selectedNode) {
-      this.keyHandler.moveUp(selectedNode);
-    }
+    this.keyHandler.moveUp();
   }
 
   /**
@@ -640,15 +631,12 @@ export default class TreeElement {
    * @param slide - Override the `slide` option for this call.
    * @group Opening and closing
    */
-  public async openNode(
-    node: Node,
-    slide?: boolean
-  ): Promise<void> {
+  public async openNode(node: Node, slide?: boolean): Promise<void> {
     const mustSlide = slide ?? this.options.slide;
 
     const doOpenNode = async (
       openedNode: Node,
-      slideOption: boolean
+      slideOption: boolean,
     ): Promise<void> => {
       if (!node.children.length) {
         return;
@@ -656,10 +644,7 @@ export default class TreeElement {
 
       const folderElement = this.createFolderElement(openedNode);
 
-      await folderElement.open(
-        slideOption,
-        this.options.animationSpeed,
-      );
+      await folderElement.open(slideOption, this.options.animationSpeed);
     };
 
     if (node.isFolder() || node.isEmptyFolder) {
@@ -726,6 +711,7 @@ export default class TreeElement {
     this.selectNodeHandler.removeFromSelection(node);
 
     this.getNodeElementForNode(node).deselect();
+    this.updateTabStop();
     this.saveState();
   }
 
@@ -752,9 +738,7 @@ export default class TreeElement {
       return;
     }
 
-    const top =
-      getOffsetTop(node.element) -
-      getOffsetTop(this.htmlElement);
+    const top = getOffsetTop(node.element) - getOffsetTop(this.htmlElement);
 
     this.scrollHandler.scrollToY(top);
   }
@@ -768,10 +752,7 @@ export default class TreeElement {
    * `false`.
    * @group Selection
    */
-  public selectNode(
-    node: Node | null,
-    options?: SelectNodeOptions,
-  ): void {
+  public selectNode(node: Node | null, options?: SelectNodeOptions): void {
     if (!node) {
       // Called with empty node -> deselect current node
       this.deselectCurrentNode();
@@ -779,7 +760,11 @@ export default class TreeElement {
       return;
     }
 
-    this.selectNodeHandler.selectSingleNode(node, options);
+    // Unlike a click, selecting the selected node again keeps it selected
+    this.selectNodeHandler.selectSingleNode(node, {
+      mustToggle: false,
+      ...options,
+    });
   }
 
   /**
@@ -793,28 +778,32 @@ export default class TreeElement {
   }
 
   /**
-   * Applies a state to the tree.
+   * Applies a state to the tree, and saves it to storage when `saveState` is
+   * enabled.
    *
    * @group State
    */
   public setState(state: SavedState) {
     this.saveStateHandler.setInitialState(state);
     this.refreshElements(null);
+    this.saveState();
   }
 
   /**
-   * Closes an open node and opens a closed one.
+   * Closes an open node and opens a closed one. Await the promise when you
+   * need to know the node is really open or closed, like with `openNode` and
+   * `closeNode`.
    *
    * @param slide - Override the `slide` option for this call.
    * @group Opening and closing
    */
-  public toggle(node: Node, slide: boolean | null = null) {
+  public async toggle(node: Node, slide: boolean | null = null): Promise<void> {
     const mustSlide = slide ?? this.options.slide;
 
     if (node.is_open) {
-      this.closeNode(node, mustSlide);
+      await this.closeNode(node, mustSlide);
     } else {
-      void this.openNode(node, mustSlide);
+      await this.openNode(node, mustSlide);
     }
   }
 
@@ -860,7 +849,7 @@ export default class TreeElement {
     if (
       typeof data === "object" &&
       data.children &&
-      data.children instanceof Array
+      Array.isArray(data.children)
     ) {
       node.removeChildren();
 
@@ -872,6 +861,34 @@ export default class TreeElement {
     this.refreshElements(node);
   }
 
+  // Open the nodes up to the autoOpen level. A folder that is loaded on
+  // demand is fetched first, and its children are opened when the data has
+  // arrived.
+  private async autoOpenNodesOnDemand(): Promise<void> {
+    const maxLevel = this.getAutoOpenMaxLevel();
+
+    const openNodes = async (): Promise<void> => {
+      const loading: Promise<void>[] = [];
+
+      this.tree.iterate((node: Node, level: number) => {
+        if (node.load_on_demand) {
+          if (!node.is_loading) {
+            loading.push(this.openNode(node, false).then(openNodes));
+          }
+
+          return false;
+        }
+        void this.openNode(node, false);
+
+        return level !== maxLevel;
+      });
+
+      await Promise.all(loading);
+    };
+
+    await openNodes();
+  }
+
   private createFolderElement(node: Node) {
     const classNames = this.classNames;
     const closedIconElement = this.renderer.closedIconElement;
@@ -883,12 +900,22 @@ export default class TreeElement {
     const treeElement = this.htmlElement;
     const triggerEvent = this.triggerEvent.bind(this);
 
+    // A selected node in a closed folder is rendered when the folder is
+    // opened, which can be after it was selected. It becomes the tab stop
+    // then, so the fallback tab stop must go.
+    const renderChildren = (folder: Node) => {
+      const ul = this.renderer.renderChildren(folder);
+      this.updateTabStop();
+      return ul;
+    };
+
     return new FolderElement({
       classNames,
       closedIconElement,
       getScrollLeft,
       node,
       openedIconElement,
+      renderChildren,
       tabIndex,
       treeElement,
       triggerEvent,
@@ -913,19 +940,13 @@ export default class TreeElement {
   }
 
   /* Create a RequestUrl based on the url in the options.
-    * Add a 'node' query parameter for loading on demand
-    * Add a 'selected_node' query parameter if a node is selected.
-  */
+   * Add a 'node' query parameter for loading on demand
+   * Add a 'selected_node' query parameter if a node is selected.
+   */
   private createRequestUrl(node?: Node): null | RequestUrl {
     const dataUrl = this.options.dataUrl;
 
-    let url;
-
-    if (typeof dataUrl === "function") {
-      url = dataUrl(node);
-    } else {
-      url = dataUrl;
-    }
+    const url = typeof dataUrl === "function" ? dataUrl(node) : dataUrl;
 
     if (!url) {
       return null;
@@ -935,12 +956,12 @@ export default class TreeElement {
 
     if (node?.id) {
       // Load on demand of a subtree; add node parameter
-      requestUrl.setSearchParam('node', node.id.toString());
+      requestUrl.setSearchParam("node", node.id.toString());
     } else {
       // Add selected_node parameter
       const selectedNodeId = this.getNodeIdToBeSelected();
       if (selectedNodeId) {
-        requestUrl.setSearchParam('selected_node', selectedNodeId.toString());
+        requestUrl.setSearchParam("selected_node", selectedNodeId.toString());
       }
     }
 
@@ -967,9 +988,11 @@ export default class TreeElement {
   private getAutoOpenMaxLevel(): number {
     if (this.options.autoOpen === true) {
       return -1;
-    } else if (typeof this.options.autoOpen === "number") {
+    }
+    if (typeof this.options.autoOpen === "number") {
       return this.options.autoOpen;
-    } else if (typeof this.options.autoOpen === "string") {
+    }
+    if (typeof this.options.autoOpen === "string") {
       return parseInt(this.options.autoOpen, 10);
     }
 
@@ -977,27 +1000,55 @@ export default class TreeElement {
     return 0;
   }
 
-  private getNodeElement(element: HTMLElement): NodeElement | null {
-    const node = this.getNode(element);
-    if (node) {
-      return this.getNodeElementForNode(node);
-    } else {
+  // The title span of the first node, or null when the tree is empty
+  private getFirstTitleSpan(): HTMLElement | null {
+    const firstElement = this.tree.children[0]?.element;
+
+    return firstElement
+      ? firstElement.querySelector<HTMLElement>(
+          `:scope > .${this.classNames.element} > span.${this.classNames.title}`,
+        )
+      : null;
+  }
+
+  // The node of the HTML element that has the focus, if it is in this tree
+  private getFocusedNode(): Node | null {
+    const activeElement = document.activeElement;
+
+    /* istanbul ignore if */
+    if (!activeElement) {
+      return null;
+    }
+
+    // The keyboard must still work for input elements.
+    const tagName = activeElement.tagName;
+    if (tagName !== "A" && tagName !== "SPAN") {
       return null;
     }
+
+    const node = this.getNode(activeElement as HTMLElement);
+    return node?.tree === this.tree ? node : null;
+  }
+
+  private getNodeElement(element: HTMLElement): NodeElement | null {
+    const node = this.getNode(element);
+    return node ? this.getNodeElementForNode(node) : null;
   }
 
   private getNodeElementForNode(node: Node): NodeElement {
-    if (node.isFolder()) {
-      return this.createFolderElement(node);
-    } else {
-      return this.createNodeElement(node);
-    }
+    return node.isFolder()
+      ? this.createFolderElement(node)
+      : this.createNodeElement(node);
   }
 
   private getNodeIdToBeSelected(): NodeId | null {
     return this.saveStateHandler.getNodeIdToBeSelected();
   }
 
+  private hasRenderedSelectedNode(): boolean {
+    return this.getSelectedNodes().some((node) => Boolean(node.element));
+  }
+
   private initData(): void {
     if (this.options.data) {
       this.loadData(this.options.data);
@@ -1014,17 +1065,15 @@ export default class TreeElement {
 
   private initTree(data: NodeData[]): void {
     const doInit = (): void => {
-      if (!this.isInitialized) {
-        this.isInitialized = true;
-        this.triggerEvent("tree.init");
+      if (this.isInitialized) {
+        return;
       }
+
+      this.isInitialized = true;
+      this.triggerEvent("tree.init");
     };
 
-    this.tree = new this.options.nodeClass(
-      null,
-      true,
-      this.options.nodeClass,
-    );
+    this.tree = new this.options.nodeClass(null, true, this.options.nodeClass);
 
     this.selectNodeHandler.clear();
 
@@ -1044,41 +1093,29 @@ export default class TreeElement {
 
   // Does an HTML element of the tree have the focus?
   private isFocusOnTree(): boolean {
-    const activeElement = document.activeElement;
-
-    /* istanbul ignore if */
-    if (!activeElement) {
-      return false;
-    }
-
-    // The keyboard must still work for input elements.
-    const tagName = activeElement.tagName;
-    if (tagName !== "A" && tagName !== "SPAN") {
-      return false;
-    }
-
-    const node = this.getNode(activeElement as HTMLElement);
-    return node?.tree === this.tree;
+    return this.getFocusedNode() !== null;
   }
 
   private isSelectedNodeInSubtree(subtree: Node): boolean {
     const selectedNode = this.getSelectedNode();
 
-    if (!selectedNode) {
-      return false;
-    } else {
-      return subtree === selectedNode || subtree.isParentOf(selectedNode);
-    }
+    return selectedNode
+      ? subtree === selectedNode || subtree.isParentOf(selectedNode)
+      : false;
   }
 
-  private async loadFolderOnDemand(
-    node: Node,
-    slide: boolean,
-  ): Promise<void> {
+  private async loadFolderOnDemand(node: Node, slide: boolean): Promise<void> {
     node.is_loading = true;
 
     await this.loadDataFromUrl(undefined, node);
 
+    // Loading failed, or there is no url. Opening the node now would load it
+    // again, without end. Leave it closed so the user can try again.
+    if (node.load_on_demand) {
+      node.is_loading = false;
+      return;
+    }
+
     await this.openNode(node, slide);
   }
 
@@ -1092,11 +1129,9 @@ export default class TreeElement {
   }
 
   private mouseCapture(positionInfo: PositionInfo): boolean | null {
-    if (!this.options.dragAndDrop) {
-      return false;
-    }
-
-    return this.dndHandler.mouseCapture(positionInfo);
+    return this.options.dragAndDrop
+      ? this.dndHandler.mouseCapture(positionInfo)
+      : false;
   }
 
   private mouseDrag(positionInfo: PositionInfo): boolean {
@@ -1112,6 +1147,7 @@ export default class TreeElement {
 
   private mouseStart(positionInfo: PositionInfo): boolean {
     /* istanbul ignore if */
+    // eslint-disable-next-line unicorn/prefer-ternary
     if (!this.options.dragAndDrop) {
       return false;
     }
@@ -1153,6 +1189,8 @@ export default class TreeElement {
       this.selectCurrentNode(mustSetFocus);
     }
 
+    this.updateTabStop();
+
     this.triggerEvent("tree.refresh");
   }
 
@@ -1162,10 +1200,12 @@ export default class TreeElement {
 
   private selectCurrentNode(mustSetFocus: boolean): void {
     const node = this.getSelectedNode();
-    if (node) {
-      const nodeElement = this.getNodeElementForNode(node);
-      nodeElement.select(mustSetFocus);
+    if (!node) {
+      return;
     }
+
+    const nodeElement = this.getNodeElementForNode(node);
+    nodeElement.select(mustSetFocus);
   }
 
   // Set initial state, either by restoring the state or auto-opening nodes
@@ -1175,15 +1215,13 @@ export default class TreeElement {
       // result: is state restored, must load on demand?
       const state = this.saveStateHandler.getStateFromStorage();
 
-      if (!state) {
-        return [false, false];
-      } else {
-        const mustLoadOnDemand =
-          this.saveStateHandler.setInitialState(state);
+      if (state) {
+        const mustLoadOnDemand = this.saveStateHandler.setInitialState(state);
 
         // return true: the state is restored
         return [true, mustLoadOnDemand];
       }
+      return [false, false];
     };
 
     const autoOpenNodes = (): boolean => {
@@ -1199,12 +1237,12 @@ export default class TreeElement {
         if (node.load_on_demand) {
           mustLoadOnDemand = true;
           return false;
-        } else if (!node.hasChildren()) {
-          return false;
-        } else {
+        }
+        if (node.hasChildren()) {
           node.is_open = true;
           return level !== maxLevel;
         }
+        return false;
       });
 
       return mustLoadOnDemand;
@@ -1221,62 +1259,13 @@ export default class TreeElement {
 
   // Set the initial state for nodes that are loaded on demand
   private async setInitialStateOnDemand(): Promise<void> {
-    return new Promise(resolve => {
-      const restoreState = (): boolean => {
-        const state = this.saveStateHandler.getStateFromStorage();
-
-        if (!state) {
-          return false;
-        } else {
-          void this.saveStateHandler.setInitialStateOnDemand(
-            state,
-          ).then(() => {
-            resolve();
-          });
-
-          return true;
-        }
-      };
-
-      const autoOpenNodes = (): void => {
-        const maxLevel = this.getAutoOpenMaxLevel();
-        let loadingCount = 0;
-
-        const loadAndOpenNode = (node: Node): void => {
-          loadingCount += 1;
-          void this.openNode(node, false).then(() => {
-            loadingCount -= 1;
-            openNodes();
-          });
-        };
-
-        const openNodes = (): void => {
-          this.tree.iterate((node: Node, level: number) => {
-            if (node.load_on_demand) {
-              if (!node.is_loading) {
-                loadAndOpenNode(node);
-              }
-
-              return false;
-            } else {
-              void this.openNode(node, false);
-
-              return level !== maxLevel;
-            }
-          });
-
-          if (loadingCount === 0) {
-            resolve();
-          }
-        };
-
-        openNodes();
-      };
+    const state = this.saveStateHandler.getStateFromStorage();
 
-      if (!restoreState()) {
-        autoOpenNodes();
-      }
-    });
+    if (state) {
+      await this.saveStateHandler.setInitialStateOnDemand(state);
+    } else {
+      await this.autoOpenNodesOnDemand();
+    }
   }
 
   // Set this HTML element to this node in the node map.
@@ -1284,7 +1273,48 @@ export default class TreeElement {
     this.nodeMap.set(element, node);
   }
 
-  private triggerEvent<Name extends TreeEventName>(eventName: Name, values?: TreeEvents[Name]): boolean {
-    return this.triggerEventProvider(this.htmlElement, eventName, values)
+  private triggerEvent<Name extends TreeEventName>(
+    eventName: Name,
+    values?: TreeEvents[Name],
+  ): boolean {
+    return this.triggerEventProvider(this.htmlElement, eventName, values);
   }
-}
+
+  /* Keyboard users reach the tree through the tab stop. The selected node is
+   * the tab stop, see NodeElement.select. Without a selected node, the first
+   * node is the tab stop, so the tree can always be reached.
+   */
+  private updateTabStop(): void {
+    const tabIndex = this.options.tabIndex;
+    const previousTabStop = this.fallbackTabStop;
+    const tabStop =
+      tabIndex == null || this.hasRenderedSelectedNode()
+        ? null
+        : this.getFirstTitleSpan();
+
+    if (
+      previousTabStop &&
+      previousTabStop !== tabStop &&
+      previousTabStop.getAttribute("aria-selected") !== "true"
+    ) {
+      previousTabStop.setAttribute("tabindex", "-1");
+    }
+
+    if (tabStop && tabIndex != null) {
+      tabStop.setAttribute("tabindex", String(tabIndex));
+    }
+
+    this.fallbackTabStop = tabStop;
+  }
+}
+
+export {
+  type MoveInfo,
+  type TreeEvent,
+  type TreeEventName,
+  type TreeEvents,
+} from "./events";
+export { type Node, type NodeData, type NodeId, type Position } from "./node";
+export { type TreeElementOptions } from "./options";
+export { type SavedState } from "./saveStateHandler";
+export { type SelectNodeOptions } from "./selectNodeHandler";