@react-aria/utils 3.28.1 → 3.29.0

package/src/useObjectRef.ts

@@ -10,30 +10,60 @@
  * governing permissions and limitations under the License.
  */
 
-import {MutableRefObject, useMemo, useRef} from 'react';
+import {MutableRefObject, useCallback, useMemo, useRef} from 'react';
 
 /**
  * Offers an object ref for a given callback ref or an object ref. Especially
  * helfpul when passing forwarded refs (created using `React.forwardRef`) to
  * React Aria hooks.
  *
- * @param forwardedRef The original ref intended to be used.
+ * @param ref The original ref intended to be used.
  * @returns An object ref that updates the given ref.
- * @see https://reactjs.org/docs/forwarding-refs.html
+ * @see https://react.dev/reference/react/forwardRef
  */
-export function useObjectRef<T>(forwardedRef?: ((instance: T | null) => void) | MutableRefObject<T | null> | null): MutableRefObject<T | null> {
+export function useObjectRef<T>(ref?: ((instance: T | null) => (() => void) | void) | MutableRefObject<T | null> | null): MutableRefObject<T | null> {
   const objRef: MutableRefObject<T | null> = useRef<T>(null);
-  return useMemo(() => ({
-    get current() {
-      return objRef.current;
+  const cleanupRef: MutableRefObject<(() => void) | void> = useRef(undefined);
+
+  const refEffect = useCallback(
+    (instance: T | null) => {
+      if (typeof ref === 'function') {
+        const refCallback = ref;
+        const refCleanup = refCallback(instance);
+        return () => {
+          if (typeof refCleanup === 'function') {
+            refCleanup();
+          } else {
+            refCallback(null);
+          }
+        };
+      } else if (ref) {
+        ref.current = instance;
+        return () => {
+          ref.current = null;
+        };
+      }
     },
-    set current(value) {
-      objRef.current = value;
-      if (typeof forwardedRef === 'function') {
-        forwardedRef(value);
-      } else if (forwardedRef) {
-        forwardedRef.current = value;
+    [ref]
+  );
+
+  return useMemo(
+    () => ({
+      get current() {
+        return objRef.current;
+      },
+      set current(value) {
+        objRef.current = value;
+        if (cleanupRef.current) {
+          cleanupRef.current();
+          cleanupRef.current = undefined;
+        }
+
+        if (value != null) {
+          cleanupRef.current = refEffect(value);
+        }
       }
-    }
-  }), [forwardedRef]);
+    }),
+    [refEffect]
+  );
 }

package/src/useResizeObserver.ts

@@ -12,7 +12,7 @@ type useResizeObserverOptionsType<T> = {
   onResize: () => void
 }
 
-export function useResizeObserver<T extends Element>(options: useResizeObserverOptionsType<T>) {
+export function useResizeObserver<T extends Element>(options: useResizeObserverOptionsType<T>): void {
   const {ref, box, onResize} = options;
 
   useEffect(() => {

package/src/useSyncRef.ts

@@ -19,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 | null>) {
+export function useSyncRef<T>(context?: ContextValue<T> | null, ref?: RefObject<T | null>): void {
   useLayoutEffect(() => {
     if (context && context.ref && ref) {
       context.ref.current = ref.current;

package/src/useUpdateLayoutEffect.ts

@@ -14,7 +14,7 @@ import {EffectCallback, useRef} from 'react';
 import {useLayoutEffect} from './useLayoutEffect';
 
 // Like useLayoutEffect, but only called for updates after the initial render.
-export function useUpdateLayoutEffect(effect: EffectCallback, dependencies: any[]) {
+export function useUpdateLayoutEffect(effect: EffectCallback, dependencies: any[]): void {
   const isInitialMount = useRef(true);
   const lastDeps = useRef<any[] | null>(null);