@react-aria/utils 3.26.0 → 3.28.0

package/src/isFocusable.ts

@@ -0,0 +1,28 @@
+const focusableElements = [
+  'input:not([disabled]):not([type=hidden])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  'button:not([disabled])',
+  'a[href]',
+  'area[href]',
+  'summary',
+  'iframe',
+  'object',
+  'embed',
+  'audio[controls]',
+  'video[controls]',
+  '[contenteditable]:not([contenteditable^="false"])'
+];
+
+const FOCUSABLE_ELEMENT_SELECTOR = focusableElements.join(':not([hidden]),') + ',[tabindex]:not([disabled]):not([hidden])';
+
+focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
+const TABBABLE_ELEMENT_SELECTOR = focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
+
+export function isFocusable(element: Element) {
+  return element.matches(FOCUSABLE_ELEMENT_SELECTOR);
+}
+
+export function isTabbable(element: Element) {
+  return element.matches(TABBABLE_ELEMENT_SELECTOR);
+}

package/src/keyboard.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {isMac} from './platform';
+
+interface Event {
+  altKey: boolean,
+  ctrlKey: boolean,
+  metaKey: boolean
+}
+
+export function isCtrlKeyPressed(e: Event) {
+  if (isMac()) {
+    return e.metaKey;
+  }
+
+  return e.ctrlKey;
+}

package/src/mergeProps.ts

@@ -23,7 +23,7 @@ type PropsArg = Props | null | undefined;
 // taken from: https://stackoverflow.com/questions/51603250/typescript-3-parameter-list-intersection-type/51604379#51604379
 type TupleTypes<T> = { [P in keyof T]: T[P] } extends { [key: number]: infer V } ? NullToObject<V> : never;
 type NullToObject<T> = T extends (null | undefined) ? {} : T;
- 
+
 type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;
 
 /**

package/src/scrollIntoView.ts

@@ -30,24 +30,40 @@ export function scrollIntoView(scrollView: HTMLElement, element: HTMLElement) {
   let x = scrollView.scrollLeft;
   let y = scrollView.scrollTop;
 
-  // Account for top/left border offsetting the scroll top/Left
-  let {borderTopWidth, borderLeftWidth} = getComputedStyle(scrollView);
-  let borderAdjustedX = scrollView.scrollLeft + parseInt(borderLeftWidth, 10);
-  let borderAdjustedY = scrollView.scrollTop + parseInt(borderTopWidth, 10);
+  // Account for top/left border offsetting the scroll top/Left + scroll padding
+  let {
+    borderTopWidth,
+    borderLeftWidth,
+    scrollPaddingTop,
+    scrollPaddingRight,
+    scrollPaddingBottom,
+    scrollPaddingLeft
+  } = getComputedStyle(scrollView);
+
+  let borderAdjustedX = x + parseInt(borderLeftWidth, 10);
+  let borderAdjustedY = y + parseInt(borderTopWidth, 10);
   // Ignore end/bottom border via clientHeight/Width instead of offsetHeight/Width
   let maxX = borderAdjustedX + scrollView.clientWidth;
   let maxY = borderAdjustedY + scrollView.clientHeight;
 
-  if (offsetX <= x) {
-    x = offsetX - parseInt(borderLeftWidth, 10);
-  } else if (offsetX + width > maxX) {
-    x += offsetX + width - maxX;
+  // Get scroll padding values as pixels - defaults to 0 if no scroll padding
+  // is used.
+  let scrollPaddingTopNumber = parseInt(scrollPaddingTop, 10) || 0;
+  let scrollPaddingBottomNumber = parseInt(scrollPaddingBottom, 10) || 0;
+  let scrollPaddingRightNumber = parseInt(scrollPaddingRight, 10) || 0;
+  let scrollPaddingLeftNumber = parseInt(scrollPaddingLeft, 10) || 0;
+
+  if (offsetX <= x + scrollPaddingLeftNumber) {
+    x = offsetX - parseInt(borderLeftWidth, 10) - scrollPaddingLeftNumber;
+  } else if (offsetX + width > maxX - scrollPaddingRightNumber) {
+    x += offsetX + width - maxX + scrollPaddingRightNumber;
   }
-  if (offsetY <= borderAdjustedY) {
-    y = offsetY - parseInt(borderTopWidth, 10);
-  } else if (offsetY + height > maxY) {
-    y += offsetY + height - maxY;
+  if (offsetY <= borderAdjustedY + scrollPaddingTopNumber) {
+    y = offsetY - parseInt(borderTopWidth, 10) - scrollPaddingTopNumber;
+  } else if (offsetY + height > maxY - scrollPaddingBottomNumber) {
+    y += offsetY + height - maxY + scrollPaddingBottomNumber;
   }
+
   scrollView.scrollLeft = x;
   scrollView.scrollTop = y;
 }

package/src/shadowdom/DOMFunctions.ts

@@ -0,0 +1,70 @@
+// Source: https://github.com/microsoft/tabster/blob/a89fc5d7e332d48f68d03b1ca6e344489d1c3898/src/Shadowdomize/DOMFunctions.ts#L16
+
+import {isShadowRoot} from '../domHelpers';
+import {shadowDOM} from '@react-stately/flags';
+
+/**
+ * ShadowDOM safe version of Node.contains.
+ */
+export function nodeContains(
+  node: Node | null | undefined,
+  otherNode: Node | null | undefined
+): boolean {
+  if (!shadowDOM()) {
+    return otherNode && node ? node.contains(otherNode) : false;
+  }
+
+  if (!node || !otherNode) {
+    return false;
+  }
+
+  let currentNode: HTMLElement | Node | null | undefined = otherNode;
+
+  while (currentNode !== null) {
+    if (currentNode === node) {
+      return true;
+    }
+
+    if ((currentNode as HTMLSlotElement).tagName === 'SLOT' &&
+      (currentNode as HTMLSlotElement).assignedSlot) {
+      // Element is slotted
+      currentNode = (currentNode as HTMLSlotElement).assignedSlot!.parentNode;
+    } else if (isShadowRoot(currentNode)) {
+      // Element is in shadow root
+      currentNode = currentNode.host;
+    } else {
+      currentNode = currentNode.parentNode;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * ShadowDOM safe version of document.activeElement.
+ */
+export const getActiveElement = (doc: Document = document) => {
+  if (!shadowDOM()) {
+    return doc.activeElement;
+  }
+  let activeElement: Element | null = doc.activeElement;
+
+  while (activeElement && 'shadowRoot' in activeElement &&
+  activeElement.shadowRoot?.activeElement) {
+    activeElement = activeElement.shadowRoot.activeElement;
+  }
+
+  return activeElement;
+};
+
+/**
+ * ShadowDOM safe version of event.target.
+ */
+export function getEventTarget(event): Element {
+  if (shadowDOM() && event.target.shadowRoot) {
+    if (event.composedPath) {
+      return event.composedPath()[0];
+    }
+  }
+  return event.target;
+}

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,
@@ -29,7 +30,7 @@ export function useGlobalListeners(): GlobalListeners {
       listener(...args);
     } : listener;
     globalListeners.current.set(listener, {type, eventTarget, fn, options});
-    eventTarget.addEventListener(type, listener, options);
+    eventTarget.addEventListener(type, fn, options);
   }, []);
   let removeGlobalListener = useCallback((eventTarget, type, listener, options) => {
     let fn = globalListeners.current.get(listener)?.fn || listener;

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;

package/src/useUpdateLayoutEffect.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {EffectCallback, useRef} from 'react';
+import {useLayoutEffect} from './useLayoutEffect';
+
+// Like useLayoutEffect, but only called for updates after the initial render.
+export function useUpdateLayoutEffect(effect: EffectCallback, dependencies: any[]) {
+  const isInitialMount = useRef(true);
+  const lastDeps = useRef<any[] | null>(null);
+
+  useLayoutEffect(() => {
+    isInitialMount.current = true;
+    return () => {
+      isInitialMount.current = false;
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+    } else if (!lastDeps.current || dependencies.some((dep, i) => !Object.is(dep, lastDeps[i]))) {
+      effect();
+    }
+    lastDeps.current = dependencies;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, dependencies);
+}