@react-aria/utils 3.33.0 → 3.33.1

package/dist/useViewportSize.mjs

@@ -1,3 +1,5 @@
+import {getActiveElement as $d4ee10de306f2510$export$cd4e5573fbe2b576, getEventTarget as $d4ee10de306f2510$export$e58f029f0fbfdb29} from "./DOMFunctions.mjs";
+import {isIOS as $c87311424ea30a05$export$fedb369cb70207f1} from "./platform.mjs";
 import {willOpenKeyboard as $21f1aa98acb08317$export$c57958e35f31ed73} from "./keyboard.mjs";
 import {useState as $fuDHA$useState, useEffect as $fuDHA$useEffect} from "react";
 import {useIsSSR as $fuDHA$useIsSSR} from "@react-aria/ssr";
@@ -15,6 +17,8 @@ import {useIsSSR as $fuDHA$useIsSSR} from "@react-aria/ssr";
  */ 
 
 
+
+
 let $5df64b3807dc15ee$var$visualViewport = typeof document !== 'undefined' && window.visualViewport;
 function $5df64b3807dc15ee$export$d699905dd57c73ca() {
     let isSSR = (0, $fuDHA$useIsSSR)();
@@ -40,21 +44,22 @@ function $5df64b3807dc15ee$export$d699905dd57c73ca() {
         let frame;
         let onBlur = (e)=>{
             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.
+            if ((0, $21f1aa98acb08317$export$c57958e35f31ed73)((0, $d4ee10de306f2510$export$e58f029f0fbfdb29)(e))) // Wait one frame to see if a new element gets focused.
             frame = requestAnimationFrame(()=>{
-                if (!document.activeElement || !(0, $21f1aa98acb08317$export$c57958e35f31ed73)(document.activeElement)) updateSize({
+                let activeElement = (0, $d4ee10de306f2510$export$cd4e5573fbe2b576)();
+                if (!activeElement || !(0, $21f1aa98acb08317$export$c57958e35f31ed73)(activeElement)) updateSize({
                     width: document.documentElement.clientWidth,
                     height: document.documentElement.clientHeight
                 });
             });
         };
         updateSize($5df64b3807dc15ee$var$getViewportSize());
-        window.addEventListener('blur', onBlur, true);
+        if ((0, $c87311424ea30a05$export$fedb369cb70207f1)()) window.addEventListener('blur', onBlur, true);
         if (!$5df64b3807dc15ee$var$visualViewport) window.addEventListener('resize', onResize);
         else $5df64b3807dc15ee$var$visualViewport.addEventListener('resize', onResize);
         return ()=>{
             cancelAnimationFrame(frame);
-            window.removeEventListener('blur', onBlur, true);
+            if ((0, $c87311424ea30a05$export$fedb369cb70207f1)()) window.removeEventListener('blur', onBlur, true);
             if (!$5df64b3807dc15ee$var$visualViewport) window.removeEventListener('resize', onResize);
             else $5df64b3807dc15ee$var$visualViewport.removeEventListener('resize', onResize);
         };

package/dist/useViewportSize.module.js

@@ -1,3 +1,5 @@
+import {getActiveElement as $d4ee10de306f2510$export$cd4e5573fbe2b576, getEventTarget as $d4ee10de306f2510$export$e58f029f0fbfdb29} from "./DOMFunctions.module.js";
+import {isIOS as $c87311424ea30a05$export$fedb369cb70207f1} from "./platform.module.js";
 import {willOpenKeyboard as $21f1aa98acb08317$export$c57958e35f31ed73} from "./keyboard.module.js";
 import {useState as $fuDHA$useState, useEffect as $fuDHA$useEffect} from "react";
 import {useIsSSR as $fuDHA$useIsSSR} from "@react-aria/ssr";
@@ -15,6 +17,8 @@ import {useIsSSR as $fuDHA$useIsSSR} from "@react-aria/ssr";
  */ 
 
 
+
+
 let $5df64b3807dc15ee$var$visualViewport = typeof document !== 'undefined' && window.visualViewport;
 function $5df64b3807dc15ee$export$d699905dd57c73ca() {
     let isSSR = (0, $fuDHA$useIsSSR)();
@@ -40,21 +44,22 @@ function $5df64b3807dc15ee$export$d699905dd57c73ca() {
         let frame;
         let onBlur = (e)=>{
             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.
+            if ((0, $21f1aa98acb08317$export$c57958e35f31ed73)((0, $d4ee10de306f2510$export$e58f029f0fbfdb29)(e))) // Wait one frame to see if a new element gets focused.
             frame = requestAnimationFrame(()=>{
-                if (!document.activeElement || !(0, $21f1aa98acb08317$export$c57958e35f31ed73)(document.activeElement)) updateSize({
+                let activeElement = (0, $d4ee10de306f2510$export$cd4e5573fbe2b576)();
+                if (!activeElement || !(0, $21f1aa98acb08317$export$c57958e35f31ed73)(activeElement)) updateSize({
                     width: document.documentElement.clientWidth,
                     height: document.documentElement.clientHeight
                 });
             });
         };
         updateSize($5df64b3807dc15ee$var$getViewportSize());
-        window.addEventListener('blur', onBlur, true);
+        if ((0, $c87311424ea30a05$export$fedb369cb70207f1)()) window.addEventListener('blur', onBlur, true);
         if (!$5df64b3807dc15ee$var$visualViewport) window.addEventListener('resize', onResize);
         else $5df64b3807dc15ee$var$visualViewport.addEventListener('resize', onResize);
         return ()=>{
             cancelAnimationFrame(frame);
-            window.removeEventListener('blur', onBlur, true);
+            if ((0, $c87311424ea30a05$export$fedb369cb70207f1)()) window.removeEventListener('blur', onBlur, true);
             if (!$5df64b3807dc15ee$var$visualViewport) window.removeEventListener('resize', onResize);
             else $5df64b3807dc15ee$var$visualViewport.removeEventListener('resize', onResize);
         };

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,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"}
+{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAaD,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,CAAA,GAAA,yCAAa,EAAE,KAClC,uDAAuD;YACvD,QAAQ,sBAAsB;gBAC5B,IAAI,gBAAgB,CAAA,GAAA,yCAAe;gBACnC,IAAI,CAAC,iBAAiB,CAAC,CAAA,GAAA,yCAAe,EAAE,gBACtC,WAAW;oBAAC,OAAO,SAAS,eAAe,CAAC,WAAW;oBAAE,QAAQ,SAAS,eAAe,CAAC,YAAY;gBAAA;YAE1G;QAEJ;QAEA,WAAW;QAEX,IAAI,CAAA,GAAA,yCAAI,KACN,OAAO,gBAAgB,CAAC,QAAQ,QAAQ;QAG1C,IAAI,CAAC,sCACH,OAAO,gBAAgB,CAAC,UAAU;aAElC,qCAAe,gBAAgB,CAAC,UAAU;QAG5C,OAAO;YACL,qBAAqB;YACrB,IAAI,CAAA,GAAA,yCAAI,KACN,OAAO,mBAAmB,CAAC,QAAQ,QAAQ;YAE7C,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 {getActiveElement, getEventTarget} from './shadowdom/DOMFunctions';\nimport {isIOS} from './platform';\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(getEventTarget(e) as Element)) {\n        // Wait one frame to see if a new element gets focused.\n        frame = requestAnimationFrame(() => {\n          let activeElement = getActiveElement();\n          if (!activeElement || !willOpenKeyboard(activeElement)) {\n            updateSize({width: document.documentElement.clientWidth, height: document.documentElement.clientHeight});\n          }\n        });\n      }\n    };\n\n    updateSize(getViewportSize());\n\n    if (isIOS()) {\n      window.addEventListener('blur', onBlur, true);\n    }\n\n    if (!visualViewport) {\n      window.addEventListener('resize', onResize);\n    } else {\n      visualViewport.addEventListener('resize', onResize);\n    }\n\n    return () => {\n      cancelAnimationFrame(frame);\n      if (isIOS()) {\n        window.removeEventListener('blur', onBlur, true);\n      }\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.33.0",
+  "version": "3.33.1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -29,7 +29,7 @@
     "@react-aria/ssr": "^3.9.10",
     "@react-stately/flags": "^3.1.2",
     "@react-stately/utils": "^3.11.0",
-    "@react-types/shared": "^3.33.0",
+    "@react-types/shared": "^3.33.1",
     "@swc/helpers": "^0.5.0",
     "clsx": "^2.0.0"
   },
@@ -40,5 +40,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "66e51757606b43a89ed02c574ca24517323a2ab9"
+  "gitHead": "8df187370053aa35f553cb388ad670f65e1ab371"
 }

package/src/getScrollParents.ts

@@ -13,14 +13,15 @@
 import {isScrollable} from './isScrollable';
 
 export function getScrollParents(node: Element, checkForOverflow?: boolean): Element[] {
-  const scrollParents: Element[] = [];
+  let parentElements: Element[] = [];
+  let root = document.scrollingElement || document.documentElement;
 
-  while (node && node !== document.documentElement) {
+  do {
     if (isScrollable(node, checkForOverflow)) {
-      scrollParents.push(node);
+      parentElements.push(node);
     }
     node = node.parentElement as Element;
-  }
+  } while (node && node !== root);
 
-  return scrollParents;
+  return parentElements;
 }

package/src/index.ts

@@ -12,7 +12,7 @@
 export {useId, mergeIds, useSlotId} from './useId';
 export {chain} from './chain';
 export {createShadowTreeWalker, ShadowTreeWalker} from './shadowdom/ShadowTreeWalker';
-export {getActiveElement, getEventTarget, nodeContains} from './shadowdom/DOMFunctions';
+export {getActiveElement, getEventTarget, nodeContains, isFocusWithin} from './shadowdom/DOMFunctions';
 export {getOwnerDocument, getOwnerWindow, isShadowRoot} from './domHelpers';
 export {mergeProps} from './mergeProps';
 export {mergeRefs} from './mergeRefs';

package/src/isScrollable.ts

@@ -15,8 +15,14 @@ export function isScrollable(node: Element | null, checkForOverflow?: boolean):
     return false;
   }
   let style = window.getComputedStyle(node);
+  let root = document.scrollingElement || document.documentElement;
   let isScrollable = /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
 
+  // Root element has `visible` overflow by default, but is scrollable nonetheless.
+  if (node === root && style.overflow !== 'hidden') {
+    isScrollable = true;
+  }
+
   if (isScrollable && checkForOverflow) {
     isScrollable = node.scrollHeight !== node.clientHeight || node.scrollWidth !== node.clientWidth;
   }

package/src/runAfterTransition.ts

@@ -16,6 +16,7 @@
 // bugs, e.g. Chrome sometimes fires both transitionend and transitioncancel rather
 // than one or the other. So we need to track what's actually transitioning so that
 // we can ignore these duplicate events.
+import {getEventTarget} from './shadowdom/DOMFunctions';
 let transitionsByElement = new Map<EventTarget, Set<string>>();
 
 // A list of callbacks to call once there are no transitioning elements.
@@ -31,19 +32,20 @@ function setupGlobalEvents() {
   }
 
   let onTransitionStart = (e: Event) => {
-    if (!isTransitionEvent(e) || !e.target) {
+    let eventTarget = getEventTarget(e);
+    if (!isTransitionEvent(e) || !eventTarget) {
       return;
     }
     // Add the transitioning property to the list for this element.
-    let transitions = transitionsByElement.get(e.target);
+    let transitions = transitionsByElement.get(eventTarget);
     if (!transitions) {
       transitions = new Set();
-      transitionsByElement.set(e.target, transitions);
+      transitionsByElement.set(eventTarget, transitions);
 
       // The transitioncancel event must be registered on the element itself, rather than as a global
       // event. This enables us to handle when the node is deleted from the document while it is transitioning.
       // In that case, the cancel event would have nowhere to bubble to so we need to handle it directly.
-      e.target.addEventListener('transitioncancel', onTransitionEnd, {
+      eventTarget.addEventListener('transitioncancel', onTransitionEnd, {
         once: true
       });
     }
@@ -52,11 +54,12 @@ function setupGlobalEvents() {
   };
 
   let onTransitionEnd = (e: Event) => {
-    if (!isTransitionEvent(e) || !e.target) {
+    let eventTarget = getEventTarget(e);
+    if (!isTransitionEvent(e) || !eventTarget) {
       return;
     }
     // Remove property from list of transitioning properties.
-    let properties = transitionsByElement.get(e.target);
+    let properties = transitionsByElement.get(eventTarget);
     if (!properties) {
       return;
     }
@@ -65,8 +68,8 @@ function setupGlobalEvents() {
 
     // If empty, remove transitioncancel event, and remove the element from the list of transitioning elements.
     if (properties.size === 0) {
-      e.target.removeEventListener('transitioncancel', onTransitionEnd);
-      transitionsByElement.delete(e.target);
+      eventTarget.removeEventListener('transitioncancel', onTransitionEnd);
+      transitionsByElement.delete(eventTarget);
     }
 
     // If no transitioning elements, call all of the queued callbacks.

package/src/scrollIntoView.ts

@@ -11,7 +11,15 @@
  */
 
 import {getScrollParents} from './getScrollParents';
-import {nodeContains} from './shadowdom/DOMFunctions';
+import {isChrome, isIOS} from './platform';
+
+interface ScrollIntoViewOpts {
+  /** The position to align items along the block axis in. */
+  block?: ScrollLogicalPosition,
+  /** The position to align items along the inline axis in. */
+  inline?: ScrollLogicalPosition
+}
+
 
 interface ScrollIntoViewportOpts {
   /** The optional containing element of the target to be centered in the viewport. */
@@ -23,74 +31,96 @@ interface ScrollIntoViewportOpts {
  * Similar to `element.scrollIntoView({block: 'nearest'})` (not supported in Edge),
  * but doesn't affect parents above `scrollView`.
  */
-export function scrollIntoView(scrollView: HTMLElement, element: HTMLElement): void {
-  let offsetX = relativeOffset(scrollView, element, 'left');
-  let offsetY = relativeOffset(scrollView, element, 'top');
-  let width = element.offsetWidth;
-  let height = element.offsetHeight;
-  let x = scrollView.scrollLeft;
+export function scrollIntoView(scrollView: HTMLElement, element: HTMLElement, opts: ScrollIntoViewOpts = {}): void {
+  let {block = 'nearest', inline = 'nearest'} = opts;
+
+  if (scrollView === element) { return; }
+
   let y = scrollView.scrollTop;
+  let x = scrollView.scrollLeft;
+
+  let target = element.getBoundingClientRect();
+  let view = scrollView.getBoundingClientRect();
+  let itemStyle = window.getComputedStyle(element);
+  let viewStyle = window.getComputedStyle(scrollView);
+  let root = document.scrollingElement || document.documentElement;
+
+  let viewTop = scrollView === root ? 0 : view.top;
+  let viewBottom = scrollView === root ? scrollView.clientHeight : view.bottom;
+  let viewLeft = scrollView === root ? 0 : view.left;
+  let viewRight = scrollView === root ? scrollView.clientWidth : view.right;
+
+  let scrollMarginTop = parseInt(itemStyle.scrollMarginTop, 10) || 0;
+  let scrollMarginBottom = parseInt(itemStyle.scrollMarginBottom, 10) || 0;
+  let scrollMarginLeft = parseInt(itemStyle.scrollMarginLeft, 10) || 0;
+  let scrollMarginRight = parseInt(itemStyle.scrollMarginRight, 10) || 0;
+
+  let scrollPaddingTop = parseInt(viewStyle.scrollPaddingTop, 10) || 0;
+  let scrollPaddingBottom = parseInt(viewStyle.scrollPaddingBottom, 10) || 0;
+  let scrollPaddingLeft = parseInt(viewStyle.scrollPaddingLeft, 10) || 0;
+  let scrollPaddingRight = parseInt(viewStyle.scrollPaddingRight, 10) || 0;
+
+  let borderTopWidth = parseInt(viewStyle.borderTopWidth, 10) || 0;
+  let borderBottomWidth = parseInt(viewStyle.borderBottomWidth, 10) || 0;
+  let borderLeftWidth = parseInt(viewStyle.borderLeftWidth, 10) || 0;
+  let borderRightWidth = parseInt(viewStyle.borderRightWidth, 10) || 0;
+
+  let scrollAreaTop = target.top - scrollMarginTop;
+  let scrollAreaBottom = target.bottom + scrollMarginBottom;
+  let scrollAreaLeft = target.left - scrollMarginLeft;
+  let scrollAreaRight = target.right + scrollMarginRight;
+
+  let scrollBarOffsetX = scrollView === root ? 0 : borderLeftWidth + borderRightWidth;
+  let scrollBarOffsetY = scrollView === root ? 0 : borderTopWidth + borderBottomWidth;
+  let scrollBarWidth = scrollView.offsetWidth - scrollView.clientWidth - scrollBarOffsetX;
+  let scrollBarHeight = scrollView.offsetHeight - scrollView.clientHeight - scrollBarOffsetY;
+
+  let scrollPortTop = viewTop + borderTopWidth + scrollPaddingTop;
+  let scrollPortBottom = viewBottom - borderBottomWidth - scrollPaddingBottom - scrollBarHeight;
+  let scrollPortLeft = viewLeft + borderLeftWidth + scrollPaddingLeft;
+  let scrollPortRight = viewRight - borderRightWidth - scrollPaddingRight;
 
-  // Account for top/left border offsetting the scroll top/Left + scroll padding
-  let {
-    borderTopWidth,
-    borderLeftWidth,
-    scrollPaddingTop,
-    scrollPaddingRight,
-    scrollPaddingBottom,
-    scrollPaddingLeft
-  } = getComputedStyle(scrollView);
-
-  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 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;
-
-  if (offsetX <= x + scrollPaddingLeftNumber) {
-    x = offsetX - parseInt(borderLeftWidth, 10) - scrollPaddingLeftNumber;
-  } else if (offsetX + width > maxX - scrollPaddingRightNumber) {
-    x += offsetX + width - maxX + scrollPaddingRightNumber;
+  // IOS always positions the scrollbar on the right ¯\_(ツ)_/¯
+  if (viewStyle.direction === 'rtl' && !isIOS()) {
+    scrollPortLeft += scrollBarWidth;
+  } else {
+    scrollPortRight -= scrollBarWidth;
   }
-  if (offsetY <= borderAdjustedY + scrollPaddingTopNumber) {
-    y = offsetY - parseInt(borderTopWidth, 10) - scrollPaddingTopNumber;
-  } else if (offsetY + height > maxY - scrollPaddingBottomNumber) {
-    y += offsetY + height - maxY + scrollPaddingBottomNumber;
+
+  let shouldScrollBlock = scrollAreaTop < scrollPortTop || scrollAreaBottom > scrollPortBottom;
+  let shouldScrollInline = scrollAreaLeft < scrollPortLeft || scrollAreaRight > scrollPortRight;
+
+  if (shouldScrollBlock && block === 'start') {
+    y += scrollAreaTop - scrollPortTop;
+  } else if (shouldScrollBlock && block === 'center') {
+    y += (scrollAreaTop + scrollAreaBottom) / 2 - (scrollPortTop + scrollPortBottom) / 2;
+  } else if (shouldScrollBlock && block === 'end') {
+    y += scrollAreaBottom - scrollPortBottom;
+  } else if (shouldScrollBlock && block === 'nearest') {
+    let start = scrollAreaTop - scrollPortTop;
+    let end = scrollAreaBottom - scrollPortBottom;
+    y += Math.abs(start) <= Math.abs(end) ? start : end;
   }
 
-  scrollView.scrollLeft = x;
-  scrollView.scrollTop = y;
-}
+  if (shouldScrollInline && inline === 'start') {
+    x += scrollAreaLeft - scrollPortLeft;
+  } else if (shouldScrollInline && inline === 'center') {
+    x += (scrollAreaLeft + scrollAreaRight) / 2 - (scrollPortLeft + scrollPortRight) / 2;
+  } else if (shouldScrollInline && inline === 'end') {
+    x += scrollAreaRight - scrollPortRight;
+  } else if (shouldScrollInline && inline === 'nearest') {
+    let start = scrollAreaLeft - scrollPortLeft;
+    let end = scrollAreaRight - scrollPortRight;
+    x += Math.abs(start) <= Math.abs(end) ? start : end;
+  }
 
-/**
- * Computes the offset left or top from child to ancestor by accumulating
- * offsetLeft or offsetTop through intervening offsetParents.
- */
-function relativeOffset(ancestor: HTMLElement, child: HTMLElement, axis: 'left'|'top') {
-  const prop = axis === 'left' ? 'offsetLeft' : 'offsetTop';
-  let sum = 0;
-  while (child.offsetParent) {
-    sum += child[prop];
-    if (child.offsetParent === ancestor) {
-      // Stop once we have found the ancestor we are interested in.
-      break;
-    } 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.
-      sum -= ancestor[prop];
-      break;
-    }
-    child = child.offsetParent as HTMLElement;
+  if (process.env.NODE_ENV === 'test') {
+    scrollView.scrollLeft = x;
+    scrollView.scrollTop = y;
+    return;
   }
-  return sum;
+
+  scrollView.scrollTo({left: x, top: y});
 }
 
 /**
@@ -98,12 +128,14 @@ function relativeOffset(ancestor: HTMLElement, child: HTMLElement, axis: 'left'|
  * that will be centered in the viewport prior to scrolling the targetElement into view. If scrolling is prevented on
  * 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 && nodeContains(document, targetElement)) {
+export function scrollIntoViewport(targetElement: Element | null, opts: ScrollIntoViewportOpts = {}): void {
+  let {containingElement} = opts;
+  if (targetElement && targetElement.isConnected) {
     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
-    if (!isScrollPrevented) {
+    // 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()) {
       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()
@@ -112,18 +144,25 @@ export function scrollIntoViewport(targetElement: Element | null, opts?: ScrollI
       let {left: newLeft, top: newTop} = targetElement.getBoundingClientRect();
       // Account for sub pixel differences from rounding
       if ((Math.abs(originalLeft - newLeft) > 1) || (Math.abs(originalTop - newTop) > 1)) {
-        opts?.containingElement?.scrollIntoView?.({block: 'center', inline: 'center'});
+        containingElement?.scrollIntoView?.({block: 'center', inline: 'center'});
         targetElement.scrollIntoView?.({block: 'nearest'});
       }
     } else {
-      let scrollParents = getScrollParents(targetElement);
+      let {left: originalLeft, top: originalTop} = targetElement.getBoundingClientRect();
+
       // 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);
-      }
+      let scrollParents = getScrollParents(targetElement, true);
       for (let scrollParent of scrollParents) {
         scrollIntoView(scrollParent as HTMLElement, targetElement as HTMLElement);
       }
+      let {left: newLeft, top: newTop} = targetElement.getBoundingClientRect();
+      // Account for sub pixel differences from rounding
+      if ((Math.abs(originalLeft - newLeft) > 1) || (Math.abs(originalTop - newTop) > 1)) {
+        scrollParents = containingElement ? getScrollParents(containingElement, true) : [];
+        for (let scrollParent of scrollParents) {
+          scrollIntoView(scrollParent as HTMLElement, containingElement as HTMLElement, {block: 'center', inline: 'center'});
+        }
+      }
     }
   }
 }

package/src/shadowdom/DOMFunctions.ts

@@ -1,15 +1,16 @@
 // Source: https://github.com/microsoft/tabster/blob/a89fc5d7e332d48f68d03b1ca6e344489d1c3898/src/Shadowdomize/DOMFunctions.ts#L16
-/* eslint-disable rsp-rules/no-non-shadow-contains */
+/* eslint-disable rsp-rules/no-non-shadow-contains, rsp-rules/safe-event-target */
 
-import {isShadowRoot} from '../domHelpers';
+import {getOwnerWindow, isShadowRoot} from '../domHelpers';
 import {shadowDOM} from '@react-stately/flags';
+import type {SyntheticEvent} from 'react';
 
 /**
  * ShadowDOM safe version of Node.contains.
  */
 export function nodeContains(
-  node: Node | null | undefined,
-  otherNode: Node | null | undefined
+  node: Node | Element | null | undefined,
+  otherNode: Node | Element | null | undefined
 ): boolean {
   if (!shadowDOM()) {
     return otherNode && node ? node.contains(otherNode) : false;
@@ -58,14 +59,42 @@ export const getActiveElement = (doc: Document = document): Element | null => {
   return activeElement;
 };
 
+// Type helper to extract the target element type from an event
+type EventTargetType<T> = T extends SyntheticEvent<infer E, any> ? E : EventTarget;
+
+// Possibly we can improve the types for this using https://github.com/adobe/react-spectrum/pull/8991/changes#diff-2d491c0c91701d28d08e1cf9fcadbdb21a030b67ab681460c9934140f29127b8R68 but it was more changes than I
+// wanted to make to fix the function.
 /**
  * ShadowDOM safe version of event.target.
  */
-export function getEventTarget<T extends Event>(event: T): Element {
-  if (shadowDOM() && (event.target as HTMLElement).shadowRoot) {
-    if (event.composedPath) {
-      return event.composedPath()[0] as Element;
+export function getEventTarget<T extends Event | SyntheticEvent>(event: T): EventTargetType<T> {
+  if (shadowDOM() && (event.target instanceof Element) && event.target.shadowRoot) {
+    if ('composedPath' in event) {
+      return (event.composedPath()[0] ?? null) as EventTargetType<T>;
+    } else if ('composedPath' in event.nativeEvent) {
+      return (event.nativeEvent.composedPath()[0] ?? null) as EventTargetType<T>;
     }
   }
-  return event.target as Element;
+  return event.target as EventTargetType<T>;
+}
+
+/**
+ * ShadowDOM safe fast version of node.contains(document.activeElement).
+ * @param node
+ * @returns
+ */
+export function isFocusWithin(node: Element | null | undefined): boolean {
+  if (!node) {
+    return false;
+  }
+  // Get the active element within the node's parent shadow root (or the document). Can return null.
+  let root = node.getRootNode();
+  let ownerWindow = getOwnerWindow(node);
+  if (!(root instanceof ownerWindow.Document || root instanceof ownerWindow.ShadowRoot)) {
+    return false;
+  }
+  let activeElement = root.activeElement;
+
+  // Check if the active element is within this node. These nodes are within the same shadow root.
+  return activeElement != null && node.contains(activeElement);
 }

package/src/useDrag1D.ts

@@ -12,8 +12,8 @@
 
  /* eslint-disable rulesdir/pure-render */
 
+import {getEventTarget, nodeContains} from './shadowdom/DOMFunctions';
 import {getOffset} from './getOffset';
-import {nodeContains} from './shadowdom/DOMFunctions';
 import {Orientation} from '@react-types/shared';
 import React, {HTMLAttributes, MutableRefObject, useRef} from 'react';
 
@@ -81,7 +81,7 @@ export function useDrag1D(props: UseDrag1DProps): HTMLAttributes<HTMLElement> {
   };
 
   let onMouseUp = (e: MouseEvent) => {
-    const target = e.target as HTMLElement;
+    let target = getEventTarget(e) as HTMLElement;
     dragging.current = false;
     let nextOffset = getNextOffset(e);
     if (handlers.current.onDrag) {

package/src/useViewportSize.ts

@@ -10,6 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+import {getActiveElement, getEventTarget} from './shadowdom/DOMFunctions';
+import {isIOS} from './platform';
 import {useEffect, useState} from 'react';
 import {useIsSSR} from '@react-aria/ssr';
 import {willOpenKeyboard} from './keyboard';
@@ -53,10 +55,11 @@ export function useViewportSize(): ViewportSize {
         return;
       }
 
-      if (willOpenKeyboard(e.target as Element)) {
+      if (willOpenKeyboard(getEventTarget(e) as Element)) {
         // Wait one frame to see if a new element gets focused.
         frame = requestAnimationFrame(() => {
-          if (!document.activeElement || !willOpenKeyboard(document.activeElement)) {
+          let activeElement = getActiveElement();
+          if (!activeElement || !willOpenKeyboard(activeElement)) {
             updateSize({width: document.documentElement.clientWidth, height: document.documentElement.clientHeight});
           }
         });
@@ -65,7 +68,9 @@ export function useViewportSize(): ViewportSize {
 
     updateSize(getViewportSize());
 
-    window.addEventListener('blur', onBlur, true);
+    if (isIOS()) {
+      window.addEventListener('blur', onBlur, true);
+    }
 
     if (!visualViewport) {
       window.addEventListener('resize', onResize);
@@ -75,7 +80,9 @@ export function useViewportSize(): ViewportSize {
 
     return () => {
       cancelAnimationFrame(frame);
-      window.removeEventListener('blur', onBlur, true);
+      if (isIOS()) {
+        window.removeEventListener('blur', onBlur, true);
+      }
       if (!visualViewport) {
         window.removeEventListener('resize', onResize);
       } else {