@react-aria/overlays 3.6.3 → 3.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/overlays",
-  "version": "3.6.3",
+  "version": "3.7.3",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,13 +18,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-aria/i18n": "^3.3.1",
-    "@react-aria/interactions": "^3.4.0",
-    "@react-aria/utils": "^3.8.0",
-    "@react-aria/visually-hidden": "^3.2.2",
-    "@react-stately/overlays": "^3.1.2",
-    "@react-types/button": "^3.3.1",
-    "@react-types/overlays": "^3.4.0",
+    "@react-aria/i18n": "^3.3.3",
+    "@react-aria/interactions": "^3.7.0",
+    "@react-aria/utils": "^3.10.0",
+    "@react-aria/visually-hidden": "^3.2.3",
+    "@react-stately/overlays": "^3.1.3",
+    "@react-types/button": "^3.4.1",
+    "@react-types/overlays": "^3.5.1",
     "dom-helpers": "^3.3.1"
   },
   "peerDependencies": {
@@ -34,5 +34,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3aae08e7d8a75382bedcddac7c86107e40db9296"
+  "gitHead": "896eabe5521a0349a675c4773ed7629addd4b8c4"
 }

package/src/useCloseOnScroll.ts

@@ -36,8 +36,9 @@ export function useCloseOnScroll(opts: CloseOnScrollOptions) {
 
     let onScroll = (e: MouseEvent) => {
       // Ignore if scrolling an scrollable region outside the trigger's tree.
-      let target = e.target as HTMLElement;
-      if (!triggerRef.current || !target.contains(triggerRef.current)) {
+      let target = e.target;
+      // window is not a Node and doesn't have contain, but window contains everything
+      if (!triggerRef.current || ((target instanceof Node) && !target.contains(triggerRef.current))) {
         return;
       }
 

package/src/useOverlay.ts

@@ -46,7 +46,9 @@ interface OverlayProps {
 
 interface OverlayAria {
   /** Props to apply to the overlay container element. */
-  overlayProps: HTMLAttributes<HTMLElement>
+  overlayProps: HTMLAttributes<HTMLElement>,
+  /** Props to apply to the underlay element, if any. */
+  underlayProps: HTMLAttributes<HTMLElement>
 }
 
 const visibleOverlays: RefObject<HTMLElement>[] = [];
@@ -57,7 +59,14 @@ const visibleOverlays: RefObject<HTMLElement>[] = [];
  * or optionally, on blur. Only the top-most overlay will close at once.
  */
 export function useOverlay(props: OverlayProps, ref: RefObject<HTMLElement>): OverlayAria {
-  let {onClose, shouldCloseOnBlur, isOpen, isDismissable = false, isKeyboardDismissDisabled = false, shouldCloseOnInteractOutside} = props;
+  let {
+    onClose,
+    shouldCloseOnBlur,
+    isOpen,
+    isDismissable = false,
+    isKeyboardDismissDisabled = false,
+    shouldCloseOnInteractOutside
+  } = props;
 
   // Add the overlay ref to the stack of visible overlays on mount, and remove on unmount.
   useEffect(() => {
@@ -80,8 +89,21 @@ export function useOverlay(props: OverlayProps, ref: RefObject<HTMLElement>): Ov
     }
   };
 
+  let onInteractOutsideStart = (e: SyntheticEvent<HTMLElement>) => {
+    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as HTMLElement)) {
+      if (visibleOverlays[visibleOverlays.length - 1] === ref) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    }
+  };
+
   let onInteractOutside = (e: SyntheticEvent<HTMLElement>) => {
     if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as HTMLElement)) {
+      if (visibleOverlays[visibleOverlays.length - 1] === ref) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
       onHide();
     }
   };
@@ -95,7 +117,7 @@ export function useOverlay(props: OverlayProps, ref: RefObject<HTMLElement>): Ov
   };
 
   // Handle clicking outside the overlay to close it
-  useInteractOutside({ref, onInteractOutside: isDismissable ? onInteractOutside : null});
+  useInteractOutside({ref, onInteractOutside: isDismissable ? onInteractOutside : null, onInteractOutsideStart});
 
   let {focusWithinProps} = useFocusWithin({
     isDisabled: !shouldCloseOnBlur,
@@ -106,10 +128,20 @@ export function useOverlay(props: OverlayProps, ref: RefObject<HTMLElement>): Ov
     }
   });
 
+  let onPointerDownUnderlay = e => {
+    // fixes a firefox issue that starts text selection https://bugzilla.mozilla.org/show_bug.cgi?id=1675846
+    if (e.target === e.currentTarget) {
+      e.preventDefault();
+    }
+  };
+
   return {
     overlayProps: {
       onKeyDown,
       ...focusWithinProps
+    },
+    underlayProps: {
+      onPointerDown: onPointerDownUnderlay
     }
   };
 }

package/src/useOverlayTrigger.ts

@@ -40,7 +40,7 @@ export function useOverlayTrigger(props: OverlayTriggerProps, state: OverlayTrig
   // Backward compatibility. Share state close function with useOverlayPosition so it can close on scroll
   // without forcing users to pass onClose.
   useEffect(() => {
-    if (ref.current) {
+    if (ref && ref.current) {
       onCloseMap.set(ref.current, state.close);
     }
   });