@react-aria/utils 3.8.0 → 3.10.0

package/dist/main.js

@@ -8,6 +8,8 @@ exports.clamp = clamp;
 
 var _clsx = $parcel$interopDefault(require("clsx"));
 
+var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
+
 var {
   useSSRSafeId
 } = require("@react-aria/ssr");
@@ -17,11 +19,10 @@ var _react2 = require("react");
 var _react = $parcel$interopDefault(_react2);
 
 var {
+  useCallback,
   useEffect,
   useRef,
-  useState,
-  useCallback,
-  useLayoutEffect: _useLayoutEffect
+  useState
 } = _react2;
 
 function $parcel$interopDefault(a) {
@@ -43,7 +44,8 @@ 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) {
@@ -53,9 +55,16 @@ function useId(defaultId) {
     }
   };
 
+  $f09fcd7f5f367fc80aacfeac62ed2$var$idsUpdaterMap.set(res, updateValue);
   useLayoutEffect(() => {
     isRendering.current = false;
   }, [updateValue]);
+  useLayoutEffect(() => {
+    let r = res;
+    return () => {
+      $f09fcd7f5f367fc80aacfeac62ed2$var$idsUpdaterMap.delete(r);
+    };
+  }, [res]);
   useEffect(() => {
     let newId = nextId.current;
 
@@ -64,8 +73,6 @@ function useId(defaultId) {
       nextId.current = null;
     }
   }, [setValue, updateValue]);
-  let res = useSSRSafeId(value);
-  $f09fcd7f5f367fc80aacfeac62ed2$var$idsUpdaterMap.set(res, updateValue);
   return res;
 }
 /**
@@ -100,21 +107,27 @@ 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.
  */
 
 
 exports.mergeIds = mergeIds;
 
-function useSlotId() {
-  let [id, setId] = useState(useId());
-  useLayoutEffect(() => {
-    let setCurr = $f09fcd7f5f367fc80aacfeac62ed2$var$idsUpdaterMap.get(id);
+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;
 }
 
 exports.useSlotId = useSlotId;
@@ -158,32 +171,30 @@ exports.chain = chain;
  * @param args - Multiple sets of props to merge together.
  */
 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 = _babelRuntimeHelpersExtends({}, 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;
       }
     }
   }
@@ -213,7 +224,7 @@ function filterDOMProps(props, opts) {
   let filteredProps = {};
 
   for (const prop in props) {
-    if (Object.prototype.hasOwnProperty.call(props, prop) && ($a736ffc3e05a0bfc1508098ba395b41$var$DOMPropNames.has(prop) || labelable && $a736ffc3e05a0bfc1508098ba395b41$var$labelablePropNames.has(prop) || (propNames == null ? void 0 : propNames.has(prop)) || $a736ffc3e05a0bfc1508098ba395b41$var$propRe.test(prop))) {
+    if (Object.prototype.hasOwnProperty.call(props, prop) && ($a736ffc3e05a0bfc1508098ba395b41$var$DOMPropNames.has(prop) || labelable && $a736ffc3e05a0bfc1508098ba395b41$var$labelablePropNames.has(prop) || propNames != null && propNames.has(prop) || $a736ffc3e05a0bfc1508098ba395b41$var$propRe.test(prop))) {
       filteredProps[prop] = props[prop];
     }
   }
@@ -613,15 +624,24 @@ exports.useDrag1D = useDrag1D;
 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(() => {
@@ -678,6 +698,39 @@ function useLabels(props, defaultLabel) {
 
 exports.useLabels = useLabels;
 
+/**
+ * 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
+ */
+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;
+}
+
+exports.useObjectRef = useObjectRef;
+
 // Like useEffect, but only called for updates after the initial render.
 function useUpdateEffect(effect, dependencies) {
   const isInitialMount = useRef(true);
@@ -737,7 +790,7 @@ exports.useResizeObserver = useResizeObserver;
 // Syncs ref from context with ref passed to hook
 function useSyncRef(context, ref) {
   useLayoutEffect(() => {
-    if (context && context.ref) {
+    if (context && context.ref && ref) {
       context.ref.current = ref.current;
       return () => {
         context.ref.current = null;
@@ -771,7 +824,15 @@ function useViewportSize() {
   useEffect(() => {
     // Use visualViewport api to track available height even on iOS virtual keyboard opening
     let onResize = () => {
-      setSize($f1a92c0e19f2e1ad09851454bf93009$var$getViewportSize());
+      setSize(size => {
+        let newSize = $f1a92c0e19f2e1ad09851454bf93009$var$getViewportSize();
+
+        if (newSize.width === size.width && newSize.height === size.height) {
+          return size;
+        }
+
+        return newSize;
+      });
     };
 
     if (!$f1a92c0e19f2e1ad09851454bf93009$var$visualViewport) {
@@ -805,8 +866,7 @@ const $bd5928122fc632cc7302c36df9f$var$descriptionNodes = new Map();
 
 function useDescription(description) {
   let [id, setId] = useState(null);
-
-  _useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (!description) {
       return;
     }
@@ -838,7 +898,6 @@ function useDescription(description) {
       }
     };
   }, [description]);
-
   return {
     'aria-describedby': description ? id : undefined
   };
@@ -902,4 +961,73 @@ function isAndroid() {
 }
 
 exports.isAndroid = isAndroid;
+
+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]);
+}
+
+exports.useEvent = useEvent;
+
+// 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.
+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];
+}
+
+exports.useValueEffect = useValueEffect;
 //# sourceMappingURL=main.js.map