Socket
Socket
Sign inDemoInstall

@reach/utils

Package Overview
Dependencies
Maintainers
4
Versions
53
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@reach/utils - npm Package Compare versions

Comparing version 0.10.2 to 0.10.3

17

dist/index.d.ts

@@ -181,6 +181,6 @@ import React from "react";

*
* @param controlPropValue
* @param controlledValue
* @param defaultValue
*/
export declare function useControlledState<T = any>(controlPropValue: T | undefined, defaultValue: T): [T, React.Dispatch<React.SetStateAction<T>>];
export declare function useControlledState<T = any>(controlledValue: T | undefined, defaultValue: T): [T, React.Dispatch<React.SetStateAction<T>>];
/**

@@ -193,8 +193,10 @@ * Logs a warning in dev mode when a component switches from controlled to

*
* @param controlPropValue
* @param controlPropName
* @param controlledValue
* @param controlledPropName
* @param componentName
*/
export declare function useControlledSwitchWarning(controlPropValue: any, controlPropName: string, componentName: string): void;
export declare function useCheckStyles(pkg: string): void;
declare let useControlledSwitchWarning: (controlledValue: any, controlledPropName: string, componentName: string) => void;
export { useControlledSwitchWarning };
declare let useCheckStyles: (packageName: string) => void;
export { useCheckStyles };
/**

@@ -256,3 +258,4 @@ * React hook for creating a value exactly once.

*/
export declare function useStateLogger(state: string, DEBUG?: boolean): void;
declare let useStateLogger: (state: string, DEBUG: boolean) => void;
export { useStateLogger };
/**

@@ -259,0 +262,0 @@ * Wraps a lib-defined event handler and a user-defined event handler, returning

@@ -11,3 +11,3 @@ 'use strict';

/* eslint-disable no-restricted-globals, eqeqeq, */
/* eslint-disable no-restricted-globals, eqeqeq */
/**

@@ -52,5 +52,3 @@ * React currently throws a warning when using useLayoutEffect on the server.

exports.checkStyles = function checkStyles(packageName) {
return void packageName;
};
exports.checkStyles = noop;

@@ -320,8 +318,8 @@ {

*
* @param controlPropValue
* @param controlledValue
* @param defaultValue
*/
function useControlledState(controlPropValue, defaultValue) {
var isControlled = React.useRef(controlPropValue != null);
function useControlledState(controlledValue, defaultValue) {
var controlledRef = React.useRef(controlledValue != null);

@@ -333,7 +331,7 @@ var _useState = React.useState(defaultValue),

var set = React.useCallback(function (n) {
if (!isControlled.current) {
if (!controlledRef.current) {
setValue(n);
}
}, []);
return [isControlled.current ? controlPropValue : valueState, set];
return [controlledRef.current ? controlledValue : valueState, set];
}

@@ -347,34 +345,48 @@ /**

*
* @param controlPropValue
* @param controlPropName
* @param controlledValue
* @param controlledPropName
* @param componentName
*/
function useControlledSwitchWarning(controlPropValue, controlPropName, componentName) {
/*
* Determine whether or not the component is controlled and warn the developer
* if this changes unexpectedly.
*/
var isControlled = controlPropValue != null;
exports.useControlledSwitchWarning = noop;
var _useRef = React.useRef(isControlled),
wasControlled = _useRef.current;
{
exports.useControlledSwitchWarning = function useControlledSwitchWarning(controlledValue, controlledPropName, componentName) {
var controlledRef = React.useRef(controlledValue != null);
var nameCache = React.useRef({
componentName: componentName,
controlledPropName: controlledPropName
});
React.useEffect(function () {
nameCache.current = {
componentName: componentName,
controlledPropName: controlledPropName
};
}, [componentName, controlledPropName]);
React.useEffect(function () {
var wasControlled = controlledRef.current;
var _nameCache$current = nameCache.current,
componentName = _nameCache$current.componentName,
controlledPropName = _nameCache$current.controlledPropName;
var isControlled = controlledValue != null;
var effect = noop;
if (wasControlled !== isControlled) {
console.error("A component is changing an " + (wasControlled ? "" : "un") + "controlled `" + controlledPropName + "` state of " + componentName + " to be " + (wasControlled ? "un" : "") + "controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled " + componentName + " element for the lifetime of the component.\nMore info: https://fb.me/react-controlled-components");
}
}, [controlledValue]);
};
}
exports.useCheckStyles = noop;
{
effect = function effect() {
warning(!(!isControlled && wasControlled), "`" + componentName + "` is changing from uncontrolled to be controlled. Reach UI components should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled `" + componentName + "` for the lifetime of the component. Check the `" + controlPropName + "` prop.") ;
warning(!(!isControlled && wasControlled), "`" + componentName + "` is changing from controlled to be uncontrolled. Reach UI components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled `" + componentName + "` for the lifetime of the component. Check the `" + controlPropName + "` prop.") ;
};
}
React.useEffect(effect, [componentName, controlPropName, isControlled]);
{
exports.useCheckStyles = function useCheckStyles(pkg) {
var name = React.useRef(pkg);
React.useEffect(function () {
return void (name.current = pkg);
}, [pkg]);
React.useEffect(function () {
return exports.checkStyles(name.current);
}, []);
};
}
function useCheckStyles(pkg) {
// eslint-disable-next-line react-hooks/exhaustive-deps
React.useEffect(function () {
return exports.checkStyles(pkg);
}, []);
}
/**

@@ -567,20 +579,22 @@ * React hook for creating a value exactly once.

function useStateLogger(state, DEBUG) {
if (DEBUG === void 0) {
DEBUG = false;
}
exports.useStateLogger = noop;
var effect = noop;
{
exports.useStateLogger = function useStateLogger(state, DEBUG) {
if (DEBUG === void 0) {
DEBUG = false;
}
{
if (DEBUG) {
effect = function effect() {
var debugRef = React.useRef(DEBUG);
React.useEffect(function () {
debugRef.current = DEBUG;
}, [DEBUG]);
React.useEffect(function () {
if (debugRef.current) {
console.group("State Updated");
console.log("%c" + state, "font-weight: normal; font-size: 120%; font-style: italic;");
console.groupEnd();
};
}
}
React.useEffect(effect, [state]);
}
}, [state]);
};
}

@@ -629,6 +643,4 @@ /**

exports.useCallbackProp = useCallbackProp;
exports.useCheckStyles = useCheckStyles;
exports.useConstant = useConstant;
exports.useControlledState = useControlledState;
exports.useControlledSwitchWarning = useControlledSwitchWarning;
exports.useEventCallback = useEventCallback;

@@ -640,5 +652,4 @@ exports.useEventListener = useEventListener;

exports.usePrevious = usePrevious;
exports.useStateLogger = useStateLogger;
exports.useUpdateEffect = useUpdateEffect;
exports.wrapEvent = wrapEvent;
//# sourceMappingURL=utils.cjs.development.js.map

@@ -1,2 +0,2 @@

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

@@ -45,5 +44,3 @@ * React currently throws a warning when using useLayoutEffect on the server.

var checkStyles = function checkStyles(packageName) {
return void packageName;
};
var checkStyles = noop;

@@ -313,8 +310,8 @@ if (process.env.NODE_ENV !== "production") {

*
* @param controlPropValue
* @param controlledValue
* @param defaultValue
*/
function useControlledState(controlPropValue, defaultValue) {
var isControlled = useRef(controlPropValue != null);
function useControlledState(controlledValue, defaultValue) {
var controlledRef = useRef(controlledValue != null);

@@ -326,7 +323,7 @@ var _useState = useState(defaultValue),

var set = useCallback(function (n) {
if (!isControlled.current) {
if (!controlledRef.current) {
setValue(n);
}
}, []);
return [isControlled.current ? controlPropValue : valueState, set];
return [controlledRef.current ? controlledValue : valueState, set];
}

@@ -340,34 +337,48 @@ /**

*
* @param controlPropValue
* @param controlPropName
* @param controlledValue
* @param controlledPropName
* @param componentName
*/
function useControlledSwitchWarning(controlPropValue, controlPropName, componentName) {
/*
* Determine whether or not the component is controlled and warn the developer
* if this changes unexpectedly.
*/
var isControlled = controlPropValue != null;
var useControlledSwitchWarning = noop;
var _useRef = useRef(isControlled),
wasControlled = _useRef.current;
if (process.env.NODE_ENV !== "production") {
useControlledSwitchWarning = function useControlledSwitchWarning(controlledValue, controlledPropName, componentName) {
var controlledRef = useRef(controlledValue != null);
var nameCache = useRef({
componentName: componentName,
controlledPropName: controlledPropName
});
useEffect(function () {
nameCache.current = {
componentName: componentName,
controlledPropName: controlledPropName
};
}, [componentName, controlledPropName]);
useEffect(function () {
var wasControlled = controlledRef.current;
var _nameCache$current = nameCache.current,
componentName = _nameCache$current.componentName,
controlledPropName = _nameCache$current.controlledPropName;
var isControlled = controlledValue != null;
var effect = noop;
if (wasControlled !== isControlled) {
console.error("A component is changing an " + (wasControlled ? "" : "un") + "controlled `" + controlledPropName + "` state of " + componentName + " to be " + (wasControlled ? "un" : "") + "controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled " + componentName + " element for the lifetime of the component.\nMore info: https://fb.me/react-controlled-components");
}
}, [controlledValue]);
};
}
var useCheckStyles = noop;
if (process.env.NODE_ENV !== "production") {
effect = function effect() {
process.env.NODE_ENV !== "production" ? warning(!(!isControlled && wasControlled), "`" + componentName + "` is changing from uncontrolled to be controlled. Reach UI components should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled `" + componentName + "` for the lifetime of the component. Check the `" + controlPropName + "` prop.") : void 0;
process.env.NODE_ENV !== "production" ? warning(!(!isControlled && wasControlled), "`" + componentName + "` is changing from controlled to be uncontrolled. Reach UI components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled `" + componentName + "` for the lifetime of the component. Check the `" + controlPropName + "` prop.") : void 0;
};
}
useEffect(effect, [componentName, controlPropName, isControlled]);
if (process.env.NODE_ENV !== "production") {
useCheckStyles = function useCheckStyles(pkg) {
var name = useRef(pkg);
useEffect(function () {
return void (name.current = pkg);
}, [pkg]);
useEffect(function () {
return checkStyles(name.current);
}, []);
};
}
function useCheckStyles(pkg) {
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(function () {
return checkStyles(pkg);
}, []);
}
/**

@@ -560,20 +571,22 @@ * React hook for creating a value exactly once.

function useStateLogger(state, DEBUG) {
if (DEBUG === void 0) {
DEBUG = false;
}
var useStateLogger = noop;
var effect = noop;
if (process.env.NODE_ENV !== "production") {
useStateLogger = function useStateLogger(state, DEBUG) {
if (DEBUG === void 0) {
DEBUG = false;
}
if (process.env.NODE_ENV !== "production") {
if (DEBUG) {
effect = function effect() {
var debugRef = useRef(DEBUG);
useEffect(function () {
debugRef.current = DEBUG;
}, [DEBUG]);
useEffect(function () {
if (debugRef.current) {
console.group("State Updated");
console.log("%c" + state, "font-weight: normal; font-size: 120%; font-style: italic;");
console.groupEnd();
};
}
}
useEffect(effect, [state]);
}
}, [state]);
};
}

@@ -580,0 +593,0 @@ /**

{
"name": "@reach/utils",
"version": "0.10.2",
"version": "0.10.3",
"description": "Internal, shared utilities for Reach UI.",

@@ -31,3 +31,3 @@ "author": "React Training <hello@reacttraining.com>",

},
"gitHead": "9e4b9adab7fd3085b1fb4b54882a2231308b7416"
"gitHead": "fd32b2b31a3e50265b0c274654a5e4105847d18e"
}

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc