@reach/utils - npm Package Compare versions

Comparing version 0.16.0 to 0.17.0

clone-valid-element/dist/reach-utils-clone-valid-element.cjs.dev.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 
@@ -20,5 +20,5 @@ /**
 
-  return /*#__PURE__*/react.isValidElement(element) ? react.cloneElement.apply(void 0, [element, props].concat(children)) : element;
+  return /*#__PURE__*/React.isValidElement(element) ? React.cloneElement.apply(void 0, [element, props].concat(children)) : element;
 }
 
 exports.cloneValidElement = cloneValidElement;

clone-valid-element/dist/reach-utils-clone-valid-element.cjs.prod.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 
@@ -20,5 +20,5 @@ /**
 
-  return /*#__PURE__*/react.isValidElement(element) ? react.cloneElement.apply(void 0, [element, props].concat(children)) : element;
+  return /*#__PURE__*/React.isValidElement(element) ? React.cloneElement.apply(void 0, [element, props].concat(children)) : element;
 }
 
 exports.cloneValidElement = cloneValidElement;

compose-refs/dist/reach-utils-compose-refs.cjs.dev.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 var typeCheck_dist_reachUtilsTypeCheck = require('../../type-check/dist/reach-utils-type-check.cjs.dev.js');
@@ -83,3 +83,3 @@
 
-  return react.useCallback(function (node) {
+  return React.useCallback(function (node) {
     for (var _iterator = _createForOfIteratorHelperLoose(refs), _step; !(_step = _iterator()).done;) {
@@ -86,0 +86,0 @@ var ref = _step.value;

compose-refs/dist/reach-utils-compose-refs.cjs.prod.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 var typeCheck_dist_reachUtilsTypeCheck = require('../../type-check/dist/reach-utils-type-check.cjs.prod.js');
@@ -83,3 +83,3 @@
 
-  return react.useCallback(function (node) {
+  return React.useCallback(function (node) {
     for (var _iterator = _createForOfIteratorHelperLoose(refs), _step; !(_step = _iterator()).done;) {
@@ -86,0 +86,0 @@ var ref = _step.value;

context/dist/reach-utils-context.cjs.dev.js

@@ -5,6 +5,24 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var _excluded = ["children"];
+/** @deprecated */
+
 function createNamedContext(name, defaultValue) {
-  var Ctx = /*#__PURE__*/react.createContext(defaultValue);
+  var Ctx = /*#__PURE__*/React.createContext(defaultValue);
 
@@ -16,4 +34,43 @@ if (process.env.NODE_ENV !== "production") {
   return Ctx;
+} ////////////////////////////////////////////////////////////////////////////////
+
+function createContext(rootName, defaultContext) {
+  var Ctx = /*#__PURE__*/React.createContext(defaultContext);
+
+  function Provider(props) {
+    var children = props.children,
+        context = _objectWithoutPropertiesLoose(props, _excluded);
+
+    var value = React.useMemo(function () {
+      return context;
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    Object.values(context));
+    return /*#__PURE__*/React.createElement(Ctx.Provider, {
+      value: value
+    }, children);
+  }
+
+  function useContext(childName) {
+    var context = React.useContext(Ctx);
+
+    if (context) {
+      return context;
+    }
+
+    if (defaultContext) {
+      return defaultContext;
+    }
+
+    throw Error(childName + " must be rendered inside of a " + rootName + " component.");
+  }
+
+  if (process.env.NODE_ENV !== "production") {
+    Ctx.displayName = rootName + "Context";
+    Provider.displayName = rootName + "Provider";
+  }
+
+  return [Provider, useContext];
 }
 
+exports.createContext = createContext;
 exports.createNamedContext = createNamedContext;

context/dist/reach-utils-context.cjs.prod.js

@@ -5,10 +5,62 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var _excluded = ["children"];
+/** @deprecated */
+
 function createNamedContext(name, defaultValue) {
-  var Ctx = /*#__PURE__*/react.createContext(defaultValue);
+  var Ctx = /*#__PURE__*/React.createContext(defaultValue);
 
   return Ctx;
+} ////////////////////////////////////////////////////////////////////////////////
+
+function createContext(rootName, defaultContext) {
+  var Ctx = /*#__PURE__*/React.createContext(defaultContext);
+
+  function Provider(props) {
+    var children = props.children,
+        context = _objectWithoutPropertiesLoose(props, _excluded);
+
+    var value = React.useMemo(function () {
+      return context;
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    Object.values(context));
+    return /*#__PURE__*/React.createElement(Ctx.Provider, {
+      value: value
+    }, children);
+  }
+
+  function useContext(childName) {
+    var context = React.useContext(Ctx);
+
+    if (context) {
+      return context;
+    }
+
+    if (defaultContext) {
+      return defaultContext;
+    }
+
+    throw Error(childName + " must be rendered inside of a " + rootName + " component.");
+  }
+
+  return [Provider, useContext];
 }
 
+exports.createContext = createContext;
 exports.createNamedContext = createNamedContext;

context/dist/reach-utils-context.esm.js

@@ -1,5 +0,23 @@
-import { createContext } from 'react';
+import { createContext as createContext$1, useMemo, createElement, useContext } from 'react';
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var _excluded = ["children"];
+/** @deprecated */
+
 function createNamedContext(name, defaultValue) {
-  var Ctx = /*#__PURE__*/createContext(defaultValue);
+  var Ctx = /*#__PURE__*/createContext$1(defaultValue);
 
@@ -11,4 +29,42 @@ if (process.env.NODE_ENV !== "production") {
   return Ctx;
+} ////////////////////////////////////////////////////////////////////////////////
+
+function createContext(rootName, defaultContext) {
+  var Ctx = /*#__PURE__*/createContext$1(defaultContext);
+
+  function Provider(props) {
+    var children = props.children,
+        context = _objectWithoutPropertiesLoose(props, _excluded);
+
+    var value = useMemo(function () {
+      return context;
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    Object.values(context));
+    return /*#__PURE__*/createElement(Ctx.Provider, {
+      value: value
+    }, children);
+  }
+
+  function useContext$1(childName) {
+    var context = useContext(Ctx);
+
+    if (context) {
+      return context;
+    }
+
+    if (defaultContext) {
+      return defaultContext;
+    }
+
+    throw Error(childName + " must be rendered inside of a " + rootName + " component.");
+  }
+
+  if (process.env.NODE_ENV !== "production") {
+    Ctx.displayName = rootName + "Context";
+    Provider.displayName = rootName + "Provider";
+  }
+
+  return [Provider, useContext$1];
 }
 
-export { createNamedContext };
+export { createContext, createNamedContext };

dev-utils/dist/reach-utils-dev-utils.cjs.dev.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 
@@ -23,7 +23,7 @@ /* eslint-disable react-hooks/rules-of-hooks */
   if (process.env.NODE_ENV !== "production") {
-    var debugRef = react.useRef(DEBUG);
-    react.useEffect(function () {
+    var debugRef = React.useRef(DEBUG);
+    React.useEffect(function () {
       debugRef.current = DEBUG;
     }, [DEBUG]);
-    react.useEffect(function () {
+    React.useEffect(function () {
       if (debugRef.current) {
@@ -72,7 +72,7 @@ console.group("State Updated");
   if (process.env.NODE_ENV !== "production") {
-    var name = react.useRef(packageName);
-    react.useEffect(function () {
+    var name = React.useRef(packageName);
+    React.useEffect(function () {
       return void (name.current = packageName);
     }, [packageName]);
-    react.useEffect(function () {
+    React.useEffect(function () {
       return checkStyles(name.current);
@@ -96,8 +96,8 @@ }, []);
   if (process.env.NODE_ENV !== "production") {
-    var controlledRef = react.useRef(controlledValue != null);
-    var nameCache = react.useRef({
+    var controlledRef = React.useRef(controlledValue != null);
+    var nameCache = React.useRef({
       componentName: componentName,
       controlledPropName: controlledPropName
     });
-    react.useEffect(function () {
+    React.useEffect(function () {
       nameCache.current = {
@@ -108,3 +108,3 @@ componentName: componentName,
     }, [componentName, controlledPropName]);
-    react.useEffect(function () {
+    React.useEffect(function () {
       var wasControlled = controlledRef.current;
@@ -111,0 +111,0 @@ var _nameCache$current = nameCache.current,

dist/declarations/src/context.d.ts

@@ -1,2 +0,9 @@
-import type * as React from "react";
+import * as React from "react";
+/** @deprecated */
 export declare function createNamedContext<ContextValueType>(name: string, defaultValue: ContextValueType): React.Context<ContextValueType>;
+declare type ContextProvider<T> = React.FC<React.PropsWithChildren<T>>;
+export declare function createContext<ContextValueType extends object | null>(rootName: string, defaultContext?: ContextValueType): [
+    ContextProvider<ContextValueType>,
+    (childName: string) => ContextValueType
+];
+export {};

dist/declarations/src/use-controlled-state.d.ts

@@ -10,2 +10,6 @@ import type * as React from "react";
  */
-export declare function useControlledState<T = any>(controlledValue: T | undefined, defaultValue: T): [T, React.Dispatch<React.SetStateAction<T>>];
+export declare function useControlledState<T = any>({ controlledValue, defaultValue, calledFrom, }: {
+    controlledValue: T | undefined;
+    defaultValue: T | (() => T);
+    calledFrom?: string;
+}): [T, React.Dispatch<React.SetStateAction<T>>];

dist/reach-utils.cjs.dev.js

@@ -32,2 +32,3 @@ 'use strict';
 require('react');
+require('tiny-warning');
 
@@ -43,2 +44,3 @@
 exports.getComputedStyles = computedStyles_dist_reachUtilsComputedStyles.getComputedStyles;
+exports.createContext = context_dist_reachUtilsContext.createContext;
 exports.createNamedContext = context_dist_reachUtilsContext.createNamedContext;
@@ -45,0 +47,0 @@ exports.checkStyles = devUtils_dist_reachUtilsDevUtils.checkStyles;

dist/reach-utils.cjs.prod.js

@@ -32,2 +32,3 @@ 'use strict';
 require('react');
+require('tiny-warning');
 
@@ -43,2 +44,3 @@
 exports.getComputedStyles = computedStyles_dist_reachUtilsComputedStyles.getComputedStyles;
+exports.createContext = context_dist_reachUtilsContext.createContext;
 exports.createNamedContext = context_dist_reachUtilsContext.createNamedContext;
@@ -45,0 +47,0 @@ exports.checkStyles = devUtils_dist_reachUtilsDevUtils.checkStyles;

dist/reach-utils.esm.js

@@ -6,3 +6,3 @@ export { canUseDOM } from '../can-use-dom/dist/reach-utils-can-use-dom.esm.js';
 export { getComputedStyle, getComputedStyles } from '../computed-styles/dist/reach-utils-computed-styles.esm.js';
-export { createNamedContext } from '../context/dist/reach-utils-context.esm.js';
+export { createContext, createNamedContext } from '../context/dist/reach-utils-context.esm.js';
 export { checkStyles, useCheckStyles, useControlledSwitchWarning, useStateLogger } from '../dev-utils/dist/reach-utils-dev-utils.esm.js';
@@ -29,1 +29,2 @@ export { getDocumentDimensions } from '../get-document-dimensions/dist/reach-utils-get-document-dimensions.esm.js';
 import 'react';
+import 'tiny-warning';

package.json

 {
   "name": "@reach/utils",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Internal, shared utilities for Reach UI.",
@@ -71,3 +71,3 @@ "author": "React Training <[e-mail]>",
       "computed-styles.ts",
-      "context.ts",
+      "context.tsx",
       "dev-utils.ts",
@@ -97,3 +97,3 @@ "get-document-dimensions.ts",
   },
-  "gitHead": "e4c6093db14e3cc24c26794a002dbd8c866c0387"
+  "gitHead": "d206aefac2bede58c06a54b18d48eee7537096e0"
 }

use-constant/dist/reach-utils-use-constant.cjs.dev.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 
@@ -14,3 +14,3 @@ /**
 function useConstant(fn) {
-  var ref = react.useRef();
+  var ref = React.useRef();
 
@@ -17,0 +17,0 @@ if (!ref.current) {

use-constant/dist/reach-utils-use-constant.cjs.prod.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 
@@ -14,3 +14,3 @@ /**
 function useConstant(fn) {
-  var ref = react.useRef();
+  var ref = React.useRef();
 
@@ -17,0 +17,0 @@ if (!ref.current) {

use-controlled-state/dist/reach-utils-use-controlled-state.cjs.dev.js

@@ -5,4 +5,9 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
+var warning = require('tiny-warning');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var warning__default = /*#__PURE__*/_interopDefault(warning);
+
 /**
@@ -16,17 +21,31 @@ * Check if a component is controlled or uncontrolled and return the correct
  */
-function useControlledState(controlledValue, defaultValue) {
-  var controlledRef = react.useRef(controlledValue != null);
 
-  var _useState = react.useState(defaultValue),
+function useControlledState(_ref) {
+  var controlledValue = _ref.controlledValue,
+      defaultValue = _ref.defaultValue,
+      _ref$calledFrom = _ref.calledFrom,
+      calledFrom = _ref$calledFrom === void 0 ? "A component" : _ref$calledFrom;
+  var wasControlled = controlledValue !== undefined;
+
+  var _useRef = React.useRef(wasControlled),
+      isControlled = _useRef.current;
+
+  if (process.env.NODE_ENV !== "production") {
+    process.env.NODE_ENV !== "production" ? warning__default['default'](!(!isControlled && wasControlled), calledFrom + " is changing from controlled to uncontrolled. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.") : void 0;
+    process.env.NODE_ENV !== "production" ? warning__default['default'](!(isControlled && !wasControlled), calledFrom + " is changing from uncontrolled to controlled. Components should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.") : void 0;
+  }
+
+  var _useState = React.useState(isControlled ? controlledValue : defaultValue),
       valueState = _useState[0],
       setValue = _useState[1];
 
-  var set = react.useCallback(function (n) {
-    if (!controlledRef.current) {
+  var set = React.useCallback(function (n) {
+    if (!isControlled) {
       setValue(n);
-    }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, []);
-  return [controlledRef.current ? controlledValue : valueState, set];
+  return [isControlled ? controlledValue : valueState, set];
 }
 
 exports.useControlledState = useControlledState;

use-controlled-state/dist/reach-utils-use-controlled-state.cjs.prod.js

@@ -5,3 +5,4 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
+require('tiny-warning');
 
@@ -16,17 +17,25 @@ /**
  */
-function useControlledState(controlledValue, defaultValue) {
-  var controlledRef = react.useRef(controlledValue != null);
 
-  var _useState = react.useState(defaultValue),
+function useControlledState(_ref) {
+  var controlledValue = _ref.controlledValue,
+      defaultValue = _ref.defaultValue;
+      _ref.calledFrom;
+  var wasControlled = controlledValue !== undefined;
+
+  var _useRef = React.useRef(wasControlled),
+      isControlled = _useRef.current;
+
+  var _useState = React.useState(isControlled ? controlledValue : defaultValue),
       valueState = _useState[0],
       setValue = _useState[1];
 
-  var set = react.useCallback(function (n) {
-    if (!controlledRef.current) {
+  var set = React.useCallback(function (n) {
+    if (!isControlled) {
       setValue(n);
-    }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, []);
-  return [controlledRef.current ? controlledValue : valueState, set];
+  return [isControlled ? controlledValue : valueState, set];
 }
 
 exports.useControlledState = useControlledState;

use-controlled-state/dist/reach-utils-use-controlled-state.esm.js

 import { useRef, useState, useCallback } from 'react';
+import warning from 'tiny-warning';
 
@@ -11,6 +12,19 @@ /**
  */
-function useControlledState(controlledValue, defaultValue) {
-  var controlledRef = useRef(controlledValue != null);
 
-  var _useState = useState(defaultValue),
+function useControlledState(_ref) {
+  var controlledValue = _ref.controlledValue,
+      defaultValue = _ref.defaultValue,
+      _ref$calledFrom = _ref.calledFrom,
+      calledFrom = _ref$calledFrom === void 0 ? "A component" : _ref$calledFrom;
+  var wasControlled = controlledValue !== undefined;
+
+  var _useRef = useRef(wasControlled),
+      isControlled = _useRef.current;
+
+  if (process.env.NODE_ENV !== "production") {
+    process.env.NODE_ENV !== "production" ? warning(!(!isControlled && wasControlled), calledFrom + " is changing from controlled to uncontrolled. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.") : void 0;
+    process.env.NODE_ENV !== "production" ? warning(!(isControlled && !wasControlled), calledFrom + " is changing from uncontrolled to controlled. Components should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.") : void 0;
+  }
+
+  var _useState = useState(isControlled ? controlledValue : defaultValue),
       valueState = _useState[0],
@@ -20,9 +34,10 @@ setValue = _useState[1];
   var set = useCallback(function (n) {
-    if (!controlledRef.current) {
+    if (!isControlled) {
       setValue(n);
-    }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, []);
-  return [controlledRef.current ? controlledValue : valueState, set];
+  return [isControlled ? controlledValue : valueState, set];
 }
 
 export { useControlledState };

use-event-listener/dist/reach-utils-use-event-listener.cjs.dev.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 
@@ -21,7 +21,7 @@ /**
 
-  var savedHandler = react.useRef(listener);
-  react.useEffect(function () {
+  var savedHandler = React.useRef(listener);
+  React.useEffect(function () {
     savedHandler.current = listener;
   }, [listener]);
-  react.useEffect(function () {
+  React.useEffect(function () {
     var isSupported = element && element.addEventListener;
@@ -28,0 +28,0 @@

use-event-listener/dist/reach-utils-use-event-listener.cjs.prod.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 
@@ -21,7 +21,7 @@ /**
 
-  var savedHandler = react.useRef(listener);
-  react.useEffect(function () {
+  var savedHandler = React.useRef(listener);
+  React.useEffect(function () {
     savedHandler.current = listener;
   }, [listener]);
-  react.useEffect(function () {
+  React.useEffect(function () {
     var isSupported = element && element.addEventListener;
@@ -28,0 +28,0 @@

use-focus-change/dist/reach-utils-use-focus-change.cjs.dev.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 
@@ -29,4 +29,4 @@ /**
 
-  var lastActiveElement = react.useRef(ownerDocument.activeElement);
-  react.useEffect(function () {
+  var lastActiveElement = React.useRef(ownerDocument.activeElement);
+  React.useEffect(function () {
     lastActiveElement.current = ownerDocument.activeElement;
@@ -33,0 +33,0 @@

use-focus-change/dist/reach-utils-use-focus-change.cjs.prod.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 
@@ -29,4 +29,4 @@ /**
 
-  var lastActiveElement = react.useRef(ownerDocument.activeElement);
-  react.useEffect(function () {
+  var lastActiveElement = React.useRef(ownerDocument.activeElement);
+  React.useEffect(function () {
     lastActiveElement.current = ownerDocument.activeElement;
@@ -33,0 +33,0 @@

use-force-update/dist/reach-utils-use-force-update.cjs.dev.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 
@@ -13,6 +13,6 @@ /**
 function useForceUpdate() {
-  var _useState = react.useState(Object.create(null)),
+  var _useState = React.useState(Object.create(null)),
       dispatch = _useState[1];
 
-  return react.useCallback(function () {
+  return React.useCallback(function () {
     dispatch(Object.create(null));
@@ -19,0 +19,0 @@ }, []);

use-force-update/dist/reach-utils-use-force-update.cjs.prod.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 
@@ -13,6 +13,6 @@ /**
 function useForceUpdate() {
-  var _useState = react.useState(Object.create(null)),
+  var _useState = React.useState(Object.create(null)),
       dispatch = _useState[1];
 
-  return react.useCallback(function () {
+  return React.useCallback(function () {
     dispatch(Object.create(null));
@@ -19,0 +19,0 @@ }, []);

use-isomorphic-layout-effect/dist/reach-utils-use-isomorphic-layout-effect.cjs.dev.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 var canUseDom_dist_reachUtilsCanUseDom = require('../../can-use-dom/dist/reach-utils-can-use-dom.cjs.dev.js');
@@ -34,4 +34,4 @@
 
-var useIsomorphicLayoutEffect = /*#__PURE__*/canUseDom_dist_reachUtilsCanUseDom.canUseDOM() ? react.useLayoutEffect : react.useEffect;
+var useIsomorphicLayoutEffect = /*#__PURE__*/canUseDom_dist_reachUtilsCanUseDom.canUseDOM() ? React.useLayoutEffect : React.useEffect;
 
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

use-isomorphic-layout-effect/dist/reach-utils-use-isomorphic-layout-effect.cjs.prod.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 var canUseDom_dist_reachUtilsCanUseDom = require('../../can-use-dom/dist/reach-utils-can-use-dom.cjs.prod.js');
@@ -34,4 +34,4 @@
 
-var useIsomorphicLayoutEffect = /*#__PURE__*/canUseDom_dist_reachUtilsCanUseDom.canUseDOM() ? react.useLayoutEffect : react.useEffect;
+var useIsomorphicLayoutEffect = /*#__PURE__*/canUseDom_dist_reachUtilsCanUseDom.canUseDOM() ? React.useLayoutEffect : React.useEffect;
 
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

use-lazy-ref/dist/reach-utils-use-lazy-ref.cjs.dev.js

@@ -5,7 +5,7 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 
 function useLazyRef(fn) {
-  var isSet = react.useRef(false);
-  var ref = react.useRef();
+  var isSet = React.useRef(false);
+  var ref = React.useRef();
 
@@ -12,0 +12,0 @@ if (!isSet.current) {

use-lazy-ref/dist/reach-utils-use-lazy-ref.cjs.prod.js

@@ -5,7 +5,7 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 
 function useLazyRef(fn) {
-  var isSet = react.useRef(false);
-  var ref = react.useRef();
+  var isSet = React.useRef(false);
+  var ref = React.useRef();
 
@@ -12,0 +12,0 @@ if (!isSet.current) {

use-previous/dist/reach-utils-use-previous.cjs.dev.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 
@@ -15,4 +15,4 @@ /**
 function usePrevious(value) {
-  var ref = react.useRef(null);
-  react.useEffect(function () {
+  var ref = React.useRef(null);
+  React.useEffect(function () {
     ref.current = value;
@@ -19,0 +19,0 @@ }, [value]);

use-previous/dist/reach-utils-use-previous.cjs.prod.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 
@@ -15,4 +15,4 @@ /**
 function usePrevious(value) {
-  var ref = react.useRef(null);
-  react.useEffect(function () {
+  var ref = React.useRef(null);
+  React.useEffect(function () {
     ref.current = value;
@@ -19,0 +19,0 @@ }, [value]);

use-stable-callback/dist/reach-utils-use-stable-callback.cjs.dev.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 var useIsomorphicLayoutEffect_dist_reachUtilsUseIsomorphicLayoutEffect = require('../../use-isomorphic-layout-effect/dist/reach-utils-use-isomorphic-layout-effect.cjs.dev.js');
@@ -18,3 +18,3 @@ require('../../can-use-dom/dist/reach-utils-can-use-dom.cjs.dev.js');
 function createStableCallbackHook(useEffectHook, callback) {
-  var callbackRef = react.useRef(callback);
+  var callbackRef = React.useRef(callback);
   useEffectHook(function () {
@@ -24,3 +24,3 @@ callbackRef.current = callback;
 
-  return react.useCallback(function () {
+  return React.useCallback(function () {
     callbackRef.current && callbackRef.current.apply(callbackRef, arguments);
@@ -37,3 +37,3 @@ }, []);
 function useStableCallback(callback) {
-  return createStableCallbackHook(react.useEffect, callback);
+  return createStableCallbackHook(React.useEffect, callback);
 }
@@ -40,0 +40,0 @@ /**

use-stable-callback/dist/reach-utils-use-stable-callback.cjs.prod.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 var useIsomorphicLayoutEffect_dist_reachUtilsUseIsomorphicLayoutEffect = require('../../use-isomorphic-layout-effect/dist/reach-utils-use-isomorphic-layout-effect.cjs.prod.js');
@@ -18,3 +18,3 @@ require('../../can-use-dom/dist/reach-utils-can-use-dom.cjs.prod.js');
 function createStableCallbackHook(useEffectHook, callback) {
-  var callbackRef = react.useRef(callback);
+  var callbackRef = React.useRef(callback);
   useEffectHook(function () {
@@ -24,3 +24,3 @@ callbackRef.current = callback;
 
-  return react.useCallback(function () {
+  return React.useCallback(function () {
     callbackRef.current && callbackRef.current.apply(callbackRef, arguments);
@@ -37,3 +37,3 @@ }, []);
 function useStableCallback(callback) {
-  return createStableCallbackHook(react.useEffect, callback);
+  return createStableCallbackHook(React.useEffect, callback);
 }
@@ -40,0 +40,0 @@ /**

use-stateful-ref-value/dist/reach-utils-use-stateful-ref-value.cjs.dev.js

@@ -5,10 +5,10 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 
 function useStatefulRefValue(ref, initialState) {
-  var _useState = react.useState(initialState),
+  var _useState = React.useState(initialState),
       state = _useState[0],
       setState = _useState[1];
 
-  var callbackRef = react.useCallback(function (refValue) {
+  var callbackRef = React.useCallback(function (refValue) {
     ref.current = refValue;
@@ -15,0 +15,0 @@ setState(refValue); // eslint-disable-next-line react-hooks/exhaustive-deps

use-stateful-ref-value/dist/reach-utils-use-stateful-ref-value.cjs.prod.js

@@ -5,10 +5,10 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 
 function useStatefulRefValue(ref, initialState) {
-  var _useState = react.useState(initialState),
+  var _useState = React.useState(initialState),
       state = _useState[0],
       setState = _useState[1];
 
-  var callbackRef = react.useCallback(function (refValue) {
+  var callbackRef = React.useCallback(function (refValue) {
     ref.current = refValue;
@@ -15,0 +15,0 @@ setState(refValue); // eslint-disable-next-line react-hooks/exhaustive-deps

use-update-effect/dist/reach-utils-use-update-effect.cjs.dev.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 
@@ -15,4 +15,4 @@ /**
 function useUpdateEffect(effect, deps) {
-  var mounted = react.useRef(false);
-  react.useEffect(function () {
+  var mounted = React.useRef(false);
+  React.useEffect(function () {
     if (mounted.current) {
@@ -19,0 +19,0 @@ effect();

use-update-effect/dist/reach-utils-use-update-effect.cjs.prod.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 
@@ -15,4 +15,4 @@ /**
 function useUpdateEffect(effect, deps) {
-  var mounted = react.useRef(false);
-  react.useEffect(function () {
+  var mounted = React.useRef(false);
+  React.useEffect(function () {
     if (mounted.current) {
@@ -19,0 +19,0 @@ effect();

No alert changes

Improved metrics

Total package byte prevSize

125751

increased by6.39%

Lines of code

3025

increased by6.21%

Worsened metrics

Number of low supply chain risk alerts

51

increased by18.6%

No dependency changes