@react-aria/overlays 3.22.0 → 3.23.0

package/dist/useOverlay.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AA6CD,MAAM,wCAAwC,EAAE;AAOzC,SAAS,0CAAW,KAAuB,EAAE,GAAuB;IACzE,IAAI,WACF,OAAO,qBACP,iBAAiB,UACjB,MAAM,iBACN,gBAAgB,kCAChB,4BAA4B,qCAC5B,4BAA4B,EAC7B,GAAG;IAEJ,wFAAwF;IACxF,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,QACF,sCAAgB,IAAI,CAAC;QAGvB,OAAO;YACL,IAAI,QAAQ,sCAAgB,OAAO,CAAC;YACpC,IAAI,SAAS,GACX,sCAAgB,MAAM,CAAC,OAAO;QAElC;IACF,GAAG;QAAC;QAAQ;KAAI;IAEhB,4EAA4E;IAC5E,IAAI,SAAS;QACX,IAAI,qCAAe,CAAC,sCAAgB,MAAM,GAAG,EAAE,KAAK,OAAO,SACzD;IAEJ;IAEA,IAAI,yBAAyB,CAAC;QAC5B,IAAI,CAAC,gCAAgC,6BAA6B,EAAE,MAAM,GACxE;YAAA,IAAI,qCAAe,CAAC,sCAAgB,MAAM,GAAG,EAAE,KAAK,KAAK;gBACvD,EAAE,eAAe;gBACjB,EAAE,cAAc;YAClB;QAAA;IAEJ;IAEA,IAAI,oBAAoB,CAAC;QACvB,IAAI,CAAC,gCAAgC,6BAA6B,EAAE,MAAM,GAAc;YACtF,IAAI,qCAAe,CAAC,sCAAgB,MAAM,GAAG,EAAE,KAAK,KAAK;gBACvD,EAAE,eAAe;gBACjB,EAAE,cAAc;YAClB;YACA;QACF;IACF;IAEA,wBAAwB;IACxB,IAAI,YAAY,CAAC;QACf,IAAI,EAAE,GAAG,KAAK,YAAY,CAAC,6BAA6B,CAAC,EAAE,WAAW,CAAC,WAAW,EAAE;YAClF,EAAE,eAAe;YACjB,EAAE,cAAc;YAChB;QACF;IACF;IAEA,kDAAkD;IAClD,CAAA,GAAA,yBAAiB,EAAE;aAAC;QAAK,mBAAmB,iBAAiB,SAAS,oBAAoB;gCAAM;IAAsB;IAEtH,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;QACtC,YAAY,CAAC;QACb,cAAc,CAAC;YACb,gFAAgF;YAChF,8GAA8G;YAC9G,6FAA6F;YAC7F,sDAAsD;YACtD,sDAAsD;YACtD,EAAE;YACF,2EAA2E;YAC3E,yEAAyE;YACzE,kEAAkE;YAClE,IAAI,CAAC,EAAE,aAAa,IAAI,CAAA,GAAA,oCAA4B,EAAE,EAAE,aAAa,GACnE;YAGF,IAAI,CAAC,gCAAgC,6BAA6B,EAAE,aAAa,GAC/E;QAEJ;IACF;IAEA,IAAI,wBAAwB,CAAA;QAC1B,wGAAwG;QACxG,IAAI,EAAE,MAAM,KAAK,EAAE,aAAa,EAC9B,EAAE,cAAc;IAEpB;IAEA,OAAO;QACL,cAAc;uBACZ;YACA,GAAG,gBAAgB;QACrB;QACA,eAAe;YACb,eAAe;QACjB;IACF;AACF","sources":["packages/@react-aria/overlays/src/useOverlay.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMAttributes} from '@react-types/shared';\nimport {isElementInChildOfActiveScope} from '@react-aria/focus';\nimport {RefObject, useEffect} from 'react';\nimport {useFocusWithin, useInteractOutside} from '@react-aria/interactions';\n\nexport interface AriaOverlayProps {\n  /** Whether the overlay is currently open. */\n  isOpen?: boolean,\n\n  /** Handler that is called when the overlay should close. */\n  onClose?: () => void,\n\n  /**\n   * Whether to close the overlay when the user interacts outside it.\n   * @default false\n   */\n  isDismissable?: boolean,\n\n  /** Whether the overlay should close when focus is lost or moves outside it. */\n  shouldCloseOnBlur?: boolean,\n\n  /**\n   * Whether pressing the escape key to close the overlay should be disabled.\n   * @default false\n   */\n  isKeyboardDismissDisabled?: boolean,\n\n  /**\n   * When user interacts with the argument element outside of the overlay ref,\n   * return true if onClose should be called.  This gives you a chance to filter\n   * out interaction with elements that should not dismiss the overlay.\n   * By default, onClose will always be called on interaction outside the overlay ref.\n   */\n  shouldCloseOnInteractOutside?: (element: Element) => boolean\n}\n\nexport interface OverlayAria {\n  /** Props to apply to the overlay container element. */\n  overlayProps: DOMAttributes,\n  /** Props to apply to the underlay element, if any. */\n  underlayProps: DOMAttributes\n}\n\nconst visibleOverlays: RefObject<Element>[] = [];\n\n/**\n * Provides the behavior for overlays such as dialogs, popovers, and menus.\n * Hides the overlay when the user interacts outside it, when the Escape key is pressed,\n * or optionally, on blur. Only the top-most overlay will close at once.\n */\nexport function useOverlay(props: AriaOverlayProps, ref: RefObject<Element>): OverlayAria {\n  let {\n    onClose,\n    shouldCloseOnBlur,\n    isOpen,\n    isDismissable = false,\n    isKeyboardDismissDisabled = false,\n    shouldCloseOnInteractOutside\n  } = props;\n\n  // Add the overlay ref to the stack of visible overlays on mount, and remove on unmount.\n  useEffect(() => {\n    if (isOpen) {\n      visibleOverlays.push(ref);\n    }\n\n    return () => {\n      let index = visibleOverlays.indexOf(ref);\n      if (index >= 0) {\n        visibleOverlays.splice(index, 1);\n      }\n    };\n  }, [isOpen, ref]);\n\n  // Only hide the overlay when it is the topmost visible overlay in the stack\n  let onHide = () => {\n    if (visibleOverlays[visibleOverlays.length - 1] === ref && onClose) {\n      onClose();\n    }\n  };\n\n  let onInteractOutsideStart = (e: PointerEvent) => {\n    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {\n      if (visibleOverlays[visibleOverlays.length - 1] === ref) {\n        e.stopPropagation();\n        e.preventDefault();\n      }\n    }\n  };\n\n  let onInteractOutside = (e: PointerEvent) => {\n    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {\n      if (visibleOverlays[visibleOverlays.length - 1] === ref) {\n        e.stopPropagation();\n        e.preventDefault();\n      }\n      onHide();\n    }\n  };\n\n  // Handle the escape key\n  let onKeyDown = (e) => {\n    if (e.key === 'Escape' && !isKeyboardDismissDisabled && !e.nativeEvent.isComposing) {\n      e.stopPropagation();\n      e.preventDefault();\n      onHide();\n    }\n  };\n\n  // Handle clicking outside the overlay to close it\n  useInteractOutside({ref, onInteractOutside: isDismissable && isOpen ? onInteractOutside : null, onInteractOutsideStart});\n\n  let {focusWithinProps} = useFocusWithin({\n    isDisabled: !shouldCloseOnBlur,\n    onBlurWithin: (e) => {\n      // Do not close if relatedTarget is null, which means focus is lost to the body.\n      // That can happen when switching tabs, or due to a VoiceOver/Chrome bug with Control+Option+Arrow navigation.\n      // Clicking on the body to close the overlay should already be handled by useInteractOutside.\n      // https://github.com/adobe/react-spectrum/issues/4130\n      // https://github.com/adobe/react-spectrum/issues/4922\n      //\n      // If focus is moving into a child focus scope (e.g. menu inside a dialog),\n      // do not close the outer overlay. At this point, the active scope should\n      // still be the outer overlay, since blur events run before focus.\n      if (!e.relatedTarget || isElementInChildOfActiveScope(e.relatedTarget)) {\n        return;\n      }\n\n      if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget as Element)) {\n        onClose();\n      }\n    }\n  });\n\n  let onPointerDownUnderlay = e => {\n    // fixes a firefox issue that starts text selection https://bugzilla.mozilla.org/show_bug.cgi?id=1675846\n    if (e.target === e.currentTarget) {\n      e.preventDefault();\n    }\n  };\n\n  return {\n    overlayProps: {\n      onKeyDown,\n      ...focusWithinProps\n    },\n    underlayProps: {\n      onPointerDown: onPointerDownUnderlay\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useOverlay.module.js.map"}
+{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AA6CD,MAAM,wCAA+C,EAAE;AAOhD,SAAS,0CAAW,KAAuB,EAAE,GAA8B;IAChF,IAAI,WACF,OAAO,qBACP,iBAAiB,UACjB,MAAM,iBACN,gBAAgB,kCAChB,4BAA4B,qCAC5B,4BAA4B,EAC7B,GAAG;IAEJ,wFAAwF;IACxF,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,QACF,sCAAgB,IAAI,CAAC;QAGvB,OAAO;YACL,IAAI,QAAQ,sCAAgB,OAAO,CAAC;YACpC,IAAI,SAAS,GACX,sCAAgB,MAAM,CAAC,OAAO;QAElC;IACF,GAAG;QAAC;QAAQ;KAAI;IAEhB,4EAA4E;IAC5E,IAAI,SAAS;QACX,IAAI,qCAAe,CAAC,sCAAgB,MAAM,GAAG,EAAE,KAAK,OAAO,SACzD;IAEJ;IAEA,IAAI,yBAAyB,CAAC;QAC5B,IAAI,CAAC,gCAAgC,6BAA6B,EAAE,MAAM,GACxE;YAAA,IAAI,qCAAe,CAAC,sCAAgB,MAAM,GAAG,EAAE,KAAK,KAAK;gBACvD,EAAE,eAAe;gBACjB,EAAE,cAAc;YAClB;QAAA;IAEJ;IAEA,IAAI,oBAAoB,CAAC;QACvB,IAAI,CAAC,gCAAgC,6BAA6B,EAAE,MAAM,GAAc;YACtF,IAAI,qCAAe,CAAC,sCAAgB,MAAM,GAAG,EAAE,KAAK,KAAK;gBACvD,EAAE,eAAe;gBACjB,EAAE,cAAc;YAClB;YACA;QACF;IACF;IAEA,wBAAwB;IACxB,IAAI,YAAY,CAAC;QACf,IAAI,EAAE,GAAG,KAAK,YAAY,CAAC,6BAA6B,CAAC,EAAE,WAAW,CAAC,WAAW,EAAE;YAClF,EAAE,eAAe;YACjB,EAAE,cAAc;YAChB;QACF;IACF;IAEA,kDAAkD;IAClD,CAAA,GAAA,yBAAiB,EAAE;aAAC;QAAK,mBAAmB,iBAAiB,SAAS,oBAAoB;gCAAM;IAAsB;IAEtH,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;QACtC,YAAY,CAAC;QACb,cAAc,CAAC;YACb,gFAAgF;YAChF,8GAA8G;YAC9G,6FAA6F;YAC7F,sDAAsD;YACtD,sDAAsD;YACtD,EAAE;YACF,2EAA2E;YAC3E,yEAAyE;YACzE,kEAAkE;YAClE,IAAI,CAAC,EAAE,aAAa,IAAI,CAAA,GAAA,oCAA4B,EAAE,EAAE,aAAa,GACnE;YAGF,IAAI,CAAC,gCAAgC,6BAA6B,EAAE,aAAa,GAC/E;QAEJ;IACF;IAEA,IAAI,wBAAwB,CAAA;QAC1B,wGAAwG;QACxG,IAAI,EAAE,MAAM,KAAK,EAAE,aAAa,EAC9B,EAAE,cAAc;IAEpB;IAEA,OAAO;QACL,cAAc;uBACZ;YACA,GAAG,gBAAgB;QACrB;QACA,eAAe;YACb,eAAe;QACjB;IACF;AACF","sources":["packages/@react-aria/overlays/src/useOverlay.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {isElementInChildOfActiveScope} from '@react-aria/focus';\nimport {useEffect} from 'react';\nimport {useFocusWithin, useInteractOutside} from '@react-aria/interactions';\n\nexport interface AriaOverlayProps {\n  /** Whether the overlay is currently open. */\n  isOpen?: boolean,\n\n  /** Handler that is called when the overlay should close. */\n  onClose?: () => void,\n\n  /**\n   * Whether to close the overlay when the user interacts outside it.\n   * @default false\n   */\n  isDismissable?: boolean,\n\n  /** Whether the overlay should close when focus is lost or moves outside it. */\n  shouldCloseOnBlur?: boolean,\n\n  /**\n   * Whether pressing the escape key to close the overlay should be disabled.\n   * @default false\n   */\n  isKeyboardDismissDisabled?: boolean,\n\n  /**\n   * When user interacts with the argument element outside of the overlay ref,\n   * return true if onClose should be called.  This gives you a chance to filter\n   * out interaction with elements that should not dismiss the overlay.\n   * By default, onClose will always be called on interaction outside the overlay ref.\n   */\n  shouldCloseOnInteractOutside?: (element: Element) => boolean\n}\n\nexport interface OverlayAria {\n  /** Props to apply to the overlay container element. */\n  overlayProps: DOMAttributes,\n  /** Props to apply to the underlay element, if any. */\n  underlayProps: DOMAttributes\n}\n\nconst visibleOverlays: RefObject<Element | null>[] = [];\n\n/**\n * Provides the behavior for overlays such as dialogs, popovers, and menus.\n * Hides the overlay when the user interacts outside it, when the Escape key is pressed,\n * or optionally, on blur. Only the top-most overlay will close at once.\n */\nexport function useOverlay(props: AriaOverlayProps, ref: RefObject<Element | null>): OverlayAria {\n  let {\n    onClose,\n    shouldCloseOnBlur,\n    isOpen,\n    isDismissable = false,\n    isKeyboardDismissDisabled = false,\n    shouldCloseOnInteractOutside\n  } = props;\n\n  // Add the overlay ref to the stack of visible overlays on mount, and remove on unmount.\n  useEffect(() => {\n    if (isOpen) {\n      visibleOverlays.push(ref);\n    }\n\n    return () => {\n      let index = visibleOverlays.indexOf(ref);\n      if (index >= 0) {\n        visibleOverlays.splice(index, 1);\n      }\n    };\n  }, [isOpen, ref]);\n\n  // Only hide the overlay when it is the topmost visible overlay in the stack\n  let onHide = () => {\n    if (visibleOverlays[visibleOverlays.length - 1] === ref && onClose) {\n      onClose();\n    }\n  };\n\n  let onInteractOutsideStart = (e: PointerEvent) => {\n    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {\n      if (visibleOverlays[visibleOverlays.length - 1] === ref) {\n        e.stopPropagation();\n        e.preventDefault();\n      }\n    }\n  };\n\n  let onInteractOutside = (e: PointerEvent) => {\n    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {\n      if (visibleOverlays[visibleOverlays.length - 1] === ref) {\n        e.stopPropagation();\n        e.preventDefault();\n      }\n      onHide();\n    }\n  };\n\n  // Handle the escape key\n  let onKeyDown = (e) => {\n    if (e.key === 'Escape' && !isKeyboardDismissDisabled && !e.nativeEvent.isComposing) {\n      e.stopPropagation();\n      e.preventDefault();\n      onHide();\n    }\n  };\n\n  // Handle clicking outside the overlay to close it\n  useInteractOutside({ref, onInteractOutside: isDismissable && isOpen ? onInteractOutside : null, onInteractOutsideStart});\n\n  let {focusWithinProps} = useFocusWithin({\n    isDisabled: !shouldCloseOnBlur,\n    onBlurWithin: (e) => {\n      // Do not close if relatedTarget is null, which means focus is lost to the body.\n      // That can happen when switching tabs, or due to a VoiceOver/Chrome bug with Control+Option+Arrow navigation.\n      // Clicking on the body to close the overlay should already be handled by useInteractOutside.\n      // https://github.com/adobe/react-spectrum/issues/4130\n      // https://github.com/adobe/react-spectrum/issues/4922\n      //\n      // If focus is moving into a child focus scope (e.g. menu inside a dialog),\n      // do not close the outer overlay. At this point, the active scope should\n      // still be the outer overlay, since blur events run before focus.\n      if (!e.relatedTarget || isElementInChildOfActiveScope(e.relatedTarget)) {\n        return;\n      }\n\n      if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget as Element)) {\n        onClose();\n      }\n    }\n  });\n\n  let onPointerDownUnderlay = e => {\n    // fixes a firefox issue that starts text selection https://bugzilla.mozilla.org/show_bug.cgi?id=1675846\n    if (e.target === e.currentTarget) {\n      e.preventDefault();\n    }\n  };\n\n  return {\n    overlayProps: {\n      onKeyDown,\n      ...focusWithinProps\n    },\n    underlayProps: {\n      onPointerDown: onPointerDownUnderlay\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useOverlay.module.js.map"}

package/dist/useOverlayPosition.main.js

@@ -26,10 +26,10 @@ $parcel$export(module.exports, "useOverlayPosition", () => $cd94b4896dd97759$exp
 
 
 // @ts-ignore
-let $cd94b4896dd97759$var$visualViewport = typeof document !== "undefined" && window.visualViewport;
+let $cd94b4896dd97759$var$visualViewport = typeof document !== 'undefined' && window.visualViewport;
 function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
     let { direction: direction } = (0, $6TXnl$reactariai18n.useLocale)();
-    let { arrowSize: arrowSize = 0, targetRef: targetRef, overlayRef: overlayRef, scrollRef: scrollRef = overlayRef, placement: placement = "bottom", containerPadding: containerPadding = 12, shouldFlip: shouldFlip = true, boundaryElement: boundaryElement = typeof document !== "undefined" ? document.body : null, offset: offset = 0, crossOffset: crossOffset = 0, shouldUpdatePosition: shouldUpdatePosition = true, isOpen: isOpen = true, onClose: onClose, maxHeight: maxHeight, arrowBoundaryOffset: arrowBoundaryOffset = 0 } = props;
+    let { arrowSize: arrowSize = 0, targetRef: targetRef, overlayRef: overlayRef, scrollRef: scrollRef = overlayRef, placement: placement = 'bottom', containerPadding: containerPadding = 12, shouldFlip: shouldFlip = true, boundaryElement: boundaryElement = typeof document !== 'undefined' ? document.body : null, offset: offset = 0, crossOffset: crossOffset = 0, shouldUpdatePosition: shouldUpdatePosition = true, isOpen: isOpen = true, onClose: onClose, maxHeight: maxHeight, arrowBoundaryOffset: arrowBoundaryOffset = 0 } = props;
     let [position, setPosition] = (0, $6TXnl$react.useState)({
         position: {},
         arrowOffsetLeft: undefined,
@@ -64,16 +64,42 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
         isOpen
     ]);
     let updatePosition = (0, $6TXnl$react.useCallback)(()=>{
-        if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !scrollRef.current || !boundaryElement) return;
+        if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !boundaryElement) return;
         if (($cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.scale) !== lastScale.current) return;
+        // Determine a scroll anchor based on the focused element.
+        // This stores the offset of the anchor element from the scroll container
+        // so it can be restored after repositioning. This way if the overlay height
+        // changes, the focused element appears to stay in the same position.
+        let anchor = null;
+        if (scrollRef.current && scrollRef.current.contains(document.activeElement)) {
+            let anchorRect = document.activeElement.getBoundingClientRect();
+            let scrollRect = scrollRef.current.getBoundingClientRect();
+            // Anchor from the top if the offset is in the top half of the scrollable element,
+            // otherwise anchor from the bottom.
+            anchor = {
+                type: 'top',
+                offset: anchorRect.top - scrollRect.top
+            };
+            if (anchor.offset > scrollRect.height / 2) {
+                anchor.type = 'bottom';
+                anchor.offset = anchorRect.bottom - scrollRect.bottom;
+            }
+        }
         // 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.
-        if (!maxHeight && overlayRef.current) overlayRef.current.style.maxHeight = "none";
+        let overlay = overlayRef.current;
+        if (!maxHeight && overlayRef.current) {
+            var _window_visualViewport;
+            overlay.style.top = '0px';
+            overlay.style.bottom = '';
+            var _window_visualViewport_height;
+            overlay.style.maxHeight = ((_window_visualViewport_height = (_window_visualViewport = window.visualViewport) === null || _window_visualViewport === void 0 ? void 0 : _window_visualViewport.height) !== null && _window_visualViewport_height !== void 0 ? _window_visualViewport_height : window.innerHeight) + 'px';
+        }
         let position = (0, $5935ba4d7da2c103$exports.calculatePosition)({
             placement: $cd94b4896dd97759$var$translateRTL(placement, direction),
             overlayNode: overlayRef.current,
             targetNode: targetRef.current,
-            scrollNode: scrollRef.current,
+            scrollNode: scrollRef.current || overlayRef.current,
             padding: containerPadding,
             shouldFlip: shouldFlip,
             boundaryElement: boundaryElement,
@@ -85,8 +111,19 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
         });
         // 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.style[key] = position.position[key] + "px");
-        overlayRef.current.style.maxHeight = position.maxHeight != null ? position.maxHeight + "px" : undefined;
+        overlay.style.top = '';
+        overlay.style.bottom = '';
+        overlay.style.left = '';
+        overlay.style.right = '';
+        Object.keys(position.position).forEach((key)=>overlay.style[key] = position.position[key] + 'px');
+        overlay.style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' : undefined;
+        // Restore scroll position relative to anchor element.
+        if (anchor) {
+            let anchorRect = document.activeElement.getBoundingClientRect();
+            let scrollRect = scrollRef.current.getBoundingClientRect();
+            let newOffset = anchorRect[anchor.type] - scrollRect[anchor.type];
+            scrollRef.current.scrollTop += newOffset - anchor.offset;
+        }
         // Trigger a set state for a second render anyway for arrow positioning
         setPosition(position);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -101,6 +138,11 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
         ref: overlayRef,
         onResize: updatePosition
     });
+    // Update position when the target changes size (might need to flip).
+    (0, $6TXnl$reactariautils.useResizeObserver)({
+        ref: targetRef,
+        onResize: updatePosition
+    });
     // Reposition the overlay and do not close on scroll while the visual viewport is resizing.
     // This will ensure that overlays adjust their positioning when the iOS virtual keyboard appears.
     let isResizing = (0, $6TXnl$react.useRef)(false);
@@ -119,11 +161,11 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
         let onScroll = ()=>{
             if (isResizing.current) onResize();
         };
-        $cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.addEventListener("resize", onResize);
-        $cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.addEventListener("scroll", onScroll);
+        $cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.addEventListener('resize', onResize);
+        $cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.addEventListener('scroll', onScroll);
         return ()=>{
-            $cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.removeEventListener("resize", onResize);
-            $cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.removeEventListener("scroll", onScroll);
+            $cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.removeEventListener('resize', onResize);
+            $cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.removeEventListener('scroll', onScroll);
         };
     }, [
         updatePosition
@@ -141,19 +183,20 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
         isOpen: isOpen,
         onClose: onClose && close
     });
+    var _position_maxHeight;
     return {
         overlayProps: {
             style: {
-                position: "absolute",
+                position: 'absolute',
                 zIndex: 100000,
                 ...position.position,
-                maxHeight: position.maxHeight
+                maxHeight: (_position_maxHeight = position.maxHeight) !== null && _position_maxHeight !== void 0 ? _position_maxHeight : '100vh'
             }
         },
         placement: position.placement,
         arrowProps: {
-            "aria-hidden": "true",
-            role: "presentation",
+            'aria-hidden': 'true',
+            role: 'presentation',
             style: {
                 left: position.arrowOffsetLeft,
                 top: position.arrowOffsetTop
@@ -164,17 +207,17 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
 }
 function $cd94b4896dd97759$var$useResize(onResize) {
     (0, $6TXnl$reactariautils.useLayoutEffect)(()=>{
-        window.addEventListener("resize", onResize, false);
+        window.addEventListener('resize', onResize, false);
         return ()=>{
-            window.removeEventListener("resize", onResize, false);
+            window.removeEventListener('resize', onResize, false);
         };
     }, [
         onResize
     ]);
 }
 function $cd94b4896dd97759$var$translateRTL(position, direction) {
-    if (direction === "rtl") return position.replace("start", "right").replace("end", "left");
-    return position.replace("start", "left").replace("end", "right");
+    if (direction === 'rtl') return position.replace('start', 'right').replace('end', 'left');
+    return position.replace('start', 'left').replace('end', 'right');
 }
 
 

package/dist/useOverlayPosition.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/overlays/src/useOverlayPosition.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {calculatePosition, PositionResult} from './calculatePosition';\nimport {DOMAttributes} from '@react-types/shared';\nimport {Placement, PlacementAxis, PositionProps} from '@react-types/overlays';\nimport {RefObject, useCallback, useEffect, useRef, useState} from 'react';\nimport {useCloseOnScroll} from './useCloseOnScroll';\nimport {useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface AriaPositionProps extends PositionProps {\n  /**\n   * Cross size of the overlay arrow in pixels.\n   * @default 0\n   */\n  arrowSize?: number,\n  /**\n   * Element that that serves as the positioning boundary.\n   * @default document.body\n   */\n  boundaryElement?: Element,\n  /**\n   * The ref for the element which the overlay positions itself with respect to.\n   */\n  targetRef: RefObject<Element>,\n  /**\n   * The ref for the overlay element.\n   */\n  overlayRef: RefObject<Element>,\n  /**\n   * A ref for the scrollable region within the overlay.\n   * @default overlayRef\n   */\n  scrollRef?: RefObject<Element>,\n  /**\n   * Whether the overlay should update its position automatically.\n   * @default true\n   */\n  shouldUpdatePosition?: boolean,\n  /** Handler that is called when the overlay should close. */\n  onClose?: () => void,\n  /**\n   * The maxHeight specified for the overlay element.\n   * By default, it will take all space up to the current viewport height.\n   */\n  maxHeight?: number,\n  /**\n   * The minimum distance the arrow's edge should be from the edge of the overlay element.\n   * @default 0\n   */\n  arrowBoundaryOffset?: number\n}\n\nexport interface PositionAria {\n  /** Props for the overlay container element. */\n  overlayProps: DOMAttributes,\n  /** Props for the overlay tip arrow if any. */\n  arrowProps: DOMAttributes,\n  /** Placement of the overlay with respect to the overlay trigger. */\n  placement: PlacementAxis,\n  /** Updates the position of the overlay. */\n  updatePosition(): void\n}\n\n// @ts-ignore\nlet visualViewport = typeof document !== 'undefined' && window.visualViewport;\n\n/**\n * Handles positioning overlays like popovers and menus relative to a trigger\n * element, and updating the position when the window resizes.\n */\nexport function useOverlayPosition(props: AriaPositionProps): PositionAria {\n  let {direction} = useLocale();\n  let {\n    arrowSize = 0,\n    targetRef,\n    overlayRef,\n    scrollRef = overlayRef,\n    placement = 'bottom' as Placement,\n    containerPadding = 12,\n    shouldFlip = true,\n    boundaryElement = typeof document !== 'undefined' ? document.body : null,\n    offset = 0,\n    crossOffset = 0,\n    shouldUpdatePosition = true,\n    isOpen = true,\n    onClose,\n    maxHeight,\n    arrowBoundaryOffset = 0\n  } = props;\n  let [position, setPosition] = useState<PositionResult>({\n    position: {},\n    arrowOffsetLeft: undefined,\n    arrowOffsetTop: undefined,\n    maxHeight: undefined,\n    placement: undefined\n  });\n\n  let deps = [\n    shouldUpdatePosition,\n    placement,\n    overlayRef.current,\n    targetRef.current,\n    scrollRef.current,\n    containerPadding,\n    shouldFlip,\n    boundaryElement,\n    offset,\n    crossOffset,\n    isOpen,\n    direction,\n    maxHeight,\n    arrowBoundaryOffset,\n    arrowSize\n  ];\n\n  // Note, the position freezing breaks if body sizes itself dynamicly with the visual viewport but that might\n  // just be a non-realistic use case\n  // Upon opening a overlay, record the current visual viewport scale so we can freeze the overlay styles\n  let lastScale = useRef(visualViewport?.scale);\n  useEffect(() => {\n    if (isOpen) {\n      lastScale.current = visualViewport?.scale;\n    }\n  }, [isOpen]);\n\n  let updatePosition = useCallback(() => {\n    if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !scrollRef.current || !boundaryElement) {\n      return;\n    }\n\n    if (visualViewport?.scale !== lastScale.current) {\n      return;\n    }\n\n    // Always reset the overlay's previous max height if not defined by the user so that we can compensate for\n    // RAC collections populating after a second render and properly set a correct max height + positioning when it populates.\n    if (!maxHeight && overlayRef.current) {\n      (overlayRef.current as HTMLElement).style.maxHeight = 'none';\n    }\n\n    let position = calculatePosition({\n      placement: translateRTL(placement, direction),\n      overlayNode: overlayRef.current,\n      targetNode: targetRef.current,\n      scrollNode: scrollRef.current,\n      padding: containerPadding,\n      shouldFlip,\n      boundaryElement,\n      offset,\n      crossOffset,\n      maxHeight,\n      arrowSize,\n      arrowBoundaryOffset\n    });\n\n    // Modify overlay styles directly so positioning happens immediately without the need of a second render\n    // This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers\n    Object.keys(position.position).forEach(key => (overlayRef.current as HTMLElement).style[key] = position.position[key] + 'px');\n    (overlayRef.current as HTMLElement).style.maxHeight = position.maxHeight != null ?  position.maxHeight + 'px' : undefined;\n\n    // Trigger a set state for a second render anyway for arrow positioning\n    setPosition(position);\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n\n  // Update position when anything changes\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useLayoutEffect(updatePosition, deps);\n\n  // Update position on window resize\n  useResize(updatePosition);\n\n  // Update position when the overlay changes size (might need to flip).\n  useResizeObserver({\n    ref: overlayRef,\n    onResize: updatePosition\n  });\n\n  // Reposition the overlay and do not close on scroll while the visual viewport is resizing.\n  // This will ensure that overlays adjust their positioning when the iOS virtual keyboard appears.\n  let isResizing = useRef(false);\n  useLayoutEffect(() => {\n    let timeout: ReturnType<typeof setTimeout>;\n    let onResize = () => {\n      isResizing.current = true;\n      clearTimeout(timeout);\n\n      timeout = setTimeout(() => {\n        isResizing.current = false;\n      }, 500);\n\n      updatePosition();\n    };\n\n    // Only reposition the overlay if a scroll event happens immediately as a result of resize (aka the virtual keyboard has appears)\n    // We don't want to reposition the overlay if the user has pinch zoomed in and is scrolling the viewport around.\n    let onScroll = () => {\n      if (isResizing.current) {\n        onResize();\n      }\n    };\n\n    visualViewport?.addEventListener('resize', onResize);\n    visualViewport?.addEventListener('scroll', onScroll);\n    return () => {\n      visualViewport?.removeEventListener('resize', onResize);\n      visualViewport?.removeEventListener('scroll', onScroll);\n    };\n  }, [updatePosition]);\n\n  let close = useCallback(() => {\n    if (!isResizing.current) {\n      onClose();\n    }\n  }, [onClose, isResizing]);\n\n  // When scrolling a parent scrollable region of the trigger (other than the body),\n  // we hide the popover. Otherwise, its position would be incorrect.\n  useCloseOnScroll({\n    triggerRef: targetRef,\n    isOpen,\n    onClose: onClose && close\n  });\n\n  return {\n    overlayProps: {\n      style: {\n        position: 'absolute',\n        zIndex: 100000, // should match the z-index in ModalTrigger\n        ...position.position,\n        maxHeight: position.maxHeight\n      }\n    },\n    placement: position.placement,\n    arrowProps: {\n      'aria-hidden': 'true',\n      role: 'presentation',\n      style: {\n        left: position.arrowOffsetLeft,\n        top: position.arrowOffsetTop\n      }\n    },\n    updatePosition\n  };\n}\n\nfunction useResize(onResize) {\n  useLayoutEffect(() => {\n    window.addEventListener('resize', onResize, false);\n    return () => {\n      window.removeEventListener('resize', onResize, false);\n    };\n  }, [onResize]);\n}\n\nfunction translateRTL(position, direction) {\n  if (direction === 'rtl') {\n    return position.replace('start', 'right').replace('end', 'left');\n  }\n  return position.replace('start', 'left').replace('end', 'right');\n}\n"],"names":[],"version":3,"file":"useOverlayPosition.main.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/overlays/src/useOverlayPosition.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {calculatePosition, PositionResult} from './calculatePosition';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {Placement, PlacementAxis, PositionProps} from '@react-types/overlays';\nimport {useCallback, useEffect, useRef, useState} from 'react';\nimport {useCloseOnScroll} from './useCloseOnScroll';\nimport {useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface AriaPositionProps extends PositionProps {\n  /**\n   * Cross size of the overlay arrow in pixels.\n   * @default 0\n   */\n  arrowSize?: number,\n  /**\n   * Element that that serves as the positioning boundary.\n   * @default document.body\n   */\n  boundaryElement?: Element,\n  /**\n   * The ref for the element which the overlay positions itself with respect to.\n   */\n  targetRef: RefObject<Element | null>,\n  /**\n   * The ref for the overlay element.\n   */\n  overlayRef: RefObject<Element | null>,\n  /**\n   * A ref for the scrollable region within the overlay.\n   * @default overlayRef\n   */\n  scrollRef?: RefObject<Element | null>,\n  /**\n   * Whether the overlay should update its position automatically.\n   * @default true\n   */\n  shouldUpdatePosition?: boolean,\n  /** Handler that is called when the overlay should close. */\n  onClose?: () => void,\n  /**\n   * The maxHeight specified for the overlay element.\n   * By default, it will take all space up to the current viewport height.\n   */\n  maxHeight?: number,\n  /**\n   * The minimum distance the arrow's edge should be from the edge of the overlay element.\n   * @default 0\n   */\n  arrowBoundaryOffset?: number\n}\n\nexport interface PositionAria {\n  /** Props for the overlay container element. */\n  overlayProps: DOMAttributes,\n  /** Props for the overlay tip arrow if any. */\n  arrowProps: DOMAttributes,\n  /** Placement of the overlay with respect to the overlay trigger. */\n  placement: PlacementAxis,\n  /** Updates the position of the overlay. */\n  updatePosition(): void\n}\n\ninterface ScrollAnchor {\n  type: 'top' | 'bottom',\n  offset: number\n}\n\n// @ts-ignore\nlet visualViewport = typeof document !== 'undefined' && window.visualViewport;\n\n/**\n * Handles positioning overlays like popovers and menus relative to a trigger\n * element, and updating the position when the window resizes.\n */\nexport function useOverlayPosition(props: AriaPositionProps): PositionAria {\n  let {direction} = useLocale();\n  let {\n    arrowSize = 0,\n    targetRef,\n    overlayRef,\n    scrollRef = overlayRef,\n    placement = 'bottom' as Placement,\n    containerPadding = 12,\n    shouldFlip = true,\n    boundaryElement = typeof document !== 'undefined' ? document.body : null,\n    offset = 0,\n    crossOffset = 0,\n    shouldUpdatePosition = true,\n    isOpen = true,\n    onClose,\n    maxHeight,\n    arrowBoundaryOffset = 0\n  } = props;\n  let [position, setPosition] = useState<PositionResult>({\n    position: {},\n    arrowOffsetLeft: undefined,\n    arrowOffsetTop: undefined,\n    maxHeight: undefined,\n    placement: undefined\n  });\n\n  let deps = [\n    shouldUpdatePosition,\n    placement,\n    overlayRef.current,\n    targetRef.current,\n    scrollRef.current,\n    containerPadding,\n    shouldFlip,\n    boundaryElement,\n    offset,\n    crossOffset,\n    isOpen,\n    direction,\n    maxHeight,\n    arrowBoundaryOffset,\n    arrowSize\n  ];\n\n  // Note, the position freezing breaks if body sizes itself dynamicly with the visual viewport but that might\n  // just be a non-realistic use case\n  // Upon opening a overlay, record the current visual viewport scale so we can freeze the overlay styles\n  let lastScale = useRef(visualViewport?.scale);\n  useEffect(() => {\n    if (isOpen) {\n      lastScale.current = visualViewport?.scale;\n    }\n  }, [isOpen]);\n\n  let updatePosition = useCallback(() => {\n    if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !boundaryElement) {\n      return;\n    }\n\n    if (visualViewport?.scale !== lastScale.current) {\n      return;\n    }\n\n    // Determine a scroll anchor based on the focused element.\n    // This stores the offset of the anchor element from the scroll container\n    // so it can be restored after repositioning. This way if the overlay height\n    // changes, the focused element appears to stay in the same position.\n    let anchor: ScrollAnchor | null = null;\n    if (scrollRef.current && scrollRef.current.contains(document.activeElement)) {\n      let anchorRect = document.activeElement.getBoundingClientRect();\n      let scrollRect = scrollRef.current.getBoundingClientRect();\n      // Anchor from the top if the offset is in the top half of the scrollable element,\n      // otherwise anchor from the bottom.\n      anchor = {\n        type: 'top',\n        offset: anchorRect.top - scrollRect.top\n      };\n      if (anchor.offset > scrollRect.height / 2) {\n        anchor.type = 'bottom';\n        anchor.offset = anchorRect.bottom - scrollRect.bottom;\n      }\n    }\n\n    // Always reset the overlay's previous max height if not defined by the user so that we can compensate for\n    // RAC collections populating after a second render and properly set a correct max height + positioning when it populates.\n    let overlay = (overlayRef.current as HTMLElement);\n    if (!maxHeight && overlayRef.current) {\n      overlay.style.top = '0px';\n      overlay.style.bottom = '';\n      overlay.style.maxHeight = (window.visualViewport?.height ?? window.innerHeight) + 'px';\n    }\n\n    let position = calculatePosition({\n      placement: translateRTL(placement, direction),\n      overlayNode: overlayRef.current,\n      targetNode: targetRef.current,\n      scrollNode: scrollRef.current || overlayRef.current,\n      padding: containerPadding,\n      shouldFlip,\n      boundaryElement,\n      offset,\n      crossOffset,\n      maxHeight,\n      arrowSize,\n      arrowBoundaryOffset\n    });\n\n    // Modify overlay styles directly so positioning happens immediately without the need of a second render\n    // This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers\n    overlay.style.top = '';\n    overlay.style.bottom = '';\n    overlay.style.left = '';\n    overlay.style.right = '';\n\n    Object.keys(position.position).forEach(key => overlay.style[key] = position.position[key] + 'px');\n    overlay.style.maxHeight = position.maxHeight != null ?  position.maxHeight + 'px' : undefined;\n\n    // Restore scroll position relative to anchor element.\n    if (anchor) {\n      let anchorRect = document.activeElement.getBoundingClientRect();\n      let scrollRect = scrollRef.current.getBoundingClientRect();\n      let newOffset = anchorRect[anchor.type] - scrollRect[anchor.type];\n      scrollRef.current.scrollTop += newOffset - anchor.offset;\n    }\n\n    // Trigger a set state for a second render anyway for arrow positioning\n    setPosition(position);\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n\n  // Update position when anything changes\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useLayoutEffect(updatePosition, deps);\n\n  // Update position on window resize\n  useResize(updatePosition);\n\n  // Update position when the overlay changes size (might need to flip).\n  useResizeObserver({\n    ref: overlayRef,\n    onResize: updatePosition\n  });\n\n  // Update position when the target changes size (might need to flip).\n  useResizeObserver({\n    ref: targetRef,\n    onResize: updatePosition\n  });\n\n  // Reposition the overlay and do not close on scroll while the visual viewport is resizing.\n  // This will ensure that overlays adjust their positioning when the iOS virtual keyboard appears.\n  let isResizing = useRef(false);\n  useLayoutEffect(() => {\n    let timeout: ReturnType<typeof setTimeout>;\n    let onResize = () => {\n      isResizing.current = true;\n      clearTimeout(timeout);\n\n      timeout = setTimeout(() => {\n        isResizing.current = false;\n      }, 500);\n\n      updatePosition();\n    };\n\n    // Only reposition the overlay if a scroll event happens immediately as a result of resize (aka the virtual keyboard has appears)\n    // We don't want to reposition the overlay if the user has pinch zoomed in and is scrolling the viewport around.\n    let onScroll = () => {\n      if (isResizing.current) {\n        onResize();\n      }\n    };\n\n    visualViewport?.addEventListener('resize', onResize);\n    visualViewport?.addEventListener('scroll', onScroll);\n    return () => {\n      visualViewport?.removeEventListener('resize', onResize);\n      visualViewport?.removeEventListener('scroll', onScroll);\n    };\n  }, [updatePosition]);\n\n  let close = useCallback(() => {\n    if (!isResizing.current) {\n      onClose();\n    }\n  }, [onClose, isResizing]);\n\n  // When scrolling a parent scrollable region of the trigger (other than the body),\n  // we hide the popover. Otherwise, its position would be incorrect.\n  useCloseOnScroll({\n    triggerRef: targetRef,\n    isOpen,\n    onClose: onClose && close\n  });\n\n  return {\n    overlayProps: {\n      style: {\n        position: 'absolute',\n        zIndex: 100000, // should match the z-index in ModalTrigger\n        ...position.position,\n        maxHeight: position.maxHeight ?? '100vh'\n      }\n    },\n    placement: position.placement,\n    arrowProps: {\n      'aria-hidden': 'true',\n      role: 'presentation',\n      style: {\n        left: position.arrowOffsetLeft,\n        top: position.arrowOffsetTop\n      }\n    },\n    updatePosition\n  };\n}\n\nfunction useResize(onResize) {\n  useLayoutEffect(() => {\n    window.addEventListener('resize', onResize, false);\n    return () => {\n      window.removeEventListener('resize', onResize, false);\n    };\n  }, [onResize]);\n}\n\nfunction translateRTL(position, direction) {\n  if (direction === 'rtl') {\n    return position.replace('start', 'right').replace('end', 'left');\n  }\n  return position.replace('start', 'left').replace('end', 'right');\n}\n"],"names":[],"version":3,"file":"useOverlayPosition.main.js.map"}

package/dist/useOverlayPosition.mjs

@@ -20,10 +20,10 @@ import {useLocale as $39EOa$useLocale} from "@react-aria/i18n";
 
 
 // @ts-ignore
-let $2a41e45df1593e64$var$visualViewport = typeof document !== "undefined" && window.visualViewport;
+let $2a41e45df1593e64$var$visualViewport = typeof document !== 'undefined' && window.visualViewport;
 function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
     let { direction: direction } = (0, $39EOa$useLocale)();
-    let { arrowSize: arrowSize = 0, targetRef: targetRef, overlayRef: overlayRef, scrollRef: scrollRef = overlayRef, placement: placement = "bottom", containerPadding: containerPadding = 12, shouldFlip: shouldFlip = true, boundaryElement: boundaryElement = typeof document !== "undefined" ? document.body : null, offset: offset = 0, crossOffset: crossOffset = 0, shouldUpdatePosition: shouldUpdatePosition = true, isOpen: isOpen = true, onClose: onClose, maxHeight: maxHeight, arrowBoundaryOffset: arrowBoundaryOffset = 0 } = props;
+    let { arrowSize: arrowSize = 0, targetRef: targetRef, overlayRef: overlayRef, scrollRef: scrollRef = overlayRef, placement: placement = 'bottom', containerPadding: containerPadding = 12, shouldFlip: shouldFlip = true, boundaryElement: boundaryElement = typeof document !== 'undefined' ? document.body : null, offset: offset = 0, crossOffset: crossOffset = 0, shouldUpdatePosition: shouldUpdatePosition = true, isOpen: isOpen = true, onClose: onClose, maxHeight: maxHeight, arrowBoundaryOffset: arrowBoundaryOffset = 0 } = props;
     let [position, setPosition] = (0, $39EOa$useState)({
         position: {},
         arrowOffsetLeft: undefined,
@@ -58,16 +58,42 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
         isOpen
     ]);
     let updatePosition = (0, $39EOa$useCallback)(()=>{
-        if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !scrollRef.current || !boundaryElement) return;
+        if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !boundaryElement) return;
         if (($2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.scale) !== lastScale.current) return;
+        // Determine a scroll anchor based on the focused element.
+        // This stores the offset of the anchor element from the scroll container
+        // so it can be restored after repositioning. This way if the overlay height
+        // changes, the focused element appears to stay in the same position.
+        let anchor = null;
+        if (scrollRef.current && scrollRef.current.contains(document.activeElement)) {
+            let anchorRect = document.activeElement.getBoundingClientRect();
+            let scrollRect = scrollRef.current.getBoundingClientRect();
+            // Anchor from the top if the offset is in the top half of the scrollable element,
+            // otherwise anchor from the bottom.
+            anchor = {
+                type: 'top',
+                offset: anchorRect.top - scrollRect.top
+            };
+            if (anchor.offset > scrollRect.height / 2) {
+                anchor.type = 'bottom';
+                anchor.offset = anchorRect.bottom - scrollRect.bottom;
+            }
+        }
         // 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.
-        if (!maxHeight && overlayRef.current) overlayRef.current.style.maxHeight = "none";
+        let overlay = overlayRef.current;
+        if (!maxHeight && overlayRef.current) {
+            var _window_visualViewport;
+            overlay.style.top = '0px';
+            overlay.style.bottom = '';
+            var _window_visualViewport_height;
+            overlay.style.maxHeight = ((_window_visualViewport_height = (_window_visualViewport = window.visualViewport) === null || _window_visualViewport === void 0 ? void 0 : _window_visualViewport.height) !== null && _window_visualViewport_height !== void 0 ? _window_visualViewport_height : window.innerHeight) + 'px';
+        }
         let position = (0, $edcf132a9284368a$export$b3ceb0cbf1056d98)({
             placement: $2a41e45df1593e64$var$translateRTL(placement, direction),
             overlayNode: overlayRef.current,
             targetNode: targetRef.current,
-            scrollNode: scrollRef.current,
+            scrollNode: scrollRef.current || overlayRef.current,
             padding: containerPadding,
             shouldFlip: shouldFlip,
             boundaryElement: boundaryElement,
@@ -79,8 +105,19 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
         });
         // 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.style[key] = position.position[key] + "px");
-        overlayRef.current.style.maxHeight = position.maxHeight != null ? position.maxHeight + "px" : undefined;
+        overlay.style.top = '';
+        overlay.style.bottom = '';
+        overlay.style.left = '';
+        overlay.style.right = '';
+        Object.keys(position.position).forEach((key)=>overlay.style[key] = position.position[key] + 'px');
+        overlay.style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' : undefined;
+        // Restore scroll position relative to anchor element.
+        if (anchor) {
+            let anchorRect = document.activeElement.getBoundingClientRect();
+            let scrollRect = scrollRef.current.getBoundingClientRect();
+            let newOffset = anchorRect[anchor.type] - scrollRect[anchor.type];
+            scrollRef.current.scrollTop += newOffset - anchor.offset;
+        }
         // Trigger a set state for a second render anyway for arrow positioning
         setPosition(position);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -95,6 +132,11 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
         ref: overlayRef,
         onResize: updatePosition
     });
+    // Update position when the target changes size (might need to flip).
+    (0, $39EOa$useResizeObserver)({
+        ref: targetRef,
+        onResize: updatePosition
+    });
     // Reposition the overlay and do not close on scroll while the visual viewport is resizing.
     // This will ensure that overlays adjust their positioning when the iOS virtual keyboard appears.
     let isResizing = (0, $39EOa$useRef)(false);
@@ -113,11 +155,11 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
         let onScroll = ()=>{
             if (isResizing.current) onResize();
         };
-        $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.addEventListener("resize", onResize);
-        $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.addEventListener("scroll", onScroll);
+        $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.addEventListener('resize', onResize);
+        $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.addEventListener('scroll', onScroll);
         return ()=>{
-            $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.removeEventListener("resize", onResize);
-            $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.removeEventListener("scroll", onScroll);
+            $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.removeEventListener('resize', onResize);
+            $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.removeEventListener('scroll', onScroll);
         };
     }, [
         updatePosition
@@ -135,19 +177,20 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
         isOpen: isOpen,
         onClose: onClose && close
     });
+    var _position_maxHeight;
     return {
         overlayProps: {
             style: {
-                position: "absolute",
+                position: 'absolute',
                 zIndex: 100000,
                 ...position.position,
-                maxHeight: position.maxHeight
+                maxHeight: (_position_maxHeight = position.maxHeight) !== null && _position_maxHeight !== void 0 ? _position_maxHeight : '100vh'
             }
         },
         placement: position.placement,
         arrowProps: {
-            "aria-hidden": "true",
-            role: "presentation",
+            'aria-hidden': 'true',
+            role: 'presentation',
             style: {
                 left: position.arrowOffsetLeft,
                 top: position.arrowOffsetTop
@@ -158,19 +201,19 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
 }
 function $2a41e45df1593e64$var$useResize(onResize) {
     (0, $39EOa$useLayoutEffect)(()=>{
-        window.addEventListener("resize", onResize, false);
+        window.addEventListener('resize', onResize, false);
         return ()=>{
-            window.removeEventListener("resize", onResize, false);
+            window.removeEventListener('resize', onResize, false);
         };
     }, [
         onResize
     ]);
 }
 function $2a41e45df1593e64$var$translateRTL(position, direction) {
-    if (direction === "rtl") return position.replace("start", "right").replace("end", "left");
-    return position.replace("start", "left").replace("end", "right");
+    if (direction === 'rtl') return position.replace('start', 'right').replace('end', 'left');
+    return position.replace('start', 'left').replace('end', 'right');
 }
 
 
 export {$2a41e45df1593e64$export$d39e1813b3bdd0e1 as useOverlayPosition};
-//# sourceMappingURL=useOverlayPosition.mjs.map
+//# sourceMappingURL=useOverlayPosition.module.js.map

package/dist/useOverlayPosition.module.js

@@ -20,10 +20,10 @@ import {useLocale as $39EOa$useLocale} from "@react-aria/i18n";
 
 
 // @ts-ignore
-let $2a41e45df1593e64$var$visualViewport = typeof document !== "undefined" && window.visualViewport;
+let $2a41e45df1593e64$var$visualViewport = typeof document !== 'undefined' && window.visualViewport;
 function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
     let { direction: direction } = (0, $39EOa$useLocale)();
-    let { arrowSize: arrowSize = 0, targetRef: targetRef, overlayRef: overlayRef, scrollRef: scrollRef = overlayRef, placement: placement = "bottom", containerPadding: containerPadding = 12, shouldFlip: shouldFlip = true, boundaryElement: boundaryElement = typeof document !== "undefined" ? document.body : null, offset: offset = 0, crossOffset: crossOffset = 0, shouldUpdatePosition: shouldUpdatePosition = true, isOpen: isOpen = true, onClose: onClose, maxHeight: maxHeight, arrowBoundaryOffset: arrowBoundaryOffset = 0 } = props;
+    let { arrowSize: arrowSize = 0, targetRef: targetRef, overlayRef: overlayRef, scrollRef: scrollRef = overlayRef, placement: placement = 'bottom', containerPadding: containerPadding = 12, shouldFlip: shouldFlip = true, boundaryElement: boundaryElement = typeof document !== 'undefined' ? document.body : null, offset: offset = 0, crossOffset: crossOffset = 0, shouldUpdatePosition: shouldUpdatePosition = true, isOpen: isOpen = true, onClose: onClose, maxHeight: maxHeight, arrowBoundaryOffset: arrowBoundaryOffset = 0 } = props;
     let [position, setPosition] = (0, $39EOa$useState)({
         position: {},
         arrowOffsetLeft: undefined,
@@ -58,16 +58,42 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
         isOpen
     ]);
     let updatePosition = (0, $39EOa$useCallback)(()=>{
-        if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !scrollRef.current || !boundaryElement) return;
+        if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !boundaryElement) return;
         if (($2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.scale) !== lastScale.current) return;
+        // Determine a scroll anchor based on the focused element.
+        // This stores the offset of the anchor element from the scroll container
+        // so it can be restored after repositioning. This way if the overlay height
+        // changes, the focused element appears to stay in the same position.
+        let anchor = null;
+        if (scrollRef.current && scrollRef.current.contains(document.activeElement)) {
+            let anchorRect = document.activeElement.getBoundingClientRect();
+            let scrollRect = scrollRef.current.getBoundingClientRect();
+            // Anchor from the top if the offset is in the top half of the scrollable element,
+            // otherwise anchor from the bottom.
+            anchor = {
+                type: 'top',
+                offset: anchorRect.top - scrollRect.top
+            };
+            if (anchor.offset > scrollRect.height / 2) {
+                anchor.type = 'bottom';
+                anchor.offset = anchorRect.bottom - scrollRect.bottom;
+            }
+        }
         // 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.
-        if (!maxHeight && overlayRef.current) overlayRef.current.style.maxHeight = "none";
+        let overlay = overlayRef.current;
+        if (!maxHeight && overlayRef.current) {
+            var _window_visualViewport;
+            overlay.style.top = '0px';
+            overlay.style.bottom = '';
+            var _window_visualViewport_height;
+            overlay.style.maxHeight = ((_window_visualViewport_height = (_window_visualViewport = window.visualViewport) === null || _window_visualViewport === void 0 ? void 0 : _window_visualViewport.height) !== null && _window_visualViewport_height !== void 0 ? _window_visualViewport_height : window.innerHeight) + 'px';
+        }
         let position = (0, $edcf132a9284368a$export$b3ceb0cbf1056d98)({
             placement: $2a41e45df1593e64$var$translateRTL(placement, direction),
             overlayNode: overlayRef.current,
             targetNode: targetRef.current,
-            scrollNode: scrollRef.current,
+            scrollNode: scrollRef.current || overlayRef.current,
             padding: containerPadding,
             shouldFlip: shouldFlip,
             boundaryElement: boundaryElement,
@@ -79,8 +105,19 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
         });
         // 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.style[key] = position.position[key] + "px");
-        overlayRef.current.style.maxHeight = position.maxHeight != null ? position.maxHeight + "px" : undefined;
+        overlay.style.top = '';
+        overlay.style.bottom = '';
+        overlay.style.left = '';
+        overlay.style.right = '';
+        Object.keys(position.position).forEach((key)=>overlay.style[key] = position.position[key] + 'px');
+        overlay.style.maxHeight = position.maxHeight != null ? position.maxHeight + 'px' : undefined;
+        // Restore scroll position relative to anchor element.
+        if (anchor) {
+            let anchorRect = document.activeElement.getBoundingClientRect();
+            let scrollRect = scrollRef.current.getBoundingClientRect();
+            let newOffset = anchorRect[anchor.type] - scrollRect[anchor.type];
+            scrollRef.current.scrollTop += newOffset - anchor.offset;
+        }
         // Trigger a set state for a second render anyway for arrow positioning
         setPosition(position);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -95,6 +132,11 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
         ref: overlayRef,
         onResize: updatePosition
     });
+    // Update position when the target changes size (might need to flip).
+    (0, $39EOa$useResizeObserver)({
+        ref: targetRef,
+        onResize: updatePosition
+    });
     // Reposition the overlay and do not close on scroll while the visual viewport is resizing.
     // This will ensure that overlays adjust their positioning when the iOS virtual keyboard appears.
     let isResizing = (0, $39EOa$useRef)(false);
@@ -113,11 +155,11 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
         let onScroll = ()=>{
             if (isResizing.current) onResize();
         };
-        $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.addEventListener("resize", onResize);
-        $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.addEventListener("scroll", onScroll);
+        $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.addEventListener('resize', onResize);
+        $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.addEventListener('scroll', onScroll);
         return ()=>{
-            $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.removeEventListener("resize", onResize);
-            $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.removeEventListener("scroll", onScroll);
+            $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.removeEventListener('resize', onResize);
+            $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.removeEventListener('scroll', onScroll);
         };
     }, [
         updatePosition
@@ -135,19 +177,20 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
         isOpen: isOpen,
         onClose: onClose && close
     });
+    var _position_maxHeight;
     return {
         overlayProps: {
             style: {
-                position: "absolute",
+                position: 'absolute',
                 zIndex: 100000,
                 ...position.position,
-                maxHeight: position.maxHeight
+                maxHeight: (_position_maxHeight = position.maxHeight) !== null && _position_maxHeight !== void 0 ? _position_maxHeight : '100vh'
             }
         },
         placement: position.placement,
         arrowProps: {
-            "aria-hidden": "true",
-            role: "presentation",
+            'aria-hidden': 'true',
+            role: 'presentation',
             style: {
                 left: position.arrowOffsetLeft,
                 top: position.arrowOffsetTop
@@ -158,17 +201,17 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
 }
 function $2a41e45df1593e64$var$useResize(onResize) {
     (0, $39EOa$useLayoutEffect)(()=>{
-        window.addEventListener("resize", onResize, false);
+        window.addEventListener('resize', onResize, false);
         return ()=>{
-            window.removeEventListener("resize", onResize, false);
+            window.removeEventListener('resize', onResize, false);
         };
     }, [
         onResize
     ]);
 }
 function $2a41e45df1593e64$var$translateRTL(position, direction) {
-    if (direction === "rtl") return position.replace("start", "right").replace("end", "left");
-    return position.replace("start", "left").replace("end", "right");
+    if (direction === 'rtl') return position.replace('start', 'right').replace('end', 'left');
+    return position.replace('start', 'left').replace('end', 'right');
 }