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

Comparing version 8.0.2 to 8.1.0

build/browser/index.js

@@ -1,2 +0,2 @@
-import { useReducer, useEffect, useRef, useCallback, useLayoutEffect, useState, useMemo } from 'react';
+import { useState, useReducer, useEffect, useRef, useCallback, useId as useId$1, useMemo } from 'react';
 import { easings, timings, breakpoints } from '@fremtind/jkl-core';
@@ -12,7 +12,8 @@ import { nanoid } from 'nanoid';
 function getInitialMediaQueryMatch(mediaQuery) {
-  if (typeof window !== "undefined" && window.matchMedia) {
-    return window.matchMedia(mediaQuery).matches;
+  if (!window.matchMedia) {
+    // Enhetstester
+    return false;
   }
 
-  return false;
+  return window.matchMedia(mediaQuery).matches;
 }
@@ -79,14 +80,23 @@ /**
 
-const initializer = () => {
-  const prefersReducedMotion = getInitialMediaQueryMatch(PREFERS_REDUCED_MOTION);
-  const prefersColorScheme = getInitialMediaQueryMatch(PREFERS_LIGHT_COLOR_SCHEME) ? "light" : "dark";
-  return {
-    prefersColorScheme,
-    prefersReducedMotion
-  };
-};
-
 const useBrowserPreferences = () => {
-  const [state, dispatch] = useReducer(reducer$1, initialState, initializer);
+  const [hasMounted, setHasMounted] = useState(false);
+  const [state, dispatch] = useReducer(reducer$1, initialState);
   useEffect(() => {
+    setHasMounted(true);
+    const prefersReducedMotion = getInitialMediaQueryMatch(PREFERS_REDUCED_MOTION);
+    const prefersColorScheme = getInitialMediaQueryMatch(PREFERS_LIGHT_COLOR_SCHEME) ? "light" : "dark";
+    dispatch({
+      type: ActionType$1.PrefersReducedMotion,
+      value: prefersReducedMotion
+    });
+    dispatch({
+      type: ActionType$1.PrefersColorScheme,
+      value: prefersColorScheme
+    });
+  }, []);
+  useEffect(() => {
+    if (!hasMounted || !window.matchMedia) {
+      return;
+    }
+
     const onPrefersReducedMotionChange = e => {
@@ -106,14 +116,9 @@ dispatch({
 
-    if (typeof window !== "undefined" && window.matchMedia) {
-      addMediaQueryListener(window.matchMedia(PREFERS_REDUCED_MOTION), onPrefersReducedMotionChange);
-      addMediaQueryListener(window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME), onPrefersColorSchemeChange);
-    }
-
+    addMediaQueryListener(window.matchMedia(PREFERS_REDUCED_MOTION), onPrefersReducedMotionChange);
+    addMediaQueryListener(window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME), onPrefersColorSchemeChange);
     return () => {
-      if (typeof window !== "undefined" && window.matchMedia) {
-        removeMediaQueryListener(window.matchMedia(PREFERS_REDUCED_MOTION), onPrefersReducedMotionChange);
-        removeMediaQueryListener(window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME), onPrefersColorSchemeChange);
-      }
+      removeMediaQueryListener(window.matchMedia(PREFERS_REDUCED_MOTION), onPrefersReducedMotionChange);
+      removeMediaQueryListener(window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME), onPrefersColorSchemeChange);
     };
-  }, []);
+  }, [hasMounted]);
   return { ...state
@@ -123,5 +128,14 @@ };
 
+const usePreviousValue = value => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+
 const defaultEasing = easings.standard;
 const defaultTiming = timings.productive;
 function useAnimatedHeight(isOpen, options) {
+  const wasOpen = usePreviousValue(isOpen);
   const easing = (options === null || options === void 0 ? void 0 : options.easing) || defaultEasing;
@@ -136,3 +150,2 @@ const timing = (options === null || options === void 0 ? void 0 : options.timing) || defaultTiming;
   const elementRef = useRef(null);
-  const firstRender = useRef(true);
 
@@ -159,10 +172,15 @@ function handleTransitionEnd(event) {
 
-    if (firstRender.current) {
-      const element = getElement(elementRef);
+    const element = getElement(elementRef);
 
-      if (element && !isOpen) {
-        element.style.display = "none";
+    if (!element) {
+      return;
+    }
+
+    if (!isOpen) {
+      element.style.display = "none";
+
+      if (!wasOpen) {
+        // Første render eller rerender med isOpen false
+        return;
       }
-
-      return; // Do not play animation on first render
     }
@@ -181,2 +199,8 @@
 
+      if (isOpen) {
+        var _options$onFirstVisib;
+
+        options === null || options === void 0 ? void 0 : (_options$onFirstVisib = options.onFirstVisible) === null || _options$onFirstVisib === void 0 ? void 0 : _options$onFirstVisib.call(options);
+      }
+
       options === null || options === void 0 ? void 0 : (_options$onTransition3 = options.onTransitionEnd) === null || _options$onTransition3 === void 0 ? void 0 : _options$onTransition3.call(options, isOpen); // make sure to call callback when animation is off
@@ -187,31 +211,30 @@
 
-    const element = getElement(elementRef);
+    element.style.transition = transition;
+    element.style.display = "block";
+    element.style.overflow = "hidden";
 
-    if (element) {
-      element.style.transition = transition;
-      element.style.display = "block";
-      element.style.overflow = "hidden";
+    if (isOpen) {
+      var _options$onFirstVisib2;
 
-      if (isOpen) {
-        element.style.height = "0";
-        element.style.height = `${element.scrollHeight}px`;
-      } else {
-        // If the scrollHeight is 0 it means that we are transitioning from height 0 -> 0.
-        // This causes the "transitionend"-event to never fire and the element gets stuck with
-        // style: height: 0; display: block; overflow:hidden
-        if (element.scrollHeight === 0) {
-          element.removeAttribute("style");
-          return;
-        }
+      options === null || options === void 0 ? void 0 : (_options$onFirstVisib2 = options.onFirstVisible) === null || _options$onFirstVisib2 === void 0 ? void 0 : _options$onFirstVisib2.call(options);
+      element.style.height = "0";
+      element.style.height = `${element.scrollHeight}px`;
+    } else {
+      // If the scrollHeight is 0 it means that we are transitioning from height 0 -> 0.
+      // This causes the "transitionend"-event to never fire and the element gets stuck with
+      // style: height: 0; display: block; overflow:hidden
+      if (element.scrollHeight === 0) {
+        element.removeAttribute("style");
+        return;
+      }
 
-        element.style.height = `${element.scrollHeight}px`;
-        raf1.current = requestAnimationFrame(() => {
-          raf2.current = requestAnimationFrame(() => {
-            element.style.height = `${0}px`;
-          });
+      element.style.height = `${element.scrollHeight}px`;
+      raf1.current = requestAnimationFrame(() => {
+        raf2.current = requestAnimationFrame(() => {
+          element.style.height = `${0}px`;
         });
-      }
+      });
     }
-  }, [isOpen, options, transition, prefersReducedMotion]);
-  useLayoutEffect(() => {
+  }, [isOpen, options, wasOpen, transition, prefersReducedMotion]);
+  useEffect(() => {
     runAnimation();
@@ -235,3 +258,2 @@ }, [isOpen, runAnimation]);
     const r2 = raf2.current;
-    firstRender.current = false;
     return () => {
@@ -434,2 +456,3 @@ r1 && cancelAnimationFrame(r1);
 const useScreen = () => {
+  const [hasMounted, setHasMounted] = useState(false);
   const [device, deviceDispatch] = useReducer(reducer, {
@@ -442,3 +465,11 @@ isSmallDevice: false,
     isPortrait: false
-  }, () => Object.fromEntries(Object.entries(MEDIA_RULES).map(([key, rule]) => [key, getInitialMediaQueryMatch(rule)])));
+  });
+  useEffect(() => {
+    setHasMounted(true);
+    Object.entries(MEDIA_RULES).map(([key, rule]) => [key, getInitialMediaQueryMatch(rule)]).forEach(([key, value]) => {
+      if (value) {
+        deviceDispatch(createAction(key));
+      }
+    });
+  }, []);
   const createListener = useCallback(key => e => {
@@ -452,17 +483,17 @@ requestAnimationFrame(() => {
   useEffect(() => {
-    const eventListenerPairs = [];
-
-    if (typeof window !== "undefined" && window.matchMedia) {
-      Object.entries(MEDIA_RULES).forEach(([key, rule]) => {
-        const queryList = window.matchMedia(rule);
-        const listener = createListener(key);
-        eventListenerPairs.push([queryList, listener]);
-        addMediaQueryListener(queryList, listener);
-      });
+    if (!hasMounted || !window.matchMedia) {
+      return;
     }
 
+    const eventListenerPairs = [];
+    Object.entries(MEDIA_RULES).forEach(([key, rule]) => {
+      const queryList = window.matchMedia(rule);
+      const listener = createListener(key);
+      eventListenerPairs.push([queryList, listener]);
+      addMediaQueryListener(queryList, listener);
+    });
     return () => {
       eventListenerPairs.forEach(([queryList, listener]) => removeMediaQueryListener(queryList, listener));
     };
-  }, [createListener]);
+  }, [createListener, hasMounted]);
   return { ...device
@@ -517,14 +548,8 @@ };
 
-const usePreviousValue = value => {
-  const ref = useRef();
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-};
-
+// @ts-ignore: wait for types to land in main
 const defaultOptions = {
   generateSuffix: true
 };
-const useId = (id, options = defaultOptions) => {
+
+const useLegacyId = (id, options = defaultOptions) => {
   const elementId = options.generateSuffix ? `${id}-${nanoid(8)}` : id;
@@ -535,2 +560,11 @@ const [elId] = useState(elementId);
 
+const useModernId = (id, options = defaultOptions) => {
+  const reactId = useId$1();
+  const elementId = options.generateSuffix ? `${id}-${reactId}` : id;
+  const [elId] = useState(elementId);
+  return elId;
+};
+
+const useId = typeof useId$1 !== "undefined" ? useModernId : useLegacyId;
+
 // eslint-disable-next-line
@@ -537,0 +571,0 @@

build/browser/index.min.js

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

build/cjs/index.js

@@ -16,7 +16,8 @@ 'use strict';
 function getInitialMediaQueryMatch(mediaQuery) {
-  if (typeof window !== "undefined" && window.matchMedia) {
-    return window.matchMedia(mediaQuery).matches;
+  if (!window.matchMedia) {
+    // Enhetstester
+    return false;
   }
 
-  return false;
+  return window.matchMedia(mediaQuery).matches;
 }
@@ -83,14 +84,23 @@ /**
 
-const initializer = () => {
-  const prefersReducedMotion = getInitialMediaQueryMatch(PREFERS_REDUCED_MOTION);
-  const prefersColorScheme = getInitialMediaQueryMatch(PREFERS_LIGHT_COLOR_SCHEME) ? "light" : "dark";
-  return {
-    prefersColorScheme,
-    prefersReducedMotion
-  };
-};
-
 const useBrowserPreferences = () => {
-  const [state, dispatch] = react.useReducer(reducer$1, initialState, initializer);
+  const [hasMounted, setHasMounted] = react.useState(false);
+  const [state, dispatch] = react.useReducer(reducer$1, initialState);
   react.useEffect(() => {
+    setHasMounted(true);
+    const prefersReducedMotion = getInitialMediaQueryMatch(PREFERS_REDUCED_MOTION);
+    const prefersColorScheme = getInitialMediaQueryMatch(PREFERS_LIGHT_COLOR_SCHEME) ? "light" : "dark";
+    dispatch({
+      type: ActionType$1.PrefersReducedMotion,
+      value: prefersReducedMotion
+    });
+    dispatch({
+      type: ActionType$1.PrefersColorScheme,
+      value: prefersColorScheme
+    });
+  }, []);
+  react.useEffect(() => {
+    if (!hasMounted || !window.matchMedia) {
+      return;
+    }
+
     const onPrefersReducedMotionChange = e => {
@@ -110,14 +120,9 @@ dispatch({
 
-    if (typeof window !== "undefined" && window.matchMedia) {
-      addMediaQueryListener(window.matchMedia(PREFERS_REDUCED_MOTION), onPrefersReducedMotionChange);
-      addMediaQueryListener(window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME), onPrefersColorSchemeChange);
-    }
-
+    addMediaQueryListener(window.matchMedia(PREFERS_REDUCED_MOTION), onPrefersReducedMotionChange);
+    addMediaQueryListener(window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME), onPrefersColorSchemeChange);
     return () => {
-      if (typeof window !== "undefined" && window.matchMedia) {
-        removeMediaQueryListener(window.matchMedia(PREFERS_REDUCED_MOTION), onPrefersReducedMotionChange);
-        removeMediaQueryListener(window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME), onPrefersColorSchemeChange);
-      }
+      removeMediaQueryListener(window.matchMedia(PREFERS_REDUCED_MOTION), onPrefersReducedMotionChange);
+      removeMediaQueryListener(window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME), onPrefersColorSchemeChange);
     };
-  }, []);
+  }, [hasMounted]);
   return { ...state
@@ -127,5 +132,14 @@ };
 
+const usePreviousValue = value => {
+  const ref = react.useRef();
+  react.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+
 const defaultEasing = jklCore.easings.standard;
 const defaultTiming = jklCore.timings.productive;
 function useAnimatedHeight(isOpen, options) {
+  const wasOpen = usePreviousValue(isOpen);
   const easing = (options === null || options === void 0 ? void 0 : options.easing) || defaultEasing;
@@ -140,3 +154,2 @@ const timing = (options === null || options === void 0 ? void 0 : options.timing) || defaultTiming;
   const elementRef = react.useRef(null);
-  const firstRender = react.useRef(true);
 
@@ -163,10 +176,15 @@ function handleTransitionEnd(event) {
 
-    if (firstRender.current) {
-      const element = getElement(elementRef);
+    const element = getElement(elementRef);
 
-      if (element && !isOpen) {
-        element.style.display = "none";
+    if (!element) {
+      return;
+    }
+
+    if (!isOpen) {
+      element.style.display = "none";
+
+      if (!wasOpen) {
+        // Første render eller rerender med isOpen false
+        return;
       }
-
-      return; // Do not play animation on first render
     }
@@ -185,2 +203,8 @@
 
+      if (isOpen) {
+        var _options$onFirstVisib;
+
+        options === null || options === void 0 ? void 0 : (_options$onFirstVisib = options.onFirstVisible) === null || _options$onFirstVisib === void 0 ? void 0 : _options$onFirstVisib.call(options);
+      }
+
       options === null || options === void 0 ? void 0 : (_options$onTransition3 = options.onTransitionEnd) === null || _options$onTransition3 === void 0 ? void 0 : _options$onTransition3.call(options, isOpen); // make sure to call callback when animation is off
@@ -191,31 +215,30 @@
 
-    const element = getElement(elementRef);
+    element.style.transition = transition;
+    element.style.display = "block";
+    element.style.overflow = "hidden";
 
-    if (element) {
-      element.style.transition = transition;
-      element.style.display = "block";
-      element.style.overflow = "hidden";
+    if (isOpen) {
+      var _options$onFirstVisib2;
 
-      if (isOpen) {
-        element.style.height = "0";
-        element.style.height = `${element.scrollHeight}px`;
-      } else {
-        // If the scrollHeight is 0 it means that we are transitioning from height 0 -> 0.
-        // This causes the "transitionend"-event to never fire and the element gets stuck with
-        // style: height: 0; display: block; overflow:hidden
-        if (element.scrollHeight === 0) {
-          element.removeAttribute("style");
-          return;
-        }
+      options === null || options === void 0 ? void 0 : (_options$onFirstVisib2 = options.onFirstVisible) === null || _options$onFirstVisib2 === void 0 ? void 0 : _options$onFirstVisib2.call(options);
+      element.style.height = "0";
+      element.style.height = `${element.scrollHeight}px`;
+    } else {
+      // If the scrollHeight is 0 it means that we are transitioning from height 0 -> 0.
+      // This causes the "transitionend"-event to never fire and the element gets stuck with
+      // style: height: 0; display: block; overflow:hidden
+      if (element.scrollHeight === 0) {
+        element.removeAttribute("style");
+        return;
+      }
 
-        element.style.height = `${element.scrollHeight}px`;
-        raf1.current = requestAnimationFrame(() => {
-          raf2.current = requestAnimationFrame(() => {
-            element.style.height = `${0}px`;
-          });
+      element.style.height = `${element.scrollHeight}px`;
+      raf1.current = requestAnimationFrame(() => {
+        raf2.current = requestAnimationFrame(() => {
+          element.style.height = `${0}px`;
         });
-      }
+      });
     }
-  }, [isOpen, options, transition, prefersReducedMotion]);
-  react.useLayoutEffect(() => {
+  }, [isOpen, options, wasOpen, transition, prefersReducedMotion]);
+  react.useEffect(() => {
     runAnimation();
@@ -239,3 +262,2 @@ }, [isOpen, runAnimation]);
     const r2 = raf2.current;
-    firstRender.current = false;
     return () => {
@@ -438,2 +460,3 @@ r1 && cancelAnimationFrame(r1);
 const useScreen = () => {
+  const [hasMounted, setHasMounted] = react.useState(false);
   const [device, deviceDispatch] = react.useReducer(reducer, {
@@ -446,3 +469,11 @@ isSmallDevice: false,
     isPortrait: false
-  }, () => Object.fromEntries(Object.entries(MEDIA_RULES).map(([key, rule]) => [key, getInitialMediaQueryMatch(rule)])));
+  });
+  react.useEffect(() => {
+    setHasMounted(true);
+    Object.entries(MEDIA_RULES).map(([key, rule]) => [key, getInitialMediaQueryMatch(rule)]).forEach(([key, value]) => {
+      if (value) {
+        deviceDispatch(createAction(key));
+      }
+    });
+  }, []);
   const createListener = react.useCallback(key => e => {
@@ -456,17 +487,17 @@ requestAnimationFrame(() => {
   react.useEffect(() => {
-    const eventListenerPairs = [];
-
-    if (typeof window !== "undefined" && window.matchMedia) {
-      Object.entries(MEDIA_RULES).forEach(([key, rule]) => {
-        const queryList = window.matchMedia(rule);
-        const listener = createListener(key);
-        eventListenerPairs.push([queryList, listener]);
-        addMediaQueryListener(queryList, listener);
-      });
+    if (!hasMounted || !window.matchMedia) {
+      return;
     }
 
+    const eventListenerPairs = [];
+    Object.entries(MEDIA_RULES).forEach(([key, rule]) => {
+      const queryList = window.matchMedia(rule);
+      const listener = createListener(key);
+      eventListenerPairs.push([queryList, listener]);
+      addMediaQueryListener(queryList, listener);
+    });
     return () => {
       eventListenerPairs.forEach(([queryList, listener]) => removeMediaQueryListener(queryList, listener));
     };
-  }, [createListener]);
+  }, [createListener, hasMounted]);
   return { ...device
@@ -521,14 +552,8 @@ };
 
-const usePreviousValue = value => {
-  const ref = react.useRef();
-  react.useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-};
-
+// @ts-ignore: wait for types to land in main
 const defaultOptions = {
   generateSuffix: true
 };
-const useId = (id, options = defaultOptions) => {
+
+const useLegacyId = (id, options = defaultOptions) => {
   const elementId = options.generateSuffix ? `${id}-${nanoid.nanoid(8)}` : id;
@@ -539,2 +564,11 @@ const [elId] = react.useState(elementId);
 
+const useModernId = (id, options = defaultOptions) => {
+  const reactId = react.useId();
+  const elementId = options.generateSuffix ? `${id}-${reactId}` : id;
+  const [elId] = react.useState(elementId);
+  return elId;
+};
+
+const useId = typeof react.useId !== "undefined" ? useModernId : useLegacyId;
+
 // eslint-disable-next-line
@@ -541,0 +575,0 @@

build/esm/index.js

@@ -1,2 +0,2 @@
-import { useReducer, useEffect, useRef, useCallback, useLayoutEffect, useState, useMemo } from 'react';
+import { useState, useReducer, useEffect, useRef, useCallback, useId as useId$1, useMemo } from 'react';
 import { easings, timings, breakpoints } from '@fremtind/jkl-core';
@@ -12,7 +12,8 @@ import { nanoid } from 'nanoid';
 function getInitialMediaQueryMatch(mediaQuery) {
-  if (typeof window !== "undefined" && window.matchMedia) {
-    return window.matchMedia(mediaQuery).matches;
+  if (!window.matchMedia) {
+    // Enhetstester
+    return false;
   }
 
-  return false;
+  return window.matchMedia(mediaQuery).matches;
 }
@@ -79,14 +80,23 @@ /**
 
-const initializer = () => {
-  const prefersReducedMotion = getInitialMediaQueryMatch(PREFERS_REDUCED_MOTION);
-  const prefersColorScheme = getInitialMediaQueryMatch(PREFERS_LIGHT_COLOR_SCHEME) ? "light" : "dark";
-  return {
-    prefersColorScheme,
-    prefersReducedMotion
-  };
-};
-
 const useBrowserPreferences = () => {
-  const [state, dispatch] = useReducer(reducer$1, initialState, initializer);
+  const [hasMounted, setHasMounted] = useState(false);
+  const [state, dispatch] = useReducer(reducer$1, initialState);
   useEffect(() => {
+    setHasMounted(true);
+    const prefersReducedMotion = getInitialMediaQueryMatch(PREFERS_REDUCED_MOTION);
+    const prefersColorScheme = getInitialMediaQueryMatch(PREFERS_LIGHT_COLOR_SCHEME) ? "light" : "dark";
+    dispatch({
+      type: ActionType$1.PrefersReducedMotion,
+      value: prefersReducedMotion
+    });
+    dispatch({
+      type: ActionType$1.PrefersColorScheme,
+      value: prefersColorScheme
+    });
+  }, []);
+  useEffect(() => {
+    if (!hasMounted || !window.matchMedia) {
+      return;
+    }
+
     const onPrefersReducedMotionChange = e => {
@@ -106,14 +116,9 @@ dispatch({
 
-    if (typeof window !== "undefined" && window.matchMedia) {
-      addMediaQueryListener(window.matchMedia(PREFERS_REDUCED_MOTION), onPrefersReducedMotionChange);
-      addMediaQueryListener(window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME), onPrefersColorSchemeChange);
-    }
-
+    addMediaQueryListener(window.matchMedia(PREFERS_REDUCED_MOTION), onPrefersReducedMotionChange);
+    addMediaQueryListener(window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME), onPrefersColorSchemeChange);
     return () => {
-      if (typeof window !== "undefined" && window.matchMedia) {
-        removeMediaQueryListener(window.matchMedia(PREFERS_REDUCED_MOTION), onPrefersReducedMotionChange);
-        removeMediaQueryListener(window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME), onPrefersColorSchemeChange);
-      }
+      removeMediaQueryListener(window.matchMedia(PREFERS_REDUCED_MOTION), onPrefersReducedMotionChange);
+      removeMediaQueryListener(window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME), onPrefersColorSchemeChange);
     };
-  }, []);
+  }, [hasMounted]);
   return { ...state
@@ -123,5 +128,14 @@ };
 
+const usePreviousValue = value => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+
 const defaultEasing = easings.standard;
 const defaultTiming = timings.productive;
 function useAnimatedHeight(isOpen, options) {
+  const wasOpen = usePreviousValue(isOpen);
   const easing = (options === null || options === void 0 ? void 0 : options.easing) || defaultEasing;
@@ -136,3 +150,2 @@ const timing = (options === null || options === void 0 ? void 0 : options.timing) || defaultTiming;
   const elementRef = useRef(null);
-  const firstRender = useRef(true);
 
@@ -159,10 +172,15 @@ function handleTransitionEnd(event) {
 
-    if (firstRender.current) {
-      const element = getElement(elementRef);
+    const element = getElement(elementRef);
 
-      if (element && !isOpen) {
-        element.style.display = "none";
+    if (!element) {
+      return;
+    }
+
+    if (!isOpen) {
+      element.style.display = "none";
+
+      if (!wasOpen) {
+        // Første render eller rerender med isOpen false
+        return;
       }
-
-      return; // Do not play animation on first render
     }
@@ -181,2 +199,8 @@
 
+      if (isOpen) {
+        var _options$onFirstVisib;
+
+        options === null || options === void 0 ? void 0 : (_options$onFirstVisib = options.onFirstVisible) === null || _options$onFirstVisib === void 0 ? void 0 : _options$onFirstVisib.call(options);
+      }
+
       options === null || options === void 0 ? void 0 : (_options$onTransition3 = options.onTransitionEnd) === null || _options$onTransition3 === void 0 ? void 0 : _options$onTransition3.call(options, isOpen); // make sure to call callback when animation is off
@@ -187,31 +211,30 @@
 
-    const element = getElement(elementRef);
+    element.style.transition = transition;
+    element.style.display = "block";
+    element.style.overflow = "hidden";
 
-    if (element) {
-      element.style.transition = transition;
-      element.style.display = "block";
-      element.style.overflow = "hidden";
+    if (isOpen) {
+      var _options$onFirstVisib2;
 
-      if (isOpen) {
-        element.style.height = "0";
-        element.style.height = `${element.scrollHeight}px`;
-      } else {
-        // If the scrollHeight is 0 it means that we are transitioning from height 0 -> 0.
-        // This causes the "transitionend"-event to never fire and the element gets stuck with
-        // style: height: 0; display: block; overflow:hidden
-        if (element.scrollHeight === 0) {
-          element.removeAttribute("style");
-          return;
-        }
+      options === null || options === void 0 ? void 0 : (_options$onFirstVisib2 = options.onFirstVisible) === null || _options$onFirstVisib2 === void 0 ? void 0 : _options$onFirstVisib2.call(options);
+      element.style.height = "0";
+      element.style.height = `${element.scrollHeight}px`;
+    } else {
+      // If the scrollHeight is 0 it means that we are transitioning from height 0 -> 0.
+      // This causes the "transitionend"-event to never fire and the element gets stuck with
+      // style: height: 0; display: block; overflow:hidden
+      if (element.scrollHeight === 0) {
+        element.removeAttribute("style");
+        return;
+      }
 
-        element.style.height = `${element.scrollHeight}px`;
-        raf1.current = requestAnimationFrame(() => {
-          raf2.current = requestAnimationFrame(() => {
-            element.style.height = `${0}px`;
-          });
+      element.style.height = `${element.scrollHeight}px`;
+      raf1.current = requestAnimationFrame(() => {
+        raf2.current = requestAnimationFrame(() => {
+          element.style.height = `${0}px`;
         });
-      }
+      });
     }
-  }, [isOpen, options, transition, prefersReducedMotion]);
-  useLayoutEffect(() => {
+  }, [isOpen, options, wasOpen, transition, prefersReducedMotion]);
+  useEffect(() => {
     runAnimation();
@@ -235,3 +258,2 @@ }, [isOpen, runAnimation]);
     const r2 = raf2.current;
-    firstRender.current = false;
     return () => {
@@ -434,2 +456,3 @@ r1 && cancelAnimationFrame(r1);
 const useScreen = () => {
+  const [hasMounted, setHasMounted] = useState(false);
   const [device, deviceDispatch] = useReducer(reducer, {
@@ -442,3 +465,11 @@ isSmallDevice: false,
     isPortrait: false
-  }, () => Object.fromEntries(Object.entries(MEDIA_RULES).map(([key, rule]) => [key, getInitialMediaQueryMatch(rule)])));
+  });
+  useEffect(() => {
+    setHasMounted(true);
+    Object.entries(MEDIA_RULES).map(([key, rule]) => [key, getInitialMediaQueryMatch(rule)]).forEach(([key, value]) => {
+      if (value) {
+        deviceDispatch(createAction(key));
+      }
+    });
+  }, []);
   const createListener = useCallback(key => e => {
@@ -452,17 +483,17 @@ requestAnimationFrame(() => {
   useEffect(() => {
-    const eventListenerPairs = [];
-
-    if (typeof window !== "undefined" && window.matchMedia) {
-      Object.entries(MEDIA_RULES).forEach(([key, rule]) => {
-        const queryList = window.matchMedia(rule);
-        const listener = createListener(key);
-        eventListenerPairs.push([queryList, listener]);
-        addMediaQueryListener(queryList, listener);
-      });
+    if (!hasMounted || !window.matchMedia) {
+      return;
     }
 
+    const eventListenerPairs = [];
+    Object.entries(MEDIA_RULES).forEach(([key, rule]) => {
+      const queryList = window.matchMedia(rule);
+      const listener = createListener(key);
+      eventListenerPairs.push([queryList, listener]);
+      addMediaQueryListener(queryList, listener);
+    });
     return () => {
       eventListenerPairs.forEach(([queryList, listener]) => removeMediaQueryListener(queryList, listener));
     };
-  }, [createListener]);
+  }, [createListener, hasMounted]);
   return { ...device
@@ -517,14 +548,8 @@ };
 
-const usePreviousValue = value => {
-  const ref = useRef();
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-};
-
+// @ts-ignore: wait for types to land in main
 const defaultOptions = {
   generateSuffix: true
 };
-const useId = (id, options = defaultOptions) => {
+
+const useLegacyId = (id, options = defaultOptions) => {
   const elementId = options.generateSuffix ? `${id}-${nanoid(8)}` : id;
@@ -535,2 +560,11 @@ const [elId] = useState(elementId);
 
+const useModernId = (id, options = defaultOptions) => {
+  const reactId = useId$1();
+  const elementId = options.generateSuffix ? `${id}-${reactId}` : id;
+  const [elId] = useState(elementId);
+  return elId;
+};
+
+const useId = typeof useId$1 !== "undefined" ? useModernId : useLegacyId;
+
 // eslint-disable-next-line
@@ -537,0 +571,0 @@

build/esm/index.min.js

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

build/useAnimatedHeight.d.ts

@@ -15,4 +15,11 @@ import { RefObject } from "react";
     onTransitionStart?: (isOpening: boolean) => void;
+    /**
+     * Kalles rett etter at elementet har fått display: block; i stedet for hidden;
+     * Nyttig om du må flytte fokus inn i elementet og ikke vil vente til animasjonen er ferdig.
+     * Her er ikke innholdet _visuelt_ synlig ennå, men det er "synlig" for DOM i den
+     * forstand at det _ikke_ er display: hidden;
+     */
+    onFirstVisible?: () => void;
     onTransitionEnd?: (isOpen: boolean) => void;
 }
 export declare function useAnimatedHeight<T extends HTMLElement>(isOpen: boolean, options?: UseAnimatedHeightOptions): [RefObject<T>, () => void];

build/useId.d.ts

 export interface UseIdOptions {
+    /** @default true */
     generateSuffix?: boolean;
 }
 export declare const useId: (id: string, options?: UseIdOptions) => string;

package.json

 {
     "name": "@fremtind/jkl-react-hooks",
-    "version": "8.0.2",
+    "version": "8.1.0",
     "publishConfig": {
@@ -32,16 +32,17 @@ "access": "public"
         "test": "echo \"Error: run tests from root\" && exit 1",
-        "dev:style": "lerna exec --scope=@fremtind/jkl-button yarn build:watch",
-        "dev:js": "parcel documentation/index.html",
+        "dev:js": "ESBUILD_WATCH=true node ./esbuild.mjs",
+        "dev:server": "node ./dist/server.js",
+        "predev": "node ./esbuild.mjs",
         "dev": "run-p dev:*"
     },
     "dependencies": {
-        "@babel/runtime": "^7.17.7",
-        "@fremtind/jkl-core": "^9.3.1",
-        "nanoid": "^3.3.1"
+        "@babel/runtime": "^7.17.8",
+        "@fremtind/jkl-core": "^9.3.2",
+        "nanoid": "^3.3.2"
     },
     "peerDependencies": {
-        "@types/react": "^16.8.6 || ^17.0.0",
-        "@types/react-dom": "^16.8.6 || ^17.0.0",
-        "react": "^16.8.6 || ^17.0.0",
-        "react-dom": "^16.8.6 || ^17.0.0"
+        "@types/react": "^16.8.6 || ^17.0.0 || ^18.0.0",
+        "@types/react-dom": "^16.8.6 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.6 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.6 || ^17.0.0 || ^18.0.0"
     },
@@ -55,3 +56,3 @@ "repository": {
     },
-    "gitHead": "4f356717bf1b1d913e1fde34692a1aefc5adc3f8"
+    "gitHead": "b78cc3b8195b7ed8304d8de1e1b928e2ace0152f"
 }

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

76995

increased by5.4%

Lines of code

1733

increased by6.12%

Dependency changes

• + Added@types/react@18.3.12(transitive)

• + Added@types/react-dom@18.3.1(transitive)

• + Addedreact@18.3.1(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedscheduler@0.23.2(transitive)

• - Removed@types/react@17.0.83(transitive)

• - Removed@types/react-dom@17.0.25(transitive)

• - Removed@types/scheduler@0.16.8(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedreact@17.0.2(transitive)

• - Removedreact-dom@17.0.2(transitive)

• - Removedscheduler@0.20.2(transitive)

• Updated@babel/runtime@^7.17.8

• Updated@fremtind/jkl-core@^9.3.2

• Updatednanoid@^3.3.2