@reach/utils - npm Package Compare versions

Comparing version 0.9.0 to 0.10.0

dist/index.d.ts

 import React from "react";
+import warning from "warning";
 import { As, AssignableRef, ComponentWithAs, ComponentWithForwardedRef, DistributiveOmit, PropsFromAs, PropsWithAs, SingleOrArray, ThenArg } from "./types";
@@ -33,2 +34,6 @@ /**
 /**
+ * Copy og Facebook's warning package.
+ */
+export { warning };
+/**
  * When in dev mode, checks that styles for a given @reach package are loaded.
@@ -84,3 +89,3 @@ *
  */
-export declare function forwardRefWithAs<Props, ComponentType extends As>(comp: (props: PropsFromAs<ComponentType, Props>, ref: React.RefObject<any>) => React.ReactElement | null): ComponentWithAs<ComponentType, Props>;
+export declare function forwardRefWithAs<Props, ComponentType extends As = "div">(comp: (props: PropsFromAs<ComponentType, Props>, ref: React.RefObject<any>) => React.ReactElement | null): ComponentWithAs<ComponentType, Props>;
 /**
@@ -153,2 +158,11 @@ * Get a computed style value by property, backwards compatible with IE
 /**
+ * Check if a component is controlled or uncontrolled and return the correct
+ * state value and setter accordingly. If the component state is controlled by
+ * the app, the setter is a noop.
+ *
+ * @param controlPropValue
+ * @param defaultValue
+ */
+export declare function useControlledState<T = any>(controlPropValue: T | undefined, defaultValue: T): [T, React.Dispatch<React.SetStateAction<T>>];
+/**
  * Logs a warning in dev mode when a component switches from controlled to
@@ -171,2 +185,6 @@ * uncontrolled, or vice versa
 /**
+ * @param callback
+ */
+export declare function useEventCallback<E extends Event | React.SyntheticEvent>(callback: (event: E, ...args: any[]) => void): (event: E, ...args: any[]) => void;
+/**
  * Detect when focus changes in our document.
@@ -173,0 +191,0 @@ *

dist/utils.cjs.development.js

@@ -273,2 +273,25 @@ 'use strict';
 /**
+ * Check if a component is controlled or uncontrolled and return the correct
+ * state value and setter accordingly. If the component state is controlled by
+ * the app, the setter is a noop.
+ *
+ * @param controlPropValue
+ * @param defaultValue
+ */
+
+function useControlledState(controlPropValue, defaultValue) {
+  var isControlled = React.useRef(controlPropValue != null);
+
+  var _useState = React.useState(defaultValue),
+      valueState = _useState[0],
+      setValue = _useState[1];
+
+  var set = React.useCallback(function (n) {
+    if (!isControlled.current) {
+      setValue(n);
+    }
+  }, []);
+  return [isControlled.current ? controlPropValue : valueState, set];
+}
+/**
  * Logs a warning in dev mode when a component switches from controlled to
@@ -323,2 +346,19 @@ * uncontrolled, or vice versa
 /**
+ * @param callback
+ */
+
+function useEventCallback(callback) {
+  var ref = React.useRef(callback);
+  useIsomorphicLayoutEffect(function () {
+    ref.current = callback;
+  });
+  return React.useCallback(function (event) {
+    for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+      args[_key3 - 1] = arguments[_key3];
+    }
+
+    return ref.current.apply(ref, [event].concat(args));
+  }, []);
+}
+/**
  * Detect when focus changes in our document.
@@ -370,4 +410,4 @@ *
 function useForkedRef() {
-  for (var _len3 = arguments.length, refs = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-    refs[_key3] = arguments[_key3];
+  for (var _len4 = arguments.length, refs = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+    refs[_key4] = arguments[_key4];
   }
@@ -465,2 +505,3 @@
 
+exports.warning = warning;
 exports.assignRef = assignRef;
@@ -485,3 +526,5 @@ exports.boolOrBoolString = boolOrBoolString;
 exports.useConstant = useConstant;
+exports.useControlledState = useControlledState;
 exports.useControlledSwitchWarning = useControlledSwitchWarning;
+exports.useEventCallback = useEventCallback;
 exports.useFocusChange = useFocusChange;
@@ -488,0 +531,0 @@ exports.useForkedRef = useForkedRef;

dist/utils.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;require("warning");var r=i()?n.useLayoutEffect:n.useEffect,o="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();function u(e,t){if(null!=e)if(s(e))e(t);else try{e.current=t}catch(n){throw new Error('Cannot assign value "'+t+'" to ref "'+e+'"')}}function i(){return"undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement}function c(e){return e&&e.ownerDocument?e.ownerDocument:i()?document:null}function f(e){return"boolean"==typeof e}function s(e){return!(!e||"[object Function]"!={}.toString.call(e))}function l(){}exports.assignRef=u,exports.boolOrBoolString=function(e){return"true"===e||!!f(e)&&e},exports.canUseDOM=i,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.getElementComputedStyle=function(e,t){var n=null,r=c(e);return e.currentStyle?n=e.currentStyle[t]:r&&r.defaultView&&s(r.defaultView.getComputedStyle)&&(n=r.defaultView.getComputedStyle(e,null).getPropertyValue(t)),n},exports.getOwnerDocument=c,exports.getScrollbarOffset=function(){try{if(window.innerWidth>document.documentElement.clientWidth)return window.innerWidth-document.documentElement.clientWidth}catch(e){}return 0},exports.isBoolean=f,exports.isFunction=s,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=l,exports.ponyfillGlobal=o,exports.stateToAttributeString=function(e){return String(e).replace(/([\s_]+)/g,"-").toLowerCase()},exports.useConstant=function(e){var t=n.useRef();return t.current||(t.current={v:e()}),t.current.v},exports.useControlledSwitchWarning=function(e,n,r){var o=null!=e;t.useRef(o),t.useEffect(l,[r,n,o])},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){u(t,e)}))}}),n)},exports.useIsomorphicLayoutEffect=r,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(l,[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=i()?n.useLayoutEffect:n.useEffect,u="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(l(e))e(t);else try{e.current=t}catch(n){throw new Error('Cannot assign value "'+t+'" to ref "'+e+'"')}}function i(){return"undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement}function f(e){return e&&e.ownerDocument?e.ownerDocument:i()?document:null}function s(e){return"boolean"==typeof e}function l(e){return!(!e||"[object Function]"!={}.toString.call(e))}function a(){}exports.warning=r,exports.assignRef=c,exports.boolOrBoolString=function(e){return"true"===e||!!s(e)&&e},exports.canUseDOM=i,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.getElementComputedStyle=function(e,t){var n=null,r=f(e);return e.currentStyle?n=e.currentStyle[t]:r&&r.defaultView&&l(r.defaultView.getComputedStyle)&&(n=r.defaultView.getComputedStyle(e,null).getPropertyValue(t)),n},exports.getOwnerDocument=f,exports.getScrollbarOffset=function(){try{if(window.innerWidth>document.documentElement.clientWidth)return window.innerWidth-document.documentElement.clientWidth}catch(e){}return 0},exports.isBoolean=s,exports.isFunction=l,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=a,exports.ponyfillGlobal=u,exports.stateToAttributeString=function(e){return String(e).replace(/([\s_]+)/g,"-").toLowerCase()},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],c=o[1],i=t.useCallback((function(e){r.current||c(e)}),[]);return[r.current?e:u,i]},exports.useControlledSwitchWarning=function(e,n,r){var o=null!=e;t.useRef(o),t.useEffect(a,[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.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=function(e,n){t.useEffect(a,[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)}};
 //# sourceMappingURL=utils.cjs.production.min.js.map

dist/utils.esm.js

@@ -1,3 +0,4 @@
-import React, { isValidElement, cloneElement, createContext, useRef, useEffect, useMemo } from 'react';
+import React, { isValidElement, cloneElement, createContext, useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import warning from 'warning';
+export { default as warning } from 'warning';
 
@@ -266,2 +267,25 @@ /* eslint-disable no-restricted-globals, eqeqeq,  */
 /**
+ * Check if a component is controlled or uncontrolled and return the correct
+ * state value and setter accordingly. If the component state is controlled by
+ * the app, the setter is a noop.
+ *
+ * @param controlPropValue
+ * @param defaultValue
+ */
+
+function useControlledState(controlPropValue, defaultValue) {
+  var isControlled = useRef(controlPropValue != null);
+
+  var _useState = useState(defaultValue),
+      valueState = _useState[0],
+      setValue = _useState[1];
+
+  var set = useCallback(function (n) {
+    if (!isControlled.current) {
+      setValue(n);
+    }
+  }, []);
+  return [isControlled.current ? controlPropValue : valueState, set];
+}
+/**
  * Logs a warning in dev mode when a component switches from controlled to
@@ -316,2 +340,19 @@ * uncontrolled, or vice versa
 /**
+ * @param callback
+ */
+
+function useEventCallback(callback) {
+  var ref = useRef(callback);
+  useIsomorphicLayoutEffect(function () {
+    ref.current = callback;
+  });
+  return useCallback(function (event) {
+    for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+      args[_key3 - 1] = arguments[_key3];
+    }
+
+    return ref.current.apply(ref, [event].concat(args));
+  }, []);
+}
+/**
  * Detect when focus changes in our document.
@@ -363,4 +404,4 @@ *
 function useForkedRef() {
-  for (var _len3 = arguments.length, refs = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-    refs[_key3] = arguments[_key3];
+  for (var _len4 = arguments.length, refs = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+    refs[_key4] = arguments[_key4];
   }
@@ -458,3 +499,3 @@
 
-export { assignRef, boolOrBoolString, canUseDOM, checkStyles, cloneValidElement, createNamedContext, forwardRefWithAs, getElementComputedStyle, getOwnerDocument, getScrollbarOffset, isBoolean, isFunction, isNumber, isRightClick, isString, makeId, noop, ponyfillGlobal, stateToAttributeString, useConstant, useControlledSwitchWarning, useFocusChange, useForkedRef, useIsomorphicLayoutEffect, usePrevious, useStateLogger, useUpdateEffect, wrapEvent };
+export { assignRef, boolOrBoolString, canUseDOM, checkStyles, cloneValidElement, createNamedContext, forwardRefWithAs, getElementComputedStyle, getOwnerDocument, getScrollbarOffset, isBoolean, isFunction, isNumber, isRightClick, isString, makeId, noop, ponyfillGlobal, stateToAttributeString, useConstant, useControlledState, useControlledSwitchWarning, useEventCallback, useFocusChange, useForkedRef, useIsomorphicLayoutEffect, usePrevious, useStateLogger, useUpdateEffect, wrapEvent };
 //# sourceMappingURL=utils.esm.js.map

package.json

 {
   "name": "@reach/utils",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Internal, shared utilities for Reach UI.",
@@ -30,3 +30,3 @@ "author": "React Training <[e-mail]>",
   },
-  "gitHead": "0c789bb48554bf13c62dd09210ebdf2f9af33d30"
+  "gitHead": "e95268bdcebc7f0b5311beff4b6a8e29636decfe"
 }

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

120231

increased by8.47%

Lines of code

1236

increased by8.14%

No dependency changes