@reach/utils - npm Package Compare versions

Comparing version 0.10.0 to 0.10.1

dist/index.d.ts

@@ -34,3 +34,3 @@ import React from "react";
 /**
- * Copy og Facebook's warning package.
+ * Copy of Facebook's warning package.
  */
@@ -91,2 +91,20 @@ export { warning };
 /**
+ * Get the size of the working document minus the scrollbar offset.
+ *
+ * @param element
+ */
+export declare function getDocumentDimensions(element?: HTMLElement | null | undefined): {
+    width: number;
+    height: number;
+};
+/**
+ * Get the scoll position of the global window object relative to a given node.
+ *
+ * @param element
+ */
+export declare function getScrollPosition(element?: HTMLElement | null | undefined): {
+    scrollX: number;
+    scrollY: number;
+};
+/**
  * Get a computed style value by property, backwards compatible with IE
@@ -106,4 +124,7 @@ * @param element
 export declare function getOwnerDocument<T extends HTMLElement = HTMLElement>(element: T | null): Document | null;
+export declare function getOwnerWindow<T extends HTMLElement = HTMLElement>(element: T | null): Window | null;
 /**
  * Get the scrollbar offset distance.
+ *
+ * TODO: Remove in 1.0 (we used this in public examples)
  */
@@ -179,2 +200,3 @@ export declare function getScrollbarOffset(): number;
 export declare function useControlledSwitchWarning(controlPropValue: any, controlPropName: string, componentName: string): void;
+export declare function useCheckStyles(pkg: string): void;
 /**
@@ -190,2 +212,14 @@ * React hook for creating a value exactly once.
 /**
+ * @param callback
+ */
+export declare function useCallbackProp<F extends Function>(callback: F | undefined): F;
+/**
+ * Adds a DOM event listener
+ *
+ * @param eventName
+ * @param listener
+ * @param element
+ */
+export declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, listener: (event: WindowEventMap[K]) => any, element?: HTMLElement | Document | Window | EventTarget): void;
+/**
  * Detect when focus changes in our document.
@@ -192,0 +226,0 @@ *

dist/utils.cjs.development.js

@@ -157,2 +157,37 @@ 'use strict';
 /**
+ * Get the size of the working document minus the scrollbar offset.
+ *
+ * @param element
+ */
+
+function getDocumentDimensions(element) {
+  if (!canUseDOM()) return {
+    width: 0,
+    height: 0
+  };
+  var doc = element ? getOwnerDocument(element) : document;
+  var win = element ? getOwnerWindow(element) : window;
+  return {
+    width: doc.documentElement.clientWidth || win.innerWidth,
+    height: doc.documentElement.clientHeight || win.innerHeight
+  };
+}
+/**
+ * Get the scoll position of the global window object relative to a given node.
+ *
+ * @param element
+ */
+
+function getScrollPosition(element) {
+  if (!canUseDOM()) return {
+    scrollX: 0,
+    scrollY: 0
+  };
+  var win = element ? getOwnerWindow(element) : window;
+  return {
+    scrollX: win.scrollX,
+    scrollY: win.scrollY
+  };
+}
+/**
  * Get a computed style value by property, backwards compatible with IE
@@ -185,4 +220,10 @@ * @param element
 }
+function getOwnerWindow(element) {
+  var doc = element ? getOwnerDocument(element) : null;
+  return doc ? doc.defaultView || window : null;
+}
 /**
  * Get the scrollbar offset distance.
+ *
+ * TODO: Remove in 1.0 (we used this in public examples)
  */
@@ -330,2 +371,8 @@
 }
+function useCheckStyles(pkg) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  React.useEffect(function () {
+    return exports.checkStyles(pkg);
+  }, []);
+}
 /**
@@ -365,2 +412,53 @@ * React hook for creating a value exactly once.
 /**
+ * @param callback
+ */
+
+function useCallbackProp(callback) {
+  var ref = React.useRef(callback);
+  React.useEffect(function () {
+    ref.current = callback;
+  });
+  return React.useCallback(function () {
+    return ref.current && ref.current.apply(ref, arguments);
+  }, []);
+}
+/**
+ * Adds a DOM event listener
+ *
+ * @param eventName
+ * @param listener
+ * @param element
+ */
+
+function useEventListener(eventName, listener, element) {
+  if (element === void 0) {
+    element = window;
+  }
+
+  var savedHandler = React.useRef(listener);
+  React.useEffect(function () {
+    savedHandler.current = listener;
+  }, [listener]);
+  React.useEffect(function () {
+    var isSupported = element && element.addEventListener;
+
+    if (!isSupported) {
+      {
+        console.warn("Event listener not supported on the element provided");
+      }
+
+      return;
+    }
+
+    function eventListener(event) {
+      savedHandler.current(event);
+    }
+
+    element.addEventListener(eventName, eventListener);
+    return function () {
+      element.removeEventListener(eventName, eventListener);
+    };
+  }, [eventName, element]);
+}
+/**
  * Detect when focus changes in our document.
@@ -513,4 +611,7 @@ *
 exports.forwardRefWithAs = forwardRefWithAs;
+exports.getDocumentDimensions = getDocumentDimensions;
 exports.getElementComputedStyle = getElementComputedStyle;
 exports.getOwnerDocument = getOwnerDocument;
+exports.getOwnerWindow = getOwnerWindow;
+exports.getScrollPosition = getScrollPosition;
 exports.getScrollbarOffset = getScrollbarOffset;
@@ -526,2 +627,4 @@ exports.isBoolean = isBoolean;
 exports.stateToAttributeString = stateToAttributeString;
+exports.useCallbackProp = useCallbackProp;
+exports.useCheckStyles = useCheckStyles;
 exports.useConstant = useConstant;
@@ -531,2 +634,3 @@ exports.useControlledState = useControlledState;
 exports.useEventCallback = useEventCallback;
+exports.useEventListener = useEventListener;
 exports.useFocusChange = useFocusChange;
@@ -533,0 +637,0 @@ exports.useForkedRef = useForkedRef;

dist/utils.cjs.production.min.js

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

dist/utils.esm.js

@@ -151,2 +151,37 @@ import React, { isValidElement, cloneElement, createContext, useRef, useState, useCallback, useEffect, useMemo } from 'react';
 /**
+ * Get the size of the working document minus the scrollbar offset.
+ *
+ * @param element
+ */
+
+function getDocumentDimensions(element) {
+  if (!canUseDOM()) return {
+    width: 0,
+    height: 0
+  };
+  var doc = element ? getOwnerDocument(element) : document;
+  var win = element ? getOwnerWindow(element) : window;
+  return {
+    width: doc.documentElement.clientWidth || win.innerWidth,
+    height: doc.documentElement.clientHeight || win.innerHeight
+  };
+}
+/**
+ * Get the scoll position of the global window object relative to a given node.
+ *
+ * @param element
+ */
+
+function getScrollPosition(element) {
+  if (!canUseDOM()) return {
+    scrollX: 0,
+    scrollY: 0
+  };
+  var win = element ? getOwnerWindow(element) : window;
+  return {
+    scrollX: win.scrollX,
+    scrollY: win.scrollY
+  };
+}
+/**
  * Get a computed style value by property, backwards compatible with IE
@@ -179,4 +214,10 @@ * @param element
 }
+function getOwnerWindow(element) {
+  var doc = element ? getOwnerDocument(element) : null;
+  return doc ? doc.defaultView || window : null;
+}
 /**
  * Get the scrollbar offset distance.
+ *
+ * TODO: Remove in 1.0 (we used this in public examples)
  */
@@ -324,2 +365,8 @@
 }
+function useCheckStyles(pkg) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(function () {
+    return checkStyles(pkg);
+  }, []);
+}
 /**
@@ -359,2 +406,53 @@ * React hook for creating a value exactly once.
 /**
+ * @param callback
+ */
+
+function useCallbackProp(callback) {
+  var ref = useRef(callback);
+  useEffect(function () {
+    ref.current = callback;
+  });
+  return useCallback(function () {
+    return ref.current && ref.current.apply(ref, arguments);
+  }, []);
+}
+/**
+ * Adds a DOM event listener
+ *
+ * @param eventName
+ * @param listener
+ * @param element
+ */
+
+function useEventListener(eventName, listener, element) {
+  if (element === void 0) {
+    element = window;
+  }
+
+  var savedHandler = useRef(listener);
+  useEffect(function () {
+    savedHandler.current = listener;
+  }, [listener]);
+  useEffect(function () {
+    var isSupported = element && element.addEventListener;
+
+    if (!isSupported) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn("Event listener not supported on the element provided");
+      }
+
+      return;
+    }
+
+    function eventListener(event) {
+      savedHandler.current(event);
+    }
+
+    element.addEventListener(eventName, eventListener);
+    return function () {
+      element.removeEventListener(eventName, eventListener);
+    };
+  }, [eventName, element]);
+}
+/**
  * Detect when focus changes in our document.
@@ -500,3 +598,3 @@ *
 
-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 };
+export { assignRef, boolOrBoolString, canUseDOM, checkStyles, cloneValidElement, createNamedContext, forwardRefWithAs, getDocumentDimensions, getElementComputedStyle, getOwnerDocument, getOwnerWindow, getScrollPosition, getScrollbarOffset, isBoolean, isFunction, isNumber, isRightClick, isString, makeId, noop, ponyfillGlobal, stateToAttributeString, useCallbackProp, useCheckStyles, useConstant, useControlledState, useControlledSwitchWarning, useEventCallback, useEventListener, useFocusChange, useForkedRef, useIsomorphicLayoutEffect, usePrevious, useStateLogger, useUpdateEffect, wrapEvent };
 //# sourceMappingURL=utils.esm.js.map

package.json

 {
   "name": "@reach/utils",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "Internal, shared utilities for Reach UI.",
@@ -27,6 +27,7 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "tslib": "^1.10.0",
+    "@types/warning": "^3.0.0",
+    "tslib": "^1.11.1",
     "warning": "^4.0.3"
   },
-  "gitHead": "e95268bdcebc7f0b5311beff4b6a8e29636decfe"
+  "gitHead": "c279bc0fb9ae84aa77306c5f1a9909d088bc665c"
 }

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

140651

increased by16.98%

Lines of code

1459

increased by18.04%

Worsened metrics

Dependency count

5

increased by25%

Number of low supply chain risk alerts

7

increased by16.67%

Dependency changes

• + Added@types/warning@^3.0.0

• + Added@types/warning@3.0.3(transitive)

• Updatedtslib@^1.11.1