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

Comparing version 9.0.0 to 9.0.1

build/browser/index.js

@@ -202,2 +202,5 @@ import { easings, timings, breakpoints } from '@fremtind/jkl-core';
       }
+    } else if (isOpen && wasOpen) {
+      // Re-render etter å ha vært lukket, men forblitt åpen.
+      return;
     }
@@ -210,8 +213,4 @@
 
-      const element = getElement(elementRef);
+      element.removeAttribute("style");
 
-      if (element) {
-        element.removeAttribute("style");
-      }
-
       if (isOpen) {
@@ -218,0 +217,0 @@ var _options$onFirstVisib;

build/browser/index.min.js

@@ -1,1 +0,1 @@
-import{easings as e,timings as t,breakpoints as r}from"@fremtind/jkl-core";import n,{useState as i,useReducer as o,useEffect as c,useRef as s,useCallback as d,useMemo as u}from"react";import{nanoid as l}from"nanoid";function a(e){return!!window.matchMedia&&window.matchMedia(e).matches}function v(e,t){void 0!==e.addEventListener?e.addEventListener("change",t):e.addListener(t)}function m(e,t){void 0!==e.removeEventListener?e.removeEventListener("change",t):e.removeListener(t)}var f;!function(e){e.PrefersColorScheme="COLOR_SCHEME_CHANGED",e.PrefersReducedMotion="REDUCED_MOTION_CHANGED",e.ForcedColors="FORCED_COLORS_CHANGED"}(f||(f={}));const h={prefersReducedMotion:!1,prefersColorScheme:"light",forcedColors:!1},p=(e,t)=>{switch(t.type){case f.PrefersColorScheme:return{...e,prefersColorScheme:t.value};case f.PrefersReducedMotion:return{...e,prefersReducedMotion:t.value};case f.ForcedColors:return{...e,forcedColors:t.value};default:return e}},w=()=>{const[e,t]=i(!1),[r,n]=o(p,h);return c((()=>{t(!0);const e=a("(prefers-reduced-motion: reduce)"),r=a("(prefers-color-scheme: light)")?"light":"dark",i=a("(forced-colors: active)");n({type:f.PrefersReducedMotion,value:e}),n({type:f.PrefersColorScheme,value:r}),n({type:f.ForcedColors,value:i})}),[]),c((()=>{if(!e||!window.matchMedia)return;const t=e=>{n({type:f.PrefersReducedMotion,value:e.matches})},r=e=>{n({type:f.PrefersColorScheme,value:e.matches?"light":"dark"})},i=e=>{n({type:f.ForcedColors,value:e.matches})};return v(window.matchMedia("(prefers-reduced-motion: reduce)"),t),v(window.matchMedia("(prefers-color-scheme: light)"),r),v(window.matchMedia("(forced-colors: active)"),i),()=>{m(window.matchMedia("(prefers-reduced-motion: reduce)"),t),m(window.matchMedia("(prefers-color-scheme: light)"),r),m(window.matchMedia("(forced-colors: active)"),i)}}),[e]),{...r}},y=e=>{const t=s();return c((()=>{t.current=e})),t.current},g=e.standard,E=t.productive;function L(e,t){const r=y(e),n=(null==t?void 0:t.easing)||g,i=`${(null==t?void 0:t.timing)||E} height ${n}`,{prefersReducedMotion:o}=w(),u=s(),l=s(),a=s(null);function v(r){const n=M(a);var i;n&&r.target===n&&(e?n.removeAttribute("style"):(n.removeAttribute("style"),n.style.display="none"),null==t||null===(i=t.onTransitionEnd)||void 0===i||i.call(t,e))}const m=d((()=>{var n;const c=M(a);if(c&&(e||(c.style.display="none",r)))if(null==t||null===(n=t.onTransitionStart)||void 0===n||n.call(t,e),o){var s;const r=M(a);var d;r&&r.removeAttribute("style"),e&&(null==t||null===(d=t.onFirstVisible)||void 0===d||d.call(t)),null==t||null===(s=t.onTransitionEnd)||void 0===s||s.call(t,e)}else if(c.style.transition=i,c.style.display="block",c.style.overflow="hidden",e){var v;null==t||null===(v=t.onFirstVisible)||void 0===v||v.call(t),c.style.height="0",c.style.height=`${c.scrollHeight}px`}else{if(0===c.scrollHeight)return void c.removeAttribute("style");c.style.height=`${c.scrollHeight}px`,u.current=requestAnimationFrame((()=>{l.current=requestAnimationFrame((()=>{c.style.height="0px"}))}))}}),[e,t,r,i,o]);return c((()=>{m()}),[e,m]),c((()=>{const e=M(a);return e&&e.addEventListener("transitionend",v),()=>{e&&e.removeEventListener("transitionend",v)}}),[e]),c((()=>{const e=u.current,t=l.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}}),[u,l]),[a,m]}function M(e){return e.current&&(e.current.el||e.current)}function D(e,t){function r(r){null!=e&&e.current&&!e.current.contains(r.target)&&t()}c((()=>(e&&document&&document.addEventListener("click",r),()=>{document&&document.removeEventListener("click",r)})))}function S(e,t){function r(r){null!=e&&e.current&&!e.current.contains(r.target)&&t()}c((()=>(e&&document&&document.addEventListener("focusin",r),()=>{document&&document.removeEventListener("focusin",r)})))}function C(e,t,r){function n(e){t&&!t.includes(e.key)||r(e)}"string"==typeof t&&(t=[t]),c((()=>{const t=e&&e.current;return t&&t.addEventListener("keydown",n),()=>{t&&t.removeEventListener("keydown",n)}}))}const x=()=>"undefined"!=typeof window&&"undefined"!=typeof MutationObserver,b=(e,t,r)=>{const n=s(null);c((()=>{let i=n.current;if(x()){const n=e.current;i&&i.disconnect(),i=new MutationObserver(t),n&&i.observe(n,r)}return()=>{x()&&i&&i.disconnect()}}),[e,t,r])},A=()=>"undefined"!=typeof window&&"undefined"!=typeof IntersectionObserver,O=(e,t,r,n)=>{const i=s(null);c((()=>{let o=i.current;if(A()){const r=e.current;o&&o.disconnect(),o=new IntersectionObserver(t,n),r&&o.observe(r)}else r();return()=>{A()&&o&&o.disconnect()}}),[e,t,r,n])};let $;!function(e){e.orientation="ORIENTATION_CHANGED",e.deviceSize="DEVICE_SIZE_CHANGED"}($||($={}));const P=(e,t)=>{switch(t.type){case $.orientation:return{...e,...(n=t.property,{isLandscape:"isLandscape"===n,isPortrait:"isPortrait"===n})};case $.deviceSize:return{...e,...(r=t.property,{isSmallDevice:"isSmallDevice"===r,isMediumDevice:"isMediumDevice"===r,isLargeDevice:"isLargeDevice"===r,isXlDevice:"isXlDevice"===r})};default:return e}var r,n},F={isSmallDevice:`(max-width: ${r.medium-1}px)`,isMediumDevice:`(min-width: ${r.medium}px) and (max-width: ${r.large-1}px)`,isLargeDevice:`(min-width: ${r.large}px) and (max-width: ${r.xl-1}px)`,isXlDevice:`(min-width: ${r.xl}px)`,isPortrait:"(orientation: portrait)",isLandscape:"(orientation: landscape)"},R=e=>({type:"isLandscape"===e||"isPortrait"===e?$.orientation:$.deviceSize,property:e}),H=()=>{const[e,t]=i(!1),[r,n]=o(P,{isSmallDevice:!1,isMediumDevice:!1,isLargeDevice:!1,isXlDevice:!1,isLandscape:!1,isPortrait:!1});c((()=>{t(!0),Object.entries(F).map((([e,t])=>[e,a(t)])).forEach((([e,t])=>{t&&n(R(e))}))}),[]);const s=d((e=>t=>{requestAnimationFrame((()=>{t.matches&&n(R(e))}))}),[]);return c((()=>{if(!e||!window.matchMedia)return;const t=[];return Object.entries(F).forEach((([e,r])=>{const n=window.matchMedia(r),i=s(e);t.push([n,i]),v(n,i)})),()=>{t.forEach((([e,t])=>m(e,t)))}}),[s,e]),{...r}},I=({ref:e,timeout:t=0,autoScroll:r=!0,options:n={behavior:"smooth"}})=>{const i=()=>{null!=e&&e.current&&e.current.scrollIntoView(n)};return c((()=>{if(!r)return;const e=setTimeout(i,t);return()=>clearTimeout(e)}),[e,t,r]),[i]},k=({lowQualitySrc:e,highQualitySrc:t})=>{const[r,n]=i(e);return c((()=>{n(e);const r=new Image;r.src=t,r.onload=()=>{n(t)}}),[e,t]),{src:r,isBlurred:r===e}},T=n.useId,_={generateSuffix:!0},N=void 0!==T?(e,t=_)=>{const r=T(),i=t.generateSuffix?`${e}-${r}`:e,[o]=n.useState(i);return o}:(e,t=_)=>{const r=t.generateSuffix?`${e}-${l(8)}`:e,[i]=n.useState(r);return i};function z(e=200){const t=s(null),[r,n]=i({height:0,width:0}),o=u((()=>function(e,t){let r=!1;return(...n)=>{if(r)return;const i=e(...n);return 0!==t&&(r=!0,window.setTimeout((()=>{r=!1}),t)),i}}((()=>{var e,r;return n({height:(null===(e=t.current)||void 0===e?void 0:e.scrollHeight)||0,width:(null===(r=t.current)||void 0===r?void 0:r.scrollWidth)||0})}),e)),[e]);return c((()=>{var e,r;return n({height:(null===(e=t.current)||void 0===e?void 0:e.scrollHeight)||0,width:(null===(r=t.current)||void 0===r?void 0:r.scrollWidth)||0}),"undefined"!=typeof window&&window.addEventListener("resize",o),()=>{"undefined"!=typeof window&&window.removeEventListener("resize",o)}}),[o]),[t,r]}export{L as useAnimatedHeight,w as useBrowserPreferences,D as useClickOutside,z as useElementDimensions,S as useFocusOutside,N as useId,O as useIntersectionObserver,C as useKeyListener,b as useMutationObserver,y as usePreviousValue,k as useProgressiveImg,H as useScreen,I as useScrollIntoView};
+import{easings as e,timings as t,breakpoints as r}from"@fremtind/jkl-core";import n,{useState as i,useReducer as o,useEffect as c,useRef as s,useCallback as d,useMemo as u}from"react";import{nanoid as l}from"nanoid";function a(e){return!!window.matchMedia&&window.matchMedia(e).matches}function v(e,t){void 0!==e.addEventListener?e.addEventListener("change",t):e.addListener(t)}function m(e,t){void 0!==e.removeEventListener?e.removeEventListener("change",t):e.removeListener(t)}var f;!function(e){e.PrefersColorScheme="COLOR_SCHEME_CHANGED",e.PrefersReducedMotion="REDUCED_MOTION_CHANGED",e.ForcedColors="FORCED_COLORS_CHANGED"}(f||(f={}));const h={prefersReducedMotion:!1,prefersColorScheme:"light",forcedColors:!1},p=(e,t)=>{switch(t.type){case f.PrefersColorScheme:return{...e,prefersColorScheme:t.value};case f.PrefersReducedMotion:return{...e,prefersReducedMotion:t.value};case f.ForcedColors:return{...e,forcedColors:t.value};default:return e}},w=()=>{const[e,t]=i(!1),[r,n]=o(p,h);return c((()=>{t(!0);const e=a("(prefers-reduced-motion: reduce)"),r=a("(prefers-color-scheme: light)")?"light":"dark",i=a("(forced-colors: active)");n({type:f.PrefersReducedMotion,value:e}),n({type:f.PrefersColorScheme,value:r}),n({type:f.ForcedColors,value:i})}),[]),c((()=>{if(!e||!window.matchMedia)return;const t=e=>{n({type:f.PrefersReducedMotion,value:e.matches})},r=e=>{n({type:f.PrefersColorScheme,value:e.matches?"light":"dark"})},i=e=>{n({type:f.ForcedColors,value:e.matches})};return v(window.matchMedia("(prefers-reduced-motion: reduce)"),t),v(window.matchMedia("(prefers-color-scheme: light)"),r),v(window.matchMedia("(forced-colors: active)"),i),()=>{m(window.matchMedia("(prefers-reduced-motion: reduce)"),t),m(window.matchMedia("(prefers-color-scheme: light)"),r),m(window.matchMedia("(forced-colors: active)"),i)}}),[e]),{...r}},y=e=>{const t=s();return c((()=>{t.current=e})),t.current},g=e.standard,E=t.productive;function L(e,t){const r=y(e),n=(null==t?void 0:t.easing)||g,i=`${(null==t?void 0:t.timing)||E} height ${n}`,{prefersReducedMotion:o}=w(),u=s(),l=s(),a=s(null);function v(r){const n=M(a);var i;n&&r.target===n&&(e?n.removeAttribute("style"):(n.removeAttribute("style"),n.style.display="none"),null==t||null===(i=t.onTransitionEnd)||void 0===i||i.call(t,e))}const m=d((()=>{var n;const c=M(a);if(c){if(e){if(e&&r)return}else if(c.style.display="none",!r)return;var s,d;if(null==t||null===(n=t.onTransitionStart)||void 0===n||n.call(t,e),o)c.removeAttribute("style"),e&&(null==t||null===(d=t.onFirstVisible)||void 0===d||d.call(t)),null==t||null===(s=t.onTransitionEnd)||void 0===s||s.call(t,e);else if(c.style.transition=i,c.style.display="block",c.style.overflow="hidden",e){var v;null==t||null===(v=t.onFirstVisible)||void 0===v||v.call(t),c.style.height="0",c.style.height=`${c.scrollHeight}px`}else{if(0===c.scrollHeight)return void c.removeAttribute("style");c.style.height=`${c.scrollHeight}px`,u.current=requestAnimationFrame((()=>{l.current=requestAnimationFrame((()=>{c.style.height="0px"}))}))}}}),[e,t,r,i,o]);return c((()=>{m()}),[e,m]),c((()=>{const e=M(a);return e&&e.addEventListener("transitionend",v),()=>{e&&e.removeEventListener("transitionend",v)}}),[e]),c((()=>{const e=u.current,t=l.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}}),[u,l]),[a,m]}function M(e){return e.current&&(e.current.el||e.current)}function D(e,t){function r(r){null!=e&&e.current&&!e.current.contains(r.target)&&t()}c((()=>(e&&document&&document.addEventListener("click",r),()=>{document&&document.removeEventListener("click",r)})))}function S(e,t){function r(r){null!=e&&e.current&&!e.current.contains(r.target)&&t()}c((()=>(e&&document&&document.addEventListener("focusin",r),()=>{document&&document.removeEventListener("focusin",r)})))}function C(e,t,r){function n(e){t&&!t.includes(e.key)||r(e)}"string"==typeof t&&(t=[t]),c((()=>{const t=e&&e.current;return t&&t.addEventListener("keydown",n),()=>{t&&t.removeEventListener("keydown",n)}}))}const x=()=>"undefined"!=typeof window&&"undefined"!=typeof MutationObserver,b=(e,t,r)=>{const n=s(null);c((()=>{let i=n.current;if(x()){const n=e.current;i&&i.disconnect(),i=new MutationObserver(t),n&&i.observe(n,r)}return()=>{x()&&i&&i.disconnect()}}),[e,t,r])},A=()=>"undefined"!=typeof window&&"undefined"!=typeof IntersectionObserver,O=(e,t,r,n)=>{const i=s(null);c((()=>{let o=i.current;if(A()){const r=e.current;o&&o.disconnect(),o=new IntersectionObserver(t,n),r&&o.observe(r)}else r();return()=>{A()&&o&&o.disconnect()}}),[e,t,r,n])};let $;!function(e){e.orientation="ORIENTATION_CHANGED",e.deviceSize="DEVICE_SIZE_CHANGED"}($||($={}));const P=(e,t)=>{switch(t.type){case $.orientation:return{...e,...(n=t.property,{isLandscape:"isLandscape"===n,isPortrait:"isPortrait"===n})};case $.deviceSize:return{...e,...(r=t.property,{isSmallDevice:"isSmallDevice"===r,isMediumDevice:"isMediumDevice"===r,isLargeDevice:"isLargeDevice"===r,isXlDevice:"isXlDevice"===r})};default:return e}var r,n},F={isSmallDevice:`(max-width: ${r.medium-1}px)`,isMediumDevice:`(min-width: ${r.medium}px) and (max-width: ${r.large-1}px)`,isLargeDevice:`(min-width: ${r.large}px) and (max-width: ${r.xl-1}px)`,isXlDevice:`(min-width: ${r.xl}px)`,isPortrait:"(orientation: portrait)",isLandscape:"(orientation: landscape)"},R=e=>({type:"isLandscape"===e||"isPortrait"===e?$.orientation:$.deviceSize,property:e}),H=()=>{const[e,t]=i(!1),[r,n]=o(P,{isSmallDevice:!1,isMediumDevice:!1,isLargeDevice:!1,isXlDevice:!1,isLandscape:!1,isPortrait:!1});c((()=>{t(!0),Object.entries(F).map((([e,t])=>[e,a(t)])).forEach((([e,t])=>{t&&n(R(e))}))}),[]);const s=d((e=>t=>{requestAnimationFrame((()=>{t.matches&&n(R(e))}))}),[]);return c((()=>{if(!e||!window.matchMedia)return;const t=[];return Object.entries(F).forEach((([e,r])=>{const n=window.matchMedia(r),i=s(e);t.push([n,i]),v(n,i)})),()=>{t.forEach((([e,t])=>m(e,t)))}}),[s,e]),{...r}},I=({ref:e,timeout:t=0,autoScroll:r=!0,options:n={behavior:"smooth"}})=>{const i=()=>{null!=e&&e.current&&e.current.scrollIntoView(n)};return c((()=>{if(!r)return;const e=setTimeout(i,t);return()=>clearTimeout(e)}),[e,t,r]),[i]},k=({lowQualitySrc:e,highQualitySrc:t})=>{const[r,n]=i(e);return c((()=>{n(e);const r=new Image;r.src=t,r.onload=()=>{n(t)}}),[e,t]),{src:r,isBlurred:r===e}},T=n.useId,_={generateSuffix:!0},N=void 0!==T?(e,t=_)=>{const r=T(),i=t.generateSuffix?`${e}-${r}`:e,[o]=n.useState(i);return o}:(e,t=_)=>{const r=t.generateSuffix?`${e}-${l(8)}`:e,[i]=n.useState(r);return i};function z(e=200){const t=s(null),[r,n]=i({height:0,width:0}),o=u((()=>function(e,t){let r=!1;return(...n)=>{if(r)return;const i=e(...n);return 0!==t&&(r=!0,window.setTimeout((()=>{r=!1}),t)),i}}((()=>{var e,r;return n({height:(null===(e=t.current)||void 0===e?void 0:e.scrollHeight)||0,width:(null===(r=t.current)||void 0===r?void 0:r.scrollWidth)||0})}),e)),[e]);return c((()=>{var e,r;return n({height:(null===(e=t.current)||void 0===e?void 0:e.scrollHeight)||0,width:(null===(r=t.current)||void 0===r?void 0:r.scrollWidth)||0}),"undefined"!=typeof window&&window.addEventListener("resize",o),()=>{"undefined"!=typeof window&&window.removeEventListener("resize",o)}}),[o]),[t,r]}export{L as useAnimatedHeight,w as useBrowserPreferences,D as useClickOutside,z as useElementDimensions,S as useFocusOutside,N as useId,O as useIntersectionObserver,C as useKeyListener,b as useMutationObserver,y as usePreviousValue,k as useProgressiveImg,H as useScreen,I as useScrollIntoView};

build/cjs/index.js

@@ -210,2 +210,5 @@ 'use strict';
       }
+    } else if (isOpen && wasOpen) {
+      // Re-render etter å ha vært lukket, men forblitt åpen.
+      return;
     }
@@ -218,8 +221,4 @@
 
-      const element = getElement(elementRef);
+      element.removeAttribute("style");
 
-      if (element) {
-        element.removeAttribute("style");
-      }
-
       if (isOpen) {
@@ -226,0 +225,0 @@ var _options$onFirstVisib;

build/esm/index.js

@@ -202,2 +202,5 @@ import { easings, timings, breakpoints } from '@fremtind/jkl-core';
       }
+    } else if (isOpen && wasOpen) {
+      // Re-render etter å ha vært lukket, men forblitt åpen.
+      return;
     }
@@ -210,8 +213,4 @@
 
-      const element = getElement(elementRef);
+      element.removeAttribute("style");
 
-      if (element) {
-        element.removeAttribute("style");
-      }
-
       if (isOpen) {
@@ -218,0 +217,0 @@ var _options$onFirstVisib;

build/esm/index.min.js

@@ -1,1 +0,1 @@
-import{easings as e,timings as t,breakpoints as r}from"@fremtind/jkl-core";import n,{useState as i,useReducer as o,useEffect as c,useRef as s,useCallback as d,useMemo as u}from"react";import{nanoid as l}from"nanoid";function a(e){return!!window.matchMedia&&window.matchMedia(e).matches}function v(e,t){void 0!==e.addEventListener?e.addEventListener("change",t):e.addListener(t)}function m(e,t){void 0!==e.removeEventListener?e.removeEventListener("change",t):e.removeListener(t)}var f;!function(e){e.PrefersColorScheme="COLOR_SCHEME_CHANGED",e.PrefersReducedMotion="REDUCED_MOTION_CHANGED",e.ForcedColors="FORCED_COLORS_CHANGED"}(f||(f={}));const h={prefersReducedMotion:!1,prefersColorScheme:"light",forcedColors:!1},p=(e,t)=>{switch(t.type){case f.PrefersColorScheme:return{...e,prefersColorScheme:t.value};case f.PrefersReducedMotion:return{...e,prefersReducedMotion:t.value};case f.ForcedColors:return{...e,forcedColors:t.value};default:return e}},w=()=>{const[e,t]=i(!1),[r,n]=o(p,h);return c((()=>{t(!0);const e=a("(prefers-reduced-motion: reduce)"),r=a("(prefers-color-scheme: light)")?"light":"dark",i=a("(forced-colors: active)");n({type:f.PrefersReducedMotion,value:e}),n({type:f.PrefersColorScheme,value:r}),n({type:f.ForcedColors,value:i})}),[]),c((()=>{if(!e||!window.matchMedia)return;const t=e=>{n({type:f.PrefersReducedMotion,value:e.matches})},r=e=>{n({type:f.PrefersColorScheme,value:e.matches?"light":"dark"})},i=e=>{n({type:f.ForcedColors,value:e.matches})};return v(window.matchMedia("(prefers-reduced-motion: reduce)"),t),v(window.matchMedia("(prefers-color-scheme: light)"),r),v(window.matchMedia("(forced-colors: active)"),i),()=>{m(window.matchMedia("(prefers-reduced-motion: reduce)"),t),m(window.matchMedia("(prefers-color-scheme: light)"),r),m(window.matchMedia("(forced-colors: active)"),i)}}),[e]),{...r}},y=e=>{const t=s();return c((()=>{t.current=e})),t.current},g=e.standard,E=t.productive;function L(e,t){const r=y(e),n=(null==t?void 0:t.easing)||g,i=`${(null==t?void 0:t.timing)||E} height ${n}`,{prefersReducedMotion:o}=w(),u=s(),l=s(),a=s(null);function v(r){const n=M(a);var i;n&&r.target===n&&(e?n.removeAttribute("style"):(n.removeAttribute("style"),n.style.display="none"),null==t||null===(i=t.onTransitionEnd)||void 0===i||i.call(t,e))}const m=d((()=>{var n;const c=M(a);if(c&&(e||(c.style.display="none",r)))if(null==t||null===(n=t.onTransitionStart)||void 0===n||n.call(t,e),o){var s;const r=M(a);var d;r&&r.removeAttribute("style"),e&&(null==t||null===(d=t.onFirstVisible)||void 0===d||d.call(t)),null==t||null===(s=t.onTransitionEnd)||void 0===s||s.call(t,e)}else if(c.style.transition=i,c.style.display="block",c.style.overflow="hidden",e){var v;null==t||null===(v=t.onFirstVisible)||void 0===v||v.call(t),c.style.height="0",c.style.height=`${c.scrollHeight}px`}else{if(0===c.scrollHeight)return void c.removeAttribute("style");c.style.height=`${c.scrollHeight}px`,u.current=requestAnimationFrame((()=>{l.current=requestAnimationFrame((()=>{c.style.height="0px"}))}))}}),[e,t,r,i,o]);return c((()=>{m()}),[e,m]),c((()=>{const e=M(a);return e&&e.addEventListener("transitionend",v),()=>{e&&e.removeEventListener("transitionend",v)}}),[e]),c((()=>{const e=u.current,t=l.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}}),[u,l]),[a,m]}function M(e){return e.current&&(e.current.el||e.current)}function D(e,t){function r(r){null!=e&&e.current&&!e.current.contains(r.target)&&t()}c((()=>(e&&document&&document.addEventListener("click",r),()=>{document&&document.removeEventListener("click",r)})))}function S(e,t){function r(r){null!=e&&e.current&&!e.current.contains(r.target)&&t()}c((()=>(e&&document&&document.addEventListener("focusin",r),()=>{document&&document.removeEventListener("focusin",r)})))}function C(e,t,r){function n(e){t&&!t.includes(e.key)||r(e)}"string"==typeof t&&(t=[t]),c((()=>{const t=e&&e.current;return t&&t.addEventListener("keydown",n),()=>{t&&t.removeEventListener("keydown",n)}}))}const x=()=>"undefined"!=typeof window&&"undefined"!=typeof MutationObserver,b=(e,t,r)=>{const n=s(null);c((()=>{let i=n.current;if(x()){const n=e.current;i&&i.disconnect(),i=new MutationObserver(t),n&&i.observe(n,r)}return()=>{x()&&i&&i.disconnect()}}),[e,t,r])},A=()=>"undefined"!=typeof window&&"undefined"!=typeof IntersectionObserver,O=(e,t,r,n)=>{const i=s(null);c((()=>{let o=i.current;if(A()){const r=e.current;o&&o.disconnect(),o=new IntersectionObserver(t,n),r&&o.observe(r)}else r();return()=>{A()&&o&&o.disconnect()}}),[e,t,r,n])};let $;!function(e){e.orientation="ORIENTATION_CHANGED",e.deviceSize="DEVICE_SIZE_CHANGED"}($||($={}));const P=(e,t)=>{switch(t.type){case $.orientation:return{...e,...(n=t.property,{isLandscape:"isLandscape"===n,isPortrait:"isPortrait"===n})};case $.deviceSize:return{...e,...(r=t.property,{isSmallDevice:"isSmallDevice"===r,isMediumDevice:"isMediumDevice"===r,isLargeDevice:"isLargeDevice"===r,isXlDevice:"isXlDevice"===r})};default:return e}var r,n},F={isSmallDevice:`(max-width: ${r.medium-1}px)`,isMediumDevice:`(min-width: ${r.medium}px) and (max-width: ${r.large-1}px)`,isLargeDevice:`(min-width: ${r.large}px) and (max-width: ${r.xl-1}px)`,isXlDevice:`(min-width: ${r.xl}px)`,isPortrait:"(orientation: portrait)",isLandscape:"(orientation: landscape)"},R=e=>({type:"isLandscape"===e||"isPortrait"===e?$.orientation:$.deviceSize,property:e}),H=()=>{const[e,t]=i(!1),[r,n]=o(P,{isSmallDevice:!1,isMediumDevice:!1,isLargeDevice:!1,isXlDevice:!1,isLandscape:!1,isPortrait:!1});c((()=>{t(!0),Object.entries(F).map((([e,t])=>[e,a(t)])).forEach((([e,t])=>{t&&n(R(e))}))}),[]);const s=d((e=>t=>{requestAnimationFrame((()=>{t.matches&&n(R(e))}))}),[]);return c((()=>{if(!e||!window.matchMedia)return;const t=[];return Object.entries(F).forEach((([e,r])=>{const n=window.matchMedia(r),i=s(e);t.push([n,i]),v(n,i)})),()=>{t.forEach((([e,t])=>m(e,t)))}}),[s,e]),{...r}},I=({ref:e,timeout:t=0,autoScroll:r=!0,options:n={behavior:"smooth"}})=>{const i=()=>{null!=e&&e.current&&e.current.scrollIntoView(n)};return c((()=>{if(!r)return;const e=setTimeout(i,t);return()=>clearTimeout(e)}),[e,t,r]),[i]},k=({lowQualitySrc:e,highQualitySrc:t})=>{const[r,n]=i(e);return c((()=>{n(e);const r=new Image;r.src=t,r.onload=()=>{n(t)}}),[e,t]),{src:r,isBlurred:r===e}},T=n.useId,_={generateSuffix:!0},N=void 0!==T?(e,t=_)=>{const r=T(),i=t.generateSuffix?`${e}-${r}`:e,[o]=n.useState(i);return o}:(e,t=_)=>{const r=t.generateSuffix?`${e}-${l(8)}`:e,[i]=n.useState(r);return i};function z(e=200){const t=s(null),[r,n]=i({height:0,width:0}),o=u((()=>function(e,t){let r=!1;return(...n)=>{if(r)return;const i=e(...n);return 0!==t&&(r=!0,window.setTimeout((()=>{r=!1}),t)),i}}((()=>{var e,r;return n({height:(null===(e=t.current)||void 0===e?void 0:e.scrollHeight)||0,width:(null===(r=t.current)||void 0===r?void 0:r.scrollWidth)||0})}),e)),[e]);return c((()=>{var e,r;return n({height:(null===(e=t.current)||void 0===e?void 0:e.scrollHeight)||0,width:(null===(r=t.current)||void 0===r?void 0:r.scrollWidth)||0}),"undefined"!=typeof window&&window.addEventListener("resize",o),()=>{"undefined"!=typeof window&&window.removeEventListener("resize",o)}}),[o]),[t,r]}export{L as useAnimatedHeight,w as useBrowserPreferences,D as useClickOutside,z as useElementDimensions,S as useFocusOutside,N as useId,O as useIntersectionObserver,C as useKeyListener,b as useMutationObserver,y as usePreviousValue,k as useProgressiveImg,H as useScreen,I as useScrollIntoView};
+import{easings as e,timings as t,breakpoints as r}from"@fremtind/jkl-core";import n,{useState as i,useReducer as o,useEffect as c,useRef as s,useCallback as d,useMemo as u}from"react";import{nanoid as l}from"nanoid";function a(e){return!!window.matchMedia&&window.matchMedia(e).matches}function v(e,t){void 0!==e.addEventListener?e.addEventListener("change",t):e.addListener(t)}function m(e,t){void 0!==e.removeEventListener?e.removeEventListener("change",t):e.removeListener(t)}var f;!function(e){e.PrefersColorScheme="COLOR_SCHEME_CHANGED",e.PrefersReducedMotion="REDUCED_MOTION_CHANGED",e.ForcedColors="FORCED_COLORS_CHANGED"}(f||(f={}));const h={prefersReducedMotion:!1,prefersColorScheme:"light",forcedColors:!1},p=(e,t)=>{switch(t.type){case f.PrefersColorScheme:return{...e,prefersColorScheme:t.value};case f.PrefersReducedMotion:return{...e,prefersReducedMotion:t.value};case f.ForcedColors:return{...e,forcedColors:t.value};default:return e}},w=()=>{const[e,t]=i(!1),[r,n]=o(p,h);return c((()=>{t(!0);const e=a("(prefers-reduced-motion: reduce)"),r=a("(prefers-color-scheme: light)")?"light":"dark",i=a("(forced-colors: active)");n({type:f.PrefersReducedMotion,value:e}),n({type:f.PrefersColorScheme,value:r}),n({type:f.ForcedColors,value:i})}),[]),c((()=>{if(!e||!window.matchMedia)return;const t=e=>{n({type:f.PrefersReducedMotion,value:e.matches})},r=e=>{n({type:f.PrefersColorScheme,value:e.matches?"light":"dark"})},i=e=>{n({type:f.ForcedColors,value:e.matches})};return v(window.matchMedia("(prefers-reduced-motion: reduce)"),t),v(window.matchMedia("(prefers-color-scheme: light)"),r),v(window.matchMedia("(forced-colors: active)"),i),()=>{m(window.matchMedia("(prefers-reduced-motion: reduce)"),t),m(window.matchMedia("(prefers-color-scheme: light)"),r),m(window.matchMedia("(forced-colors: active)"),i)}}),[e]),{...r}},y=e=>{const t=s();return c((()=>{t.current=e})),t.current},g=e.standard,E=t.productive;function L(e,t){const r=y(e),n=(null==t?void 0:t.easing)||g,i=`${(null==t?void 0:t.timing)||E} height ${n}`,{prefersReducedMotion:o}=w(),u=s(),l=s(),a=s(null);function v(r){const n=M(a);var i;n&&r.target===n&&(e?n.removeAttribute("style"):(n.removeAttribute("style"),n.style.display="none"),null==t||null===(i=t.onTransitionEnd)||void 0===i||i.call(t,e))}const m=d((()=>{var n;const c=M(a);if(c){if(e){if(e&&r)return}else if(c.style.display="none",!r)return;var s,d;if(null==t||null===(n=t.onTransitionStart)||void 0===n||n.call(t,e),o)c.removeAttribute("style"),e&&(null==t||null===(d=t.onFirstVisible)||void 0===d||d.call(t)),null==t||null===(s=t.onTransitionEnd)||void 0===s||s.call(t,e);else if(c.style.transition=i,c.style.display="block",c.style.overflow="hidden",e){var v;null==t||null===(v=t.onFirstVisible)||void 0===v||v.call(t),c.style.height="0",c.style.height=`${c.scrollHeight}px`}else{if(0===c.scrollHeight)return void c.removeAttribute("style");c.style.height=`${c.scrollHeight}px`,u.current=requestAnimationFrame((()=>{l.current=requestAnimationFrame((()=>{c.style.height="0px"}))}))}}}),[e,t,r,i,o]);return c((()=>{m()}),[e,m]),c((()=>{const e=M(a);return e&&e.addEventListener("transitionend",v),()=>{e&&e.removeEventListener("transitionend",v)}}),[e]),c((()=>{const e=u.current,t=l.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}}),[u,l]),[a,m]}function M(e){return e.current&&(e.current.el||e.current)}function D(e,t){function r(r){null!=e&&e.current&&!e.current.contains(r.target)&&t()}c((()=>(e&&document&&document.addEventListener("click",r),()=>{document&&document.removeEventListener("click",r)})))}function S(e,t){function r(r){null!=e&&e.current&&!e.current.contains(r.target)&&t()}c((()=>(e&&document&&document.addEventListener("focusin",r),()=>{document&&document.removeEventListener("focusin",r)})))}function C(e,t,r){function n(e){t&&!t.includes(e.key)||r(e)}"string"==typeof t&&(t=[t]),c((()=>{const t=e&&e.current;return t&&t.addEventListener("keydown",n),()=>{t&&t.removeEventListener("keydown",n)}}))}const x=()=>"undefined"!=typeof window&&"undefined"!=typeof MutationObserver,b=(e,t,r)=>{const n=s(null);c((()=>{let i=n.current;if(x()){const n=e.current;i&&i.disconnect(),i=new MutationObserver(t),n&&i.observe(n,r)}return()=>{x()&&i&&i.disconnect()}}),[e,t,r])},A=()=>"undefined"!=typeof window&&"undefined"!=typeof IntersectionObserver,O=(e,t,r,n)=>{const i=s(null);c((()=>{let o=i.current;if(A()){const r=e.current;o&&o.disconnect(),o=new IntersectionObserver(t,n),r&&o.observe(r)}else r();return()=>{A()&&o&&o.disconnect()}}),[e,t,r,n])};let $;!function(e){e.orientation="ORIENTATION_CHANGED",e.deviceSize="DEVICE_SIZE_CHANGED"}($||($={}));const P=(e,t)=>{switch(t.type){case $.orientation:return{...e,...(n=t.property,{isLandscape:"isLandscape"===n,isPortrait:"isPortrait"===n})};case $.deviceSize:return{...e,...(r=t.property,{isSmallDevice:"isSmallDevice"===r,isMediumDevice:"isMediumDevice"===r,isLargeDevice:"isLargeDevice"===r,isXlDevice:"isXlDevice"===r})};default:return e}var r,n},F={isSmallDevice:`(max-width: ${r.medium-1}px)`,isMediumDevice:`(min-width: ${r.medium}px) and (max-width: ${r.large-1}px)`,isLargeDevice:`(min-width: ${r.large}px) and (max-width: ${r.xl-1}px)`,isXlDevice:`(min-width: ${r.xl}px)`,isPortrait:"(orientation: portrait)",isLandscape:"(orientation: landscape)"},R=e=>({type:"isLandscape"===e||"isPortrait"===e?$.orientation:$.deviceSize,property:e}),H=()=>{const[e,t]=i(!1),[r,n]=o(P,{isSmallDevice:!1,isMediumDevice:!1,isLargeDevice:!1,isXlDevice:!1,isLandscape:!1,isPortrait:!1});c((()=>{t(!0),Object.entries(F).map((([e,t])=>[e,a(t)])).forEach((([e,t])=>{t&&n(R(e))}))}),[]);const s=d((e=>t=>{requestAnimationFrame((()=>{t.matches&&n(R(e))}))}),[]);return c((()=>{if(!e||!window.matchMedia)return;const t=[];return Object.entries(F).forEach((([e,r])=>{const n=window.matchMedia(r),i=s(e);t.push([n,i]),v(n,i)})),()=>{t.forEach((([e,t])=>m(e,t)))}}),[s,e]),{...r}},I=({ref:e,timeout:t=0,autoScroll:r=!0,options:n={behavior:"smooth"}})=>{const i=()=>{null!=e&&e.current&&e.current.scrollIntoView(n)};return c((()=>{if(!r)return;const e=setTimeout(i,t);return()=>clearTimeout(e)}),[e,t,r]),[i]},k=({lowQualitySrc:e,highQualitySrc:t})=>{const[r,n]=i(e);return c((()=>{n(e);const r=new Image;r.src=t,r.onload=()=>{n(t)}}),[e,t]),{src:r,isBlurred:r===e}},T=n.useId,_={generateSuffix:!0},N=void 0!==T?(e,t=_)=>{const r=T(),i=t.generateSuffix?`${e}-${r}`:e,[o]=n.useState(i);return o}:(e,t=_)=>{const r=t.generateSuffix?`${e}-${l(8)}`:e,[i]=n.useState(r);return i};function z(e=200){const t=s(null),[r,n]=i({height:0,width:0}),o=u((()=>function(e,t){let r=!1;return(...n)=>{if(r)return;const i=e(...n);return 0!==t&&(r=!0,window.setTimeout((()=>{r=!1}),t)),i}}((()=>{var e,r;return n({height:(null===(e=t.current)||void 0===e?void 0:e.scrollHeight)||0,width:(null===(r=t.current)||void 0===r?void 0:r.scrollWidth)||0})}),e)),[e]);return c((()=>{var e,r;return n({height:(null===(e=t.current)||void 0===e?void 0:e.scrollHeight)||0,width:(null===(r=t.current)||void 0===r?void 0:r.scrollWidth)||0}),"undefined"!=typeof window&&window.addEventListener("resize",o),()=>{"undefined"!=typeof window&&window.removeEventListener("resize",o)}}),[o]),[t,r]}export{L as useAnimatedHeight,w as useBrowserPreferences,D as useClickOutside,z as useElementDimensions,S as useFocusOutside,N as useId,O as useIntersectionObserver,C as useKeyListener,b as useMutationObserver,y as usePreviousValue,k as useProgressiveImg,H as useScreen,I as useScrollIntoView};

package.json

 {
     "name": "@fremtind/jkl-react-hooks",
-    "version": "9.0.0",
+    "version": "9.0.1",
     "publishConfig": {
@@ -55,3 +55,3 @@ "access": "public"
     },
-    "gitHead": "a9ef7e7b8b7b04d90cdc9300aced2e68ea341120"
+    "gitHead": "750291a511e5f2309216fe916cef667be22b13d8"
 }

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

80112

increased by0.16%

No dependency changes