@fremtind/jkl-react-hooks - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

build/browser/index.js

@@ -1,2 +0,2 @@
-import React, { useRef, useState, useLayoutEffect, useEffect, useReducer } from 'react';
+import React, { useRef, useState, useCallback, useLayoutEffect, useEffect, useReducer } from 'react';
 import { breakpoints } from '@fremtind/jkl-core';
@@ -54,3 +54,3 @@
 function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -63,6 +63,3 @@
 function _iterableToArrayLimit(arr, i) {
-  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
-    return;
-  }
-
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
   var _arr = [];
@@ -93,9 +90,26 @@ var _n = true;
 
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(n);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
 function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance");
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
 function useAnimatedHeight(isOpen) {
-  var raf1;
-  var raf2;
+  var raf1 = useRef();
+  var raf2 = useRef();
   var elementRef = useRef(null);
@@ -116,3 +130,3 @@
 
-  function runAnimation() {
+  var runAnimation = useCallback(function () {
     var element = getElement(elementRef);
@@ -129,4 +143,4 @@
         element.style.height = "".concat(element.scrollHeight, "px");
-        raf1 = requestAnimationFrame(function () {
-          raf2 = requestAnimationFrame(function () {
+        raf1.current = requestAnimationFrame(function () {
+          raf2.current = requestAnimationFrame(function () {
             element.style.height = "".concat(0, "px");
@@ -137,4 +151,3 @@ });
     }
-  }
-
+  }, [isOpen]);
   useLayoutEffect(function () {
@@ -144,3 +157,3 @@ if (!isFirstRender) {
     }
-  }, [isOpen]);
+  }, [isOpen, isFirstRender, runAnimation]);
   useEffect(function () {
@@ -160,8 +173,10 @@ var element = getElement(elementRef);
   useEffect(function () {
+    var r1 = raf1.current;
+    var r2 = raf2.current;
     setIsFirstRender(false);
     return function () {
-      cancelAnimationFrame(raf1);
-      cancelAnimationFrame(raf2);
+      r1 && cancelAnimationFrame(r1);
+      r2 && cancelAnimationFrame(r2);
     };
-  }, []);
+  }, [raf1, raf2]);
   return [elementRef, runAnimation];
@@ -234,9 +249,11 @@ }
   useEffect(function () {
-    if (ref && ref.current) {
-      ref.current.addEventListener("keydown", handleKeyDown);
+    var element = ref && ref.current;
+
+    if (element) {
+      element.addEventListener("keydown", handleKeyDown);
     }
 
     return function () {
-      if (ref && ref.current) {
-        ref.current.removeEventListener("keydown", handleKeyDown);
+      if (element) {
+        element.removeEventListener("keydown", handleKeyDown);
       }
@@ -254,4 +271,5 @@ };
   useEffect(function () {
+    var observer = observerRef.current;
+
     if (hasWindowWithMutationObserver()) {
-      var observer = observerRef.current;
       var target = targetRef.current;
@@ -271,7 +289,7 @@
     return function () {
-      if (hasWindowWithMutationObserver() && observerRef && observerRef.current) {
-        observerRef.current.disconnect();
+      if (hasWindowWithMutationObserver() && observer) {
+        observer.disconnect();
       }
     };
-  }, [targetRef]);
+  }, [targetRef, onObservation, config]);
 };
@@ -286,4 +304,5 @@
   useEffect(function () {
+    var observer = observerRef.current;
+
     if (hasWindowWithIntersectionObserver()) {
-      var observer = observerRef.current;
       var target = targetRef.current;
@@ -305,7 +324,7 @@
     return function () {
-      if (hasWindowWithIntersectionObserver() && observerRef && observerRef.current) {
-        observerRef.current.disconnect();
+      if (hasWindowWithIntersectionObserver() && observer) {
+        observer.disconnect();
       }
     };
-  }, [targetRef]);
+  }, [targetRef, onIntersect, fallback, options]);
 };
@@ -312,0 +331,0 @@

build/browser/index.min.js

@@ -1,1 +0,1 @@
-import e,{useRef as n,useState as t,useLayoutEffect as r,useEffect as i,useReducer as o}from"react";import{breakpoints as c}from"@fremtind/jkl-core";function u(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function f(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function a(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?f(Object(t),!0).forEach((function(n){u(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):f(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function s(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)))return;var t=[],r=!0,i=!1,o=void 0;try{for(var c,u=e[Symbol.iterator]();!(r=(c=u.next()).done)&&(t.push(c.value),!n||t.length!==n);r=!0);}catch(e){i=!0,o=e}finally{try{r||null==u.return||u.return()}finally{if(i)throw o}}return t}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function d(e){var o,c,u=n(null),f=s(t(!0),2),a=f[0],d=f[1];function v(){var e=l(u);e&&e.removeAttribute("style")}function m(){var n=l(u);n&&(n.style.display="block",n.style.overflow="hidden",e?(n.style.height="0",n.style.height="".concat(n.scrollHeight,"px")):(n.style.height="".concat(n.scrollHeight,"px"),o=requestAnimationFrame((function(){c=requestAnimationFrame((function(){n.style.height="".concat(0,"px")}))}))))}return r((function(){a||m()}),[e]),i((function(){var e=l(u);return e&&e.addEventListener("transitionend",v),function(){e&&e.removeEventListener("transitionend",v)}}),[e]),i((function(){return d(!1),function(){cancelAnimationFrame(o),cancelAnimationFrame(c)}}),[]),[u,m]}function l(e){return e.current&&(e.current.el||e.current)}function v(n,t){function r(e){n&&n.current&&!n.current.contains(e.target)&&t()}e.useEffect((function(){return n&&document&&document.addEventListener("click",r),function(){n&&document&&document.removeEventListener("click",r)}}))}function m(n,t){function r(e){n&&n.current&&!n.current.contains(e.target)&&t()}e.useEffect((function(){return n&&document&&document.addEventListener("focusin",r),function(){n&&document&&document.removeEventListener("focusin",r)}}))}function w(e,n,t){function r(e){n&&!n.includes(e.key)||t(e)}"string"==typeof n&&(n=[n]),i((function(){return e&&e.current&&e.current.addEventListener("keydown",r),function(){e&&e.current&&e.current.removeEventListener("keydown",r)}}))}var y,p=function(){return"undefined"!=typeof window&&"undefined"!=typeof MutationObserver},h=function(e,t,r){var o=n(null);i((function(){if(p()){var n=o.current,i=e.current;n&&n.disconnect(),n=new MutationObserver(t),i&&n.observe(i,r)}return function(){p()&&o&&o.current&&o.current.disconnect()}}),[e])},b=function(){return"undefined"!=typeof window&&"undefined"!=typeof IntersectionObserver},g=function(e,t,r,o){var c=n(null);i((function(){if(b()){var n=c.current,i=e.current;n&&n.disconnect(),n=new IntersectionObserver(t,o),i&&n.observe(i)}else r();return function(){b()&&c&&c.current&&c.current.disconnect()}}),[e])};!function(e){e.resized="WINDOW_RESIZED"}(y||(y={}));var O={resized:y.resized},E=function(e,n){return{isSmallDevice:e<c.small,isMediumDevice:e>c.small&&e<c.medium,isLargeDevice:e>c.medium&&e<c.large,isXlDevice:e>c.large,isPortrait:n>=e,isLandscape:n<e,inner:{height:n,width:e}}},j={isSmallDevice:!1,isMediumDevice:!1,isLargeDevice:!1,isXlDevice:!1,isLandscape:!1,isPortrait:!1,inner:{height:0,width:0}},D=function(){var e="undefined"!=typeof window?window.innerWidth:0,n="undefined"!=typeof window?window.innerHeight:0;return E(e,n)},L=function(e,n){var t=n.type,r=n.width,i=n.height;switch(t){case O.resized:return a({},e,{},E(r,i))}},P=function(){var e=s(o(L,j,D),2),n=e[0],t=e[1],r=function(){return requestAnimationFrame((function(){return t({type:O.resized,width:window.innerWidth,height:window.innerHeight})}))};return i((function(){return"undefined"!=typeof window&&window.addEventListener("resize",r),function(){"undefined"!=typeof window&&window.removeEventListener("resize",r)}}),[]),a({},n)};export{j as initialScreenState,d as useAnimatedHeight,v as useClickOutside,m as useFocusOutside,g as useIntersectionObserver,w as useKeyListener,h as useMutationObserver,P as useScreen};
+import e,{useRef as n,useState as t,useCallback as r,useLayoutEffect as i,useEffect as o,useReducer as c}from"react";import{breakpoints as u}from"@fremtind/jkl-core";function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function f(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function s(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?f(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):f(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function d(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var t=[],r=!0,i=!1,o=void 0;try{for(var c,u=e[Symbol.iterator]();!(r=(c=u.next()).done)&&(t.push(c.value),!n||t.length!==n);r=!0);}catch(e){i=!0,o=e}finally{try{r||null==u.return||u.return()}finally{if(i)throw o}}return t}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return l(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(t);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return l(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function v(e){var c=n(),u=n(),a=n(null),f=d(t(!0),2),s=f[0],l=f[1];function v(){var e=m(a);e&&e.removeAttribute("style")}var y=r((function(){var n=m(a);n&&(n.style.display="block",n.style.overflow="hidden",e?(n.style.height="0",n.style.height="".concat(n.scrollHeight,"px")):(n.style.height="".concat(n.scrollHeight,"px"),c.current=requestAnimationFrame((function(){u.current=requestAnimationFrame((function(){n.style.height="".concat(0,"px")}))}))))}),[e]);return i((function(){s||y()}),[e,s,y]),o((function(){var e=m(a);return e&&e.addEventListener("transitionend",v),function(){e&&e.removeEventListener("transitionend",v)}}),[e]),o((function(){var e=c.current,n=u.current;return l(!1),function(){e&&cancelAnimationFrame(e),n&&cancelAnimationFrame(n)}}),[c,u]),[a,y]}function m(e){return e.current&&(e.current.el||e.current)}function y(n,t){function r(e){n&&n.current&&!n.current.contains(e.target)&&t()}e.useEffect((function(){return n&&document&&document.addEventListener("click",r),function(){n&&document&&document.removeEventListener("click",r)}}))}function p(n,t){function r(e){n&&n.current&&!n.current.contains(e.target)&&t()}e.useEffect((function(){return n&&document&&document.addEventListener("focusin",r),function(){n&&document&&document.removeEventListener("focusin",r)}}))}function w(e,n,t){function r(e){n&&!n.includes(e.key)||t(e)}"string"==typeof n&&(n=[n]),o((function(){var n=e&&e.current;return n&&n.addEventListener("keydown",r),function(){n&&n.removeEventListener("keydown",r)}}))}var h,b=function(){return"undefined"!=typeof window&&"undefined"!=typeof MutationObserver},g=function(e,t,r){var i=n(null);o((function(){var n=i.current;if(b()){var o=e.current;n&&n.disconnect(),n=new MutationObserver(t),o&&n.observe(o,r)}return function(){b()&&n&&n.disconnect()}}),[e,t,r])},O=function(){return"undefined"!=typeof window&&"undefined"!=typeof IntersectionObserver},j=function(e,t,r,i){var c=n(null);o((function(){var n=c.current;if(O()){var o=e.current;n&&n.disconnect(),n=new IntersectionObserver(t,i),o&&n.observe(o)}else r();return function(){O()&&n&&n.disconnect()}}),[e,t,r,i])};!function(e){e.resized="WINDOW_RESIZED"}(h||(h={}));var E={resized:h.resized},D=function(e,n){return{isSmallDevice:e<u.small,isMediumDevice:e>u.small&&e<u.medium,isLargeDevice:e>u.medium&&e<u.large,isXlDevice:e>u.large,isPortrait:n>=e,isLandscape:n<e,inner:{height:n,width:e}}},L={isSmallDevice:!1,isMediumDevice:!1,isLargeDevice:!1,isXlDevice:!1,isLandscape:!1,isPortrait:!1,inner:{height:0,width:0}},S=function(){var e="undefined"!=typeof window?window.innerWidth:0,n="undefined"!=typeof window?window.innerHeight:0;return D(e,n)},A=function(e,n){var t=n.type,r=n.width,i=n.height;switch(t){case E.resized:return s({},e,{},D(r,i))}},P=function(){var e=d(c(A,L,S),2),n=e[0],t=e[1],r=function(){return requestAnimationFrame((function(){return t({type:E.resized,width:window.innerWidth,height:window.innerHeight})}))};return o((function(){return"undefined"!=typeof window&&window.addEventListener("resize",r),function(){"undefined"!=typeof window&&window.removeEventListener("resize",r)}}),[]),s({},n)};export{L as initialScreenState,v as useAnimatedHeight,y as useClickOutside,p as useFocusOutside,j as useIntersectionObserver,w as useKeyListener,g as useMutationObserver,P as useScreen};

build/cjs/index.js

@@ -61,3 +61,3 @@ 'use strict';
 function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -70,6 +70,3 @@
 function _iterableToArrayLimit(arr, i) {
-  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
-    return;
-  }
-
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
   var _arr = [];
@@ -100,9 +97,26 @@ var _n = true;
 
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(n);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
 function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance");
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
 function useAnimatedHeight(isOpen) {
-  var raf1;
-  var raf2;
+  var raf1 = React.useRef();
+  var raf2 = React.useRef();
   var elementRef = React.useRef(null);
@@ -123,3 +137,3 @@
 
-  function runAnimation() {
+  var runAnimation = React.useCallback(function () {
     var element = getElement(elementRef);
@@ -136,4 +150,4 @@
         element.style.height = "".concat(element.scrollHeight, "px");
-        raf1 = requestAnimationFrame(function () {
-          raf2 = requestAnimationFrame(function () {
+        raf1.current = requestAnimationFrame(function () {
+          raf2.current = requestAnimationFrame(function () {
             element.style.height = "".concat(0, "px");
@@ -144,4 +158,3 @@ });
     }
-  }
-
+  }, [isOpen]);
   React.useLayoutEffect(function () {
@@ -151,3 +164,3 @@ if (!isFirstRender) {
     }
-  }, [isOpen]);
+  }, [isOpen, isFirstRender, runAnimation]);
   React.useEffect(function () {
@@ -167,8 +180,10 @@ var element = getElement(elementRef);
   React.useEffect(function () {
+    var r1 = raf1.current;
+    var r2 = raf2.current;
     setIsFirstRender(false);
     return function () {
-      cancelAnimationFrame(raf1);
-      cancelAnimationFrame(raf2);
+      r1 && cancelAnimationFrame(r1);
+      r2 && cancelAnimationFrame(r2);
     };
-  }, []);
+  }, [raf1, raf2]);
   return [elementRef, runAnimation];
@@ -241,9 +256,11 @@ }
   React.useEffect(function () {
-    if (ref && ref.current) {
-      ref.current.addEventListener("keydown", handleKeyDown);
+    var element = ref && ref.current;
+
+    if (element) {
+      element.addEventListener("keydown", handleKeyDown);
     }
 
     return function () {
-      if (ref && ref.current) {
-        ref.current.removeEventListener("keydown", handleKeyDown);
+      if (element) {
+        element.removeEventListener("keydown", handleKeyDown);
       }
@@ -261,4 +278,5 @@ };
   React.useEffect(function () {
+    var observer = observerRef.current;
+
     if (hasWindowWithMutationObserver()) {
-      var observer = observerRef.current;
       var target = targetRef.current;
@@ -278,7 +296,7 @@
     return function () {
-      if (hasWindowWithMutationObserver() && observerRef && observerRef.current) {
-        observerRef.current.disconnect();
+      if (hasWindowWithMutationObserver() && observer) {
+        observer.disconnect();
       }
     };
-  }, [targetRef]);
+  }, [targetRef, onObservation, config]);
 };
@@ -293,4 +311,5 @@
   React.useEffect(function () {
+    var observer = observerRef.current;
+
     if (hasWindowWithIntersectionObserver()) {
-      var observer = observerRef.current;
       var target = targetRef.current;
@@ -312,7 +331,7 @@
     return function () {
-      if (hasWindowWithIntersectionObserver() && observerRef && observerRef.current) {
-        observerRef.current.disconnect();
+      if (hasWindowWithIntersectionObserver() && observer) {
+        observer.disconnect();
       }
     };
-  }, [targetRef]);
+  }, [targetRef, onIntersect, fallback, options]);
 };
@@ -319,0 +338,0 @@

build/esm/index.js

@@ -1,2 +0,2 @@
-import React, { useRef, useState, useLayoutEffect, useEffect, useReducer } from 'react';
+import React, { useRef, useState, useCallback, useLayoutEffect, useEffect, useReducer } from 'react';
 import { breakpoints } from '@fremtind/jkl-core';
@@ -54,3 +54,3 @@
 function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -63,6 +63,3 @@
 function _iterableToArrayLimit(arr, i) {
-  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
-    return;
-  }
-
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
   var _arr = [];
@@ -93,9 +90,26 @@ var _n = true;
 
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(n);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
 function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance");
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
 function useAnimatedHeight(isOpen) {
-  var raf1;
-  var raf2;
+  var raf1 = useRef();
+  var raf2 = useRef();
   var elementRef = useRef(null);
@@ -116,3 +130,3 @@
 
-  function runAnimation() {
+  var runAnimation = useCallback(function () {
     var element = getElement(elementRef);
@@ -129,4 +143,4 @@
         element.style.height = "".concat(element.scrollHeight, "px");
-        raf1 = requestAnimationFrame(function () {
-          raf2 = requestAnimationFrame(function () {
+        raf1.current = requestAnimationFrame(function () {
+          raf2.current = requestAnimationFrame(function () {
             element.style.height = "".concat(0, "px");
@@ -137,4 +151,3 @@ });
     }
-  }
-
+  }, [isOpen]);
   useLayoutEffect(function () {
@@ -144,3 +157,3 @@ if (!isFirstRender) {
     }
-  }, [isOpen]);
+  }, [isOpen, isFirstRender, runAnimation]);
   useEffect(function () {
@@ -160,8 +173,10 @@ var element = getElement(elementRef);
   useEffect(function () {
+    var r1 = raf1.current;
+    var r2 = raf2.current;
     setIsFirstRender(false);
     return function () {
-      cancelAnimationFrame(raf1);
-      cancelAnimationFrame(raf2);
+      r1 && cancelAnimationFrame(r1);
+      r2 && cancelAnimationFrame(r2);
     };
-  }, []);
+  }, [raf1, raf2]);
   return [elementRef, runAnimation];
@@ -234,9 +249,11 @@ }
   useEffect(function () {
-    if (ref && ref.current) {
-      ref.current.addEventListener("keydown", handleKeyDown);
+    var element = ref && ref.current;
+
+    if (element) {
+      element.addEventListener("keydown", handleKeyDown);
     }
 
     return function () {
-      if (ref && ref.current) {
-        ref.current.removeEventListener("keydown", handleKeyDown);
+      if (element) {
+        element.removeEventListener("keydown", handleKeyDown);
       }
@@ -254,4 +271,5 @@ };
   useEffect(function () {
+    var observer = observerRef.current;
+
     if (hasWindowWithMutationObserver()) {
-      var observer = observerRef.current;
       var target = targetRef.current;
@@ -271,7 +289,7 @@
     return function () {
-      if (hasWindowWithMutationObserver() && observerRef && observerRef.current) {
-        observerRef.current.disconnect();
+      if (hasWindowWithMutationObserver() && observer) {
+        observer.disconnect();
       }
     };
-  }, [targetRef]);
+  }, [targetRef, onObservation, config]);
 };
@@ -286,4 +304,5 @@
   useEffect(function () {
+    var observer = observerRef.current;
+
     if (hasWindowWithIntersectionObserver()) {
-      var observer = observerRef.current;
       var target = targetRef.current;
@@ -305,7 +324,7 @@
     return function () {
-      if (hasWindowWithIntersectionObserver() && observerRef && observerRef.current) {
-        observerRef.current.disconnect();
+      if (hasWindowWithIntersectionObserver() && observer) {
+        observer.disconnect();
       }
     };
-  }, [targetRef]);
+  }, [targetRef, onIntersect, fallback, options]);
 };
@@ -312,0 +331,0 @@

build/esm/index.min.js

@@ -1,1 +0,1 @@
-import e,{useRef as n,useState as t,useLayoutEffect as r,useEffect as i,useReducer as o}from"react";import{breakpoints as c}from"@fremtind/jkl-core";function u(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function f(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function a(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?f(Object(t),!0).forEach((function(n){u(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):f(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function s(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)))return;var t=[],r=!0,i=!1,o=void 0;try{for(var c,u=e[Symbol.iterator]();!(r=(c=u.next()).done)&&(t.push(c.value),!n||t.length!==n);r=!0);}catch(e){i=!0,o=e}finally{try{r||null==u.return||u.return()}finally{if(i)throw o}}return t}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function d(e){var o,c,u=n(null),f=s(t(!0),2),a=f[0],d=f[1];function v(){var e=l(u);e&&e.removeAttribute("style")}function m(){var n=l(u);n&&(n.style.display="block",n.style.overflow="hidden",e?(n.style.height="0",n.style.height="".concat(n.scrollHeight,"px")):(n.style.height="".concat(n.scrollHeight,"px"),o=requestAnimationFrame((function(){c=requestAnimationFrame((function(){n.style.height="".concat(0,"px")}))}))))}return r((function(){a||m()}),[e]),i((function(){var e=l(u);return e&&e.addEventListener("transitionend",v),function(){e&&e.removeEventListener("transitionend",v)}}),[e]),i((function(){return d(!1),function(){cancelAnimationFrame(o),cancelAnimationFrame(c)}}),[]),[u,m]}function l(e){return e.current&&(e.current.el||e.current)}function v(n,t){function r(e){n&&n.current&&!n.current.contains(e.target)&&t()}e.useEffect((function(){return n&&document&&document.addEventListener("click",r),function(){n&&document&&document.removeEventListener("click",r)}}))}function m(n,t){function r(e){n&&n.current&&!n.current.contains(e.target)&&t()}e.useEffect((function(){return n&&document&&document.addEventListener("focusin",r),function(){n&&document&&document.removeEventListener("focusin",r)}}))}function w(e,n,t){function r(e){n&&!n.includes(e.key)||t(e)}"string"==typeof n&&(n=[n]),i((function(){return e&&e.current&&e.current.addEventListener("keydown",r),function(){e&&e.current&&e.current.removeEventListener("keydown",r)}}))}var y,p=function(){return"undefined"!=typeof window&&"undefined"!=typeof MutationObserver},h=function(e,t,r){var o=n(null);i((function(){if(p()){var n=o.current,i=e.current;n&&n.disconnect(),n=new MutationObserver(t),i&&n.observe(i,r)}return function(){p()&&o&&o.current&&o.current.disconnect()}}),[e])},b=function(){return"undefined"!=typeof window&&"undefined"!=typeof IntersectionObserver},g=function(e,t,r,o){var c=n(null);i((function(){if(b()){var n=c.current,i=e.current;n&&n.disconnect(),n=new IntersectionObserver(t,o),i&&n.observe(i)}else r();return function(){b()&&c&&c.current&&c.current.disconnect()}}),[e])};!function(e){e.resized="WINDOW_RESIZED"}(y||(y={}));var O={resized:y.resized},E=function(e,n){return{isSmallDevice:e<c.small,isMediumDevice:e>c.small&&e<c.medium,isLargeDevice:e>c.medium&&e<c.large,isXlDevice:e>c.large,isPortrait:n>=e,isLandscape:n<e,inner:{height:n,width:e}}},j={isSmallDevice:!1,isMediumDevice:!1,isLargeDevice:!1,isXlDevice:!1,isLandscape:!1,isPortrait:!1,inner:{height:0,width:0}},D=function(){var e="undefined"!=typeof window?window.innerWidth:0,n="undefined"!=typeof window?window.innerHeight:0;return E(e,n)},L=function(e,n){var t=n.type,r=n.width,i=n.height;switch(t){case O.resized:return a({},e,{},E(r,i))}},P=function(){var e=s(o(L,j,D),2),n=e[0],t=e[1],r=function(){return requestAnimationFrame((function(){return t({type:O.resized,width:window.innerWidth,height:window.innerHeight})}))};return i((function(){return"undefined"!=typeof window&&window.addEventListener("resize",r),function(){"undefined"!=typeof window&&window.removeEventListener("resize",r)}}),[]),a({},n)};export{j as initialScreenState,d as useAnimatedHeight,v as useClickOutside,m as useFocusOutside,g as useIntersectionObserver,w as useKeyListener,h as useMutationObserver,P as useScreen};
+import e,{useRef as n,useState as t,useCallback as r,useLayoutEffect as i,useEffect as o,useReducer as c}from"react";import{breakpoints as u}from"@fremtind/jkl-core";function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function f(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function s(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?f(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):f(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function d(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var t=[],r=!0,i=!1,o=void 0;try{for(var c,u=e[Symbol.iterator]();!(r=(c=u.next()).done)&&(t.push(c.value),!n||t.length!==n);r=!0);}catch(e){i=!0,o=e}finally{try{r||null==u.return||u.return()}finally{if(i)throw o}}return t}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return l(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(t);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return l(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}function v(e){var c=n(),u=n(),a=n(null),f=d(t(!0),2),s=f[0],l=f[1];function v(){var e=m(a);e&&e.removeAttribute("style")}var y=r((function(){var n=m(a);n&&(n.style.display="block",n.style.overflow="hidden",e?(n.style.height="0",n.style.height="".concat(n.scrollHeight,"px")):(n.style.height="".concat(n.scrollHeight,"px"),c.current=requestAnimationFrame((function(){u.current=requestAnimationFrame((function(){n.style.height="".concat(0,"px")}))}))))}),[e]);return i((function(){s||y()}),[e,s,y]),o((function(){var e=m(a);return e&&e.addEventListener("transitionend",v),function(){e&&e.removeEventListener("transitionend",v)}}),[e]),o((function(){var e=c.current,n=u.current;return l(!1),function(){e&&cancelAnimationFrame(e),n&&cancelAnimationFrame(n)}}),[c,u]),[a,y]}function m(e){return e.current&&(e.current.el||e.current)}function y(n,t){function r(e){n&&n.current&&!n.current.contains(e.target)&&t()}e.useEffect((function(){return n&&document&&document.addEventListener("click",r),function(){n&&document&&document.removeEventListener("click",r)}}))}function p(n,t){function r(e){n&&n.current&&!n.current.contains(e.target)&&t()}e.useEffect((function(){return n&&document&&document.addEventListener("focusin",r),function(){n&&document&&document.removeEventListener("focusin",r)}}))}function w(e,n,t){function r(e){n&&!n.includes(e.key)||t(e)}"string"==typeof n&&(n=[n]),o((function(){var n=e&&e.current;return n&&n.addEventListener("keydown",r),function(){n&&n.removeEventListener("keydown",r)}}))}var h,b=function(){return"undefined"!=typeof window&&"undefined"!=typeof MutationObserver},g=function(e,t,r){var i=n(null);o((function(){var n=i.current;if(b()){var o=e.current;n&&n.disconnect(),n=new MutationObserver(t),o&&n.observe(o,r)}return function(){b()&&n&&n.disconnect()}}),[e,t,r])},O=function(){return"undefined"!=typeof window&&"undefined"!=typeof IntersectionObserver},j=function(e,t,r,i){var c=n(null);o((function(){var n=c.current;if(O()){var o=e.current;n&&n.disconnect(),n=new IntersectionObserver(t,i),o&&n.observe(o)}else r();return function(){O()&&n&&n.disconnect()}}),[e,t,r,i])};!function(e){e.resized="WINDOW_RESIZED"}(h||(h={}));var E={resized:h.resized},D=function(e,n){return{isSmallDevice:e<u.small,isMediumDevice:e>u.small&&e<u.medium,isLargeDevice:e>u.medium&&e<u.large,isXlDevice:e>u.large,isPortrait:n>=e,isLandscape:n<e,inner:{height:n,width:e}}},L={isSmallDevice:!1,isMediumDevice:!1,isLargeDevice:!1,isXlDevice:!1,isLandscape:!1,isPortrait:!1,inner:{height:0,width:0}},S=function(){var e="undefined"!=typeof window?window.innerWidth:0,n="undefined"!=typeof window?window.innerHeight:0;return D(e,n)},A=function(e,n){var t=n.type,r=n.width,i=n.height;switch(t){case E.resized:return s({},e,{},D(r,i))}},P=function(){var e=d(c(A,L,S),2),n=e[0],t=e[1],r=function(){return requestAnimationFrame((function(){return t({type:E.resized,width:window.innerWidth,height:window.innerHeight})}))};return o((function(){return"undefined"!=typeof window&&window.addEventListener("resize",r),function(){"undefined"!=typeof window&&window.removeEventListener("resize",r)}}),[]),s({},n)};export{L as initialScreenState,v as useAnimatedHeight,y as useClickOutside,p as useFocusOutside,j as useIntersectionObserver,w as useKeyListener,g as useMutationObserver,P as useScreen};

CHANGELOG.md

@@ -6,2 +6,15 @@ # Change Log
 
+## [1.1.3](https://github.com/fremtind/jokul/compare/@fremtind/jkl-react-hooks@1.1.2...@fremtind/jkl-react-hooks@1.1.3) (2020-03-25)
+
+
+### Bug Fixes
+
+* add missing dependencies/dependency lists to hooks ([1edc8da](https://github.com/fremtind/jokul/commit/1edc8dabe612ca35a5fab7a6b57ec250dda01771))
+* improve types in hooks example ([57cf5e0](https://github.com/fremtind/jokul/commit/57cf5e0305d1f9b8ff42afd61fdfabd5de0e2e0a))
+* move browserslist declaration to root package.json ([51c790e](https://github.com/fremtind/jokul/commit/51c790ea79ca3d667871380c6bfbe85a5738920b)), closes [#862](https://github.com/fremtind/jokul/issues/862)
+
+
+
+
+
 ## [1.1.2](https://github.com/fremtind/jokul/compare/@fremtind/jkl-react-hooks@1.1.1...@fremtind/jkl-react-hooks@1.1.2) (2020-03-16)
@@ -8,0 +21,0 @@

package.json

 {
     "name": "@fremtind/jkl-react-hooks",
-    "version": "1.1.2",
+    "version": "1.1.3",
     "publishConfig": {
@@ -37,7 +37,6 @@ "access": "public"
     "devDependencies": {
-        "@fremtind/browserslist-config-jkl": "^0.5.0",
-        "@fremtind/jkl-portal-components": "^0.2.2"
+        "@fremtind/jkl-portal-components": "^0.2.3"
     },
     "dependencies": {
-        "@fremtind/jkl-core": "^4.1.0"
+        "@fremtind/jkl-core": "^4.1.1"
     },
@@ -57,6 +56,3 @@ "peerDependencies": {
     },
-    "browserslist": [
-        "extends @fremtind/browserslist-config-jkl"
-    ],
-    "gitHead": "f5388b66575d58ffe90bd5c38bcdda54344f1312"
+    "gitHead": "333213196068e209012da495e2ef19e1978bd34f"
 }

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

56066

increased by8.03%

Dev dependency count

1

decreased by-50%

Lines of code

1151

increased by4.16%

Dependency changes

• Updated@fremtind/jkl-core@^4.1.1