@react-aria/utils 3.33.1 → 3.34.0

package/src/mergeRefs.ts

@@ -1,52 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {MutableRefObject, Ref} from 'react';
-
-/**
- * Merges multiple refs into one. Works with either callback or object refs.
- */
-export function mergeRefs<T>(...refs: Array<Ref<T> | MutableRefObject<T> | null | undefined>): Ref<T> {
-  if (refs.length === 1 && refs[0]) {
-    return refs[0];
-  }
-
-  return (value: T | null) => {
-    let hasCleanup = false;
-
-    const cleanups = refs.map(ref => {
-      const cleanup = setRef(ref, value);
-      hasCleanup ||= typeof cleanup == 'function';
-      return cleanup;
-    });
-
-    if (hasCleanup) {
-      return () => {
-        cleanups.forEach((cleanup, i) => {
-          if (typeof cleanup === 'function') {
-            cleanup();
-          } else {
-            setRef(refs[i], null);
-          }
-        });
-      };
-    }
-  };
-}
-
-function setRef<T>(ref: Ref<T> | MutableRefObject<T> | null | undefined, value: T) {
-  if (typeof ref === 'function') {
-    return ref(value);
-  } else if (ref != null) {
-    ref.current = value;
-  }
-}

package/src/openLink.tsx

@@ -1,201 +0,0 @@
-/*
- * Copyright 2023 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {focusWithoutScrolling, isMac, isWebKit} from './index';
-import {Href, LinkDOMProps, RouterOptions} from '@react-types/shared';
-import {isFirefox, isIPad} from './platform';
-import React, {createContext, DOMAttributes, JSX, MouseEvent as ReactMouseEvent, ReactNode, useContext, useMemo} from 'react';
-
-interface Router {
-  isNative: boolean,
-  open: (target: Element, modifiers: Modifiers, href: Href, routerOptions: RouterOptions | undefined) => void,
-  useHref: (href: Href) => string
-}
-
-const RouterContext = createContext<Router>({
-  isNative: true,
-  open: openSyntheticLink,
-  useHref: (href) => href
-});
-
-interface RouterProviderProps {
-  navigate: (path: Href, routerOptions: RouterOptions | undefined) => void,
-  useHref?: (href: Href) => string,
-  children: ReactNode
-}
-
-/**
- * A RouterProvider accepts a `navigate` function from a framework or client side router,
- * and provides it to all nested React Aria links to enable client side navigation.
- */
-export function RouterProvider(props: RouterProviderProps): JSX.Element {
-  let {children, navigate, useHref} = props;
-
-  let ctx = useMemo(() => ({
-    isNative: false,
-    open: (target: Element, modifiers: Modifiers, href: Href, routerOptions: RouterOptions | undefined) => {
-      getSyntheticLink(target, link => {
-        if (shouldClientNavigate(link, modifiers)) {
-          navigate(href, routerOptions);
-        } else {
-          openLink(link, modifiers);
-        }
-      });
-    },
-    useHref: useHref || ((href) => href)
-  }), [navigate, useHref]);
-
-  return (
-    <RouterContext.Provider value={ctx}>
-      {children}
-    </RouterContext.Provider>
-  );
-}
-
-export function useRouter(): Router {
-  return useContext(RouterContext);
-}
-
-interface Modifiers {
-  metaKey?: boolean,
-  ctrlKey?: boolean,
-  altKey?: boolean,
-  shiftKey?: boolean
-}
-
-export function shouldClientNavigate(link: HTMLAnchorElement, modifiers: Modifiers): boolean {
-  // Use getAttribute here instead of link.target. Firefox will default link.target to "_parent" when inside an iframe.
-  let target = link.getAttribute('target');
-  return (
-    (!target || target === '_self') &&
-    link.origin === location.origin &&
-    !link.hasAttribute('download') &&
-    !modifiers.metaKey && // open in new tab (mac)
-    !modifiers.ctrlKey && // open in new tab (windows)
-    !modifiers.altKey && // download
-    !modifiers.shiftKey
-  );
-}
-
-export function openLink(target: HTMLAnchorElement, modifiers: Modifiers, setOpening = true): void {
-  let {metaKey, ctrlKey, altKey, shiftKey} = modifiers;
-
-  // Firefox does not recognize keyboard events as a user action by default, and the popup blocker
-  // will prevent links with target="_blank" from opening. However, it does allow the event if the
-  // Command/Control key is held, which opens the link in a background tab. This seems like the best we can do.
-  // See https://bugzilla.mozilla.org/show_bug.cgi?id=257870 and https://bugzilla.mozilla.org/show_bug.cgi?id=746640.
-  if (isFirefox() && window.event?.type?.startsWith('key') && target.target === '_blank') {
-    if (isMac()) {
-      metaKey = true;
-    } else {
-      ctrlKey = true;
-    }
-  }
-
-  // WebKit does not support firing click events with modifier keys, but does support keyboard events.
-  // https://github.com/WebKit/WebKit/blob/c03d0ac6e6db178f90923a0a63080b5ca210d25f/Source/WebCore/html/HTMLAnchorElement.cpp#L184
-  let event = isWebKit() && isMac() && !isIPad() && process.env.NODE_ENV !== 'test'
-    // @ts-ignore - keyIdentifier is a non-standard property, but it's what webkit expects
-    ? new KeyboardEvent('keydown', {keyIdentifier: 'Enter', metaKey, ctrlKey, altKey, shiftKey})
-    : new MouseEvent('click', {metaKey, ctrlKey, altKey, shiftKey, detail: 1, bubbles: true, cancelable: true});
-  (openLink as any).isOpening = setOpening;
-  focusWithoutScrolling(target);
-  target.dispatchEvent(event);
-  (openLink as any).isOpening = false;
-}
-// https://github.com/parcel-bundler/parcel/issues/8724
-(openLink as any).isOpening = false;
-
-function getSyntheticLink(target: Element, open: (link: HTMLAnchorElement) => void) {
-  if (target instanceof HTMLAnchorElement) {
-    open(target);
-  } else if (target.hasAttribute('data-href')) {
-    let link = document.createElement('a');
-    link.href = target.getAttribute('data-href')!;
-    if (target.hasAttribute('data-target')) {
-      link.target = target.getAttribute('data-target')!;
-    }
-    if (target.hasAttribute('data-rel')) {
-      link.rel = target.getAttribute('data-rel')!;
-    }
-    if (target.hasAttribute('data-download')) {
-      link.download = target.getAttribute('data-download')!;
-    }
-    if (target.hasAttribute('data-ping')) {
-      link.ping = target.getAttribute('data-ping')!;
-    }
-    if (target.hasAttribute('data-referrer-policy')) {
-      link.referrerPolicy = target.getAttribute('data-referrer-policy')!;
-    }
-    target.appendChild(link);
-    open(link);
-    target.removeChild(link);
-  }
-}
-
-function openSyntheticLink(target: Element, modifiers: Modifiers) {
-  getSyntheticLink(target, link => openLink(link, modifiers));
-}
-
-export function useSyntheticLinkProps(props: LinkDOMProps): DOMAttributes<HTMLElement> {
-  let router = useRouter();
-  const href = router.useHref(props.href ?? '');
-  return {
-    'data-href': props.href ? href : undefined,
-    'data-target': props.target,
-    'data-rel': props.rel,
-    'data-download': props.download,
-    'data-ping': props.ping,
-    'data-referrer-policy': props.referrerPolicy
-  } as DOMAttributes<HTMLElement>;
-}
-
-/** @deprecated - For backward compatibility. */
-export function getSyntheticLinkProps(props: LinkDOMProps): DOMAttributes<HTMLElement> {
-  return {
-    'data-href': props.href,
-    'data-target': props.target,
-    'data-rel': props.rel,
-    'data-download': props.download,
-    'data-ping': props.ping,
-    'data-referrer-policy': props.referrerPolicy
-  } as DOMAttributes<HTMLElement>;
-}
-
-export function useLinkProps(props?: LinkDOMProps): LinkDOMProps {
-  let router = useRouter();
-  const href = router.useHref(props?.href ?? '');
-  return {
-    href: props?.href ? href : undefined,
-    target: props?.target,
-    rel: props?.rel,
-    download: props?.download,
-    ping: props?.ping,
-    referrerPolicy: props?.referrerPolicy
-  };
-}
-
-export function handleLinkClick(e: ReactMouseEvent, router: Router, href: Href | undefined, routerOptions: RouterOptions | undefined): void {
-  // If a custom router is provided, prevent default and forward if this link should client navigate.
-  if (
-    !router.isNative &&
-    e.currentTarget instanceof HTMLAnchorElement &&
-    e.currentTarget.href &&
-    // If props are applied to a router Link component, it may have already prevented default.
-    !e.isDefaultPrevented() &&
-    shouldClientNavigate(e.currentTarget, e) &&
-    href
-  ) {
-    e.preventDefault();
-    router.open(e.currentTarget, e, href, routerOptions);
-  }
-}

package/src/platform.ts

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

package/src/runAfterTransition.ts

@@ -1,124 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-// We store a global list of elements that are currently transitioning,
-// mapped to a set of CSS properties that are transitioning for that element.
-// This is necessary rather than a simple count of transitions because of browser
-// 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.
-let transitionCallbacks = new Set<() => void>();
-
-function setupGlobalEvents() {
-  if (typeof window === 'undefined') {
-    return;
-  }
-
-  function isTransitionEvent(event: Event): event is TransitionEvent {
-    return 'propertyName' in event;
-  }
-
-  let onTransitionStart = (e: Event) => {
-    let eventTarget = getEventTarget(e);
-    if (!isTransitionEvent(e) || !eventTarget) {
-      return;
-    }
-    // Add the transitioning property to the list for this element.
-    let transitions = transitionsByElement.get(eventTarget);
-    if (!transitions) {
-      transitions = new Set();
-      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.
-      eventTarget.addEventListener('transitioncancel', onTransitionEnd, {
-        once: true
-      });
-    }
-
-    transitions.add(e.propertyName);
-  };
-
-  let onTransitionEnd = (e: Event) => {
-    let eventTarget = getEventTarget(e);
-    if (!isTransitionEvent(e) || !eventTarget) {
-      return;
-    }
-    // Remove property from list of transitioning properties.
-    let properties = transitionsByElement.get(eventTarget);
-    if (!properties) {
-      return;
-    }
-
-    properties.delete(e.propertyName);
-
-    // If empty, remove transitioncancel event, and remove the element from the list of transitioning elements.
-    if (properties.size === 0) {
-      eventTarget.removeEventListener('transitioncancel', onTransitionEnd);
-      transitionsByElement.delete(eventTarget);
-    }
-
-    // If no transitioning elements, call all of the queued callbacks.
-    if (transitionsByElement.size === 0) {
-      for (let cb of transitionCallbacks) {
-        cb();
-      }
-
-      transitionCallbacks.clear();
-    }
-  };
-
-  document.body.addEventListener('transitionrun', onTransitionStart);
-  document.body.addEventListener('transitionend', onTransitionEnd);
-}
-
-if (typeof document !== 'undefined') {
-  if (document.readyState !== 'loading') {
-    setupGlobalEvents();
-  } else {
-    document.addEventListener('DOMContentLoaded', setupGlobalEvents);
-  }
-}
-
-/**
- * Cleans up any elements that are no longer in the document.
- * This is necessary because we can't rely on transitionend events to fire
- * for elements that are removed from the document while transitioning.
- */
-function cleanupDetachedElements() {
-  for (const [eventTarget] of transitionsByElement) {
-    // Similar to `eventTarget instanceof Element && !eventTarget.isConnected`, but avoids
-    // the explicit instanceof check, since it may be different in different contexts.
-    if ('isConnected' in eventTarget && !eventTarget.isConnected) {
-      transitionsByElement.delete(eventTarget);
-    }
-  }
-}
-
-export function runAfterTransition(fn: () => void): void {
-  // Wait one frame to see if an animation starts, e.g. a transition on mount.
-  requestAnimationFrame(() => {
-    cleanupDetachedElements();
-    // If no transitions are running, call the function immediately.
-    // Otherwise, add it to a list of callbacks to run at the end of the animation.
-    if (transitionsByElement.size === 0) {
-      fn();
-    } else {
-      transitionCallbacks.add(fn);
-    }
-  });
-}

package/src/scrollIntoView.ts

@@ -1,168 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {getScrollParents} from './getScrollParents';
-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. */
-  containingElement?: Element | null
-}
-
-/**
- * Scrolls `scrollView` so that `element` is visible.
- * Similar to `element.scrollIntoView({block: 'nearest'})` (not supported in Edge),
- * but doesn't affect parents above `scrollView`.
- */
-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;
-
-  // IOS always positions the scrollbar on the right ¯\_(ツ)_/¯
-  if (viewStyle.direction === 'rtl' && !isIOS()) {
-    scrollPortLeft += scrollBarWidth;
-  } else {
-    scrollPortRight -= scrollBarWidth;
-  }
-
-  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;
-  }
-
-  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;
-  }
-
-  if (process.env.NODE_ENV === 'test') {
-    scrollView.scrollLeft = x;
-    scrollView.scrollTop = y;
-    return;
-  }
-
-  scrollView.scrollTo({left: x, top: y});
-}
-
-/**
- * Scrolls the `targetElement` so it is visible in the viewport. Accepts an optional `opts.containingElement`
- * 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 {
-  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
-    // 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()
-      // won't cause a scroll if the element is already focused and doesn't behave consistently when an element is partially out of view horizontally vs vertically
-      targetElement?.scrollIntoView?.({block: 'nearest'});
-      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)) {
-        containingElement?.scrollIntoView?.({block: 'center', inline: 'center'});
-        targetElement.scrollIntoView?.({block: 'nearest'});
-      }
-    } else {
-      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.
-      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'});
-        }
-      }
-    }
-  }
-}