@react-aria/utils 3.14.1 → 3.15.0

package/src/scrollIntoView.ts

@@ -10,6 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
+import {getScrollParent} from './';
+
+interface ScrollIntoViewportOpts {
+  /** The optional containing element of the target to be centered in the viewport. */
+  containingElement?: Element
+}
+
 /**
  * Scrolls `scrollView` so that `element` is visible.
  * Similar to `element.scrollIntoView({block: 'nearest'})` (not supported in Edge),
@@ -22,20 +29,25 @@ export function scrollIntoView(scrollView: HTMLElement, element: HTMLElement) {
   let height = element.offsetHeight;
   let x = scrollView.scrollLeft;
   let y = scrollView.scrollTop;
-  let maxX = x + scrollView.offsetWidth;
-  let maxY = y + scrollView.offsetHeight;
+
+  // 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);
+  // 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;
+    x = offsetX - parseInt(borderLeftWidth, 10);
   } else if (offsetX + width > maxX) {
     x += offsetX + width - maxX;
   }
-  if (offsetY <= y) {
-    y = offsetY;
+  if (offsetY <= borderAdjustedY) {
+    y = offsetY - parseInt(borderTopWidth, 10);
   } else if (offsetY + height > maxY) {
     y += offsetY + height - maxY;
   }
-
   scrollView.scrollLeft = x;
   scrollView.scrollTop = y;
 }
@@ -63,3 +75,37 @@ function relativeOffset(ancestor: HTMLElement, child: HTMLElement, axis: 'left'|
   }
   return sum;
 }
+
+/**
+ * Scrolls the `targetElement` so it is visible in the viewport. Accepts an optional `opts.containingElement`
+ * 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, opts?: ScrollIntoViewportOpts) {
+  if (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) {
+      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()
+      // won't cause a scroll if the element is already focused and doesn't behave consistently when an element is partially out of view horizontally vs vertically
+      targetElement?.scrollIntoView?.({block: 'nearest'});
+      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'});
+        targetElement.scrollIntoView?.({block: 'nearest'});
+      }
+    } else {
+      let scrollParent = getScrollParent(targetElement);
+      // 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.
+      while (targetElement && scrollParent && targetElement !== root && scrollParent !== root) {
+        scrollIntoView(scrollParent as HTMLElement, targetElement as HTMLElement);
+        targetElement = scrollParent;
+        scrollParent = getScrollParent(targetElement);
+      }
+    }
+  }
+}