@helsenorge/designsystem-react 4.3.0 → 4.4.0

package/hooks/useSticky.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSticky.d.ts","sourceRoot":"","sources":["../../src/hooks/useSticky.ts"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,UAAU,oBAAoB;IAC5B,6CAA6C;IAC7C,eAAe,EAAE,OAAO,CAAC;IACzB,+CAA+C;IAC/C,eAAe,EAAE,OAAO,CAAC;IACzB,6CAA6C;IAC7C,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,qCAAqC;IACrC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AACD;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,eAAgB,MAAM,SAAS,CAAC,WAAW,CAAC,aAAa,MAAM,SAAS,CAAC,WAAW,CAAC,KAAG,oBAsB7G,CAAC"}
+{"version":3,"file":"useSticky.d.ts","sourceRoot":"","sources":["../../src/hooks/useSticky.ts"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,UAAU,qBAAqB;IAC7B,0DAA0D;IAC1D,eAAe,EAAE,OAAO,CAAC;IACzB,oFAAoF;IACpF,eAAe,EAAE,OAAO,CAAC;IACzB,6CAA6C;IAC7C,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,qCAAqC;IACrC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,eACR,MAAM,SAAS,CAAC,WAAW,CAAC,aAC7B,MAAM,SAAS,CAAC,WAAW,CAAC,mBACvB,KAAK,GAAG,QAAQ,KAC/B,qBAuBF,CAAC"}

package/hooks/useSticky.js

@@ -1,2 +1,2 @@
-import{useState as t}from"react";import{useLayoutEvent as O}from"./useLayoutEvent.js";import"../utils/debounce.js";const E=(i,s)=>{const[c,d]=t(!1),[h,r]=t(!1),[u,a]=t(),[f,g]=t();return O(()=>{var n,o;const{top:l=0,width:m=0,bottom:C=0}=((n=i.current)==null?void 0:n.getBoundingClientRect())||{},e=((o=s.current)==null?void 0:o.getBoundingClientRect().height)??0;d(l<=0),r(C<=e),g(m),a(e)},["resize","scroll"]),{isOutsideWindow:c,isLeavingWindow:h,offsetHeight:u,contentWidth:f}};export{E as useSticky};
+import{useState as t}from"react";import{useLayoutEvent as C}from"./useLayoutEvent.js";import"../utils/debounce.js";const L=(s,c,d="top")=>{const[h,r]=t(!1),[g,u]=t(!1),[a,f]=t(),[l,m]=t();return C(()=>{var o,i;const{top:p=0,width:w=0,bottom:e=0}=((o=s.current)==null?void 0:o.getBoundingClientRect())||{},n=((i=c.current)==null?void 0:i.getBoundingClientRect().height)??0;r(d==="top"?p<=0:e>window.innerHeight),u(e<=n),m(w),f(n)},["resize","scroll"]),{isOutsideWindow:h,isLeavingWindow:g,offsetHeight:a,contentWidth:l}};export{L as useSticky};
 //# sourceMappingURL=useSticky.js.map

package/hooks/useSticky.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSticky.js","sources":["../../src/hooks/useSticky.ts"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { useLayoutEvent } from './useLayoutEvent';\n\ninterface UseStickReturnValues {\n  /** Toppen av elementet er utenfor vinduet */\n  isOutsideWindow: boolean;\n  /** Innholdet er på vei helt ut av vinduet   */\n  isLeavingWindow: boolean;\n  /** Høyde på det sticky elementet i pixler */\n  offsetHeight: number | undefined;\n  /** Bredden til innholdet i pixler */\n  contentWidth: number | undefined;\n}\n/**\n * Sett et element til sticky hvis et annet element er delvis utenfor vinduet\n *\n * @param contentRef Element som sjekkes om det er utenfor eller innenfor vinduet\n * @param stickyRef Element som skal bli sticky\n * @returns Properties som kan brukes til å sette elementet sticky eller absolute\n */\nexport const useSticky = (contentRef: React.RefObject<HTMLElement>, stickyRef: React.RefObject<HTMLElement>): UseStickReturnValues => {\n  const [isOutsideWindow, setIsOutsideWindow] = useState<boolean>(false);\n  const [isLeavingWindow, setIsLeavingWindow] = useState<boolean>(false);\n  const [offsetHeight, setOffsetHeight] = useState<number>();\n  const [contentWidth, setContentWidth] = useState<number>();\n\n  const handleLayoutChange = () => {\n    const {\n      top: topOfContentElement = 0,\n      width: widthOfContentElement = 0,\n      bottom: bottomOfContentElement = 0,\n    } = contentRef.current?.getBoundingClientRect() || {};\n    const heightOfStickyElement = stickyRef.current?.getBoundingClientRect().height ?? 0;\n    setIsOutsideWindow(topOfContentElement <= 0);\n    setIsLeavingWindow(bottomOfContentElement <= heightOfStickyElement);\n    setContentWidth(widthOfContentElement);\n    setOffsetHeight(heightOfStickyElement);\n  };\n\n  useLayoutEvent(handleLayoutChange, ['resize', 'scroll']);\n\n  return { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth };\n};\n"],"names":["useSticky","contentRef","stickyRef","isOutsideWindow","setIsOutsideWindow","useState","isLeavingWindow","setIsLeavingWindow","offsetHeight","setOffsetHeight","contentWidth","setContentWidth","useLayoutEvent","topOfContentElement","widthOfContentElement","bottomOfContentElement","_a","heightOfStickyElement","_b"],"mappings":"mHAqBa,MAAAA,EAAY,CAACC,EAA0CC,IAAkE,CACpI,KAAM,CAACC,EAAiBC,CAAkB,EAAIC,EAAkB,EAAK,EAC/D,CAACC,EAAiBC,CAAkB,EAAIF,EAAkB,EAAK,EAC/D,CAACG,EAAcC,CAAe,EAAIJ,EAAiB,EACnD,CAACK,EAAcC,CAAe,EAAIN,EAAiB,EAezD,OAAAO,EAb2B,IAAM,SACzB,KAAA,CACJ,IAAKC,EAAsB,EAC3B,MAAOC,EAAwB,EAC/B,OAAQC,EAAyB,CAC/B,IAAAC,EAAAf,EAAW,UAAX,YAAAe,EAAoB,0BAA2B,CAAA,EAC7CC,IAAwBC,EAAAhB,EAAU,UAAV,YAAAgB,EAAmB,wBAAwB,SAAU,EACnFd,EAAmBS,GAAuB,CAAC,EAC3CN,EAAmBQ,GAA0BE,CAAqB,EAClEN,EAAgBG,CAAqB,EACrCL,EAAgBQ,CAAqB,CAAA,EAGJ,CAAC,SAAU,QAAQ,CAAC,EAEhD,CAAE,gBAAAd,EAAiB,gBAAAG,EAAiB,aAAAE,EAAc,aAAAE,CAAa,CACxE"}
+{"version":3,"file":"useSticky.js","sources":["../../src/hooks/useSticky.ts"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { useLayoutEvent } from './useLayoutEvent';\n\ninterface UseStickyReturnValues {\n  /** Toppen eller bunnen av elementet er utenfor vinduet */\n  isOutsideWindow: boolean;\n  /** Innholdet er på vei helt ut av vinduet. Fungerer bare med stickyPosition=top. */\n  isLeavingWindow: boolean;\n  /** Høyde på det sticky elementet i pixler */\n  offsetHeight: number | undefined;\n  /** Bredden til innholdet i pixler */\n  contentWidth: number | undefined;\n}\n\n/**\n * Sett et element til sticky hvis et annet element er delvis utenfor vinduet\n *\n * @param contentRef Element som sjekkes om det er utenfor eller innenfor vinduet\n * @param stickyRef Element som skal bli sticky\n * @param stickyPosition Om det sticky elementet er ment å vises øverst eller nederst på skjermen. Default: top\n * @returns Properties som kan brukes til å sette elementet sticky eller absolute\n */\nexport const useSticky = (\n  contentRef: React.RefObject<HTMLElement>,\n  stickyRef: React.RefObject<HTMLElement>,\n  stickyPosition: 'top' | 'bottom' = 'top'\n): UseStickyReturnValues => {\n  const [isOutsideWindow, setIsOutsideWindow] = useState<boolean>(false);\n  const [isLeavingWindow, setIsLeavingWindow] = useState<boolean>(false);\n  const [offsetHeight, setOffsetHeight] = useState<number>();\n  const [contentWidth, setContentWidth] = useState<number>();\n\n  const handleLayoutChange = (): void => {\n    const {\n      top: topOfContentElement = 0,\n      width: widthOfContentElement = 0,\n      bottom: bottomOfContentElement = 0,\n    } = contentRef.current?.getBoundingClientRect() || {};\n    const heightOfStickyElement = stickyRef.current?.getBoundingClientRect().height ?? 0;\n    setIsOutsideWindow(stickyPosition === 'top' ? topOfContentElement <= 0 : bottomOfContentElement > window.innerHeight);\n\n    setIsLeavingWindow(bottomOfContentElement <= heightOfStickyElement);\n    setContentWidth(widthOfContentElement);\n    setOffsetHeight(heightOfStickyElement);\n  };\n\n  useLayoutEvent(handleLayoutChange, ['resize', 'scroll']);\n\n  return { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth };\n};\n"],"names":["useSticky","contentRef","stickyRef","stickyPosition","isOutsideWindow","setIsOutsideWindow","useState","isLeavingWindow","setIsLeavingWindow","offsetHeight","setOffsetHeight","contentWidth","setContentWidth","useLayoutEvent","topOfContentElement","widthOfContentElement","bottomOfContentElement","_a","heightOfStickyElement","_b"],"mappings":"mHAuBO,MAAMA,EAAY,CACvBC,EACAC,EACAC,EAAmC,QACT,CAC1B,KAAM,CAACC,EAAiBC,CAAkB,EAAIC,EAAkB,EAAK,EAC/D,CAACC,EAAiBC,CAAkB,EAAIF,EAAkB,EAAK,EAC/D,CAACG,EAAcC,CAAe,EAAIJ,EAAiB,EACnD,CAACK,EAAcC,CAAe,EAAIN,EAAiB,EAgBzD,OAAAO,EAd2B,IAAY,SAC/B,KAAA,CACJ,IAAKC,EAAsB,EAC3B,MAAOC,EAAwB,EAC/B,OAAQC,EAAyB,CAC/B,IAAAC,EAAAhB,EAAW,UAAX,YAAAgB,EAAoB,0BAA2B,CAAA,EAC7CC,IAAwBC,EAAAjB,EAAU,UAAV,YAAAiB,EAAmB,wBAAwB,SAAU,EACnFd,EAAmBF,IAAmB,MAAQW,GAAuB,EAAIE,EAAyB,OAAO,WAAW,EAEpHR,EAAmBQ,GAA0BE,CAAqB,EAClEN,EAAgBG,CAAqB,EACrCL,EAAgBQ,CAAqB,CAAA,EAGJ,CAAC,SAAU,QAAQ,CAAC,EAEhD,CAAE,gBAAAd,EAAiB,gBAAAG,EAAiB,aAAAE,EAAc,aAAAE,CAAa,CACxE"}

package/index.js

@@ -1,2 +1,2 @@
-import{theme as n}from"./theme/index.js";import{Breakpoint as d,useBreakpoint as v}from"./hooks/useBreakpoint.js";import{useFocusToggle as c}from"./hooks/useFocusToggle.js";import{useFocusTrap as I}from"./hooks/useFocusTrap.js";import{useHover as A}from"./hooks/useHover.js";import{useIntersectionObserver as g}from"./hooks/useIntersectionObserver.js";import{useIsVisible as F}from"./hooks/useIsVisible.js";import{useLayoutEvent as k}from"./hooks/useLayoutEvent.js";import{usePrevious as H}from"./hooks/usePrevious.js";import{useSticky as O}from"./hooks/useSticky.js";import{useSize as V}from"./hooks/useSize.js";import{useResizeObserver as B}from"./hooks/useResizeObserver.js";import{useToggle as P}from"./hooks/useToggle.js";import{useKeyboardEvent as D}from"./hooks/useKeyboardEvent.js";import{useOutsideEvent as L}from"./hooks/useOutsideEvent.js";import{useUuid as U}from"./hooks/useUuid.js";import{a as X}from"./uuid.js";import{AVERAGE_CHARACTER_WIDTH_PX as j,AnalyticsId as q,FormMode as w,FormVariant as J,IconSize as N,KeyboardEventKey as Q,ZIndex as Y}from"./constants.js";import"./theme/grid.js";import"./theme/palette.js";import"./theme/spacers.js";import"react";import"./hooks/useElementList.js";import"./hooks/useFocusableElements.js";import"./utils/focus.js";import"./utils/debounce.js";import"./utils/environment.js";export{j as AVERAGE_CHARACTER_WIDTH_PX,q as AnalyticsId,d as Breakpoint,w as FormMode,J as FormVariant,N as IconSize,Q as KeyboardEventKey,Y as ZIndex,n as theme,v as useBreakpoint,c as useFocusToggle,I as useFocusTrap,A as useHover,g as useIntersectionObserver,F as useIsVisible,D as useKeyboardEvent,k as useLayoutEvent,L as useOutsideEvent,H as usePrevious,B as useResizeObserver,V as useSize,O as useSticky,P as useToggle,U as useUuid,X as uuid};
+import{theme as a}from"./theme/index.js";import{Breakpoint as v,useBreakpoint as E}from"./hooks/useBreakpoint.js";import{useFocusToggle as y}from"./hooks/useFocusToggle.js";import{useFocusTrap as b}from"./hooks/useFocusTrap.js";import{useHover as T}from"./hooks/useHover.js";import{useIntersectionObserver as l}from"./hooks/useIntersectionObserver.js";import{useIsVisible as R}from"./hooks/useIsVisible.js";import{useLayoutEvent as z}from"./hooks/useLayoutEvent.js";import{usePrevious as K}from"./hooks/usePrevious.js";import{useSticky as S}from"./hooks/useSticky.js";import{useSize as _}from"./hooks/useSize.js";import{useResizeObserver as C}from"./hooks/useResizeObserver.js";import{useToggle as h}from"./hooks/useToggle.js";import{useKeyboardEvent as G}from"./hooks/useKeyboardEvent.js";import{useOutsideEvent as M}from"./hooks/useOutsideEvent.js";import{useUuid as W}from"./hooks/useUuid.js";import{a as Z}from"./uuid.js";import{AVERAGE_CHARACTER_WIDTH_PX as q,AnalyticsId as w,FormMode as J,FormVariant as N,IconSize as Q,KeyboardEventKey as Y,ZIndex as $}from"./constants.js";import"./theme/grid.js";import"./theme/palette.js";import"./theme/spacers.js";import"react";import"./hooks/useElementList.js";import"./hooks/useFocusableElements.js";import"./utils/focus.js";import"./hooks/usePseudoClasses.js";import"./utils/debounce.js";import"./utils/environment.js";export{q as AVERAGE_CHARACTER_WIDTH_PX,w as AnalyticsId,v as Breakpoint,J as FormMode,N as FormVariant,Q as IconSize,Y as KeyboardEventKey,$ as ZIndex,a as theme,E as useBreakpoint,y as useFocusToggle,b as useFocusTrap,T as useHover,l as useIntersectionObserver,R as useIsVisible,G as useKeyboardEvent,z as useLayoutEvent,M as useOutsideEvent,K as usePrevious,C as useResizeObserver,_ as useSize,S as useSticky,h as useToggle,W as useUuid,Z as uuid};
 //# sourceMappingURL=index.js.map

package/package.json

@@ -7,9 +7,12 @@
     "url": "https://github.com/helsenorge/designsystem"
   },
   "homepage": "https://helsenorge.design",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "author": "Helsenorge",
   "license": "MIT",
+  "dependencies": {
+    "storybook-addon-html-validator": "^0.0.12"
+  },
   "peerDependencies": {
     "bootstrap": "^4.6.2",
     "classnames": "^2.3.2",