Centralize platform/browser checks in one place (#1514)

Author: devongovett

packages/@react-aria/combobox/src/useComboBox.ts

@@ -13,7 +13,7 @@
 import {announce} from '@react-aria/live-announcer';
 import {AriaButtonProps} from '@react-types/button';
 import {ariaHideOutside} from '@react-aria/overlays';
-import {chain, mergeProps, useLabels} from '@react-aria/utils';
+import {chain, isAppleDevice, mergeProps, useLabels} from '@react-aria/utils';
 import {ComboBoxProps} from '@react-types/combobox';
 import {ComboBoxState} from '@react-stately/combobox';
 import {FocusEvent, HTMLAttributes, InputHTMLAttributes, KeyboardEvent, RefObject, TouchEvent, useEffect, useMemo, useRef} from 'react';
@@ -42,12 +42,6 @@ interface ComboBoxAria {
   labelProps: HTMLAttributes<HTMLElement>
 }
 
-function isAppleDevice() {
-  return typeof window !== 'undefined' && window.navigator != null
-    ? /^(Mac|iPhone|iPad)/.test(window.navigator.platform)
-    : false;
-}
-
 export function useComboBox<T>(props: AriaComboBoxProps<T>, state: ComboBoxState<T>): ComboBoxAria {
   let {
     buttonRef,

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

@@ -15,6 +15,7 @@
 // NOTICE file in the root directory of this source tree.
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
+import {isMac} from '@react-aria/utils';
 import {isVirtualClick} from './utils';
 import {useEffect, useState} from 'react';
 
@@ -38,11 +39,6 @@ let changeHandlers = new Set<Handler>();
 let hasSetupGlobalListeners = false;
 let hasEventBeforeFocus = false;
 
-const isMac =
-  typeof window !== 'undefined' && window.navigator != null
-    ? /^Mac/.test(window.navigator.platform)
-    : false;
-
 // Only Tab or Esc keys will make focus visible on text input elements
 const FOCUS_VISIBLE_INPUT_KEYS = {
   Tab: true,
@@ -59,7 +55,7 @@ function triggerChangeHandlers(modality: Modality, e: HandlerEvent) {
  * Helper function to determine if a KeyboardEvent is unmodified and could make keyboard focus styles visible.
  */
 function isValidKey(e: KeyboardEvent) {
-  return !(e.metaKey || (!isMac && e.altKey) || e.ctrlKey);
+  return !(e.metaKey || (!isMac() && e.altKey) || e.ctrlKey);
 }
 
 function handleKeyboardEvent(e: KeyboardEvent) {

packages/@react-aria/listbox/src/useOption.ts

@@ -14,8 +14,8 @@ import {getItemCount} from '@react-stately/collections';
 import {getItemId} from './utils';
 import {HTMLAttributes, Key, RefObject} from 'react';
 import {isFocusVisible, useHover, usePress} from '@react-aria/interactions';
+import {isMac, isWebKit, mergeProps, useSlotId} from '@react-aria/utils';
 import {ListState} from '@react-stately/list';
-import {mergeProps, useSlotId} from '@react-aria/utils';
 import {useSelectableItem} from '@react-aria/selection';
 
 interface OptionAria {
@@ -55,13 +55,6 @@ interface AriaOptionProps {
   shouldUseVirtualFocus?: boolean
 }
 
-const isSafariMacOS =
-  typeof window !== 'undefined' && window.navigator != null
-    ? /^Mac/.test(window.navigator.platform) &&
-      /Safari/.test(window.navigator.userAgent) &&
-      !/Chrome/.test(window.navigator.userAgent)
-    : false;
-
 /**
  * Provides the behavior and accessibility implementation for an option in a listbox.
  * See `useListBox` for more details about listboxes.
@@ -91,7 +84,7 @@ export function useOption<T>(props: AriaOptionProps, state: ListState<T>, ref: R
   // Safari with VoiceOver on macOS misreads options with aria-labelledby or aria-label as simply "text".
   // We should not map slots to the label and description on Safari and instead just have VoiceOver read the textContent.
   // https://bugs.webkit.org/show_bug.cgi?id=209279
-  if (!isSafariMacOS) {
+  if (!(isMac() && isWebKit())) {
     optionProps['aria-label'] = props['aria-label'];
     optionProps['aria-labelledby'] = labelId;
     optionProps['aria-describedby'] = descriptionId;

packages/@react-aria/overlays/src/usePreventScroll.ts

@@ -10,22 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {chain, getScrollParent, useLayoutEffect} from '@react-aria/utils';
+import {chain, getScrollParent, isIOS, useLayoutEffect} from '@react-aria/utils';
 
 interface PreventScrollOptions {
   /** Whether the scroll lock is disabled. */
   isDisabled?: boolean
 }
 
-const isMobileSafari =
-  typeof window !== 'undefined' && window.navigator != null
-    ? /AppleWebKit/.test(window.navigator.userAgent) && (
-      /^(iPhone|iPad)$/.test(window.navigator.platform) ||
-      // iPadOS 13 lies and says its a Mac, but we can distinguish by detecting touch support.
-      (window.navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
-    )
-    : false;
-
 // @ts-ignore
 const visualViewport = typeof window !== 'undefined' && window.visualViewport;
 
@@ -55,7 +46,7 @@ export function usePreventScroll(options: PreventScrollOptions = {}) {
       return;
     }
 
-    if (isMobileSafari) {
+    if (isIOS()) {
       return preventScrollMobileSafari();
     } else {
       return preventScrollStandard();

packages/@react-aria/selection/src/useSelectableCollection.ts

@@ -13,17 +13,12 @@
 import {FocusEvent, HTMLAttributes, KeyboardEvent, RefObject, useEffect} from 'react';
 import {focusSafely, getFocusableTreeWalker} from '@react-aria/focus';
 import {FocusStrategy, KeyboardDelegate} from '@react-types/shared';
-import {mergeProps} from '@react-aria/utils';
+import {isMac, mergeProps} from '@react-aria/utils';
 import {MultipleSelectionManager} from '@react-stately/selection';
 import {useTypeSelect} from './useTypeSelect';
 
-const isMac =
-  typeof window !== 'undefined' && window.navigator != null
-    ? /^Mac/.test(window.navigator.platform)
-    : false;
-
 function isCtrlKeyPressed(e: KeyboardEvent) {
-  if (isMac) {
+  if (isMac()) {
     return e.metaKey;
   }
 

packages/@react-aria/utils/src/index.ts

@@ -26,3 +26,4 @@ export * from './useLayoutEffect';
 export * from './useResizeObserver';
 export * from './getScrollParent';
 export * from './useViewportSize';
+export * from './platform';

packages/@react-aria/utils/src/platform.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+function testUserAgent(re: RegExp) {
+  return typeof window !== 'undefined' && window.navigator != null
+    ? re.test(window.navigator.userAgent)
+    : false;
+}
+
+function testPlatform(re: RegExp) {
+  return typeof window !== 'undefined' && window.navigator != null
+    ? re.test(window.navigator.platform)
+    : false;
+}
+
+export function isMac() {
+  return testPlatform(/^Mac/);
+}
+
+export function isIOS() {
+  return testPlatform(/^(iPhone|iPad)/) ||
+    // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+    (isMac() && navigator.maxTouchPoints > 1);
+}
+
+export function isAppleDevice() {
+  return isMac() || isIOS();
+}
+
+export function isWebKit() {
+  return testUserAgent(/AppleWebKit/) && !isChrome();
+}
+
+export function isChrome() {
+  return testUserAgent(/Chrome/);
+}