Add getOwnerDocument and getOwnerWindow utils and fix usePress (#5096)

* Add getOwnerDocument and getOwnerWindow utils and fix usePress

.eslintrc.js

@@ -65,6 +65,21 @@ module.exports = {
       'jsdoc/require-jsdoc': OFF,
       'jsdoc/require-description': OFF
     }
+  }, {
+    files: ['packages/@react-aria/interactions/**/*.ts', 'packages/@react-aria/interactions/**/*.tsx'],
+    rules: {
+      'no-restricted-globals': [
+        WARN,
+        {
+          'name': 'window',
+          'message': 'Use getOwnerWindow from @react-aria/utils instead.'
+        },
+        {
+          'name': 'document',
+          'message': 'Use getOwnerDocument from @react-aria/utils instead.'
+        }
+      ]
+    }
   }],
   env: {
     'browser': true,

packages/@react-aria/interactions/src/textSelection.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {isIOS, runAfterTransition} from '@react-aria/utils';
+import {getOwnerDocument, isIOS, runAfterTransition} from '@react-aria/utils';
 
 // Safari on iOS starts selecting text on long press. The only way to avoid this, it seems,
 // is to add user-select: none to the entire page. Adding it to the pressable element prevents
@@ -36,8 +36,9 @@ let modifiedElementMap = new WeakMap<Element, string>();
 export function disableTextSelection(target?: Element) {
   if (isIOS()) {
     if (state === 'default') {
-      savedUserSelect = document.documentElement.style.webkitUserSelect;
-      document.documentElement.style.webkitUserSelect = 'none';
+      const documentObject = getOwnerDocument(target);
+      savedUserSelect = documentObject.documentElement.style.webkitUserSelect;
+      documentObject.documentElement.style.webkitUserSelect = 'none';
     }
 
     state = 'disabled';
@@ -67,8 +68,9 @@ export function restoreTextSelection(target?: Element) {
       runAfterTransition(() => {
         // Avoid race conditions
         if (state === 'restoring') {
-          if (document.documentElement.style.webkitUserSelect === 'none') {
-            document.documentElement.style.webkitUserSelect = savedUserSelect || '';
+          const documentObject = getOwnerDocument(target);
+          if (documentObject.documentElement.style.webkitUserSelect === 'none') {
+            documentObject.documentElement.style.webkitUserSelect = savedUserSelect || '';
           }
 
           savedUserSelect = '';

packages/@react-aria/interactions/src/usePress.ts

@@ -17,7 +17,7 @@
 
 import {disableTextSelection, restoreTextSelection} from './textSelection';
 import {DOMAttributes, FocusableElement, PressEvent as IPressEvent, PointerType, PressEvents} from '@react-types/shared';
-import {focusWithoutScrolling, isMac, isVirtualClick, isVirtualPointerEvent, mergeProps, openLink, useEffectEvent, useGlobalListeners, useSyncRef} from '@react-aria/utils';
+import {focusWithoutScrolling, getOwnerDocument, getOwnerWindow, isMac, isVirtualClick, isVirtualPointerEvent, mergeProps, openLink, useEffectEvent, useGlobalListeners, useSyncRef} from '@react-aria/utils';
 import {PressResponderContext} from './context';
 import {RefObject, useContext, useEffect, useMemo, useRef, useState} from 'react';
 
@@ -271,7 +271,7 @@ export function usePress(props: PressHookProps): PressResult {
 
             // Focus may move before the key up event, so register the event on the document
             // instead of the same element where the key down event occurred.
-            addGlobalListener(document, 'keyup', onKeyUp, false);
+            addGlobalListener(getOwnerDocument(e.currentTarget), 'keyup', onKeyUp, false);
           }
 
           if (shouldStopPropagation) {
@@ -410,9 +410,9 @@ export function usePress(props: PressHookProps): PressResult {
 
           shouldStopPropagation = triggerPressStart(e, state.pointerType);
 
-          addGlobalListener(document, 'pointermove', onPointerMove, false);
-          addGlobalListener(document, 'pointerup', onPointerUp, false);
-          addGlobalListener(document, 'pointercancel', onPointerCancel, false);
+          addGlobalListener(getOwnerDocument(e.currentTarget), 'pointermove', onPointerMove, false);
+          addGlobalListener(getOwnerDocument(e.currentTarget), 'pointerup', onPointerUp, false);
+          addGlobalListener(getOwnerDocument(e.currentTarget), 'pointercancel', onPointerCancel, false);
         }
 
         if (shouldStopPropagation) {
@@ -534,7 +534,7 @@ export function usePress(props: PressHookProps): PressResult {
           e.stopPropagation();
         }
 
-        addGlobalListener(document, 'mouseup', onMouseUp, false);
+        addGlobalListener(getOwnerDocument(e.currentTarget), 'mouseup', onMouseUp, false);
       };
 
       pressProps.onMouseEnter = (e) => {
@@ -634,7 +634,7 @@ export function usePress(props: PressHookProps): PressResult {
           e.stopPropagation();
         }
 
-        addGlobalListener(window, 'scroll', onScroll, true);
+        addGlobalListener(getOwnerWindow(e.currentTarget), 'scroll', onScroll, true);
       };
 
       pressProps.onTouchMove = (e) => {
@@ -773,8 +773,8 @@ function isValidKeyboardEvent(event: KeyboardEvent, currentTarget: Element): boo
   // "Spacebar" is for IE 11
   return (
     (key === 'Enter' || key === ' ' || key === 'Spacebar' || code === 'Space') &&
-    !((element instanceof HTMLInputElement && !isValidInputKey(element, key)) ||
-      element instanceof HTMLTextAreaElement ||
+    !((element instanceof getOwnerWindow(element).HTMLInputElement && !isValidInputKey(element, key)) ||
+      element instanceof getOwnerWindow(element).HTMLTextAreaElement ||
       element.isContentEditable) &&
     // Links should only trigger with Enter key
     !((role === 'link' || (!role && isHTMLAnchorLink(element))) && key !== 'Enter')