@react-aria/utils 3.23.1 → 3.24.0

package/src/getScrollParent.ts

@@ -10,6 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+import {isScrollable} from './isScrollable';
+
 export function getScrollParent(node: Element, checkForOverflow?: boolean): Element {
   let scrollableNode: Element | null = node;
   if (isScrollable(scrollableNode, checkForOverflow)) {
@@ -23,13 +25,3 @@ export function getScrollParent(node: Element, checkForOverflow?: boolean): Elem
   return scrollableNode || document.scrollingElement || document.documentElement;
 }
 
-export function isScrollable(node: Element, checkForOverflow?: boolean): boolean {
-  let style = window.getComputedStyle(node);
-  let isScrollable = /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
-
-  if (isScrollable && checkForOverflow) {
-    isScrollable = node.scrollHeight !== node.clientHeight || node.scrollWidth !== node.clientWidth;
-  }
-
-  return isScrollable;
-}

package/src/getScrollParents.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2024 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 {isScrollable} from './isScrollable';
+
+export function getScrollParents(node: Element, checkForOverflow?: boolean): Element[] {
+  const scrollParents: Element[] = [];
+
+  while (node && node !== document.documentElement) {
+    if (isScrollable(node, checkForOverflow)) {
+      scrollParents.push(node);
+    }
+    node = node.parentElement as Element;
+  }
+
+  return scrollParents;
+}

package/src/index.ts

@@ -17,7 +17,7 @@ export {mergeRefs} from './mergeRefs';
 export {filterDOMProps} from './filterDOMProps';
 export {focusWithoutScrolling} from './focusWithoutScrolling';
 export {getOffset} from './getOffset';
-export {openLink, getSyntheticLinkProps, RouterProvider, shouldClientNavigate, useRouter} from './openLink';
+export {openLink, getSyntheticLinkProps, RouterProvider, shouldClientNavigate, useRouter, useLinkProps} from './openLink';
 export {runAfterTransition} from './runAfterTransition';
 export {useDrag1D} from './useDrag1D';
 export {useGlobalListeners} from './useGlobalListeners';
@@ -27,7 +27,9 @@ export {useUpdateEffect} from './useUpdateEffect';
 export {useLayoutEffect} from './useLayoutEffect';
 export {useResizeObserver} from './useResizeObserver';
 export {useSyncRef} from './useSyncRef';
-export {getScrollParent, isScrollable} from './getScrollParent';
+export {getScrollParent} from './getScrollParent';
+export {getScrollParents} from './getScrollParents';
+export {isScrollable} from './isScrollable';
 export {useViewportSize} from './useViewportSize';
 export {useDescription} from './useDescription';
 export {isMac, isIPhone, isIPad, isIOS, isAppleDevice, isWebKit, isChrome, isAndroid, isFirefox} from './platform';

package/src/isScrollable.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2024 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.
+ */
+
+export function isScrollable(node: Element, checkForOverflow?: boolean): boolean {
+  let style = window.getComputedStyle(node);
+  let isScrollable = /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
+
+  if (isScrollable && checkForOverflow) {
+    isScrollable = node.scrollHeight !== node.clientHeight || node.scrollWidth !== node.clientWidth;
+  }
+
+  return isScrollable;
+}

package/src/mergeRefs.ts

@@ -10,12 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {ForwardedRef} from 'react';
+import {ForwardedRef, MutableRefObject} from 'react';
 
 /**
  * Merges multiple refs into one. Works with either callback or object refs.
  */
-export function mergeRefs<T>(...refs: ForwardedRef<T>[]): ForwardedRef<T> {
+export function mergeRefs<T>(...refs: Array<ForwardedRef<T> | MutableRefObject<T>>): ForwardedRef<T> {
   if (refs.length === 1) {
     return refs[0];
   }

package/src/openLink.tsx

@@ -11,22 +11,25 @@
  */
 
 import {focusWithoutScrolling, isMac, isWebKit} from './index';
+import {Href, LinkDOMProps, RouterOptions} from '@react-types/shared';
 import {isFirefox, isIPad} from './platform';
-import {LinkDOMProps} from '@react-types/shared';
 import React, {createContext, ReactNode, useContext, useMemo} from 'react';
 
 interface Router {
   isNative: boolean,
-  open: (target: Element, modifiers: Modifiers) => void
+  open: (target: Element, modifiers: Modifiers, href: Href, routerOptions: RouterOptions | undefined) => void,
+  useHref: (href: Href) => string
 }
 
 const RouterContext = createContext<Router>({
   isNative: true,
-  open: openSyntheticLink
+  open: openSyntheticLink,
+  useHref: (href) => href
 });
 
 interface RouterProviderProps {
-  navigate: (path: string) => void,
+  navigate: (path: Href, routerOptions: RouterOptions | undefined) => void,
+  useHref?: (href: Href) => string,
   children: ReactNode
 }
 
@@ -35,20 +38,21 @@ interface RouterProviderProps {
  * and provides it to all nested React Aria links to enable client side navigation.
  */
 export function RouterProvider(props: RouterProviderProps) {
-  let {children, navigate} = props;
+  let {children, navigate, useHref} = props;
 
   let ctx = useMemo(() => ({
     isNative: false,
-    open: (target: Element, modifiers: Modifiers) => {
+    open: (target: Element, modifiers: Modifiers, href: Href, routerOptions: RouterOptions | undefined) => {
       getSyntheticLink(target, link => {
         if (shouldClientNavigate(link, modifiers)) {
-          navigate(link.pathname + link.search + link.hash);
+          navigate(href, routerOptions);
         } else {
           openLink(link, modifiers);
         }
       });
-    }
-  }), [navigate]);
+    },
+    useHref: useHref || ((href) => href)
+  }), [navigate, useHref]);
 
   return (
     <RouterContext.Provider value={ctx}>
@@ -152,3 +156,15 @@ export function getSyntheticLinkProps(props: LinkDOMProps) {
     'data-referrer-policy': props.referrerPolicy
   };
 }
+
+export function useLinkProps(props: LinkDOMProps) {
+  let router = useRouter();
+  return {
+    href: props?.href ? router.useHref(props?.href) : undefined,
+    target: props?.target,
+    rel: props?.rel,
+    download: props?.download,
+    ping: props?.ping,
+    referrerPolicy: props?.referrerPolicy
+  };
+}

package/src/scrollIntoView.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {getScrollParent} from './';
+import {getScrollParents} from './getScrollParents';
 
 interface ScrollIntoViewportOpts {
   /** The optional containing element of the target to be centered in the viewport. */
@@ -99,12 +99,10 @@ export function scrollIntoViewport(targetElement: Element, opts?: ScrollIntoView
         targetElement.scrollIntoView?.({block: 'nearest'});
       }
     } else {
-      let scrollParent = getScrollParent(targetElement);
+      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.
-      while (targetElement && scrollParent && targetElement !== root && scrollParent !== root) {
+      for (let scrollParent of scrollParents) {
         scrollIntoView(scrollParent as HTMLElement, targetElement as HTMLElement);
-        targetElement = scrollParent;
-        scrollParent = getScrollParent(targetElement);
       }
     }
   }