@reach/utils - npm Package Compare versions

Comparing version 0.7.3 to 0.7.4

dist/index.d.ts

@@ -1,5 +0,33 @@
-import { useLayoutEffect } from "react";
-import { As, AssignableRef, ComponentWithAs, ComponentWithForwardedRef, PropsFromAs, PropsWithAs } from "./types";
 import React from "react";
+import { As, AssignableRef, ComponentWithAs, ComponentWithForwardedRef, DistributiveOmit, PropsFromAs, PropsWithAs } from "./types";
 /**
+ * React currently throws a warning when using useLayoutEffect on the server.
+ * To get around it, we can conditionally useEffect on the server (no-op) and
+ * useLayoutEffect in the browser. We occasionally need useLayoutEffect to
+ * ensure we don't get a render flash for certain operations, but we may also
+ * need affected components to render on the server. One example is when setting
+ * a component's descendants to retrieve their index values.
+ *
+ * Important to note that using this hook as an escape hatch will break the
+ * eslint dependency warnings unless you rename the import to `useLayoutEffect`.
+ * Use sparingly only when the effect won't effect the rendered HTML to avoid
+ * any server/client mismatch.
+ *
+ * If a useLayoutEffect is needed and the result would create a mismatch, it's
+ * likely that the component in question shouldn't be rendered on the server at
+ * all, so a better approach would be to lazily render those in a parent
+ * component after client-side hydration.
+ *
+ * TODO: We are calling useLayoutEffect in a couple of places that will likely
+ * cause some issues for SSR users, whether the warning shows or not. Audit and
+ * fix these.
+ *
+ * https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
+ *
+ * @param effect
+ * @param deps
+ */
+export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
+/**
  * When in dev mode, checks that styles for a given @reach package are loaded.
@@ -28,2 +56,3 @@ *
 export declare function getScrollbarOffset(): number;
+export declare function isUndefined(value: any): boolean;
 /**
@@ -48,22 +77,2 @@ * Joins strings to format IDs for compound components.
 /**
- * React currently throws a warning when using useLayoutEffect on the server.
- * To get around it, we can conditionally useEffect on the server (no-op) and
- * useLayoutEffect in the browser. We occasionally need useLayoutEffect to ensure
- * we don't get a render flash for certain operations, but we may also need
- * affected components to render on the server. One example is when setting a
- * component's descendants to retrieve their index values. The index value may be
- * needed to determine whether a descendant is active, but with useEffect in the
- * browser there will be an initial frame where the active descendant is not set.
- *
- * Important to note that using this hook as an escape hatch will break the
- * eslint dependency warnings, so use sparingly only when needed and pay close
- * attention to the dependency array!
- *
- * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
- *
- * @param effect
- * @param deps
- */
-export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
-/**
  * Returns the previous value of a reference after a component update.
@@ -104,4 +113,4 @@ *
  */
-export declare function forwardRefWithAs<T extends As, P>(comp: (props: PropsFromAs<T, P>, ref: React.RefObject<any>) => JSX.Element): ComponentWithAs<T, P>;
-export { As, AssignableRef, ComponentWithAs, ComponentWithForwardedRef, PropsFromAs, PropsWithAs };
+export declare function forwardRefWithAs<P, T extends As>(comp: (props: PropsFromAs<T, P>, ref: React.RefObject<any>) => JSX.Element): ComponentWithAs<T, P>;
+export { As, AssignableRef, ComponentWithAs, ComponentWithForwardedRef, DistributiveOmit, PropsFromAs, PropsWithAs };
 export declare type Descendant<T, P = {}> = P & {
@@ -108,0 +117,0 @@ element: (T extends HTMLElement ? T : HTMLElement) | null;

dist/types.d.ts

 import * as React from "react";
 import { Validator } from "prop-types";
 export declare type AssignableRef<T = any> = React.Ref<T | null>;
+/**
+ * The built-in utility type `Omit` does not distribute over unions. So if you
+ * have:
+ *
+ *    type A = { a: 'whatever' }
+ *
+ * and you want to do a union with:
+ *
+ *    type B = A & { b: number } | { b: string; c: number }
+ *
+ * you might expect `Omit<B, 'a'>` to give you:
+ *
+ *    Omit<{ a: 'whatever'; b: number }, 'a'> | Omit<{ a: 'whatever'; b: string; c: number }, 'a'>
+ *
+ * This is not the case, unfortunately, so we need to create our own version of
+ * `Omit` that distributes over unions with a distributive conditional type. If
+ * you have a generic type parameter `T`, then the construct
+ * `T extends any ? F<T> : never` will end up distributing the `F<>` operation
+ * over `T` when `T` is a union type.
+ *
+ * @link https://stackoverflow.com/a/59796484/1792019
+ * @link http://www.typescriptlang.org/docs/handbook/advanced-types.html#distributive-conditional-types
+ */
+export declare type DistributiveOmit<T, K extends PropertyKey> = T extends any ? Omit<T, K> : never;
 export declare type As<P = any> = React.ElementType<P>;
@@ -5,0 +29,0 @@ export declare type PropsWithAs<T extends As, P> = P & Omit<React.ComponentPropsWithRef<T>, "as" | keyof P> & {

dist/utils.cjs.development.js

 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var tslib = require('tslib');
 var React = require('react');
 var React__default = _interopDefault(React);
 
-/* eslint-disable no-unused-vars */
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+/**
+ * React currently throws a warning when using useLayoutEffect on the server.
+ * To get around it, we can conditionally useEffect on the server (no-op) and
+ * useLayoutEffect in the browser. We occasionally need useLayoutEffect to
+ * ensure we don't get a render flash for certain operations, but we may also
+ * need affected components to render on the server. One example is when setting
+ * a component's descendants to retrieve their index values.
+ *
+ * Important to note that using this hook as an escape hatch will break the
+ * eslint dependency warnings unless you rename the import to `useLayoutEffect`.
+ * Use sparingly only when the effect won't effect the rendered HTML to avoid
+ * any server/client mismatch.
+ *
+ * If a useLayoutEffect is needed and the result would create a mismatch, it's
+ * likely that the component in question shouldn't be rendered on the server at
+ * all, so a better approach would be to lazily render those in a parent
+ * component after client-side hydration.
+ *
+ * TODO: We are calling useLayoutEffect in a couple of places that will likely
+ * cause some issues for SSR users, whether the warning shows or not. Audit and
+ * fix these.
+ *
+ * https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
+ *
+ * @param effect
+ * @param deps
+ */
+
+var useIsomorphicLayoutEffect =
+/*#__PURE__*/
+canUseDOM() ? React__default.useLayoutEffect : React__default.useEffect;
+var useLayoutEffect = useIsomorphicLayoutEffect;
 var checkedPkgs = {};
@@ -60,8 +126,2 @@ /**
 function cloneValidElement(element, props) {
-  var children = [];
-
-  for (var _i = 2; _i < arguments.length; _i++) {
-    children[_i - 2] = arguments[_i];
-  }
-
   if (!React.isValidElement(element)) {
@@ -71,3 +131,7 @@ return element;
 
-  return React.cloneElement.apply(void 0, tslib.__spreadArrays([element, props], children));
+  for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    children[_key - 2] = arguments[_key];
+  }
+
+  return React.cloneElement.apply(void 0, [element, props].concat(children));
 }
@@ -113,2 +177,5 @@ function createNamedContext(name, defaultValue) {
 }
+function isUndefined(value) {
+  return typeof value === "undefined";
+}
 /**
@@ -121,6 +188,4 @@ * Joins strings to format IDs for compound components.
 function makeId() {
-  var args = [];
-
-  for (var _i = 0; _i < arguments.length; _i++) {
-    args[_i] = arguments[_i];
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
   }
@@ -146,6 +211,4 @@
 function useForkedRef() {
-  var refs = [];
-
-  for (var _i = 0; _i < arguments.length; _i++) {
-    refs[_i] = arguments[_i];
+  for (var _len3 = arguments.length, refs = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+    refs[_key3] = arguments[_key3];
   }
@@ -168,25 +231,2 @@
 /**
- * React currently throws a warning when using useLayoutEffect on the server.
- * To get around it, we can conditionally useEffect on the server (no-op) and
- * useLayoutEffect in the browser. We occasionally need useLayoutEffect to ensure
- * we don't get a render flash for certain operations, but we may also need
- * affected components to render on the server. One example is when setting a
- * component's descendants to retrieve their index values. The index value may be
- * needed to determine whether a descendant is active, but with useEffect in the
- * browser there will be an initial frame where the active descendant is not set.
- *
- * Important to note that using this hook as an escape hatch will break the
- * eslint dependency warnings, so use sparingly only when needed and pay close
- * attention to the dependency array!
- *
- * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
- *
- * @param effect
- * @param deps
- */
-
-var useIsomorphicLayoutEffect =
-/*#__PURE__*/
-canUseDOM() ? React.useLayoutEffect : React.useEffect;
-/**
  * Returns the previous value of a reference after a component update.
@@ -263,3 +303,3 @@ *
 
-  return createNamedContext(name, tslib.__assign({
+  return createNamedContext(name, _extends({
     descendants: [],
@@ -294,20 +334,20 @@ registerDescendant: noop,
 
-function useDescendant(_a, indexProp) {
-  var context = _a.context,
-      element = _a.element,
-      rest = tslib.__rest(_a, ["context", "element"]);
+function useDescendant(_ref, indexProp) {
+  var context = _ref.context,
+      element = _ref.element,
+      rest = _objectWithoutPropertiesLoose(_ref, ["context", "element"]);
 
-  var _b = React.useState(),
-      forceUpdate = _b[1];
+  var _useState = React.useState(),
+      forceUpdate = _useState[1];
 
-  var _c = React.useContext(context),
-      registerDescendant = _c.registerDescendant,
-      unregisterDescendant = _c.unregisterDescendant,
-      descendants = _c.descendants; // Prevent any flashing
+  var _useContext = React.useContext(context),
+      registerDescendant = _useContext.registerDescendant,
+      unregisterDescendant = _useContext.unregisterDescendant,
+      descendants = _useContext.descendants; // Prevent any flashing
 
 
-  useIsomorphicLayoutEffect(function () {
+  useLayoutEffect(function () {
     if (!element) forceUpdate({}); // @ts-ignore
 
-    registerDescendant(tslib.__assign({
+    registerDescendant(_extends({
       element: element
@@ -317,6 +357,6 @@ }, rest));
       return unregisterDescendant(element);
-    };
-  }, tslib.__spreadArrays([element], Object.values(rest)));
-  return indexProp !== null && indexProp !== void 0 ? indexProp : descendants.findIndex(function (_a) {
-    var _el = _a.element;
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [element].concat(Object.values(rest)));
+  return indexProp !== null && indexProp !== void 0 ? indexProp : descendants.findIndex(function (_ref2) {
+    var _el = _ref2.element;
     return _el === element;
@@ -328,10 +368,10 @@ });
 }
-function DescendantProvider(_a) {
-  var Ctx = _a.context,
-      children = _a.children,
-      items = _a.items,
-      set = _a.set;
-  var registerDescendant = React__default.useCallback(function (_a) {
-    var element = _a.element,
-        rest = tslib.__rest(_a, ["element"]);
+function DescendantProvider(_ref3) {
+  var Ctx = _ref3.context,
+      children = _ref3.children,
+      items = _ref3.items,
+      set = _ref3.set;
+  var registerDescendant = React__default.useCallback(function (_ref4) {
+    var element = _ref4.element,
+        rest = _objectWithoutPropertiesLoose(_ref4, ["element"]);
 
@@ -343,4 +383,4 @@ if (!element) {
     set(function (items) {
-      if (items.find(function (_a) {
-        var _el = _a.element;
+      if (items.find(function (_ref5) {
+        var _el = _ref5.element;
         return _el === element;
@@ -362,4 +402,4 @@ }) == null) {
          */
-        var index = items.findIndex(function (_a) {
-          var existingElement = _a.element;
+        var index = items.findIndex(function (_ref6) {
+          var existingElement = _ref6.element;
 
@@ -380,3 +420,3 @@ if (!existingElement || !element) {
 
-        var newItem = tslib.__assign({
+        var newItem = _extends({
           element: element
@@ -387,6 +427,6 @@ }, rest); // If an index is not found we will push the element to the end.
         if (index === -1) {
-          return tslib.__spreadArrays(items, [newItem]);
+          return [].concat(items, [newItem]);
         }
 
-        return tslib.__spreadArrays(items.slice(0, index), [newItem], items.slice(index));
+        return [].concat(items.slice(0, index), [newItem], items.slice(index));
       }
@@ -410,4 +450,4 @@
     set(function (items) {
-      return items.filter(function (_a) {
-        var _el = _a.element;
+      return items.filter(function (_ref7) {
+        var _el = _ref7.element;
         return element !== _el;
@@ -452,2 +492,3 @@ });
 exports.getScrollbarOffset = getScrollbarOffset;
+exports.isUndefined = isUndefined;
 exports.makeId = makeId;
@@ -454,0 +495,0 @@ exports.noop = noop;

dist/utils.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";var e,n=require("tslib"),t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function o(e,n){if(null!=e)if("function"==typeof e)e(n);else try{e.current=n}catch(t){throw new Error('Cannot assign value "'+n+'" to ref "'+e+'"')}}function u(){return"undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement}function i(e,n){var r=t.createContext(n);return r.displayName=e,r}function c(){}var s=u()?t.useLayoutEffect:t.useEffect;exports.DescendantProvider=function(e){var o=e.context,u=e.children,i=e.items,c=e.set,s=r.useCallback((function(e){var t=e.element,r=n.__rest(e,["element"]);t&&c((function(e){if(null==e.find((function(e){return e.element===t}))){var o=e.findIndex((function(e){var n=e.element;return!(!n||!t)&&Boolean(n.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_PRECEDING)})),u=n.__assign({element:t},r);return-1===o?n.__spreadArrays(e,[u]):n.__spreadArrays(e.slice(0,o),[u],e.slice(o))}return e}))}),[]),f=t.useCallback((function(e){e&&c((function(n){return n.filter((function(n){return e!==n.element}))}))}),[]),a=t.useMemo((function(){return{descendants:i,registerDescendant:s,unregisterDescendant:f}}),[i,s,f]);return r.createElement(o.Provider,{value:a},u)},exports.assignRef=o,exports.boolOrBoolString=function(e){return"false"!==e&&Boolean(e)},exports.canUseDOM=u,exports.checkStyles=function(e){},exports.cloneValidElement=function(e,r){for(var o=[],u=2;u<arguments.length;u++)o[u-2]=arguments[u];return t.isValidElement(e)?t.cloneElement.apply(void 0,n.__spreadArrays([e,r],o)):e},exports.createDescendantContext=function(e,t){return void 0===t&&(t={}),i(e,n.__assign({descendants:[],registerDescendant:c,unregisterDescendant:c},t))},exports.createNamedContext=i,exports.findLastIndex=function(e,n){var t=e.length>>>0;if(!t)return-1;for(var r=t-1;r>=0;){if(n(e[r],r,e))return r;--r}return-1},exports.forwardRefWithAs=function(e){return r.forwardRef(e)},exports.getScrollbarOffset=function(){try{if(window.innerWidth>document.documentElement.clientWidth)return window.innerWidth-document.documentElement.clientWidth}catch(e){}return 0},exports.makeId=function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];return e.filter((function(e){return null!=e})).join("--")},exports.noop=c,exports.useDescendant=function(e,r){var o=e.context,u=e.element,i=n.__rest(e,["context","element"]),c=t.useState()[1],f=t.useContext(o),a=f.registerDescendant,l=f.unregisterDescendant,d=f.descendants;return s((function(){return u||c({}),a(n.__assign({element:u},i)),function(){return l(u)}}),n.__spreadArrays([u],Object.values(i))),null!=r?r:d.findIndex((function(e){return e.element===u}))},exports.useDescendants=function(){return t.useState([])},exports.useForkedRef=function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];return t.useMemo((function(){return e.every((function(e){return null==e}))?null:function(n){e.forEach((function(e){o(e,n)}))}}),e)},exports.useIsomorphicLayoutEffect=s,exports.usePrevious=function(e){var n=t.useRef(null);return t.useEffect((function(){n.current=e}),[e]),n.current},exports.useUpdateEffect=function(e,n){var r=t.useRef(!1);t.useEffect((function(){r.current?e():r.current=!0}),n)},exports.wrapEvent=function(e,n){return function(t){if(e&&e(t),!t.defaultPrevented)return n(t)}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=require("react"),t=(e=n)&&"object"==typeof e&&"default"in e?e.default:e;function r(){return(r=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function o(e,n){if(null==e)return{};var t,r,o={},u=Object.keys(e);for(r=0;r<u.length;r++)n.indexOf(t=u[r])>=0||(o[t]=e[t]);return o}var u=f()?t.useLayoutEffect:t.useEffect,c=u;function i(e,n){if(null!=e)if("function"==typeof e)e(n);else try{e.current=n}catch(t){throw new Error('Cannot assign value "'+n+'" to ref "'+e+'"')}}function f(){return"undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement}function s(e,t){var r=n.createContext(t);return r.displayName=e,r}function a(){}exports.DescendantProvider=function(e){var u=e.context,c=e.children,i=e.items,f=e.set,s=t.useCallback((function(e){var n=e.element,t=o(e,["element"]);n&&f((function(e){if(null==e.find((function(e){return e.element===n}))){var o=e.findIndex((function(e){var t=e.element;return!(!t||!n)&&Boolean(t.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_PRECEDING)})),u=r({element:n},t);return-1===o?[].concat(e,[u]):[].concat(e.slice(0,o),[u],e.slice(o))}return e}))}),[]),a=n.useCallback((function(e){e&&f((function(n){return n.filter((function(n){return e!==n.element}))}))}),[]),l=n.useMemo((function(){return{descendants:i,registerDescendant:s,unregisterDescendant:a}}),[i,s,a]);return t.createElement(u.Provider,{value:l},c)},exports.assignRef=i,exports.boolOrBoolString=function(e){return"false"!==e&&Boolean(e)},exports.canUseDOM=f,exports.checkStyles=function(e){},exports.cloneValidElement=function(e,t){if(!n.isValidElement(e))return e;for(var r=arguments.length,o=new Array(r>2?r-2:0),u=2;u<r;u++)o[u-2]=arguments[u];return n.cloneElement.apply(void 0,[e,t].concat(o))},exports.createDescendantContext=function(e,n){return void 0===n&&(n={}),s(e,r({descendants:[],registerDescendant:a,unregisterDescendant:a},n))},exports.createNamedContext=s,exports.findLastIndex=function(e,n){var t=e.length>>>0;if(!t)return-1;for(var r=t-1;r>=0;){if(n(e[r],r,e))return r;--r}return-1},exports.forwardRefWithAs=function(e){return t.forwardRef(e)},exports.getScrollbarOffset=function(){try{if(window.innerWidth>document.documentElement.clientWidth)return window.innerWidth-document.documentElement.clientWidth}catch(e){}return 0},exports.isUndefined=function(e){return void 0===e},exports.makeId=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return n.filter((function(e){return null!=e})).join("--")},exports.noop=a,exports.useDescendant=function(e,t){var u=e.context,i=e.element,f=o(e,["context","element"]),s=n.useState()[1],a=n.useContext(u),l=a.registerDescendant,d=a.unregisterDescendant,p=a.descendants;return c((function(){return i||s({}),l(r({element:i},f)),function(){return d(i)}}),[i].concat(Object.values(f))),null!=t?t:p.findIndex((function(e){return e.element===i}))},exports.useDescendants=function(){return n.useState([])},exports.useForkedRef=function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return n.useMemo((function(){return t.every((function(e){return null==e}))?null:function(e){t.forEach((function(n){i(n,e)}))}}),t)},exports.useIsomorphicLayoutEffect=u,exports.usePrevious=function(e){var t=n.useRef(null);return n.useEffect((function(){t.current=e}),[e]),t.current},exports.useUpdateEffect=function(e,t){var r=n.useRef(!1);n.useEffect((function(){r.current?e():r.current=!0}),t)},exports.wrapEvent=function(e,n){return function(t){if(e&&e(t),!t.defaultPrevented)return n(t)}};
 //# sourceMappingURL=utils.cjs.production.min.js.map

dist/utils.esm.js

@@ -1,5 +0,69 @@
-import { __spreadArrays, __assign, __rest } from 'tslib';
-import React, { isValidElement, cloneElement, createContext, useMemo, useLayoutEffect, useEffect, useRef, useState, useContext, useCallback } from 'react';
+import React, { isValidElement, cloneElement, createContext, useMemo, useRef, useEffect, useState, useContext, useCallback } from 'react';
 
-/* eslint-disable no-unused-vars */
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+/**
+ * React currently throws a warning when using useLayoutEffect on the server.
+ * To get around it, we can conditionally useEffect on the server (no-op) and
+ * useLayoutEffect in the browser. We occasionally need useLayoutEffect to
+ * ensure we don't get a render flash for certain operations, but we may also
+ * need affected components to render on the server. One example is when setting
+ * a component's descendants to retrieve their index values.
+ *
+ * Important to note that using this hook as an escape hatch will break the
+ * eslint dependency warnings unless you rename the import to `useLayoutEffect`.
+ * Use sparingly only when the effect won't effect the rendered HTML to avoid
+ * any server/client mismatch.
+ *
+ * If a useLayoutEffect is needed and the result would create a mismatch, it's
+ * likely that the component in question shouldn't be rendered on the server at
+ * all, so a better approach would be to lazily render those in a parent
+ * component after client-side hydration.
+ *
+ * TODO: We are calling useLayoutEffect in a couple of places that will likely
+ * cause some issues for SSR users, whether the warning shows or not. Audit and
+ * fix these.
+ *
+ * https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
+ *
+ * @param effect
+ * @param deps
+ */
+
+var useIsomorphicLayoutEffect =
+/*#__PURE__*/
+canUseDOM() ? React.useLayoutEffect : React.useEffect;
+var useLayoutEffect = useIsomorphicLayoutEffect;
 var checkedPkgs = {};
@@ -55,8 +119,2 @@ /**
 function cloneValidElement(element, props) {
-  var children = [];
-
-  for (var _i = 2; _i < arguments.length; _i++) {
-    children[_i - 2] = arguments[_i];
-  }
-
   if (!isValidElement(element)) {
@@ -66,3 +124,7 @@ return element;
 
-  return cloneElement.apply(void 0, __spreadArrays([element, props], children));
+  for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    children[_key - 2] = arguments[_key];
+  }
+
+  return cloneElement.apply(void 0, [element, props].concat(children));
 }
@@ -108,2 +170,5 @@ function createNamedContext(name, defaultValue) {
 }
+function isUndefined(value) {
+  return typeof value === "undefined";
+}
 /**
@@ -116,6 +181,4 @@ * Joins strings to format IDs for compound components.
 function makeId() {
-  var args = [];
-
-  for (var _i = 0; _i < arguments.length; _i++) {
-    args[_i] = arguments[_i];
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
   }
@@ -141,6 +204,4 @@
 function useForkedRef() {
-  var refs = [];
-
-  for (var _i = 0; _i < arguments.length; _i++) {
-    refs[_i] = arguments[_i];
+  for (var _len3 = arguments.length, refs = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+    refs[_key3] = arguments[_key3];
   }
@@ -163,25 +224,2 @@
 /**
- * React currently throws a warning when using useLayoutEffect on the server.
- * To get around it, we can conditionally useEffect on the server (no-op) and
- * useLayoutEffect in the browser. We occasionally need useLayoutEffect to ensure
- * we don't get a render flash for certain operations, but we may also need
- * affected components to render on the server. One example is when setting a
- * component's descendants to retrieve their index values. The index value may be
- * needed to determine whether a descendant is active, but with useEffect in the
- * browser there will be an initial frame where the active descendant is not set.
- *
- * Important to note that using this hook as an escape hatch will break the
- * eslint dependency warnings, so use sparingly only when needed and pay close
- * attention to the dependency array!
- *
- * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
- *
- * @param effect
- * @param deps
- */
-
-var useIsomorphicLayoutEffect =
-/*#__PURE__*/
-canUseDOM() ? useLayoutEffect : useEffect;
-/**
  * Returns the previous value of a reference after a component update.
@@ -258,3 +296,3 @@ *
 
-  return createNamedContext(name, __assign({
+  return createNamedContext(name, _extends({
     descendants: [],
@@ -289,20 +327,20 @@ registerDescendant: noop,
 
-function useDescendant(_a, indexProp) {
-  var context = _a.context,
-      element = _a.element,
-      rest = __rest(_a, ["context", "element"]);
+function useDescendant(_ref, indexProp) {
+  var context = _ref.context,
+      element = _ref.element,
+      rest = _objectWithoutPropertiesLoose(_ref, ["context", "element"]);
 
-  var _b = useState(),
-      forceUpdate = _b[1];
+  var _useState = useState(),
+      forceUpdate = _useState[1];
 
-  var _c = useContext(context),
-      registerDescendant = _c.registerDescendant,
-      unregisterDescendant = _c.unregisterDescendant,
-      descendants = _c.descendants; // Prevent any flashing
+  var _useContext = useContext(context),
+      registerDescendant = _useContext.registerDescendant,
+      unregisterDescendant = _useContext.unregisterDescendant,
+      descendants = _useContext.descendants; // Prevent any flashing
 
 
-  useIsomorphicLayoutEffect(function () {
+  useLayoutEffect(function () {
     if (!element) forceUpdate({}); // @ts-ignore
 
-    registerDescendant(__assign({
+    registerDescendant(_extends({
       element: element
@@ -312,6 +350,6 @@ }, rest));
       return unregisterDescendant(element);
-    };
-  }, __spreadArrays([element], Object.values(rest)));
-  return indexProp !== null && indexProp !== void 0 ? indexProp : descendants.findIndex(function (_a) {
-    var _el = _a.element;
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [element].concat(Object.values(rest)));
+  return indexProp !== null && indexProp !== void 0 ? indexProp : descendants.findIndex(function (_ref2) {
+    var _el = _ref2.element;
     return _el === element;
@@ -323,10 +361,10 @@ });
 }
-function DescendantProvider(_a) {
-  var Ctx = _a.context,
-      children = _a.children,
-      items = _a.items,
-      set = _a.set;
-  var registerDescendant = React.useCallback(function (_a) {
-    var element = _a.element,
-        rest = __rest(_a, ["element"]);
+function DescendantProvider(_ref3) {
+  var Ctx = _ref3.context,
+      children = _ref3.children,
+      items = _ref3.items,
+      set = _ref3.set;
+  var registerDescendant = React.useCallback(function (_ref4) {
+    var element = _ref4.element,
+        rest = _objectWithoutPropertiesLoose(_ref4, ["element"]);
 
@@ -338,4 +376,4 @@ if (!element) {
     set(function (items) {
-      if (items.find(function (_a) {
-        var _el = _a.element;
+      if (items.find(function (_ref5) {
+        var _el = _ref5.element;
         return _el === element;
@@ -357,4 +395,4 @@ }) == null) {
          */
-        var index = items.findIndex(function (_a) {
-          var existingElement = _a.element;
+        var index = items.findIndex(function (_ref6) {
+          var existingElement = _ref6.element;
 
@@ -375,3 +413,3 @@ if (!existingElement || !element) {
 
-        var newItem = __assign({
+        var newItem = _extends({
           element: element
@@ -382,6 +420,6 @@ }, rest); // If an index is not found we will push the element to the end.
         if (index === -1) {
-          return __spreadArrays(items, [newItem]);
+          return [].concat(items, [newItem]);
         }
 
-        return __spreadArrays(items.slice(0, index), [newItem], items.slice(index));
+        return [].concat(items.slice(0, index), [newItem], items.slice(index));
       }
@@ -405,4 +443,4 @@
     set(function (items) {
-      return items.filter(function (_a) {
-        var _el = _a.element;
+      return items.filter(function (_ref7) {
+        var _el = _ref7.element;
         return element !== _el;
@@ -437,3 +475,3 @@ });
 
-export { DescendantProvider, assignRef, boolOrBoolString, canUseDOM, checkStyles, cloneValidElement, createDescendantContext, createNamedContext, findLastIndex, forwardRefWithAs, getScrollbarOffset, makeId, noop, useDescendant, useDescendants, useForkedRef, useIsomorphicLayoutEffect, usePrevious, useUpdateEffect, wrapEvent };
+export { DescendantProvider, assignRef, boolOrBoolString, canUseDOM, checkStyles, cloneValidElement, createDescendantContext, createNamedContext, findLastIndex, forwardRefWithAs, getScrollbarOffset, isUndefined, makeId, noop, useDescendant, useDescendants, useForkedRef, useIsomorphicLayoutEffect, usePrevious, useUpdateEffect, wrapEvent };
 //# sourceMappingURL=utils.esm.js.map

package.json

 {
   "name": "@reach/utils",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "Internal, shared utilities for Reach UI.",
@@ -28,3 +28,3 @@ "author": "React Training <[e-mail]>",
   ],
-  "gitHead": "fe739beb1d94cc58c4e72f88ab58efa58e0de8c8"
+  "gitHead": "f460709e283a60dd5ea62952b7feaf88546a50ff"
 }

README.md

@@ -6,1 +6,3 @@ # @reach/utils
 Shared utilities for various `@reach` packages.
+
+**Important:** This package is intended for internal use by the Reach UI library. You should not use it directly in your production projects, as the APIs can and will change often without regard to sem-ver. You have been warned!

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

107877

increased by7.06%

Lines of code

1053

increased by11.08%

Number of lines in readme file

8

increased by33.33%

No dependency changes