Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Socket
Sign inDemoInstall

@fremtind/jkl-react-hooks

Package Overview
Dependencies
Maintainers
3
Versions
209
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 8.2.5 to 9.0.0

2

build/browser/index.js

@@ -0,3 +1,3 @@

import { easings, timings, breakpoints } from '@fremtind/jkl-core';
import React, { useState, useReducer, useEffect, useRef, useCallback, useMemo } from 'react';
import { easings, timings, breakpoints } from '@fremtind/jkl-core';
import { nanoid } from 'nanoid';

@@ -4,0 +4,0 @@

2

build/browser/index.min.js

@@ -1,1 +0,1 @@

import e,{useState as t,useReducer as r,useEffect as n,useRef as i,useCallback as o,useMemo as c}from"react";import{easings as s,timings as d,breakpoints as u}from"@fremtind/jkl-core";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,i]=t(!1),[o,c]=r(p,h);return n((()=>{i(!0);const e=a("(prefers-reduced-motion: reduce)"),t=a("(prefers-color-scheme: light)")?"light":"dark",r=a("(forced-colors: active)");c({type:f.PrefersReducedMotion,value:e}),c({type:f.PrefersColorScheme,value:t}),c({type:f.ForcedColors,value:r})}),[]),n((()=>{if(!e||!window.matchMedia)return;const t=e=>{c({type:f.PrefersReducedMotion,value:e.matches})},r=e=>{c({type:f.PrefersColorScheme,value:e.matches?"light":"dark"})},n=e=>{c({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)"),n),()=>{m(window.matchMedia("(prefers-reduced-motion: reduce)"),t),m(window.matchMedia("(prefers-color-scheme: light)"),r),m(window.matchMedia("(forced-colors: active)"),n)}}),[e]),{...o}},y=e=>{const t=i();return n((()=>{t.current=e})),t.current},g=s.standard,E=d.productive;function L(e,t){const r=y(e),c=(null==t?void 0:t.easing)||g,s=`${(null==t?void 0:t.timing)||E} height ${c}`,{prefersReducedMotion:d}=w(),u=i(),l=i(),a=i(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=o((()=>{var n;const i=M(a);if(i&&(e||(i.style.display="none",r)))if(null==t||null===(n=t.onTransitionStart)||void 0===n||n.call(t,e),d){var o;const r=M(a);var c;r&&r.removeAttribute("style"),e&&(null==t||null===(c=t.onFirstVisible)||void 0===c||c.call(t)),null==t||null===(o=t.onTransitionEnd)||void 0===o||o.call(t,e)}else if(i.style.transition=s,i.style.display="block",i.style.overflow="hidden",e){var v;null==t||null===(v=t.onFirstVisible)||void 0===v||v.call(t),i.style.height="0",i.style.height=`${i.scrollHeight}px`}else{if(0===i.scrollHeight)return void i.removeAttribute("style");i.style.height=`${i.scrollHeight}px`,u.current=requestAnimationFrame((()=>{l.current=requestAnimationFrame((()=>{i.style.height="0px"}))}))}}),[e,t,r,s,d]);return n((()=>{m()}),[e,m]),n((()=>{const e=M(a);return e&&e.addEventListener("transitionend",v),()=>{e&&e.removeEventListener("transitionend",v)}}),[e]),n((()=>{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()}n((()=>(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()}n((()=>(e&&document&&document.addEventListener("focusin",r),()=>{document&&document.removeEventListener("focusin",r)})))}function C(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 x=()=>"undefined"!=typeof window&&"undefined"!=typeof MutationObserver,b=(e,t,r)=>{const o=i(null);n((()=>{let n=o.current;if(x()){const i=e.current;n&&n.disconnect(),n=new MutationObserver(t),i&&n.observe(i,r)}return()=>{x()&&n&&n.disconnect()}}),[e,t,r])},A=()=>"undefined"!=typeof window&&"undefined"!=typeof IntersectionObserver,O=(e,t,r,o)=>{const c=i(null);n((()=>{let n=c.current;if(A()){const r=e.current;n&&n.disconnect(),n=new IntersectionObserver(t,o),r&&n.observe(r)}else r();return()=>{A()&&n&&n.disconnect()}}),[e,t,r,o])};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: ${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=e=>({type:"isLandscape"===e||"isPortrait"===e?$.orientation:$.deviceSize,property:e}),H=()=>{const[e,i]=t(!1),[c,s]=r(P,{isSmallDevice:!1,isMediumDevice:!1,isLargeDevice:!1,isXlDevice:!1,isLandscape:!1,isPortrait:!1});n((()=>{i(!0),Object.entries(F).map((([e,t])=>[e,a(t)])).forEach((([e,t])=>{t&&s(R(e))}))}),[]);const d=o((e=>t=>{requestAnimationFrame((()=>{t.matches&&s(R(e))}))}),[]);return n((()=>{if(!e||!window.matchMedia)return;const t=[];return Object.entries(F).forEach((([e,r])=>{const n=window.matchMedia(r),i=d(e);t.push([n,i]),v(n,i)})),()=>{t.forEach((([e,t])=>m(e,t)))}}),[d,e]),{...c}},I=({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]},k=({lowQualitySrc:e,highQualitySrc:r})=>{const[i,o]=t(e);return n((()=>{o(e);const t=new Image;t.src=r,t.onload=()=>{o(r)}}),[e,r]),{src:i,isBlurred:i===e}},T=e.useId,_={generateSuffix:!0},N=void 0!==T?(t,r=_)=>{const n=T(),i=r.generateSuffix?`${t}-${n}`:t,[o]=e.useState(i);return o}:(t,r=_)=>{const n=r.generateSuffix?`${t}-${l(8)}`:t,[i]=e.useState(n);return i};function z(e=200){const r=i(null),[o,s]=t({height:0,width:0}),d=c((()=>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,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 n((()=>{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,o]}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&&(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};

2

build/cjs/index.js

@@ -5,4 +5,4 @@ 'use strict';

var jklCore = require('@fremtind/jkl-core');
var React = require('react');
var jklCore = require('@fremtind/jkl-core');
var nanoid = require('nanoid');

@@ -9,0 +9,0 @@

2

build/esm/index.js

@@ -0,3 +1,3 @@

import { easings, timings, breakpoints } from '@fremtind/jkl-core';
import React, { useState, useReducer, useEffect, useRef, useCallback, useMemo } from 'react';
import { easings, timings, breakpoints } from '@fremtind/jkl-core';
import { nanoid } from 'nanoid';

@@ -4,0 +4,0 @@

2

build/esm/index.min.js

@@ -1,1 +0,1 @@

import e,{useState as t,useReducer as r,useEffect as n,useRef as i,useCallback as o,useMemo as c}from"react";import{easings as s,timings as d,breakpoints as u}from"@fremtind/jkl-core";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,i]=t(!1),[o,c]=r(p,h);return n((()=>{i(!0);const e=a("(prefers-reduced-motion: reduce)"),t=a("(prefers-color-scheme: light)")?"light":"dark",r=a("(forced-colors: active)");c({type:f.PrefersReducedMotion,value:e}),c({type:f.PrefersColorScheme,value:t}),c({type:f.ForcedColors,value:r})}),[]),n((()=>{if(!e||!window.matchMedia)return;const t=e=>{c({type:f.PrefersReducedMotion,value:e.matches})},r=e=>{c({type:f.PrefersColorScheme,value:e.matches?"light":"dark"})},n=e=>{c({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)"),n),()=>{m(window.matchMedia("(prefers-reduced-motion: reduce)"),t),m(window.matchMedia("(prefers-color-scheme: light)"),r),m(window.matchMedia("(forced-colors: active)"),n)}}),[e]),{...o}},y=e=>{const t=i();return n((()=>{t.current=e})),t.current},g=s.standard,E=d.productive;function L(e,t){const r=y(e),c=(null==t?void 0:t.easing)||g,s=`${(null==t?void 0:t.timing)||E} height ${c}`,{prefersReducedMotion:d}=w(),u=i(),l=i(),a=i(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=o((()=>{var n;const i=M(a);if(i&&(e||(i.style.display="none",r)))if(null==t||null===(n=t.onTransitionStart)||void 0===n||n.call(t,e),d){var o;const r=M(a);var c;r&&r.removeAttribute("style"),e&&(null==t||null===(c=t.onFirstVisible)||void 0===c||c.call(t)),null==t||null===(o=t.onTransitionEnd)||void 0===o||o.call(t,e)}else if(i.style.transition=s,i.style.display="block",i.style.overflow="hidden",e){var v;null==t||null===(v=t.onFirstVisible)||void 0===v||v.call(t),i.style.height="0",i.style.height=`${i.scrollHeight}px`}else{if(0===i.scrollHeight)return void i.removeAttribute("style");i.style.height=`${i.scrollHeight}px`,u.current=requestAnimationFrame((()=>{l.current=requestAnimationFrame((()=>{i.style.height="0px"}))}))}}),[e,t,r,s,d]);return n((()=>{m()}),[e,m]),n((()=>{const e=M(a);return e&&e.addEventListener("transitionend",v),()=>{e&&e.removeEventListener("transitionend",v)}}),[e]),n((()=>{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()}n((()=>(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()}n((()=>(e&&document&&document.addEventListener("focusin",r),()=>{document&&document.removeEventListener("focusin",r)})))}function C(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 x=()=>"undefined"!=typeof window&&"undefined"!=typeof MutationObserver,b=(e,t,r)=>{const o=i(null);n((()=>{let n=o.current;if(x()){const i=e.current;n&&n.disconnect(),n=new MutationObserver(t),i&&n.observe(i,r)}return()=>{x()&&n&&n.disconnect()}}),[e,t,r])},A=()=>"undefined"!=typeof window&&"undefined"!=typeof IntersectionObserver,O=(e,t,r,o)=>{const c=i(null);n((()=>{let n=c.current;if(A()){const r=e.current;n&&n.disconnect(),n=new IntersectionObserver(t,o),r&&n.observe(r)}else r();return()=>{A()&&n&&n.disconnect()}}),[e,t,r,o])};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: ${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=e=>({type:"isLandscape"===e||"isPortrait"===e?$.orientation:$.deviceSize,property:e}),H=()=>{const[e,i]=t(!1),[c,s]=r(P,{isSmallDevice:!1,isMediumDevice:!1,isLargeDevice:!1,isXlDevice:!1,isLandscape:!1,isPortrait:!1});n((()=>{i(!0),Object.entries(F).map((([e,t])=>[e,a(t)])).forEach((([e,t])=>{t&&s(R(e))}))}),[]);const d=o((e=>t=>{requestAnimationFrame((()=>{t.matches&&s(R(e))}))}),[]);return n((()=>{if(!e||!window.matchMedia)return;const t=[];return Object.entries(F).forEach((([e,r])=>{const n=window.matchMedia(r),i=d(e);t.push([n,i]),v(n,i)})),()=>{t.forEach((([e,t])=>m(e,t)))}}),[d,e]),{...c}},I=({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]},k=({lowQualitySrc:e,highQualitySrc:r})=>{const[i,o]=t(e);return n((()=>{o(e);const t=new Image;t.src=r,t.onload=()=>{o(r)}}),[e,r]),{src:i,isBlurred:i===e}},T=e.useId,_={generateSuffix:!0},N=void 0!==T?(t,r=_)=>{const n=T(),i=r.generateSuffix?`${t}-${n}`:t,[o]=e.useState(i);return o}:(t,r=_)=>{const n=r.generateSuffix?`${t}-${l(8)}`:t,[i]=e.useState(n);return i};function z(e=200){const r=i(null),[o,s]=t({height:0,width:0}),d=c((()=>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,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 n((()=>{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,o]}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&&(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};

2

build/useAnimatedHeight.d.ts

@@ -0,3 +1,3 @@

import type { Easing, Timing } from "@fremtind/jkl-core";
import { RefObject } from "react";
import type { Easing, Timing } from "@fremtind/jkl-core";
export interface UseAnimatedHeightOptions {

@@ -4,0 +4,0 @@ /**

6

package.json
{
"name": "@fremtind/jkl-react-hooks",
"version": "8.2.5",
"version": "9.0.0",
"publishConfig": {

@@ -39,3 +39,3 @@ "access": "public"

"@babel/runtime": "^7.17.8",
"@fremtind/jkl-core": "^9.7.0",
"@fremtind/jkl-core": "^10.0.0",
"nanoid": "^3.3.2"

@@ -56,3 +56,3 @@ },

},
"gitHead": "bef3e12bbebb1f1fd0e68c3fa88b6a618d418f7a"
"gitHead": "a9ef7e7b8b7b04d90cdc9300aced2e68ea341120"
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc