@react-aria/utils 3.32.0 → 3.33.1

package/src/runAfterTransition.ts

@@ -16,6 +16,7 @@
 // bugs, e.g. Chrome sometimes fires both transitionend and transitioncancel rather
 // than one or the other. So we need to track what's actually transitioning so that
 // we can ignore these duplicate events.
+import {getEventTarget} from './shadowdom/DOMFunctions';
 let transitionsByElement = new Map<EventTarget, Set<string>>();
 
 // A list of callbacks to call once there are no transitioning elements.
@@ -31,19 +32,20 @@ function setupGlobalEvents() {
   }
 
   let onTransitionStart = (e: Event) => {
-    if (!isTransitionEvent(e) || !e.target) {
+    let eventTarget = getEventTarget(e);
+    if (!isTransitionEvent(e) || !eventTarget) {
       return;
     }
     // Add the transitioning property to the list for this element.
-    let transitions = transitionsByElement.get(e.target);
+    let transitions = transitionsByElement.get(eventTarget);
     if (!transitions) {
       transitions = new Set();
-      transitionsByElement.set(e.target, transitions);
+      transitionsByElement.set(eventTarget, transitions);
 
       // The transitioncancel event must be registered on the element itself, rather than as a global
       // event. This enables us to handle when the node is deleted from the document while it is transitioning.
       // In that case, the cancel event would have nowhere to bubble to so we need to handle it directly.
-      e.target.addEventListener('transitioncancel', onTransitionEnd, {
+      eventTarget.addEventListener('transitioncancel', onTransitionEnd, {
         once: true
       });
     }
@@ -52,11 +54,12 @@ function setupGlobalEvents() {
   };
 
   let onTransitionEnd = (e: Event) => {
-    if (!isTransitionEvent(e) || !e.target) {
+    let eventTarget = getEventTarget(e);
+    if (!isTransitionEvent(e) || !eventTarget) {
       return;
     }
     // Remove property from list of transitioning properties.
-    let properties = transitionsByElement.get(e.target);
+    let properties = transitionsByElement.get(eventTarget);
     if (!properties) {
       return;
     }
@@ -65,8 +68,8 @@ function setupGlobalEvents() {
 
     // If empty, remove transitioncancel event, and remove the element from the list of transitioning elements.
     if (properties.size === 0) {
-      e.target.removeEventListener('transitioncancel', onTransitionEnd);
-      transitionsByElement.delete(e.target);
+      eventTarget.removeEventListener('transitioncancel', onTransitionEnd);
+      transitionsByElement.delete(eventTarget);
     }
 
     // If no transitioning elements, call all of the queued callbacks.

package/src/scrollIntoView.ts

@@ -11,6 +11,15 @@
  */
 
 import {getScrollParents} from './getScrollParents';
+import {isChrome, isIOS} from './platform';
+
+interface ScrollIntoViewOpts {
+  /** The position to align items along the block axis in. */
+  block?: ScrollLogicalPosition,
+  /** The position to align items along the inline axis in. */
+  inline?: ScrollLogicalPosition
+}
+
 
 interface ScrollIntoViewportOpts {
   /** The optional containing element of the target to be centered in the viewport. */
@@ -22,74 +31,96 @@ interface ScrollIntoViewportOpts {
  * Similar to `element.scrollIntoView({block: 'nearest'})` (not supported in Edge),
  * but doesn't affect parents above `scrollView`.
  */
-export function scrollIntoView(scrollView: HTMLElement, element: HTMLElement): void {
-  let offsetX = relativeOffset(scrollView, element, 'left');
-  let offsetY = relativeOffset(scrollView, element, 'top');
-  let width = element.offsetWidth;
-  let height = element.offsetHeight;
-  let x = scrollView.scrollLeft;
+export function scrollIntoView(scrollView: HTMLElement, element: HTMLElement, opts: ScrollIntoViewOpts = {}): void {
+  let {block = 'nearest', inline = 'nearest'} = opts;
+
+  if (scrollView === element) { return; }
+
   let y = scrollView.scrollTop;
+  let x = scrollView.scrollLeft;
+
+  let target = element.getBoundingClientRect();
+  let view = scrollView.getBoundingClientRect();
+  let itemStyle = window.getComputedStyle(element);
+  let viewStyle = window.getComputedStyle(scrollView);
+  let root = document.scrollingElement || document.documentElement;
+
+  let viewTop = scrollView === root ? 0 : view.top;
+  let viewBottom = scrollView === root ? scrollView.clientHeight : view.bottom;
+  let viewLeft = scrollView === root ? 0 : view.left;
+  let viewRight = scrollView === root ? scrollView.clientWidth : view.right;
+
+  let scrollMarginTop = parseInt(itemStyle.scrollMarginTop, 10) || 0;
+  let scrollMarginBottom = parseInt(itemStyle.scrollMarginBottom, 10) || 0;
+  let scrollMarginLeft = parseInt(itemStyle.scrollMarginLeft, 10) || 0;
+  let scrollMarginRight = parseInt(itemStyle.scrollMarginRight, 10) || 0;
+
+  let scrollPaddingTop = parseInt(viewStyle.scrollPaddingTop, 10) || 0;
+  let scrollPaddingBottom = parseInt(viewStyle.scrollPaddingBottom, 10) || 0;
+  let scrollPaddingLeft = parseInt(viewStyle.scrollPaddingLeft, 10) || 0;
+  let scrollPaddingRight = parseInt(viewStyle.scrollPaddingRight, 10) || 0;
+
+  let borderTopWidth = parseInt(viewStyle.borderTopWidth, 10) || 0;
+  let borderBottomWidth = parseInt(viewStyle.borderBottomWidth, 10) || 0;
+  let borderLeftWidth = parseInt(viewStyle.borderLeftWidth, 10) || 0;
+  let borderRightWidth = parseInt(viewStyle.borderRightWidth, 10) || 0;
+
+  let scrollAreaTop = target.top - scrollMarginTop;
+  let scrollAreaBottom = target.bottom + scrollMarginBottom;
+  let scrollAreaLeft = target.left - scrollMarginLeft;
+  let scrollAreaRight = target.right + scrollMarginRight;
+
+  let scrollBarOffsetX = scrollView === root ? 0 : borderLeftWidth + borderRightWidth;
+  let scrollBarOffsetY = scrollView === root ? 0 : borderTopWidth + borderBottomWidth;
+  let scrollBarWidth = scrollView.offsetWidth - scrollView.clientWidth - scrollBarOffsetX;
+  let scrollBarHeight = scrollView.offsetHeight - scrollView.clientHeight - scrollBarOffsetY;
+
+  let scrollPortTop = viewTop + borderTopWidth + scrollPaddingTop;
+  let scrollPortBottom = viewBottom - borderBottomWidth - scrollPaddingBottom - scrollBarHeight;
+  let scrollPortLeft = viewLeft + borderLeftWidth + scrollPaddingLeft;
+  let scrollPortRight = viewRight - borderRightWidth - scrollPaddingRight;
 
-  // 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;
-
-  // 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;
+  // IOS always positions the scrollbar on the right ¯\_(ツ)_/¯
+  if (viewStyle.direction === 'rtl' && !isIOS()) {
+    scrollPortLeft += scrollBarWidth;
+  } else {
+    scrollPortRight -= scrollBarWidth;
   }
-  if (offsetY <= borderAdjustedY + scrollPaddingTopNumber) {
-    y = offsetY - parseInt(borderTopWidth, 10) - scrollPaddingTopNumber;
-  } else if (offsetY + height > maxY - scrollPaddingBottomNumber) {
-    y += offsetY + height - maxY + scrollPaddingBottomNumber;
+
+  let shouldScrollBlock = scrollAreaTop < scrollPortTop || scrollAreaBottom > scrollPortBottom;
+  let shouldScrollInline = scrollAreaLeft < scrollPortLeft || scrollAreaRight > scrollPortRight;
+
+  if (shouldScrollBlock && block === 'start') {
+    y += scrollAreaTop - scrollPortTop;
+  } else if (shouldScrollBlock && block === 'center') {
+    y += (scrollAreaTop + scrollAreaBottom) / 2 - (scrollPortTop + scrollPortBottom) / 2;
+  } else if (shouldScrollBlock && block === 'end') {
+    y += scrollAreaBottom - scrollPortBottom;
+  } else if (shouldScrollBlock && block === 'nearest') {
+    let start = scrollAreaTop - scrollPortTop;
+    let end = scrollAreaBottom - scrollPortBottom;
+    y += Math.abs(start) <= Math.abs(end) ? start : end;
   }
 
-  scrollView.scrollLeft = x;
-  scrollView.scrollTop = y;
-}
+  if (shouldScrollInline && inline === 'start') {
+    x += scrollAreaLeft - scrollPortLeft;
+  } else if (shouldScrollInline && inline === 'center') {
+    x += (scrollAreaLeft + scrollAreaRight) / 2 - (scrollPortLeft + scrollPortRight) / 2;
+  } else if (shouldScrollInline && inline === 'end') {
+    x += scrollAreaRight - scrollPortRight;
+  } else if (shouldScrollInline && inline === 'nearest') {
+    let start = scrollAreaLeft - scrollPortLeft;
+    let end = scrollAreaRight - scrollPortRight;
+    x += Math.abs(start) <= Math.abs(end) ? start : end;
+  }
 
-/**
- * Computes the offset left or top from child to ancestor by accumulating
- * offsetLeft or offsetTop through intervening offsetParents.
- */
-function relativeOffset(ancestor: HTMLElement, child: HTMLElement, axis: 'left'|'top') {
-  const prop = axis === 'left' ? 'offsetLeft' : 'offsetTop';
-  let sum = 0;
-  while (child.offsetParent) {
-    sum += child[prop];
-    if (child.offsetParent === ancestor) {
-      // Stop once we have found the ancestor we are interested in.
-      break;
-    } else if (child.offsetParent.contains(ancestor)) {
-      // If the ancestor is not `position:relative`, then we stop at
-      // _its_ offset parent, and we subtract off _its_ offset, so that
-      // we end up with the proper offset from child to ancestor.
-      sum -= ancestor[prop];
-      break;
-    }
-    child = child.offsetParent as HTMLElement;
+  if (process.env.NODE_ENV === 'test') {
+    scrollView.scrollLeft = x;
+    scrollView.scrollTop = y;
+    return;
   }
-  return sum;
+
+  scrollView.scrollTo({left: x, top: y});
 }
 
 /**
@@ -97,12 +128,14 @@ function relativeOffset(ancestor: HTMLElement, child: HTMLElement, axis: 'left'|
  * that will be centered in the viewport prior to scrolling the targetElement into view. If scrolling is prevented on
  * the body (e.g. targetElement is in a popover), this will only scroll the scroll parents of the targetElement up to but not including the body itself.
  */
-export function scrollIntoViewport(targetElement: Element | null, opts?: ScrollIntoViewportOpts): void {
-  if (targetElement && document.contains(targetElement)) {
+export function scrollIntoViewport(targetElement: Element | null, opts: ScrollIntoViewportOpts = {}): void {
+  let {containingElement} = opts;
+  if (targetElement && targetElement.isConnected) {
     let root = document.scrollingElement || document.documentElement;
     let isScrollPrevented = window.getComputedStyle(root).overflow === 'hidden';
-    // If scrolling is not currently prevented then we aren’t in a overlay nor is a overlay open, just use element.scrollIntoView to bring the element into view
-    if (!isScrollPrevented) {
+    // If scrolling is not currently prevented then we aren't in a overlay nor is a overlay open, just use element.scrollIntoView to bring the element into view
+    // Also ignore in chrome because of this bug: https://issues.chromium.org/issues/40074749
+    if (!isScrollPrevented && !isChrome()) {
       let {left: originalLeft, top: originalTop} = targetElement.getBoundingClientRect();
 
       // use scrollIntoView({block: 'nearest'}) instead of .focus to check if the element is fully in view or not since .focus()
@@ -111,18 +144,25 @@ export function scrollIntoViewport(targetElement: Element | null, opts?: ScrollI
       let {left: newLeft, top: newTop} = targetElement.getBoundingClientRect();
       // Account for sub pixel differences from rounding
       if ((Math.abs(originalLeft - newLeft) > 1) || (Math.abs(originalTop - newTop) > 1)) {
-        opts?.containingElement?.scrollIntoView?.({block: 'center', inline: 'center'});
+        containingElement?.scrollIntoView?.({block: 'center', inline: 'center'});
         targetElement.scrollIntoView?.({block: 'nearest'});
       }
     } else {
-      let scrollParents = getScrollParents(targetElement);
+      let {left: originalLeft, top: originalTop} = targetElement.getBoundingClientRect();
+
       // If scrolling is prevented, we don't want to scroll the body since it might move the overlay partially offscreen and the user can't scroll it back into view.
-      if (!isScrollPrevented) {
-        scrollParents.push(root);
-      }
+      let scrollParents = getScrollParents(targetElement, true);
       for (let scrollParent of scrollParents) {
         scrollIntoView(scrollParent as HTMLElement, targetElement as HTMLElement);
       }
+      let {left: newLeft, top: newTop} = targetElement.getBoundingClientRect();
+      // Account for sub pixel differences from rounding
+      if ((Math.abs(originalLeft - newLeft) > 1) || (Math.abs(originalTop - newTop) > 1)) {
+        scrollParents = containingElement ? getScrollParents(containingElement, true) : [];
+        for (let scrollParent of scrollParents) {
+          scrollIntoView(scrollParent as HTMLElement, containingElement as HTMLElement, {block: 'center', inline: 'center'});
+        }
+      }
     }
   }
 }

package/src/shadowdom/DOMFunctions.ts

@@ -1,14 +1,16 @@
 // Source: https://github.com/microsoft/tabster/blob/a89fc5d7e332d48f68d03b1ca6e344489d1c3898/src/Shadowdomize/DOMFunctions.ts#L16
+/* eslint-disable rsp-rules/no-non-shadow-contains, rsp-rules/safe-event-target */
 
-import {isShadowRoot} from '../domHelpers';
+import {getOwnerWindow, isShadowRoot} from '../domHelpers';
 import {shadowDOM} from '@react-stately/flags';
+import type {SyntheticEvent} from 'react';
 
 /**
  * ShadowDOM safe version of Node.contains.
  */
 export function nodeContains(
-  node: Node | null | undefined,
-  otherNode: Node | null | undefined
+  node: Node | Element | null | undefined,
+  otherNode: Node | Element | null | undefined
 ): boolean {
   if (!shadowDOM()) {
     return otherNode && node ? node.contains(otherNode) : false;
@@ -57,14 +59,42 @@ export const getActiveElement = (doc: Document = document): Element | null => {
   return activeElement;
 };
 
+// Type helper to extract the target element type from an event
+type EventTargetType<T> = T extends SyntheticEvent<infer E, any> ? E : EventTarget;
+
+// Possibly we can improve the types for this using https://github.com/adobe/react-spectrum/pull/8991/changes#diff-2d491c0c91701d28d08e1cf9fcadbdb21a030b67ab681460c9934140f29127b8R68 but it was more changes than I
+// wanted to make to fix the function.
 /**
  * ShadowDOM safe version of event.target.
  */
-export function getEventTarget<T extends Event>(event: T): Element {
-  if (shadowDOM() && (event.target as HTMLElement).shadowRoot) {
-    if (event.composedPath) {
-      return event.composedPath()[0] as Element;
+export function getEventTarget<T extends Event | SyntheticEvent>(event: T): EventTargetType<T> {
+  if (shadowDOM() && (event.target instanceof Element) && event.target.shadowRoot) {
+    if ('composedPath' in event) {
+      return (event.composedPath()[0] ?? null) as EventTargetType<T>;
+    } else if ('composedPath' in event.nativeEvent) {
+      return (event.nativeEvent.composedPath()[0] ?? null) as EventTargetType<T>;
     }
   }
-  return event.target as Element;
+  return event.target as EventTargetType<T>;
+}
+
+/**
+ * ShadowDOM safe fast version of node.contains(document.activeElement).
+ * @param node
+ * @returns
+ */
+export function isFocusWithin(node: Element | null | undefined): boolean {
+  if (!node) {
+    return false;
+  }
+  // Get the active element within the node's parent shadow root (or the document). Can return null.
+  let root = node.getRootNode();
+  let ownerWindow = getOwnerWindow(node);
+  if (!(root instanceof ownerWindow.Document || root instanceof ownerWindow.ShadowRoot)) {
+    return false;
+  }
+  let activeElement = root.activeElement;
+
+  // Check if the active element is within this node. These nodes are within the same shadow root.
+  return activeElement != null && node.contains(activeElement);
 }

package/src/useDrag1D.ts

@@ -12,6 +12,7 @@
 
  /* eslint-disable rulesdir/pure-render */
 
+import {getEventTarget, nodeContains} from './shadowdom/DOMFunctions';
 import {getOffset} from './getOffset';
 import {Orientation} from '@react-types/shared';
 import React, {HTMLAttributes, MutableRefObject, useRef} from 'react';
@@ -80,7 +81,7 @@ export function useDrag1D(props: UseDrag1DProps): HTMLAttributes<HTMLElement> {
   };
 
   let onMouseUp = (e: MouseEvent) => {
-    const target = e.target as HTMLElement;
+    let target = getEventTarget(e) as HTMLElement;
     dragging.current = false;
     let nextOffset = getNextOffset(e);
     if (handlers.current.onDrag) {
@@ -99,7 +100,7 @@ export function useDrag1D(props: UseDrag1DProps): HTMLAttributes<HTMLElement> {
     const target = e.currentTarget;
     // If we're already handling dragging on a descendant with useDrag1D, then
     // we don't want to handle the drag motion on this target as well.
-    if (draggingElements.some(elt => target.contains(elt))) {
+    if (draggingElements.some(elt => nodeContains(target, elt))) {
       return;
     }
     draggingElements.push(target);

package/src/useViewportSize.ts

@@ -10,6 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+import {getActiveElement, getEventTarget} from './shadowdom/DOMFunctions';
+import {isIOS} from './platform';
 import {useEffect, useState} from 'react';
 import {useIsSSR} from '@react-aria/ssr';
 import {willOpenKeyboard} from './keyboard';
@@ -26,6 +28,15 @@ export function useViewportSize(): ViewportSize {
   let [size, setSize] = useState(() => isSSR ? {width: 0, height: 0} : getViewportSize());
 
   useEffect(() => {
+    let updateSize = (newSize: ViewportSize) => {
+      setSize(size => {
+        if (newSize.width === size.width && newSize.height === size.height) {
+          return size;
+        }
+        return newSize;
+      });
+    };
+
     // Use visualViewport api to track available height even on iOS virtual keyboard opening
     let onResize = () => {
       // Ignore updates when zoomed.
@@ -33,13 +44,7 @@ export function useViewportSize(): ViewportSize {
         return;
       }
 
-      setSize(size => {
-        let newSize = getViewportSize();
-        if (newSize.width === size.width && newSize.height === size.height) {
-          return size;
-        }
-        return newSize;
-      });
+      updateSize(getViewportSize());
     };
 
     // When closing the keyboard, iOS does not fire the visual viewport resize event until the animation is complete.
@@ -50,23 +55,22 @@ export function useViewportSize(): ViewportSize {
         return;
       }
 
-      if (willOpenKeyboard(e.target as Element)) {
+      if (willOpenKeyboard(getEventTarget(e) as Element)) {
         // Wait one frame to see if a new element gets focused.
         frame = requestAnimationFrame(() => {
-          if (!document.activeElement || !willOpenKeyboard(document.activeElement)) {
-            setSize(size => {
-              let newSize = {width: window.innerWidth, height: window.innerHeight};
-              if (newSize.width === size.width && newSize.height === size.height) {
-                return size;
-              }
-              return newSize;
-            });
+          let activeElement = getActiveElement();
+          if (!activeElement || !willOpenKeyboard(activeElement)) {
+            updateSize({width: document.documentElement.clientWidth, height: document.documentElement.clientHeight});
           }
         });
       }
     };
 
-    window.addEventListener('blur', onBlur, true);
+    updateSize(getViewportSize());
+
+    if (isIOS()) {
+      window.addEventListener('blur', onBlur, true);
+    }
 
     if (!visualViewport) {
       window.addEventListener('resize', onResize);
@@ -76,7 +80,9 @@ export function useViewportSize(): ViewportSize {
 
     return () => {
       cancelAnimationFrame(frame);
-      window.removeEventListener('blur', onBlur, true);
+      if (isIOS()) {
+        window.removeEventListener('blur', onBlur, true);
+      }
       if (!visualViewport) {
         window.removeEventListener('resize', onResize);
       } else {
@@ -91,7 +97,7 @@ export function useViewportSize(): ViewportSize {
 function getViewportSize(): ViewportSize {
   return {
     // Multiply by the visualViewport scale to get the "natural" size, unaffected by pinch zooming.
-    width: visualViewport ? visualViewport.width * visualViewport.scale : window.innerWidth,
-    height: visualViewport ? visualViewport.height * visualViewport.scale : window.innerHeight
+    width: visualViewport ? visualViewport.width * visualViewport.scale : document.documentElement.clientWidth,
+    height: visualViewport ? visualViewport.height * visualViewport.scale : document.documentElement.clientHeight
   };
 }