@reach/utils - npm Package Compare versions

Comparing version 0.8.5 to 0.8.6

dist/index.d.ts

@@ -52,3 +52,3 @@ import React from "react";
  */
-export declare function assignRef<RefValueType = any>(ref: AssignableRef<RefValueType> | undefined, value: any): void;
+export declare function assignRef<RefValueType = any>(ref: AssignableRef<RefValueType> | null | undefined, value: any): void;
 /**
@@ -169,2 +169,10 @@ * Checks true|"true" vs false|"false"
 /**
+ * Detect when focus changes in our document.
+ *
+ * @param handleChange
+ * @param when
+ * @param ownerDocument
+ */
+export declare function useFocusChange(handleChange?: (activeElement: Element | null, previousActiveElement: Element | null, event?: FocusEvent) => void, when?: "focus" | "blur", ownerDocument?: Document): void;
+/**
  * Passes or assigns a value to multiple refs (typically a DOM node). Useful for
@@ -176,3 +184,3 @@ * dealing with components that need an explicit ref for DOM calculations but
  */
-export declare function useForkedRef<RefValueType = any>(...refs: (AssignableRef<RefValueType> | undefined)[]): ((node: any) => void) | null;
+export declare function useForkedRef<RefValueType = any>(...refs: (AssignableRef<RefValueType> | null | undefined)[]): ((node: any) => void) | null;
 /**
@@ -179,0 +187,0 @@ * Returns the previous value of a reference after a component update.

dist/types.d.ts

@@ -11,3 +11,3 @@ import * as React from "react";
     bivarianceHack(instance: ValueType | null): void;
-}["bivarianceHack"] | React.MutableRefObject<ValueType | null> | null;
+}["bivarianceHack"] | React.MutableRefObject<ValueType | null>;
 /**
@@ -29,3 +29,5 @@ * Type can be either a single `ValueType` or an array of `ValueType`
  *
- *    Omit<{ a: 'whatever'; b: number }, 'a'> | Omit<{ a: 'whatever'; b: string; c: number }, 'a'>
+ *    type B =
+ *      | Omit<{ a: "whatever"; b: number }, "a">
+        | Omit<{ a: "whatever"; b: string; c: number }, "a">;
  *
@@ -32,0 +34,0 @@ * This is not the case, unfortunately, so we need to create our own version of

dist/utils.cjs.development.js

@@ -41,5 +41,3 @@ 'use strict';
 
-var useIsomorphicLayoutEffect =
-/*#__PURE__*/
-canUseDOM() ? React__default.useLayoutEffect : React__default.useEffect;
+var useIsomorphicLayoutEffect = /*#__PURE__*/canUseDOM() ? React__default.useLayoutEffect : React__default.useEffect;
 var checkedPkgs = {};
@@ -325,2 +323,40 @@ /**
 /**
+ * Detect when focus changes in our document.
+ *
+ * @param handleChange
+ * @param when
+ * @param ownerDocument
+ */
+
+function useFocusChange(handleChange, when, ownerDocument) {
+  if (handleChange === void 0) {
+    handleChange = console.log;
+  }
+
+  if (when === void 0) {
+    when = "focus";
+  }
+
+  if (ownerDocument === void 0) {
+    ownerDocument = document;
+  }
+
+  var lastActiveElement = React.useRef(ownerDocument.activeElement);
+  React.useEffect(function () {
+    lastActiveElement.current = ownerDocument.activeElement;
+
+    function onChange(event) {
+      if (lastActiveElement.current !== ownerDocument.activeElement) {
+        handleChange(ownerDocument.activeElement, lastActiveElement.current, event);
+        lastActiveElement.current = ownerDocument.activeElement;
+      }
+    }
+
+    ownerDocument.addEventListener(when, onChange, true);
+    return function () {
+      ownerDocument.removeEventListener(when, onChange);
+    };
+  }, [when, handleChange, ownerDocument]);
+}
+/**
  * Passes or assigns a value to multiple refs (typically a DOM node). Useful for
@@ -448,2 +484,3 @@ * dealing with components that need an explicit ref for DOM calculations but
 exports.useControlledSwitchWarning = useControlledSwitchWarning;
+exports.useFocusChange = useFocusChange;
 exports.useForkedRef = useForkedRef;
@@ -450,0 +487,0 @@ exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

dist/utils.cjs.production.min.js

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

dist/utils.esm.js

@@ -34,5 +34,3 @@ import React, { isValidElement, cloneElement, createContext, useRef, useEffect, useMemo } from 'react';
 
-var useIsomorphicLayoutEffect =
-/*#__PURE__*/
-canUseDOM() ? React.useLayoutEffect : React.useEffect;
+var useIsomorphicLayoutEffect = /*#__PURE__*/canUseDOM() ? React.useLayoutEffect : React.useEffect;
 var checkedPkgs = {};
@@ -318,2 +316,40 @@ /**
 /**
+ * Detect when focus changes in our document.
+ *
+ * @param handleChange
+ * @param when
+ * @param ownerDocument
+ */
+
+function useFocusChange(handleChange, when, ownerDocument) {
+  if (handleChange === void 0) {
+    handleChange = console.log;
+  }
+
+  if (when === void 0) {
+    when = "focus";
+  }
+
+  if (ownerDocument === void 0) {
+    ownerDocument = document;
+  }
+
+  var lastActiveElement = useRef(ownerDocument.activeElement);
+  useEffect(function () {
+    lastActiveElement.current = ownerDocument.activeElement;
+
+    function onChange(event) {
+      if (lastActiveElement.current !== ownerDocument.activeElement) {
+        handleChange(ownerDocument.activeElement, lastActiveElement.current, event);
+        lastActiveElement.current = ownerDocument.activeElement;
+      }
+    }
+
+    ownerDocument.addEventListener(when, onChange, true);
+    return function () {
+      ownerDocument.removeEventListener(when, onChange);
+    };
+  }, [when, handleChange, ownerDocument]);
+}
+/**
  * Passes or assigns a value to multiple refs (typically a DOM node). Useful for
@@ -421,3 +457,3 @@ * dealing with components that need an explicit ref for DOM calculations but
 
-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 };
+export { assignRef, boolOrBoolString, canUseDOM, checkStyles, cloneValidElement, createNamedContext, forwardRefWithAs, getElementComputedStyle, getOwnerDocument, getScrollbarOffset, isBoolean, isFunction, isNumber, isRightClick, isString, makeId, noop, ponyfillGlobal, stateToAttributeString, useConstant, useControlledSwitchWarning, useFocusChange, useForkedRef, useIsomorphicLayoutEffect, usePrevious, useStateLogger, useUpdateEffect, wrapEvent };
 //# sourceMappingURL=utils.esm.js.map

package.json

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

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

110509

increased by8.12%

Lines of code

1130

increased by6.91%

No dependency changes