@react-aria/overlays 3.8.0 → 3.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/overlays",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,22 +18,23 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-aria/i18n": "^3.3.7",
-    "@react-aria/interactions": "^3.8.2",
-    "@react-aria/utils": "^3.11.3",
-    "@react-aria/visually-hidden": "^3.2.6",
-    "@react-stately/overlays": "^3.1.6",
-    "@react-types/button": "^3.4.4",
-    "@react-types/overlays": "^3.5.4",
-    "@react-types/shared": "^3.11.2",
-    "dom-helpers": "^3.3.1"
+    "@react-aria/i18n": "^3.4.0",
+    "@react-aria/interactions": "^3.9.0",
+    "@react-aria/utils": "^3.13.0",
+    "@react-aria/visually-hidden": "^3.3.0",
+    "@react-stately/overlays": "^3.3.0",
+    "@react-types/button": "^3.5.0",
+    "@react-types/overlays": "^3.6.0",
+    "@react-types/shared": "^3.13.0",
+    "dom-helpers": "^5.2.1",
+    "react-transition-group": "^4.4.2"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ed8d8d984c2f7f2c31e8b18795b97858a95e4729"
+  "gitHead": "8f921ec5094e7c2b3c301bcb6133372e35a2052b"
 }

package/src/calculatePosition.ts

@@ -11,11 +11,11 @@
  */
 
 import {Axis, Placement, PlacementAxis, SizeAxis} from '@react-types/overlays';
-import getCss from 'dom-helpers/style';
-import getOffset from 'dom-helpers/query/offset';
-import getPosition from 'dom-helpers/query/position';
-import getScrollLeft from 'dom-helpers/query/scrollLeft';
-import getScrollTop from 'dom-helpers/query/scrollTop';
+import getCss from 'dom-helpers/css';
+import getOffset from 'dom-helpers/offset';
+import getPosition from 'dom-helpers/position';
+import getScrollLeft from 'dom-helpers/scrollLeft';
+import getScrollTop from 'dom-helpers/scrollTop';
 import ownerDocument from 'dom-helpers/ownerDocument';
 
 interface Position {
@@ -99,7 +99,7 @@ const PARSED_PLACEMENT_CACHE = {};
 // @ts-ignore
 let visualViewport = typeof window !== 'undefined' && window.visualViewport;
 
-function getContainerDimensions(containerNode: Element): Dimensions {
+function getContainerDimensions(containerNode: HTMLElement): Dimensions {
   let width = 0, height = 0, top = 0, left = 0;
   let scroll: Position = {};
 
@@ -373,15 +373,17 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
     maxHeight
   } = opts;
 
-  let container = overlayNode.offsetParent || document.body;
+  let container = (overlayNode.offsetParent || document.body) as HTMLElement;
   let isBodyContainer = container.tagName === 'BODY';
   const containerPositionStyle = window.getComputedStyle(container).position;
   let isContainerPositioned = !!containerPositionStyle && containerPositionStyle !== 'static';
   let childOffset: Offset = isBodyContainer ? getOffset(targetNode) : getPosition(targetNode, container);
 
   if (!isBodyContainer) {
-    childOffset.top += parseInt(getCss(targetNode, 'marginTop'), 10) || 0;
-    childOffset.left += parseInt(getCss(targetNode, 'marginLeft'), 10) || 0;
+    let marginTop = String(getCss(targetNode, 'marginTop'));
+    let marginLeft = String(getCss(targetNode, 'marginLeft'));
+    childOffset.top += parseInt(marginTop, 10) || 0;
+    childOffset.left += parseInt(marginLeft, 10) || 0;
   }
 
   let overlaySize: Offset = getOffset(overlayNode);

package/src/useOverlay.ts

@@ -111,6 +111,7 @@ export function useOverlay(props: OverlayProps, ref: RefObject<HTMLElement>): Ov
   // Handle the escape key
   let onKeyDown = (e) => {
     if (e.key === 'Escape' && !isKeyboardDismissDisabled) {
+      e.stopPropagation();
       e.preventDefault();
       onHide();
     }

package/src/useOverlayPosition.ts

@@ -44,7 +44,7 @@ interface AriaPositionProps extends PositionProps {
   /** Handler that is called when the overlay should close. */
   onClose?: () => void,
   /**
-   * The maxHeight specified for the overlay element. 
+   * The maxHeight specified for the overlay element.
    * By default, it will take all space up to the current viewport height.
    */
   maxHeight?: number

package/src/usePreventScroll.ts

@@ -126,7 +126,9 @@ function preventScrollMobileSafari() {
 
   let onTouchEnd = (e: TouchEvent) => {
     let target = e.target as HTMLElement;
-    if (target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) {
+
+    // Apply this change if we're not already focused on the target element
+    if (willOpenKeyboard(target) && target !== document.activeElement) {
       e.preventDefault();
 
       // Apply a transform to trick Safari into thinking the input is at the top of the page
@@ -142,7 +144,7 @@ function preventScrollMobileSafari() {
 
   let onFocus = (e: FocusEvent) => {
     let target = e.target as HTMLElement;
-    if (target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) {
+    if (willOpenKeyboard(target)) {
       // 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
@@ -229,13 +231,26 @@ function addEvent<K extends keyof GlobalEventHandlersEventMap>(
 }
 
 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;
+  let root = document.scrollingElement || document.documentElement;
+  while (target && target !== root) {
+    // 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 && scrollable !== target) {
+      let scrollableTop = scrollable.getBoundingClientRect().top;
+      let targetTop = target.getBoundingClientRect().top;
+      if (targetTop > scrollableTop + target.clientHeight) {
+        scrollable.scrollTop += targetTop - scrollableTop;
+      }
     }
+
+    target = scrollable.parentElement;
   }
 }
+
+function willOpenKeyboard(target: Element) {
+  return (
+    (target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) ||
+    target instanceof HTMLTextAreaElement ||
+    (target instanceof HTMLElement && target.isContentEditable)
+  );
+}