@reach/utils - npm Package Compare versions

Comparing version 0.8.2 to 0.8.3

dist/index.d.ts

@@ -115,2 +115,10 @@ import React from "react";
 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;
@@ -117,0 +125,0 @@ export declare let ponyfillGlobal: any;

dist/utils.cjs.development.js

@@ -55,4 +55,11 @@ 'use strict';
   return void packageName;
-};
+}; // In CJS files, "development" is stripped from our build, but we need it
+// to prevent style checks from clogging up user logs while testing.
+// This is a workaround until we can tweak the build a bit to accommodate.
 
+
+var _process = process,
+    env = _process.env;
+var nodeEnv = env.NODE_ENV;
+
 {
@@ -64,4 +71,4 @@ exports.checkStyles = function checkStyles(packageName) {
 
-    if ( parseInt(window.getComputedStyle(document.body).getPropertyValue("--reach-" + packageName), 10) !== 1) {
-      console.warn("@reach/" + packageName + " styles not found. If you are using a bundler like webpack or parcel include this in the entry file of your app before any of your own styles:\n\n    import \"@reach/" + packageName + "/styles.css\";\nimport warning from 'warning';\n\n  Otherwise you'll need to include them some other way:\n\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"node_modules/@reach/" + packageName + "/styles.css\" />\n\n  For more information visit https://ui.reach.tech/styling.\n  ");
+    if (nodeEnv !== "test" && parseInt(window.getComputedStyle(document.body).getPropertyValue("--reach-" + packageName), 10) !== 1) {
+      console.warn("@reach/" + packageName + " styles not found. If you are using a bundler like webpack or parcel include this in the entry file of your app before any of your own styles:\n\n    import \"@reach/" + packageName + "/styles.css\";\n\n  Otherwise you'll need to include them some other way:\n\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"node_modules/@reach/" + packageName + "/styles.css\" />\n\n  For more information visit https://ui.reach.tech/styling.\n  ");
     }
@@ -251,2 +258,20 @@ };
 }
+/**
+ * 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) {
@@ -300,2 +325,3 @@ return element && element.ownerDocument ? element.ownerDocument : canUseDOM() ? document : null;
 exports.forwardRefWithAs = forwardRefWithAs;
+exports.getElementComputedStyle = getElementComputedStyle;
 exports.getOwnerDocument = getOwnerDocument;
@@ -302,0 +328,0 @@ exports.getScrollbarOffset = getScrollbarOffset;

dist/utils.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,n=require("react"),t=(e=n)&&"object"==typeof e&&"default"in e?e.default:e;require("warning");var r=u()?t.useLayoutEffect:t.useEffect;function o(e,n){if(null!=e)if(s(e))e(n);else try{e.current=n}catch(t){throw new Error('Cannot assign value "'+n+'" to ref "'+e+'"')}}function u(){return"undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement}function i(){}var c="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();function f(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||!!f(e)&&e},exports.canUseDOM=u,exports.checkStyles=function(e){},exports.cloneValidElement=function(e,t){for(var r=arguments.length,o=new Array(r>2?r-2:0),u=2;u<r;u++)o[u-2]=arguments[u];return n.isValidElement(e)?n.cloneElement.apply(void 0,[e,t].concat(o)):e},exports.createNamedContext=function(e,t){var r=n.createContext(t);return r.displayName=e,r},exports.forwardRefWithAs=function(e){return t.forwardRef(e)},exports.getOwnerDocument=function(e){return e&&e.ownerDocument?e.ownerDocument:u()?document:null},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.isString=function(e){return"string"==typeof e},exports.makeId=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return n.filter((function(e){return null!=e})).join("--")},exports.noop=i,exports.ponyfillGlobal=c,exports.useConstant=function(e){var n=t.useRef();return n.current||(n.current={v:e()}),n.current.v},exports.useControlledSwitchWarning=function(e,t,r){var o=null!=e;n.useRef(o),n.useEffect(i,[r,t,o])},exports.useForkedRef=function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return n.useMemo((function(){return t.every((function(e){return null==e}))?null:function(e){t.forEach((function(n){o(n,e)}))}}),t)},exports.useIsomorphicLayoutEffect=r,exports.usePrevious=function(e){var t=n.useRef(null);return n.useEffect((function(){t.current=e}),[e]),t.current},exports.useUpdateEffect=function(e,t){var r=n.useRef(!1);n.useEffect((function(){r.current?e():r.current=!0}),t)},exports.wrapEvent=function(e,n){return function(t){if(e&&e(t),!t.defaultPrevented)return n(t)}};
+"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 c(e){return e&&e.ownerDocument?e.ownerDocument:u()?document:null}process;var f="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=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=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=f,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)}};
 //# sourceMappingURL=utils.cjs.production.min.js.map

dist/utils.esm.js

@@ -48,4 +48,11 @@ import React, { isValidElement, cloneElement, createContext, useMemo, useRef, useEffect } from 'react';
   return void packageName;
-};
+}; // In CJS files, process.env.NODE_ENV is stripped from our build, but we need it
+// to prevent style checks from clogging up user logs while testing.
+// This is a workaround until we can tweak the build a bit to accommodate.
 
+
+var _process = process,
+    env = _process.env;
+var nodeEnv = env.NODE_ENV;
+
 if (process.env.NODE_ENV !== "production") {
@@ -57,4 +64,4 @@ checkStyles = function checkStyles(packageName) {
 
-    if (process.env.NODE_ENV !== "test" && parseInt(window.getComputedStyle(document.body).getPropertyValue("--reach-" + packageName), 10) !== 1) {
-      console.warn("@reach/" + packageName + " styles not found. If you are using a bundler like webpack or parcel include this in the entry file of your app before any of your own styles:\n\n    import \"@reach/" + packageName + "/styles.css\";\nimport warning from 'warning';\n\n  Otherwise you'll need to include them some other way:\n\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"node_modules/@reach/" + packageName + "/styles.css\" />\n\n  For more information visit https://ui.reach.tech/styling.\n  ");
+    if (nodeEnv !== "test" && parseInt(window.getComputedStyle(document.body).getPropertyValue("--reach-" + packageName), 10) !== 1) {
+      console.warn("@reach/" + packageName + " styles not found. If you are using a bundler like webpack or parcel include this in the entry file of your app before any of your own styles:\n\n    import \"@reach/" + packageName + "/styles.css\";\n\n  Otherwise you'll need to include them some other way:\n\n    <link rel=\"stylesheet\" type=\"text/css\" href=\"node_modules/@reach/" + packageName + "/styles.css\" />\n\n  For more information visit https://ui.reach.tech/styling.\n  ");
     }
@@ -244,2 +251,20 @@ };
 }
+/**
+ * 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) {
@@ -287,3 +312,3 @@ return element && element.ownerDocument ? element.ownerDocument : canUseDOM() ? document : null;
 
-export { assignRef, boolOrBoolString, canUseDOM, checkStyles, cloneValidElement, createNamedContext, forwardRefWithAs, 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, isString, makeId, noop, ponyfillGlobal, useConstant, useControlledSwitchWarning, useForkedRef, useIsomorphicLayoutEffect, usePrevious, useUpdateEffect, wrapEvent };
 //# sourceMappingURL=utils.esm.js.map

package.json

 {
   "name": "@reach/utils",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "Internal, shared utilities for Reach UI.",
@@ -32,3 +32,3 @@ "author": "React Training <[e-mail]>",
   },
-  "gitHead": "ed24a5bb43a87adc36179283ca1de2c5af4ea26e"
+  "gitHead": "5bf1ce48db867c6b3c88e19f1614a6a725e829a0"
 }

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

87792

increased by7.8%

Lines of code

785

increased by6.66%

Number of low supply chain risk alerts

5

decreased by-16.67%

No dependency changes