@react-aria/utils 3.8.2 → 3.11.1

package/src/useEvent.ts

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2021 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, useEffect, useRef} from 'react';
+
+export function useEvent<K extends keyof GlobalEventHandlersEventMap>(
+  ref: RefObject<EventTarget>,
+  event: K,
+  handler: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,
+  options?: boolean | AddEventListenerOptions
+) {
+  let handlerRef = useRef(handler);
+  handlerRef.current = handler;
+
+  let isDisabled = handler == null;
+
+  useEffect(() => {
+    if (isDisabled) {
+      return;
+    }
+
+    let element = ref.current;
+    let handler = (e: GlobalEventHandlersEventMap[K]) => handlerRef.current.call(this, e);
+
+    element.addEventListener(event, handler, options);
+    return () => {
+      element.removeEventListener(event, handler, options);
+    };
+  }, [ref, event, options, isDisabled]);
+}

package/src/useGlobalListeners.ts

@@ -23,11 +23,17 @@ interface GlobalListeners {
 export function useGlobalListeners(): GlobalListeners {
   let globalListeners = useRef(new Map());
   let addGlobalListener = useCallback((eventTarget, type, listener, options) => {
-    globalListeners.current.set(listener, {type, eventTarget, options});
+    // Make sure we remove the listener after it is called with the `once` option.
+    let fn = options?.once ? (...args) => {
+      globalListeners.current.delete(listener);
+      listener(...args);
+    } : listener;
+    globalListeners.current.set(listener, {type, eventTarget, fn, options});
     eventTarget.addEventListener(type, listener, options);
   }, []);
   let removeGlobalListener = useCallback((eventTarget, type, listener, options) => {
-    eventTarget.removeEventListener(type, listener, options);
+    let fn = globalListeners.current.get(listener)?.fn || listener;
+    eventTarget.removeEventListener(type, fn, options);
     globalListeners.current.delete(listener);
   }, []);
   let removeAllGlobalListeners = useCallback(() => {

package/src/useId.ts

@@ -10,9 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {useEffect, useRef, useState} from 'react';
+import {useCallback, useEffect, useRef, useState} from 'react';
 import {useLayoutEffect} from './useLayoutEffect';
 import {useSSRSafeId} from '@react-aria/ssr';
+import {useValueEffect} from './';
 
 let idsUpdaterMap: Map<string, (v: string) => void> = new Map();
 
@@ -87,18 +88,20 @@ export function mergeIds(idA: string, idB: string): string {
 /**
  * Used to generate an id, and after render, check if that id is rendered so we know
  * if we can use it in places such as labelledby.
+ * @param depArray - When to recalculate if the id is in the DOM.
  */
-export function useSlotId(): string {
+export function useSlotId(depArray: ReadonlyArray<any> = []): string {
   let id = useId();
-  let [resolvedId, setResolvedId] = useState(id);
-  useLayoutEffect(() => {
-    let setCurr = idsUpdaterMap.get(id);
-    if (setCurr && !document.getElementById(id)) {
-      setResolvedId(null);
-    } else {
-      setResolvedId(id);
-    }
-  }, [id]);
+  let [resolvedId, setResolvedId] = useValueEffect(id);
+  let updateId = useCallback(() => {
+    setResolvedId(function *() {
+      yield id;
+
+      yield document.getElementById(id) ? id : null;
+    });
+  }, [id, setResolvedId]);
+
+  useLayoutEffect(updateId, [id, updateId, ...depArray]);
 
   return resolvedId;
 }

package/src/useObjectRef.ts

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2021 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 {MutableRefObject, useRef} from 'react';
+import {useLayoutEffect} from './';
+
+/**
+ * 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.
+ * @returns An object ref that updates the given ref.
+ * @see https://reactjs.org/docs/forwarding-refs.html
+ */
+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;
+    }
+  }, [forwardedRef]);
+
+  return objRef;
+}

package/src/useValueEffect.ts

@@ -0,0 +1,65 @@
+/*
+ * 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 {Dispatch, useCallback, useRef, useState} from 'react';
+import {useLayoutEffect} from './';
+
+type SetValueAction<S> = (prev: S) => Generator<any, void, unknown>;
+
+// This hook works like `useState`, but when setting the value, you pass a generator function
+// that can yield multiple values. Each yielded value updates the state and waits for the next
+// layout effect, then continues the generator. This allows sequential updates to state to be
+// written linearly.
+export function useValueEffect<S>(defaultValue: S | (() => S)): [S, Dispatch<SetValueAction<S>>] {
+  let [value, setValue] = useState(defaultValue);
+  let valueRef = useRef(value);
+  let effect = useRef(null);
+
+  valueRef.current = value;
+
+  // Store the function in a ref so we can always access the current version
+  // which has the proper `value` in scope.
+  let nextRef = useRef(null);
+  nextRef.current = () => {
+    // Run the generator to the next yield.
+    let newValue = effect.current.next();
+
+    // If the generator is done, reset the effect.
+    if (newValue.done) {
+      effect.current = null;
+      return;
+    }
+
+    // If the value is the same as the current value,
+    // then continue to the next yield. Otherwise,
+    // set the value in state and wait for the next layout effect.
+    if (value === newValue.value) {
+      nextRef.current();
+    } else {
+      setValue(newValue.value);
+    }
+  };
+
+  useLayoutEffect(() => {
+    // If there is an effect currently running, continue to the next yield.
+    if (effect.current) {
+      nextRef.current();
+    }
+  });
+
+  let queue = useCallback(fn => {
+    effect.current = fn(valueRef.current);
+    nextRef.current();
+  }, [effect, nextRef]);
+
+  return [value, queue];
+}