@react-aria/utils 3.27.0 → 3.28.0

package/src/shadowdom/ShadowTreeWalker.ts

@@ -0,0 +1,319 @@
+// https://github.com/microsoft/tabster/blob/a89fc5d7e332d48f68d03b1ca6e344489d1c3898/src/Shadowdomize/ShadowTreeWalker.ts
+
+import {nodeContains} from './DOMFunctions';
+import {shadowDOM} from '@react-stately/flags';
+
+export class ShadowTreeWalker implements TreeWalker {
+  public readonly filter: NodeFilter | null;
+  public readonly root: Node;
+  public readonly whatToShow: number;
+
+  private _doc: Document;
+  private _walkerStack: Array<TreeWalker> = [];
+  private _currentNode: Node;
+  private _currentSetFor: Set<TreeWalker> = new Set();
+
+  constructor(
+      doc: Document,
+      root: Node,
+      whatToShow?: number,
+      filter?: NodeFilter | null
+    ) {
+    this._doc = doc;
+    this.root = root;
+    this.filter = filter ?? null;
+    this.whatToShow = whatToShow ?? NodeFilter.SHOW_ALL;
+    this._currentNode = root;
+
+    this._walkerStack.unshift(
+      doc.createTreeWalker(root, whatToShow, this._acceptNode)
+    );
+
+    const shadowRoot = (root as Element).shadowRoot;
+
+    if (shadowRoot) {
+      const walker = this._doc.createTreeWalker(
+        shadowRoot,
+        this.whatToShow,
+        {acceptNode: this._acceptNode}
+      );
+
+      this._walkerStack.unshift(walker);
+    }
+  }
+
+  private _acceptNode = (node: Node): number => {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const shadowRoot = (node as Element).shadowRoot;
+
+      if (shadowRoot) {
+        const walker = this._doc.createTreeWalker(
+          shadowRoot,
+          this.whatToShow,
+          {acceptNode: this._acceptNode}
+        );
+
+        this._walkerStack.unshift(walker);
+
+        return NodeFilter.FILTER_ACCEPT;
+      } else {
+        if (typeof this.filter === 'function') {
+          return this.filter(node);
+        } else if (this.filter?.acceptNode) {
+          return this.filter.acceptNode(node);
+        } else if (this.filter === null) {
+          return NodeFilter.FILTER_ACCEPT;
+        }
+      }
+    }
+
+    return NodeFilter.FILTER_SKIP;
+  };
+
+  public get currentNode(): Node {
+    return this._currentNode;
+  }
+
+  public set currentNode(node: Node) {
+    if (!nodeContains(this.root, node)) {
+      throw new Error(
+        'Cannot set currentNode to a node that is not contained by the root node.'
+      );
+    }
+
+    const walkers: TreeWalker[] = [];
+    let curNode: Node | null | undefined = node;
+    let currentWalkerCurrentNode = node;
+
+    this._currentNode = node;
+
+    while (curNode && curNode !== this.root) {
+      if (curNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+        const shadowRoot = curNode as ShadowRoot;
+
+        const walker = this._doc.createTreeWalker(
+          shadowRoot,
+          this.whatToShow,
+          {acceptNode: this._acceptNode}
+        );
+
+        walkers.push(walker);
+
+        walker.currentNode = currentWalkerCurrentNode;
+
+        this._currentSetFor.add(walker);
+
+        curNode = currentWalkerCurrentNode = shadowRoot.host;
+      } else {
+        curNode = curNode.parentNode;
+      }
+    }
+
+    const walker = this._doc.createTreeWalker(
+      this.root,
+      this.whatToShow,
+      {acceptNode: this._acceptNode}
+    );
+
+    walkers.push(walker);
+
+    walker.currentNode = currentWalkerCurrentNode;
+
+    this._currentSetFor.add(walker);
+
+    this._walkerStack = walkers;
+  }
+
+  public get doc(): Document {
+    return this._doc;
+  }
+
+  public firstChild(): Node | null {
+    let currentNode = this.currentNode;
+    let newNode = this.nextNode();
+    if (!nodeContains(currentNode, newNode)) {
+      this.currentNode = currentNode;
+      return null;
+    }
+    if (newNode) {
+      this.currentNode = newNode;
+    }
+    return newNode;
+  }
+
+  public lastChild(): Node | null {
+    let walker = this._walkerStack[0];
+    let newNode = walker.lastChild();
+    if (newNode) {
+      this.currentNode = newNode;
+    }
+    return newNode;
+  }
+
+  public nextNode(): Node | null {
+    const nextNode = this._walkerStack[0].nextNode();
+
+    if (nextNode) {
+      const shadowRoot = (nextNode as Element).shadowRoot;
+
+      if (shadowRoot) {
+        let nodeResult: number | undefined;
+
+        if (typeof this.filter === 'function') {
+          nodeResult = this.filter(nextNode);
+        } else if (this.filter?.acceptNode) {
+          nodeResult = this.filter.acceptNode(nextNode);
+        }
+
+        if (nodeResult === NodeFilter.FILTER_ACCEPT) {
+          this.currentNode = nextNode;
+          return nextNode;
+        }
+
+        // _acceptNode should have added new walker for this shadow,
+        // go in recursively.
+        let newNode = this.nextNode();
+        if (newNode) {
+          this.currentNode = newNode;
+        }
+        return newNode;
+      }
+
+      if (nextNode) {
+        this.currentNode = nextNode;
+      }
+      return nextNode;
+    } else {
+      if (this._walkerStack.length > 1) {
+        this._walkerStack.shift();
+
+        let newNode = this.nextNode();
+        if (newNode) {
+          this.currentNode = newNode;
+        }
+        return newNode;
+      } else {
+        return null;
+      }
+    }
+  }
+
+  public previousNode(): Node | null {
+    const currentWalker = this._walkerStack[0];
+
+    if (currentWalker.currentNode === currentWalker.root) {
+      if (this._currentSetFor.has(currentWalker)) {
+        this._currentSetFor.delete(currentWalker);
+
+        if (this._walkerStack.length > 1) {
+          this._walkerStack.shift();
+          let newNode = this.previousNode();
+          if (newNode) {
+            this.currentNode = newNode;
+          }
+          return newNode;
+        } else {
+          return null;
+        }
+      }
+
+      return null;
+    }
+
+    const previousNode = currentWalker.previousNode();
+
+    if (previousNode) {
+      const shadowRoot = (previousNode as Element).shadowRoot;
+
+      if (shadowRoot) {
+        let nodeResult: number | undefined;
+
+        if (typeof this.filter === 'function') {
+          nodeResult = this.filter(previousNode);
+        } else if (this.filter?.acceptNode) {
+          nodeResult = this.filter.acceptNode(previousNode);
+        }
+
+        if (nodeResult === NodeFilter.FILTER_ACCEPT) {
+          if (previousNode) {
+            this.currentNode = previousNode;
+          }
+          return previousNode;
+        }
+
+        // _acceptNode should have added new walker for this shadow,
+        // go in recursively.
+        let newNode = this.lastChild();
+        if (newNode) {
+          this.currentNode = newNode;
+        }
+        return newNode;
+      }
+
+      if (previousNode) {
+        this.currentNode = previousNode;
+      }
+      return previousNode;
+    } else {
+      if (this._walkerStack.length > 1) {
+        this._walkerStack.shift();
+
+        let newNode = this.previousNode();
+        if (newNode) {
+          this.currentNode = newNode;
+        }
+        return newNode;
+      } else {
+        return null;
+      }
+    }
+  }
+
+    /**
+     * @deprecated
+     */
+  public nextSibling(): Node | null {
+    // if (__DEV__) {
+    //     throw new Error("Method not implemented.");
+    // }
+
+    return null;
+  }
+
+    /**
+     * @deprecated
+     */
+  public previousSibling(): Node | null {
+    // if (__DEV__) {
+    //     throw new Error("Method not implemented.");
+    // }
+
+    return null;
+  }
+
+    /**
+     * @deprecated
+     */
+  public parentNode(): Node | null {
+    // if (__DEV__) {
+    //     throw new Error("Method not implemented.");
+    // }
+
+    return null;
+  }
+}
+
+/**
+ * ShadowDOM safe version of document.createTreeWalker.
+ */
+export function createShadowTreeWalker(
+    doc: Document,
+    root: Node,
+    whatToShow?: number,
+    filter?: NodeFilter | null
+) {
+  if (shadowDOM()) {
+    return new ShadowTreeWalker(doc, root, whatToShow, filter);
+  }
+  return doc.createTreeWalker(root, whatToShow, filter);
+}

package/src/useGlobalListeners.ts

@@ -13,6 +13,7 @@
 import {useCallback, useEffect, useRef} from 'react';
 
 interface GlobalListeners {
+  addGlobalListener<K extends keyof WindowEventMap>(el: Window, type: K, listener: (this: Document, ev: WindowEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void,
   addGlobalListener<K extends keyof DocumentEventMap>(el: EventTarget, type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void,
   addGlobalListener(el: EventTarget, type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void,
   removeGlobalListener<K extends keyof DocumentEventMap>(el: EventTarget, type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void,

package/src/useId.ts

@@ -22,7 +22,13 @@ let canUseDOM = Boolean(
   window.document.createElement
 );
 
-let idsUpdaterMap: Map<string, Array<(v: string) => void>> = new Map();
+export let idsUpdaterMap: Map<string, { current: string | null }[]> = new Map();
+// This allows us to clean up the idsUpdaterMap when the id is no longer used.
+// Map is a strong reference, so unused ids wouldn't be cleaned up otherwise.
+// This can happen in suspended components where mount/unmount is not called.
+let registry = new FinalizationRegistry<string>((heldValue) => {
+  idsUpdaterMap.delete(heldValue);
+});
 
 /**
  * If a default is not provided, generate an id.
@@ -33,35 +39,38 @@ export function useId(defaultId?: string): string {
   let nextId = useRef(null);
 
   let res = useSSRSafeId(value);
+  let cleanupRef = useRef(null);
 
-  let updateValue = useCallback((val) => {
-    nextId.current = val;
-  }, []);
+  registry.register(cleanupRef, res);
 
   if (canUseDOM) {
-    // TS not smart enough to know that `has` means the value exists
-    if (idsUpdaterMap.has(res) && !idsUpdaterMap.get(res)!.includes(updateValue)) {
-      idsUpdaterMap.set(res, [...idsUpdaterMap.get(res)!, updateValue]);
+    const cacheIdRef = idsUpdaterMap.get(res);
+    if (cacheIdRef && !cacheIdRef.includes(nextId)) {
+      cacheIdRef.push(nextId);
     } else {
-      idsUpdaterMap.set(res, [updateValue]);
+      idsUpdaterMap.set(res, [nextId]);
     }
   }
 
   useLayoutEffect(() => {
     let r = res;
     return () => {
+      // In Suspense, the cleanup function may be not called
+      // when it is though, also remove it from the finalization registry.
+      registry.unregister(cleanupRef);
       idsUpdaterMap.delete(r);
     };
   }, [res]);
 
-  // This cannot cause an infinite loop because the ref is updated first.
+  // This cannot cause an infinite loop because the ref is always cleaned up.
   // eslint-disable-next-line
   useEffect(() => {
     let newId = nextId.current;
-    if (newId) {
-      nextId.current = null;
-      setValue(newId);
-    }
+    if (newId) { setValue(newId); }
+
+    return () => {
+      if (newId) { nextId.current = null; }
+    };
   });
 
   return res;
@@ -78,13 +87,13 @@ export function mergeIds(idA: string, idB: string): string {
 
   let setIdsA = idsUpdaterMap.get(idA);
   if (setIdsA) {
-    setIdsA.forEach(fn => fn(idB));
+    setIdsA.forEach(ref => (ref.current = idB));
     return idB;
   }
 
   let setIdsB = idsUpdaterMap.get(idB);
   if (setIdsB) {
-    setIdsB.forEach(fn => fn(idA));
+    setIdsB.forEach((ref) => (ref.current = idA));
     return idA;
   }
 

package/src/useUpdateEffect.ts

@@ -13,7 +13,7 @@
 import {EffectCallback, useEffect, useRef} from 'react';
 
 // Like useEffect, but only called for updates after the initial render.
-export function useUpdateEffect(effect: EffectCallback, dependencies: any[]) {
+export function useUpdateEffect(effect: EffectCallback, dependencies: any[]): void {
   const isInitialMount = useRef(true);
   const lastDeps = useRef<any[] | null>(null);
 
@@ -25,9 +25,10 @@ export function useUpdateEffect(effect: EffectCallback, dependencies: any[]) {
   }, []);
 
   useEffect(() => {
+    let prevDeps = lastDeps.current;
     if (isInitialMount.current) {
       isInitialMount.current = false;
-    } else if (!lastDeps.current || dependencies.some((dep, i) => !Object.is(dep, lastDeps[i]))) {
+    } else if (!prevDeps || dependencies.some((dep, i) => !Object.is(dep, prevDeps[i]))) {
       effect();
     }
     lastDeps.current = dependencies;