@reach/utils - npm Package Compare versions

Comparing version 0.8.4 to 0.8.5

dist/index.d.ts

@@ -41,2 +41,8 @@ import React from "react";
 /**
+ * Ponyfill for the global object in some environments.
+ *
+ * @link https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
+ */
+export declare const ponyfillGlobal: any;
+/**
  * Passes or assigns an arbitrary value to a ref function or object.
@@ -48,7 +54,49 @@ *
 export declare function assignRef<RefValueType = any>(ref: AssignableRef<RefValueType> | undefined, value: any): void;
+/**
+ * Checks true|"true" vs false|"false"
+ *
+ * @param value
+ */
 export declare function boolOrBoolString(value: any): value is "true" | true;
 export declare function canUseDOM(): boolean;
+/**
+ * Type-safe clone element
+ *
+ * @param element
+ * @param props
+ * @param children
+ */
 export declare function cloneValidElement<Props>(element: React.ReactElement<Props> | React.ReactNode, props?: Partial<Props> & React.Attributes, ...children: React.ReactNode[]): React.ReactElement<Props> | React.ReactNode;
 export declare function createNamedContext<ContextValueType>(name: string, defaultValue: ContextValueType): React.Context<ContextValueType>;
 /**
+ * This is a hack for sure. The thing is, getting a component to intelligently
+ * infer props based on a component or JSX string passed into an `as` prop is
+ * kind of a huge pain. Getting it to work and satisfy the constraints of
+ * `forwardRef` seems dang near impossible. To avoid needing to do this awkward
+ * type song-and-dance every time we want to forward a ref into a component
+ * that accepts an `as` prop, we abstract all of that mess to this function for
+ * the time time being.
+ *
+ * TODO: Eventually we should probably just try to get the type defs above
+ * working across the board, but ain't nobody got time for that mess!
+ *
+ * @param Comp
+ */
+export declare function forwardRefWithAs<Props, ComponentType extends As>(comp: (props: PropsFromAs<ComponentType, Props>, ref: React.RefObject<any>) => React.ReactElement | null): ComponentWithAs<ComponentType, Props>;
+/**
+ * Get a computed style value by property, backwards compatible with IE
+ * @param element
+ * @param styleProp
+ */
+export declare function getElementComputedStyle(element: HTMLElement & {
+    currentStyle?: Record<string, string>;
+}, styleProp: string): string | null;
+/**
+ * Get an element's owner document. Useful when components are used in iframes
+ * or other environments like dev tools.
+ *
+ * @param element
+ */
+export declare function getOwnerDocument<T extends HTMLElement = HTMLElement>(element: T | null): Document | null;
+/**
  * Get the scrollbar offset distance.
@@ -58,2 +106,32 @@ */
 /**
+ * Checks whether or not a value is a boolean.
+ *
+ * @param value
+ */
+export declare function isBoolean(value: any): value is boolean;
+/**
+ * Checks whether or not a value is a function.
+ *
+ * @param value
+ */
+export declare function isFunction(value: any): value is Function;
+/**
+ * Checks whether or not a value is a number.
+ *
+ * @param value
+ */
+export declare function isNumber(value: any): value is number;
+/**
+ * Detects right clicks
+ *
+ * @param nativeEvent
+ */
+export declare function isRightClick(nativeEvent: MouseEvent): boolean;
+/**
+ * Checks whether or not a value is a string.
+ *
+ * @param value
+ */
+export declare function isString(value: any): value is string;
+/**
  * Joins strings to format IDs for compound components.
@@ -69,2 +147,21 @@ *
 /**
+ * Convert our state strings for HTML data attributes.
+ * No need for a fancy kebab-caser here, we know what our state strings are!
+ *
+ * @param state
+ */
+export declare function stateToAttributeString(state: any): string;
+/**
+ * Logs a warning in dev mode when a component switches from controlled to
+ * uncontrolled, or vice versa
+ *
+ * A single prop should typically be used to determine whether or not a
+ * component is controlled or not.
+ *
+ * @param controlPropValue
+ * @param controlPropName
+ * @param componentName
+ */
+export declare function useControlledSwitchWarning(controlPropValue: any, controlPropName: string, componentName: string): void;
+/**
  * React hook for creating a value exactly once.
@@ -96,2 +193,9 @@ * @see https://github.com/Andarist/use-constant
 /**
+ * Just a lil state logger
+ *
+ * @param state
+ * @param DEBUG
+ */
+export declare function useStateLogger(state: string, DEBUG?: boolean): void;
+/**
  * Wraps a lib-defined event handler and a user-defined event handler, returning
@@ -105,32 +209,2 @@ * a single handler that allows a user to prevent lib-defined handlers from
 export declare function wrapEvent<EventType extends React.SyntheticEvent | Event>(theirHandler: ((event: EventType) => any) | undefined, ourHandler: (event: EventType) => any): (event: EventType) => any;
-/**
- * This is a hack for sure. The thing is, getting a component to intelligently
- * infer props based on a component or JSX string passed into an `as` prop is
- * kind of a huge pain. Getting it to work and satisfy the constraints of
- * `forwardRef` seems dang near impossible. To avoid needing to do this awkward
- * type song-and-dance every time we want to forward a ref into a component
- * that accepts an `as` prop, we abstract all of that mess to this function for
- * the time time being.
- *
- * TODO: Eventually we should probably just try to get the type defs above
- * working across the board, but ain't nobody got time for that mess!
- *
- * @param Comp
- */
-export declare function forwardRefWithAs<Props, ComponentType extends As>(comp: (props: PropsFromAs<ComponentType, Props>, ref: React.RefObject<any>) => React.ReactElement | null): ComponentWithAs<ComponentType, Props>;
-/**
- * Get a computed style value by property, backwards compatible with IE
- * @param element
- * @param styleProp
- */
-export declare function getElementComputedStyle(element: HTMLElement & {
-    currentStyle?: Record<string, string>;
-}, styleProp: string): string | null;
-export declare function getOwnerDocument<T extends HTMLElement = HTMLElement>(element: T | null): Document | null;
-export declare let ponyfillGlobal: any;
-export declare function isBoolean(value: any): value is boolean;
-export declare function isFunction(value: any): value is Function;
-export declare function isNumber(value: any): value is number;
-export declare function isString(value: any): value is string;
-export declare function useControlledSwitchWarning(controlPropValue: any, controlPropName: string, componentName: string): void;
 export { As, AssignableRef, ComponentWithAs, ComponentWithForwardedRef, DistributiveOmit, PropsFromAs, PropsWithAs, SingleOrArray, };

dist/utils.cjs.development.js

@@ -79,2 +79,12 @@ 'use strict';
 /**
+ * Ponyfill for the global object in some environments.
+ *
+ * @link https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
+ */
+
+var ponyfillGlobal = typeof window != "undefined" && window.Math == Math ? window : typeof self != "undefined" && self.Math == Math ? self :
+/*#__PURE__*/
+// eslint-disable-next-line no-new-func
+Function("return this")();
+/**
  * Passes or assigns an arbitrary value to a ref function or object.
@@ -99,2 +109,8 @@ *
 }
+/**
+ * Checks true|"true" vs false|"false"
+ *
+ * @param value
+ */
+
 function boolOrBoolString(value) {
@@ -106,2 +122,10 @@ return value === "true" ? true : isBoolean(value) ? value : false;
 }
+/**
+ * Type-safe clone element
+ *
+ * @param element
+ * @param props
+ * @param children
+ */
+
 function cloneValidElement(element, props) {
@@ -120,2 +144,48 @@ for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
 /**
+ * This is a hack for sure. The thing is, getting a component to intelligently
+ * infer props based on a component or JSX string passed into an `as` prop is
+ * kind of a huge pain. Getting it to work and satisfy the constraints of
+ * `forwardRef` seems dang near impossible. To avoid needing to do this awkward
+ * type song-and-dance every time we want to forward a ref into a component
+ * that accepts an `as` prop, we abstract all of that mess to this function for
+ * the time time being.
+ *
+ * TODO: Eventually we should probably just try to get the type defs above
+ * working across the board, but ain't nobody got time for that mess!
+ *
+ * @param Comp
+ */
+
+function forwardRefWithAs(comp) {
+  return React__default.forwardRef(comp);
+}
+/**
+ * Get a computed style value by property, backwards compatible with IE
+ * @param element
+ * @param styleProp
+ */
+
+function getElementComputedStyle(element, styleProp) {
+  var y = null;
+  var doc = getOwnerDocument(element);
+
+  if (element.currentStyle) {
+    y = element.currentStyle[styleProp];
+  } else if (doc && doc.defaultView && isFunction(doc.defaultView.getComputedStyle)) {
+    y = doc.defaultView.getComputedStyle(element, null).getPropertyValue(styleProp);
+  }
+
+  return y;
+}
+/**
+ * Get an element's owner document. Useful when components are used in iframes
+ * or other environments like dev tools.
+ *
+ * @param element
+ */
+
+function getOwnerDocument(element) {
+  return element && element.ownerDocument ? element.ownerDocument : canUseDOM() ? document : null;
+}
+/**
  * Get the scrollbar offset distance.
@@ -134,2 +204,47 @@ */
 /**
+ * Checks whether or not a value is a boolean.
+ *
+ * @param value
+ */
+
+function isBoolean(value) {
+  return typeof value === "boolean";
+}
+/**
+ * Checks whether or not a value is a function.
+ *
+ * @param value
+ */
+
+function isFunction(value) {
+  return !!(value && {}.toString.call(value) == "[object Function]");
+}
+/**
+ * Checks whether or not a value is a number.
+ *
+ * @param value
+ */
+
+function isNumber(value) {
+  return typeof value === "number";
+}
+/**
+ * Detects right clicks
+ *
+ * @param nativeEvent
+ */
+
+function isRightClick(nativeEvent) {
+  return nativeEvent.which === 3 || nativeEvent.button === 2;
+}
+/**
+ * Checks whether or not a value is a string.
+ *
+ * @param value
+ */
+
+function isString(value) {
+  return typeof value === "string";
+}
+/**
  * Joins strings to format IDs for compound components.
@@ -155,2 +270,45 @@ *
 /**
+ * Convert our state strings for HTML data attributes.
+ * No need for a fancy kebab-caser here, we know what our state strings are!
+ *
+ * @param state
+ */
+
+function stateToAttributeString(state) {
+  return String(state).replace(/([\s_]+)/g, "-").toLowerCase();
+}
+/**
+ * Logs a warning in dev mode when a component switches from controlled to
+ * uncontrolled, or vice versa
+ *
+ * A single prop should typically be used to determine whether or not a
+ * component is controlled or not.
+ *
+ * @param controlPropValue
+ * @param controlPropName
+ * @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 _useRef = React.useRef(isControlled),
+      wasControlled = _useRef.current;
+
+  var effect = 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]);
+}
+/**
  * React hook for creating a value exactly once.
@@ -230,2 +388,28 @@ * @see https://github.com/Andarist/use-constant
 /**
+ * Just a lil state logger
+ *
+ * @param state
+ * @param DEBUG
+ */
+
+function useStateLogger(state, DEBUG) {
+  if (DEBUG === void 0) {
+    DEBUG = false;
+  }
+
+  var effect = noop;
+
+  {
+    if (DEBUG) {
+      effect = function effect() {
+        console.group("State Updated");
+        console.log("%c" + state, "font-weight: normal; font-size: 120%; font-style: italic;");
+        console.groupEnd();
+      };
+    }
+  }
+
+  React.useEffect(effect, [state]);
+}
+/**
  * Wraps a lib-defined event handler and a user-defined event handler, returning
@@ -248,80 +432,3 @@ * a single handler that allows a user to prevent lib-defined handlers from
 }
-/**
- * This is a hack for sure. The thing is, getting a component to intelligently
- * infer props based on a component or JSX string passed into an `as` prop is
- * kind of a huge pain. Getting it to work and satisfy the constraints of
- * `forwardRef` seems dang near impossible. To avoid needing to do this awkward
- * type song-and-dance every time we want to forward a ref into a component
- * that accepts an `as` prop, we abstract all of that mess to this function for
- * the time time being.
- *
- * TODO: Eventually we should probably just try to get the type defs above
- * working across the board, but ain't nobody got time for that mess!
- *
- * @param Comp
- */
 
-function forwardRefWithAs(comp) {
-  return React__default.forwardRef(comp);
-}
-/**
- * Get a computed style value by property, backwards compatible with IE
- * @param element
- * @param styleProp
- */
-
-function getElementComputedStyle(element, styleProp) {
-  var y = null;
-  var doc = getOwnerDocument(element);
-
-  if (element.currentStyle) {
-    y = element.currentStyle[styleProp];
-  } else if (doc && doc.defaultView && isFunction(doc.defaultView.getComputedStyle)) {
-    y = doc.defaultView.getComputedStyle(element, null).getPropertyValue(styleProp);
-  }
-
-  return y;
-}
-function getOwnerDocument(element) {
-  return element && element.ownerDocument ? element.ownerDocument : canUseDOM() ? document : null;
-} // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
-
-var ponyfillGlobal = typeof window != "undefined" && window.Math == Math ? window : typeof self != "undefined" && self.Math == Math ? self :
-/*#__PURE__*/
-// eslint-disable-next-line no-new-func
-Function("return this")();
-function isBoolean(value) {
-  return typeof value === "boolean";
-}
-function isFunction(value) {
-  return !!(value && {}.toString.call(value) == "[object Function]");
-}
-function isNumber(value) {
-  return typeof value === "number";
-}
-function isString(value) {
-  return typeof value === "string";
-}
-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 _useRef = React.useRef(isControlled),
-      wasControlled = _useRef.current;
-
-  var effect = 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.assignRef = assignRef;
@@ -339,2 +446,3 @@ exports.boolOrBoolString = boolOrBoolString;
 exports.isNumber = isNumber;
+exports.isRightClick = isRightClick;
 exports.isString = isString;
@@ -344,2 +452,3 @@ exports.makeId = makeId;
 exports.ponyfillGlobal = ponyfillGlobal;
+exports.stateToAttributeString = stateToAttributeString;
 exports.useConstant = useConstant;
@@ -350,4 +459,5 @@ exports.useControlledSwitchWarning = useControlledSwitchWarning;
 exports.usePrevious = usePrevious;
+exports.useStateLogger = useStateLogger;
 exports.useUpdateEffect = useUpdateEffect;
 exports.wrapEvent = wrapEvent;
 //# sourceMappingURL=utils.cjs.development.js.map

dist/utils.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;require("warning");var r=u()?n.useLayoutEffect:n.useEffect;function o(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 u(){return"undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement}function i(){}function f(e){return e&&e.ownerDocument?e.ownerDocument:u()?document:null}var c="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();function l(e){return"boolean"==typeof e}function s(e){return!(!e||"[object Function]"!={}.toString.call(e))}exports.assignRef=o,exports.boolOrBoolString=function(e){return"true"===e||!!l(e)&&e},exports.canUseDOM=u,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&&s(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=l,exports.isFunction=s,exports.isNumber=function(e){return"number"==typeof e},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=i,exports.ponyfillGlobal=c,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(i,[r,n,o])},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){o(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.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";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.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)}};
 //# sourceMappingURL=utils.cjs.production.min.js.map

dist/utils.esm.js

@@ -1,2 +0,2 @@
-import React, { isValidElement, cloneElement, createContext, useMemo, useRef, useEffect } from 'react';
+import React, { isValidElement, cloneElement, createContext, useRef, useEffect, useMemo } from 'react';
 import warning from 'warning';
@@ -72,2 +72,12 @@
 /**
+ * Ponyfill for the global object in some environments.
+ *
+ * @link https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
+ */
+
+var ponyfillGlobal = typeof window != "undefined" && window.Math == Math ? window : typeof self != "undefined" && self.Math == Math ? self :
+/*#__PURE__*/
+// eslint-disable-next-line no-new-func
+Function("return this")();
+/**
  * Passes or assigns an arbitrary value to a ref function or object.
@@ -92,2 +102,8 @@ *
 }
+/**
+ * Checks true|"true" vs false|"false"
+ *
+ * @param value
+ */
+
 function boolOrBoolString(value) {
@@ -99,2 +115,10 @@ return value === "true" ? true : isBoolean(value) ? value : false;
 }
+/**
+ * Type-safe clone element
+ *
+ * @param element
+ * @param props
+ * @param children
+ */
+
 function cloneValidElement(element, props) {
@@ -113,2 +137,48 @@ for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
 /**
+ * This is a hack for sure. The thing is, getting a component to intelligently
+ * infer props based on a component or JSX string passed into an `as` prop is
+ * kind of a huge pain. Getting it to work and satisfy the constraints of
+ * `forwardRef` seems dang near impossible. To avoid needing to do this awkward
+ * type song-and-dance every time we want to forward a ref into a component
+ * that accepts an `as` prop, we abstract all of that mess to this function for
+ * the time time being.
+ *
+ * TODO: Eventually we should probably just try to get the type defs above
+ * working across the board, but ain't nobody got time for that mess!
+ *
+ * @param Comp
+ */
+
+function forwardRefWithAs(comp) {
+  return React.forwardRef(comp);
+}
+/**
+ * Get a computed style value by property, backwards compatible with IE
+ * @param element
+ * @param styleProp
+ */
+
+function getElementComputedStyle(element, styleProp) {
+  var y = null;
+  var doc = getOwnerDocument(element);
+
+  if (element.currentStyle) {
+    y = element.currentStyle[styleProp];
+  } else if (doc && doc.defaultView && isFunction(doc.defaultView.getComputedStyle)) {
+    y = doc.defaultView.getComputedStyle(element, null).getPropertyValue(styleProp);
+  }
+
+  return y;
+}
+/**
+ * Get an element's owner document. Useful when components are used in iframes
+ * or other environments like dev tools.
+ *
+ * @param element
+ */
+
+function getOwnerDocument(element) {
+  return element && element.ownerDocument ? element.ownerDocument : canUseDOM() ? document : null;
+}
+/**
  * Get the scrollbar offset distance.
@@ -127,2 +197,47 @@ */
 /**
+ * Checks whether or not a value is a boolean.
+ *
+ * @param value
+ */
+
+function isBoolean(value) {
+  return typeof value === "boolean";
+}
+/**
+ * Checks whether or not a value is a function.
+ *
+ * @param value
+ */
+
+function isFunction(value) {
+  return !!(value && {}.toString.call(value) == "[object Function]");
+}
+/**
+ * Checks whether or not a value is a number.
+ *
+ * @param value
+ */
+
+function isNumber(value) {
+  return typeof value === "number";
+}
+/**
+ * Detects right clicks
+ *
+ * @param nativeEvent
+ */
+
+function isRightClick(nativeEvent) {
+  return nativeEvent.which === 3 || nativeEvent.button === 2;
+}
+/**
+ * Checks whether or not a value is a string.
+ *
+ * @param value
+ */
+
+function isString(value) {
+  return typeof value === "string";
+}
+/**
  * Joins strings to format IDs for compound components.
@@ -148,2 +263,45 @@ *
 /**
+ * Convert our state strings for HTML data attributes.
+ * No need for a fancy kebab-caser here, we know what our state strings are!
+ *
+ * @param state
+ */
+
+function stateToAttributeString(state) {
+  return String(state).replace(/([\s_]+)/g, "-").toLowerCase();
+}
+/**
+ * Logs a warning in dev mode when a component switches from controlled to
+ * uncontrolled, or vice versa
+ *
+ * A single prop should typically be used to determine whether or not a
+ * component is controlled or not.
+ *
+ * @param controlPropValue
+ * @param controlPropName
+ * @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 _useRef = useRef(isControlled),
+      wasControlled = _useRef.current;
+
+  var effect = 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]);
+}
+/**
  * React hook for creating a value exactly once.
@@ -223,2 +381,28 @@ * @see https://github.com/Andarist/use-constant
 /**
+ * Just a lil state logger
+ *
+ * @param state
+ * @param DEBUG
+ */
+
+function useStateLogger(state, DEBUG) {
+  if (DEBUG === void 0) {
+    DEBUG = false;
+  }
+
+  var effect = noop;
+
+  if (process.env.NODE_ENV !== "production") {
+    if (DEBUG) {
+      effect = function effect() {
+        console.group("State Updated");
+        console.log("%c" + state, "font-weight: normal; font-size: 120%; font-style: italic;");
+        console.groupEnd();
+      };
+    }
+  }
+
+  useEffect(effect, [state]);
+}
+/**
  * Wraps a lib-defined event handler and a user-defined event handler, returning
@@ -241,81 +425,4 @@ * a single handler that allows a user to prevent lib-defined handlers from
 }
-/**
- * This is a hack for sure. The thing is, getting a component to intelligently
- * infer props based on a component or JSX string passed into an `as` prop is
- * kind of a huge pain. Getting it to work and satisfy the constraints of
- * `forwardRef` seems dang near impossible. To avoid needing to do this awkward
- * type song-and-dance every time we want to forward a ref into a component
- * that accepts an `as` prop, we abstract all of that mess to this function for
- * the time time being.
- *
- * TODO: Eventually we should probably just try to get the type defs above
- * working across the board, but ain't nobody got time for that mess!
- *
- * @param Comp
- */
 
-function forwardRefWithAs(comp) {
-  return React.forwardRef(comp);
-}
-/**
- * Get a computed style value by property, backwards compatible with IE
- * @param element
- * @param styleProp
- */
-
-function getElementComputedStyle(element, styleProp) {
-  var y = null;
-  var doc = getOwnerDocument(element);
-
-  if (element.currentStyle) {
-    y = element.currentStyle[styleProp];
-  } else if (doc && doc.defaultView && isFunction(doc.defaultView.getComputedStyle)) {
-    y = doc.defaultView.getComputedStyle(element, null).getPropertyValue(styleProp);
-  }
-
-  return y;
-}
-function getOwnerDocument(element) {
-  return element && element.ownerDocument ? element.ownerDocument : canUseDOM() ? document : null;
-} // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
-
-var ponyfillGlobal = typeof window != "undefined" && window.Math == Math ? window : typeof self != "undefined" && self.Math == Math ? self :
-/*#__PURE__*/
-// eslint-disable-next-line no-new-func
-Function("return this")();
-function isBoolean(value) {
-  return typeof value === "boolean";
-}
-function isFunction(value) {
-  return !!(value && {}.toString.call(value) == "[object Function]");
-}
-function isNumber(value) {
-  return typeof value === "number";
-}
-function isString(value) {
-  return typeof value === "string";
-}
-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 _useRef = useRef(isControlled),
-      wasControlled = _useRef.current;
-
-  var effect = 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]);
-}
-
-export { assignRef, boolOrBoolString, canUseDOM, checkStyles, cloneValidElement, createNamedContext, forwardRefWithAs, getElementComputedStyle, getOwnerDocument, getScrollbarOffset, isBoolean, isFunction, isNumber, isString, makeId, noop, ponyfillGlobal, useConstant, useControlledSwitchWarning, useForkedRef, useIsomorphicLayoutEffect, usePrevious, useUpdateEffect, wrapEvent };
+export { assignRef, boolOrBoolString, canUseDOM, checkStyles, cloneValidElement, createNamedContext, forwardRefWithAs, getElementComputedStyle, getOwnerDocument, getScrollbarOffset, isBoolean, isFunction, isNumber, isRightClick, isString, makeId, noop, ponyfillGlobal, stateToAttributeString, useConstant, useControlledSwitchWarning, useForkedRef, useIsomorphicLayoutEffect, usePrevious, useStateLogger, useUpdateEffect, wrapEvent };
 //# sourceMappingURL=utils.esm.js.map

package.json

 {
   "name": "@reach/utils",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "description": "Internal, shared utilities for Reach UI.",
@@ -32,3 +32,3 @@ "author": "React Training <[e-mail]>",
   },
-  "gitHead": "81f50310879a4d99f3eaeba3cd95a66303e0186c"
+  "gitHead": "ac419cf63d0827016ca448bf95482bcd4c5f879e"
 }

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

102210

increased by15.75%

Lines of code

1057

increased by33.29%

Worsened metrics

Number of low supply chain risk alerts

6

increased by20%

No dependency changes