tree-element 0.2.0 → 0.3.0

package/src/nodeElement/ghostDropHint.ts

@@ -20,13 +20,15 @@ class GhostDropHint implements DropHint {
     this.ghost = this.createGhostElement();
 
     switch (position) {
-      case "after":
+      case "after": {
         this.moveAfter();
         break;
+      }
 
-      case "before":
+      case "before": {
         this.moveBefore();
         break;
+      }
 
       case "inside": {
         if (node.isFolder() && node.is_open) {

package/src/nodeElement/index.ts

@@ -40,20 +40,9 @@ class NodeElement {
   }
 
   public addDropHint(position: Position): DropHint {
-    if (this.mustShowBorderDropHint(position)) {
-      return new BorderDropHint(
-        this.element,
-        this.getScrollLeft(),
-        this.classNames,
-      );
-    } else {
-      return new GhostDropHint(
-        this.node,
-        this.element,
-        position,
-        this.classNames,
-      );
-    }
+    return this.mustShowBorderDropHint(position)
+      ? new BorderDropHint(this.element, this.getScrollLeft(), this.classNames)
+      : new GhostDropHint(this.node, this.element, position, this.classNames);
   }
 
   public deselect(): void {
@@ -64,7 +53,12 @@ class NodeElement {
     this.element.classList.remove(this.classNames.selected);
 
     const titleSpan = this.getTitleSpan();
-    titleSpan.removeAttribute("tabindex");
+
+    // Check for null or undefined
+    if (this.tabIndex != null) {
+      titleSpan.setAttribute("tabindex", "-1");
+    }
+
     titleSpan.setAttribute("aria-selected", "false");
 
     titleSpan.blur();

package/src/nodeUtils.ts

@@ -9,4 +9,4 @@ export const isNodeRecordWithChildren = (
 ): data is NodeRecordWithChildren =>
   typeof data === "object" &&
   "children" in data &&
-  data.children instanceof Array;
+  Array.isArray(data.children);

package/src/options.ts

@@ -36,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.
@@ -129,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`
@@ -302,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,12 +1,7 @@
 // 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";
@@ -30,11 +25,9 @@ class RequestUrl {
   }
 
   value() {
-    if (this.isAbsolute) {
-      return this.url.href;
-    } else {
-      return this.url.href.slice(LOCALHOST.length);
-    }
+    return this.isAbsolute
+      ? this.url.href
+      : this.url.href.slice(LOCALHOST.length);
   }
 }
 

package/src/saveStateHandler.ts

@@ -73,11 +73,7 @@ export default class SaveStateHandler {
 
     const state = this.getStateFromStorage();
 
-    if (state?.selected_node) {
-      return state.selected_node[0] ?? null;
-    } else {
-      return null;
-    }
+    return state?.selected_node ? (state.selected_node[0] ?? null) : null;
   }
 
   public getState(): SavedState {
@@ -97,11 +93,11 @@ export default class SaveStateHandler {
     const getSelectedNodeIds = (): NodeId[] => {
       const selectedNodeIds: NodeId[] = [];
 
-      this.getSelectedNodes().forEach((node) => {
+      for (const node of this.getSelectedNodes()) {
         if (node.id != null) {
           selectedNodeIds.push(node.id);
         }
-      });
+      }
 
       return selectedNodeIds;
     };
@@ -119,11 +115,7 @@ export default class SaveStateHandler {
 
     const jsonData = this.loadFromStorage();
 
-    if (jsonData) {
-      return this.parseState(jsonData);
-    } else {
-      return null;
-    }
+    return jsonData ? this.parseState(jsonData) : null;
   }
 
   public saveState(): void {
@@ -147,11 +139,9 @@ export default class SaveStateHandler {
     result: must load on demand (boolean)
     */
   public setInitialState(state: SavedState): boolean {
-    let mustLoadOnDemand = false;
-
-    if (state.open_nodes) {
-      mustLoadOnDemand = this.openInitialNodes(state.open_nodes);
-    }
+    const mustLoadOnDemand = state.open_nodes
+      ? this.openInitialNodes(state.open_nodes)
+      : false;
 
     this.resetSelection();
 
@@ -175,9 +165,7 @@ export default class SaveStateHandler {
       for (const nodeId of nodeIds) {
         const node = this.getNodeById(nodeId);
 
-        if (!node) {
-          newNodesIds.push(nodeId);
-        } else {
+        if (node) {
           if (!node.is_loading) {
             if (node.load_on_demand) {
               await loadAndOpenNode(node);
@@ -185,15 +173,15 @@ export default class SaveStateHandler {
               await this.openNode(node, false);
             }
           }
+        } else {
+          newNodesIds.push(nodeId);
         }
       }
 
       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);
       }
     };
 
@@ -206,19 +194,15 @@ export default class SaveStateHandler {
   }
 
   private getKeyName(): string {
-    if (typeof this.saveStateOption === "string") {
-      return this.saveStateOption;
-    } else {
-      return "tree";
-    }
+    return typeof this.saveStateOption === "string"
+      ? this.saveStateOption
+      : "tree";
   }
 
   private loadFromStorage(): null | string {
-    if (this.onGetStateFromStorage) {
-      return this.onGetStateFromStorage();
-    } else {
-      return localStorage.getItem(this.getKeyName());
-    }
+    return this.onGetStateFromStorage
+      ? this.onGetStateFromStorage()
+      : localStorage.getItem(this.getKeyName());
   }
 
   private openInitialNodes(nodeIds: NodeId[]): boolean {
@@ -228,10 +212,10 @@ export default class SaveStateHandler {
       const node = this.getNodeById(nodeId);
 
       if (node) {
-        if (!node.load_on_demand) {
-          node.is_open = true;
-        } else {
+        if (node.load_on_demand) {
           mustLoadOnDemand = true;
+        } else {
+          node.is_open = true;
         }
       }
     }
@@ -254,9 +238,9 @@ export default class SaveStateHandler {
   private resetSelection(): void {
     const selectedNodes = this.getSelectedNodes();
 
-    selectedNodes.forEach((node) => {
+    for (const node of selectedNodes) {
       this.removeFromSelection(node);
-    });
+    }
   }
 
   private selectInitialNodes(nodeIds: NodeId[]): boolean {
@@ -265,11 +249,13 @@ export default class SaveStateHandler {
     for (const nodeId of nodeIds) {
       const node = this.getNodeById(nodeId);
 
-      if (node) {
-        selectCount += 1;
-
-        this.addToSelection(node);
+      if (!node) {
+        continue;
       }
+
+      selectCount += 1;
+
+      this.addToSelection(node);
     }
 
     return selectCount !== 0;

package/src/scrollHandler/containerScrollParent.ts

@@ -26,15 +26,13 @@ export default class ContainerScrollParent extends ScrollParent {
     const rightEdge = scrollParentOffset.left + containerWidth;
     const leftEdge = scrollParentOffset.left;
     const isNearRightEdge = pageX > rightEdge - 20;
-    const isNearLeftEdge = pageX < leftEdge + 20;
 
     if (isNearRightEdge) {
       return "right";
-    } else if (isNearLeftEdge) {
-      return "left";
     }
 
-    return undefined;
+    const isNearLeftEdge = pageX < leftEdge + 20;
+    return isNearLeftEdge ? "left" : undefined;
   }
 
   protected getNewVerticalScrollDirection(
@@ -44,11 +42,7 @@ export default class ContainerScrollParent extends ScrollParent {
       return "top";
     }
 
-    if (pageY > this.getScrollParentBottom()) {
-      return "bottom";
-    }
-
-    return undefined;
+    return pageY > this.getScrollParentBottom() ? "bottom" : undefined;
   }
 
   private getScrollParentBottom() {

package/src/scrollHandler/createScrollParent.ts

@@ -43,9 +43,8 @@ const createScrollParent = (
       container,
       refreshHitAreas,
     });
-  } else {
-    return new DocumentScrollParent({ refreshHitAreas, treeElement });
   }
+  return new DocumentScrollParent({ refreshHitAreas, treeElement });
 };
 
 export default createScrollParent;

package/src/scrollHandler/documentScrollParent.ts

@@ -42,17 +42,13 @@ export default class DocumentScrollParent extends ScrollParent {
     const windowWidth = window.innerWidth;
 
     const isNearRightEdge = pageX > windowWidth - 20;
-    const isNearLeftEdge = pageX - scrollLeft < 20;
 
     if (isNearRightEdge && this.canScrollRight()) {
       return "right";
     }
 
-    if (isNearLeftEdge) {
-      return "left";
-    }
-
-    return undefined;
+    const isNearLeftEdge = pageX - scrollLeft < 20;
+    return isNearLeftEdge ? "left" : undefined;
   }
 
   protected getNewVerticalScrollDirection(
@@ -67,11 +63,9 @@ export default class DocumentScrollParent extends ScrollParent {
 
     const windowHeight = window.innerHeight;
 
-    if (windowHeight - (pageY - scrollTop) < 20 && this.canScrollDown()) {
-      return "bottom";
-    }
-
-    return undefined;
+    return windowHeight - (pageY - scrollTop) < 20 && this.canScrollDown()
+      ? "bottom"
+      : undefined;
   }
 
   private canScrollDown() {

package/src/scrollHandler/scrollParent.ts

@@ -24,19 +24,21 @@ export abstract class ScrollParent {
     const newHorizontalScrollDirection =
       this.getNewHorizontalScrollDirection(pageX);
 
-    if (this.horizontalScrollDirection !== newHorizontalScrollDirection) {
-      this.horizontalScrollDirection = newHorizontalScrollDirection;
-
-      if (this.horizontalScrollTimeout != null) {
-        window.clearTimeout(this.horizontalScrollTimeout);
-      }
-
-      if (newHorizontalScrollDirection) {
-        this.horizontalScrollTimeout = window.setTimeout(
-          this.scrollHorizontally.bind(this),
-          40,
-        );
-      }
+    if (this.horizontalScrollDirection === newHorizontalScrollDirection) {
+      return;
+    }
+
+    this.horizontalScrollDirection = newHorizontalScrollDirection;
+
+    if (this.horizontalScrollTimeout != null) {
+      window.clearTimeout(this.horizontalScrollTimeout);
+    }
+
+    if (newHorizontalScrollDirection) {
+      this.horizontalScrollTimeout = window.setTimeout(
+        this.scrollHorizontally.bind(this),
+        40,
+      );
     }
   }
 
@@ -44,20 +46,22 @@ export abstract class ScrollParent {
     const newVerticalScrollDirection =
       this.getNewVerticalScrollDirection(pageY);
 
-    if (this.verticalScrollDirection !== newVerticalScrollDirection) {
-      this.verticalScrollDirection = newVerticalScrollDirection;
+    if (this.verticalScrollDirection === newVerticalScrollDirection) {
+      return;
+    }
 
-      if (this.verticalScrollTimeout != null) {
-        window.clearTimeout(this.verticalScrollTimeout);
-        this.verticalScrollTimeout = undefined;
-      }
+    this.verticalScrollDirection = newVerticalScrollDirection;
+
+    if (this.verticalScrollTimeout != null) {
+      window.clearTimeout(this.verticalScrollTimeout);
+      this.verticalScrollTimeout = undefined;
+    }
 
-      if (newVerticalScrollDirection) {
-        this.verticalScrollTimeout = window.setTimeout(
-          this.scrollVertically.bind(this),
-          40,
-        );
-      }
+    if (newVerticalScrollDirection) {
+      this.verticalScrollTimeout = window.setTimeout(
+        this.scrollVertically.bind(this),
+        40,
+      );
     }
   }
 

package/src/selectNodeHandler.ts

@@ -20,6 +20,7 @@ interface SelectNodeHandlerParameters {
   openParents: OpenParents;
   saveState: () => void;
   triggerEvent: TriggerEvent;
+  updateTabStop: () => void;
 }
 
 export default class SelectNodeHandler {
@@ -32,6 +33,7 @@ export default class SelectNodeHandler {
   private selectedNodes: Set<NodeId>;
   private selectedSingleNode: Node | null;
   private triggerEvent: TriggerEvent;
+  private updateTabStop: () => void;
 
   constructor({
     getNodeById,
@@ -41,6 +43,7 @@ export default class SelectNodeHandler {
     openParents,
     saveState,
     triggerEvent,
+    updateTabStop,
   }: SelectNodeHandlerParameters) {
     this.getNodeById = getNodeById;
     this.getNodeElementForNode = getNodeElementForNode;
@@ -51,13 +54,14 @@ export default class SelectNodeHandler {
     this.selectedNodes = new Set<NodeId>();
     this.selectedSingleNode = null;
     this.triggerEvent = triggerEvent;
+    this.updateTabStop = updateTabStop;
   }
 
   public addToSelection(node: Node): void {
-    if (node.id != null) {
-      this.selectedNodes.add(node.id);
-    } else {
+    if (node.id == null) {
       this.selectedSingleNode = node;
+    } else {
+      this.selectedNodes.add(node.id);
     }
   }
 
@@ -69,59 +73,50 @@ export default class SelectNodeHandler {
   public getSelectedNode(): Node | null {
     const selectedNodes = this.getSelectedNodes();
 
-    if (selectedNodes.length) {
-      return selectedNodes[0] ?? null;
-    } else {
-      return null;
-    }
+    return selectedNodes.length ? (selectedNodes[0] ?? null) : null;
   }
 
   public getSelectedNodes(): Node[] {
     if (this.selectedSingleNode) {
       return [this.selectedSingleNode];
-    } else {
-      const selectedNodes: Node[] = [];
+    }
 
-      this.selectedNodes.forEach((id) => {
-        const node = this.getNodeById(id);
-        if (node) {
-          selectedNodes.push(node);
-        }
-      });
+    const selectedNodes: Node[] = [];
 
-      return selectedNodes;
-    }
+    this.selectedNodes.forEach((id) => {
+      const node = this.getNodeById(id);
+      if (node) {
+        selectedNodes.push(node);
+      }
+    });
+
+    return selectedNodes;
   }
 
   public getSelectedNodesUnder(parent: Node): Node[] {
     if (this.selectedSingleNode) {
-      if (parent.isParentOf(this.selectedSingleNode)) {
-        return [this.selectedSingleNode];
-      } else {
-        return [];
-      }
-    } else {
-      const selectedNodes: Node[] = [];
+      return parent.isParentOf(this.selectedSingleNode)
+        ? [this.selectedSingleNode]
+        : [];
+    }
 
-      this.selectedNodes.forEach((id) => {
-        const node = this.getNodeById(id);
-        if (node && parent.isParentOf(node)) {
-          selectedNodes.push(node);
-        }
-      });
+    const selectedNodes: Node[] = [];
 
-      return selectedNodes;
-    }
+    this.selectedNodes.forEach((id) => {
+      const node = this.getNodeById(id);
+      if (node && parent.isParentOf(node)) {
+        selectedNodes.push(node);
+      }
+    });
+
+    return selectedNodes;
   }
 
   public isNodeSelected(node: Node): boolean {
     if (node.id != null) {
       return this.selectedNodes.has(node.id);
-    } else if (this.selectedSingleNode) {
-      return this.selectedSingleNode === node;
-    } else {
-      return false;
     }
+    return this.selectedSingleNode ? this.selectedSingleNode === node : false;
   }
 
   public removeFromSelection(node: Node, includeChildren = false): void {
@@ -155,7 +150,7 @@ export default class SelectNodeHandler {
    */
   public selectSingleNode(node: Node, optionsParam?: SelectNodeOptions) {
     const defaultOptions = { mustSetFocus: true, mustToggle: true };
-    const selectOptions = { ...defaultOptions, ...(optionsParam ?? {}) };
+    const selectOptions = { ...defaultOptions, ...optionsParam };
 
     const canSelect = (): boolean => {
       if (!this.getSelectable()) {
@@ -197,6 +192,7 @@ export default class SelectNodeHandler {
       });
     }
 
+    this.updateTabStop();
     this.saveState();
   }
 }

package/src/setDefaultOptions.ts

@@ -1,3 +1,4 @@
+import type { AnimationSpeed } from "./animation";
 import type { TreeElementOptions } from "./options";
 
 import { DEFAULT_CLASS_PREFIX } from "./classNames";
@@ -10,7 +11,7 @@ const defaults: TreeElementOptions = {
   buttonLeft: true,
   classPrefix: DEFAULT_CLASS_PREFIX, // the prefix of all css classes
   // The symbol to use for a closed node - ► BLACK RIGHT-POINTING POINTER
-  // http://www.fileformat.info/info/unicode/char/25ba/index.htm
+  // https://www.fileformat.info/info/unicode/char/25ba/index.htm
   // closedIcon: undefined,
   // commonClassName: undefined, // the class of every element; the default is "<classPrefix>-common"
   // data: undefined,
@@ -31,7 +32,7 @@ const defaults: TreeElementOptions = {
   // openedIcon: undefined,
   openFolderDelay: 500, // The delay for opening a folder during drag and drop; the value is in milliseconds
   // The symbol to use for an open node - ▼ BLACK DOWN-POINTING TRIANGLE
-  // http://www.fileformat.info/info/unicode/char/25bc/index.htm
+  // https://www.fileformat.info/info/unicode/char/25bc/index.htm
   // rtl: undefined, // right-to-left support; true / false (default)
   saveState: false, // true / false / string (local storage key; the default key is "tree")
   selectable: true,
@@ -47,7 +48,11 @@ const setDefaultOptions = (
   htmlElement: HTMLElement,
   inputOptions: Partial<TreeElementOptions>,
 ): TreeElementOptions => {
-  const options = { ...defaults, ...inputOptions };
+  const options = {
+    ...defaults,
+    ...inputOptions,
+    animationSpeed: inputOptions.animationSpeed ?? getDefaultAnimationSpeed(),
+  };
 
   options.dataUrl ??= htmlElement.dataset.url;
   options.rtl ??= getRtlOptionFromHTMLElement(htmlElement);
@@ -57,14 +62,21 @@ const setDefaultOptions = (
   return options;
 };
 
+// No animation when the user asked the system for reduced motion
+const getDefaultAnimationSpeed = (): AnimationSpeed =>
+  prefersReducedMotion() ? 0 : defaults.animationSpeed;
+
+const prefersReducedMotion = (): boolean =>
+  typeof window.matchMedia === "function" &&
+  window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
 const getDefaultClosedIcon = (options: TreeElementOptions): string => {
   if (options.rtl) {
     // triangle to the left
     return "&#x25c0;";
-  } else {
-    // triangle to the right
-    return "&#x25ba;";
   }
+  // triangle to the right
+  return "&#x25ba;";
 };
 
 const getRtlOptionFromHTMLElement = (htmlElement: HTMLElement): boolean => {
@@ -72,11 +84,8 @@ const getRtlOptionFromHTMLElement = (htmlElement: HTMLElement): boolean => {
 
   if (dataRtl == "") {
     return true;
-  } else if (dataRtl === "false") {
-    return false;
-  } else {
-    return Boolean(dataRtl);
   }
+  return dataRtl === "false" ? false : Boolean(dataRtl);
 };
 
 export default setDefaultOptions;

package/src/util.ts

@@ -1,5 +1,4 @@
-export const isInt = (n: unknown): boolean =>
-  typeof n === "number" && n % 1 === 0;
+export const isInt = (n: unknown): boolean => Number.isInteger(n);
 
 export const getBoolString = (value: unknown): string =>
   value ? "true" : "false";

package/src/version.ts

@@ -1,4 +1,4 @@
 // Generated by config/generateVersion.mjs. Do not edit.
-const version = "0.2.0";
+const version = "0.3.0";
 
 export default version;