@react-aria/utils 3.30.1 → 3.32.0

package/dist/useViewportSize.module.js.map

@@ -1 +1 @@
-{"mappings":";;;AAAA;;;;;;;;;;CAUC;;AAUD,IAAI,uCAAiB,OAAO,aAAa,eAAe,OAAO,cAAc;AAEtE,SAAS;IACd,IAAI,QAAQ,CAAA,GAAA,eAAO;IACnB,IAAI,CAAC,MAAM,QAAQ,GAAG,CAAA,GAAA,eAAO,EAAE,IAAM,QAAQ;YAAC,OAAO;YAAG,QAAQ;QAAC,IAAI;IAErE,CAAA,GAAA,gBAAQ,EAAE;QACR,wFAAwF;QACxF,IAAI,WAAW;YACb,QAAQ,CAAA;gBACN,IAAI,UAAU;gBACd,IAAI,QAAQ,KAAK,KAAK,KAAK,KAAK,IAAI,QAAQ,MAAM,KAAK,KAAK,MAAM,EAChE,OAAO;gBAET,OAAO;YACT;QACF;QAEA,IAAI,CAAC,sCACH,OAAO,gBAAgB,CAAC,UAAU;aAElC,qCAAe,gBAAgB,CAAC,UAAU;QAG5C,OAAO;YACL,IAAI,CAAC,sCACH,OAAO,mBAAmB,CAAC,UAAU;iBAErC,qCAAe,mBAAmB,CAAC,UAAU;QAEjD;IACF,GAAG,EAAE;IAEL,OAAO;AACT;AAEA,SAAS;IACP,OAAO;QACL,OAAO,AAAC,yCAAkB,iDAAA,2DAAA,qCAAgB,KAAK,KAAK,OAAO,UAAU;QACrE,QAAQ,AAAC,yCAAkB,iDAAA,2DAAA,qCAAgB,MAAM,KAAK,OAAO,WAAW;IAC1E;AACF","sources":["packages/@react-aria/utils/src/useViewportSize.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {useEffect, useState} from 'react';\nimport {useIsSSR} from '@react-aria/ssr';\n\ninterface ViewportSize {\n  width: number,\n  height: number\n}\n\nlet visualViewport = typeof document !== 'undefined' && window.visualViewport;\n\nexport function useViewportSize(): ViewportSize {\n  let isSSR = useIsSSR();\n  let [size, setSize] = useState(() => isSSR ? {width: 0, height: 0} : getViewportSize());\n\n  useEffect(() => {\n    // Use visualViewport api to track available height even on iOS virtual keyboard opening\n    let onResize = () => {\n      setSize(size => {\n        let newSize = getViewportSize();\n        if (newSize.width === size.width && newSize.height === size.height) {\n          return size;\n        }\n        return newSize;\n      });\n    };\n\n    if (!visualViewport) {\n      window.addEventListener('resize', onResize);\n    } else {\n      visualViewport.addEventListener('resize', onResize);\n    }\n\n    return () => {\n      if (!visualViewport) {\n        window.removeEventListener('resize', onResize);\n      } else {\n        visualViewport.removeEventListener('resize', onResize);\n      }\n    };\n  }, []);\n\n  return size;\n}\n\nfunction getViewportSize(): ViewportSize {\n  return {\n    width: (visualViewport && visualViewport?.width) || window.innerWidth,\n    height: (visualViewport && visualViewport?.height) || window.innerHeight\n  };\n}\n"],"names":[],"version":3,"file":"useViewportSize.module.js.map"}
+{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAWD,IAAI,uCAAiB,OAAO,aAAa,eAAe,OAAO,cAAc;AAEtE,SAAS;IACd,IAAI,QAAQ,CAAA,GAAA,eAAO;IACnB,IAAI,CAAC,MAAM,QAAQ,GAAG,CAAA,GAAA,eAAO,EAAE,IAAM,QAAQ;YAAC,OAAO;YAAG,QAAQ;QAAC,IAAI;IAErE,CAAA,GAAA,gBAAQ,EAAE;QACR,wFAAwF;QACxF,IAAI,WAAW;YACb,8BAA8B;YAC9B,IAAI,wCAAkB,qCAAe,KAAK,GAAG,GAC3C;YAGF,QAAQ,CAAA;gBACN,IAAI,UAAU;gBACd,IAAI,QAAQ,KAAK,KAAK,KAAK,KAAK,IAAI,QAAQ,MAAM,KAAK,KAAK,MAAM,EAChE,OAAO;gBAET,OAAO;YACT;QACF;QAEA,iHAAiH;QACjH,gGAAgG;QAChG,IAAI;QACJ,IAAI,SAAS,CAAC;YACZ,IAAI,wCAAkB,qCAAe,KAAK,GAAG,GAC3C;YAGF,IAAI,CAAA,GAAA,yCAAe,EAAE,EAAE,MAAM,GAC3B,uDAAuD;YACvD,QAAQ,sBAAsB;gBAC5B,IAAI,CAAC,SAAS,aAAa,IAAI,CAAC,CAAA,GAAA,yCAAe,EAAE,SAAS,aAAa,GACrE,QAAQ,CAAA;oBACN,IAAI,UAAU;wBAAC,OAAO,OAAO,UAAU;wBAAE,QAAQ,OAAO,WAAW;oBAAA;oBACnE,IAAI,QAAQ,KAAK,KAAK,KAAK,KAAK,IAAI,QAAQ,MAAM,KAAK,KAAK,MAAM,EAChE,OAAO;oBAET,OAAO;gBACT;YAEJ;QAEJ;QAEA,OAAO,gBAAgB,CAAC,QAAQ,QAAQ;QAExC,IAAI,CAAC,sCACH,OAAO,gBAAgB,CAAC,UAAU;aAElC,qCAAe,gBAAgB,CAAC,UAAU;QAG5C,OAAO;YACL,qBAAqB;YACrB,OAAO,mBAAmB,CAAC,QAAQ,QAAQ;YAC3C,IAAI,CAAC,sCACH,OAAO,mBAAmB,CAAC,UAAU;iBAErC,qCAAe,mBAAmB,CAAC,UAAU;QAEjD;IACF,GAAG,EAAE;IAEL,OAAO;AACT;AAEA,SAAS;IACP,OAAO;QACL,+FAA+F;QAC/F,OAAO,uCAAiB,qCAAe,KAAK,GAAG,qCAAe,KAAK,GAAG,OAAO,UAAU;QACvF,QAAQ,uCAAiB,qCAAe,MAAM,GAAG,qCAAe,KAAK,GAAG,OAAO,WAAW;IAC5F;AACF","sources":["packages/@react-aria/utils/src/useViewportSize.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {useEffect, useState} from 'react';\nimport {useIsSSR} from '@react-aria/ssr';\nimport {willOpenKeyboard} from './keyboard';\n\ninterface ViewportSize {\n  width: number,\n  height: number\n}\n\nlet visualViewport = typeof document !== 'undefined' && window.visualViewport;\n\nexport function useViewportSize(): ViewportSize {\n  let isSSR = useIsSSR();\n  let [size, setSize] = useState(() => isSSR ? {width: 0, height: 0} : getViewportSize());\n\n  useEffect(() => {\n    // Use visualViewport api to track available height even on iOS virtual keyboard opening\n    let onResize = () => {\n      // Ignore updates when zoomed.\n      if (visualViewport && visualViewport.scale > 1) {\n        return;\n      }\n\n      setSize(size => {\n        let newSize = getViewportSize();\n        if (newSize.width === size.width && newSize.height === size.height) {\n          return size;\n        }\n        return newSize;\n      });\n    };\n\n    // When closing the keyboard, iOS does not fire the visual viewport resize event until the animation is complete.\n    // We can anticipate this and resize early by handling the blur event and using the layout size.\n    let frame: number;\n    let onBlur = (e: FocusEvent) => {\n      if (visualViewport && visualViewport.scale > 1) {\n        return;\n      }\n\n      if (willOpenKeyboard(e.target as Element)) {\n        // Wait one frame to see if a new element gets focused.\n        frame = requestAnimationFrame(() => {\n          if (!document.activeElement || !willOpenKeyboard(document.activeElement)) {\n            setSize(size => {\n              let newSize = {width: window.innerWidth, height: window.innerHeight};\n              if (newSize.width === size.width && newSize.height === size.height) {\n                return size;\n              }\n              return newSize;\n            });\n          }\n        });\n      }\n    };\n\n    window.addEventListener('blur', onBlur, true);\n\n    if (!visualViewport) {\n      window.addEventListener('resize', onResize);\n    } else {\n      visualViewport.addEventListener('resize', onResize);\n    }\n\n    return () => {\n      cancelAnimationFrame(frame);\n      window.removeEventListener('blur', onBlur, true);\n      if (!visualViewport) {\n        window.removeEventListener('resize', onResize);\n      } else {\n        visualViewport.removeEventListener('resize', onResize);\n      }\n    };\n  }, []);\n\n  return size;\n}\n\nfunction getViewportSize(): ViewportSize {\n  return {\n    // Multiply by the visualViewport scale to get the \"natural\" size, unaffected by pinch zooming.\n    width: visualViewport ? visualViewport.width * visualViewport.scale : window.innerWidth,\n    height: visualViewport ? visualViewport.height * visualViewport.scale : window.innerHeight\n  };\n}\n"],"names":[],"version":3,"file":"useViewportSize.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/utils",
-  "version": "3.30.1",
+  "version": "3.32.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -28,8 +28,8 @@
   "dependencies": {
     "@react-aria/ssr": "^3.9.10",
     "@react-stately/flags": "^3.1.2",
-    "@react-stately/utils": "^3.10.8",
-    "@react-types/shared": "^3.32.0",
+    "@react-stately/utils": "^3.11.0",
+    "@react-types/shared": "^3.32.1",
     "@swc/helpers": "^0.5.0",
     "clsx": "^2.0.0"
   },
@@ -40,5 +40,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2c58ed3ddd9be9100af9b1d0cfd137fcdc95ba2d"
+  "gitHead": "4d838da5bfe36abb35aed166995a9ef63825370f"
 }

package/src/filterDOMProps.ts

@@ -114,7 +114,7 @@ export function filterDOMProps(props: DOMProps & AriaLabelingProps & LinkDOMProp
         (labelable && labelablePropNames.has(prop)) ||
         (isLink && linkPropNames.has(prop)) ||
         (global && globalAttrs.has(prop)) ||
-        (events && globalEvents.has(prop) || (prop.endsWith('Capture') && globalEvents.has(prop.slice(0, -7)))) ||
+        (events && (globalEvents.has(prop) || (prop.endsWith('Capture') && globalEvents.has(prop.slice(0, -7))))) ||
         propNames?.has(prop) ||
         propRe.test(prop)
       )

package/src/index.ts

@@ -48,7 +48,7 @@ export {useLoadMore} from './useLoadMore';
 export {useLoadMoreSentinel, useLoadMoreSentinel as UNSTABLE_useLoadMoreSentinel} from './useLoadMoreSentinel';
 export {inertValue} from './inertValue';
 export {CLEAR_FOCUS_EVENT, FOCUS_EVENT} from './constants';
-export {isCtrlKeyPressed} from './keyboard';
+export {isCtrlKeyPressed, willOpenKeyboard} from './keyboard';
 export {useEnterAnimation, useExitAnimation} from './animation';
 export {isFocusable, isTabbable} from './isFocusable';
 

package/src/isElementVisible.ts

@@ -63,7 +63,7 @@ function isAttributeVisible(element: Element, childElement?: Element) {
  */
 export function isElementVisible(element: Element, childElement?: Element): boolean {
   if (supportsCheckVisibility) {
-    return element.checkVisibility() && !element.closest('[data-react-aria-prevent-focus]');
+    return element.checkVisibility({visibilityProperty: true}) && !element.closest('[data-react-aria-prevent-focus]');
   }
 
   return (

package/src/keyboard.tsx

@@ -25,3 +25,24 @@ export function isCtrlKeyPressed(e: Event): boolean {
 
   return e.ctrlKey;
 }
+
+// HTML input types that do not cause the software keyboard to appear.
+const nonTextInputTypes = new Set([
+  'checkbox',
+  'radio',
+  'range',
+  'color',
+  'file',
+  'image',
+  'button',
+  'submit',
+  'reset'
+]);
+
+export function willOpenKeyboard(target: Element) {
+  return (
+    (target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) ||
+    target instanceof HTMLTextAreaElement ||
+    (target instanceof HTMLElement && target.isContentEditable)
+  );
+}

package/src/mergeProps.ts

@@ -28,8 +28,7 @@ type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
 
 /**
  * Merges multiple props objects together. Event handlers are chained,
- * classNames are combined, and ids are deduplicated - different ids
- * will trigger a side-effect and re-render components hooked up with `useId`.
+ * classNames are combined, and ids are deduplicated.
  * For all other props, the last prop object overrides all previous ones.
  * @param args - Multiple sets of props to merge together.
  */

package/src/openLink.tsx

@@ -106,7 +106,7 @@ export function openLink(target: HTMLAnchorElement, modifiers: Modifiers, setOpe
   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});
+    : new MouseEvent('click', {metaKey, ctrlKey, altKey, shiftKey, detail: 1, bubbles: true, cancelable: true});
   (openLink as any).isOpening = setOpening;
   focusWithoutScrolling(target);
   target.dispatchEvent(event);

package/src/scrollIntoView.ts

@@ -117,6 +117,9 @@ export function scrollIntoViewport(targetElement: Element | null, opts?: ScrollI
     } else {
       let scrollParents = getScrollParents(targetElement);
       // If scrolling is prevented, we don't want to scroll the body since it might move the overlay partially offscreen and the user can't scroll it back into view.
+      if (!isScrollPrevented) {
+        scrollParents.push(root);
+      }
       for (let scrollParent of scrollParents) {
         scrollIntoView(scrollParent as HTMLElement, targetElement as HTMLElement);
       }

package/src/useEvent.ts

@@ -33,5 +33,5 @@ export function useEvent<K extends keyof GlobalEventHandlersEventMap>(
     return () => {
       element.removeEventListener(event, handleEvent as EventListener, options);
     };
-  }, [ref, event, options, isDisabled, handleEvent]);
+  }, [ref, event, options, isDisabled]);
 }

package/src/useFormReset.ts

@@ -32,5 +32,5 @@ export function useFormReset<T>(
     return () => {
       form?.removeEventListener('reset', handleReset);
     };
-  }, [ref, handleReset]);
+  }, [ref]);
 }

package/src/useLoadMoreSentinel.ts

@@ -59,5 +59,5 @@ export function useLoadMoreSentinel(props: LoadMoreSentinelProps, ref: RefObject
         sentinelObserver.current.disconnect();
       }
     };
-  }, [collection, triggerLoadMore, ref, scrollOffset]);
+  }, [collection, ref, scrollOffset]);
 }

package/src/useResizeObserver.ts

@@ -1,6 +1,7 @@
 
 import {RefObject} from '@react-types/shared';
 import {useEffect} from 'react';
+import {useEffectEvent} from './useEffectEvent';
 
 function hasResizeObserver() {
   return typeof window.ResizeObserver !== 'undefined';
@@ -13,7 +14,10 @@ type useResizeObserverOptionsType<T> = {
 }
 
 export function useResizeObserver<T extends Element>(options: useResizeObserverOptionsType<T>): void {
+  // Only call onResize from inside the effect, otherwise we'll void our assumption that
+  // useEffectEvents are safe to pass in.
   const {ref, box, onResize} = options;
+  let onResizeEvent = useEffectEvent(onResize);
 
   useEffect(() => {
     let element = ref?.current;
@@ -22,9 +26,9 @@ export function useResizeObserver<T extends Element>(options: useResizeObserverO
     }
 
     if (!hasResizeObserver()) {
-      window.addEventListener('resize', onResize, false);
+      window.addEventListener('resize', onResizeEvent, false);
       return () => {
-        window.removeEventListener('resize', onResize, false);
+        window.removeEventListener('resize', onResizeEvent, false);
       };
     } else {
 
@@ -33,7 +37,7 @@ export function useResizeObserver<T extends Element>(options: useResizeObserverO
           return;
         }
 
-        onResize();
+        onResizeEvent();
       });
       resizeObserverInstance.observe(element, {box});
 
@@ -44,5 +48,5 @@ export function useResizeObserver<T extends Element>(options: useResizeObserverO
       };
     }
 
-  }, [onResize, ref, box]);
+  }, [ref, box]);
 }

package/src/useUpdateEffect.ts

@@ -11,11 +11,13 @@
  */
 
 import {EffectCallback, useEffect, useRef} from 'react';
+import {useEffectEvent} from './useEffectEvent';
 
 // Like useEffect, but only called for updates after the initial render.
-export function useUpdateEffect(effect: EffectCallback, dependencies: any[]): void {
+export function useUpdateEffect(cb: EffectCallback, dependencies: any[]): void {
   const isInitialMount = useRef(true);
   const lastDeps = useRef<any[] | null>(null);
+  let cbEvent = useEffectEvent(cb);
 
   useEffect(() => {
     isInitialMount.current = true;
@@ -29,9 +31,9 @@ export function useUpdateEffect(effect: EffectCallback, dependencies: any[]): vo
     if (isInitialMount.current) {
       isInitialMount.current = false;
     } else if (!prevDeps || dependencies.some((dep, i) => !Object.is(dep, prevDeps[i]))) {
-      effect();
+      cbEvent();
     }
     lastDeps.current = dependencies;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, dependencies);
 }

package/src/useValueEffect.ts

@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {Dispatch, MutableRefObject, useRef, useState} from 'react';
-import {useEffectEvent, useLayoutEffect} from './';
+import {Dispatch, RefObject, useCallback, useRef, useState} from 'react';
+import {useLayoutEffect} from './';
 
 type SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;
 
@@ -21,11 +21,14 @@ 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 effect: MutableRefObject<Generator<S> | null> = useRef<Generator<S> | null>(null);
+  // Keep an up to date copy of value in a ref so we can access the current value in the generator.
+  // This allows us to maintain a stable queue function.
+  let currValue = useRef(value);
+  let effect: RefObject<Generator<S> | null> = useRef<Generator<S> | null>(null);
 
   // Store the function in a ref so we can always access the current version
   // which has the proper `value` in scope.
-  let nextRef = useEffectEvent(() => {
+  let nextRef = useRef(() => {
     if (!effect.current) {
       return;
     }
@@ -41,24 +44,25 @@ export function useValueEffect<S>(defaultValue: S | (() => S)): [S, Dispatch<Set
     // 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();
+    if (currValue.current === newValue.value) {
+      nextRef.current();
     } else {
       setValue(newValue.value);
     }
   });
 
   useLayoutEffect(() => {
+    currValue.current = value;
     // If there is an effect currently running, continue to the next yield.
     if (effect.current) {
-      nextRef();
+      nextRef.current();
     }
   });
 
-  let queue = useEffectEvent(fn => {
-    effect.current = fn(value);
-    nextRef();
-  });
+  let queue = useCallback(fn => {
+    effect.current = fn(currValue.current);
+    nextRef.current();
+  }, [nextRef]);
 
   return [value, queue];
 }

package/src/useViewportSize.ts

@@ -12,6 +12,7 @@
 
 import {useEffect, useState} from 'react';
 import {useIsSSR} from '@react-aria/ssr';
+import {willOpenKeyboard} from './keyboard';
 
 interface ViewportSize {
   width: number,
@@ -27,6 +28,11 @@ export function useViewportSize(): ViewportSize {
   useEffect(() => {
     // Use visualViewport api to track available height even on iOS virtual keyboard opening
     let onResize = () => {
+      // Ignore updates when zoomed.
+      if (visualViewport && visualViewport.scale > 1) {
+        return;
+      }
+
       setSize(size => {
         let newSize = getViewportSize();
         if (newSize.width === size.width && newSize.height === size.height) {
@@ -36,6 +42,32 @@ export function useViewportSize(): ViewportSize {
       });
     };
 
+    // When closing the keyboard, iOS does not fire the visual viewport resize event until the animation is complete.
+    // We can anticipate this and resize early by handling the blur event and using the layout size.
+    let frame: number;
+    let onBlur = (e: FocusEvent) => {
+      if (visualViewport && visualViewport.scale > 1) {
+        return;
+      }
+
+      if (willOpenKeyboard(e.target as Element)) {
+        // Wait one frame to see if a new element gets focused.
+        frame = requestAnimationFrame(() => {
+          if (!document.activeElement || !willOpenKeyboard(document.activeElement)) {
+            setSize(size => {
+              let newSize = {width: window.innerWidth, height: window.innerHeight};
+              if (newSize.width === size.width && newSize.height === size.height) {
+                return size;
+              }
+              return newSize;
+            });
+          }
+        });
+      }
+    };
+
+    window.addEventListener('blur', onBlur, true);
+
     if (!visualViewport) {
       window.addEventListener('resize', onResize);
     } else {
@@ -43,6 +75,8 @@ export function useViewportSize(): ViewportSize {
     }
 
     return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener('blur', onBlur, true);
       if (!visualViewport) {
         window.removeEventListener('resize', onResize);
       } else {
@@ -56,7 +90,8 @@ export function useViewportSize(): ViewportSize {
 
 function getViewportSize(): ViewportSize {
   return {
-    width: (visualViewport && visualViewport?.width) || window.innerWidth,
-    height: (visualViewport && visualViewport?.height) || window.innerHeight
+    // Multiply by the visualViewport scale to get the "natural" size, unaffected by pinch zooming.
+    width: visualViewport ? visualViewport.width * visualViewport.scale : window.innerWidth,
+    height: visualViewport ? visualViewport.height * visualViewport.scale : window.innerHeight
   };
 }