🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@reach/utils

Package Overview
Dependencies
Maintainers
4
Versions
53
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@reach/utils - npm Package Compare versions

Comparing version

0.11.2
to
0.12.0

45

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, };

35

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 {};

174

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

2

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

145

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

4

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 <hello@reacttraining.com>",

},
"gitHead": "2aa6f03c5eed8c2b7525a29db1c69fe6bc540e5d"
"gitHead": "09eeccda6e4597d21545982c53db5c42beddce6b"
}
dist/utils.cjs.development.js.map

Sorry, the diff of this file is not supported yet

dist/utils.cjs.production.min.js.map

Sorry, the diff of this file is not supported yet

dist/utils.esm.js.map

Sorry, the diff of this file is not supported yet