@react-aria/utils 3.19.0 → 3.21.0

package/src/isVirtualEvent.ts

@@ -47,7 +47,7 @@ export function isVirtualPointerEvent(event: PointerEvent) {
   // instead of .5, see https://bugs.webkit.org/show_bug.cgi?id=206216. event.pointerType === 'mouse' is to distingush
   // Talkback double tap from Windows Firefox touch screen press
   return (
-    (event.width === 0 && event.height === 0) ||
+    (!isAndroid() && event.width === 0 && event.height === 0) ||
     (event.width === 1 &&
       event.height === 1 &&
       event.pressure === 0 &&

package/src/openLink.tsx

@@ -0,0 +1,154 @@
+/*
+ * Copyright 2023 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.
+ */
+
+import {focusWithoutScrolling, isMac, isWebKit} from './index';
+import {isFirefox, isIPad} from './platform';
+import {LinkDOMProps} from '@react-types/shared';
+import React, {createContext, ReactNode, useContext, useMemo} from 'react';
+
+interface Router {
+  isNative: boolean,
+  open: (target: Element, modifiers: Modifiers) => void
+}
+
+const RouterContext = createContext<Router>({
+  isNative: true,
+  open: openSyntheticLink
+});
+
+interface RouterProviderProps {
+  navigate: (path: string) => void,
+  children: ReactNode
+}
+
+/**
+ * A RouterProvider accepts a `navigate` function from a framework or client side router,
+ * and provides it to all nested React Aria links to enable client side navigation.
+ */
+export function RouterProvider(props: RouterProviderProps) {
+  let {children, navigate} = props;
+
+  let ctx = useMemo(() => ({
+    isNative: false,
+    open: (target: Element, modifiers: Modifiers) => {
+      getSyntheticLink(target, link => {
+        if (shouldClientNavigate(link, modifiers)) {
+          navigate(link.pathname + link.search + link.hash);
+        } else {
+          openLink(link, modifiers);
+        }
+      });
+    }
+  }), [navigate]);
+
+  return (
+    <RouterContext.Provider value={ctx}>
+      {children}
+    </RouterContext.Provider>
+  );
+}
+
+export function useRouter(): Router {
+  return useContext(RouterContext);
+}
+
+interface Modifiers {
+  metaKey?: boolean,
+  ctrlKey?: boolean,
+  altKey?: boolean,
+  shiftKey?: boolean
+}
+
+export function shouldClientNavigate(link: HTMLAnchorElement, modifiers: Modifiers) {
+  // Use getAttribute here instead of link.target. Firefox will default link.target to "_parent" when inside an iframe.
+  let target = link.getAttribute('target');
+  return (
+    (!target || target === '_self') &&
+    link.origin === location.origin &&
+    !link.hasAttribute('download') &&
+    !modifiers.metaKey && // open in new tab (mac)
+    !modifiers.ctrlKey && // open in new tab (windows)
+    !modifiers.altKey && // download
+    !modifiers.shiftKey
+  );
+}
+
+export function openLink(target: HTMLAnchorElement, modifiers: Modifiers, setOpening = true) {
+  let {metaKey, ctrlKey, altKey, shiftKey} = modifiers;
+
+  // Firefox does not recognize keyboard events as a user action by default, and the popup blocker
+  // will prevent links with target="_blank" from opening. However, it does allow the event if the
+  // Command/Control key is held, which opens the link in a background tab. This seems like the best we can do.
+  // See https://bugzilla.mozilla.org/show_bug.cgi?id=257870 and https://bugzilla.mozilla.org/show_bug.cgi?id=746640.
+  if (isFirefox() && window.event?.type?.startsWith('key') && target.target === '_blank') {
+    if (isMac()) {
+      metaKey = true;
+    } else {
+      ctrlKey = true;
+    }
+  }
+
+  // WebKit does not support firing click events with modifier keys, but does support keyboard events.
+  // https://github.com/WebKit/WebKit/blob/c03d0ac6e6db178f90923a0a63080b5ca210d25f/Source/WebCore/html/HTMLAnchorElement.cpp#L184
+  let event = isWebKit() && isMac() && !isIPad() && process.env.NODE_ENV !== 'test'
+    // @ts-ignore - keyIdentifier is a non-standard property, but it's what webkit expects
+    ? new KeyboardEvent('keydown', {keyIdentifier: 'Enter', metaKey, ctrlKey, altKey, shiftKey})
+    : new MouseEvent('click', {metaKey, ctrlKey, altKey, shiftKey, bubbles: true, cancelable: true});
+  openLink.isOpening = setOpening;
+  focusWithoutScrolling(target);
+  target.dispatchEvent(event);
+  openLink.isOpening = false;
+}
+
+openLink.isOpening = false;
+
+function getSyntheticLink(target: Element, open: (link: HTMLAnchorElement) => void) {
+  if (target instanceof HTMLAnchorElement) {
+    open(target);
+  } else if (target.hasAttribute('data-href')) {
+    let link = document.createElement('a');
+    link.href = target.getAttribute('data-href');
+    if (target.hasAttribute('data-target')) {
+      link.target = target.getAttribute('data-target');
+    }
+    if (target.hasAttribute('data-rel')) {
+      link.rel = target.getAttribute('data-rel');
+    }
+    if (target.hasAttribute('data-download')) {
+      link.download = target.getAttribute('data-download');
+    }
+    if (target.hasAttribute('data-ping')) {
+      link.ping = target.getAttribute('data-ping');
+    }
+    if (target.hasAttribute('data-referrer-policy')) {
+      link.referrerPolicy = target.getAttribute('data-referrer-policy');
+    }
+    target.appendChild(link);
+    open(link);
+    target.removeChild(link);
+  }
+}
+
+function openSyntheticLink(target: Element, modifiers: Modifiers) {
+  getSyntheticLink(target, link => openLink(link, modifiers));
+}
+
+export function getSyntheticLinkProps(props: LinkDOMProps) {
+  return {
+    'data-href': props.href,
+    'data-target': props.target,
+    'data-rel': props.rel,
+    'data-download': props.download,
+    'data-ping': props.ping,
+    'data-referrer-policy': props.referrerPolicy
+  };
+}

package/src/platform.ts

@@ -59,3 +59,7 @@ export function isChrome() {
 export function isAndroid() {
   return testUserAgent(/Android/i);
 }
+
+export function isFirefox() {
+  return testUserAgent(/Firefox/i);
+}

package/src/useSyncRef.ts

@@ -26,5 +26,5 @@ export function useSyncRef<T>(context: ContextValue<T>, ref: RefObject<T>) {
         context.ref.current = null;
       };
     }
-  }, [context, ref]);
+  });
 }

package/src/useValueEffect.ts

@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {Dispatch, useCallback, useRef, useState} from 'react';
-import {useLayoutEffect} from './';
+import {Dispatch, useRef, useState} from 'react';
+import {useEffectEvent, useLayoutEffect} from './';
 
 type SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;
 
@@ -21,48 +21,41 @@ type SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;
 // written linearly.
 export function useValueEffect<S>(defaultValue: S | (() => S)): [S, Dispatch<SetValueAction<S>>] {
   let [value, setValue] = useState(defaultValue);
-  let valueRef = useRef(value);
   let effect = useRef(null);
 
-  // Must be stable so that `queue` is stable.
-  let nextIter = useCallback(() => {
+  // Store the function in a ref so we can always access the current version
+  // which has the proper `value` in scope.
+  let nextRef = useEffectEvent(() => {
     // Run the generator to the next yield.
     let newValue = effect.current.next();
-    while (!newValue.done && valueRef.current === newValue.value) {
-      // If the value is the same as the current value,
-      // then continue to the next yield. Otherwise,
-      // set the value in state and wait for the next layout effect.
-      newValue = effect.current.next();
-    }
+
     // If the generator is done, reset the effect.
     if (newValue.done) {
       effect.current = null;
       return;
     }
 
-    // Always update valueRef when setting the state.
-    // This is needed because the function is not regenerated with the new state value since
-    // they must be stable across renders. Instead, it gets carried in the ref, but the setState
-    // is also needed in order to cause a rerender.
-    setValue(newValue.value);
-    valueRef.current = newValue.value;
-    // this list of dependencies is stable, setState and refs never change after first render.
-  }, [setValue, valueRef, effect]);
+    // If the value is the same as the current value,
+    // then continue to the next yield. Otherwise,
+    // set the value in state and wait for the next layout effect.
+    if (value === newValue.value) {
+      nextRef();
+    } else {
+      setValue(newValue.value);
+    }
+  });
 
   useLayoutEffect(() => {
     // If there is an effect currently running, continue to the next yield.
     if (effect.current) {
-      nextIter();
+      nextRef();
     }
   });
 
-  // queue must be a stable function, much like setState.
-  let queue = useCallback(fn => {
-    effect.current = fn(valueRef.current);
-    nextIter();
-    // this list of dependencies is stable, setState and refs never change after first render.
-    // in addition, nextIter is stable as outlined above
-  }, [nextIter, effect, valueRef]);
+  let queue = useEffectEvent(fn => {
+    effect.current = fn(value);
+    nextRef();
+  });
 
   return [value, queue];
 }

package/src/useViewportSize.ts

@@ -11,6 +11,7 @@
  */
 
 import {useEffect, useState} from 'react';
+import {useIsSSR} from '@react-aria/ssr';
 
 interface ViewportSize {
   width: number,
@@ -21,7 +22,8 @@ interface ViewportSize {
 let visualViewport = typeof document !== 'undefined' && window.visualViewport;
 
 export function useViewportSize(): ViewportSize {
-  let [size, setSize] = useState(() => getViewportSize());
+  let isSSR = useIsSSR();
+  let [size, setSize] = useState(() => isSSR ? {width: 0, height: 0} : getViewportSize());
 
   useEffect(() => {
     // Use visualViewport api to track available height even on iOS virtual keyboard opening