@react-aria/utils 3.24.1 → 3.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/utils",
-  "version": "3.24.1",
+  "version": "3.25.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,17 +22,17 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/ssr": "^3.9.4",
-    "@react-stately/utils": "^3.10.1",
-    "@react-types/shared": "^3.23.1",
+    "@react-aria/ssr": "^3.9.5",
+    "@react-stately/utils": "^3.10.2",
+    "@react-types/shared": "^3.24.0",
     "@swc/helpers": "^0.5.0",
     "clsx": "^2.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b77d7d594dff4dcfb5359bffbcfd18142b146433"
+  "gitHead": "86d80e3216bc32e75108831cf3a5a720bc849206"
 }

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, useLinkProps} from './openLink';
+export {openLink, useSyntheticLinkProps, RouterProvider, shouldClientNavigate, useRouter, useLinkProps} from './openLink';
 export {runAfterTransition} from './runAfterTransition';
 export {useDrag1D} from './useDrag1D';
 export {useGlobalListeners} from './useGlobalListeners';
@@ -41,3 +41,4 @@ export {isVirtualClick, isVirtualPointerEvent} from './isVirtualEvent';
 export {useEffectEvent} from './useEffectEvent';
 export {useDeepMemo} from './useDeepMemo';
 export {useFormReset} from './useFormReset';
+export {useLoadMore} from './useLoadMore';

package/src/mergeRefs.ts

@@ -15,8 +15,8 @@ import {ForwardedRef, MutableRefObject} from 'react';
 /**
  * Merges multiple refs into one. Works with either callback or object refs.
  */
-export function mergeRefs<T>(...refs: Array<ForwardedRef<T> | MutableRefObject<T>>): ForwardedRef<T> {
-  if (refs.length === 1) {
+export function mergeRefs<T>(...refs: Array<ForwardedRef<T> | MutableRefObject<T> | null | undefined>): ForwardedRef<T> {
+  if (refs.length === 1 && refs[0]) {
     return refs[0];
   }
 

package/src/openLink.tsx

@@ -146,9 +146,10 @@ function openSyntheticLink(target: Element, modifiers: Modifiers) {
   getSyntheticLink(target, link => openLink(link, modifiers));
 }
 
-export function getSyntheticLinkProps(props: LinkDOMProps) {
+export function useSyntheticLinkProps(props: LinkDOMProps) {
+  let router = useRouter();
   return {
-    'data-href': props.href,
+    'data-href': props.href ? router.useHref(props.href) : undefined,
     'data-target': props.target,
     'data-rel': props.rel,
     'data-download': props.download,

package/src/platform.ts

@@ -26,40 +26,54 @@ function testPlatform(re: RegExp) {
     : false;
 }
 
-export function isMac() {
-  return testPlatform(/^Mac/i);
+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 function isIPhone() {
+export const isMac = cached(function () {
+  return testPlatform(/^Mac/i);
+});
+
+export const isIPhone = cached(function () {
   return testPlatform(/^iPhone/i);
-}
+});
 
-export function isIPad() {
+export const isIPad = 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 function isIOS() {
+export const isIOS = cached(function () {
   return isIPhone() || isIPad();
-}
+});
 
-export function isAppleDevice() {
+export const isAppleDevice = cached(function () {
   return isMac() || isIOS();
-}
+});
 
-export function isWebKit() {
+export const isWebKit = cached(function () {
   return testUserAgent(/AppleWebKit/i) && !isChrome();
-}
+});
 
-export function isChrome() {
+export const isChrome = cached(function () {
   return testUserAgent(/Chrome/i);
-}
+});
 
-export function isAndroid() {
+export const isAndroid = cached(function () {
   return testUserAgent(/Android/i);
-}
+});
 
-export function isFirefox() {
+export const isFirefox = cached(function () {
   return testUserAgent(/Firefox/i);
-}
+});

package/src/useEvent.ts

@@ -10,12 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {RefObject, useEffect} from 'react';
+import {RefObject} from '@react-types/shared';
+import {useEffect} from 'react';
 import {useEffectEvent} from './useEffectEvent';
 
 export function useEvent<K extends keyof GlobalEventHandlersEventMap>(
-  ref: RefObject<EventTarget>,
-  event: K,
+  ref: RefObject<EventTarget | null>,
+  event: K | (string & {}),
   handler?: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,
   options?: boolean | AddEventListenerOptions
 ) {

package/src/useFormReset.ts

@@ -9,11 +9,13 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {RefObject, useEffect, useRef} from 'react';
+
+import {RefObject} from '@react-types/shared';
+import {useEffect, useRef} from 'react';
 import {useEffectEvent} from './useEffectEvent';
 
 export function useFormReset<T>(
-  ref: RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
+  ref: RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null>,
   initialValue: T,
   onReset: (value: T) => void
 ) {

package/src/useLoadMore.ts

@@ -0,0 +1,82 @@
+/*
+ * 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 {RefObject, useCallback, useRef} from 'react';
+import {useEvent} from './useEvent';
+// eslint-disable-next-line rulesdir/useLayoutEffectRule
+import {useLayoutEffect} from './useLayoutEffect';
+
+export interface LoadMoreProps {
+  /** Whether data is currently being loaded. */
+  isLoading?: boolean,
+  /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.  */
+  onLoadMore?: () => void,
+  /**
+   * The amount of offset from the bottom of your scrollable region that should trigger load more.
+   * Uses a percentage value relative to the scroll body's client height. Load more is then triggered
+   * when your current scroll position's distance from the bottom of the currently loaded list of items is less than
+   * or equal to the provided value. (e.g. 1 = 100% of the scroll region's height).
+   * @default 1
+   */
+  scrollOffset?: number,
+  /** The data currently loaded. */
+  items?: any[]
+}
+
+export function useLoadMore(props: LoadMoreProps, ref: RefObject<HTMLElement | null>) {
+  let {isLoading, onLoadMore, scrollOffset = 1, items} = props;
+
+  // Handle scrolling, and call onLoadMore when nearing the bottom.
+  let isLoadingRef = useRef(isLoading);
+  let prevProps = useRef(props);
+  let onScroll = useCallback(() => {
+    if (ref.current && !isLoadingRef.current && onLoadMore) {
+      let shouldLoadMore = ref.current.scrollHeight - ref.current.scrollTop - ref.current.clientHeight < ref.current.clientHeight * scrollOffset;
+
+      if (shouldLoadMore) {
+        isLoadingRef.current = true;
+        onLoadMore();
+      }
+    }
+  }, [onLoadMore, ref, scrollOffset]);
+
+  let lastItems = useRef(items);
+  useLayoutEffect(() => {
+    // Only update isLoadingRef if props object actually changed,
+    // not if a local state change occurred.
+    if (props !== prevProps.current) {
+      isLoadingRef.current = isLoading;
+      prevProps.current = props;
+    }
+
+    // TODO: Eventually this hook will move back into RAC during which we will accept the collection as a option to this hook.
+    // We will only load more if the collection has changed after the last load to prevent multiple onLoadMore from being called
+    // while the data from the last onLoadMore is being processed by RAC collection.
+    let shouldLoadMore = ref?.current
+      && !isLoadingRef.current
+      && onLoadMore
+      && (!items || items !== lastItems.current)
+      && ref.current.clientHeight === ref.current.scrollHeight;
+
+    if (shouldLoadMore) {
+      isLoadingRef.current = true;
+      onLoadMore?.();
+    }
+
+    lastItems.current = items;
+  }, [isLoading, onLoadMore, props, ref]);
+
+  // TODO: maybe this should still just return scroll props?
+  // Test against case where the ref isn't defined when this is called
+  // Think this was a problem when trying to attach to the scrollable body of the table in OnLoadMoreTableBodyScroll
+  useEvent(ref, 'scroll', onScroll);
+}

package/src/useResizeObserver.ts

@@ -1,16 +1,19 @@
-import {RefObject, useEffect} from 'react';
+
+import {RefObject} from '@react-types/shared';
+import {useEffect} from 'react';
 
 function hasResizeObserver() {
   return typeof window.ResizeObserver !== 'undefined';
 }
 
 type useResizeObserverOptionsType<T> = {
-  ref: RefObject<T | undefined> | undefined,
+  ref: RefObject<T | undefined | null> | undefined,
+  box?: ResizeObserverBoxOptions,
   onResize: () => void
 }
 
 export function useResizeObserver<T extends Element>(options: useResizeObserverOptionsType<T>) {
-  const {ref, onResize} = options;
+  const {ref, box, onResize} = options;
 
   useEffect(() => {
     let element = ref?.current;
@@ -32,7 +35,7 @@ export function useResizeObserver<T extends Element>(options: useResizeObserverO
 
         onResize();
       });
-      resizeObserverInstance.observe(element);
+      resizeObserverInstance.observe(element, {box});
 
       return () => {
         if (element) {
@@ -41,5 +44,5 @@ export function useResizeObserver<T extends Element>(options: useResizeObserverO
       };
     }
 
-  }, [onResize, ref]);
+  }, [onResize, ref, box]);
 }

package/src/useSyncRef.ts

@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {MutableRefObject, RefObject} from 'react';
+import {MutableRefObject} from 'react';
+import {RefObject} from '@react-types/shared';
 import {useLayoutEffect} from './';
 
 interface ContextValue<T> {
@@ -18,7 +19,7 @@ interface ContextValue<T> {
 }
 
 // Syncs ref from context with ref passed to hook
-export function useSyncRef<T>(context?: ContextValue<T> | null, ref?: RefObject<T>) {
+export function useSyncRef<T>(context?: ContextValue<T> | null, ref?: RefObject<T | null>) {
   useLayoutEffect(() => {
     if (context && context.ref && ref) {
       context.ref.current = ref.current;