@react-aria/utils 3.30.0 → 3.31.0

package/src/isElementVisible.ts

@@ -63,9 +63,9 @@ function isAttributeVisible(element: Element, childElement?: Element) {
  */
 export function isElementVisible(element: Element, childElement?: Element): boolean {
   if (supportsCheckVisibility) {
-    return element.checkVisibility();
+    return element.checkVisibility({visibilityProperty: true}) && !element.closest('[data-react-aria-prevent-focus]');
   }
-  
+
   return (
     element.nodeName !== '#comment' &&
     isStyleVisible(element) &&

package/src/isVirtualEvent.ts

@@ -25,7 +25,7 @@ import {isAndroid} from './platform';
 
 export function isVirtualClick(event: MouseEvent | PointerEvent): boolean {
   // JAWS/NVDA with Firefox.
-  if ((event as any).mozInputSource === 0 && event.isTrusted) {
+  if ((event as PointerEvent).pointerType === '' && event.isTrusted) {
     return true;
   }
 

package/src/keyboard.tsx

@@ -25,3 +25,24 @@ export function isCtrlKeyPressed(e: Event): boolean {
 
   return e.ctrlKey;
 }
+
+// HTML input types that do not cause the software keyboard to appear.
+const nonTextInputTypes = new Set([
+  'checkbox',
+  'radio',
+  'range',
+  'color',
+  'file',
+  'image',
+  'button',
+  'submit',
+  'reset'
+]);
+
+export function willOpenKeyboard(target: Element) {
+  return (
+    (target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) ||
+    target instanceof HTMLTextAreaElement ||
+    (target instanceof HTMLElement && target.isContentEditable)
+  );
+}

package/src/scrollIntoView.ts

@@ -11,6 +11,7 @@
  */
 
 import {getScrollParents} from './getScrollParents';
+import {isChrome} from './platform';
 
 interface ScrollIntoViewportOpts {
   /** The optional containing element of the target to be centered in the viewport. */
@@ -40,32 +41,64 @@ export function scrollIntoView(scrollView: HTMLElement, element: HTMLElement): v
     scrollPaddingLeft
   } = getComputedStyle(scrollView);
 
+  // Account for scroll margin of the element
+  let {
+    scrollMarginTop,
+    scrollMarginRight,
+    scrollMarginBottom,
+    scrollMarginLeft
+  } = getComputedStyle(element);
+
   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
+  // Get scroll padding / margin values as pixels - defaults to 0 if no scroll padding / margin
   // 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;
+  let scrollMarginTopNumber = parseInt(scrollMarginTop, 10) || 0;
+  let scrollMarginBottomNumber = parseInt(scrollMarginBottom, 10) || 0;
+  let scrollMarginRightNumber = parseInt(scrollMarginRight, 10) || 0;
+  let scrollMarginLeftNumber = parseInt(scrollMarginLeft, 10) || 0;
+
+  let targetLeft = offsetX - scrollMarginLeftNumber;
+  let targetRight = offsetX + width + scrollMarginRightNumber;
+  let targetTop = offsetY - scrollMarginTopNumber;
+  let targetBottom = offsetY + height + scrollMarginBottomNumber;
 
-  if (offsetX <= x + scrollPaddingLeftNumber) {
-    x = offsetX - parseInt(borderLeftWidth, 10) - scrollPaddingLeftNumber;
-  } else if (offsetX + width > maxX - scrollPaddingRightNumber) {
-    x += offsetX + width - maxX + scrollPaddingRightNumber;
+  let scrollPortLeft = x + parseInt(borderLeftWidth, 10) + scrollPaddingLeftNumber;
+  let scrollPortRight = maxX - scrollPaddingRightNumber;
+  let scrollPortTop = y + parseInt(borderTopWidth, 10) + scrollPaddingTopNumber;
+  let scrollPortBottom = maxY - scrollPaddingBottomNumber;
+
+  if (targetLeft > scrollPortLeft || targetRight < scrollPortRight) {
+    if (targetLeft <= x + scrollPaddingLeftNumber) {
+      x = targetLeft - parseInt(borderLeftWidth, 10) - scrollPaddingLeftNumber;
+    } else if (targetRight > maxX - scrollPaddingRightNumber) {
+      x += targetRight - maxX + scrollPaddingRightNumber;
+    }
   }
-  if (offsetY <= borderAdjustedY + scrollPaddingTopNumber) {
-    y = offsetY - parseInt(borderTopWidth, 10) - scrollPaddingTopNumber;
-  } else if (offsetY + height > maxY - scrollPaddingBottomNumber) {
-    y += offsetY + height - maxY + scrollPaddingBottomNumber;
+
+  if (targetTop > scrollPortTop || targetBottom < scrollPortBottom) {
+    if (targetTop <= borderAdjustedY + scrollPaddingTopNumber) {
+      y = targetTop - parseInt(borderTopWidth, 10) - scrollPaddingTopNumber;
+    } else if (targetBottom > maxY - scrollPaddingBottomNumber) {
+      y += targetBottom - maxY + scrollPaddingBottomNumber;
+    }
+  }
+
+  if (process.env.NODE_ENV === 'test') {
+    scrollView.scrollLeft = x;
+    scrollView.scrollTop = y;
+    return;
   }
 
-  scrollView.scrollLeft = x;
-  scrollView.scrollTop = y;
+  scrollView.scrollTo({left: x, top: y});
 }
 
 /**
@@ -101,8 +134,9 @@ export function scrollIntoViewport(targetElement: Element | null, opts?: ScrollI
   if (targetElement && document.contains(targetElement)) {
     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()

package/src/useViewportSize.ts

@@ -12,6 +12,7 @@
 
 import {useEffect, useState} from 'react';
 import {useIsSSR} from '@react-aria/ssr';
+import {willOpenKeyboard} from './keyboard';
 
 interface ViewportSize {
   width: number,
@@ -27,6 +28,11 @@ export function useViewportSize(): ViewportSize {
   useEffect(() => {
     // Use visualViewport api to track available height even on iOS virtual keyboard opening
     let onResize = () => {
+      // Ignore updates when zoomed.
+      if (visualViewport && visualViewport.scale > 1) {
+        return;
+      }
+
       setSize(size => {
         let newSize = getViewportSize();
         if (newSize.width === size.width && newSize.height === size.height) {
@@ -36,6 +42,32 @@ export function useViewportSize(): ViewportSize {
       });
     };
 
+    // When closing the keyboard, iOS does not fire the visual viewport resize event until the animation is complete.
+    // We can anticipate this and resize early by handling the blur event and using the layout size.
+    let frame: number;
+    let onBlur = (e: FocusEvent) => {
+      if (visualViewport && visualViewport.scale > 1) {
+        return;
+      }
+
+      if (willOpenKeyboard(e.target 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;
+            });
+          }
+        });
+      }
+    };
+
+    window.addEventListener('blur', onBlur, true);
+
     if (!visualViewport) {
       window.addEventListener('resize', onResize);
     } else {
@@ -43,6 +75,8 @@ export function useViewportSize(): ViewportSize {
     }
 
     return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener('blur', onBlur, true);
       if (!visualViewport) {
         window.removeEventListener('resize', onResize);
       } else {
@@ -56,7 +90,8 @@ export function useViewportSize(): ViewportSize {
 
 function getViewportSize(): ViewportSize {
   return {
-    width: (visualViewport && visualViewport?.width) || window.innerWidth,
-    height: (visualViewport && visualViewport?.height) || window.innerHeight
+    // 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
   };
 }