tree-element 0.1.1 → 0.3.0

package/src/options.ts

@@ -17,9 +17,13 @@ export type OnCanMoveTo = (
   positionName: string,
 ) => boolean;
 
-export type OnCanSelectNode = (node: Node) => boolean
+export type OnCanSelectNode = (node: Node) => boolean;
 
-export type OnCreateLi = (node: Node, el: HTMLElement, isSelected: boolean) => void;
+export type OnCreateLi = (
+  node: Node,
+  el: HTMLElement,
+  isSelected: boolean,
+) => void;
 
 export type OnGetStateFromStorage = (() => string) | undefined;
 
@@ -32,10 +36,25 @@ export interface TreeElementOptions {
    * The duration of the slide animation: `"fast"` is 200ms, `"slow"` is
    * 600ms, a number is milliseconds.
    *
-   * @defaultValue `"fast"`
+   * @defaultValue `"fast"`, or `0` when the user prefers reduced motion
+   * (`prefers-reduced-motion: reduce`).
    * @group Appearance
    */
   animationSpeed: AnimationSpeed;
+  /**
+   * The accessible name of the tree, set as `aria-label` on the root `ul`.
+   * Use `ariaLabelledBy` instead when the name is visible on the page.
+   *
+   * @group Appearance
+   */
+  ariaLabel?: string;
+  /**
+   * The id of the element that names the tree, set as `aria-labelledby` on
+   * the root `ul`.
+   *
+   * @group Appearance
+   */
+  ariaLabelledBy?: string;
   /**
    * Escape node names. With `false`, names are inserted as html — only do
    * that for data you control.
@@ -125,7 +144,7 @@ export interface TreeElementOptions {
    */
   dragAndDrop: boolean;
   /**
-   * Handle the arrow keys when the focus is on the tree. See
+   * Handle the keyboard when the focus is on the tree. See
    * [Selection](/guide/selection#keyboard-navigation).
    *
    * @defaultValue `true`
@@ -298,7 +317,8 @@ export interface TreeElementOptions {
   startDndDelay?: number;
   /**
    * The `tabindex` of the selected node's title, which is what makes the
-   * tree focusable.
+   * tree focusable. When no node is selected, the first node gets it. The
+   * other nodes get `-1`.
    *
    * @defaultValue `0`
    * @group Selection

package/src/requestUrl.ts

@@ -1,13 +1,8 @@
 // Url class for absolute and relative urls.
 
 const isAbsoluteUrl = (inputUrl: string) => {
-  try {
-    new URL(inputUrl);
-    return true;
-  } catch {
-    return false;
-  }
-}
+  return URL.canParse(inputUrl);
+};
 
 const LOCALHOST = "http://localhost";
 
@@ -29,13 +24,11 @@ class RequestUrl {
     this.url.searchParams.set(key, value);
   }
 
-  toString() {
-    if (this.isAbsolute) {
-      return this.url.href;
-    } else {
-      return this.url.href.slice(LOCALHOST.length);
-    }
+  value() {
+    return this.isAbsolute
+      ? this.url.href
+      : this.url.href.slice(LOCALHOST.length);
   }
 }
 
-export default RequestUrl;
+export default RequestUrl;

package/src/saveStateHandler.ts

@@ -1,11 +1,11 @@
 import type {
-    AddToSelection,
-    GetNodeById,
-    GetSelectedNodes,
-    GetTree,
-    OpenNode,
-    RefreshElements,
-    RemoveFromSelection,
+  AddToSelection,
+  GetNodeById,
+  GetSelectedNodes,
+  GetTree,
+  OpenNode,
+  RefreshElements,
+  RemoveFromSelection,
 } from "./methodTypes";
 import type { Node, NodeId } from "./node";
 import type { OnGetStateFromStorage, OnSetStateFromStorage } from "./options";
@@ -13,267 +13,251 @@ import type { OnGetStateFromStorage, OnSetStateFromStorage } from "./options";
 import { isInt } from "./util";
 
 export interface SavedState {
-    open_nodes?: NodeId[];
-    selected_node?: NodeId[];
+  open_nodes?: NodeId[];
+  selected_node?: NodeId[];
 }
 
 interface SaveStateHandlerParams {
-    addToSelection: AddToSelection;
-    getNodeById: GetNodeById;
-    getSelectedNodes: GetSelectedNodes;
-    getTree: GetTree;
-    onGetStateFromStorage?: OnGetStateFromStorage;
-    onSetStateFromStorage?: OnSetStateFromStorage;
-    openNode: OpenNode;
-    refreshElements: RefreshElements;
-    removeFromSelection: RemoveFromSelection;
-    saveState: boolean | string;
+  addToSelection: AddToSelection;
+  getNodeById: GetNodeById;
+  getSelectedNodes: GetSelectedNodes;
+  getTree: GetTree;
+  onGetStateFromStorage?: OnGetStateFromStorage;
+  onSetStateFromStorage?: OnSetStateFromStorage;
+  openNode: OpenNode;
+  refreshElements: RefreshElements;
+  removeFromSelection: RemoveFromSelection;
+  saveState: boolean | string;
 }
 
 export default class SaveStateHandler {
-    private addToSelection: AddToSelection;
-    private getNodeById: GetNodeById;
-    private getSelectedNodes: GetSelectedNodes;
-    private getTree: GetTree;
-    private onGetStateFromStorage?: OnGetStateFromStorage;
-    private onSetStateFromStorage?: OnSetStateFromStorage;
-    private openNode: OpenNode;
-    private refreshElements: RefreshElements;
-    private removeFromSelection: RemoveFromSelection;
-    private saveStateOption: boolean | string;
-
-    constructor({
-        addToSelection,
-        getNodeById,
-        getSelectedNodes,
-        getTree,
-        onGetStateFromStorage,
-        onSetStateFromStorage,
-        openNode,
-        refreshElements,
-        removeFromSelection,
-        saveState,
-    }: SaveStateHandlerParams) {
-        this.addToSelection = addToSelection;
-        this.getNodeById = getNodeById;
-        this.getSelectedNodes = getSelectedNodes;
-        this.getTree = getTree;
-        this.onGetStateFromStorage = onGetStateFromStorage;
-        this.onSetStateFromStorage = onSetStateFromStorage;
-        this.openNode = openNode;
-        this.refreshElements = refreshElements;
-        this.removeFromSelection = removeFromSelection;
-        this.saveStateOption = saveState;
+  private addToSelection: AddToSelection;
+  private getNodeById: GetNodeById;
+  private getSelectedNodes: GetSelectedNodes;
+  private getTree: GetTree;
+  private onGetStateFromStorage?: OnGetStateFromStorage;
+  private onSetStateFromStorage?: OnSetStateFromStorage;
+  private openNode: OpenNode;
+  private refreshElements: RefreshElements;
+  private removeFromSelection: RemoveFromSelection;
+  private saveStateOption: boolean | string;
+
+  constructor({
+    addToSelection,
+    getNodeById,
+    getSelectedNodes,
+    getTree,
+    onGetStateFromStorage,
+    onSetStateFromStorage,
+    openNode,
+    refreshElements,
+    removeFromSelection,
+    saveState,
+  }: SaveStateHandlerParams) {
+    this.addToSelection = addToSelection;
+    this.getNodeById = getNodeById;
+    this.getSelectedNodes = getSelectedNodes;
+    this.getTree = getTree;
+    this.onGetStateFromStorage = onGetStateFromStorage;
+    this.onSetStateFromStorage = onSetStateFromStorage;
+    this.openNode = openNode;
+    this.refreshElements = refreshElements;
+    this.removeFromSelection = removeFromSelection;
+    this.saveStateOption = saveState;
+  }
+
+  public getNodeIdToBeSelected(): NodeId | null {
+    if (!this.saveStateOption) {
+      return null;
     }
 
-    public getNodeIdToBeSelected(): NodeId | null {
-        if (!this.saveStateOption) {
-            return null;
-        }
+    const state = this.getStateFromStorage();
 
-        const state = this.getStateFromStorage();
+    return state?.selected_node ? (state.selected_node[0] ?? null) : null;
+  }
 
-        if (state?.selected_node) {
-            return state.selected_node[0] ?? null;
-        } else {
-            return null;
-        }
-    }
+  public getState(): SavedState {
+    const getOpenNodeIds = (): NodeId[] => {
+      const openNodes: NodeId[] = [];
 
-    public getState(): SavedState {
-        const getOpenNodeIds = (): NodeId[] => {
-            const openNodes: NodeId[] = [];
+      this.getTree()?.iterate((node: Node) => {
+        if (node.is_open && node.id && node.hasChildren()) {
+          openNodes.push(node.id);
+        }
+        return true;
+      });
 
-            this.getTree()?.iterate((node: Node) => {
-                if (node.is_open && node.id && node.hasChildren()) {
-                    openNodes.push(node.id);
-                }
-                return true;
-            });
+      return openNodes;
+    };
 
-            return openNodes;
-        };
+    const getSelectedNodeIds = (): NodeId[] => {
+      const selectedNodeIds: NodeId[] = [];
 
-        const getSelectedNodeIds = (): NodeId[] => {
-            const selectedNodeIds: NodeId[] = [];
+      for (const node of this.getSelectedNodes()) {
+        if (node.id != null) {
+          selectedNodeIds.push(node.id);
+        }
+      }
 
-            this.getSelectedNodes().forEach((node) => {
-                if (node.id != null) {
-                    selectedNodeIds.push(node.id);
-                }
-            });
+      return selectedNodeIds;
+    };
 
-            return selectedNodeIds;
-        };
+    return {
+      open_nodes: getOpenNodeIds(),
+      selected_node: getSelectedNodeIds(),
+    };
+  }
 
-        return {
-            open_nodes: getOpenNodeIds(),
-            selected_node: getSelectedNodeIds(),
-        };
+  public getStateFromStorage(): null | SavedState {
+    if (!this.saveStateOption) {
+      return null;
     }
 
-    public getStateFromStorage(): null | SavedState {
-        if (!this.saveStateOption) {
-            return null;
-        }
+    const jsonData = this.loadFromStorage();
 
-        const jsonData = this.loadFromStorage();
+    return jsonData ? this.parseState(jsonData) : null;
+  }
 
-        if (jsonData) {
-            return this.parseState(jsonData);
-        } else {
-            return null;
-        }
+  public saveState(): void {
+    if (!this.saveStateOption) {
+      return;
     }
 
-    public saveState(): void {
-        if (!this.saveStateOption) {
-            return;
-        }
+    const state = JSON.stringify(this.getState());
 
-        const state = JSON.stringify(this.getState());
-
-        if (this.onSetStateFromStorage) {
-            this.onSetStateFromStorage(state);
-        } else {
-            localStorage.setItem(this.getKeyName(), state);
-        }
+    if (this.onSetStateFromStorage) {
+      this.onSetStateFromStorage(state);
+    } else {
+      localStorage.setItem(this.getKeyName(), state);
     }
+  }
 
-    /*
+  /*
     Set initial state
     Don't handle nodes that are loaded on demand
 
     result: must load on demand (boolean)
     */
-    public setInitialState(state: SavedState): boolean {
-        let mustLoadOnDemand = false;
+  public setInitialState(state: SavedState): boolean {
+    const mustLoadOnDemand = state.open_nodes
+      ? this.openInitialNodes(state.open_nodes)
+      : false;
 
-        if (state.open_nodes) {
-            mustLoadOnDemand = this.openInitialNodes(state.open_nodes);
-        }
+    this.resetSelection();
 
-        this.resetSelection();
+    if (state.selected_node) {
+      this.selectInitialNodes(state.selected_node);
+    }
 
-        if (state.selected_node) {
-            this.selectInitialNodes(state.selected_node);
-        }
+    return mustLoadOnDemand;
+  }
 
-        return mustLoadOnDemand;
-    }
+  public async setInitialStateOnDemand(state: SavedState): Promise<void> {
+    let nodeIds = state.open_nodes;
 
-    public async setInitialStateOnDemand(
-        state: SavedState,
-    ): Promise<void> {
-        let nodeIds = state.open_nodes;
+    const openNodes = async () => {
+      if (!nodeIds) {
+        return;
+      }
 
-        const openNodes = async () => {
-            if (!nodeIds) {
-                return;
-            }
+      const newNodesIds = [];
+
+      for (const nodeId of nodeIds) {
+        const node = this.getNodeById(nodeId);
 
-            const newNodesIds = [];
-
-            for (const nodeId of nodeIds) {
-                const node = this.getNodeById(nodeId);
-
-                if (!node) {
-                    newNodesIds.push(nodeId);
-                } else {
-                    if (!node.is_loading) {
-                        if (node.load_on_demand) {
-                            await loadAndOpenNode(node);
-                        } else {
-                            await this.openNode(node, false);
-                        }
-                    }
-                }
+        if (node) {
+          if (!node.is_loading) {
+            if (node.load_on_demand) {
+              await loadAndOpenNode(node);
+            } else {
+              await this.openNode(node, false);
             }
+          }
+        } else {
+          newNodesIds.push(nodeId);
+        }
+      }
 
-            nodeIds = newNodesIds;
+      nodeIds = newNodesIds;
 
-            if (state.selected_node) {
-                if (this.selectInitialNodes(state.selected_node)) {
-                    this.refreshElements(null);
-                }
-            }
-        };
+      if (state.selected_node && this.selectInitialNodes(state.selected_node)) {
+        this.refreshElements(null);
+      }
+    };
 
-        const loadAndOpenNode = async (node: Node) => {
-            await this.openNode(node, false);
-            await openNodes();
-        };
+    const loadAndOpenNode = async (node: Node) => {
+      await this.openNode(node, false);
+      await openNodes();
+    };
 
-        await openNodes();
-    }
+    await openNodes();
+  }
 
-    private getKeyName(): string {
-        if (typeof this.saveStateOption === "string") {
-            return this.saveStateOption;
-        } else {
-            return "tree";
-        }
-    }
+  private getKeyName(): string {
+    return typeof this.saveStateOption === "string"
+      ? this.saveStateOption
+      : "tree";
+  }
 
-    private loadFromStorage(): null | string {
-        if (this.onGetStateFromStorage) {
-            return this.onGetStateFromStorage();
-        } else {
-            return localStorage.getItem(this.getKeyName());
-        }
-    }
+  private loadFromStorage(): null | string {
+    return this.onGetStateFromStorage
+      ? this.onGetStateFromStorage()
+      : localStorage.getItem(this.getKeyName());
+  }
 
-    private openInitialNodes(nodeIds: NodeId[]): boolean {
-        let mustLoadOnDemand = false;
+  private openInitialNodes(nodeIds: NodeId[]): boolean {
+    let mustLoadOnDemand = false;
 
-        for (const nodeId of nodeIds) {
-            const node = this.getNodeById(nodeId);
+    for (const nodeId of nodeIds) {
+      const node = this.getNodeById(nodeId);
 
-            if (node) {
-                if (!node.load_on_demand) {
-                    node.is_open = true;
-                } else {
-                    mustLoadOnDemand = true;
-                }
-            }
+      if (node) {
+        if (node.load_on_demand) {
+          mustLoadOnDemand = true;
+        } else {
+          node.is_open = true;
         }
-
-        return mustLoadOnDemand;
+      }
     }
 
-    private parseState(jsonData: string): SavedState {
-        const state = JSON.parse(jsonData) as Record<string, unknown>;
+    return mustLoadOnDemand;
+  }
 
-        // Check if selected_node is an int (instead of an array)
-        if (state.selected_node && isInt(state.selected_node)) {
-            // Convert to array
-            state.selected_node = [state.selected_node];
-        }
+  private parseState(jsonData: string): SavedState {
+    const state = JSON.parse(jsonData) as Record<string, unknown>;
 
-        return state;
+    // Check if selected_node is an int (instead of an array)
+    if (state.selected_node && isInt(state.selected_node)) {
+      // Convert to array
+      state.selected_node = [state.selected_node];
     }
 
-    private resetSelection(): void {
-        const selectedNodes = this.getSelectedNodes();
+    return state;
+  }
 
-        selectedNodes.forEach((node) => {
-            this.removeFromSelection(node);
-        });
+  private resetSelection(): void {
+    const selectedNodes = this.getSelectedNodes();
+
+    for (const node of selectedNodes) {
+      this.removeFromSelection(node);
     }
+  }
 
-    private selectInitialNodes(nodeIds: NodeId[]): boolean {
-        let selectCount = 0;
+  private selectInitialNodes(nodeIds: NodeId[]): boolean {
+    let selectCount = 0;
 
-        for (const nodeId of nodeIds) {
-            const node = this.getNodeById(nodeId);
+    for (const nodeId of nodeIds) {
+      const node = this.getNodeById(nodeId);
 
-            if (node) {
-                selectCount += 1;
+      if (!node) {
+        continue;
+      }
 
-                this.addToSelection(node);
-            }
-        }
+      selectCount += 1;
 
-        return selectCount !== 0;
+      this.addToSelection(node);
     }
+
+    return selectCount !== 0;
+  }
 }

package/src/scrollHandler/containerScrollParent.ts

@@ -1,71 +1,62 @@
 import type {
-    HorizontalScrollDirection,
-    VerticalScrollDirection,
+  HorizontalScrollDirection,
+  VerticalScrollDirection,
 } from "./scrollParent";
 
 import { getElementPosition, getOffsetTop } from "../positionUtils";
 import { ScrollParent } from "./scrollParent";
 
-
 export default class ContainerScrollParent extends ScrollParent {
-    private scrollParentBottom?: number;
-    private scrollParentTop?: number;
-
-    public stopScrolling() {
-        super.stopScrolling();
+  private scrollParentBottom?: number;
+  private scrollParentTop?: number;
 
-        this.horizontalScrollDirection = undefined;
-        this.verticalScrollDirection = undefined;
-    }
+  public stopScrolling() {
+    super.stopScrolling();
 
-    protected getNewHorizontalScrollDirection(
-        pageX: number,
-    ): HorizontalScrollDirection | undefined {
-        const scrollParentOffset = getElementPosition(this.container);
-        const containerWidth = this.container.getBoundingClientRect().width;
+    this.horizontalScrollDirection = undefined;
+    this.verticalScrollDirection = undefined;
+  }
 
-        const rightEdge = scrollParentOffset.left + containerWidth;
-        const leftEdge = scrollParentOffset.left;
-        const isNearRightEdge = pageX > rightEdge - 20;
-        const isNearLeftEdge = pageX < leftEdge + 20;
+  protected getNewHorizontalScrollDirection(
+    pageX: number,
+  ): HorizontalScrollDirection | undefined {
+    const scrollParentOffset = getElementPosition(this.container);
+    const containerWidth = this.container.getBoundingClientRect().width;
 
-        if (isNearRightEdge) {
-            return "right";
-        } else if (isNearLeftEdge) {
-            return "left";
-        }
+    const rightEdge = scrollParentOffset.left + containerWidth;
+    const leftEdge = scrollParentOffset.left;
+    const isNearRightEdge = pageX > rightEdge - 20;
 
-        return undefined;
+    if (isNearRightEdge) {
+      return "right";
     }
 
-    protected getNewVerticalScrollDirection(
-        pageY: number,
-    ): undefined | VerticalScrollDirection {
-        if (pageY < this.getScrollParentTop()) {
-            return "top";
-        }
+    const isNearLeftEdge = pageX < leftEdge + 20;
+    return isNearLeftEdge ? "left" : undefined;
+  }
 
-        if (pageY > this.getScrollParentBottom()) {
-            return "bottom";
-        }
-
-        return undefined;
+  protected getNewVerticalScrollDirection(
+    pageY: number,
+  ): undefined | VerticalScrollDirection {
+    if (pageY < this.getScrollParentTop()) {
+      return "top";
     }
 
-    private getScrollParentBottom() {
-        if (this.scrollParentBottom == null) {
-            const containerHeight =
-                this.container.getBoundingClientRect().height;
-            this.scrollParentBottom =
-                this.getScrollParentTop() + containerHeight;
-        }
+    return pageY > this.getScrollParentBottom() ? "bottom" : undefined;
+  }
 
-        return this.scrollParentBottom;
+  private getScrollParentBottom() {
+    if (this.scrollParentBottom == null) {
+      const containerHeight = this.container.getBoundingClientRect().height;
+      this.scrollParentBottom = this.getScrollParentTop() + containerHeight;
     }
 
-    private getScrollParentTop() {
-        this.scrollParentTop ??= getOffsetTop(this.container);
+    return this.scrollParentBottom;
+  }
 
-        return this.scrollParentTop;
-    }
+  private getScrollParentTop() {
+    this.scrollParentTop ??= getOffsetTop(this.container);
+
+    return this.scrollParentTop;
+  }
 }