@react-aria/utils 3.31.0 → 3.33.0

package/dist/useValueEffect.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;AAWM,SAAS,0CAAkB,YAA2B;IAC3D,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,eAAO,EAAE;IACjC,IAAI,SAAgD,CAAA,GAAA,aAAK,EAAuB;IAEhF,0EAA0E;IAC1E,yCAAyC;IACzC,IAAI,UAAU,CAAA,GAAA,yCAAa,EAAE;QAC3B,IAAI,CAAC,OAAO,OAAO,EACjB;QAEF,uCAAuC;QACvC,IAAI,WAAW,OAAO,OAAO,CAAC,IAAI;QAElC,8CAA8C;QAC9C,IAAI,SAAS,IAAI,EAAE;YACjB,OAAO,OAAO,GAAG;YACjB;QACF;QAEA,iDAAiD;QACjD,8CAA8C;QAC9C,8DAA8D;QAC9D,IAAI,UAAU,SAAS,KAAK,EAC1B;aAEA,SAAS,SAAS,KAAK;IAE3B;IAEA,CAAA,GAAA,yCAAc,EAAE;QACd,uEAAuE;QACvE,IAAI,OAAO,OAAO,EAChB;IAEJ;IAEA,IAAI,QAAQ,CAAA,GAAA,yCAAa,EAAE,CAAA;QACzB,OAAO,OAAO,GAAG,GAAG;QACpB;IACF;IAEA,OAAO;QAAC;QAAO;KAAM;AACvB","sources":["packages/@react-aria/utils/src/useValueEffect.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 {Dispatch, MutableRefObject, useRef, useState} from 'react';\nimport {useEffectEvent, useLayoutEffect} from './';\n\ntype SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;\n\n// This hook works like `useState`, but when setting the value, you pass a generator function\n// that can yield multiple values. Each yielded value updates the state and waits for the next\n// layout effect, then continues the generator. This allows sequential updates to state to be\n// written linearly.\nexport function useValueEffect<S>(defaultValue: S | (() => S)): [S, Dispatch<SetValueAction<S>>] {\n  let [value, setValue] = useState(defaultValue);\n  let effect: MutableRefObject<Generator<S> | null> = useRef<Generator<S> | null>(null);\n\n  // Store the function in a ref so we can always access the current version\n  // which has the proper `value` in scope.\n  let nextRef = useEffectEvent(() => {\n    if (!effect.current) {\n      return;\n    }\n    // Run the generator to the next yield.\n    let newValue = effect.current.next();\n\n    // If the generator is done, reset the effect.\n    if (newValue.done) {\n      effect.current = null;\n      return;\n    }\n\n    // If the value is the same as the current value,\n    // then continue to the next yield. Otherwise,\n    // set the value in state and wait for the next layout effect.\n    if (value === newValue.value) {\n      nextRef();\n    } else {\n      setValue(newValue.value);\n    }\n  });\n\n  useLayoutEffect(() => {\n    // If there is an effect currently running, continue to the next yield.\n    if (effect.current) {\n      nextRef();\n    }\n  });\n\n  let queue = useEffectEvent(fn => {\n    effect.current = fn(value);\n    nextRef();\n  });\n\n  return [value, queue];\n}\n"],"names":[],"version":3,"file":"useValueEffect.module.js.map"}
+{"mappings":";;;AAAA;;;;;;;;;;CAUC;;AAWM,SAAS,0CAAkB,YAA2B;IAC3D,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,eAAO,EAAE;IACjC,iGAAiG;IACjG,sDAAsD;IACtD,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,SAAyC,CAAA,GAAA,aAAK,EAAuB;IAEzE,0EAA0E;IAC1E,yCAAyC;IACzC,IAAI,UAAU,CAAA,GAAA,aAAK,EAAE;QACnB,IAAI,CAAC,OAAO,OAAO,EACjB;QAEF,uCAAuC;QACvC,IAAI,WAAW,OAAO,OAAO,CAAC,IAAI;QAElC,8CAA8C;QAC9C,IAAI,SAAS,IAAI,EAAE;YACjB,OAAO,OAAO,GAAG;YACjB;QACF;QAEA,iDAAiD;QACjD,8CAA8C;QAC9C,8DAA8D;QAC9D,IAAI,UAAU,OAAO,KAAK,SAAS,KAAK,EACtC,QAAQ,OAAO;aAEf,SAAS,SAAS,KAAK;IAE3B;IAEA,CAAA,GAAA,yCAAc,EAAE;QACd,UAAU,OAAO,GAAG;QACpB,uEAAuE;QACvE,IAAI,OAAO,OAAO,EAChB,QAAQ,OAAO;IAEnB;IAEA,IAAI,QAAQ,CAAA,GAAA,kBAAU,EAAE,CAAA;QACtB,OAAO,OAAO,GAAG,GAAG,UAAU,OAAO;QACrC,QAAQ,OAAO;IACjB,GAAG;QAAC;KAAQ;IAEZ,OAAO;QAAC;QAAO;KAAM;AACvB","sources":["packages/@react-aria/utils/src/useValueEffect.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 {Dispatch, RefObject, useCallback, useRef, useState} from 'react';\nimport {useLayoutEffect} from './';\n\ntype SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;\n\n// This hook works like `useState`, but when setting the value, you pass a generator function\n// that can yield multiple values. Each yielded value updates the state and waits for the next\n// layout effect, then continues the generator. This allows sequential updates to state to be\n// written linearly.\nexport function useValueEffect<S>(defaultValue: S | (() => S)): [S, Dispatch<SetValueAction<S>>] {\n  let [value, setValue] = useState(defaultValue);\n  // Keep an up to date copy of value in a ref so we can access the current value in the generator.\n  // This allows us to maintain a stable queue function.\n  let currValue = useRef(value);\n  let effect: RefObject<Generator<S> | null> = useRef<Generator<S> | null>(null);\n\n  // Store the function in a ref so we can always access the current version\n  // which has the proper `value` in scope.\n  let nextRef = useRef(() => {\n    if (!effect.current) {\n      return;\n    }\n    // Run the generator to the next yield.\n    let newValue = effect.current.next();\n\n    // If the generator is done, reset the effect.\n    if (newValue.done) {\n      effect.current = null;\n      return;\n    }\n\n    // If the value is the same as the current value,\n    // then continue to the next yield. Otherwise,\n    // set the value in state and wait for the next layout effect.\n    if (currValue.current === newValue.value) {\n      nextRef.current();\n    } else {\n      setValue(newValue.value);\n    }\n  });\n\n  useLayoutEffect(() => {\n    currValue.current = value;\n    // If there is an effect currently running, continue to the next yield.\n    if (effect.current) {\n      nextRef.current();\n    }\n  });\n\n  let queue = useCallback(fn => {\n    effect.current = fn(currValue.current);\n    nextRef.current();\n  }, [nextRef]);\n\n  return [value, queue];\n}\n"],"names":[],"version":3,"file":"useValueEffect.module.js.map"}

package/dist/useViewportSize.main.js

@@ -29,16 +29,18 @@ function $8b24bab62f5c65ad$export$d699905dd57c73ca() {
             height: 0
         } : $8b24bab62f5c65ad$var$getViewportSize());
     (0, $4gIVO$react.useEffect)(()=>{
-        // Use visualViewport api to track available height even on iOS virtual keyboard opening
-        let onResize = ()=>{
-            // Ignore updates when zoomed.
-            if ($8b24bab62f5c65ad$var$visualViewport && $8b24bab62f5c65ad$var$visualViewport.scale > 1) return;
+        let updateSize = (newSize)=>{
             setSize((size)=>{
-                let newSize = $8b24bab62f5c65ad$var$getViewportSize();
                 if (newSize.width === size.width && newSize.height === size.height) return size;
                 return newSize;
             });
         };
+        // Use visualViewport api to track available height even on iOS virtual keyboard opening
+        let onResize = ()=>{
+            // Ignore updates when zoomed.
+            if ($8b24bab62f5c65ad$var$visualViewport && $8b24bab62f5c65ad$var$visualViewport.scale > 1) return;
+            updateSize($8b24bab62f5c65ad$var$getViewportSize());
+        };
         // 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;
@@ -46,16 +48,13 @@ function $8b24bab62f5c65ad$export$d699905dd57c73ca() {
             if ($8b24bab62f5c65ad$var$visualViewport && $8b24bab62f5c65ad$var$visualViewport.scale > 1) return;
             if ((0, $2308dc377e184bb0$exports.willOpenKeyboard)(e.target)) // Wait one frame to see if a new element gets focused.
             frame = requestAnimationFrame(()=>{
-                if (!document.activeElement || !(0, $2308dc377e184bb0$exports.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;
+                if (!document.activeElement || !(0, $2308dc377e184bb0$exports.willOpenKeyboard)(document.activeElement)) updateSize({
+                    width: document.documentElement.clientWidth,
+                    height: document.documentElement.clientHeight
                 });
             });
         };
+        updateSize($8b24bab62f5c65ad$var$getViewportSize());
         window.addEventListener('blur', onBlur, true);
         if (!$8b24bab62f5c65ad$var$visualViewport) window.addEventListener('resize', onResize);
         else $8b24bab62f5c65ad$var$visualViewport.addEventListener('resize', onResize);
@@ -71,8 +70,8 @@ function $8b24bab62f5c65ad$export$d699905dd57c73ca() {
 function $8b24bab62f5c65ad$var$getViewportSize() {
     return {
         // Multiply by the visualViewport scale to get the "natural" size, unaffected by pinch zooming.
-        width: $8b24bab62f5c65ad$var$visualViewport ? $8b24bab62f5c65ad$var$visualViewport.width * $8b24bab62f5c65ad$var$visualViewport.scale : window.innerWidth,
-        height: $8b24bab62f5c65ad$var$visualViewport ? $8b24bab62f5c65ad$var$visualViewport.height * $8b24bab62f5c65ad$var$visualViewport.scale : window.innerHeight
+        width: $8b24bab62f5c65ad$var$visualViewport ? $8b24bab62f5c65ad$var$visualViewport.width * $8b24bab62f5c65ad$var$visualViewport.scale : document.documentElement.clientWidth,
+        height: $8b24bab62f5c65ad$var$visualViewport ? $8b24bab62f5c65ad$var$visualViewport.height * $8b24bab62f5c65ad$var$visualViewport.scale : document.documentElement.clientHeight
     };
 }
 

package/dist/useViewportSize.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AAWD,IAAI,uCAAiB,OAAO,aAAa,eAAe,OAAO,cAAc;AAEtE,SAAS;IACd,IAAI,QAAQ,CAAA,GAAA,4BAAO;IACnB,IAAI,CAAC,MAAM,QAAQ,GAAG,CAAA,GAAA,qBAAO,EAAE,IAAM,QAAQ;YAAC,OAAO;YAAG,QAAQ;QAAC,IAAI;IAErE,CAAA,GAAA,sBAAQ,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,0CAAe,EAAE,EAAE,MAAM,GAC3B,uDAAuD;YACvD,QAAQ,sBAAsB;gBAC5B,IAAI,CAAC,SAAS,aAAa,IAAI,CAAC,CAAA,GAAA,0CAAe,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.main.js.map"}
+{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AAWD,IAAI,uCAAiB,OAAO,aAAa,eAAe,OAAO,cAAc;AAEtE,SAAS;IACd,IAAI,QAAQ,CAAA,GAAA,4BAAO;IACnB,IAAI,CAAC,MAAM,QAAQ,GAAG,CAAA,GAAA,qBAAO,EAAE,IAAM,QAAQ;YAAC,OAAO;YAAG,QAAQ;QAAC,IAAI;IAErE,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,aAAa,CAAC;YAChB,QAAQ,CAAA;gBACN,IAAI,QAAQ,KAAK,KAAK,KAAK,KAAK,IAAI,QAAQ,MAAM,KAAK,KAAK,MAAM,EAChE,OAAO;gBAET,OAAO;YACT;QACF;QAEA,wFAAwF;QACxF,IAAI,WAAW;YACb,8BAA8B;YAC9B,IAAI,wCAAkB,qCAAe,KAAK,GAAG,GAC3C;YAGF,WAAW;QACb;QAEA,iHAAiH;QACjH,gGAAgG;QAChG,IAAI;QACJ,IAAI,SAAS,CAAC;YACZ,IAAI,wCAAkB,qCAAe,KAAK,GAAG,GAC3C;YAGF,IAAI,CAAA,GAAA,0CAAe,EAAE,EAAE,MAAM,GAC3B,uDAAuD;YACvD,QAAQ,sBAAsB;gBAC5B,IAAI,CAAC,SAAS,aAAa,IAAI,CAAC,CAAA,GAAA,0CAAe,EAAE,SAAS,aAAa,GACrE,WAAW;oBAAC,OAAO,SAAS,eAAe,CAAC,WAAW;oBAAE,QAAQ,SAAS,eAAe,CAAC,YAAY;gBAAA;YAE1G;QAEJ;QAEA,WAAW;QAEX,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,SAAS,eAAe,CAAC,WAAW;QAC1G,QAAQ,uCAAiB,qCAAe,MAAM,GAAG,qCAAe,KAAK,GAAG,SAAS,eAAe,CAAC,YAAY;IAC/G;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    let updateSize = (newSize: ViewportSize) => {\n      setSize(size => {\n        if (newSize.width === size.width && newSize.height === size.height) {\n          return size;\n        }\n        return newSize;\n      });\n    };\n\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      updateSize(getViewportSize());\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            updateSize({width: document.documentElement.clientWidth, height: document.documentElement.clientHeight});\n          }\n        });\n      }\n    };\n\n    updateSize(getViewportSize());\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 : document.documentElement.clientWidth,\n    height: visualViewport ? visualViewport.height * visualViewport.scale : document.documentElement.clientHeight\n  };\n}\n"],"names":[],"version":3,"file":"useViewportSize.main.js.map"}

package/dist/useViewportSize.mjs

@@ -23,16 +23,18 @@ function $5df64b3807dc15ee$export$d699905dd57c73ca() {
             height: 0
         } : $5df64b3807dc15ee$var$getViewportSize());
     (0, $fuDHA$useEffect)(()=>{
-        // Use visualViewport api to track available height even on iOS virtual keyboard opening
-        let onResize = ()=>{
-            // Ignore updates when zoomed.
-            if ($5df64b3807dc15ee$var$visualViewport && $5df64b3807dc15ee$var$visualViewport.scale > 1) return;
+        let updateSize = (newSize)=>{
             setSize((size)=>{
-                let newSize = $5df64b3807dc15ee$var$getViewportSize();
                 if (newSize.width === size.width && newSize.height === size.height) return size;
                 return newSize;
             });
         };
+        // Use visualViewport api to track available height even on iOS virtual keyboard opening
+        let onResize = ()=>{
+            // Ignore updates when zoomed.
+            if ($5df64b3807dc15ee$var$visualViewport && $5df64b3807dc15ee$var$visualViewport.scale > 1) return;
+            updateSize($5df64b3807dc15ee$var$getViewportSize());
+        };
         // 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;
@@ -40,16 +42,13 @@ function $5df64b3807dc15ee$export$d699905dd57c73ca() {
             if ($5df64b3807dc15ee$var$visualViewport && $5df64b3807dc15ee$var$visualViewport.scale > 1) return;
             if ((0, $21f1aa98acb08317$export$c57958e35f31ed73)(e.target)) // Wait one frame to see if a new element gets focused.
             frame = requestAnimationFrame(()=>{
-                if (!document.activeElement || !(0, $21f1aa98acb08317$export$c57958e35f31ed73)(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;
+                if (!document.activeElement || !(0, $21f1aa98acb08317$export$c57958e35f31ed73)(document.activeElement)) updateSize({
+                    width: document.documentElement.clientWidth,
+                    height: document.documentElement.clientHeight
                 });
             });
         };
+        updateSize($5df64b3807dc15ee$var$getViewportSize());
         window.addEventListener('blur', onBlur, true);
         if (!$5df64b3807dc15ee$var$visualViewport) window.addEventListener('resize', onResize);
         else $5df64b3807dc15ee$var$visualViewport.addEventListener('resize', onResize);
@@ -65,8 +64,8 @@ function $5df64b3807dc15ee$export$d699905dd57c73ca() {
 function $5df64b3807dc15ee$var$getViewportSize() {
     return {
         // Multiply by the visualViewport scale to get the "natural" size, unaffected by pinch zooming.
-        width: $5df64b3807dc15ee$var$visualViewport ? $5df64b3807dc15ee$var$visualViewport.width * $5df64b3807dc15ee$var$visualViewport.scale : window.innerWidth,
-        height: $5df64b3807dc15ee$var$visualViewport ? $5df64b3807dc15ee$var$visualViewport.height * $5df64b3807dc15ee$var$visualViewport.scale : window.innerHeight
+        width: $5df64b3807dc15ee$var$visualViewport ? $5df64b3807dc15ee$var$visualViewport.width * $5df64b3807dc15ee$var$visualViewport.scale : document.documentElement.clientWidth,
+        height: $5df64b3807dc15ee$var$visualViewport ? $5df64b3807dc15ee$var$visualViewport.height * $5df64b3807dc15ee$var$visualViewport.scale : document.documentElement.clientHeight
     };
 }
 

package/dist/useViewportSize.module.js

@@ -23,16 +23,18 @@ function $5df64b3807dc15ee$export$d699905dd57c73ca() {
             height: 0
         } : $5df64b3807dc15ee$var$getViewportSize());
     (0, $fuDHA$useEffect)(()=>{
-        // Use visualViewport api to track available height even on iOS virtual keyboard opening
-        let onResize = ()=>{
-            // Ignore updates when zoomed.
-            if ($5df64b3807dc15ee$var$visualViewport && $5df64b3807dc15ee$var$visualViewport.scale > 1) return;
+        let updateSize = (newSize)=>{
             setSize((size)=>{
-                let newSize = $5df64b3807dc15ee$var$getViewportSize();
                 if (newSize.width === size.width && newSize.height === size.height) return size;
                 return newSize;
             });
         };
+        // Use visualViewport api to track available height even on iOS virtual keyboard opening
+        let onResize = ()=>{
+            // Ignore updates when zoomed.
+            if ($5df64b3807dc15ee$var$visualViewport && $5df64b3807dc15ee$var$visualViewport.scale > 1) return;
+            updateSize($5df64b3807dc15ee$var$getViewportSize());
+        };
         // 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;
@@ -40,16 +42,13 @@ function $5df64b3807dc15ee$export$d699905dd57c73ca() {
             if ($5df64b3807dc15ee$var$visualViewport && $5df64b3807dc15ee$var$visualViewport.scale > 1) return;
             if ((0, $21f1aa98acb08317$export$c57958e35f31ed73)(e.target)) // Wait one frame to see if a new element gets focused.
             frame = requestAnimationFrame(()=>{
-                if (!document.activeElement || !(0, $21f1aa98acb08317$export$c57958e35f31ed73)(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;
+                if (!document.activeElement || !(0, $21f1aa98acb08317$export$c57958e35f31ed73)(document.activeElement)) updateSize({
+                    width: document.documentElement.clientWidth,
+                    height: document.documentElement.clientHeight
                 });
             });
         };
+        updateSize($5df64b3807dc15ee$var$getViewportSize());
         window.addEventListener('blur', onBlur, true);
         if (!$5df64b3807dc15ee$var$visualViewport) window.addEventListener('resize', onResize);
         else $5df64b3807dc15ee$var$visualViewport.addEventListener('resize', onResize);
@@ -65,8 +64,8 @@ function $5df64b3807dc15ee$export$d699905dd57c73ca() {
 function $5df64b3807dc15ee$var$getViewportSize() {
     return {
         // Multiply by the visualViewport scale to get the "natural" size, unaffected by pinch zooming.
-        width: $5df64b3807dc15ee$var$visualViewport ? $5df64b3807dc15ee$var$visualViewport.width * $5df64b3807dc15ee$var$visualViewport.scale : window.innerWidth,
-        height: $5df64b3807dc15ee$var$visualViewport ? $5df64b3807dc15ee$var$visualViewport.height * $5df64b3807dc15ee$var$visualViewport.scale : window.innerHeight
+        width: $5df64b3807dc15ee$var$visualViewport ? $5df64b3807dc15ee$var$visualViewport.width * $5df64b3807dc15ee$var$visualViewport.scale : document.documentElement.clientWidth,
+        height: $5df64b3807dc15ee$var$visualViewport ? $5df64b3807dc15ee$var$visualViewport.height * $5df64b3807dc15ee$var$visualViewport.scale : document.documentElement.clientHeight
     };
 }
 

package/dist/useViewportSize.module.js.map

@@ -1 +1 @@
-{"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"}
+{"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,IAAI,aAAa,CAAC;YAChB,QAAQ,CAAA;gBACN,IAAI,QAAQ,KAAK,KAAK,KAAK,KAAK,IAAI,QAAQ,MAAM,KAAK,KAAK,MAAM,EAChE,OAAO;gBAET,OAAO;YACT;QACF;QAEA,wFAAwF;QACxF,IAAI,WAAW;YACb,8BAA8B;YAC9B,IAAI,wCAAkB,qCAAe,KAAK,GAAG,GAC3C;YAGF,WAAW;QACb;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,WAAW;oBAAC,OAAO,SAAS,eAAe,CAAC,WAAW;oBAAE,QAAQ,SAAS,eAAe,CAAC,YAAY;gBAAA;YAE1G;QAEJ;QAEA,WAAW;QAEX,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,SAAS,eAAe,CAAC,WAAW;QAC1G,QAAQ,uCAAiB,qCAAe,MAAM,GAAG,qCAAe,KAAK,GAAG,SAAS,eAAe,CAAC,YAAY;IAC/G;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    let updateSize = (newSize: ViewportSize) => {\n      setSize(size => {\n        if (newSize.width === size.width && newSize.height === size.height) {\n          return size;\n        }\n        return newSize;\n      });\n    };\n\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      updateSize(getViewportSize());\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            updateSize({width: document.documentElement.clientWidth, height: document.documentElement.clientHeight});\n          }\n        });\n      }\n    };\n\n    updateSize(getViewportSize());\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 : document.documentElement.clientWidth,\n    height: visualViewport ? visualViewport.height * visualViewport.scale : document.documentElement.clientHeight\n  };\n}\n"],"names":[],"version":3,"file":"useViewportSize.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/utils",
-  "version": "3.31.0",
+  "version": "3.33.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.1",
+    "@react-stately/utils": "^3.11.0",
+    "@react-types/shared": "^3.33.0",
     "@swc/helpers": "^0.5.0",
     "clsx": "^2.0.0"
   },
@@ -40,5 +40,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0bda51183baa23306342af32a82012ea0fe0f2dc"
+  "gitHead": "66e51757606b43a89ed02c574ca24517323a2ab9"
 }

package/src/domHelpers.ts

@@ -3,8 +3,8 @@ export const getOwnerDocument = (el: Element | null | undefined): Document => {
 };
 
 export const getOwnerWindow = (
-  el: (Window & typeof global) | Element | null | undefined
-): Window & typeof global => {
+  el: (Window & typeof globalThis) | Element | null | undefined
+): Window & typeof globalThis => {
   if (el && 'window' in el && el.window === el) {
     return el;
   }

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/mergeProps.ts

@@ -13,6 +13,7 @@
 import {chain} from './chain';
 import clsx from 'clsx';
 import {mergeIds} from './useId';
+import {mergeRefs} from './mergeRefs';
 
 interface Props {
   [key: string]: any
@@ -28,8 +29,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, ids are deduplicated, and refs are merged.
  * For all other props, the last prop object overrides all previous ones.
  * @param args - Multiple sets of props to merge together.
  */
@@ -64,6 +64,8 @@ export function mergeProps<T extends PropsArg[]>(...args: T): UnionToIntersectio
         result[key] = clsx(a, b);
       } else if (key === 'id' && a && b) {
         result.id = mergeIds(a, b);
+      } else if (key === 'ref' && a && b) {
+        result.ref = mergeRefs(a, b);
         // Override others
       } else {
         result[key] = b !== undefined ? b : a;

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

@@ -11,7 +11,7 @@
  */
 
 import {getScrollParents} from './getScrollParents';
-import {isChrome} from './platform';
+import {nodeContains} from './shadowdom/DOMFunctions';
 
 interface ScrollIntoViewportOpts {
   /** The optional containing element of the target to be centered in the viewport. */
@@ -41,64 +41,32 @@ export function scrollIntoView(scrollView: HTMLElement, element: HTMLElement): v
     scrollPaddingLeft
   } = getComputedStyle(scrollView);
 
-  // Account for scroll margin of the element
-  let {
-    scrollMarginTop,
-    scrollMarginRight,
-    scrollMarginBottom,
-    scrollMarginLeft
-  } = getComputedStyle(element);
-
   let borderAdjustedX = x + parseInt(borderLeftWidth, 10);
   let borderAdjustedY = y + parseInt(borderTopWidth, 10);
   // Ignore end/bottom border via clientHeight/Width instead of offsetHeight/Width
   let maxX = borderAdjustedX + scrollView.clientWidth;
   let maxY = borderAdjustedY + scrollView.clientHeight;
 
-  // Get scroll padding / margin values as pixels - defaults to 0 if no scroll padding / margin
+  // Get scroll padding values as pixels - defaults to 0 if no scroll padding
   // is used.
   let scrollPaddingTopNumber = parseInt(scrollPaddingTop, 10) || 0;
   let scrollPaddingBottomNumber = parseInt(scrollPaddingBottom, 10) || 0;
   let scrollPaddingRightNumber = parseInt(scrollPaddingRight, 10) || 0;
   let scrollPaddingLeftNumber = parseInt(scrollPaddingLeft, 10) || 0;
-  let scrollMarginTopNumber = parseInt(scrollMarginTop, 10) || 0;
-  let scrollMarginBottomNumber = parseInt(scrollMarginBottom, 10) || 0;
-  let scrollMarginRightNumber = parseInt(scrollMarginRight, 10) || 0;
-  let scrollMarginLeftNumber = parseInt(scrollMarginLeft, 10) || 0;
-
-  let targetLeft = offsetX - scrollMarginLeftNumber;
-  let targetRight = offsetX + width + scrollMarginRightNumber;
-  let targetTop = offsetY - scrollMarginTopNumber;
-  let targetBottom = offsetY + height + scrollMarginBottomNumber;
-
-  let scrollPortLeft = x + parseInt(borderLeftWidth, 10) + scrollPaddingLeftNumber;
-  let scrollPortRight = maxX - scrollPaddingRightNumber;
-  let scrollPortTop = y + parseInt(borderTopWidth, 10) + scrollPaddingTopNumber;
-  let scrollPortBottom = maxY - scrollPaddingBottomNumber;
-
-  if (targetLeft > scrollPortLeft || targetRight < scrollPortRight) {
-    if (targetLeft <= x + scrollPaddingLeftNumber) {
-      x = targetLeft - parseInt(borderLeftWidth, 10) - scrollPaddingLeftNumber;
-    } else if (targetRight > maxX - scrollPaddingRightNumber) {
-      x += targetRight - maxX + scrollPaddingRightNumber;
-    }
-  }
 
-  if (targetTop > scrollPortTop || targetBottom < scrollPortBottom) {
-    if (targetTop <= borderAdjustedY + scrollPaddingTopNumber) {
-      y = targetTop - parseInt(borderTopWidth, 10) - scrollPaddingTopNumber;
-    } else if (targetBottom > maxY - scrollPaddingBottomNumber) {
-      y += targetBottom - maxY + scrollPaddingBottomNumber;
-    }
+  if (offsetX <= x + scrollPaddingLeftNumber) {
+    x = offsetX - parseInt(borderLeftWidth, 10) - scrollPaddingLeftNumber;
+  } else if (offsetX + width > maxX - scrollPaddingRightNumber) {
+    x += offsetX + width - maxX + scrollPaddingRightNumber;
   }
-
-  if (process.env.NODE_ENV === 'test') {
-    scrollView.scrollLeft = x;
-    scrollView.scrollTop = y;
-    return;
+  if (offsetY <= borderAdjustedY + scrollPaddingTopNumber) {
+    y = offsetY - parseInt(borderTopWidth, 10) - scrollPaddingTopNumber;
+  } else if (offsetY + height > maxY - scrollPaddingBottomNumber) {
+    y += offsetY + height - maxY + scrollPaddingBottomNumber;
   }
 
-  scrollView.scrollTo({left: x, top: y});
+  scrollView.scrollLeft = x;
+  scrollView.scrollTop = y;
 }
 
 /**
@@ -113,7 +81,7 @@ function relativeOffset(ancestor: HTMLElement, child: HTMLElement, axis: 'left'|
     if (child.offsetParent === ancestor) {
       // Stop once we have found the ancestor we are interested in.
       break;
-    } else if (child.offsetParent.contains(ancestor)) {
+    } else if (nodeContains(child.offsetParent, ancestor)) {
       // If the ancestor is not `position:relative`, then we stop at
       // _its_ offset parent, and we subtract off _its_ offset, so that
       // we end up with the proper offset from child to ancestor.
@@ -131,12 +99,11 @@ function relativeOffset(ancestor: HTMLElement, child: HTMLElement, axis: 'left'|
  * the body (e.g. targetElement is in a popover), this will only scroll the scroll parents of the targetElement up to but not including the body itself.
  */
 export function scrollIntoViewport(targetElement: Element | null, opts?: ScrollIntoViewportOpts): void {
-  if (targetElement && document.contains(targetElement)) {
+  if (targetElement && nodeContains(document, targetElement)) {
     let root = document.scrollingElement || document.documentElement;
     let isScrollPrevented = window.getComputedStyle(root).overflow === 'hidden';
-    // If scrolling is not currently prevented then we aren't in a overlay nor is a overlay open, just use element.scrollIntoView to bring the element into view
-    // Also ignore in chrome because of this bug: https://issues.chromium.org/issues/40074749
-    if (!isScrollPrevented && !isChrome()) {
+    // If scrolling is not currently prevented then we aren’t in a overlay nor is a overlay open, just use element.scrollIntoView to bring the element into view
+    if (!isScrollPrevented) {
       let {left: originalLeft, top: originalTop} = targetElement.getBoundingClientRect();
 
       // use scrollIntoView({block: 'nearest'}) instead of .focus to check if the element is fully in view or not since .focus()
@@ -151,6 +118,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/shadowdom/DOMFunctions.ts

@@ -1,4 +1,5 @@
 // Source: https://github.com/microsoft/tabster/blob/a89fc5d7e332d48f68d03b1ca6e344489d1c3898/src/Shadowdomize/DOMFunctions.ts#L16
+/* eslint-disable rsp-rules/no-non-shadow-contains */
 
 import {isShadowRoot} from '../domHelpers';
 import {shadowDOM} from '@react-stately/flags';

package/src/useDrag1D.ts

@@ -13,6 +13,7 @@
  /* eslint-disable rulesdir/pure-render */
 
 import {getOffset} from './getOffset';
+import {nodeContains} from './shadowdom/DOMFunctions';
 import {Orientation} from '@react-types/shared';
 import React, {HTMLAttributes, MutableRefObject, useRef} from 'react';
 
@@ -99,7 +100,7 @@ export function useDrag1D(props: UseDrag1DProps): HTMLAttributes<HTMLElement> {
     const target = e.currentTarget;
     // If we're already handling dragging on a descendant with useDrag1D, then
     // we don't want to handle the drag motion on this target as well.
-    if (draggingElements.some(elt => target.contains(elt))) {
+    if (draggingElements.some(elt => nodeContains(target, elt))) {
       return;
     }
     draggingElements.push(target);

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);
 }