@react-aria/utils 3.17.0 → 3.19.0

package/src/useLabels.ts

@@ -29,7 +29,7 @@ export function useLabels(props: DOMProps & AriaLabelingProps, defaultLabel?: st
   // combine them by pointing to the element itself.
   id = useId(id);
   if (labelledBy && label) {
-    let ids = new Set([...labelledBy.trim().split(/\s+/), id]);
+    let ids = new Set([id, ...labelledBy.trim().split(/\s+/)]);
     labelledBy = [...ids].join(' ');
   } else if (labelledBy) {
     labelledBy = labelledBy.trim().split(/\s+/).join(' ');

package/src/useLayoutEffect.ts

@@ -15,6 +15,6 @@ import React from 'react';
 // During SSR, React emits a warning when calling useLayoutEffect.
 // Since neither useLayoutEffect nor useEffect run on the server,
 // we can suppress this by replace it with a noop on the server.
-export const useLayoutEffect = typeof window !== 'undefined'
+export const useLayoutEffect = typeof document !== 'undefined'
   ? React.useLayoutEffect
   : () => {};

package/src/useObjectRef.ts

@@ -10,8 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {MutableRefObject, useRef} from 'react';
-import {useLayoutEffect} from './';
+import {MutableRefObject, useMemo, useRef} from 'react';
 
 /**
  * Offers an object ref for a given callback ref or an object ref. Especially
@@ -24,31 +23,17 @@ import {useLayoutEffect} from './';
  */
 export function useObjectRef<T>(forwardedRef?: ((instance: T | null) => void) | MutableRefObject<T | null> | null): MutableRefObject<T> {
   const objRef = useRef<T>();
-
-  /**
-   * We're using `useLayoutEffect` here instead of `useEffect` because we want
-   * to make sure that the `ref` value is up to date before other places in the
-   * the execution cycle try to read it.
-   */
-  useLayoutEffect(() => {
-    if (!forwardedRef) {
-      return;
-    }
-
-    if (typeof forwardedRef === 'function') {
-      forwardedRef(objRef.current);
-    } else {
-      forwardedRef.current = objRef.current;
-    }
-
-    return () => {
+  return useMemo(() => ({
+    get current() {
+      return objRef.current;
+    },
+    set current(value) {
+      objRef.current = value;
       if (typeof forwardedRef === 'function') {
-        forwardedRef(null);
-      } else {
-        forwardedRef.current = null;
+        forwardedRef(value);
+      } else if (forwardedRef) {
+        forwardedRef.current = value;
       }
-    };
-  }, [forwardedRef]);
-
-  return objRef;
+    }
+  }), [forwardedRef]);
 }

package/src/useUpdateEffect.ts

@@ -15,13 +15,22 @@ import {EffectCallback, useEffect, useRef} from 'react';
 // Like useEffect, but only called for updates after the initial render.
 export function useUpdateEffect(effect: EffectCallback, dependencies: any[]) {
   const isInitialMount = useRef(true);
+  const lastDeps = useRef<any[] | null>(null);
+
+  useEffect(() => {
+    isInitialMount.current = true;
+    return () => {
+      isInitialMount.current = false;
+    };
+  }, []);
 
   useEffect(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
-    } else {
+    } else if (!lastDeps.current || dependencies.some((dep, i) => !Object.is(dep, lastDeps[i]))) {
       effect();
     }
+    lastDeps.current = dependencies;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, dependencies);
 }

package/src/useViewportSize.ts

@@ -18,7 +18,7 @@ interface ViewportSize {
 }
 
 // @ts-ignore
-let visualViewport = typeof window !== 'undefined' && window.visualViewport;
+let visualViewport = typeof document !== 'undefined' && window.visualViewport;
 
 export function useViewportSize(): ViewportSize {
   let [size, setSize] = useState(() => getViewportSize());