@react-aria/overlays 3.22.0 → 3.22.1

package/dist/usePreventScroll.module.js

@@ -12,18 +12,18 @@ import {useLayoutEffect as $7mMvr$useLayoutEffect, isIOS as $7mMvr$isIOS, chain
  * governing permissions and limitations under the License.
  */ 
 // @ts-ignore
-const $49c51c25361d4cd2$var$visualViewport = typeof document !== "undefined" && window.visualViewport;
+const $49c51c25361d4cd2$var$visualViewport = typeof document !== 'undefined' && window.visualViewport;
 // HTML input types that do not cause the software keyboard to appear.
 const $49c51c25361d4cd2$var$nonTextInputTypes = new Set([
-    "checkbox",
-    "radio",
-    "range",
-    "color",
-    "file",
-    "image",
-    "button",
-    "submit",
-    "reset"
+    'checkbox',
+    'radio',
+    'range',
+    'color',
+    'file',
+    'image',
+    'button',
+    'submit',
+    'reset'
 ]);
 // The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
 let $49c51c25361d4cd2$var$preventScrollCount = 0;
@@ -48,7 +48,7 @@ function $49c51c25361d4cd2$export$ee0f7cc6afcd1c18(options = {}) {
 // 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 $49c51c25361d4cd2$var$preventScrollStandard() {
-    return (0, $7mMvr$chain)($49c51c25361d4cd2$var$setStyle(document.documentElement, "paddingRight", `${window.innerWidth - document.documentElement.clientWidth}px`), $49c51c25361d4cd2$var$setStyle(document.documentElement, "overflow", "hidden"));
+    return (0, $7mMvr$chain)($49c51c25361d4cd2$var$setStyle(document.documentElement, 'paddingRight', `${window.innerWidth - document.documentElement.clientWidth}px`), $49c51c25361d4cd2$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:
@@ -87,7 +87,7 @@ function $49c51c25361d4cd2$var$preventScrollMobileSafari() {
         // 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.
-        if (scrollable instanceof HTMLElement && window.getComputedStyle(scrollable).overscrollBehavior === "auto") restoreScrollableStyles = $49c51c25361d4cd2$var$setStyle(scrollable, "overscrollBehavior", "contain");
+        if (scrollable instanceof HTMLElement && window.getComputedStyle(scrollable).overscrollBehavior === 'auto') restoreScrollableStyles = $49c51c25361d4cd2$var$setStyle(scrollable, 'overscrollBehavior', 'contain');
     };
     let onTouchMove = (e)=>{
         // Prevent scrolling the window.
@@ -112,10 +112,10 @@ function $49c51c25361d4cd2$var$preventScrollMobileSafari() {
             // 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.style.transform = 'translateY(-2000px)';
             target.focus();
             requestAnimationFrame(()=>{
-                target.style.transform = "";
+                target.style.transform = '';
             });
         }
         if (restoreScrollableStyles) restoreScrollableStyles();
@@ -128,9 +128,9 @@ function $49c51c25361d4cd2$var$preventScrollMobileSafari() {
             // 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)";
+            target.style.transform = 'translateY(-2000px)';
             requestAnimationFrame(()=>{
-                target.style.transform = "";
+                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 ($49c51c25361d4cd2$var$visualViewport) {
@@ -141,7 +141,7 @@ function $49c51c25361d4cd2$var$preventScrollMobileSafari() {
                     });
                     else // Otherwise, wait for the visual viewport to resize before scrolling so we can
                     // measure the correct position to scroll to.
-                    $49c51c25361d4cd2$var$visualViewport.addEventListener("resize", ()=>$49c51c25361d4cd2$var$scrollIntoView(target), {
+                    $49c51c25361d4cd2$var$visualViewport.addEventListener('resize', ()=>$49c51c25361d4cd2$var$scrollIntoView(target), {
                         once: true
                     });
                 }
@@ -161,22 +161,22 @@ function $49c51c25361d4cd2$var$preventScrollMobileSafari() {
         // 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;
-        restoreStyles = (0, $7mMvr$chain)($49c51c25361d4cd2$var$addEvent(window, "scroll", onWindowScroll), $49c51c25361d4cd2$var$setStyle(document.documentElement, "paddingRight", `${window.innerWidth - document.documentElement.clientWidth}px`), $49c51c25361d4cd2$var$setStyle(document.documentElement, "overflow", "hidden"), $49c51c25361d4cd2$var$setStyle(document.body, "marginTop", `-${scrollY}px`), ()=>{
+        restoreStyles = (0, $7mMvr$chain)($49c51c25361d4cd2$var$addEvent(window, 'scroll', onWindowScroll), $49c51c25361d4cd2$var$setStyle(document.documentElement, 'paddingRight', `${window.innerWidth - document.documentElement.clientWidth}px`), $49c51c25361d4cd2$var$setStyle(document.documentElement, 'overflow', 'hidden'), $49c51c25361d4cd2$var$setStyle(document.body, 'marginTop', `-${scrollY}px`), ()=>{
             window.scrollTo(scrollX, scrollY);
         });
         // Scroll to the top. The negative margin on the body will make this appear the same.
         window.scrollTo(0, 0);
     };
-    let removeEvents = (0, $7mMvr$chain)($49c51c25361d4cd2$var$addEvent(document, "touchstart", onTouchStart, {
+    let removeEvents = (0, $7mMvr$chain)($49c51c25361d4cd2$var$addEvent(document, 'touchstart', onTouchStart, {
         passive: false,
         capture: true
-    }), $49c51c25361d4cd2$var$addEvent(document, "touchmove", onTouchMove, {
+    }), $49c51c25361d4cd2$var$addEvent(document, 'touchmove', onTouchMove, {
         passive: false,
         capture: true
-    }), $49c51c25361d4cd2$var$addEvent(document, "touchend", onTouchEnd, {
+    }), $49c51c25361d4cd2$var$addEvent(document, 'touchend', onTouchEnd, {
         passive: false,
         capture: true
-    }), $49c51c25361d4cd2$var$addEvent(document, "focus", onFocus, true));
+    }), $49c51c25361d4cd2$var$addEvent(document, 'focus', onFocus, true));
     return ()=>{
         // Restore styles and scroll the page back to where it was.
         restoreScrollableStyles === null || restoreScrollableStyles === void 0 ? void 0 : restoreScrollableStyles();

package/dist/zh-CN.mjs

@@ -5,4 +5,4 @@ $d80a27deda7cdb3c$exports = {
 
 
 export {$d80a27deda7cdb3c$exports as default};
-//# sourceMappingURL=zh-CN.mjs.map
+//# sourceMappingURL=zh-CN.module.js.map

package/dist/zh-TW.mjs

@@ -5,4 +5,4 @@ $2b2734393847c884$exports = {
 
 
 export {$2b2734393847c884$exports as default};
-//# sourceMappingURL=zh-TW.mjs.map
+//# sourceMappingURL=zh-TW.module.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/overlays",
-  "version": "3.22.0",
+  "version": "3.22.1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,16 +22,16 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.17.0",
-    "@react-aria/i18n": "^3.11.0",
-    "@react-aria/interactions": "^3.21.2",
-    "@react-aria/ssr": "^3.9.3",
-    "@react-aria/utils": "^3.24.0",
-    "@react-aria/visually-hidden": "^3.8.11",
-    "@react-stately/overlays": "^3.6.6",
-    "@react-types/button": "^3.9.3",
-    "@react-types/overlays": "^3.8.6",
-    "@react-types/shared": "^3.23.0",
+    "@react-aria/focus": "^3.17.1",
+    "@react-aria/i18n": "^3.11.1",
+    "@react-aria/interactions": "^3.21.3",
+    "@react-aria/ssr": "^3.9.4",
+    "@react-aria/utils": "^3.24.1",
+    "@react-aria/visually-hidden": "^3.8.12",
+    "@react-stately/overlays": "^3.6.7",
+    "@react-types/button": "^3.9.4",
+    "@react-types/overlays": "^3.8.7",
+    "@react-types/shared": "^3.23.1",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -41,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f645f29edc1322153fd60af4640cbcab1d992dbd"
+  "gitHead": "b77d7d594dff4dcfb5359bffbcfd18142b146433"
 }

package/src/calculatePosition.ts

@@ -417,15 +417,15 @@ export function calculatePositionInternal(
 
   // All values are transformed so that 0 is at the top/left of the overlay depending on the orientation
   // Prefer the arrow being in the center of the trigger/overlay anchor element
-  let preferredArrowPosition = childOffset[crossAxis] + .5 * childOffset[crossSize] - overlaySize[crossAxis];
+  let preferredArrowPosition = childOffset[crossAxis] + .5 * childOffset[crossSize] - position[crossAxis];
 
   // Min/Max position limits for the arrow with respect to the overlay
   const arrowMinPosition = arrowSize / 2 + arrowBoundaryOffset;
   const arrowMaxPosition = overlaySize[crossSize] - (arrowSize / 2) - arrowBoundaryOffset;
 
   // Min/Max position limits for the arrow with respect to the trigger/overlay anchor element
-  const arrowOverlappingChildMinEdge = childOffset[crossAxis] - overlaySize[crossAxis] + (arrowSize / 2);
-  const arrowOverlappingChildMaxEdge = childOffset[crossAxis] + childOffset[crossSize] - overlaySize[crossAxis] - (arrowSize / 2);
+  const arrowOverlappingChildMinEdge = childOffset[crossAxis] - position[crossAxis] + (arrowSize / 2);
+  const arrowOverlappingChildMaxEdge = childOffset[crossAxis] + childOffset[crossSize] - position[crossAxis] - (arrowSize / 2);
 
   // Clamp the arrow positioning so that it always is within the bounds of the anchor and the overlay
   const arrowPositionOverlappingChild = clamp(preferredArrowPosition, arrowOverlappingChildMinEdge, arrowOverlappingChildMaxEdge);

package/src/useOverlayPosition.ts

@@ -145,8 +145,11 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
 
     // Always reset the overlay's previous max height if not defined by the user so that we can compensate for
     // RAC collections populating after a second render and properly set a correct max height + positioning when it populates.
+    let overlay = (overlayRef.current as HTMLElement);
     if (!maxHeight && overlayRef.current) {
-      (overlayRef.current as HTMLElement).style.maxHeight = 'none';
+      overlay.style.top = '0px';
+      overlay.style.bottom = '';
+      overlay.style.maxHeight = (window.visualViewport?.height ?? window.innerHeight) + 'px';
     }
 
     let position = calculatePosition({
@@ -166,8 +169,10 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
 
     // Modify overlay styles directly so positioning happens immediately without the need of a second render
     // This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers
-    Object.keys(position.position).forEach(key => (overlayRef.current as HTMLElement).style[key] = position.position[key] + 'px');
-    (overlayRef.current as HTMLElement).style.maxHeight = position.maxHeight != null ?  position.maxHeight + 'px' : undefined;
+    overlay.style.top = '';
+    overlay.style.bottom = '';
+    Object.keys(position.position).forEach(key => overlay.style[key] = position.position[key] + 'px');
+    overlay.style.maxHeight = position.maxHeight != null ?  position.maxHeight + 'px' : undefined;
 
     // Trigger a set state for a second render anyway for arrow positioning
     setPosition(position);