@react-aria/utils 3.33.0 → 3.34.0

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,121 +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.
-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) => {
-    if (!isTransitionEvent(e) || !e.target) {
-      return;
-    }
-    // Add the transitioning property to the list for this element.
-    let transitions = transitionsByElement.get(e.target);
-    if (!transitions) {
-      transitions = new Set();
-      transitionsByElement.set(e.target, 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, {
-        once: true
-      });
-    }
-
-    transitions.add(e.propertyName);
-  };
-
-  let onTransitionEnd = (e: Event) => {
-    if (!isTransitionEvent(e) || !e.target) {
-      return;
-    }
-    // Remove property from list of transitioning properties.
-    let properties = transitionsByElement.get(e.target);
-    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) {
-      e.target.removeEventListener('transitioncancel', onTransitionEnd);
-      transitionsByElement.delete(e.target);
-    }
-
-    // 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,129 +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 {nodeContains} from './shadowdom/DOMFunctions';
-
-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): 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;
-  let y = scrollView.scrollTop;
-
-  // 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;
-  }
-  if (offsetY <= borderAdjustedY + scrollPaddingTopNumber) {
-    y = offsetY - parseInt(borderTopWidth, 10) - scrollPaddingTopNumber;
-  } else if (offsetY + height > maxY - scrollPaddingBottomNumber) {
-    y += offsetY + height - maxY + scrollPaddingBottomNumber;
-  }
-
-  scrollView.scrollLeft = x;
-  scrollView.scrollTop = y;
-}
-
-/**
- * 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;
-  }
-  return sum;
-}
-
-/**
- * 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 {
-  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
-    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()
-      // 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)) {
-        opts?.containingElement?.scrollIntoView?.({block: 'center', inline: 'center'});
-        targetElement.scrollIntoView?.({block: 'nearest'});
-      }
-    } 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,71 +0,0 @@
-// 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';
-
-/**
- * ShadowDOM safe version of Node.contains.
- */
-export function nodeContains(
-  node: Node | null | undefined,
-  otherNode: Node | null | undefined
-): boolean {
-  if (!shadowDOM()) {
-    return otherNode && node ? node.contains(otherNode) : false;
-  }
-
-  if (!node || !otherNode) {
-    return false;
-  }
-
-  let currentNode: HTMLElement | Node | null | undefined = otherNode;
-
-  while (currentNode !== null) {
-    if (currentNode === node) {
-      return true;
-    }
-
-    if ((currentNode as HTMLSlotElement).tagName === 'SLOT' &&
-      (currentNode as HTMLSlotElement).assignedSlot) {
-      // Element is slotted
-      currentNode = (currentNode as HTMLSlotElement).assignedSlot!.parentNode;
-    } else if (isShadowRoot(currentNode)) {
-      // Element is in shadow root
-      currentNode = currentNode.host;
-    } else {
-      currentNode = currentNode.parentNode;
-    }
-  }
-
-  return false;
-}
-
-/**
- * ShadowDOM safe version of document.activeElement.
- */
-export const getActiveElement = (doc: Document = document): Element | null => {
-  if (!shadowDOM()) {
-    return doc.activeElement;
-  }
-  let activeElement: Element | null = doc.activeElement;
-
-  while (activeElement && 'shadowRoot' in activeElement &&
-  activeElement.shadowRoot?.activeElement) {
-    activeElement = activeElement.shadowRoot.activeElement;
-  }
-
-  return activeElement;
-};
-
-/**
- * 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;
-    }
-  }
-  return event.target as Element;
-}