@reach/utils - npm Package Compare versions

Comparing version 0.11.2 to 0.12.0

dist/index.d.ts

@@ -1,4 +0,3 @@
-import React from "react";
-import warning from "warning";
-import { As, AssignableRef, ComponentWithAs, ComponentWithForwardedRef, DistributiveOmit, ElementByTag, ElementTagNameMap, ForwardRefExoticComponentWithAs, ForwardRefWithAsRenderFunction, FunctionComponentWithAs, MemoExoticComponentWithAs, PropsFromAs, PropsWithAs, SingleOrArray, ThenArg } from "./types";
+import * as React from "react";
+import type { As, AssignableRef, ComponentWithAs, ComponentWithForwardedRef, DistributiveOmit, ElementTagNameMap, ForwardRefExoticComponentWithAs, ForwardRefWithAsRenderFunction, FunctionComponentWithAs, MemoExoticComponentWithAs, PropsFromAs, PropsWithAs, SingleOrArray, ThenArg } from "./types";
 /**
@@ -35,4 +34,11 @@ * React currently throws a warning when using useLayoutEffect on the server.
  * Copy of Facebook's warning package.
+ *
+ * Similar to invariant but only logs a warning if the condition is not met.
+ * This can be used to log issues in development environments in critical paths.
+ * Removing the logging code for production environments will keep the same
+ * logic and follow the same code paths.
+ *
+ * @see https://github.com/BerkeleyTrue/warning/blob/master/warning.js
  */
-export { warning };
+export declare const warning: (condition: any, format?: string | undefined, ...extra: any[]) => void;
 /**
@@ -84,4 +90,4 @@ * When in dev mode, checks that styles for a given @reach package are loaded.
  */
-export declare function forwardRefWithAs<Props, ComponentType extends As = "div">(render: ForwardRefWithAsRenderFunction<ComponentType, Props>): ForwardRefExoticComponentWithAs<ComponentType, Props>;
-export declare function memoWithAs<Props, ComponentType extends As = "div">(Component: FunctionComponentWithAs<ComponentType, Props>, propsAreEqual?: (prevProps: Readonly<React.PropsWithChildren<Props>>, nextProps: Readonly<React.PropsWithChildren<Props>>) => boolean): MemoExoticComponentWithAs<ComponentType, Props>;
+export declare function forwardRefWithAs<Props, DefaultComponentType extends As = "div">(render: ForwardRefWithAsRenderFunction<DefaultComponentType, Props>): ForwardRefExoticComponentWithAs<DefaultComponentType, Props>;
+export declare function memoWithAs<Props, DefaultComponentType extends As = "div">(Component: FunctionComponentWithAs<DefaultComponentType, Props>, propsAreEqual?: (prevProps: Readonly<React.PropsWithChildren<Props>>, nextProps: Readonly<React.PropsWithChildren<Props>>) => boolean): MemoExoticComponentWithAs<DefaultComponentType, Props>;
 /**
@@ -106,9 +112,8 @@ * Get the size of the working document minus the scrollbar offset.
 /**
- * Get a computed style value by property, backwards compatible with IE
+ * Get a computed style value by property.
+ *
  * @param element
  * @param styleProp
  */
-export declare function getElementComputedStyle(element: HTMLElement & {
-    currentStyle?: Record<string, string>;
-}, styleProp: string): string | null;
+export declare function getElementComputedStyle(element: Element, styleProp: string): string | null;
 /**
@@ -120,5 +125,8 @@ * Get an element's owner document. Useful when components are used in iframes
  */
-export declare function getOwnerDocument<T extends HTMLElement = HTMLElement>(element: T | null): Document | null;
-export declare function getOwnerWindow<T extends HTMLElement = HTMLElement>(element: T | null): (Window & typeof globalThis) | null;
+export declare function getOwnerDocument<T extends Element>(element: T | null | undefined): Document | null;
 /**
+ * TODO: Remove in 1.0
+ */
+export declare function getOwnerWindow<T extends Element>(element: T | null | undefined): (Window & typeof globalThis) | null;
+/**
  * Get the scrollbar offset distance.
@@ -209,6 +217,9 @@ *
 export declare function useEventCallback<E extends Event | React.SyntheticEvent>(callback: (event: E, ...args: any[]) => void): (event: E, ...args: any[]) => void;
+export declare function useLazyRef<F extends (...args: any[]) => any>(fn: F): React.MutableRefObject<ReturnType<F>>;
 /**
+ * TODO: Remove in 1.0
+ * @alias useStableCallback
  * @param callback
  */
-export declare function useCallbackProp<F extends Function>(callback: F | undefined): F;
+export declare const useCallbackProp: typeof useStableCallback;
 /**
@@ -249,2 +260,8 @@ * Adds a DOM event listener
 /**
+ * Converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop and exposed as a stable function to avoid executing effects when
+ * passed as a dependency.
+ */
+export declare function useStableCallback<T extends (...args: any[]) => any>(callback: T | null | undefined): T;
+/**
  * Call an effect after a component update, skipping the initial mount.
@@ -273,2 +290,2 @@ *
 export declare function wrapEvent<EventType extends React.SyntheticEvent | Event>(theirHandler: ((event: EventType) => any) | undefined, ourHandler: (event: EventType) => any): (event: EventType) => any;
-export { As, AssignableRef, ComponentWithAs, ComponentWithForwardedRef, DistributiveOmit, ElementByTag, ElementTagNameMap, ForwardRefExoticComponentWithAs, FunctionComponentWithAs, MemoExoticComponentWithAs, PropsFromAs, PropsWithAs, SingleOrArray, ThenArg, };
+export { As, AssignableRef, ComponentWithAs, ComponentWithForwardedRef, DistributiveOmit, ElementTagNameMap, ForwardRefExoticComponentWithAs, FunctionComponentWithAs, MemoExoticComponentWithAs, PropsFromAs, PropsWithAs, SingleOrArray, ThenArg, };

dist/types.d.ts

@@ -63,8 +63,8 @@ import * as React from "react";
 export declare type ComponentWithForwardedRef<ElementType extends React.ElementType, ComponentProps> = React.ForwardRefExoticComponent<ComponentProps & React.HTMLProps<React.ElementType<ElementType>> & React.ComponentPropsWithRef<ElementType>>;
-export interface FunctionComponentWithAs<ComponentType extends As, ComponentProps> {
+export interface FunctionComponentWithAs<DefaultComponentType extends As, ComponentProps> {
     /**
      * Inherited from React.FunctionComponent with modifications to support `as`
      */
-    <TT extends As>(props: PropsWithAs<TT, ComponentProps>, context?: any): React.ReactElement<any, any> | null;
-    (props: PropsWithAs<ComponentType, ComponentProps>, context?: any): React.ReactElement<any, any> | null;
+    <ComponentType extends As>(props: PropsWithAs<ComponentType, ComponentProps>, context?: any): React.ReactElement<any, any> | null;
+    (props: PropsWithAs<DefaultComponentType, ComponentProps>, context?: any): React.ReactElement<any, any> | null;
     /**
@@ -74,9 +74,9 @@ * Inherited from React.FunctionComponent
     displayName?: string;
-    propTypes?: React.WeakValidationMap<PropsWithAs<ComponentType, ComponentProps>>;
+    propTypes?: React.WeakValidationMap<PropsWithAs<DefaultComponentType, ComponentProps>>;
     contextTypes?: React.ValidationMap<any>;
-    defaultProps?: Partial<PropsWithAs<ComponentType, ComponentProps>>;
+    defaultProps?: Partial<PropsWithAs<DefaultComponentType, ComponentProps>>;
 }
 export interface ComponentWithAs<ComponentType extends As, ComponentProps> extends FunctionComponentWithAs<ComponentType, ComponentProps> {
 }
-interface ExoticComponentWithAs<ComponentType extends As, ComponentProps> {
+interface ExoticComponentWithAs<DefaultComponentType extends As, ComponentProps> {
     /**
@@ -86,4 +86,6 @@ * **NOTE**: Exotic components are not callable.
      */
-    <TT extends As>(props: PropsWithAs<TT, ComponentProps>): React.ReactElement | null;
-    (props: PropsWithAs<ComponentType, ComponentProps>): React.ReactElement | null;
+    (props: PropsWithAs<DefaultComponentType, ComponentProps>): React.ReactElement | null;
+    <ComponentType extends As>(props: PropsWithAs<ComponentType, ComponentProps> & {
+        as: ComponentType;
+    }): React.ReactElement | null;
     /**
@@ -94,3 +96,3 @@ * Inherited from React.ExoticComponent
 }
-interface NamedExoticComponentWithAs<ComponentType extends As, ComponentProps> extends ExoticComponentWithAs<ComponentType, ComponentProps> {
+interface NamedExoticComponentWithAs<DefaultComponentType extends As, ComponentProps> extends ExoticComponentWithAs<DefaultComponentType, ComponentProps> {
     /**
@@ -101,3 +103,3 @@ * Inherited from React.NamedExoticComponent
 }
-export interface ForwardRefExoticComponentWithAs<ComponentType extends As, ComponentProps> extends NamedExoticComponentWithAs<ComponentType, ComponentProps> {
+export interface ForwardRefExoticComponentWithAs<DefaultComponentType extends As, ComponentProps> extends NamedExoticComponentWithAs<DefaultComponentType, ComponentProps> {
     /**
@@ -108,10 +110,10 @@ * Inherited from React.ForwardRefExoticComponent
      */
-    defaultProps?: Partial<PropsWithAs<ComponentType, ComponentProps>>;
-    propTypes?: React.WeakValidationMap<PropsWithAs<ComponentType, ComponentProps>>;
+    defaultProps?: Partial<PropsWithAs<DefaultComponentType, ComponentProps>>;
+    propTypes?: React.WeakValidationMap<PropsWithAs<DefaultComponentType, ComponentProps>>;
 }
-export interface MemoExoticComponentWithAs<ComponentType extends As, ComponentProps> extends NamedExoticComponentWithAs<ComponentType, ComponentProps> {
-    readonly type: ComponentType extends React.ComponentType ? ComponentType : FunctionComponentWithAs<ComponentType, ComponentProps>;
+export interface MemoExoticComponentWithAs<DefaultComponentType extends As, ComponentProps> extends NamedExoticComponentWithAs<DefaultComponentType, ComponentProps> {
+    readonly type: DefaultComponentType extends React.ComponentType ? DefaultComponentType : FunctionComponentWithAs<DefaultComponentType, ComponentProps>;
 }
-export interface ForwardRefWithAsRenderFunction<ComponentType extends As, ComponentProps = {}> {
-    (props: React.PropsWithChildren<PropsFromAs<ComponentType, ComponentProps>>, ref: ((instance: (ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any) | null) => void) | React.MutableRefObject<(ComponentType extends keyof ElementTagNameMap ? ElementByTag<ComponentType> : any) | null> | null): React.ReactElement | null;
+export interface ForwardRefWithAsRenderFunction<DefaultComponentType extends As, ComponentProps = {}> {
+    (props: React.PropsWithChildren<PropsFromAs<DefaultComponentType, ComponentProps>>, ref: ((instance: (DefaultComponentType extends keyof ElementTagNameMap ? ElementTagNameMap[DefaultComponentType] : any) | null) => void) | React.MutableRefObject<(DefaultComponentType extends keyof ElementTagNameMap ? ElementTagNameMap[DefaultComponentType] : any) | null> | null): React.ReactElement | null;
     displayName?: string;
@@ -128,3 +130,2 @@ /**
 export declare type ElementTagNameMap = HTMLElementTagNameMap & Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>;
-export declare type ElementByTag<TagName extends keyof ElementTagNameMap> = ElementTagNameMap[TagName];
 export {};

dist/utils.cjs.development.js

@@ -6,9 +6,30 @@ 'use strict';
 var React = require('react');
-var warning = require('warning');
+var fbWarning = require('warning');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var warning__default = /*#__PURE__*/_interopDefaultLegacy(warning);
+function _interopNamespace(e) {
+  if (e && e.__esModule) { return e; } else {
+    var n = Object.create(null);
+    if (e) {
+      Object.keys(e).forEach(function (k) {
+        if (k !== 'default') {
+          var d = Object.getOwnPropertyDescriptor(e, k);
+          Object.defineProperty(n, k, d.get ? d : {
+            enumerable: true,
+            get: function () {
+              return e[k];
+            }
+          });
+        }
+      });
+    }
+    n['default'] = e;
+    return n;
+  }
+}
 
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var fbWarning__default = /*#__PURE__*/_interopDefaultLegacy(fbWarning);
+
 /* eslint-disable no-restricted-globals, eqeqeq  */
@@ -44,5 +65,17 @@ /**
 
-var useIsomorphicLayoutEffect = /*#__PURE__*/canUseDOM() ? React__default['default'].useLayoutEffect : React__default['default'].useEffect;
+var useIsomorphicLayoutEffect = /*#__PURE__*/canUseDOM() ? React.useLayoutEffect : React.useEffect;
 var checkedPkgs = {};
 /**
+ * Copy of Facebook's warning package.
+ *
+ * Similar to invariant but only logs a warning if the condition is not met.
+ * This can be used to log issues in development environments in critical paths.
+ * Removing the logging code for production environments will keep the same
+ * logic and follow the same code paths.
+ *
+ * @see https://github.com/BerkeleyTrue/warning/blob/master/warning.js
+ */
+
+var warning = fbWarning__default['default'];
+/**
  * When in dev mode, checks that styles for a given @reach package are loaded.
@@ -53,3 +86,2 @@ *
  */
-// @ts-ignore
 
@@ -134,3 +166,3 @@ exports.checkStyles = noop;
 
-  return React.isValidElement(element) ? React.cloneElement.apply(void 0, [element, props].concat(children)) : element;
+  return React.isValidElement(element) ? React.cloneElement.apply(React__namespace, [element, props].concat(children)) : element;
 }
@@ -153,6 +185,6 @@ function createNamedContext(name, defaultValue) {
 function forwardRefWithAs(render) {
-  return React__default['default'].forwardRef(render);
+  return React.forwardRef(render);
 }
 function memoWithAs(Component, propsAreEqual) {
-  return React__default['default'].memo(Component, propsAreEqual);
+  return React.memo(Component, propsAreEqual);
 }
@@ -166,11 +198,17 @@ /**
 function getDocumentDimensions(element) {
-  if (!canUseDOM()) return {
-    width: 0,
-    height: 0
-  };
-  var doc = element ? getOwnerDocument(element) : document;
-  var win = element ? getOwnerWindow(element) : window;
+  var _ownerDocument$docume, _ownerDocument$docume2;
+
+  var ownerDocument = getOwnerDocument(element);
+  var ownerWindow = ownerDocument.defaultView || window;
+
+  if (!ownerDocument) {
+    return {
+      width: 0,
+      height: 0
+    };
+  }
+
   return {
-    width: doc.documentElement.clientWidth || win.innerWidth,
-    height: doc.documentElement.clientHeight || win.innerHeight
+    width: (_ownerDocument$docume = ownerDocument.documentElement.clientWidth) !== null && _ownerDocument$docume !== void 0 ? _ownerDocument$docume : ownerWindow.innerWidth,
+    height: (_ownerDocument$docume2 = ownerDocument.documentElement.clientHeight) !== null && _ownerDocument$docume2 !== void 0 ? _ownerDocument$docume2 : ownerWindow.innerHeight
   };
@@ -185,14 +223,20 @@ }
 function getScrollPosition(element) {
-  if (!canUseDOM()) return {
-    scrollX: 0,
-    scrollY: 0
-  };
-  var win = element ? getOwnerWindow(element) : window;
+  var ownerDocument = getOwnerDocument(element);
+  var ownerWindow = ownerDocument.defaultView || window;
+
+  if (!ownerDocument) {
+    return {
+      scrollX: 0,
+      scrollY: 0
+    };
+  }
+
   return {
-    scrollX: win.scrollX,
-    scrollY: win.scrollY
+    scrollX: ownerWindow.scrollX,
+    scrollY: ownerWindow.scrollY
   };
 }
 /**
- * Get a computed style value by property, backwards compatible with IE
+ * Get a computed style value by property.
+ *
  * @param element
@@ -203,12 +247,10 @@ * @param styleProp
 function getElementComputedStyle(element, styleProp) {
-  var y = null;
-  var doc = getOwnerDocument(element);
+  var ownerDocument = getOwnerDocument(element);
+  var ownerWindow = (ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.defaultView) || window;
 
-  if (element.currentStyle) {
-    y = element.currentStyle[styleProp];
-  } else if (doc && doc.defaultView && isFunction(doc.defaultView.getComputedStyle)) {
-    y = doc.defaultView.getComputedStyle(element, null).getPropertyValue(styleProp);
+  if (ownerWindow) {
+    return ownerWindow.getComputedStyle(element, null).getPropertyValue(styleProp);
   }
 
-  return y;
+  return null;
 }
@@ -223,7 +265,11 @@ /**
 function getOwnerDocument(element) {
-  return element && element.ownerDocument ? element.ownerDocument : canUseDOM() ? document : null;
+  return canUseDOM() ? element ? element.ownerDocument : document : null;
 }
+/**
+ * TODO: Remove in 1.0
+ */
+
 function getOwnerWindow(element) {
-  var doc = element ? getOwnerDocument(element) : null;
-  return doc ? doc.defaultView || window : null;
+  var ownerDocument = getOwnerDocument(element);
+  return ownerDocument ? ownerDocument.defaultView || window : null;
 }
@@ -332,5 +378,5 @@ /**
 
-  var _useState = React.useState(defaultValue),
-      valueState = _useState[0],
-      setValue = _useState[1];
+  var _React$useState = React.useState(defaultValue),
+      valueState = _React$useState[0],
+      setValue = _React$useState[1];
 
@@ -403,3 +449,3 @@ var set = React.useCallback(function (n) {
 function useConstant(fn) {
-  var ref = React__default['default'].useRef();
+  var ref = React.useRef();
 
@@ -431,15 +477,20 @@ if (!ref.current) {
 }
+function useLazyRef(fn) {
+  var ref = React.useRef({
+    __internalSet: true
+  });
+
+  if (ref.current && ref.current.__internalSet === true) {
+    ref.current = fn();
+  }
+
+  return ref;
+}
 /**
+ * TODO: Remove in 1.0
+ * @alias useStableCallback
  * @param callback
  */
 
-function useCallbackProp(callback) {
-  var ref = React.useRef(callback);
-  React.useEffect(function () {
-    ref.current = callback;
-  });
-  return React.useCallback(function () {
-    return ref.current && ref.current.apply(ref, arguments);
-  }, []);
-}
+var useCallbackProp = useStableCallback;
 /**
@@ -526,4 +577,4 @@ * Adds a DOM event listener
 function useForceUpdate() {
-  var _useState2 = React.useState(Object.create(null)),
-      dispatch = _useState2[1];
+  var _React$useState2 = React.useState(Object.create(null)),
+      dispatch = _React$useState2[1];
 
@@ -575,2 +626,18 @@ return React.useCallback(function () {
 /**
+ * Converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop and exposed as a stable function to avoid executing effects when
+ * passed as a dependency.
+ */
+
+function useStableCallback(callback) {
+  var callbackRef = React.useRef(callback);
+  React.useEffect(function () {
+    callbackRef.current = callback;
+  }); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  return React.useCallback(function () {
+    callbackRef.current && callbackRef.current.apply(callbackRef, arguments);
+  }, []);
+}
+/**
  * Call an effect after a component update, skipping the initial mount.
@@ -640,8 +707,2 @@ *
 
-Object.defineProperty(exports, 'warning', {
-  enumerable: true,
-  get: function () {
-    return warning__default['default'];
-  }
-});
 exports.assignRef = assignRef;
@@ -678,5 +739,8 @@ exports.boolOrBoolString = boolOrBoolString;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
+exports.useLazyRef = useLazyRef;
 exports.usePrevious = usePrevious;
+exports.useStableCallback = useStableCallback;
 exports.useUpdateEffect = useUpdateEffect;
+exports.warning = warning;
 exports.wrapEvent = wrapEvent;
 //# sourceMappingURL=utils.cjs.development.js.map

dist/utils.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("warning");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e),u=n(t),o=l()?r.default.useLayoutEffect:r.default.useEffect,c=w,i="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();function f(e,t){if(null!=e)if(p(e))e(t);else try{e.current=t}catch(n){throw new Error('Cannot assign value "'+t+'" to ref "'+e+'"')}}function l(){return!("undefined"==typeof window||!window.document||!window.document.createElement)}function s(e){return e&&e.ownerDocument?e.ownerDocument:l()?document:null}function a(e){var t=e?s(e):null;return t?t.defaultView||window:null}function d(e){return"boolean"==typeof e}function p(e){return!(!e||"[object Function]"!={}.toString.call(e))}function w(){}var v=w,m=w,x=w;Object.defineProperty(exports,"warning",{enumerable:!0,get:function(){return u.default}}),exports.assignRef=f,exports.boolOrBoolString=function(e){return"true"===e||!!d(e)&&e},exports.canUseDOM=l,exports.checkStyles=c,exports.cloneValidElement=function(t,n){for(var r=arguments.length,u=new Array(r>2?r-2:0),o=2;o<r;o++)u[o-2]=arguments[o];return e.isValidElement(t)?e.cloneElement.apply(void 0,[t,n].concat(u)):t},exports.createNamedContext=function(t,n){var r=e.createContext(n);return r.displayName=t,r},exports.forwardRefWithAs=function(e){return r.default.forwardRef(e)},exports.getDocumentDimensions=function(e){if(!l())return{width:0,height:0};var t=e?s(e):document,n=e?a(e):window;return{width:t.documentElement.clientWidth||n.innerWidth,height:t.documentElement.clientHeight||n.innerHeight}},exports.getElementComputedStyle=function(e,t){var n=null,r=s(e);return e.currentStyle?n=e.currentStyle[t]:r&&r.defaultView&&p(r.defaultView.getComputedStyle)&&(n=r.defaultView.getComputedStyle(e,null).getPropertyValue(t)),n},exports.getOwnerDocument=s,exports.getOwnerWindow=a,exports.getScrollPosition=function(e){if(!l())return{scrollX:0,scrollY:0};var t=e?a(e):window;return{scrollX:t.scrollX,scrollY:t.scrollY}},exports.getScrollbarOffset=function(){try{if(window.innerWidth>document.documentElement.clientWidth)return window.innerWidth-document.documentElement.clientWidth}catch(e){}return 0},exports.isBoolean=d,exports.isFunction=p,exports.isNumber=function(e){return"number"==typeof e&&!isNaN(e)},exports.isRightClick=function(e){return"which"in e?3===e.which:"button"in e&&2===e.button},exports.isString=function(e){return"string"==typeof e},exports.makeId=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.filter((function(e){return null!=e})).join("--")},exports.memoWithAs=function(e,t){return r.default.memo(e,t)},exports.noop=w,exports.ponyfillGlobal=i,exports.stateToAttributeString=function(e){return String(e).replace(/([\s_]+)/g,"-").toLowerCase()},exports.useCallbackProp=function(t){var n=e.useRef(t);return e.useEffect((function(){n.current=t})),e.useCallback((function(){return n.current&&n.current.apply(n,arguments)}),[])},exports.useCheckStyles=m,exports.useConstant=function(e){var t=r.default.useRef();return t.current||(t.current={v:e()}),t.current.v},exports.useControlledState=function(t,n){var r=e.useRef(null!=t),u=e.useState(n),o=u[0],c=u[1],i=e.useCallback((function(e){r.current||c(e)}),[]);return[r.current?t:o,i]},exports.useControlledSwitchWarning=v,exports.useEventCallback=function(t){var n=e.useRef(t);return o((function(){n.current=t})),e.useCallback((function(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),u=1;u<t;u++)r[u-1]=arguments[u];return n.current.apply(n,[e].concat(r))}),[])},exports.useEventListener=function(t,n,r){void 0===r&&(r=window);var u=e.useRef(n);e.useEffect((function(){u.current=n}),[n]),e.useEffect((function(){if(r&&r.addEventListener)return r.addEventListener(t,e),function(){r.removeEventListener(t,e)};function e(e){u.current(e)}}),[t,r])},exports.useFocusChange=function(t,n,r){void 0===t&&(t=console.log),void 0===n&&(n="focus"),void 0===r&&(r=document);var u=e.useRef(r.activeElement);e.useEffect((function(){function e(e){u.current!==r.activeElement&&(t(r.activeElement,u.current,e),u.current=r.activeElement)}return u.current=r.activeElement,r.addEventListener(n,e,!0),function(){r.removeEventListener(n,e)}}),[n,t,r])},exports.useForceUpdate=function(){var t=e.useState(Object.create(null))[1];return e.useCallback((function(){t(Object.create(null))}),[])},exports.useForkedRef=function(){for(var t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];return e.useMemo((function(){return n.every((function(e){return null==e}))?null:function(e){n.forEach((function(t){f(t,e)}))}}),[].concat(n))},exports.useIsomorphicLayoutEffect=o,exports.usePrevious=function(t){var n=e.useRef(null);return e.useEffect((function(){n.current=t}),[t]),n.current},exports.useStateLogger=x,exports.useUpdateEffect=function(t,n){var r=e.useRef(!1);e.useEffect((function(){r.current?t():r.current=!0}),n)},exports.wrapEvent=function(e,t){return function(n){if(e&&e(n),!n.defaultPrevented)return t(n)}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("warning");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,t}var u=r(e),o=n(t),c=a()?e.useLayoutEffect:e.useEffect,i=o.default,f=w,l="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();function s(e,t){if(null!=e)if(v(e))e(t);else try{e.current=t}catch(n){throw new Error('Cannot assign value "'+t+'" to ref "'+e+'"')}}function a(){return!("undefined"==typeof window||!window.document||!window.document.createElement)}function d(e){return a()?e?e.ownerDocument:document:null}function p(e){return"boolean"==typeof e}function v(e){return!(!e||"[object Function]"!={}.toString.call(e))}function w(){}var m=w,x=w,h=g;function g(t){var n=e.useRef(t);return e.useEffect((function(){n.current=t})),e.useCallback((function(){n.current&&n.current.apply(n,arguments)}),[])}var E=w;exports.assignRef=s,exports.boolOrBoolString=function(e){return"true"===e||!!p(e)&&e},exports.canUseDOM=a,exports.checkStyles=f,exports.cloneValidElement=function(t,n){for(var r=arguments.length,o=new Array(r>2?r-2:0),c=2;c<r;c++)o[c-2]=arguments[c];return e.isValidElement(t)?e.cloneElement.apply(u,[t,n].concat(o)):t},exports.createNamedContext=function(t,n){var r=e.createContext(n);return r.displayName=t,r},exports.forwardRefWithAs=function(t){return e.forwardRef(t)},exports.getDocumentDimensions=function(e){var t,n,r=d(e),u=r.defaultView||window;return r?{width:null!==(t=r.documentElement.clientWidth)&&void 0!==t?t:u.innerWidth,height:null!==(n=r.documentElement.clientHeight)&&void 0!==n?n:u.innerHeight}:{width:0,height:0}},exports.getElementComputedStyle=function(e,t){var n=d(e),r=(null==n?void 0:n.defaultView)||window;return r?r.getComputedStyle(e,null).getPropertyValue(t):null},exports.getOwnerDocument=d,exports.getOwnerWindow=function(e){var t=d(e);return t?t.defaultView||window:null},exports.getScrollPosition=function(e){var t=d(e),n=t.defaultView||window;return t?{scrollX:n.scrollX,scrollY:n.scrollY}:{scrollX:0,scrollY:0}},exports.getScrollbarOffset=function(){try{if(window.innerWidth>document.documentElement.clientWidth)return window.innerWidth-document.documentElement.clientWidth}catch(e){}return 0},exports.isBoolean=p,exports.isFunction=v,exports.isNumber=function(e){return"number"==typeof e&&!isNaN(e)},exports.isRightClick=function(e){return"which"in e?3===e.which:"button"in e&&2===e.button},exports.isString=function(e){return"string"==typeof e},exports.makeId=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.filter((function(e){return null!=e})).join("--")},exports.memoWithAs=function(t,n){return e.memo(t,n)},exports.noop=w,exports.ponyfillGlobal=l,exports.stateToAttributeString=function(e){return String(e).replace(/([\s_]+)/g,"-").toLowerCase()},exports.useCallbackProp=h,exports.useCheckStyles=x,exports.useConstant=function(t){var n=e.useRef();return n.current||(n.current={v:t()}),n.current.v},exports.useControlledState=function(t,n){var r=e.useRef(null!=t),u=e.useState(n),o=u[0],c=u[1],i=e.useCallback((function(e){r.current||c(e)}),[]);return[r.current?t:o,i]},exports.useControlledSwitchWarning=m,exports.useEventCallback=function(t){var n=e.useRef(t);return c((function(){n.current=t})),e.useCallback((function(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),u=1;u<t;u++)r[u-1]=arguments[u];return n.current.apply(n,[e].concat(r))}),[])},exports.useEventListener=function(t,n,r){void 0===r&&(r=window);var u=e.useRef(n);e.useEffect((function(){u.current=n}),[n]),e.useEffect((function(){if(r&&r.addEventListener)return r.addEventListener(t,e),function(){r.removeEventListener(t,e)};function e(e){u.current(e)}}),[t,r])},exports.useFocusChange=function(t,n,r){void 0===t&&(t=console.log),void 0===n&&(n="focus"),void 0===r&&(r=document);var u=e.useRef(r.activeElement);e.useEffect((function(){function e(e){u.current!==r.activeElement&&(t(r.activeElement,u.current,e),u.current=r.activeElement)}return u.current=r.activeElement,r.addEventListener(n,e,!0),function(){r.removeEventListener(n,e)}}),[n,t,r])},exports.useForceUpdate=function(){var t=e.useState(Object.create(null))[1];return e.useCallback((function(){t(Object.create(null))}),[])},exports.useForkedRef=function(){for(var t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];return e.useMemo((function(){return n.every((function(e){return null==e}))?null:function(e){n.forEach((function(t){s(t,e)}))}}),[].concat(n))},exports.useIsomorphicLayoutEffect=c,exports.useLazyRef=function(t){var n=e.useRef({__internalSet:!0});return n.current&&!0===n.current.__internalSet&&(n.current=t()),n},exports.usePrevious=function(t){var n=e.useRef(null);return e.useEffect((function(){n.current=t}),[t]),n.current},exports.useStableCallback=g,exports.useStateLogger=E,exports.useUpdateEffect=function(t,n){var r=e.useRef(!1);e.useEffect((function(){r.current?t():r.current=!0}),n)},exports.warning=i,exports.wrapEvent=function(e,t){return function(n){if(e&&e(n),!n.defaultPrevented)return t(n)}};
 //# sourceMappingURL=utils.cjs.production.min.js.map

dist/utils.esm.js

@@ -1,3 +0,4 @@
-import React, { isValidElement, cloneElement, createContext, useRef, useState, useCallback, useEffect, useMemo } from 'react';
-export { default as warning } from 'warning';
+import * as React from 'react';
+import { useLayoutEffect, useEffect, isValidElement, cloneElement, createContext, forwardRef, memo, useRef, useState, useCallback, useMemo } from 'react';
+import fbWarning from 'warning';
 
@@ -34,5 +35,17 @@ /* eslint-disable no-restricted-globals, eqeqeq  */
 
-var useIsomorphicLayoutEffect = /*#__PURE__*/canUseDOM() ? React.useLayoutEffect : React.useEffect;
+var useIsomorphicLayoutEffect = /*#__PURE__*/canUseDOM() ? useLayoutEffect : useEffect;
 var checkedPkgs = {};
 /**
+ * Copy of Facebook's warning package.
+ *
+ * Similar to invariant but only logs a warning if the condition is not met.
+ * This can be used to log issues in development environments in critical paths.
+ * Removing the logging code for production environments will keep the same
+ * logic and follow the same code paths.
+ *
+ * @see https://github.com/BerkeleyTrue/warning/blob/master/warning.js
+ */
+
+var warning = fbWarning;
+/**
  * When in dev mode, checks that styles for a given @reach package are loaded.
@@ -43,3 +56,2 @@ *
  */
-// @ts-ignore
 
@@ -124,3 +136,3 @@ var checkStyles = noop;
 
-  return isValidElement(element) ? cloneElement.apply(void 0, [element, props].concat(children)) : element;
+  return isValidElement(element) ? cloneElement.apply(React, [element, props].concat(children)) : element;
 }
@@ -143,6 +155,6 @@ function createNamedContext(name, defaultValue) {
 function forwardRefWithAs(render) {
-  return React.forwardRef(render);
+  return forwardRef(render);
 }
 function memoWithAs(Component, propsAreEqual) {
-  return React.memo(Component, propsAreEqual);
+  return memo(Component, propsAreEqual);
 }
@@ -156,11 +168,17 @@ /**
 function getDocumentDimensions(element) {
-  if (!canUseDOM()) return {
-    width: 0,
-    height: 0
-  };
-  var doc = element ? getOwnerDocument(element) : document;
-  var win = element ? getOwnerWindow(element) : window;
+  var _ownerDocument$docume, _ownerDocument$docume2;
+
+  var ownerDocument = getOwnerDocument(element);
+  var ownerWindow = ownerDocument.defaultView || window;
+
+  if (!ownerDocument) {
+    return {
+      width: 0,
+      height: 0
+    };
+  }
+
   return {
-    width: doc.documentElement.clientWidth || win.innerWidth,
-    height: doc.documentElement.clientHeight || win.innerHeight
+    width: (_ownerDocument$docume = ownerDocument.documentElement.clientWidth) !== null && _ownerDocument$docume !== void 0 ? _ownerDocument$docume : ownerWindow.innerWidth,
+    height: (_ownerDocument$docume2 = ownerDocument.documentElement.clientHeight) !== null && _ownerDocument$docume2 !== void 0 ? _ownerDocument$docume2 : ownerWindow.innerHeight
   };
@@ -175,14 +193,20 @@ }
 function getScrollPosition(element) {
-  if (!canUseDOM()) return {
-    scrollX: 0,
-    scrollY: 0
-  };
-  var win = element ? getOwnerWindow(element) : window;
+  var ownerDocument = getOwnerDocument(element);
+  var ownerWindow = ownerDocument.defaultView || window;
+
+  if (!ownerDocument) {
+    return {
+      scrollX: 0,
+      scrollY: 0
+    };
+  }
+
   return {
-    scrollX: win.scrollX,
-    scrollY: win.scrollY
+    scrollX: ownerWindow.scrollX,
+    scrollY: ownerWindow.scrollY
   };
 }
 /**
- * Get a computed style value by property, backwards compatible with IE
+ * Get a computed style value by property.
+ *
  * @param element
@@ -193,12 +217,10 @@ * @param styleProp
 function getElementComputedStyle(element, styleProp) {
-  var y = null;
-  var doc = getOwnerDocument(element);
+  var ownerDocument = getOwnerDocument(element);
+  var ownerWindow = (ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.defaultView) || window;
 
-  if (element.currentStyle) {
-    y = element.currentStyle[styleProp];
-  } else if (doc && doc.defaultView && isFunction(doc.defaultView.getComputedStyle)) {
-    y = doc.defaultView.getComputedStyle(element, null).getPropertyValue(styleProp);
+  if (ownerWindow) {
+    return ownerWindow.getComputedStyle(element, null).getPropertyValue(styleProp);
   }
 
-  return y;
+  return null;
 }
@@ -213,7 +235,11 @@ /**
 function getOwnerDocument(element) {
-  return element && element.ownerDocument ? element.ownerDocument : canUseDOM() ? document : null;
+  return canUseDOM() ? element ? element.ownerDocument : document : null;
 }
+/**
+ * TODO: Remove in 1.0
+ */
+
 function getOwnerWindow(element) {
-  var doc = element ? getOwnerDocument(element) : null;
-  return doc ? doc.defaultView || window : null;
+  var ownerDocument = getOwnerDocument(element);
+  return ownerDocument ? ownerDocument.defaultView || window : null;
 }
@@ -322,5 +348,5 @@ /**
 
-  var _useState = useState(defaultValue),
-      valueState = _useState[0],
-      setValue = _useState[1];
+  var _React$useState = useState(defaultValue),
+      valueState = _React$useState[0],
+      setValue = _React$useState[1];
 
@@ -393,3 +419,3 @@ var set = useCallback(function (n) {
 function useConstant(fn) {
-  var ref = React.useRef();
+  var ref = useRef();
 
@@ -421,15 +447,20 @@ if (!ref.current) {
 }
+function useLazyRef(fn) {
+  var ref = useRef({
+    __internalSet: true
+  });
+
+  if (ref.current && ref.current.__internalSet === true) {
+    ref.current = fn();
+  }
+
+  return ref;
+}
 /**
+ * TODO: Remove in 1.0
+ * @alias useStableCallback
  * @param callback
  */
 
-function useCallbackProp(callback) {
-  var ref = useRef(callback);
-  useEffect(function () {
-    ref.current = callback;
-  });
-  return useCallback(function () {
-    return ref.current && ref.current.apply(ref, arguments);
-  }, []);
-}
+var useCallbackProp = useStableCallback;
 /**
@@ -516,4 +547,4 @@ * Adds a DOM event listener
 function useForceUpdate() {
-  var _useState2 = useState(Object.create(null)),
-      dispatch = _useState2[1];
+  var _React$useState2 = useState(Object.create(null)),
+      dispatch = _React$useState2[1];
 
@@ -565,2 +596,18 @@ return useCallback(function () {
 /**
+ * Converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop and exposed as a stable function to avoid executing effects when
+ * passed as a dependency.
+ */
+
+function useStableCallback(callback) {
+  var callbackRef = useRef(callback);
+  useEffect(function () {
+    callbackRef.current = callback;
+  }); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  return useCallback(function () {
+    callbackRef.current && callbackRef.current.apply(callbackRef, arguments);
+  }, []);
+}
+/**
  * Call an effect after a component update, skipping the initial mount.
@@ -630,3 +677,3 @@ *
 
-export { assignRef, boolOrBoolString, canUseDOM, checkStyles, cloneValidElement, createNamedContext, forwardRefWithAs, getDocumentDimensions, getElementComputedStyle, getOwnerDocument, getOwnerWindow, getScrollPosition, getScrollbarOffset, isBoolean, isFunction, isNumber, isRightClick, isString, makeId, memoWithAs, noop, ponyfillGlobal, stateToAttributeString, useCallbackProp, useCheckStyles, useConstant, useControlledState, useControlledSwitchWarning, useEventCallback, useEventListener, useFocusChange, useForceUpdate, useForkedRef, useIsomorphicLayoutEffect, usePrevious, useStateLogger, useUpdateEffect, wrapEvent };
+export { assignRef, boolOrBoolString, canUseDOM, checkStyles, cloneValidElement, createNamedContext, forwardRefWithAs, getDocumentDimensions, getElementComputedStyle, getOwnerDocument, getOwnerWindow, getScrollPosition, getScrollbarOffset, isBoolean, isFunction, isNumber, isRightClick, isString, makeId, memoWithAs, noop, ponyfillGlobal, stateToAttributeString, useCallbackProp, useCheckStyles, useConstant, useControlledState, useControlledSwitchWarning, useEventCallback, useEventListener, useFocusChange, useForceUpdate, useForkedRef, useIsomorphicLayoutEffect, useLazyRef, usePrevious, useStableCallback, useStateLogger, useUpdateEffect, warning, wrapEvent };
 //# sourceMappingURL=utils.esm.js.map

package.json

 {
   "name": "@reach/utils",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "description": "Internal, shared utilities for Reach UI.",
@@ -31,3 +31,3 @@ "author": "React Training <[e-mail]>",
   },
-  "gitHead": "2aa6f03c5eed8c2b7525a29db1c69fe6bc540e5d"
+  "gitHead": "09eeccda6e4597d21545982c53db5c42beddce6b"
 }

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

159907

increased by5.04%

Lines of code

1674

increased by6.83%

No dependency changes