@react-aria/overlays - npm Package Compare versions

Comparing version 3.4.0 to 3.5.0

dist/main.js

@@ -10,3 +10,5 @@ var {
 var {
-  useId
+  useId,
+  chain,
+  getScrollParent
 } = require("@react-aria/utils");
@@ -32,2 +34,3 @@
   useState,
+  useLayoutEffect,
   useContext,
@@ -178,18 +181,29 @@ useMemo
   } = placementInfo;
-  let position = {};
-  position[crossAxis] = childOffset[crossAxis] + crossOffset;
+  let position = {}; // button position
 
+  position[crossAxis] = childOffset[crossAxis];
+
   if (crossPlacement === 'center') {
+    //  + (button size / 2) - (overlay size / 2)
+    // at this point the overlay center should match the button center
     position[crossAxis] += (childOffset[crossSize] - overlaySize[crossSize]) / 2;
   } else if (crossPlacement !== crossAxis) {
+    //  + (button size) - (overlay size)
+    // at this point the overlay bottom should match the button bottom
     position[crossAxis] += childOffset[crossSize] - overlaySize[crossSize];
-  } // Ensure overlay sticks to target(ignore for overlays smaller than target)
+  }
+  /* else {
+   the overlay top should match the button top
+  } */
+  // add the crossOffset from props
 
 
-  if (childOffset[crossSize] < overlaySize[crossSize]) {
-    let positionForPositiveSideOverflow = Math.min(position[crossAxis], childOffset[crossAxis]);
-    position[crossAxis] = Math.max(positionForPositiveSideOverflow, childOffset[crossAxis] - overlaySize[crossSize] + childOffset[crossSize]);
-  } // Floor these so the position isn't placed on a partial pixel, only whole pixels. Shouldn't matter if it was floored or ceiled, so chose one.
+  position[crossAxis] += crossOffset; // this is button center position - the overlay size + half of the button to align bottom of overlay with button center
 
+  let minViablePosition = childOffset[crossAxis] + childOffset[crossSize] / 2 - overlaySize[crossSize]; // this is button position of center, aligns top of overlay with button center
 
+  let maxViablePosition = childOffset[crossAxis] + childOffset[crossSize] / 2; // clamp it into the range of the min/max positions
+
+  position[crossAxis] = Math.min(Math.max(minViablePosition, position[crossAxis]), maxViablePosition); // Floor these so the position isn't placed on a partial pixel, only whole pixels. Shouldn't matter if it was floored or ceiled, so chose one.
+
   if (placement === axis) {
@@ -268,3 +282,3 @@ // If the container is positioned (non-static), then we use the container's actual
   let arrowPosition = {};
-  arrowPosition[crossAxis] = childOffset[crossSize] > overlaySize[crossSize] ? null : childOffset[crossAxis] - position[crossAxis] + childOffset[crossSize] / 2;
+  arrowPosition[crossAxis] = childOffset[crossAxis] - position[crossAxis] + childOffset[crossSize] / 2;
   return {
@@ -574,3 +588,6 @@ position,
 exports.useOverlayTrigger = useOverlayTrigger;
+const $a21edfc55f5392c9a20c9978f0e487$var$isMobileSafari = typeof window !== 'undefined' && window.navigator != null ? /AppleWebKit/.test(window.navigator.userAgent) && (/^(iPhone|iPad)$/.test(window.navigator.platform) || // iPadOS 13 lies and says its a Mac, but we can distinguish by detecting touch support.
+window.navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) : false; // @ts-ignore
 
+const $a21edfc55f5392c9a20c9978f0e487$var$visualViewport = typeof window !== 'undefined' && window.visualViewport;
 /**
@@ -581,2 +598,3 @@ * Prevents scrolling on the document body on mount, and
  */
+
 function usePreventScroll(options) {
@@ -590,22 +608,197 @@ if (options === void 0) {
   } = options;
-  useEffect(() => {
-    let {
-      paddingRight,
-      overflow
-    } = document.body.style;
+  useLayoutEffect(() => {
+    if (isDisabled) {
+      return;
+    }
 
-    if (!isDisabled) {
-      document.body.style.paddingRight = window.innerWidth - document.documentElement.clientWidth + "px";
-      document.body.style.overflow = 'hidden';
+    if ($a21edfc55f5392c9a20c9978f0e487$var$isMobileSafari) {
+      return $a21edfc55f5392c9a20c9978f0e487$var$preventScrollMobileSafari();
+    } else {
+      return $a21edfc55f5392c9a20c9978f0e487$var$preventScrollStandard();
     }
-
-    return () => {
-      document.body.style.overflow = overflow;
-      document.body.style.paddingRight = paddingRight;
-    };
   }, [isDisabled]);
-}
+} // For most browsers, all we need to do is set `overflow: hidden` on the root element, and
+// add some padding to prevent the page from shifting when the scrollbar is hidden.
 
+
 exports.usePreventScroll = usePreventScroll;
 
+function $a21edfc55f5392c9a20c9978f0e487$var$preventScrollStandard() {
+  return chain($a21edfc55f5392c9a20c9978f0e487$var$setStyle(document.documentElement, 'paddingRight', window.innerWidth - document.documentElement.clientWidth + "px"), $a21edfc55f5392c9a20c9978f0e487$var$setStyle(document.documentElement, 'overflow', 'hidden'));
+} // Mobile Safari is a whole different beast. Even with overflow: hidden,
+// it still scrolls the page in many situations:
+//
+// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
+// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of
+//    it, so it becomes scrollable.
+// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.
+//    This may cause even fixed position elements to scroll off the screen.
+// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always
+//    scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.
+//
+// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:
+//
+// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
+//    on the window.
+// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the
+//    top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.
+// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
+// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top
+//    of the page, which prevents it from scrolling the page. After the input is focused, scroll the element
+//    into view ourselves, without scrolling the whole page.
+// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the
+//    same visually, but makes the actual scroll position always zero. This is required to make all of the
+//    above work or Safari will still try to scroll the page when focusing an input.
+// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting
+//    to navigate to an input with the next/previous buttons that's outside a modal.
+
+
+function $a21edfc55f5392c9a20c9978f0e487$var$preventScrollMobileSafari() {
+  let scrollable;
+  let lastY = 0;
+
+  let onTouchStart = e => {
+    // Store the nearest scrollable parent element from the element that the user touched.
+    scrollable = getScrollParent(e.target);
+
+    if (scrollable === document.documentElement && scrollable === document.body) {
+      return;
+    }
+
+    lastY = e.changedTouches[0].pageY;
+  };
+
+  let onTouchMove = e => {
+    // Prevent scrolling the window.
+    if (scrollable === document.documentElement || scrollable === document.body) {
+      e.preventDefault();
+      return;
+    } // Prevent scrolling up when at the top and scrolling down when at the bottom
+    // of a nested scrollable area, otherwise mobile Safari will start scrolling
+    // the window instead. Unfortunately, this disables bounce scrolling when at
+    // the top but it's the best we can do.
+
+
+    let y = e.changedTouches[0].pageY;
+    let scrollTop = scrollable.scrollTop;
+    let bottom = scrollable.scrollHeight - scrollable.clientHeight;
+
+    if (scrollTop <= 0 && y > lastY || scrollTop >= bottom && y < lastY) {
+      e.preventDefault();
+    }
+
+    lastY = y;
+  };
+
+  let onTouchEnd = e => {
+    let target = e.target;
+
+    if (target.tagName === 'INPUT') {
+      e.preventDefault(); // Apply a transform to trick Safari into thinking the input is at the top of the page
+      // so it doesn't try to scroll it into view. When tapping on an input, this needs to
+      // be done before the "focus" event, so we have to focus the element ourselves.
+
+      target.style.transform = 'translateY(-2000px)';
+      target.focus();
+      requestAnimationFrame(() => {
+        target.style.transform = '';
+      });
+    }
+  };
+
+  let onFocus = e => {
+    let target = e.target;
+
+    if (target.tagName === 'INPUT') {
+      // Transform also needs to be applied in the focus event in cases where focus moves
+      // other than tapping on an input directly, e.g. the next/previous buttons in the
+      // software keyboard. In these cases, it seems applying the transform in the focus event
+      // is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️
+      target.style.transform = 'translateY(-2000px)';
+      requestAnimationFrame(() => {
+        target.style.transform = ''; // This will have prevented the browser from scrolling the focused element into view,
+        // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
+
+        if ($a21edfc55f5392c9a20c9978f0e487$var$visualViewport) {
+          if ($a21edfc55f5392c9a20c9978f0e487$var$visualViewport.height < window.innerHeight) {
+            // If the keyboard is already visible, do this after one additional frame
+            // to wait for the transform to be removed.
+            requestAnimationFrame(() => {
+              $a21edfc55f5392c9a20c9978f0e487$var$scrollIntoView(target);
+            });
+          } else {
+            // Otherwise, wait for the visual viewport to resize before scrolling so we can
+            // measure the correct position to scroll to.
+            $a21edfc55f5392c9a20c9978f0e487$var$visualViewport.addEventListener('resize', () => $a21edfc55f5392c9a20c9978f0e487$var$scrollIntoView(target), {
+              once: true
+            });
+          }
+        }
+      });
+    }
+  };
+
+  let onWindowScroll = () => {
+    // Last resort. If the window scrolled, scroll it back to the top.
+    // It should always be at the top because the body will have a negative margin (see below).
+    window.scrollTo(0, 0);
+  }; // Record the original scroll position so we can restore it.
+  // Then apply a negative margin to the body to offset it by the scroll position. This will
+  // enable us to scroll the window to the top, which is required for the rest of this to work.
+
+
+  let scrollX = window.pageXOffset;
+  let scrollY = window.pageYOffset;
+  let restoreStyles = chain($a21edfc55f5392c9a20c9978f0e487$var$setStyle(document.documentElement, 'paddingRight', window.innerWidth - document.documentElement.clientWidth + "px"), $a21edfc55f5392c9a20c9978f0e487$var$setStyle(document.documentElement, 'overflow', 'hidden'), $a21edfc55f5392c9a20c9978f0e487$var$setStyle(document.body, 'marginTop', "-" + scrollY + "px")); // Scroll to the top. The negative margin on the body will make this appear the same.
+
+  window.scrollTo(0, 0);
+  let removeEvents = chain($a21edfc55f5392c9a20c9978f0e487$var$addEvent(document, 'touchstart', onTouchStart, {
+    passive: false,
+    capture: true
+  }), $a21edfc55f5392c9a20c9978f0e487$var$addEvent(document, 'touchmove', onTouchMove, {
+    passive: false,
+    capture: true
+  }), $a21edfc55f5392c9a20c9978f0e487$var$addEvent(document, 'touchend', onTouchEnd, {
+    passive: false,
+    capture: true
+  }), $a21edfc55f5392c9a20c9978f0e487$var$addEvent(document, 'focus', onFocus, true), $a21edfc55f5392c9a20c9978f0e487$var$addEvent(window, 'scroll', onWindowScroll));
+  return () => {
+    // Restore styles and scroll the page back to where it was.
+    restoreStyles();
+    removeEvents();
+    window.scrollTo(scrollX, scrollY);
+  };
+} // Sets a CSS property on an element, and returns a function to revert it to the previous value.
+
+
+function $a21edfc55f5392c9a20c9978f0e487$var$setStyle(element, style, value) {
+  let cur = element.style[style];
+  element.style[style] = value;
+  return () => {
+    element.style[style] = cur;
+  };
+} // Adds an event listener to an element, and returns a function to remove it.
+
+
+function $a21edfc55f5392c9a20c9978f0e487$var$addEvent(target, event, handler, options) {
+  target.addEventListener(event, handler, options);
+  return () => {
+    target.removeEventListener(event, handler, options);
+  };
+}
+
+function $a21edfc55f5392c9a20c9978f0e487$var$scrollIntoView(target) {
+  // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
+  let scrollable = getScrollParent(target);
+
+  if (scrollable !== document.documentElement && scrollable !== document.body) {
+    let scrollableTop = scrollable.getBoundingClientRect().top;
+    let targetTop = target.getBoundingClientRect().top;
+
+    if (targetTop > scrollableTop + target.clientHeight) {
+      scrollable.scrollTop += targetTop - scrollableTop;
+    }
+  }
+}
+
 const $c5f9596976ab8bd94c5879001549a3e$var$Context = _react.createContext(null);
@@ -612,0 +805,0 @@ /**

dist/module.js

 import { VisuallyHidden } from "@react-aria/visually-hidden";
 import _babelRuntimeHelpersEsmInteropRequireDefault from "@babel/runtime/helpers/esm/interopRequireDefault";
 import _reactDom from "react-dom";
-import { useId } from "@react-aria/utils";
+import { useId, chain, getScrollParent } from "@react-aria/utils";
 import { useFocusWithin, useInteractOutside } from "@react-aria/interactions";
 import { useLocale, useMessageFormatter } from "@react-aria/i18n";
-import _react, { useCallback, useEffect, useState, useContext, useMemo } from "react";
+import _react, { useCallback, useEffect, useState, useLayoutEffect, useContext, useMemo } from "react";
 import _domHelpersOwnerDocument from "dom-helpers/ownerDocument";
@@ -138,18 +138,29 @@ import _domHelpersQueryScrollTop from "dom-helpers/query/scrollTop";
   } = placementInfo;
-  let position = {};
-  position[crossAxis] = childOffset[crossAxis] + crossOffset;
+  let position = {}; // button position
 
+  position[crossAxis] = childOffset[crossAxis];
+
   if (crossPlacement === 'center') {
+    //  + (button size / 2) - (overlay size / 2)
+    // at this point the overlay center should match the button center
     position[crossAxis] += (childOffset[crossSize] - overlaySize[crossSize]) / 2;
   } else if (crossPlacement !== crossAxis) {
+    //  + (button size) - (overlay size)
+    // at this point the overlay bottom should match the button bottom
     position[crossAxis] += childOffset[crossSize] - overlaySize[crossSize];
-  } // Ensure overlay sticks to target(ignore for overlays smaller than target)
+  }
+  /* else {
+   the overlay top should match the button top
+  } */
+  // add the crossOffset from props
 
 
-  if (childOffset[crossSize] < overlaySize[crossSize]) {
-    let positionForPositiveSideOverflow = Math.min(position[crossAxis], childOffset[crossAxis]);
-    position[crossAxis] = Math.max(positionForPositiveSideOverflow, childOffset[crossAxis] - overlaySize[crossSize] + childOffset[crossSize]);
-  } // Floor these so the position isn't placed on a partial pixel, only whole pixels. Shouldn't matter if it was floored or ceiled, so chose one.
+  position[crossAxis] += crossOffset; // this is button center position - the overlay size + half of the button to align bottom of overlay with button center
 
+  let minViablePosition = childOffset[crossAxis] + childOffset[crossSize] / 2 - overlaySize[crossSize]; // this is button position of center, aligns top of overlay with button center
 
+  let maxViablePosition = childOffset[crossAxis] + childOffset[crossSize] / 2; // clamp it into the range of the min/max positions
+
+  position[crossAxis] = Math.min(Math.max(minViablePosition, position[crossAxis]), maxViablePosition); // Floor these so the position isn't placed on a partial pixel, only whole pixels. Shouldn't matter if it was floored or ceiled, so chose one.
+
   if (placement === axis) {
@@ -228,3 +239,3 @@ // If the container is positioned (non-static), then we use the container's actual
   let arrowPosition = {};
-  arrowPosition[crossAxis] = childOffset[crossSize] > overlaySize[crossSize] ? null : childOffset[crossAxis] - position[crossAxis] + childOffset[crossSize] / 2;
+  arrowPosition[crossAxis] = childOffset[crossAxis] - position[crossAxis] + childOffset[crossSize] / 2;
   return {
@@ -528,3 +539,6 @@ position,
 }
+const $ece0076f06e8a828c60ba0c94f22f89$var$isMobileSafari = typeof window !== 'undefined' && window.navigator != null ? /AppleWebKit/.test(window.navigator.userAgent) && (/^(iPhone|iPad)$/.test(window.navigator.platform) || // iPadOS 13 lies and says its a Mac, but we can distinguish by detecting touch support.
+window.navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) : false; // @ts-ignore
 
+const $ece0076f06e8a828c60ba0c94f22f89$var$visualViewport = typeof window !== 'undefined' && window.visualViewport;
 /**
@@ -535,2 +549,3 @@ * Prevents scrolling on the document body on mount, and
  */
+
 export function usePreventScroll(options) {
@@ -544,20 +559,194 @@ if (options === void 0) {
   } = options;
-  useEffect(() => {
-    let {
-      paddingRight,
-      overflow
-    } = document.body.style;
+  useLayoutEffect(() => {
+    if (isDisabled) {
+      return;
+    }
 
-    if (!isDisabled) {
-      document.body.style.paddingRight = window.innerWidth - document.documentElement.clientWidth + "px";
-      document.body.style.overflow = 'hidden';
+    if ($ece0076f06e8a828c60ba0c94f22f89$var$isMobileSafari) {
+      return $ece0076f06e8a828c60ba0c94f22f89$var$preventScrollMobileSafari();
+    } else {
+      return $ece0076f06e8a828c60ba0c94f22f89$var$preventScrollStandard();
     }
+  }, [isDisabled]);
+} // For most browsers, all we need to do is set `overflow: hidden` on the root element, and
+// add some padding to prevent the page from shifting when the scrollbar is hidden.
 
-    return () => {
-      document.body.style.overflow = overflow;
-      document.body.style.paddingRight = paddingRight;
-    };
-  }, [isDisabled]);
+function $ece0076f06e8a828c60ba0c94f22f89$var$preventScrollStandard() {
+  return chain($ece0076f06e8a828c60ba0c94f22f89$var$setStyle(document.documentElement, 'paddingRight', window.innerWidth - document.documentElement.clientWidth + "px"), $ece0076f06e8a828c60ba0c94f22f89$var$setStyle(document.documentElement, 'overflow', 'hidden'));
+} // Mobile Safari is a whole different beast. Even with overflow: hidden,
+// it still scrolls the page in many situations:
+//
+// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
+// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of
+//    it, so it becomes scrollable.
+// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.
+//    This may cause even fixed position elements to scroll off the screen.
+// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always
+//    scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.
+//
+// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:
+//
+// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
+//    on the window.
+// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the
+//    top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.
+// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
+// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top
+//    of the page, which prevents it from scrolling the page. After the input is focused, scroll the element
+//    into view ourselves, without scrolling the whole page.
+// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the
+//    same visually, but makes the actual scroll position always zero. This is required to make all of the
+//    above work or Safari will still try to scroll the page when focusing an input.
+// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting
+//    to navigate to an input with the next/previous buttons that's outside a modal.
+
+
+function $ece0076f06e8a828c60ba0c94f22f89$var$preventScrollMobileSafari() {
+  let scrollable;
+  let lastY = 0;
+
+  let onTouchStart = e => {
+    // Store the nearest scrollable parent element from the element that the user touched.
+    scrollable = getScrollParent(e.target);
+
+    if (scrollable === document.documentElement && scrollable === document.body) {
+      return;
+    }
+
+    lastY = e.changedTouches[0].pageY;
+  };
+
+  let onTouchMove = e => {
+    // Prevent scrolling the window.
+    if (scrollable === document.documentElement || scrollable === document.body) {
+      e.preventDefault();
+      return;
+    } // Prevent scrolling up when at the top and scrolling down when at the bottom
+    // of a nested scrollable area, otherwise mobile Safari will start scrolling
+    // the window instead. Unfortunately, this disables bounce scrolling when at
+    // the top but it's the best we can do.
+
+
+    let y = e.changedTouches[0].pageY;
+    let scrollTop = scrollable.scrollTop;
+    let bottom = scrollable.scrollHeight - scrollable.clientHeight;
+
+    if (scrollTop <= 0 && y > lastY || scrollTop >= bottom && y < lastY) {
+      e.preventDefault();
+    }
+
+    lastY = y;
+  };
+
+  let onTouchEnd = e => {
+    let target = e.target;
+
+    if (target.tagName === 'INPUT') {
+      e.preventDefault(); // Apply a transform to trick Safari into thinking the input is at the top of the page
+      // so it doesn't try to scroll it into view. When tapping on an input, this needs to
+      // be done before the "focus" event, so we have to focus the element ourselves.
+
+      target.style.transform = 'translateY(-2000px)';
+      target.focus();
+      requestAnimationFrame(() => {
+        target.style.transform = '';
+      });
+    }
+  };
+
+  let onFocus = e => {
+    let target = e.target;
+
+    if (target.tagName === 'INPUT') {
+      // Transform also needs to be applied in the focus event in cases where focus moves
+      // other than tapping on an input directly, e.g. the next/previous buttons in the
+      // software keyboard. In these cases, it seems applying the transform in the focus event
+      // is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️
+      target.style.transform = 'translateY(-2000px)';
+      requestAnimationFrame(() => {
+        target.style.transform = ''; // This will have prevented the browser from scrolling the focused element into view,
+        // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
+
+        if ($ece0076f06e8a828c60ba0c94f22f89$var$visualViewport) {
+          if ($ece0076f06e8a828c60ba0c94f22f89$var$visualViewport.height < window.innerHeight) {
+            // If the keyboard is already visible, do this after one additional frame
+            // to wait for the transform to be removed.
+            requestAnimationFrame(() => {
+              $ece0076f06e8a828c60ba0c94f22f89$var$scrollIntoView(target);
+            });
+          } else {
+            // Otherwise, wait for the visual viewport to resize before scrolling so we can
+            // measure the correct position to scroll to.
+            $ece0076f06e8a828c60ba0c94f22f89$var$visualViewport.addEventListener('resize', () => $ece0076f06e8a828c60ba0c94f22f89$var$scrollIntoView(target), {
+              once: true
+            });
+          }
+        }
+      });
+    }
+  };
+
+  let onWindowScroll = () => {
+    // Last resort. If the window scrolled, scroll it back to the top.
+    // It should always be at the top because the body will have a negative margin (see below).
+    window.scrollTo(0, 0);
+  }; // Record the original scroll position so we can restore it.
+  // Then apply a negative margin to the body to offset it by the scroll position. This will
+  // enable us to scroll the window to the top, which is required for the rest of this to work.
+
+
+  let scrollX = window.pageXOffset;
+  let scrollY = window.pageYOffset;
+  let restoreStyles = chain($ece0076f06e8a828c60ba0c94f22f89$var$setStyle(document.documentElement, 'paddingRight', window.innerWidth - document.documentElement.clientWidth + "px"), $ece0076f06e8a828c60ba0c94f22f89$var$setStyle(document.documentElement, 'overflow', 'hidden'), $ece0076f06e8a828c60ba0c94f22f89$var$setStyle(document.body, 'marginTop', "-" + scrollY + "px")); // Scroll to the top. The negative margin on the body will make this appear the same.
+
+  window.scrollTo(0, 0);
+  let removeEvents = chain($ece0076f06e8a828c60ba0c94f22f89$var$addEvent(document, 'touchstart', onTouchStart, {
+    passive: false,
+    capture: true
+  }), $ece0076f06e8a828c60ba0c94f22f89$var$addEvent(document, 'touchmove', onTouchMove, {
+    passive: false,
+    capture: true
+  }), $ece0076f06e8a828c60ba0c94f22f89$var$addEvent(document, 'touchend', onTouchEnd, {
+    passive: false,
+    capture: true
+  }), $ece0076f06e8a828c60ba0c94f22f89$var$addEvent(document, 'focus', onFocus, true), $ece0076f06e8a828c60ba0c94f22f89$var$addEvent(window, 'scroll', onWindowScroll));
+  return () => {
+    // Restore styles and scroll the page back to where it was.
+    restoreStyles();
+    removeEvents();
+    window.scrollTo(scrollX, scrollY);
+  };
+} // Sets a CSS property on an element, and returns a function to revert it to the previous value.
+
+
+function $ece0076f06e8a828c60ba0c94f22f89$var$setStyle(element, style, value) {
+  let cur = element.style[style];
+  element.style[style] = value;
+  return () => {
+    element.style[style] = cur;
+  };
+} // Adds an event listener to an element, and returns a function to remove it.
+
+
+function $ece0076f06e8a828c60ba0c94f22f89$var$addEvent(target, event, handler, options) {
+  target.addEventListener(event, handler, options);
+  return () => {
+    target.removeEventListener(event, handler, options);
+  };
 }
 
+function $ece0076f06e8a828c60ba0c94f22f89$var$scrollIntoView(target) {
+  // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
+  let scrollable = getScrollParent(target);
+
+  if (scrollable !== document.documentElement && scrollable !== document.body) {
+    let scrollableTop = scrollable.getBoundingClientRect().top;
+    let targetTop = target.getBoundingClientRect().top;
+
+    if (targetTop > scrollableTop + target.clientHeight) {
+      scrollable.scrollTop += targetTop - scrollableTop;
+    }
+  }
+}
+
 const $b876e5ac9c98db373bf726bce3d604e$var$Context = _react.createContext(null);
@@ -564,0 +753,0 @@ /**

package.json

 {
   "name": "@react-aria/overlays",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Spectrum UI components in React",
@@ -21,9 +21,9 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/i18n": "^3.1.2",
-    "@react-aria/interactions": "^3.2.1",
-    "@react-aria/utils": "^3.3.0",
+    "@react-aria/i18n": "^3.1.3",
+    "@react-aria/interactions": "^3.3.0",
+    "@react-aria/utils": "^3.4.0",
     "@react-aria/visually-hidden": "^3.2.1",
     "@react-stately/overlays": "^3.1.1",
     "@react-types/button": "^3.2.1",
-    "@react-types/overlays": "^3.2.1",
+    "@react-types/overlays": "^3.3.0",
     "dom-helpers": "^3.3.1"
@@ -38,3 +38,3 @@ },
   },
-  "gitHead": "0778f71a3c13e1e24388a23b6d525e3b9f5b98f1"
+  "gitHead": "9f738a06ea4e256c8d975f00502b4b0bbabb8f65"
 }

src/calculatePosition.ts

@@ -194,15 +194,26 @@ /*
 
-  position[crossAxis] = childOffset[crossAxis] + crossOffset;
+  // button position
+  position[crossAxis] = childOffset[crossAxis];
   if (crossPlacement === 'center') {
+    //  + (button size / 2) - (overlay size / 2)
+    // at this point the overlay center should match the button center
     position[crossAxis] += (childOffset[crossSize] - overlaySize[crossSize]) / 2;
   } else if (crossPlacement !== crossAxis) {
+    //  + (button size) - (overlay size)
+    // at this point the overlay bottom should match the button bottom
     position[crossAxis] += (childOffset[crossSize] - overlaySize[crossSize]);
-  }
+  }/* else {
+    the overlay top should match the button top
+  } */
+  // add the crossOffset from props
+  position[crossAxis] += crossOffset;
 
-  // Ensure overlay sticks to target(ignore for overlays smaller than target)
-  if (childOffset[crossSize] < overlaySize[crossSize]) {
-    let positionForPositiveSideOverflow = Math.min(position[crossAxis], childOffset[crossAxis]);
-    position[crossAxis] = Math.max(positionForPositiveSideOverflow, childOffset[crossAxis] - overlaySize[crossSize] + childOffset[crossSize]);
-  }
+  // this is button center position - the overlay size + half of the button to align bottom of overlay with button center
+  let minViablePosition = childOffset[crossAxis] + (childOffset[crossSize] / 2) - overlaySize[crossSize];
+  // this is button position of center, aligns top of overlay with button center
+  let maxViablePosition = childOffset[crossAxis] + (childOffset[crossSize] / 2);
 
+  // clamp it into the range of the min/max positions
+  position[crossAxis] = Math.min(Math.max(minViablePosition, position[crossAxis]), maxViablePosition);
+
   // Floor these so the position isn't placed on a partial pixel, only whole pixels. Shouldn't matter if it was floored or ceiled, so chose one.
@@ -233,3 +244,3 @@ if (placement === axis) {
     // We want the distance between the top of the overlay to the bottom of the boundary
-    ? Math.max(0, 
+    ? Math.max(0,
       (boundaryDimensions.height + boundaryDimensions.top + boundaryDimensions.scroll.top) // this is the bottom of the boundary
@@ -240,3 +251,3 @@ - (containerOffsetWithBoundary.top + position.top) // this is the top of the overlay
     // We want the distance between the top of the trigger to the top of the boundary
-    : Math.max(0, 
+    : Math.max(0,
       (childOffset.top + containerOffsetWithBoundary.top) // this is the top of the trigger
@@ -331,3 +342,3 @@ - (boundaryDimensions.top + boundaryDimensions.scroll.top) // this is the top of the boundary
   let arrowPosition: Position = {};
-  arrowPosition[crossAxis] = childOffset[crossSize] > overlaySize[crossSize] ? null : (childOffset[crossAxis] - position[crossAxis] + childOffset[crossSize] / 2);
+  arrowPosition[crossAxis] = (childOffset[crossAxis] - position[crossAxis] + childOffset[crossSize] / 2);
 
@@ -334,0 +345,0 @@ return {

src/usePreventScroll.ts

@@ -13,3 +13,4 @@ /*
 
-import {useEffect} from 'react';
+import {chain, getScrollParent} from '@react-aria/utils';
+import {useLayoutEffect} from 'react';
 
@@ -21,2 +22,14 @@ interface PreventScrollOptions {
 
+const isMobileSafari =
+  typeof window !== 'undefined' && window.navigator != null
+    ? /AppleWebKit/.test(window.navigator.userAgent) && (
+      /^(iPhone|iPad)$/.test(window.navigator.platform) ||
+      // iPadOS 13 lies and says its a Mac, but we can distinguish by detecting touch support.
+      (window.navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
+    )
+    : false;
+
+// @ts-ignore
+const visualViewport = typeof window !== 'undefined' && window.visualViewport;
+
 /**
@@ -30,15 +43,199 @@ * Prevents scrolling on the document body on mount, and
 
-  useEffect(() => {
-    let {paddingRight, overflow} = document.body.style;
+  useLayoutEffect(() => {
+    if (isDisabled) {
+      return;
+    }
 
-    if (!isDisabled) {
-      document.body.style.paddingRight = `${window.innerWidth - document.documentElement.clientWidth}px`;
-      document.body.style.overflow = 'hidden';
+    if (isMobileSafari) {
+      return preventScrollMobileSafari();
+    } else {
+      return preventScrollStandard();
     }
-
-    return () => {
-      document.body.style.overflow = overflow;
-      document.body.style.paddingRight = paddingRight;
-    };
   }, [isDisabled]);
 }
+
+// For most browsers, all we need to do is set `overflow: hidden` on the root element, and
+// add some padding to prevent the page from shifting when the scrollbar is hidden.
+function preventScrollStandard() {
+  return chain(
+    setStyle(document.documentElement, 'paddingRight', `${window.innerWidth - document.documentElement.clientWidth}px`),
+    setStyle(document.documentElement, 'overflow', 'hidden')
+  );
+}
+
+// Mobile Safari is a whole different beast. Even with overflow: hidden,
+// it still scrolls the page in many situations:
+//
+// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
+// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of
+//    it, so it becomes scrollable.
+// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.
+//    This may cause even fixed position elements to scroll off the screen.
+// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always
+//    scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.
+//
+// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:
+//
+// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
+//    on the window.
+// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the
+//    top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.
+// 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
+// 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top
+//    of the page, which prevents it from scrolling the page. After the input is focused, scroll the element
+//    into view ourselves, without scrolling the whole page.
+// 5. Offset the body by the scroll position using a negative margin and scroll to the top. This should appear the
+//    same visually, but makes the actual scroll position always zero. This is required to make all of the
+//    above work or Safari will still try to scroll the page when focusing an input.
+// 6. As a last resort, handle window scroll events, and scroll back to the top. This can happen when attempting
+//    to navigate to an input with the next/previous buttons that's outside a modal.
+function preventScrollMobileSafari() {
+  let scrollable: Element;
+  let lastY = 0;
+  let onTouchStart = (e: TouchEvent) => {
+    // Store the nearest scrollable parent element from the element that the user touched.
+    scrollable = getScrollParent(e.target as Element);
+    if (scrollable === document.documentElement && scrollable === document.body) {
+      return;
+    }
+
+    lastY = e.changedTouches[0].pageY;
+  };
+
+  let onTouchMove = (e: TouchEvent) => {
+    // Prevent scrolling the window.
+    if (scrollable === document.documentElement || scrollable === document.body) {
+      e.preventDefault();
+      return;
+    }
+
+    // Prevent scrolling up when at the top and scrolling down when at the bottom
+    // of a nested scrollable area, otherwise mobile Safari will start scrolling
+    // the window instead. Unfortunately, this disables bounce scrolling when at
+    // the top but it's the best we can do.
+    let y = e.changedTouches[0].pageY;
+    let scrollTop = scrollable.scrollTop;
+    let bottom = scrollable.scrollHeight - scrollable.clientHeight;
+
+    if ((scrollTop <= 0 && y > lastY) || (scrollTop >= bottom && y < lastY)) {
+      e.preventDefault();
+    }
+
+    lastY = y;
+  };
+
+  let onTouchEnd = (e: TouchEvent) => {
+    let target = e.target as HTMLElement;
+    if (target.tagName === 'INPUT') {
+      e.preventDefault();
+
+      // Apply a transform to trick Safari into thinking the input is at the top of the page
+      // so it doesn't try to scroll it into view. When tapping on an input, this needs to
+      // be done before the "focus" event, so we have to focus the element ourselves.
+      target.style.transform = 'translateY(-2000px)';
+      target.focus();
+      requestAnimationFrame(() => {
+        target.style.transform = '';
+      });
+    }
+  };
+
+  let onFocus = (e: FocusEvent) => {
+    let target = e.target as HTMLElement;
+    if (target.tagName === 'INPUT') {
+      // Transform also needs to be applied in the focus event in cases where focus moves
+      // other than tapping on an input directly, e.g. the next/previous buttons in the
+      // software keyboard. In these cases, it seems applying the transform in the focus event
+      // is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️
+      target.style.transform = 'translateY(-2000px)';
+      requestAnimationFrame(() => {
+        target.style.transform = '';
+
+        // This will have prevented the browser from scrolling the focused element into view,
+        // so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
+        if (visualViewport) {
+          if (visualViewport.height < window.innerHeight) {
+            // If the keyboard is already visible, do this after one additional frame
+            // to wait for the transform to be removed.
+            requestAnimationFrame(() => {
+              scrollIntoView(target);
+            });
+          } else {
+            // Otherwise, wait for the visual viewport to resize before scrolling so we can
+            // measure the correct position to scroll to.
+            visualViewport.addEventListener('resize', () => scrollIntoView(target), {once: true});
+          }
+        }
+      });
+    }
+  };
+
+  let onWindowScroll = () => {
+    // Last resort. If the window scrolled, scroll it back to the top.
+    // It should always be at the top because the body will have a negative margin (see below).
+    window.scrollTo(0, 0);
+  };
+
+  // Record the original scroll position so we can restore it.
+  // Then apply a negative margin to the body to offset it by the scroll position. This will
+  // enable us to scroll the window to the top, which is required for the rest of this to work.
+  let scrollX = window.pageXOffset;
+  let scrollY = window.pageYOffset;
+  let restoreStyles = chain(
+    setStyle(document.documentElement, 'paddingRight', `${window.innerWidth - document.documentElement.clientWidth}px`),
+    setStyle(document.documentElement, 'overflow', 'hidden'),
+    setStyle(document.body, 'marginTop', `-${scrollY}px`)
+  );
+
+  // Scroll to the top. The negative margin on the body will make this appear the same.
+  window.scrollTo(0, 0);
+
+  let removeEvents = chain(
+    addEvent(document, 'touchstart', onTouchStart, {passive: false, capture: true}),
+    addEvent(document, 'touchmove', onTouchMove, {passive: false, capture: true}),
+    addEvent(document, 'touchend', onTouchEnd, {passive: false, capture: true}),
+    addEvent(document, 'focus', onFocus, true),
+    addEvent(window, 'scroll', onWindowScroll)
+  );
+
+  return () => {
+    // Restore styles and scroll the page back to where it was.
+    restoreStyles();
+    removeEvents();
+    window.scrollTo(scrollX, scrollY);
+  };
+}
+
+// Sets a CSS property on an element, and returns a function to revert it to the previous value.
+function setStyle(element: HTMLElement, style: string, value: string) {
+  let cur = element.style[style];
+  element.style[style] = value;
+  return () => {
+    element.style[style] = cur;
+  };
+}
+
+// Adds an event listener to an element, and returns a function to remove it.
+function addEvent<K extends keyof GlobalEventHandlersEventMap>(
+  target: EventTarget,
+  event: K,
+  handler: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,
+  options?: boolean | AddEventListenerOptions
+) {
+  target.addEventListener(event, handler, options);
+  return () => {
+    target.removeEventListener(event, handler, options);
+  };
+}
+
+function scrollIntoView(target: Element) {
+  // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
+  let scrollable = getScrollParent(target);
+  if (scrollable !== document.documentElement && scrollable !== document.body) {
+    let scrollableTop = scrollable.getBoundingClientRect().top;
+    let targetTop = target.getBoundingClientRect().top;
+    if (targetTop > scrollableTop + target.clientHeight) {
+      scrollable.scrollTop += targetTop - scrollableTop;
+    }
+  }
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

317017

increased by22.61%

Lines of code

3193

increased by19.01%

Published versions last two months

60

increased by1.69%

Dependency changes

• Updated@react-aria/i18n@^3.1.3

• Updated@react-aria/interactions@^3.3.0

• Updated@react-aria/utils@^3.4.0

• Updated@react-types/overlays@^3.3.0