@react-aria/utils 3.8.0 → 3.10.0

package/dist/module.js

@@ -1,8 +1,9 @@
 import { clamp, snapValueToStep } from "@react-stately/utils";
 export { clamp, snapValueToStep };
 import _clsx from "clsx";
+import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
 import { useSSRSafeId } from "@react-aria/ssr";
-import _react, { useEffect, useRef, useState, useCallback, useLayoutEffect as _useLayoutEffect } from "react";
+import _react, { useCallback, useEffect, useRef, useState } 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.
@@ -17,7 +18,8 @@ export function useId(defaultId) {
   let isRendering = useRef(true);
   isRendering.current = true;
   let [value, setValue] = useState(defaultId);
-  let nextId = useRef(null); // don't memo this, we want it new each render so that the Effects always run
+  let nextId = useRef(null);
+  let res = useSSRSafeId(value); // don't memo this, we want it new each render so that the Effects always run
 
   let updateValue = val => {
     if (!isRendering.current) {
@@ -27,9 +29,16 @@ export function useId(defaultId) {
     }
   };
 
+  $f8b5fdd96fb429d7102983f777c41307$var$idsUpdaterMap.set(res, updateValue);
   useLayoutEffect(() => {
     isRendering.current = false;
   }, [updateValue]);
+  useLayoutEffect(() => {
+    let r = res;
+    return () => {
+      $f8b5fdd96fb429d7102983f777c41307$var$idsUpdaterMap.delete(r);
+    };
+  }, [res]);
   useEffect(() => {
     let newId = nextId.current;
 
@@ -38,8 +47,6 @@ export function useId(defaultId) {
       nextId.current = null;
     }
   }, [setValue, updateValue]);
-  let res = useSSRSafeId(value);
-  $f8b5fdd96fb429d7102983f777c41307$var$idsUpdaterMap.set(res, updateValue);
   return res;
 }
 /**
@@ -71,18 +78,24 @@ export function mergeIds(idA, idB) {
 /**
  * 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() {
-  let [id, setId] = useState(useId());
-  useLayoutEffect(() => {
-    let setCurr = $f8b5fdd96fb429d7102983f777c41307$var$idsUpdaterMap.get(id);
+export function useSlotId(depArray) {
+  if (depArray === void 0) {
+    depArray = [];
+  }
 
-    if (setCurr && !document.getElementById(id)) {
-      setId(null);
-    }
-  }, [id]);
-  return id;
+  let id = useId();
+  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;
 }
 
 /*
@@ -122,32 +135,30 @@ export function chain() {
  * @param args - Multiple sets of props to merge together.
  */
 export function mergeProps() {
-  let result = {};
-
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-
-  for (let props of args) {
-    for (let key in result) {
-      // Chain events
-      if (/^on[A-Z]/.test(key) && typeof result[key] === 'function' && typeof props[key] === 'function') {
-        result[key] = chain(result[key], props[key]); // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check
-      } else if (key === 'className' && typeof result.className === 'string' && typeof props.className === 'string') {
-        result[key] = _clsx(result.className, props.className);
-      } else if (key === 'UNSAFE_className' && typeof result.UNSAFE_className === 'string' && typeof props.UNSAFE_className === 'string') {
-        result[key] = _clsx(result.UNSAFE_className, props.UNSAFE_className);
-      } else if (key === 'id' && result.id && props.id) {
-        result.id = mergeIds(result.id, props.id); // Override others
-      } else {
-        result[key] = props[key] !== undefined ? props[key] : result[key];
-      }
-    } // Add props from b that are not in a
+  // Start with a base clone of the first argument. This is a lot faster than starting
+  // with an empty object and adding properties as we go.
+  let result = _babelRuntimeHelpersEsmExtends({}, arguments.length <= 0 ? undefined : arguments[0]);
 
+  for (let i = 1; i < arguments.length; i++) {
+    let props = i < 0 || arguments.length <= i ? undefined : arguments[i];
 
     for (let key in props) {
-      if (result[key] === undefined) {
-        result[key] = props[key];
+      let a = result[key];
+      let b = props[key]; // Chain events
+
+      if (typeof a === 'function' && typeof b === 'function' && // This is a lot faster than a regex.
+      key[0] === 'o' && key[1] === 'n' && key.charCodeAt(2) >=
+      /* 'A' */
+      65 && key.charCodeAt(2) <=
+      /* 'Z' */
+      90) {
+        result[key] = chain(a, b); // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check
+      } else if ((key === 'className' || key === 'UNSAFE_className') && typeof a === 'string' && typeof b === 'string') {
+        result[key] = _clsx(a, b);
+      } else if (key === 'id' && a && b) {
+        result.id = mergeIds(a, b); // Override others
+      } else {
+        result[key] = b !== undefined ? b : a;
       }
     }
   }
@@ -175,7 +186,7 @@ export function filterDOMProps(props, opts) {
   let filteredProps = {};
 
   for (const prop in props) {
-    if (Object.prototype.hasOwnProperty.call(props, prop) && ($f6a965352cabf1a7c37e8c1337e5eab$var$DOMPropNames.has(prop) || labelable && $f6a965352cabf1a7c37e8c1337e5eab$var$labelablePropNames.has(prop) || (propNames == null ? void 0 : propNames.has(prop)) || $f6a965352cabf1a7c37e8c1337e5eab$var$propRe.test(prop))) {
+    if (Object.prototype.hasOwnProperty.call(props, prop) && ($f6a965352cabf1a7c37e8c1337e5eab$var$DOMPropNames.has(prop) || labelable && $f6a965352cabf1a7c37e8c1337e5eab$var$labelablePropNames.has(prop) || propNames != null && propNames.has(prop) || $f6a965352cabf1a7c37e8c1337e5eab$var$propRe.test(prop))) {
       filteredProps[prop] = props[prop];
     }
   }
@@ -563,15 +574,24 @@ export function useDrag1D(props) {
 export function useGlobalListeners() {
   let globalListeners = useRef(new Map());
   let addGlobalListener = useCallback((eventTarget, type, listener, options) => {
+    // Make sure we remove the listener after it is called with the `once` option.
+    let fn = options != null && options.once ? function () {
+      globalListeners.current.delete(listener);
+      listener(...arguments);
+    } : 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);
+    var _globalListeners$curr;
+
+    let fn = ((_globalListeners$curr = globalListeners.current.get(listener)) == null ? void 0 : _globalListeners$curr.fn) || listener;
+    eventTarget.removeEventListener(type, fn, options);
     globalListeners.current.delete(listener);
   }, []);
   let removeAllGlobalListeners = useCallback(() => {
@@ -623,6 +643,37 @@ export function useLabels(props, defaultLabel) {
     'aria-labelledby': labelledBy
   };
 }
+
+/**
+ * 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(forwardedRef) {
+  const objRef = useRef();
+  /**
+   * 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;
+}
 // Like useEffect, but only called for updates after the initial render.
 export function useUpdateEffect(effect, dependencies) {
   const isInitialMount = useRef(true);
@@ -677,7 +728,7 @@ export function useResizeObserver(options) {
 // Syncs ref from context with ref passed to hook
 export function useSyncRef(context, ref) {
   useLayoutEffect(() => {
-    if (context && context.ref) {
+    if (context && context.ref && ref) {
       context.ref.current = ref.current;
       return () => {
         context.ref.current = null;
@@ -705,7 +756,15 @@ export function useViewportSize() {
   useEffect(() => {
     // Use visualViewport api to track available height even on iOS virtual keyboard opening
     let onResize = () => {
-      setSize($d662329747d896105af008c761523$var$getViewportSize());
+      setSize(size => {
+        let newSize = $d662329747d896105af008c761523$var$getViewportSize();
+
+        if (newSize.width === size.width && newSize.height === size.height) {
+          return size;
+        }
+
+        return newSize;
+      });
     };
 
     if (!$d662329747d896105af008c761523$var$visualViewport) {
@@ -736,8 +795,7 @@ let $c8aa524f123a75a64d51e06d16b9568$var$descriptionId = 0;
 const $c8aa524f123a75a64d51e06d16b9568$var$descriptionNodes = new Map();
 export function useDescription(description) {
   let [id, setId] = useState(null);
-
-  _useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (!description) {
       return;
     }
@@ -769,7 +827,6 @@ export function useDescription(description) {
       }
     };
   }, [description]);
-
   return {
     'aria-describedby': description ? id : undefined
   };
@@ -808,4 +865,67 @@ export function isChrome() {
 export function isAndroid() {
   return $b0986c1243f71db8e992f67117a1ed9$var$testUserAgent(/Android/);
 }
+export function useEvent(ref, event, handler, options) {
+  let handlerRef = useRef(handler);
+  handlerRef.current = handler;
+  let isDisabled = handler == null;
+  useEffect(() => {
+    if (isDisabled) {
+      return;
+    }
+
+    let element = ref.current;
+
+    let handler = e => handlerRef.current.call(this, e);
+
+    element.addEventListener(event, handler, options);
+    return () => {
+      element.removeEventListener(event, handler, options);
+    };
+  }, [ref, event, options, isDisabled]);
+}
+// 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(defaultValue) {
+  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];
+}
 //# sourceMappingURL=module.js.map